/* ==========================================================================
   RSA School of Motoring Cork: design tokens
   Copied from data/rsa-leinster/makeover/tokens.css with every value
   unchanged. Cork adopts the Leinster token set as it stands, including the
   WCAG FIX tokens, because both sites run the same brand pack and the audit
   work has already been done. Provenance and the Cork deltas are in tokens.md.
   Cork has its own copy so that a later Leinster change cannot move Cork's
   design without someone deciding to.
   Phase 0 artefact. Not yet wired into the 11ty build.
   ========================================================================== */

:root {
  /* ---------- 1. Colour primitives (pack names) ---------- */
  --rsa-road-black:   #0B0B0C; /* page background (.x1) */
  --rsa-night:        #000000; /* header, hero base, footer, dark sections */
  --rsa-surface:      #161618; /* panels, cards, form fields, body fallback */
  --rsa-raised:       #1C1C1F; /* review cards */
  --rsa-tile:         #131315; /* brand page tiles only */
  --rsa-track:        #26262A; /* EDT tracker empty cell */
  --rsa-navy-black:   #0A141C; /* 12 EDT roundel, roundel ring gap */

  --rsa-white:        #FFFFFF;
  --rsa-chalk:        #F4F4F2; /* headings and primary text */
  --rsa-fog:          #D6D6D8; /* hero lede, body on black (heavier than Mist) */
  --rsa-mist:         #C4C4C7; /* body copy on black */
  --rsa-haze:         #B5B5B8; /* small labels ("Call us now") */
  --rsa-smoke:        #A6A6AB; /* card body, secondary copy */
  --rsa-ash:          #8A8A8F; /* footer legal, tracker numerals */
  --rsa-slate:        #5C5C62; /* brand page arrows (decorative) */
  --rsa-graphite:     #3A3A3F; /* dashed road line (Town B) */
  --rsa-wordmark:     rgba(255,255,255,.14); /* giant "made" footer wordmark (decorative) */

  --rsa-red:          #DA2A23; /* primary buttons, header rule, service band, RSA tag */
  --rsa-red-hover:    #F03A32; /* hover only (pack). Fails with white text, see FIX */
  --rsa-plate-red:    #E32119; /* L-plate glyph */
  --rsa-go-green:     #8EDB4F; /* headline accents, badges, logo strip, selected, focus */
  --rsa-go-green-hover: #A6EA6E;
  --rsa-amber:        #FFAE3B; /* eyebrows and stars */
  --rsa-sign-green:   #00703C; /* road sign module ONLY (as a fill) */
  --rsa-sign-ink:     #D5EADD; /* sign sub-labels */
  --rsa-sign-yellow:  #FFD100; /* sign hover only */
  --rsa-avatar-blue:  #2E7DBF; /* review avatar initial disc */
  --rsa-avatar-brown: #6B4433; /* review avatar initial disc */

  /* Hairlines (white alpha on dark) */
  --rsa-line-08: rgba(255,255,255,.08); /* default divider / card border */
  --rsa-line-10: rgba(255,255,255,.10);
  --rsa-line-12: rgba(255,255,255,.12); /* section top borders */
  --rsa-line-16: rgba(255,255,255,.16);
  --rsa-line-22: rgba(255,255,255,.22); /* underline track on split headings */
  --rsa-line-25: rgba(255,255,255,.25); /* divider inside red bands */

  /* ---------- 2. Semantic colour (use these in components) ---------- */
  --color-bg:            var(--rsa-road-black);
  --color-bg-deep:       var(--rsa-night);
  --color-panel:         var(--rsa-surface);
  --color-panel-raised:  var(--rsa-raised);
  --color-text:          var(--rsa-chalk);
  --color-text-strong:   var(--rsa-white);
  --color-text-body:     var(--rsa-mist);
  --color-text-lede:     var(--rsa-fog);
  --color-text-muted:    var(--rsa-smoke);
  --color-text-faint:    var(--rsa-ash);   /* min AA on Surface/Raised/Black; NOT on Track */
  --color-accent:        var(--rsa-go-green);
  --color-eyebrow:       var(--rsa-amber);
  --color-star:          var(--rsa-amber);
  --color-action:        var(--rsa-red);
  --color-on-action:     var(--rsa-white);
  --color-on-accent:     var(--rsa-road-black); /* text on Go Green: ALWAYS dark */

  /* FIX tokens (contrast-audit.md) */
  --color-action-hover:  #C0261F;  /* FIX F2: darken on hover (white 5.94:1); pack #F03A32 = 3.92:1 */
  --color-text-red:      #FF5A52;  /* FIX F7: red AS TEXT on dark (5.88:1 on Surface); #DA2A23 = 3.73:1 */
  --color-on-red-muted:  var(--rsa-white); /* FIX F4: body copy on red bands is white, never Fog/Mist/Haze */
  --color-on-red-accent: var(--rsa-night); /* FIX F3: accent words on red: green text on a black chip */
  --color-field-border:  #7A7A80;  /* FIX F5: field boundary 4.92:1 on Night, 4.24:1 on Surface */
  --color-placeholder:   var(--rsa-ash); /* FIX F6: 5.26:1 on Surface; browser default #757575 = 3.92:1 */
  --color-track-text:    #9A9AA0;  /* FIX F12: tracker numerals on Track 5.39:1 */
  --color-avatar-blue:   #2A72AF;  /* FIX F11: white initial 5.09:1 */
  --color-sign-text:     var(--rsa-sign-ink); /* FIX F10: never Sign Green as text on dark */
  --focus-ring: 0 0 0 3px var(--rsa-go-green), 0 0 0 5px var(--rsa-night); /* FIX F9: two-tone, visible on green/red/black */

  /* ---------- 3. Typography ---------- */
  --font-display: Poppins, sans-serif;          /* headings, labels, buttons, numbers */
  --font-body:    'DM Sans', sans-serif;        /* body, inputs, reviews, eyebrows */
  --font-mono:    'JetBrains Mono', monospace;  /* brand page swatch codes only */
  /* Google Fonts request used by the pack:
     Poppins 500;600;700;800 + DM Sans opsz 9..40 wght 400;500;700 */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700; /* small labels, numbers, eyebrows */
  --fw-black:   800; /* all display headings, buttons */
  --fw-plate:   900; /* L / N plate glyph (DM Sans 900, synthesised) */

  /* Display scale (Poppins 800 uppercase) */
  --fs-mega:     clamp(110px, 12vw, 160px); /* Town C big EDT numerals */
  --fs-wordmark: min(10.5vw, 136px);        /* footer "made equal." */
  --fs-hero-c:   clamp(52px, 7vw, 100px);   /* Town C slanted hero H1 */
  --fs-hero-b:   clamp(48px, min(7.6vw, 8.5vw - 20px), 104px);
  --fs-hero-a:   clamp(50px, 6.4vw, 92px);
  --fs-h1:       clamp(34px, 4.6vw, 64px);  /* homepage H1, brand spec 64 */
  --fs-stat:     clamp(48px, 5vw, 68px);    /* rolling stats, brand spec 68 */
  --fs-h2:       clamp(32px, 3.6vw, 50px);  /* brand spec 46 */
  --fs-h2-sm:    clamp(28px, 3.2vw, 44px);
  --fs-num-xl:   96px;  /* EDT "12" panels */
  --fs-num-lg:   84px;
  --fs-num-md:   64px;  /* outlined step numerals */
  --fs-num-sm:   56px;
  --fs-num-xs:   40px;
  --fs-h3:       22px;  /* card titles */
  --fs-h4:       18px;
  /* Text scale (DM Sans) */
  --fs-lede:     19px;
  --fs-body-lg:  17px;  /* brand spec body 17 */
  --fs-body:     16.5px;
  --fs-body-sm:  15px;
  --fs-small:    14px;
  --fs-label:    13px;  /* buttons, brand spec 13 */
  --fs-caption:  12.5px;
  --fs-eyebrow:  12px;  /* brand spec 12 */
  --fs-micro:    11px;
  --fs-nano:     10.5px; /* review badges "GOOGLE ★★★★★" */

  --lh-display:  1.02; /* H1 */
  --lh-tight:    .9;   /* stacked numerals */
  --lh-snug:     1.1;
  --lh-heading:  1.2;
  --lh-body:     1.6;
  --lh-relaxed:  1.7;  /* most common body leading */
  --lh-lede:     1.55;

  --ls-display:  -.03em; /* headings (most common) */
  --ls-tight:    -.04em; /* numerals */
  --ls-tighter:  -.05em; /* big numerals, wordmark */
  --ls-button:   -.01em; /* buttons and badges in CSS (brand page says .08em, CSS wins) */
  --ls-nav:      .06em;
  --ls-label:    .08em;
  --ls-eyebrow:  .2em;   /* green uppercase eyebrows */
  --ls-eyebrow-sm: .16em;
  --ls-stars:    2px;

  /* ---------- 4. Radii ---------- */
  --radius-xs:   2px;  /* default for buttons, badges, fields, cards (95 uses) */
  --radius-sm:   3px;  /* brand page spec for buttons */
  --radius-md:   4px;  /* tiles, panels */
  --radius-lg:   6px;  /* plate glyph boxes */
  --radius-sign: 8px;  /* county sign outer (12px / 14px for large signs) */
  --radius-sign-lg: 12px;
  --radius-sign-xl: 14px;
  --radius-round: 50%; /* avatars, roundels, FAQ icon */

  /* ---------- 5. Spacing ---------- */
  --container:   1280px;
  --gutter:      40px;   /* pack desktop side padding */
  --gutter-mobile: 20px; /* NEW: pack has no mobile value (no media queries) */
  --space-1: 2px;  --space-2: 4px;  --space-3: 6px;  --space-4: 8px;
  --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px;
  --space-9: 18px; --space-10: 20px; --space-11: 22px; --space-12: 24px;
  --space-14: 28px; --space-16: 32px; --space-20: 40px; --space-24: 48px;
  --space-28: 56px; --space-section: 96px; /* hero top padding / section rhythm */
  --pad-btn:     15px 20px;       /* header + standard red button */
  --pad-btn-lg:  20px 26px 18px;  /* hero primary button */
  --pad-badge:   7px 10px 6px;
  --pad-card:    26px;
  --pad-panel:   30px;
  --hero-min-h:  640px;
  --hero-form-band: 104px; /* hero photo stops 104px above bottom, form bar sits there */
  --scroll-offset: 110px;  /* [id] scroll-margin-top */

  /* ---------- 6. Borders and rules ---------- */
  --rule-header: 3px solid var(--rsa-red);   /* header bottom */
  --rule-green:  2px solid var(--rsa-go-green);
  --rule-green-top: 5px solid var(--rsa-go-green);
  --heading-underline:
    linear-gradient(var(--rsa-go-green), var(--rsa-go-green)) 0 100% / 54px 2px no-repeat,
    linear-gradient(var(--rsa-line-22), var(--rsa-line-22)) 0 100% / 100% 2px no-repeat;
  --road-dash-h: repeating-linear-gradient(90deg, var(--rsa-go-green) 0 16px, transparent 16px 26px);
  --road-dash-v: repeating-linear-gradient(180deg, var(--rsa-graphite) 0 18px, transparent 18px 30px);
  --stroke-numeral: 2px var(--rsa-red); /* -webkit-text-stroke on outlined step numbers */

  /* ---------- 7. Shapes ---------- */
  --clip-rsa-tag:   polygon(0 0, 100% 0, 94% 100%, 0 100%); /* name rule tag, slanted right edge */
  --clip-slant-c:   polygon(19% 0, 100% 0, 100% 100%, 3% 100%); /* Town C slanted hero photo */
  --clip-slant-a:   polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  --tilt-sign-l:    rotate(-2deg);
  --tilt-sign-r:    rotate(1.2deg);
  --tilt-card:      rotate(6deg);

  /* ---------- 8. Shadows ---------- */
  --shadow-header:  0 2px 18px rgba(0,0,0,.5);
  --shadow-card:    0 10px 24px rgba(0,0,0,.25);
  --shadow-card-hover: 0 24px 50px rgba(0,0,0,.5);
  --shadow-lift:    0 20px 44px rgba(0,0,0,.2);
  --shadow-float:   0 30px 56px rgba(0,0,0,.32);
  --shadow-panel:   0 4px 44px rgba(0,0,0,.5);
  --shadow-sign:    0 10px 22px rgba(0,0,0,.22);
  --shadow-red-glow: 0 14px 30px rgba(218,42,35,.35);
  --ring-green:     0 0 0 3px var(--rsa-go-green);
  --ring-white:     0 0 0 3px var(--rsa-white);
  --ring-roundel:   0 0 0 3px var(--rsa-go-green), 0 0 0 5px var(--rsa-navy-black);
  --ring-gap:       0 0 0 6px var(--rsa-road-black);
  --inset-red:      inset 0 0 0 3px var(--rsa-red);

  /* ---------- 9. Gradients and photo treatment ---------- */
  --photo-lift:          brightness(1.45) contrast(1.05); /* hero photos */
  --photo-lift-soft:     brightness(1.45);
  --photo-lift-strong:   brightness(1.5);
  --photo-pass:          none; /* student pass photos stay unfiltered */
  --overlay-hero:   linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.72) 32%, rgba(0,0,0,.34) 56%, rgba(0,0,0,.2) 76%, rgba(0,0,0,.16) 100%);
  --overlay-hero-a: linear-gradient(90deg, rgba(0,0,0,.93) 0%, rgba(0,0,0,.74) 36%, rgba(0,0,0,.3) 62%, rgba(0,0,0,.14) 100%);
  --overlay-hero-floor: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0)); /* 90px band above the form bar */
  --overlay-ticket: linear-gradient(0deg, rgba(0,0,0,.97) 0%, rgba(0,0,0,.82) 45%, rgba(0,0,0,0) 78%); /* Town C service tickets */
  --overlay-panel:  linear-gradient(90deg, rgba(11,11,12,.95), rgba(11,11,12,.35) 62%, rgba(11,11,12,.2));
  --overlay-edge:   linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0) 45%);
  /* FIX F8: stronger ticket overlay for text over card photos */
  --overlay-ticket-fix: linear-gradient(0deg, rgba(0,0,0,.97) 0%, rgba(0,0,0,.9) 55%, rgba(0,0,0,.35) 85%, rgba(0,0,0,0) 100%);

  /* ---------- 10. Motion ---------- */
  --ease-reveal: cubic-bezier(.2,.7,.2,1);
  --ease-roll:   cubic-bezier(.6,0,.15,1);  /* rolling stat numbers */
  --dur-fast:  .2s;  /* button background */
  --dur-base:  .3s;  /* card lift */
  --dur-hero:  .9s;
  --dur-roll:  1.6s;
  --lift-sm: translateY(-2px); --lift-md: translateY(-4px); --lift-lg: translateY(-6px); --lift-xl: translateY(-8px);
  --nudge-x: translateX(6px);

  /* ---------- 11. Layering ---------- */
  --z-base:   1;
  --z-sticky-cta: 40; /* NEW: mobile sticky CTA (not in pack) */
  --z-hero-ui: 30;    /* pack: hero form bar */
  --z-header: 50;     /* pack: sticky header */
  --z-overlay: 60;    /* NEW: mobile menu, chat sheet */

  /* ---------- 12. Breakpoints (reference values; CSS vars cannot drive @media) ---------- */
  /* The pack has NO media queries. It relies on clamp(), auto-fit grids
     (minmax(min(100%,160..440px),1fr)) and one JS threshold (hero framing
     switches at 1100px). Proposed Phase 1 breakpoints, aligned with the
     existing site and the pack's auto-fit minimums: */
  --bp-sm: 480px;   /* single column below */
  --bp-md: 768px;   /* tablet: nav collapses to menu, hero form stacks */
  --bp-lg: 1100px;  /* pack JS framing threshold */
  --bp-xl: 1280px;  /* container max */

  /* ---------- 13. Cork additions ---------- */
  /* Cork organises its 50 towns under 6 district hubs, which Leinster has no
     equivalent of: Leinster groups by county. The sign module therefore needs
     a district variant alongside the county one. Values are inherited; this
     is a naming hook so district signs are not mistaken for county signs. */
  --sign-district-fill: var(--rsa-sign-green);
  --sign-district-text: var(--color-sign-text);
}

/* Focus (pack: 3px solid Go Green, offset 2px). FIX F9 adds a dark outer ring
   so the indicator survives green and red surfaces. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--rsa-go-green);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--rsa-night);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}