/* Responsive navigation & interactive components */

/* Desktop nav: visible from 860px */
.nav-desktop {
  display: none;
}

@media (min-width: 860px) {
  .nav-desktop {
    display: block;
  }

  .nav-mobile-toggle {
    display: none !important;
  }

  .nav-mobile {
    display: none !important;
  }
}

/* Mobile menu toggle: visible below 860px */
.nav-mobile-toggle {
  display: block;
}

@media (max-width: 859px) {
  .nav-mobile-toggle {
    display: block;
  }
}

/* Mobile nav panel */
.nav-mobile[hidden] {
  display: none !important;
}

header.is-menu-open .nav-mobile {
  display: block !important;
}

header .nav-mobile-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 8px clamp(16px, 4vw, 20px) 12px;
  border-block-start: 1px solid oklch(0.9 0.015 140);
  background: oklch(0.98 0.008 95 / 0.94);
}

header .nav-mobile-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: oklch(0.42 0.02 150);
  border: none;
  background: transparent;
}

header .nav-mobile-link.is-nav-active,
header .nav-mobile-link[aria-current="page"] {
  background: oklch(0.94 0.02 140);
  color: oklch(0.27 0.055 155);
  font-weight: 700;
}

header .nav-mobile-link:focus-visible {
  outline: 2px solid oklch(0.34 0.06 155);
  outline-offset: 2px;
}

/* Sticky action bar: mobile only (≤639px) */
.sticky-bar {
  display: none;
}

@media (max-width: 639px) {
  .sticky-bar {
    display: flex;
  }

  /* Add bottom padding so content isn't hidden behind sticky bar */
  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }
}

/* Map lazy-load */
.map-loaded[hidden] {
  display: none !important;
}

.map-placeholder[data-map-hidden] {
  display: none !important;
}

.map-loaded:not([hidden]) {
  display: block;
  height: 100%;
  min-height: 220px;
}

.map-loaded:not([hidden]) iframe {
  width: 100%;
  height: 100%;
  min-height: 220px;
  border: none;
  display: block;
}

/* Header nav — ancre #horaires active uniquement via JS (hash exact) */
header .nav-desktop nav a:focus-visible {
  outline: 2px solid oklch(0.34 0.06 155);
  outline-offset: 2px;
  border-radius: 2px;
}

header .nav-desktop nav a.is-nav-active {
  color: oklch(0.27 0.055 155);
  font-weight: 700;
  border-bottom: 2px solid oklch(0.34 0.06 155);
  padding-bottom: 2px;
}

html[dir="rtl"] header .nav-desktop nav a.is-nav-active {
  border-bottom: none;
  border-block-end: 2px solid oklch(0.34 0.06 155);
  padding-bottom: 0;
  padding-block-end: 2px;
}