/* =========================================================
   crux-theme.css  ·  Crux Education shared theme (v1, Oct 2026)
   Drop-in colours, fonts, dark mode, easy-read and a few shared
   components, matching not-broken.co.uk.

   HOW TO USE
   1. Link it in <head> BEFORE the page's own styles.
   2. Delete the page's own :root colour blocks (light, dark and
      [data-theme="dark"]) so these values take over.
   3. Old Study Skills variable names (--paper, --navy, --ink …)
      are mapped below, so most existing CSS keeps working.
   Components are prefixed cx- so they never clash with a tool's
   own class names.
   ========================================================= */

:root {
  /* core */
  --page: #F0F7F4; --surface: #FFFFFF; --surface-2: #E6EFEB; --surface-3: #D9E6E1; --line: #D9E6E1;
  --ink: #331E36; --ink-2: #5A4A5C; --ink-3: #6E5F70;
  --plum: #331E36; --bar: #331E36; --on-dark: #F0F7F4; --on-dark-2: rgba(240,247,244,.84);
  --teal: #2C666E; --teal-ink: #FFFFFF; --link: #2C666E;
  --salmon: #F19C79; --band-salmon: #FBE4D9; --salmon-line: #F3C9B5; --band-teal: #2C666E;
  --ember: #C44900; --ember-t: #A33C00;
  /* earth (tool families) */
  --orange: #F58F29; --mint: #61C9A8; --slate: #466995; --raspberry: #A53860; --brown: #7D4600;
  /* states */
  --good: #1E6B47; --bad: #B3261E; --bad-bg: #FBE9E7; --focus: #C44900;
  --shadow: 0 1px 2px rgba(51,30,54,.06), 0 16px 32px -22px rgba(51,30,54,.45);
  --shadow-lg: 0 2px 4px rgba(51,30,54,.08), 0 28px 50px -24px rgba(25,10,28,.65);
  /* type */
  --display: "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --body: "Andika", "Segoe UI", system-ui, sans-serif;
  --fs: 1rem; --lh: 1.6; --ls: 0;
  --radius: 24px;

  /* old Study Skills names, mapped to the new palette */
  --paper: var(--page); --grid: transparent;
  --navy: var(--teal); --navy-ink: var(--teal-ink);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --page: #150D18; --surface: #221628; --surface-2: #2D2034; --surface-3: #382A40; --line: #3A2C40;
  --ink: #F1ECF3; --ink-2: #C9BCCD; --ink-3: #A99AAD;
  --plum: #2C1A30; --bar: #1E1222;
  --teal: #5FB3BC; --teal-ink: #0C1D20; --link: #7CC7CF;
  --band-salmon: #2A1820; --salmon-line: #4A2D35; --band-teal: #1D484E;
  --ember-t: #FF9A63; --good: #7FD6A8; --bad: #FFB4AB; --bad-bg: #3B1512; --focus: #FF9A63;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 32px -22px rgba(0,0,0,.8);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 28px 50px -24px rgba(0,0,0,.9);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #150D18; --surface: #221628; --surface-2: #2D2034; --surface-3: #382A40; --line: #3A2C40;
    --ink: #F1ECF3; --ink-2: #C9BCCD; --ink-3: #A99AAD;
    --plum: #2C1A30; --bar: #1E1222;
    --teal: #5FB3BC; --teal-ink: #0C1D20; --link: #7CC7CF;
    --band-salmon: #2A1820; --salmon-line: #4A2D35; --band-teal: #1D484E;
    --ember-t: #FF9A63; --good: #7FD6A8; --bad: #FFB4AB; --bad-bg: #3B1512; --focus: #FF9A63;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 32px -22px rgba(0,0,0,.8);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 28px 50px -24px rgba(0,0,0,.9);
    color-scheme: dark;
  }
}

/* easy-read: bigger, more spaced-out text (add class "easy" to <html>) */
:root.easy { --fs: 1.125rem; --lh: 1.8; --ls: .03em; }

/* ---------- base ---------- */
body {
  font-family: var(--body); font-size: var(--fs); line-height: var(--lh); letter-spacing: var(--ls);
  color: var(--ink); background: var(--page);
  background-image: none; /* removes the old squared-paper grid */
}
h1, h2, h3, h4 { font-family: var(--display); color: inherit; letter-spacing: -.01em; }
h1, h2 { font-weight: 800; }
h3 { font-weight: 700; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* dark surfaces: light text and a salmon focus ring */
.cx-bar, .cx-band-plum, .cx-band-teal, .cx-panel-plum { --focus: #F19C79; color: var(--on-dark); }

/* ---------- top bar ---------- */
.cx-bar { position: sticky; top: 0; z-index: 60; background: var(--bar); }
.cx-bar-inner { max-width: 1180px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left, 0px)); min-height: 72px; display: flex; align-items: center; gap: 10px; }
.cx-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; color: var(--on-dark); text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.2rem; line-height: 1.1; }
.cx-brand img { width: 42px; height: 45px; object-fit: contain; background: #fff; border-radius: 12px; padding: 3px; }
.cx-bar nav a { color: var(--on-dark); text-decoration: none; font-weight: 500; padding: 8px 14px; border-radius: 999px; }
.cx-bar nav a:hover, .cx-bar nav a[aria-current="page"] { background: rgba(240,247,244,.12); }

/* ---------- buttons ---------- */
.cx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 16px; padding: 14px 22px; font-family: var(--body); font-weight: 600; font-size: 1rem; line-height: 1.3; text-decoration: none; cursor: pointer; transition: transform .15s, filter .15s; }
.cx-btn:hover { filter: brightness(1.06); }
.cx-btn:active { transform: scale(.97); }
.cx-btn-teal { background: var(--teal); color: var(--teal-ink); }
.cx-btn-salmon { background: var(--salmon); color: #331E36; }
.cx-btn-mint { background: var(--mint); color: #331E36; }
.cx-btn-ghost { background: transparent; color: var(--on-dark); border: 1.5px solid rgba(240,247,244,.5); }
.cx-btn-outline { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); }
.cx-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: .9rem; text-decoration: none; }

/* ---------- bands (full-width sections) ---------- */
.cx-band { padding: clamp(48px, 7vw, 80px) 0; }
.cx-band-plum { background: var(--plum); }
.cx-band-teal { background: var(--band-teal); }
.cx-band-salmon { background: var(--band-salmon); }
.cx-hero-round { border-radius: 0 0 48px 48px; }
.cx-wrap { max-width: 1180px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left, 0px)); }

/* ---------- labels ---------- */
.cx-eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cx-band-plum .cx-eyebrow, .cx-band-teal .cx-eyebrow { color: var(--salmon); }
.cx-eyebrow-ember { color: var(--ember-t); }
.cx-accent { color: var(--salmon); } /* the highlighted half of a headline on plum or teal */

/* ---------- cards ---------- */
.cx-card { background: var(--surface); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow); }
.cx-card-outline { background: var(--surface); border-radius: var(--radius); padding: 24px 28px; border: 1.5px solid var(--line); }
.cx-tab-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.cx-tab-head { margin: 0; padding: 14px 24px; background: #331E36; color: #F0F7F4; font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.cx-tab-head.teal { background: #2C666E; }
.cx-tab-head.raspberry { background: #A53860; }
.cx-tab-body { padding: 18px 24px 22px; }

/* ---------- coloured tiles (one per tool family) ---------- */
.cx-tile { display: flex; flex-direction: column; gap: 10px; border-radius: 28px; padding: 26px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.cx-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.cx-tile-orange { background: var(--orange); color: #331E36; }
.cx-tile-mint { background: var(--mint); color: #331E36; }
.cx-tile-slate { background: var(--slate); color: #FFFFFF; }
.cx-tile-raspberry { background: var(--raspberry); color: #FFFFFF; }
.cx-tile-brown { background: var(--brown); color: #FFFFFF; }
.cx-tile-title { font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.12; }
.cx-icon-circle { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #F0F7F4; color: #331E36; flex: none; }

/* ---------- numbered steps (number overlaps the card's left edge) ---------- */
.cx-steps { list-style: none; margin: 0; display: grid; gap: 18px; padding-left: 30px; }
.cx-steps > li { position: relative; background: var(--surface); border-radius: var(--radius); padding: 22px 22px 22px 62px; box-shadow: var(--shadow); }
.cx-step-num { position: absolute; left: -30px; top: 50%; transform: translateY(-50%); width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 2rem; background: var(--c, var(--mint)); color: var(--n, #331E36); }

/* ---------- chips and form fields ---------- */
.cx-chip { display: inline-flex; align-items: center; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 8px 16px; font-size: .92rem; font-weight: 500; }
.cx-chip[aria-pressed="true"], .cx-chip.is-on, input:checked + .cx-chip { background: var(--teal); border-color: var(--teal); color: var(--teal-ink); }
.cx-field { width: 100%; background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 13px; font: inherit; }
.cx-field:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: transparent; }

/* ---------- FAQ / accordions ---------- */
.cx-faq details { background: var(--surface); border-radius: 18px; padding: 4px 22px; margin-bottom: 10px; }
.cx-faq summary { cursor: pointer; padding: 16px 0; font-family: var(--display); font-weight: 700; font-size: 1.1rem; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .cx-bar nav { display: none; }
  .cx-hero-round { border-radius: 0 0 32px 32px; }
  .cx-steps { padding-left: 24px; }
  .cx-steps > li { padding: 20px 18px 20px 52px; }
  .cx-step-num { left: -24px; width: 50px; height: 50px; font-size: 1.6rem; border-radius: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}