/* ==========================================================================
   Smart Navbar
   Hides the pinned header on scroll-down and reveals it on scroll-up.
   Behaviour driver: js/components/smart-header.js (Drupal.behaviors.smartHeader)

   Integrates with the existing sticky mechanism:
     - js/script.js → headerStyle() toggles `.fixed-header` on `.main-header`
     - css/new.css pins `.header-lower` (position: fixed) while `.fixed-header`
   So we translate the *pinned* `.header-lower`, not the whole <header>, and the
   hidden state only has any visual effect while the bar is fixed.
   ========================================================================== */

/* Smooth slide. (.header-lower in new.css already declares `transition: all`,
   which animates transform; this documents/reinforces the intended timing.) */
.main-header .header-lower {
  transition: transform 0.3s ease-in-out, background-color 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

/* ---- One cohesive surface (2026-07-09 audit) ----------------------------
   new.css painted the bar mint (#f2fff7 via --c-secondary-2) at rest on the
   front page and flipped it to white when pinned — a visible colour "pop" on
   the first scroll, and the mint clashed with the hero's F0F9F1 atmosphere.
   One solid white in EVERY state + a navy hairline to separate from the hero.
   (Solid, not glass: backdrop-filter is banned by the project aesthetics
   rules — unreliable on Android Chrome.)
   Specificity 0-4-0 outranks all of new.css's state rules
   (.path-frontpage .header-lower 0-2-0, .main-header.fixed-header
   .header-lower and .path-frontpage.fixed-header .header-lower 0-3-0), so
   the winner no longer depends on aggregate order. The pinned state keeps
   its existing drop shadow as the depth cue — only the COLOUR is unified. */
.main-header .header-lower.header-lower.header-lower {
  background: #ffffff;
  border-bottom: 1px solid var(--et-hairline, rgba(28, 53, 87, 0.12));
}

/* Hidden state — only the pinned bar slides out of view. The extra `.header--hidden`
   class gives this higher specificity than `.fixed-header .header-lower`, so it wins. */
.main-header.fixed-header.header--hidden .header-lower {
  transform: translateY(-100%);
  box-shadow: none;
}

/* Logged-in users: the pinned bar sits below the Drupal admin toolbar
   (top: 39px, and 79px on >= 992px — see css/new.css). Push it fully past the
   toolbar when hidden so no sliver overlaps it. */
.user-logged-in .main-header.fixed-header.header--hidden .header-lower {
  transform: translateY(calc(-100% - 39px));
}

@media screen and (min-width: 992px) {
  .user-logged-in .main-header.fixed-header.header--hidden .header-lower {
    transform: translateY(calc(-100% - 79px));
  }
}