/* ==========================================================================
   EventGo Australia — landing page · base layer
   --------------------------------------------------------------------------
   Load order is load-bearing and matches the enqueue order a WordPress child
   theme would use:

     00-base → 02-motion → 03-footer → 05-nav        (core, every route)
     21-home-hero → 22-home-events → 23-home-journey
       → 24-home-sides → 25-home-moments → 26-home-backstage   (homepage)

   Every file after this one styles exactly ONE section, so a section can be
   lifted into an Elementor widget or a WP template part by taking its markup
   block and its single stylesheet. Nothing cross-references another section.

   Namespace is .eg-c-* ("cinematic"). The bare .eg-* prefix is already used by
   assets/css/sections.css, and the eventual child theme will load alongside
   the parent theme plus WooCommerce, Eventin and Dokan CSS.

   Colour comes from assets/css/tokens.css through the `eg-dark` island hook.
   No new hex is introduced in any v3 file. The one exception is the hero
   contrast scrim, which is black-with-alpha — a neutral density filter, not a
   brand colour.
   ========================================================================== */

.eg-c {
  color-scheme: dark;

  --c-ink:         var(--eg-ink-900);
  --c-ink-soft:    var(--eg-ink-800);
  --c-surface:     var(--eg-ink-700);

  /* Violet as a GROUND (white sits on it). */
  --c-violet:      var(--eg-violet);
  /* Violet as TEXT — a different value on purpose. #5B3FE8 is 2.9:1 on this
     ink and fails AA; --accent-text is the validated dark step at 6.38:1. */
  --c-accent:      var(--accent-text);
  --c-blue:        var(--eg-blue);
  --c-teal:        var(--eg-teal);

  --c-text:        var(--text-primary);
  --c-text-2:      var(--text-secondary);
  --c-text-3:      var(--text-muted);
  --c-line:        var(--border-subtle);
  --c-line-strong: var(--border-strong);

  --c-ease:        cubic-bezier(0.22, 1, 0.36, 1);

  /* Spacing scale. One ratio, no magic numbers downstream. */
  --c-gut:         clamp(1.25rem, 5vw, 5rem);   /* page gutter   */
  --c-sec:         clamp(5rem, 12vh, 10rem);    /* section block */

  /* ---- THE LAYER CONTRACT ---------------------------------------------
     ONE map, so stacking is a decision made once rather than a conflict
     solved repeatedly. Every `z-index` in this project that participates in
     the page's root stacking context comes from here.

     Reading up the stack:

       content      ordinary page content and the decorative backdrops that
                    sit behind it inside their own section
       nav          the fixed header, and the drawer just beneath it
       cursor       the desktop rope. BELOW the Route Pass on purpose — a
                    cursor drawn over a page transition is two systems
                    arguing about who owns the screen
       modal        anything that takes over the page and must be dismissed
       route        the Route Pass overlay
       touch        touch feedback. ABOVE the Route Pass on purpose: a tap
                    on a link starts both, and the burst has to be able to
                    finish ON TOP of the cover it triggered, or the reader
                    sees half a gesture and then a wipe
       skip         the skip link beats EVERYTHING. It used to sit at 999,
                    under both the Route Pass and the touch layer, which
                    means the one control a keyboard user needs first was
                    the one control an overlay could bury
       debug        the ?motionDebug=1 panel, and nothing else, ever

     A section may still stack its own children locally (`z-index: -1` on a
     backdrop inside a `position: relative` section). That is a private
     stacking context and is not part of this map. */
  --eg-z-nav-drawer: 690;
  --eg-z-nav:        700;
  --eg-z-cursor:     900;
  --eg-z-modal:      950;
  --eg-z-route:     1000;
  --eg-z-touch:     1010;
  --eg-z-skip:      1100;
  --eg-z-debug:     2000;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* THE CANVAS, NOT JUST THE BODY.

   iOS paints the overscroll rubber-band, and the safe-area letterbox in
   landscape on a notched phone, with the CANVAS colour — which comes from
   <html> if it has one and only falls through to <body> otherwise. Declaring
   it here means a hard scroll past the top of a dark page shows dark, not
   white.

   `-webkit-text-size-adjust: 100%` stops iOS inflating text after a rotation
   into landscape; it does NOT stop the reader zooming, which would be an
   accessibility failure. The viewport meta deliberately carries no
   `user-scalable=no` and no `maximum-scale`. */
html {
  background: var(--c-ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--c-ink);
  color: var(--c-text);
  font-family: var(--font-body);
  /* Floor is 1rem: UI Pro Max flags anything under 16px body on mobile as a
     high-severity readability failure. */
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 4px; border-radius: 4px; }

.eg-c-skip {
  position: fixed; z-index: var(--eg-z-skip); top: 1rem; left: 1rem;
  padding: .75rem 1.25rem; border-radius: 4px;
  background: var(--c-violet); color: var(--c-text); font-weight: 600;
  transform: translateY(-250%);
  transition: transform .2s var(--c-ease);
}
.eg-c-skip:focus { transform: none; }

.eg-c-sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Type
   --------------------------------------------------------------------------
   Archivo (display) + Inter (body), both already self-hosted at 83KB total.
   UI Pro Max's "Modern Dark Cinema" profile recommends heavy display weight
   with negative tracking and uppercase +tracking labels, which is what this
   is; its Inter-only variant was not adopted because Archivo's 900 carries
   the editorial scale far better and costs nothing extra — it is already
   loaded for the rest of the site.
   ========================================================================== */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   The homepage type system — .eg-c-type
   --------------------------------------------------------------------------
   Bricolage Grotesque for headlines, Manrope for everything a reader uses:
   chosen from three systems set side by side in real product context
   (Figma 09; docs/homepage-review/T1-T5). OPT-IN: only a block carrying
   .eg-c-type gets it — the homepage's <main> and the /login/ + /signup/
   section — so no other route changes until someone decides it should.
   The header sets --font-ui itself (05-nav.css).

   ONE SCALE, EIGHT ROLES. Every size on the homepage is one of these; a
   component picks a role, it does not invent a size.

     --t-hero     the H1. The payoff line is set 1.18x this (21-home-hero).
     --t-section  section H2s
     --t-title    panel and step headings
     --t-card     event-card titles, organiser verbs
     --t-lead     the paragraph under a heading
     --t-body     running text (the body size, restated for the scope)
     --t-meta     dates, venues, organisers, notes
     --t-label    eyebrows, captions, small caps labels

   Headlines are SENTENCE CASE and tight; everything else is sentence case
   too — the uppercase, tracked style survives only in eyebrows and labels,
   where it is a marker rather than something to read.

   Line height is per role: a display face at .9 and a paragraph at 1.6 are
   both right, and one number for both is how headlines end up gappy or
   paragraphs cramped.

   Numbers that are compared (dates, times, prices, counts) are TABULAR —
   Manrope and Bricolage both carry tnum, so no third font for numerals.
   ========================================================================== */

.eg-c-type {
  --t-hero:    clamp(2.5rem, 1rem + 5.2vw, 5.5rem);
  --t-section: clamp(2.125rem, 1.35rem + 3.1vw, 4.25rem);
  --t-title:   clamp(1.5rem, 1.15rem + 1.3vw, 2.375rem);
  --t-card:    clamp(1.25rem, 1.1rem + .45vw, 1.5rem);
  --t-lead:    clamp(1.0625rem, .98rem + .4vw, 1.3125rem);
  --t-body:    clamp(1rem, .96rem + .2vw, 1.0625rem);
  --t-meta:    .9375rem;
  --t-label:   .75rem;

  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.6;
}
.eg-c-type :where(h1, h2, h3) {
  font-family: var(--font-headline);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -.03em;
  line-height: .96;
  text-wrap: balance;
}
.eg-c-type :where(p, li, dd, figcaption) { text-wrap: pretty; }
.eg-c-type :where(time, .eg-c-num) { font-variant-numeric: tabular-nums; }

.eg-c-type .eg-c-eyebrow {
  font-size: var(--t-label); font-weight: 700; letter-spacing: .2em;
}
.eg-c-type .eg-c-lead { font-size: var(--t-lead); line-height: 1.55; }
/* The tagline device keeps its 0.875rem floor (its blue is 4.6:1 on the
   ink, passing only just) even where it doubles as an eyebrow. */
.eg-c-type .eg-c-tagline { font-size: max(.875rem, 1em); font-weight: 800; letter-spacing: .14em; }

/* Buttons read, they do not shout: sentence case, the UI face, one weight
   heavier than running text. Footer V2 keeps its own buttons unchanged. */
.eg-c-type .eg-c-btn {
  font-size: .9375rem; font-weight: 700; letter-spacing: 0; text-transform: none;
}
.eg-c-type .eg-c-btn--lg { font-size: 1rem; padding: 1.05rem 2rem; }
.eg-c-type .eg-c-btn--sm { font-size: .875rem; padding: .625rem 1.125rem; }

/* A press answers the finger on touch, where there is no hover to preview
   it. Transform only; nothing under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .eg-c-type .eg-c-btn { transition: background-color .25s var(--c-ease), box-shadow .25s var(--c-ease), transform .15s var(--c-ease); }
  .eg-c-type .eg-c-btn:active { transform: scale(.975); }
}

/* Fluid, content-driven, no fixed heights — UI Pro Max marks clipped
   fixed-height text as a CRITICAL reflow failure (WCAG 1.4.4 / 1.4.10). */
.eg-c-h2 { font-size: clamp(2.25rem, 7vw, 6rem); }
.eg-c-h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); }

.eg-c-eyebrow {
  font-size: .6875rem; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--c-text-3);
}
.eg-c-lead {
  color: var(--c-text-2);
  font-size: clamp(1rem, .95rem + .45vw, 1.25rem);
  max-inline-size: 46ch;
}

/* Gradient text. Used sparingly — one phrase per section at most, never a
   whole paragraph. --eg-gradient's teal stop sits at 100%, which falls past
   the last glyph of a short phrase, so the phrase reads violet-to-blue and
   the brand's third colour never appears. Stops pulled in to 38/80 so teal
   lands on the text even on a two-word line like "up for." */
.eg-c-grad {
  font-style: normal;
  background: linear-gradient(96deg,
    var(--eg-violet) 0%, var(--eg-blue) 38%, var(--eg-teal) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .eg-c-grad { color: var(--c-teal); }
}

/* ==========================================================================
   FORCED COLOURS — Windows High Contrast and equivalents
   --------------------------------------------------------------------------
   The OS replaces every colour with its own pair, which breaks exactly two
   things here and both are cosmetic: text painted through a gradient with
   `color: transparent` disappears, and hairline borders drawn in a brand
   colour lose their contrast against the forced background.

   Everything else in this build is already safe in forced colours because
   it is real text in real boxes. The motion layers are decorative and are
   simply turned off — a forced-colours user is telling the browser they need
   maximum legibility, not four objects on a spline.
   ========================================================================== */
@media (forced-colors: active) {
  .eg-c-grad,
  .eg-c-tagline i {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
  .eg-m-trail, .eg-m-touch, .eg-m-rp__stage, .eg-m-rp__bar { display: none !important; }
  .eg-m-rp__bg { background: Canvas; }
  .eg-c-btn, .eg-c-card, .eg-c-chip { border: 1px solid ButtonText; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* ==========================================================================
   The tagline device
   --------------------------------------------------------------------------
   Straight from the official logo: three words, three brand colours, in the
   order purple → blue → teal. It is the most ownable thing in the identity
   after the mark, so it is a component rather than a one-off.
   Never re-order the colours and never re-word it.
   ========================================================================== */

.eg-c-tagline {
  display: inline-flex; flex-wrap: wrap; gap: .4em;
  font-weight: 700; letter-spacing: .02em;
}
.eg-c-tagline i { font-style: normal; }
.eg-c-tagline i:nth-child(1) { color: var(--c-accent); }
.eg-c-tagline i:nth-child(2) { color: var(--eg-blue); }
.eg-c-tagline i:nth-child(3) { color: var(--c-teal); }
/* Blue at #2E86E0 is 4.6:1 on the ink — passing, but only just, so the device
   is never set below 0.875rem. Enforced here rather than left to each caller. */
.eg-c-tagline { font-size: max(0.875rem, 1em); }

/* ==========================================================================
   Logo lockup — TEMPORARY
   --------------------------------------------------------------------------
   The official logo (assets/v3/brand/) is a white-background PNG whose
   wordmark is deep navy, so it cannot sit on this ground: keying the white out
   would also remove the Opera House, bridge and fireworks, which are white
   too. Until a reversed transparent SVG is supplied, the wordmark is set as
   real HTML text in the brand faces with the gradient on "Go".

   This is a typographic lockup built from the brand system, NOT a redrawing of
   the logo. Replace the markup with <img> the moment the asset arrives; see
   assets/v3/brand/README.md.
   ========================================================================== */

.eg-c-logo { display: inline-flex; align-items: baseline; gap: .45rem; }
.eg-c-logo__word {
  font-family: var(--font-display); font-weight: 900;
  font-size: 1.15rem; letter-spacing: -.03em; line-height: 1;
}
.eg-c-logo__au {
  font-family: var(--font-body); font-size: .5625rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase; color: var(--c-text-3);
}

/* ==========================================================================
   Buttons
   --------------------------------------------------------------------------
   min-height 44px on every variant: UI Pro Max touch-target floor. The ghost
   variant uses --c-line-strong (0.18 alpha) not --c-line (0.09) — at 0.09 a
   border is too faint to read as a control.
   ========================================================================== */

.eg-c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 44px; padding: .95rem 1.9rem; border-radius: 999px;
  background: var(--c-violet); color: var(--c-text);
  font-size: .8125rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap; will-change: transform;
  transition: background-color .25s var(--c-ease), box-shadow .25s var(--c-ease);
}
.eg-c-btn:hover { box-shadow: 0 12px 44px -12px var(--c-violet); }
.eg-c-btn--lg { padding: 1.15rem 2.5rem; font-size: .875rem; }
.eg-c-btn--sm { padding: .7rem 1.35rem; font-size: .75rem; }
.eg-c-btn--ghost { background: transparent; border: 1.5px solid var(--c-line-strong); }
.eg-c-btn--ghost:hover {
  background: rgb(255 255 255 / 0.07);
  border-color: rgb(255 255 255 / 0.34);
  box-shadow: none;
}

/* ==========================================================================
   Section furniture
   ========================================================================== */

.eg-c-section { position: relative; padding: var(--c-sec) var(--c-gut); }
.eg-c-wrap { width: 100%; max-width: 1320px; margin-inline: auto; }
.eg-c-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 6vh, 5rem); }
.eg-c-rule { height: 1px; background: var(--c-line); border: 0; }

/* Section head — eyebrow, H2, optional lead and one link. Added with the
   homepage foundation; NEW classes only, so no existing page changes. The H2
   is a step below .eg-c-h2: the homepage has six sections, and six 96px
   headings read as six posters rather than one page. */
.eg-c-sh { display: grid; gap: .875rem; margin-bottom: clamp(1.75rem, 4.5vh, 3rem); }
.eg-c-sh__k { color: var(--c-accent); }
.eg-c-sh__h { font-size: var(--t-section, clamp(2.125rem, 4.4vw, 4rem)); line-height: .94; letter-spacing: -.035em; text-wrap: balance; }
.eg-c-sh__lead { max-inline-size: 42ch; }
.eg-c-sh__link {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
  font-weight: 600; color: var(--c-text);
  text-decoration: underline; text-decoration-color: var(--c-line-strong);
  text-underline-offset: .35em; text-decoration-thickness: 1.5px;
  transition: text-decoration-color .2s var(--c-ease);
}
.eg-c-sh__link:hover { text-decoration-color: var(--c-accent); }
/* Where the words are wrapped (.eg-c-sh__lt), only the words are underlined
   and the arrow is free to nudge toward where the link goes. */
.eg-c-sh__link:has(.eg-c-sh__lt) { text-decoration: none; }
.eg-c-sh__lt {
  text-decoration: underline; text-decoration-color: var(--c-line-strong);
  text-underline-offset: .35em; text-decoration-thickness: 1.5px;
}
.eg-c-sh__link:hover .eg-c-sh__lt { text-decoration-color: var(--c-accent); }
.eg-c-sh__lt + span { display: inline-block; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .eg-c-sh__lt + span { transition: transform .25s var(--c-ease); }
  .eg-c-sh__link:hover .eg-c-sh__lt + span { transform: translateX(4px); }
}
@media (min-width: 800px) {
  .eg-c-sh--row { grid-template-columns: 1fr auto; align-items: end; column-gap: 2rem; }
  .eg-c-sh--row > :not(.eg-c-sh__link) { grid-column: 1; }
  .eg-c-sh--row > .eg-c-sh__link { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
}

/* Shared scroll-reveal target. Small y offset so it reads as a fade, not a
   slide (UI Pro Max). Visible by default — eg-reveal.js only hides it once it
   has confirmed GSAP is present, so no-JS and crawlers get the content. */
[data-reveal] { will-change: transform, opacity; }

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .eg-c-skip { transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}