/* Gedeelde navigatie — alleen voor de pagina's die de hamburger nog niet hadden.

   De homepage en de elf wijkgidsen hebben deze regels al in hun eigen <style> staan,
   in de fixed-over-de-hero-variant. Die laden dit bestand NIET; hun inline regels
   zouden deze toch overschrijven (inline <style> komt na de <link>).

   Wat hier staat is bewust beperkt tot het uitklapmenu en de trefvlakken. De header
   zelf blijft van de pagina: de gidsen, /homes/, /mortgage/ en de listingpagina's
   hebben een sticky, dichte balk van 74px, de hero-pagina's een vaste transparante
   van 80px. Die twee gelijktrekken is een layoutwijziging, geen navigatiewijziging.

   ALLES hieronder hangt aan .nav-desktop of .nav-panel, nooit aan de kale elementen.
   Eerste versie deed dat wel (`nav a { ... }`) en raakte daarmee ook de breadcrumbs
   op de listingpagina's — die staan óók in een <nav>. Die kregen daardoor 15px in
   plaats van 12,8 en een turquoise hover-streep. Houd het gescopet.

   Het paneel hangt op top:100% onder de header en heeft daarvoor een gepositioneerde
   header nodig. Alle pagina's die dit bestand laden hebben er al een (position:sticky);
   scripts/apply-nav.py controleert dat en weigert een pagina waar dat niet zo is. Dus
   géén `header { position: sticky }` hier: dat zou stilletjes de layout van een
   toekomstige pagina omgooien in plaats van hard te falen. */

.nav-desktop { display: flex; gap: clamp(14px, 2.5vw, 32px); list-style: none; align-items: center; }
.nav-desktop a { color: inherit; text-decoration: none; font-size: .94rem; font-weight: 500; position: relative; }
.nav-desktop a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 2px;
  background: var(--ember-hot, #C2603F); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out-quint, cubic-bezier(.22, 1, .36, 1));
}
.nav-desktop a:not(.btn):hover::after { transform: scaleX(1); }
.nav-desktop a[aria-current]::after { transform: scaleX(1); }

/* Het label van de Articles & Guides-tab krimpt mee. Voluit is het 116px breed tegen
   55px voor "Guides"; bij 821px viewport — de smalste breedte waarop de desktopnav nog
   getoond wordt — liep de balk daardoor 79px over de rand. Boven 960px is er ruimte. */
.nav-desktop a:not(.btn) { white-space: nowrap; }
.nav-long { display: none; }
@media (min-width: 960px) { .nav-long { display: inline; } }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer; color: inherit;
  padding: 10px; margin-left: 6px; min-width: 44px; min-height: 44px;
}
@media (max-width: 820px) {
  .nav-desktop li:not(:last-child) { display: none; }
  .nav-toggle { display: block; }
}

.nav-panel {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  /* Dekkend, niet 96%: deze pagina's hebben een dichte header en het paneel valt over
     lopende tekst. Op de hero-pagina's mag het doorschijnen, daar staat het over beeld. */
  background: var(--dawn);
  box-shadow: 0 18px 40px -20px rgba(30, 36, 48, .35);
  padding: 10px 24px 22px; z-index: 49;
}
.nav-panel.open { display: block; }
.nav-panel ul { list-style: none; display: flex; flex-direction: column; }
.nav-panel a {
  display: block; padding: 13px 6px; color: var(--ink); text-decoration: none;
  font-size: 1.05rem; font-weight: 500;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

@media (max-width: 560px) {
  .nav .btn-label { display: none; }
  .nav .btn { padding: 13px 15px; }
  /* De hamburger kost breedte die de wordmark had. Zonder dit breekt "Live Here Boise"
     over drie regels en loopt hij uit de balk van 74px. Zelfde keuze als op de
     hero-pagina's: de ondertitel valt weg, de naam blijft. */
  .wordmark > span > span, .wordmark .sub { display: none; }
  .wordmark b { font-size: 1.05rem; white-space: nowrap; }  /* op één regel houden */
  /* Met een trefvlak van 44px plus deze marge liep de knop 4px buiten het scherm. */
  .nav-toggle { margin-left: 0; }
}