/* ==========================================================================
   EventGo Australia — V4 CORE (every shell route and the homepage)
   --------------------------------------------------------------------------
   Header V4 (the For Organisers menu, List Your Event, the larger lockup),
   the V4 drawer's organiser area, the delivery pair, the WhatsApp mark fix
   and the local line. Loaded straight after 05-nav.css, which is frozen and
   untouched: everything here either adds a class 05-nav.css does not know,
   or narrows a rule under .eg-c-hdr--v4 / .eg-c-drawer--v4.
   Only transform and opacity animate; reduced motion stills all of it.
   ========================================================================== */

/* ---- 1 · THE LOCKUP, LARGER (§8) ----------------------------------------
   Same official mark, same words, more presence. The bar keeps its height
   (--hdr-h, 76px). V4 took the mark from 32 to 40px and the word from 21 to
   24px; the V4.3 pass (Utsav: "a little more confident and readable") takes
   them to 44 / 26px on tablet and desktop and 38 / 22px on phones — measured
   at 320, 360, 390, 430, 768, 1024, 1080, 1280 and 1440: the bar stays 76px
   and nothing it sits beside moves closer than 24px. */
.eg-c-logo--v4 { gap: .75rem; }
.eg-c-logo--v4 .eg-c-logo__mark { width: 2.75rem; }
.eg-c-logo--v4 .eg-c-logo__word { font-size: 1.625rem; }
.eg-c-logo--v4 .eg-c-logo__au { font-size: .6875rem; letter-spacing: .44em; }
@media (max-width: 479.98px) {
  .eg-c-logo--v4 { gap: .625rem; }
  .eg-c-logo--v4 .eg-c-logo__mark { width: 2.375rem; }
  .eg-c-logo--v4 .eg-c-logo__word { font-size: 1.375rem; }
  .eg-c-logo--v4 .eg-c-logo__au { font-size: .5625rem; letter-spacing: .4em; }
}

/* ---- 2 · THE BAR -----------------------------------------------------------
   Six links, the For Organisers menu, and — width permitting — List Your
   Event. The links still appear at 1080 (eg-nav.js closes the drawer at that
   width, so the two must agree). Between 1080 and 1279 the links tighten
   and List Your Event lives only in the For Organisers menu. */
.eg-c-hdr--v4 .eg-c-hdr__bar { gap: 1rem; }
.eg-c-hdr--v4 .eg-c-hdr__links { align-items: center; gap: 0; }
@media (min-width: 1080px) and (max-width: 1279.98px) {
  .eg-c-hdr--v4 .eg-c-hdr__links a,
  .eg-c-hdr--v4 .eg-c-hdr__login { padding: 0 .5rem; }
  .eg-c-hdr--v4 .eg-c-hdr__links a[aria-current="page"]::after,
  .eg-c-hdr--v4 .eg-c-hdr__links a:hover::before { left: .5rem; right: .5rem; }
}
.eg-c-hdr__list { display: none; }
@media (min-width: 1280px) {
  .eg-c-hdr__list {
    display: inline-flex; padding: .6rem 1.25rem; font-size: .9375rem; font-weight: 700;
    letter-spacing: 0; text-transform: none;
  }
  /* With List Your Event in the bar, Sign up steps back to an outline: one
     filled control, and it is the one the business exists for. Buying a
     ticket needs no account, so Sign up was never the way into an event. */
  .eg-c-hdr--v4 .eg-c-hdr__signup { background: transparent; border: 1.5px solid var(--c-line-strong); box-shadow: none; }
  .eg-c-hdr--v4 .eg-c-hdr__signup:hover { border-color: var(--c-text-2); }
}
.eg-c-hdr__list[aria-current="page"] { box-shadow: 0 0 0 2px var(--c-ink), 0 0 0 4px var(--c-accent); }

/* ---- 3 · FOR ORGANISERS: a real link + a disclosure button ---------------
   The link goes to /organisers/. The button opens the menu (click, Enter,
   Space, Arrow Down). Hover never opens it — nothing depends on hover. */
.eg-c-orgnav { position: relative; display: flex; align-items: center; }
.eg-c-hdr--v4 .eg-c-orgnav__link { padding-right: .25rem; }
.eg-c-orgnav__link[data-section-current] { color: var(--c-text); }
.eg-c-orgnav__btn {
  display: grid; place-items: center; width: 32px; height: 44px; border-radius: 8px;
  color: var(--c-text-2); transition: color .2s var(--c-ease);
}
.eg-c-orgnav__btn:hover, .eg-c-orgnav__btn[aria-expanded="true"] { color: var(--c-text); }
.eg-c-orgnav__btn svg { width: 16px; height: 16px; transition: transform .2s var(--c-ease); }
.eg-c-orgnav__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.eg-c-orgmenu[hidden] { display: none; }
.eg-c-orgmenu {
  position: absolute; top: calc(100% + .5rem); left: -.75rem; z-index: 1;
  display: grid; gap: .125rem; width: 21.5rem; padding: .5rem;
  border-radius: 16px; border: 1px solid var(--border-inverse);
  background: var(--c-ink-soft);
  box-shadow: var(--shadow-xl);
  animation: eg-orgmenu-in .18s var(--c-ease);
}
@keyframes eg-orgmenu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* .eg-c-hdr__links a styles every anchor in the bar; the menu's items are
   rows, not bar links, so those rules are undone here. */
.eg-c-hdr__links .eg-c-orgmenu a.eg-c-orgmenu__i {
  display: grid; gap: .125rem; align-content: center; min-height: 52px;
  padding: .625rem .875rem; border-radius: 10px; color: var(--c-text);
}
.eg-c-hdr__links .eg-c-orgmenu a.eg-c-orgmenu__i::before,
.eg-c-hdr__links .eg-c-orgmenu a.eg-c-orgmenu__i::after { content: none; }
.eg-c-orgmenu__i:hover, .eg-c-orgmenu__i:focus-visible { background: var(--border-inverse); }
.eg-c-orgmenu__i b { font-size: .9375rem; font-weight: 700; }
.eg-c-orgmenu__i span { font-size: .8125rem; font-weight: 500; color: var(--c-text-2); }
.eg-c-orgmenu__i.is-cta b { color: var(--c-accent); }
.eg-c-orgmenu__i[aria-current="page"] b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.eg-c-orgmenu__local {
  margin: .25rem .875rem .375rem; padding-top: .625rem; border-top: 1px solid var(--border-inverse);
  font-size: .75rem; color: var(--c-text-3);
}

/* ---- 4 · THE DRAWER'S ORGANISER AREA (§7) --------------------------------- */
.eg-c-drawer__org {
  display: grid; gap: .75rem; margin: 1rem 0 .25rem; padding: 1.25rem;
  border-radius: 16px; border: 1px solid var(--c-line);
  background: var(--c-ink-soft);
  background: color-mix(in srgb, var(--c-violet) 9%, var(--c-ink));
}
.eg-c-drawer__org h2 {
  font-family: var(--font-ui); font-size: .75rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-2);
}
.eg-c-drawer--v4 .eg-c-drawer__more { margin: 1rem 0 1.25rem; }
.eg-c-drawer__login {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  font-weight: 700; color: var(--c-text);
}
.eg-c-drawer__login[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; }
.eg-c-drawer__local { margin-top: 1.5rem; }

/* The drawer's buttons are navigation, read in sentence case — the tracked
   capitals of .eg-c-btn belong to marketing CTAs, not a menu. */
.eg-c-drawer--v4 .eg-c-btn {
  font-family: var(--font-ui); font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none;
}

/* ---- 5 · THE LOCAL LINE (§5, §26) ----------------------------------------
   Small, confident, never a badge shouting over the content. */
.eg-c-local { font-size: .8125rem; font-weight: 600; color: var(--c-text-2); letter-spacing: .005em; }
.eg-c-local abbr { text-decoration: none; }
.eg-c-foot__local { margin-top: 1rem; }

/* ---- 6 · THE WHATSAPP MARK, EVERYWHERE (§17) -----------------------------
   00-base.css sets every img to display:block, so an official glyph placed
   inline beside the word broke onto a line of its own (the homepage hero
   read "Email ticket included ·" / [glyph] / "WhatsApp delivery optional").
   The mark is inline, square and never squeezed in a flex row. Written as
   img:where(…) so it weighs exactly what the reset weighs: it beats
   `img { display: block }` by coming later, and any component that sizes
   its own mark (the Access Route's .eg-c-ar-node__wa) still wins. */
img:where([data-wa-mark]) { display: inline-block; flex: none; aspect-ratio: 1 / 1; height: auto; vertical-align: -.2em; }

/* ---- 7 · THE DELIVERY PAIR — one component for every placement -----------
   V4.4: "Email + WhatsApp ticket delivery included" — both channels, both
   INCLUDED (the WhatsApp-optional pair is superseded). Each channel has its
   own symbol at the same optical size in the same ring; the "+" is read as
   "and"; each channel stays whole when the line wraps. */
.eg-c-dp {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  margin: 0; font-size: .9375rem; line-height: 1.3; color: var(--c-text-2);
}
.eg-c-dp__i { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.eg-c-dp__ico {
  display: inline-grid; place-items: center; width: 1.875rem; height: 1.875rem; flex: none;
  border-radius: 999px; border: 1px solid var(--c-line-strong); color: var(--c-teal);
}
.eg-c-dp__ico svg { width: 1rem; height: 1rem; }
.eg-c-dp__ico img[data-wa-mark] { width: 1rem; height: 1rem; vertical-align: 0; }
.eg-c-dp { gap: .5rem .625rem; }
.eg-c-dp__plus { color: var(--c-text-3); font-weight: 700; }
.eg-c-dp__i { color: var(--c-text); font-weight: 600; }
.eg-c-dp__t { white-space: nowrap; }
.eg-c-dp--sm { font-size: .875rem; }
.eg-c-dp--sm .eg-c-dp__ico { width: 1.625rem; height: 1.625rem; }
.eg-c-dp--sm .eg-c-dp__ico svg, .eg-c-dp--sm .eg-c-dp__ico img[data-wa-mark] { width: .875rem; height: .875rem; }

/* ---- 7b · TICKET DELIVERY, INCLUDED (V4.4) — the event page's statement ---
   It replaces the Email / Email + WhatsApp (+$0.50) radio cards: there is no
   question left to ask. The nodes are the Access Route's (94-access-route.css),
   so the official glyph keeps its own clear space inside its ring. */
.eg-c-dinc { display: grid; gap: .75rem; margin: .25rem 0 0; padding: 1rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius-lg); background: var(--c-ink-soft); }
.eg-c-dinc[hidden] { display: none; }
.eg-c-dinc__h { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0; font-size: var(--t-label, .75rem); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); }
.eg-c-dinc__tag { padding: .25rem .625rem; border-radius: var(--radius-full); border: 1px solid var(--c-teal); color: var(--c-teal); letter-spacing: .08em; }
.eg-c-dinc__l { display: grid; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.eg-c-dinc__l li { display: flex; align-items: center; gap: .875rem; min-width: 0; }
.eg-c-dinc__l .eg-c-ar-node { flex: none; background: var(--c-ink); }
.eg-c-dinc__t { display: grid; gap: .125rem; min-width: 0; }
.eg-c-dinc__t b { font-weight: 700; color: var(--c-text); }
.eg-c-dinc__t small { font-size: .875rem; color: var(--c-text-2); }
.eg-c-dinc__n { margin: 0; padding-top: .75rem; border-top: 1px solid var(--c-line); font-size: .875rem; color: var(--c-text-2); }

/* /checkout/ — the included delivery summary (v4.checkout_dsum). The frozen
   script still wires a Change button; it stays in the DOM, never shown. */
/* Doubled class: 92-checkout.css (loaded after this file) sets the two-column
   grid with Change; the included summary has one column and no Change. */
.eg-c-dsum.eg-c-dsum--incl { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "v" "f" "w"; padding-right: 1rem; }
.eg-c-dsum__c[hidden] { display: none; }
.eg-c-dsum__why { grid-area: w; margin: .25rem 0 0; font-size: .875rem; color: var(--c-text-2); }

@media (prefers-reduced-motion: reduce) {
  .eg-c-orgmenu { animation: none; }
  .eg-c-orgnav__btn svg { transition: none; }
}

/* ---- 8 · UPCOMING · ON NOW · PAST (§21) — links, not a JS tab widget ---- */
.eg-c-when { display: inline-flex; gap: .25rem; margin-top: 1.5rem; padding: .25rem; border-radius: 999px; border: 1px solid var(--c-line-strong); }
.eg-c-when__t {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.125rem; border-radius: 999px;
  font: 700 .9375rem var(--font-ui); color: var(--c-text-2);
}
.eg-c-when__t:hover { color: var(--c-text); }
.eg-c-when__t[aria-current="page"] { background: var(--c-violet); color: var(--text-on-brand); }
.eg-c-when__empty { margin-top: 1rem; color: var(--c-text-2); }
.eg-c-when__empty a { color: var(--c-accent); text-decoration: underline; text-underline-offset: .2em; }

/* ---- 9 · THE BRAND NAME IS NEVER SET IN CAPITALS (§0) ---------------------
   Tracked-capitals labels are a house style, but "EventGo Australia" is
   written the one way. Any label that carries the name takes .eg-c-bcase:
   sentence case, a lighter track, same size and weight. */
.eg-c-bcase { text-transform: none !important; letter-spacing: .02em !important; }

/* /events/?when=now — what is not on right now (eg-events-when.js). */
.is-when-off { display: none !important; }