/**
 * @file
 * Site header.
 *
 * Replaces the old `.navbar.fixed-top` with 48px/27px hard-coded padding and a
 * 44px magenta wordmark that overflowed below 400px. This header is sticky
 * rather than fixed (so it never covers content on short viewports), shrinks
 * on scroll, and keeps the wordmark legible at every width.
 */

/**
 * NO BACKDROP-FILTER. THIS IS THE FIX FOR THE FLICKER, AND IT IS NOT A DOWNGRADE.
 *
 * The bar used to be 88% opaque with `backdrop-filter: blur(14px)`, promoted to
 * its own layer with `translateZ(0)` to stop it tearing. The promotion helped
 * and did not cure it: a sticky backdrop-filtered element still has to re-read
 * whatever is passing underneath, and on a fast scroll — especially with a
 * second backdrop-filtered surface on screen, which the hub cards used to be —
 * the band under the header tears into a strip of half-painted content. That is
 * the flicker people were reporting along the top of the page.
 *
 * An opaque bar cannot flicker: there is nothing behind it to re-read. And at
 * 88% over a dark page the blur was never really visible — what it mostly did
 * was soften a picture scrolling past into a faint smear. The bar is now simply
 * the page's own canvas colour.
 *
 * `translateZ(0)` and `isolation` stay. They are cheap, they keep the header on
 * one compositor layer while the page moves under it, and `isolation` stops a
 * card's hover glow being composited into the bar as it passes. The transform
 * also preserves something the blur used to provide for free: it makes the
 * header the containing block for its `position: fixed` descendant, the mobile
 * menu drawer. Removing it would move that drawer.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface-0);
  border-block-end: 1px solid transparent;
  transform: translateZ(0);
  isolation: isolate;

  transition:
    border-color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}

.site-header.is-stuck {
  border-block-end-color: var(--border-subtle);
  /* A hairline alone is easy to lose against a card scrolling under it; the
     shadow is what actually reads as "this bar is in front". */
  box-shadow: var(--shadow-2);
}

/*
 * The council-wide links that used to sit in a bar above the header now render
 * in the footer — see .site-footer__links in footer.css. The header carries
 * branding, the primary menu and actions, nothing else.
 */

/* Main bar */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  min-block-size: var(--header-height);
  inline-size: min(var(--wrapper-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-block: var(--space-2xs);
}

/* Branding */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  flex: none;
  color: var(--me-magenta);
  text-decoration: none;
}

/*
 * ONE AXIS ONLY.
 *
 * It used to set both — `inline-size: 2rem; block-size: 2rem` — which forces a
 * square on a mark that is wider than it is tall, so the logo came out narrow
 * and stretched. Removing both left it at its full natural size, which filled
 * the header.
 *
 * Height fixed, width free: the mark is always 2rem tall and keeps its own
 * proportions whatever file is uploaded. `flex: none` matters as much as the
 * sizes — as a flex item with an automatic width it would otherwise be allowed
 * to shrink, which is the same squeeze by another route.
 */
.brand__mark {
  /*
   * THE MARK SCALES WITH THE WORDMARK, ON THE SAME CURVE.
   *
   * It was a flat 2rem while `.brand__name-primary` is fluid —
   * `clamp(1.25rem, 1rem + 1vw, 1.75rem)`. At desktop width that was a good
   * match: a 32px mark against 28px type, overhanging it by 2px top and
   * bottom. On a phone the type drops to 20px and the mark did not, so it
   * overhung by 6px each side and the lockup went top-heavy.
   *
   * This is the wordmark's own clamp multiplied by 8/7, so the mark stays
   * 1.14x the type's size at every width and the two can never drift:
   *
   *   1.25 x 8/7 = 1.43     (1rem + 1vw) x 8/7 = 1.14rem + 1.14vw
   *   1.75 x 8/7 = 2.00
   *
   * IF THE WORDMARK'S SIZE CHANGES, CHANGE THIS WITH IT. They are one lockup
   * described in two places, which is the thing to watch here.
   */
  block-size: clamp(1.43rem, 1.14rem + 1.14vw, 2rem);
  inline-size: auto;
  /* As a flex item with an automatic width it would otherwise be allowed to
     shrink — the same squeeze that `inline-size: 2rem` used to cause. */
  flex: none;
  height: 20px;
  width: auto;
}

.brand__name {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand__name-primary {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: var(--weight-black);
  letter-spacing: -0.03em;
  color: var(--me-magenta);
}

.brand__name-secondary {
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

/*
 * THE WORDMARK DOES NOT CHANGE COLOUR ON HOVER.
 *
 * It used to lighten to --me-magenta-300. That is the right treatment for a
 * link in a sentence and the wrong one for a logo: "Events Mosman" in #EC008C
 * IS the brand, and a brand that shifts hue under the pointer reads as a bug
 * before it reads as a hover state. Every other link in the header still has
 * its own, because they are links; this one is the site's name.
 *
 * It remains an obvious target without it — the pointer is already a hand over
 * a whole-word link at 1.75rem, and the keyboard focus ring is untouched, which
 * is the affordance that actually has to be there.
 */

/* Nav sits between branding and actions */
.site-header__nav {
  margin-inline-start: auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex: none;
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.nav-toggle__bars {
  position: relative;
  inline-size: 1rem;
  block-size: 2px;
  background: currentColor;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  background: currentColor;
  transition: transform var(--duration-base) var(--ease-out);
}

.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 5px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 63.999rem) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-header__nav {
    position: fixed;
    inset: var(--header-offset) 0 auto;
    max-block-size: calc(100svh - var(--header-offset));
    overflow-y: auto;
    padding: var(--space-m) var(--gutter) var(--space-xl);
    background: var(--surface-1);
    border-block-end: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-3);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition:
      transform var(--duration-base) var(--ease-out),
      opacity var(--duration-base) var(--ease-out),
      visibility var(--duration-base);
  }

  .site-header__nav.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
  }
}