/* =================================================================
   KOHWAN — SIDEBAR NAVIGATION
   A fixed vertical rail in place of the horizontal header nav.

   Loaded AFTER style.css, so the handful of rules that re-point the old
   fixed header chrome (body offset, .ubar, .wa-float) win on source order
   rather than by fighting specificity.

   Layout contract
     >= 1100px  Top header only. The inline script in partials/head sets
                html[data-nav=top] at this width, which hides the sidebar and
                brings back style.css's horizontal header and full-width page.
                The sidebar-mode rules below (scoped to :root:not([data-nav=top]))
                only ever apply now if JavaScript is off, where the docked
                sidebar is the one menu that still works without it.

     <  1100px  The sidebar is an off-canvas drawer opened from the mobile
                header's hamburger, and the header's horizontal list is hidden
                so there is only ever one mobile menu.
   ================================================================= */

:root {
  --sidenav-w:      200px;   /* docked width */
  --sidenav-bp:     1100px;  /* documentation only — media queries need literals */

  --sidenav-bg:     var(--primary-deep);
  --sidenav-fg:     rgba(250, 248, 243, .74);
  --sidenav-fg-on:  #FAF8F3;
  --sidenav-line:   rgba(250, 248, 243, .13);
  --sidenav-hover:  rgba(250, 248, 243, .07);
  --sidenav-active: rgba(250, 248, 243, .12);
}

/* Dark theme: the sidebar goes near-black so it reads as chrome rather than
   as a second green surface next to the darkened page. */
:root[data-theme="dark"] {
  --sidenav-bg:     #2e4755;
  --sidenav-line:   rgba(250, 248, 243, .1);
  --sidenav-hover:  rgba(250, 248, 243, .06);
  --sidenav-active: rgba(250, 248, 243, .1);
}

/* ---------- Shell ---------- */
.sidenav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 200;
  width: var(--sidenav-w);
  display: flex;
  flex-direction: column;
  background: var(--sidenav-bg);
  color: var(--sidenav-fg);
  border-right: 1px solid var(--sidenav-line);
  font-family: var(--font-body);
  transition: width .34s var(--ease), transform .38s var(--ease);
}

/* ---------- Brand ---------- */
.sidenav__top {
  position: relative;
  flex: none;
  padding: 30px 20px 24px;
}
/* Inset hairline under the logo, as in the reference. */
.sidenav__top::after {
  content: "";
  position: absolute;
  left: 20px; right: 20px; bottom: 0;
  height: 1px;
  background: var(--sidenav-line);
}
.sidenav__brand {
  display: block;
  color: var(--sidenav-fg-on);
}
/* The header lockup is horizontal; stacked reads better in a 200px column and
   mirrors the reference's mark-over-wordmark arrangement. */
.brandmark--side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.brandmark--side .brandmark__svg,
.brandmark--side .brandmark__img {
  height: 38px;
  max-width: 100%;
  object-fit: contain;
}
.brandmark--side .brandmark__word b {
  font-size: .96rem;
  letter-spacing: 3.2px;
}
.brandmark--side .brandmark__word span {
  margin-top: 5px;
  font-size: .44rem;
  letter-spacing: 2.1px;
  opacity: .62;
}

/* ---------- Collapse chevron (desktop) ---------- */
.sidenav__collapse {
  position: absolute;
  top: 62px;
  right: -13px;
  z-index: 3;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sidenav-bg);
  border: 1px solid var(--sidenav-line);
  color: rgba(250, 248, 243, .8);
  cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease);
}
.sidenav__collapse:hover {
  color: var(--sidenav-bg);
  background: var(--gold);
  border-color: var(--gold);
}
.sidenav__collapse svg { transition: transform .34s var(--ease); }

/* ---------- Links ---------- */
.sidenav__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(250, 248, 243, .18) transparent;
}
.sidenav__nav::-webkit-scrollbar { width: 6px; }
.sidenav__nav::-webkit-scrollbar-thumb {
  background: rgba(250, 248, 243, .16);
  border-radius: 3px;
}
.sidenav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 18px 12px;
  list-style: none;
}
/* Separates the category list from the primary items above it. */
.sidenav__group {
  margin: 6px 0 2px;
  padding: 14px 24px 0;
  border-top: 1px solid var(--sidenav-line);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(250, 248, 243, .5);
}
/* The categories are secondary to the main nav, so they sit a shade quieter. */
.sidenav__list--browse .sidenav__link { font-size: .88rem; padding-block: 10px; }
.sidenav__list--browse .sidenav__ic { width: 20px; height: 20px; }
.sidenav__list--browse .sidenav__ic svg { width: 19px; height: 19px; }

.sidenav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px;
  border-radius: 10px;
  color: var(--sidenav-fg);
  font-size: .935rem;
  font-weight: 500;
  letter-spacing: .1px;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.sidenav__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  opacity: .88;
  transition: color .22s var(--ease), opacity .22s var(--ease);
}
.sidenav__ic svg { width: 21px; height: 21px; display: block; }
.sidenav__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.sidenav__link:hover {
  background: var(--sidenav-hover);
  color: var(--sidenav-fg-on);
}
.sidenav__link:hover .sidenav__ic { color: var(--gold); opacity: 1; }

.sidenav__link.is-active {
  background: var(--sidenav-active);
  color: var(--sidenav-fg-on);
  font-weight: 600;
}
.sidenav__link.is-active .sidenav__ic { color: var(--gold); opacity: 1; }
/* Gold edge marker — the vertical answer to the old .nav__link underline. */
.sidenav__link.is-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--gold);
}

.sidenav a:focus-visible,
.sidenav button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- Footer: phone, theme switch, CTA ---------- */
.sidenav__foot {
  position: relative;
  flex: none;
  padding: 18px 20px 22px;
}
.sidenav__foot::before {
  content: "";
  position: absolute;
  left: 20px; right: 20px; top: 0;
  height: 1px;
  background: var(--sidenav-line);
}
.sidenav__util {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.sidenav__phone {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  color: var(--sidenav-fg);
  white-space: nowrap;
  transition: color .22s var(--ease);
}
.sidenav__phone .sidenav__ic { width: 18px; height: 18px; }
.sidenav__phone .sidenav__ic svg { width: 17px; height: 17px; }
.sidenav__phone:hover { color: var(--sidenav-fg-on); }
.sidenav__phone:hover .sidenav__ic { color: var(--gold); }

/* Override the header-tuned .theme-toggle for the dark rail. */
.sidenav .theme-toggle {
  flex: none;
  width: 34px; height: 34px;
  color: var(--sidenav-fg-on);
  background: transparent;
  border: 1px solid var(--sidenav-line);
}
.sidenav .theme-toggle:hover { background: var(--sidenav-hover); }

.sidenav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--on-accent);
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .2px;
  white-space: nowrap;
  transition: background-color .22s var(--ease), transform .22s var(--ease),
              box-shadow .22s var(--ease);
}
.sidenav__cta:hover {
  background: var(--gold-soft);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(46, 71, 85, .28);
}
.sidenav__cta-ic { display: grid; place-items: center; }

/* Drawer-only close button; hidden while the sidebar is docked. */
.sidenav__close { display: none; }

/* ---------- Backdrop (drawer only) ---------- */
.sidenav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(46, 71, 85, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s var(--ease), visibility .32s;
}

/* =================================================================
   DESKTOP — the top header.

   html[data-nav=top] (always set at this width by partials/head) hides the
   sidebar and gives the page its full width under the horizontal header.

   The sidebar-mode overrides stay scoped to :root:not([data-nav="top"]); with
   the attribute always present they never apply, except as the fallback
   layout when JavaScript is off.
   ================================================================= */
@media (min-width: 1100px) {

  /* ---------- Sidebar mode (default) ---------- */

  /* No horizontal header, so every hero offset built as
     calc(var(--header-h) + …) has to stop reserving room for one. */
  :root:not([data-nav="top"]) { --header-h: 0px; }

  :root:not([data-nav="top"]) body {
    padding-left: var(--sidenav-w);
    transition: padding-left .34s var(--ease);
  }
  /* That 74px was clearance for the fixed header. */
  :root:not([data-nav="top"]) body.inner-page { padding-top: 0; }

  :root:not([data-nav="top"]) .site-header,
  :root:not([data-nav="top"]) .nav-backdrop { display: none; }

  /* Fixed chrome is not affected by the body inset, so re-point it by hand. */
  :root:not([data-nav="top"]) .ubar {
    left: var(--sidenav-w);
    transition: transform .4s var(--ease), left .34s var(--ease);
  }
  /* The WhatsApp float lives bottom-left, i.e. on top of the sidebar. */
  :root:not([data-nav="top"]) .wa-float {
    left: calc(var(--sidenav-w) + 22px);
    transition: left .34s var(--ease), transform .3s var(--ease);
  }

  /* The utility bar lost --sidenav-w of room; let its longest item ellipsize
     instead of pushing the live-conditions chips off the right edge. */
  :root:not([data-nav="top"]) .ubar__left,
  :root:not([data-nav="top"]) .ubar__item { min-width: 0; }
  :root:not([data-nav="top"]) .ubar__item span { overflow: hidden; text-overflow: ellipsis; }

  /* The ski page's sticky booking card cleared the header; with no header it
     clears the utility bar instead, which is what actually stays pinned up
     there. ski.css loads after this file, hence the extra specificity. */
  :root:not([data-nav="top"]) body .ski-book { top: calc(var(--ubar-h) + 18px); }

  .sidenav-backdrop { display: none; }

  /* ---------- Top-header mode ---------- */
  :root[data-nav="top"] .sidenav { display: none; }
  /* Only offer the way back once there is a layout choice to make. */
  :root[data-nav="top"] .navmode-btn,
  :root[data-nav="top"] .header__icon { display: grid; }
  :root[data-nav="top"] .header__rule { display: block; }
}

/* =================================================================
   DRAWER (tablet / mobile)
   The existing mobile header keeps the logo + hamburger; this is what
   the hamburger now opens.
   ================================================================= */
@media (max-width: 1099px) {
  /* style.css only reveals the hamburger below 900px — the drawer starts here,
     so without this the 900–1099px band would have no way to open the menu. */
  .nav-toggle { display: block; }

  .sidenav {
    width: min(84vw, 300px);
    transform: translateX(-100%);
    border-right: 0;
  }
  /* Shadow only while open: parked off-screen, the drawer still cast it
     onto the page's left edge as a grey strip. */
  body.sidenav-open .sidenav { transform: none; box-shadow: var(--shadow-lg); }
  body.sidenav-open { overflow: hidden; }
  body.sidenav-open .sidenav-backdrop { opacity: 1; visibility: visible; }

  /* No layout choice to offer on a phone: the sidebar IS the mobile menu. */
  .sidenav__collapse,
  .navmode-btn { display: none; }

  /* One mobile menu only. The header's horizontal list stays in the DOM for
     desktop "top" mode, but here the hamburger opens the sidebar drawer
     instead — otherwise style.css would also turn this into a right-hand
     drawer and the page would carry two competing menus. */
  .site-header .nav { display: none; }

  .sidenav__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .sidenav__close {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px; height: 38px;
    margin-top: -4px;
    border-radius: 50%;
    background: rgba(250, 248, 243, .12);
    color: #FAF8F3;
    cursor: pointer;
    transition: background-color .22s var(--ease);
  }
  .sidenav__close:hover { background: rgba(250, 248, 243, .22); }

  /* A drawer is roomier than the rail, so the touch targets grow. */
  .sidenav__link { padding: 14px 12px; font-size: 1rem; }
  .sidenav__list { padding: 16px 14px; }
  .sidenav__link.is-active::before { left: -14px; }
}

/* Pre-existing source-order bug, surfaced now that this header is the only way
   to reach the menu on a phone: style.css sets .site-header{top:44px} at
   <=900px to clear the mobile "Pay Online" strip, then a LATER <=980px block
   resets it to 0. Both match below 900px, so the strip was covering the header
   and clipping the logo and hamburger. Same specificity, later file wins. */
@media (max-width: 900px) {
  .site-header { top: 44px; }
}

/* =====================================================================
   HEADER
   Transparent over the banner: brand, three dropdown triggers, and two
   icon-over-label slots on the right. Solid white on inner pages, where there
   is no banner behind it.
   ===================================================================== */
.ghead {
  background: transparent;
  box-shadow: none;
  height: auto;
  display: block;
}
.ghead__bar {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 40px);
  height: 110px;
  padding-inline: clamp(18px, 2.2vw, 40px);
}
.ghead .brandmark__svg,
.ghead .brandmark__img { height: 38px; }
.ghead .brandmark__word b { font-size: 1.24rem; letter-spacing: 2.4px; }
.ghead .brandmark__word span { font-size: .45rem; letter-spacing: 1.9px; margin-top: 3px; }

/* ---------- dropdown triggers ---------- */
.gnav { display: flex; align-items: center; gap: clamp(10px, 1.7vw, 34px); }
.gnav__item { position: relative; }
.gnav__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  border: 0;
  background: none;
  color: #2e4755;
  font: inherit;
  font-size: clamp(.84rem, .92vw, .98rem);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.gnav__btn:hover { color: var(--primary); }
.gnav__chev { width: 16px; height: 16px; transition: transform .22s var(--ease); }
.gnav__btn[aria-expanded="true"] .gnav__chev { transform: rotate(180deg); }

.gnav__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: -14px;
  z-index: 20;
  min-width: 250px;
  padding: 10px;
  border-radius: 14px;
  background: #FAF8F3;
  box-shadow: 0 18px 44px rgba(46, 71, 85, .18);
}
.gnav__panel[hidden] { display: none; }
.gnav__panel ul { margin: 0; padding: 0; list-style: none; }
.gnav__panel a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: #2e4755;
  font-size: .92rem;
  white-space: nowrap;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.gnav__panel a:hover { background: #FAF8F3; color: var(--primary); }
.gnav__panel b { font-weight: 600; }

/* ---------- live information (first menu item) ----------
   Same dropdown mechanics as the other triggers; the panel holds the resort
   readout that used to sit beside the homepage's featured packages. */
.gnav__btn--live { gap: 7px; }
.glive__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #BD830D;
  box-shadow: 0 0 0 0 rgba(189, 131, 13, .55);
  animation: glivePulse 2.2s var(--ease) infinite;
}
@keyframes glivePulse {
  70%  { box-shadow: 0 0 0 7px rgba(189, 131, 13, 0); }
  100% { box-shadow: 0 0 0 0 rgba(189, 131, 13, 0); }
}
@media (prefers-reduced-motion: reduce) { .glive__dot { animation: none; } }

.gnav__panel--live { width: 288px; min-width: 0; padding: 14px 16px 16px; }
.glive__label {
  margin: 14px 0 8px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.glive__label:first-child { margin-top: 2px; }
.glive__row { display: flex; align-items: center; gap: 11px; }
.glive__ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; color: var(--primary); }
.glive__ic svg { width: 30px; height: 30px; }
.glive__ic--sky { color: #2e4755; }
.glive__val b { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--ink); }
.glive__val small { display: block; margin-top: 1px; font-size: .76rem; color: var(--muted); }
.glive__minmax {
  margin: 9px 0 0;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  text-align: center;
  font-size: .74rem;
  color: var(--muted);
}
.glive__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border-soft);
  font-size: .78rem;
  color: var(--ink);
}
.glive__status:first-of-type { border-top: 0; }
.glive__status b {
  padding: 3px 9px;
  border-radius: 5px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.glive__status b.is-open      { background: #FAF8F3; color: #2e4755; }
.glive__status b.is-closed    { background: #FAF8F3; color: #2e4755; }
.glive__status b.is-on-hold   { background: #FAF8F3; color: #2e4755; }
.glive__note { margin: 8px 0 0; font-size: .72rem; line-height: 1.45; color: var(--muted); }
/* Scoped to the panel so it outranks the generic `.gnav__panel a` link rule. */
.gnav__panel .glive__btn {
  display: block;
  margin-top: 13px;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  text-align: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.gnav__panel .glive__btn:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
:root[data-theme="dark"] .gnav__panel .glive__btn { color: var(--ink); }

/* ---------- right-hand slots ---------- */
.ghead__actions { margin-left: auto; gap: clamp(14px, 1.7vw, 30px); }
.gstack {
  display: grid;
  justify-items: center;
  gap: 5px;
  border: 0;
  background: none;
  color: #2e4755;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.gstack:hover { background: none; color: var(--primary); }
.gstack__ic { display: grid; place-items: center; height: 24px; }
.gstack__ic svg { width: 23px; height: 23px; display: block; }
.gstack__lbl { font-size: .72rem; font-weight: 500; white-space: nowrap; }

/* ---------- weather check ---------- */
.gwx { position: relative; }
.gwx__btn[aria-expanded="true"] { color: var(--primary); }

.gwx__panel {
  position: absolute;
  top: calc(100% + 14px);
  right: -10px;
  z-index: 20;
  width: 300px;
  padding: 14px;
  border-radius: 14px;
  background: #FAF8F3;
  box-shadow: 0 18px 44px rgba(46, 71, 85, .18);
  text-align: left;
}
.gwx__panel[hidden] { display: none; }

.gwx__form {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}
.gwx__form:focus-within { border-color: var(--primary); }
.gwx__form input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: 8px 0;
  font: inherit;
  font-size: .88rem;
  color: var(--ink);
  outline: none;
}
.gwx__form button {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.gwx__form button svg { width: 15px; height: 15px; }
.gwx__form button:hover { background: var(--primary-deep); }

.gwx__quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gwx__chip {
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: .74rem;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.gwx__chip:hover { background: var(--surface-2); border-color: var(--border-strong); }

.gwx__out:not(:empty) { margin-top: 12px; }
.gwx__place { font-size: .82rem; font-weight: 600; color: var(--ink); }
.gwx__now { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.gwx__temp { font-size: 1.7rem; font-weight: 700; color: var(--ink); line-height: 1; }
.gwx__cond { font-size: .8rem; color: var(--muted); }
.gwx__facts {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: .74rem;
  color: var(--muted);
}
.gwx__msg { font-size: .8rem; color: var(--muted); }
.gwx__msg--err { color: #2e4755; }

:root[data-theme="dark"] .gwx__panel { background: var(--surface); }
:root[data-theme="dark"] .gwx__chip { color: var(--ink); }

@media (max-width: 1099px) { .gwx { display: none; } }

/* Inner pages have no banner behind the header, so it goes solid there. */
body.inner-page .ghead {
  background: #FAF8F3;
  border-bottom: 1px solid var(--border);
}
:root[data-theme="dark"] body.inner-page .ghead { background: var(--surface); }
:root[data-theme="dark"] .gnav__btn,
:root[data-theme="dark"] .gstack { color: var(--ink); }
:root[data-theme="dark"] .gnav__panel { background: var(--surface); }
:root[data-theme="dark"] .gnav__panel a { color: var(--ink); }
:root[data-theme="dark"] .gnav__panel a:hover { background: var(--surface-2); }

/* Below the sidebar breakpoint the drawer is the menu. */
@media (max-width: 1099px) {
  .gnav { display: none; }
  .ghead__bar { height: 74px; gap: 12px; }
  .ghead { background: #FAF8F3; border-bottom: 1px solid var(--border); }
  .gstack__lbl { display: none; }
}

/* ---------- Header right-hand cluster ----------
   search glyph · rule · pill · menu glyph, as the comp arranges it. Defined
   here rather than in the homepage sheet because the header is shared with
   every page. All three are hidden until the docked top-header layout is on.

   .navmode-btn is the comp's far-right menu glyph; it hands over to the
   sidebar layout. */
.header__icon,
.header__rule,
.navmode-btn { display: none; }

.header__icon,
.navmode-btn,
.vhead .theme-toggle {
  place-items: center;
  width: 24px; height: 24px;
  flex: none;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: color .2s var(--ease);
}
.vhead .theme-toggle:hover { background: none; color: var(--primary); }
.header__icon svg,
.navmode-btn svg { display: block; }
.header__rule { width: 1px; height: 30px; flex: none; background: rgba(250, 248, 243, .4); }

/* Once the header is solid it is no longer over imagery. */
.site-header.is-scrolled .header__icon,
.site-header.is-scrolled .navmode-btn,
body.inner-page .header__icon,
body.inner-page .navmode-btn { color: var(--green-deep); }
.site-header.is-scrolled .header__icon:hover,
.site-header.is-scrolled .navmode-btn:hover,
body.inner-page .header__icon:hover,
body.inner-page .navmode-btn:hover { color: var(--primary); }
.site-header.is-scrolled .header__rule,
body.inner-page .header__rule { background: var(--border-strong); }
:root[data-theme="dark"] .site-header.is-scrolled .header__icon,
:root[data-theme="dark"] .site-header.is-scrolled .navmode-btn,
:root[data-theme="dark"] body.inner-page .header__icon,
:root[data-theme="dark"] body.inner-page .navmode-btn { color: var(--ink); }

/* =================================================================
   Print / motion
   ================================================================= */
@media print {
  .sidenav, .sidenav-backdrop { display: none; }
  body { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sidenav,
  .sidenav-backdrop,
  .sidenav__link,
  .sidenav__cta,
  .sidenav__collapse svg,
  body { transition: none; }
}