/* ==========================================================================
   LEARNING KEY TRAINING ACADEMY — DESIGN SYSTEM
   Derived from the live learningkey.co.uk theme (WordPress, Extendable block
   theme). Every value either matches the current site or is a disciplined
   extension of it.

   THEMING
   -------
   Tokens are split into two families:
     1. FIXED   — brand constants that never change (fonts, radii, motion,
                  and the logo's red/blue/amber).
     2. THEMED  — surfaces and text, redefined under [data-theme="dark"].

   Rule of thumb when writing new CSS:
     • text            → var(--text) / --text-soft / --text-mute
     • page background → var(--paper)
     • raised surface  → var(--card-bg)
     • tinted panel    → var(--shell)
     • solid button    → var(--btn-bg) / var(--btn-fg)
     • deliberately dark band → var(--inverse-bg) / var(--inverse-fg)
   Never hard-code #fff or #000 for a surface — it will break in dark mode.
   ========================================================================== */

:root{
  /* ---------- FIXED: typography ---------- */
  --font-head:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Heebo',system-ui,-apple-system,'Segoe UI',sans-serif;

  --t-display:clamp(38px,5.2vw,72px);
  --t-h1:clamp(32px,4.2vw,56px);
  --t-h2:clamp(26px,3.1vw,40px);
  --t-h3:clamp(19px,1.7vw,24px);
  --t-h4:16px;
  --t-lead:clamp(17px,1.25vw,20px);
  --t-body:16px;
  --t-small:14px;
  --t-micro:12px;
  --t-eyebrow:11.5px;

  /* ---------- FIXED: spacing (4px base) ---------- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:88px; --s-10:120px;

  /* ---------- FIXED: layout ---------- */
  --page:1360px;
  --page-narrow:820px;
  --gutter:28px;

  /* ---------- FIXED: radii ---------- */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;

  /* ---------- FIXED: motion ---------- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:.2s; --dur:.35s; --dur-slow:.55s;

  /* ---------- THEMED: light (default) ---------- */
  --text:#000;              /* headings, strongest text */
  --text-soft:#444;         /* body copy — sampled from the live site */
  --text-mute:#6b6b6b;      /* meta, captions */
  --text-faint:#9a9895;

  --paper:#fff;             /* page background */
  --card-bg:#fff;           /* raised surface: cards, inputs, menus */
  --shell:#e8e7e6;          /* the site's signature warm-grey panel */
  --shell-2:#f2f1f0;        /* input fills, hovers */
  --shell-3:#faf9f8;        /* faintest wash */

  --line:rgba(0,0,0,.12);
  --line-soft:rgba(0,0,0,.07);
  --hover-wash:rgba(0,0,0,.045);
  --grid-line:rgba(0,0,0,.035);

  --btn-bg:#000;            /* solid button */
  --btn-fg:#fff;

  --inverse-bg:#000;        /* deliberately dark bands, footer, utility bar */
  --inverse-fg:rgba(255,255,255,.72);

  --header-bg:rgba(255,255,255,.86);
  --header-bg-solid:rgba(255,255,255,.94);

  /* brand accents — logo mark. Amber is legible on both themes; red and
     blue are lightened in dark mode below to hold contrast on dark surfaces. */
  --brand-red:#e1251b;
  --brand-blue:#1b3e94;
  --brand-amber:#f2a900;
  --red-wash:rgba(225,37,27,.08);
  --blue-wash:rgba(27,62,148,.08);
  --amber-wash:rgba(242,169,0,.12);
  --amber-ink:#8a6100;      /* readable amber text on light wash */

  --e-1:0 2px 10px -6px rgba(0,0,0,.35);
  --e-2:0 12px 28px -18px rgba(0,0,0,.45);
  --e-3:0 30px 60px -28px rgba(0,0,0,.5);

  color-scheme:light;
}

/* ---------- THEMED: dark ----------
   Not an inversion. Surfaces step up in lightness as they come forward
   (paper → card → shell), which is how the light theme already behaves.
   Pure black is reserved for the page floor so the warm-grey panel motif
   still reads as a distinct layer. */
[data-theme="dark"]{
  --text:#f5f4f3;
  --text-soft:rgba(245,244,243,.74);
  --text-mute:rgba(245,244,243,.52);
  --text-faint:rgba(245,244,243,.34);

  --paper:#0c0c0d;
  --card-bg:#161719;
  --shell:#1b1c1f;
  --shell-2:#212226;
  --shell-3:#141517;

  --line:rgba(255,255,255,.16);
  --line-soft:rgba(255,255,255,.09);
  --hover-wash:rgba(255,255,255,.06);
  --grid-line:rgba(255,255,255,.035);

  --btn-bg:#f5f4f3;
  --btn-fg:#0c0c0d;

  --inverse-bg:#1b1c1f;     /* raised, not black — black would vanish */
  --inverse-fg:rgba(245,244,243,.72);

  --header-bg:rgba(12,12,13,.82);
  --header-bg-solid:rgba(12,12,13,.94);

  --brand-red:#ff6257;
  --brand-blue:#7f9cf0;
  --brand-amber:#ffc043;
  --red-wash:rgba(255,98,87,.14);
  --blue-wash:rgba(127,156,240,.14);
  --amber-wash:rgba(255,192,67,.16);
  --amber-ink:#ffc043;

  --e-1:0 2px 10px -6px rgba(0,0,0,.8);
  --e-2:0 12px 28px -18px rgba(0,0,0,.9);
  --e-3:0 30px 60px -28px rgba(0,0,0,1);

  color-scheme:dark;
}

/* Back-compat aliases: earlier files used --ink*. Keep them pointing at the
   themed text tokens so nothing breaks. Prefer --text going forward. */
:root,[data-theme="dark"]{
  --ink:var(--text);
  --ink-soft:var(--text-soft);
  --ink-mute:var(--text-mute);
  --ink-faint:var(--text-faint);
}

/* Colours crossfade when the theme flips, but only then — adding a global
   transition to every element would drag on ordinary hovers. */
html.theming *,html.theming *::before,html.theming *::after{
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)!important;
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--text-soft);
  font-family:var(--font-body);font-size:var(--t-body);line-height:1.65;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{
  font-family:var(--font-head);color:var(--text);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.1;margin:0;
}
h1{font-size:var(--t-h1);font-weight:800}
h2{font-size:var(--t-h2);font-weight:700}
h3{font-size:var(--t-h3);font-weight:700}
h4{font-size:var(--t-h4);font-weight:700;letter-spacing:.04em}
p{margin:0 0 var(--s-4)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brand-blue);outline-offset:3px;border-radius:4px}
::selection{background:var(--text);color:var(--paper)}

/* --------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:var(--page-narrow);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--s-10)}
.section-sm{padding-block:var(--s-9)}
.stack>*+*{margin-top:var(--s-4)}
.center{text-align:center}

.grid-bg{
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:88px 88px;
}
.on-shell{background:var(--shell)}
.on-ink{background:var(--inverse-bg);color:var(--inverse-fg)}
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4{color:#fff}
[data-theme="dark"] .on-ink h1,[data-theme="dark"] .on-ink h2,
[data-theme="dark"] .on-ink h3,[data-theme="dark"] .on-ink h4{color:var(--text)}

/* --------------------------------------------------------------------------
   TYPE HELPERS
   -------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-head);font-size:var(--t-eyebrow);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);
  display:inline-flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-4);
}
.eyebrow::before{content:"";width:20px;height:2px;background:var(--text);border-radius:2px}
.on-ink .eyebrow{color:rgba(255,255,255,.6)}
.on-ink .eyebrow::before{background:var(--brand-amber)}
[data-theme="dark"] .on-ink .eyebrow{color:var(--text-mute)}
.display{font-size:var(--t-display);font-weight:800;line-height:1.03}
.lead{font-size:var(--t-lead);line-height:1.55;max-width:56ch}
.small{font-size:var(--t-small)}
.micro{font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute)}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:var(--r-pill);
  font-family:var(--font-body);font-size:13.5px;font-weight:700;letter-spacing:.01em;
  white-space:nowrap;cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);
}
.btn .arr{transition:transform var(--dur) var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--e-1)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--e-2)}
.btn-ghost{border:1.5px solid var(--text);color:var(--text)}
.btn-ghost:hover{background:var(--text);color:var(--paper)}
/* used on inverse bands, which stay dark in both themes */
.btn-light{background:#fff;color:#000}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--e-2)}
.btn-outline-light{border:1.5px solid rgba(255,255,255,.35);color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.12)}
[data-theme="dark"] .btn-light{background:var(--btn-bg);color:var(--btn-fg)}
.btn-quiet{color:var(--text);padding-inline:0}
.btn-quiet:hover{color:var(--brand-red)}
.btn-sm{padding:10px 18px;font-size:12.5px}
.btn-lg{padding:17px 32px;font-size:14.5px}

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */
.card{
  background:var(--card-bg);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:var(--s-6);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur-fast);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--e-2);border-color:var(--line)}
.card-flush{padding:0;overflow:hidden}
.card .card-body{padding:var(--s-6)}
.card-media{aspect-ratio:16/10;background:var(--shell-2);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.card:hover .card-media img{transform:scale(1.05)}

.card-accent{position:relative;overflow:hidden}
.card-accent::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:0;
  background:var(--brand-red);transition:width var(--dur-slow) var(--ease-out);
}
.card-accent:hover::after{width:100%}
.card-accent.blue::after{background:var(--brand-blue)}
.card-accent.amber::after{background:var(--brand-amber)}

/* --------------------------------------------------------------------------
   CHIPS, TAGS
   -------------------------------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 15px;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:13px;color:var(--text-soft);background:var(--card-bg);cursor:pointer;
  transition:all var(--dur-fast) var(--ease);
}
.chip:hover{border-color:var(--text);color:var(--text)}
.chip[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.tag{
  display:inline-block;font-family:var(--font-head);font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:3px 9px;border-radius:5px;
  background:var(--red-wash);color:var(--brand-red);
}
.tag.blue{background:var(--blue-wash);color:var(--brand-blue)}
.tag.amber{background:var(--amber-wash);color:var(--amber-ink)}
.tag.ink{background:var(--hover-wash);color:var(--text)}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;font-weight:500;color:var(--text);letter-spacing:.02em}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:15px;color:var(--text);
  padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card-bg);transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--text);box-shadow:0 0 0 3px var(--hover-wash);
}
.field textarea{resize:vertical;min-height:110px}
.field input::placeholder,.field textarea::placeholder{color:var(--text-faint)}

/* --------------------------------------------------------------------------
   MOTIFS
   -------------------------------------------------------------------------- */
.wedge-r{clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%)}
.wedge-l{clip-path:polygon(26px 0,100% 0,100% 100%,0 100%)}

.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}