/* ==========================================================================
   EventGo Australia — global header and mobile drawer
   --------------------------------------------------------------------------
   Loaded on every route. Fixed, transparent over a hero, and it grows a
   backdrop once the page scrolls — so the homepage keeps its edge-to-edge
   opening while inner pages never lose contrast against their own content.

   UI Pro Max flags a fixed nav that obscures content as a defect, so every
   page's opening block reserves --hdr-h of top padding rather than sliding
   under it.
   ========================================================================== */

.eg-c { --hdr-h: 4.75rem; }

/* An anchor jump (/help/#faq, a skip link, a focused field scrolled into
   view) used to land UNDER the fixed header, hiding the very thing the reader
   asked for. WCAG 2.2 2.4.11: focus must not be obscured by author content. */
html.eg-c { scroll-padding-top: calc(var(--hdr-h) + 1rem); }

/* ---- Header lockup: the official mark + the typographic word ------------
   Header only. Footer V2 uses the plain .eg-c-logo and is unchanged. */
.eg-c-logo--mark { align-items: center; gap: .625rem; min-height: 44px; }
.eg-c-logo__mark { display: block; width: 2rem; height: auto; flex: none; }
.eg-c-logo__txt { display: grid; gap: .2rem; }
.eg-c-logo--mark .eg-c-logo__word { font-size: 1.3125rem; }
.eg-c-logo--mark .eg-c-logo__au { font-size: .5625rem; letter-spacing: .42em; color: var(--c-text-2); }

/* The header is the one part of the new type system that is global: it is
   in scope for this pass and it is one component, so it cannot be Manrope
   on the homepage and Inter everywhere else. The wordmark keeps Archivo —
   it is part of the brand lockup, not navigation. */
.eg-c-hdr, .eg-c-drawer { font-family: var(--font-ui); }
.eg-c-hdr {
  position: fixed; inset: 0 0 auto; z-index: var(--eg-z-nav);
  transition: background-color .3s var(--c-ease), border-color .3s var(--c-ease);
  border-bottom: 1px solid transparent;
}
/* Set by eg-nav.js past the first screenful. Colour only — a fixed element
   that animates its height reflows everything beneath it on every scroll. */
.eg-c-hdr.is-stuck {
  /* THE FALLBACK MATTERS HERE MORE THAN ANYWHERE ELSE IN THIS PROJECT.
     Every other color-mix() is a decorative gradient stop that simply does
     not paint without support. This one is the header's own background: an
     engine that drops it (Safari before 16.2) leaves a FIXED, TRANSPARENT
     header sitting over scrolling body text, which is unreadable rather
     than merely undecorated. The flat colour goes first. */
  background: var(--c-ink);
  background: color-mix(in srgb, var(--c-ink) 88%, transparent);
  border-bottom-color: var(--c-line);
  backdrop-filter: blur(12px);
}
@supports not (backdrop-filter: blur(1px)) {
  .eg-c-hdr.is-stuck { background: var(--c-ink); }
}

.eg-c-hdr__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: var(--hdr-h);
  padding: 0 var(--c-gut);
}

/* The links appear at 1080px, not 960: the bar now carries two account
   controls as well as the brand and five links, and at 960 the last link
   was pushed against Log in. */
.eg-c-hdr__links { display: none; gap: .25rem; }
@media (min-width: 1080px) { .eg-c-hdr__links { display: flex; } }
/* Sentence case at reading size. The uppercase 12px tracked style belongs to
   marketing CTAs; navigation is read, not shouted. */
.eg-c-hdr__links a,
.eg-c-hdr__login {
  position: relative; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 .75rem; border-radius: 8px;
  font-size: .9375rem; font-weight: 600; letter-spacing: 0;
  color: var(--c-text-2); transition: color .2s var(--c-ease);
}
.eg-c-hdr__links a:hover,
.eg-c-hdr__login:hover { color: var(--c-text); }
.eg-c-hdr__links a[aria-current="page"],
.eg-c-hdr__login[aria-current="page"] { color: var(--c-text); }
/* The current page is marked by more than colour alone — colour on its own
   is not a sufficient distinction (WCAG 1.4.1). */
.eg-c-hdr__links a[aria-current="page"]::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .5rem;
  height: 2px; border-radius: 2px;
  background: linear-gradient(96deg, var(--eg-violet), var(--eg-teal));
}
.eg-c-hdr__links a:hover::before {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .5rem;
  height: 2px; border-radius: 2px; background: var(--c-line-strong);
}
.eg-c-hdr__links a[aria-current="page"]:hover::before { content: none; }

.eg-c-hdr__end { display: flex; align-items: center; gap: .5rem; }
/* Log in is a quiet text control and only joins the bar with the links —
   under 1080px it lives in the menu. Sign up is the one filled control, and
   stays in the bar down to 360px, where the brand needs the room. */
.eg-c-hdr__login { display: none; }
@media (min-width: 1080px) { .eg-c-hdr__login { display: inline-flex; } }
.eg-c-hdr__signup {
  padding: .6rem 1.25rem; font-size: .9375rem; font-weight: 700; letter-spacing: 0;
  text-transform: none;
}
.eg-c-hdr__signup[aria-current="page"] { box-shadow: 0 0 0 2px var(--c-ink), 0 0 0 4px var(--c-accent); }
@media (max-width: 359.98px) { .eg-c-hdr__signup { display: none; } }
/* The open menu carries its own full-width Sign up; two in view at once is
   noise. visibility also takes the bar's copy out of the tab order. */
html.eg-c-drawer-open .eg-c-hdr__signup { visibility: hidden; }

/* ---- Burger ------------------------------------------------------------- */

.eg-c-burger {
  display: grid; place-items: center;
  /* 44px minimum, per the touch-target floor. */
  width: 44px; height: 44px;
  border-radius: 999px; border: 1.5px solid var(--c-line-strong);
}
@media (min-width: 1080px) { .eg-c-burger { display: none; } }
.eg-c-burger__box { display: grid; gap: 5px; width: 18px; }
.eg-c-burger__box span {
  display: block; height: 2px; border-radius: 2px; background: var(--c-text);
  transition: transform .3s var(--c-ease), opacity .2s var(--c-ease);
}
[aria-expanded="true"] .eg-c-burger__box span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .eg-c-burger__box span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .eg-c-burger__box span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Drawer ------------------------------------------------------------- */

/* [hidden] does the work: a closed drawer is out of the tab order and out of
   the accessibility tree, which no amount of opacity or visibility juggling
   achieves reliably. eg-nav.js toggles the attribute and animates around it. */
.eg-c-drawer[hidden] { display: none; }
.eg-c-drawer {
  position: fixed; inset: var(--hdr-h) 0 0; z-index: var(--eg-z-nav-drawer);
  display: grid; align-content: start; gap: .5rem;
  /* The last link used to sit behind the browser's own bottom bar and the
     home indicator. The drawer scrolls, so it was reachable — but reachable
     only by scrolling a menu that looks like it has already ended is not
     the same as visible. */
  padding: 2rem max(var(--c-gut), env(safe-area-inset-right))
           calc(3rem + env(safe-area-inset-bottom, 0px))
           max(var(--c-gut), env(safe-area-inset-left));
  background: var(--c-ink);
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 1080px) { .eg-c-drawer { display: none !important; } }
.eg-c-drawer__nav { display: grid; }
.eg-c-drawer__nav a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: .6rem 0; border-bottom: 1px solid var(--c-line);
  font-weight: 700;
  font-size: clamp(1.5rem, 7vw, 1.875rem); letter-spacing: -.025em;
}
.eg-c-drawer__nav a::after { content: "\2192"; font-weight: 400; font-size: 1rem; color: var(--c-text-3); }
.eg-c-drawer__nav a[aria-current="page"] { color: var(--c-accent); }
.eg-c-drawer__nav a[aria-current="page"]::after { content: "Current"; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); }
.eg-c-drawer__more { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 1rem 0 2rem; }
.eg-c-drawer__more a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 1rem; font-weight: 600; color: var(--c-text-2);
}
.eg-c-drawer__more a[aria-current="page"] { color: var(--c-text); text-decoration: underline; text-underline-offset: .3em; }
.eg-c-drawer__acct { display: grid; gap: .75rem; }
.eg-c-drawer .eg-c-btn { width: 100%; }
.eg-c-drawer__note { margin-top: .25rem; font-size: .875rem; color: var(--c-text-3); }

html.eg-c-drawer-open { overflow: hidden; }