/* Navigation keeps one DOM tree and one height before and after scrolling. */
:root {
  --wf-nav-height: 90px;
  --wf-subnav-height: 0px;
  --wf-nav-ink: #25382f;
  --wf-nav-glass: rgba(255, 254, 250, .95);
  scroll-padding-top: calc(var(--wf-nav-height) + var(--wf-subnav-height) + 16px);
}

/* CSS fallback offsets; JS only refines these from the actual existing navigation. */
html:has(body.journeys-page) { --wf-subnav-height: 56px; }
html:has(body[data-page="city"]) { --wf-subnav-height: 61px; }

.site-header,
body[data-page="home"] .site-header.on-hero {
  height: var(--wf-nav-height);
  min-height: var(--wf-nav-height);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  isolation: isolate;
  background: transparent;
  color: var(--wf-nav-ink);
  border-bottom: 1px solid rgba(49, 72, 57, .12);
  transition: color .26s ease, border-color .26s ease, box-shadow .26s ease;
}

.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wf-nav-glass);
  opacity: 1;
  pointer-events: none;
  transition: opacity .3s ease;
}

/* Frost is bounded to the navigation strip; unsupported browsers keep opaque paper. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before {
    background: rgba(255, 254, 250, .91);
    -webkit-backdrop-filter: blur(12px) saturate(1.08);
    backdrop-filter: blur(12px) saturate(1.08);
  }
}

.site-header.on-hero,
body[data-page="home"] .site-header.on-hero {
  position: fixed;
  inset: 0 0 auto;
  color: #fffdf5;
  background: linear-gradient(rgba(14, 33, 29, .28), transparent);
  border-bottom: 1px solid transparent;
}

.site-header.on-hero::before { opacity: 0; }

.site-header.is-scrolled {
  box-shadow: 0 5px 24px -16px rgba(24, 46, 33, .3);
}

.site-header.on-hero.is-scrolled,
body[data-page="home"] .site-header.on-hero.is-scrolled {
  color: var(--wf-nav-ink);
  border-bottom-color: rgba(49, 72, 57, .12);
}

.site-header.on-hero.is-scrolled::before { opacity: 1; }

.site-header.on-hero.is-scrolled .site-nav a[aria-current] {
  color: var(--accent, #873f46);
  box-shadow: inset 0 -1px var(--accent, #873f46);
}

.site-header.on-hero.is-scrolled .header-plan {
  background: var(--accent, #873f46);
  color: #fffdf5;
}

.site-header .header-plan,
.site-header .header-language,
.site-header .header-menu,
.site-header .site-nav a {
  transition: color .26s ease, background-color .26s ease, border-color .26s ease;
}

/* Local chapter links remain underneath the main navigation, in normal flow. */
.journeys-page .j-topnav,
body[data-page="city"] .city-nav {
  position: sticky;
  top: var(--wf-nav-height);
  z-index: 30;
  background: rgba(255, 254, 250, .98);
  scroll-padding-inline: 20px;
}

/* The home city's illustrated rail stays part of the page, rather than a second header. */
body[data-page="home"] .city-nav { position: relative; top: auto; }

.city-guide-page .cg-side-inner {
  top: calc(var(--wf-nav-height) + 24px);
}

/* Root scroll padding supplies one total offset; remove older duplicate local offsets. */
.journeys-page .j-section[id],
.journeys-page .j-prep[id],
body[data-page="city"] .city-wrap section[id],
.city-guide-page .cg-day,
.city-guide-page .cg-practical,
.city-guide-page .cg-sources {
  scroll-margin-top: 0;
}

@media (max-width: 850px) {
  :root { --wf-nav-height: 76px; }
  .site-header .site-nav { top: var(--wf-nav-height); }
  .site-header.on-hero.is-scrolled .site-nav a[aria-current] { box-shadow: none; }
}

@media (max-width: 700px) {
  html:has(body.journeys-page) { --wf-subnav-height: 49px; }
  /* The original mobile guide layout intentionally uses a flowing contents rail. */
  .city-guide-page .cg-side-inner { position: static; top: auto; }
}

@media (max-width: 600px) {
  html:has(body[data-page="city"]) { --wf-subnav-height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header::before,
  .site-header .header-plan,
  .site-header .header-language,
  .site-header .header-menu,
  .site-header .site-nav a {
    transition: none;
  }
}