/* ==========================================================================
   Material Academy — Site navigation
   --------------------------------------------------------------------------
   Full-bleed sticky bar with a frosted backdrop. The logo sits hard against
   the left edge, as it did in the original template. Loaded by both
   include/head.php and include/theme-head.php so there is one definition.

   Requires tokens.css.
   ========================================================================== */

/* ==========================================================================
   The bar
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
  /* Translucent, so content moving underneath is felt rather than hidden. */
  background: rgba(250, 248, 244, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: background-color 400ms var(--ease-out),
              border-color 400ms var(--ease-out),
              box-shadow 400ms var(--ease-out);
}

/* Once the page has moved, the bar earns a hairline and a whisper of shadow.
   Set by a small scroll listener in the header include. */
.site-header.is-scrolled {
  background: rgba(250, 248, 244, 0.9);
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 12px rgba(10, 24, 38, 0.06);
}

/* Browsers without backdrop-filter get an opaque bar rather than unreadable
   text over the page behind it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--paper); }
}

/* Full width — no container. The logo belongs in the corner. */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  max-width: none;
  min-height: 60px;
  padding-inline: var(--space-5);
}
@media (min-width: 64rem) {
  .site-header__inner { min-height: 64px; padding-inline: var(--space-6); }
}

/* ==========================================================================
   Brand
   ========================================================================== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--brand-800);
  flex: none;
  border-radius: var(--radius);
  transition: opacity var(--transition);
}
.brand:hover { opacity: 0.72; color: var(--brand-800); }

.brand__mark {
  width: 36px; height: 36px;
  flex: none;
  transition: transform 500ms var(--ease-out);
}
.brand:hover .brand__mark { transform: scale(1.06) rotate(-2deg); }

.brand__name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  white-space: nowrap;
}
/* On the narrowest screens the mark alone carries the brand. */
@media (max-width: 22.5rem) { .brand__name { display: none; } }

/* ==========================================================================
   Links
   ========================================================================== */
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav a {
  position: relative;
  display: block;
  padding: var(--space-3) var(--space-2);
  min-height: 44px;
  color: var(--ink-700);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color 250ms var(--ease-out), background-color 250ms var(--ease-out);
}
.nav a:hover { color: var(--brand-900); background: rgba(29, 59, 94, 0.06); }

@media (min-width: 64rem) {
  .nav ul { flex-direction: row; align-items: center; gap: var(--space-1); }
  .nav a {
    padding: var(--space-2) var(--space-4);
    min-height: 0;
    font-size: var(--text-sm);
    background: none;
  }
  .nav a:hover { background: none; color: var(--brand-900); }

  /* The underline grows out from the centre and retreats the same way.
     This is the whole trick — a transform, never a width, so it stays
     smooth at any refresh rate. */
  .nav a::after {
    content: "";
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-700);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 320ms var(--ease-out);
  }
  .nav a:hover::after,
  .nav a:focus-visible::after { transform: scaleX(1); }
  .nav a[aria-current="page"] { color: var(--brand-800); font-weight: var(--weight-semibold); }
  .nav a[aria-current="page"]::after { transform: scaleX(1); }
}

/* ==========================================================================
   Mobile disclosure — a sheet that eases down, links arriving in sequence
   ========================================================================== */
.nav {
  position: absolute;
  left: 0; right: 0; top: 100%;
  padding: var(--space-3) var(--space-5) var(--space-5);
  background: rgba(250, 248, 244, 0.96);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 12px 32px rgba(10, 24, 38, 0.1);

  /* Closed: collapsed and inert, but still in the layout so the transition
     has something to animate from. visibility keeps it out of the tab order. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 280ms var(--ease-out),
              transform 280ms var(--ease-out),
              visibility 0s linear 280ms;
}
.nav[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 280ms var(--ease-out),
              transform 280ms var(--ease-out),
              visibility 0s;
}

/* Each link arrives just after the one above it. */
.nav li {
  margin: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.nav[data-open="true"] li { opacity: 1; transform: translateY(0); }
.nav[data-open="true"] li:nth-child(1) { transition-delay: 40ms; }
.nav[data-open="true"] li:nth-child(2) { transition-delay: 80ms; }
.nav[data-open="true"] li:nth-child(3) { transition-delay: 120ms; }
.nav[data-open="true"] li:nth-child(4) { transition-delay: 160ms; }
.nav[data-open="true"] li:nth-child(5) { transition-delay: 200ms; }
.nav[data-open="true"] li:nth-child(6) { transition-delay: 240ms; }

@media (min-width: 64rem) {
  .nav,
  .nav[data-open="true"] {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    transition: none;
  }
  .nav li { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   The toggle — three lines that become a cross
   ========================================================================== */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--brand-800);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}
.nav-toggle:hover { background: rgba(29, 59, 94, 0.06); border-color: var(--rule); }
@media (min-width: 64rem) { .nav-toggle { display: none; } }

.nav-toggle__box { position: relative; width: 20px; height: 14px; display: block; }
.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 320ms var(--ease-out), opacity 200ms var(--ease-out);
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 6px; }
.nav-toggle__bar:nth-child(3) { top: 12px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   Reduced motion — everything still works, nothing moves
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .brand, .brand__mark,
  .nav, .nav li, .nav a, .nav a::after,
  .nav-toggle, .nav-toggle__bar {
    transition: none !important;
  }
  .nav[data-open="true"] li { transition-delay: 0ms !important; }
  .brand:hover .brand__mark { transform: none; }
}

/* ==========================================================================
   Utilities the header depends on.
   Duplicated here deliberately: index.php loads theme-head.php, which does
   not include base.css, and without these the "Menu" label would sit visible
   beside the icon and the skip link would float over the page.
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: var(--z-dialog);
  padding: var(--space-3) var(--space-4);
  background: var(--brand-800);
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 200ms var(--ease-out);
}
.skip-link:focus { top: var(--space-4); color: #fff; }

/* ==========================================================================
   Overriding the template's bare `header` rule.
   css/main.css line 140 declares height:60px, padding-top:15px,
   text-align:center and position:fixed on the element selector. Those are
   not properties this file otherwise sets, so they survived and clamped the
   bar to 60px while its own contents needed 64. Neutralised here.
   ========================================================================== */
header.site-header {
  height: auto;
  min-height: 0;
  padding: 0;
  text-align: start;
  font-family: var(--font-sans);
}

/* ==========================================================================
   Flourishes
   ==========================================================================
   Four additions, each earning its place rather than decorating:
     1. a pill that glides between links and rests on the current page
     2. a reading-progress hairline along the bottom edge
     3. the bar tightening as you scroll away from the top
     4. the sign-in link promoted to a real call to action
   ========================================================================== */

/* ---------- 1. The gliding pill ----------------------------------------
   One element, moved with transform and width. Positioned by JS, which
   measures each link; if JS never runs, nothing appears and the underline
   fallback below still marks the current page.                            */
.nav__pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 34px;
  margin-top: -17px;
  border-radius: var(--radius-pill);
  background: rgba(29, 59, 94, 0.07);
  box-shadow: inset 0 0 0 1px rgba(29, 59, 94, 0.08);
  pointer-events: none;
  opacity: 0;
  transform: translateX(0) ;
  transition: transform 420ms cubic-bezier(0.34, 1.2, 0.44, 1),
              width     420ms cubic-bezier(0.34, 1.2, 0.44, 1),
              opacity   220ms var(--ease-out),
              background-color 220ms var(--ease-out);
  will-change: transform, width;
}
.nav__pill.is-ready { opacity: 1; }
/* While a link is hovered the pill warms towards the accent. */
.nav ul:hover .nav__pill { background: rgba(138, 90, 28, 0.12); box-shadow: inset 0 0 0 1px rgba(138, 90, 28, 0.22); }

@media (min-width: 64rem) {
  .nav ul { position: relative; }
  /* With the pill doing the work, the underline is retired on desktop. */
  .nav--pill a::after { display: none; }
  .nav--pill a { transition: color 220ms var(--ease-out); }
  .nav--pill a:hover { color: var(--brand-900); }
}
@media (max-width: 63.99rem) {
  .nav__pill { display: none; }
}

/* ---------- 2. Reading progress ----------------------------------------
   A brass hairline across the foot of the bar, scaled by scroll position.
   scaleX on a 100%-wide element, so it never triggers layout.             */
.site-header__progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent-700), var(--accent-500));
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
  pointer-events: none;
}
.site-header.is-scrolled .site-header__progress { opacity: 1; }

/* ---------- 3. The bar tightens on scroll ------------------------------- */
@media (min-width: 64rem) {
  .site-header__inner {
    min-height: 76px;
    transition: min-height 380ms var(--ease-out);
  }
  .site-header.is-scrolled .site-header__inner { min-height: 60px; }
  .brand__mark { transition: transform 500ms var(--ease-out), width 380ms var(--ease-out), height 380ms var(--ease-out); }
  .site-header.is-scrolled .brand__mark { width: 30px; height: 30px; }
  .brand__name { transition: font-size 380ms var(--ease-out); }
  .site-header.is-scrolled .brand__name { font-size: var(--text-base); }
}

/* ---------- 4. Sign in, as a call to action ----------------------------- */
@media (min-width: 64rem) {
  .nav a.nav__cta {
    margin-inline-start: var(--space-3);
    padding-inline: var(--space-5);
    background: var(--brand-800);
    color: #fff;
    border-radius: var(--radius-pill);
    font-weight: var(--weight-semibold);
    transition: background-color 220ms var(--ease-out), transform 220ms var(--ease-out);
  }
  .nav a.nav__cta:hover { background: var(--accent-700); color: #fff; transform: translateY(-1px); }
  .nav a.nav__cta::after { display: none; }
}

/* ---------- Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nav__pill,
  .site-header__progress,
  .site-header__inner,
  .brand__mark, .brand__name,
  .nav a.nav__cta { transition: none !important; }
  .site-header.is-scrolled .site-header__inner { min-height: 76px; }
  .nav a.nav__cta:hover { transform: none; }
}

/* ==========================================================================
   Answering an !important block in the template.
   css/main.css lines 1565-1573 declare, under @media (max-width: 768px):

       header img, .header img, .site-header img, .navbar img {
           height: 28px !important; width: auto !important; }
       header { height: 50px !important; line-height: 50px !important; }

   That clamps the bar to 50px on mobile while its contents need 60, squashes
   the mark to 28px, and sets a 50px line-height that inherits into the nav
   text. It targets .site-header img by name, so it was written against this
   header. !important can only be answered with !important; these are scoped
   to the same breakpoint and nothing else.
   ========================================================================== */
@media (max-width: 48rem) {
  header.site-header {
    height: auto !important;
    line-height: var(--leading-body) !important;
  }
  .site-header .brand__mark {
    height: 34px !important;
    width: 34px !important;
  }
}

/* ==========================================================================
   Liquid glass
   ==========================================================================
   Also fixes a bug introduced when this bar was made sticky: it lived inside
   .backgroundimage, and a sticky element only sticks while its own parent is
   in view. On the homepage that meant the navigation disappeared after
   1,587px of a 7,926px page. position:fixed does not care about ancestors.
   ========================================================================== */
:root { --header-h: 61px; }
@media (min-width: 64rem) { :root { --header-h: 77px; } }

.site-header {
  position: fixed;
  left: 0;
  right: 0;
  /* Far more transparent than before. The blur and saturation do the work of
     keeping text legible, not opacity. */
  background: rgba(250, 248, 244, 0.38);
  -webkit-backdrop-filter: blur(26px) saturate(200%) brightness(1.06);
  backdrop-filter: blur(26px) saturate(200%) brightness(1.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  /* Specular edges: a bright line catching light along the top, a fainter
     one along the bottom. This is what separates glass from a grey panel. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65),
              inset 0 -1px 0 rgba(255, 255, 255, 0.16),
              0 8px 30px rgba(10, 24, 38, 0.05);
}

/* A soft sheen across the surface, brightest at the top. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.30) 0%,
              rgba(255, 255, 255, 0.06) 45%,
              rgba(255, 255, 255, 0)    100%);
}
.site-header__inner, .site-header__progress { position: relative; z-index: 1; }

.site-header.is-scrolled {
  background: rgba(250, 248, 244, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
              inset 0 -1px 0 rgba(255, 255, 255, 0.2),
              0 10px 34px rgba(10, 24, 38, 0.09);
}

/* Without backdrop-filter, glass is just unreadable text on a photograph. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--paper); }
  .site-header::before { display: none; }
}

/* Content clearance, since a fixed bar is out of the flow. ---------------- */
body { padding-top: var(--header-h); }
/* The homepage keeps its photograph running up behind the glass, so the
   wrapper pads its own contents instead. */
body.has-hero { padding-top: 0; }
body.has-hero .backgroundimage { padding-top: var(--header-h); }

/* ==========================================================================
   Over the hero: dark glass, light type
   --------------------------------------------------------------------------
   At the top of the homepage the bar sits on a dark photograph. Ink-coloured
   text on 38% glass over that is unreadable, so while it is over the hero the
   panel darkens and the type goes light. Once scrolled past, both revert.
   ========================================================================== */
.site-header--onhero:not(.is-scrolled) {
  background: rgba(10, 24, 38, 0.30);
  border-bottom-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30),
              inset 0 -1px 0 rgba(255, 255, 255, 0.10),
              0 8px 30px rgba(0, 0, 0, 0.16);
}
.site-header--onhero:not(.is-scrolled)::before {
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.18) 0%,
              rgba(255, 255, 255, 0.04) 50%,
              rgba(255, 255, 255, 0)    100%);
}
.site-header--onhero:not(.is-scrolled) .brand,
.site-header--onhero:not(.is-scrolled) .brand__name,
.site-header--onhero:not(.is-scrolled) .nav a,
.site-header--onhero:not(.is-scrolled) .nav-toggle { color: #fff; }
.site-header--onhero:not(.is-scrolled) .nav a:hover { color: #fff; }
.site-header--onhero:not(.is-scrolled) .nav__pill {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.site-header--onhero:not(.is-scrolled) .nav ul:hover .nav__pill {
  background: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}
.site-header--onhero:not(.is-scrolled) .nav a.nav__cta {
  background: rgba(255, 255, 255, 0.94);
  color: var(--brand-900);
}
.site-header--onhero:not(.is-scrolled) .nav a.nav__cta:hover {
  background: #fff;
  color: var(--brand-950);
}
.site-header--onhero:not(.is-scrolled) .nav-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}

/* The colour change is a crossfade, not a flick. */
.site-header .brand, .site-header .brand__name,
.site-header .nav a, .site-header .nav-toggle {
  transition: color 320ms var(--ease-out), background-color 320ms var(--ease-out);
}

/* The mobile sheet sits below the glass and needs to stay readable. */
.site-header--onhero .nav[data-open="true"] { background: rgba(12, 26, 40, 0.92); }
.site-header--onhero .nav[data-open="true"] a { color: #fff; }
.site-header--onhero .nav[data-open="true"] a:hover { background: rgba(255, 255, 255, 0.1); }

@media (prefers-reduced-motion: reduce) {
  .site-header .brand, .site-header .nav a, .site-header .nav-toggle { transition: none !important; }
}

/* ==========================================================================
   Stacking
   --------------------------------------------------------------------------
   The bar previously sat inside .backgroundimage, which this stylesheet gives
   isolation:isolate for the hero scrim. That creates a stacking context, and a
   z-index inside one cannot lift an element above anything outside it - so
   page content painted over the navigation however high its z-index went.
   The header is now a direct child of body; this raises it clear of ordinary
   content while staying under the preloader (999999), scroll-top (99999) and
   toasts (9999), which are meant to sit on top.
   ========================================================================== */
.site-header { z-index: 1000; }

/* ==========================================================================
   Letters that rise as the pointer travels across them
   --------------------------------------------------------------------------
   Split by script. The visible glyphs are aria-hidden and the accessible name
   is carried by a visually-hidden copy, so assistive technology reads the word
   rather than spelling it out.
   ========================================================================== */
.nav-letters { display: inline-flex; white-space: pre; }
.nav-letters .l {
  display: inline-block;
  transform: translateY(0);
  transition: transform 340ms cubic-bezier(0.34, 1.28, 0.42, 1);
  transition-delay: calc(var(--i, 0) * 26ms);
}
.nav a:hover .nav-letters .l,
.nav a:focus-visible .nav-letters .l { transform: translateY(-4px); }

/* Leaving collapses the wave from the far end, so it retreats the way it came. */
.nav a .nav-letters .l { transition-delay: calc((var(--n, 1) - var(--i, 0)) * 14ms); }
.nav a:hover .nav-letters .l,
.nav a:focus-visible .nav-letters .l { transition-delay: calc(var(--i, 0) * 26ms); }

@media (prefers-reduced-motion: reduce) {
  .nav-letters .l { transition: none !important; transform: none !important; }
}