/* ============================================================
   SPECA DESIGN SYSTEM, shared by every page of speca.co.uk.

   This exists because the marketing site and the product had drifted into
   two different-looking companies: the app was rebuilt on 2026-10-08 in a
   system measured off chalkie.ai (Inter at 800/900, white page, one inset
   rounded colour block, 1320px container, big soft radii, chrome-free
   cards, 92px section rhythm) and these pages were still on the old kit
   (system font, 1080px, cream wash, 10px radii, 1px-bordered cards).

   It is loaded LAST in each page's <head>, after that page's own <style>,
   so it overrides the shared primitives without anyone having to unpick
   three 800-line bespoke stylesheets. Page-specific layout still lives in
   the page. If you change a token here, change it in app/globals.css too:
   those two files are the pair that has to stay in step.

   NOT taken from Chalkie: their teal (ours stays navy and coral) and their
   free-text prompt box (zero-prompt law, root CLAUDE.md).
   ============================================================ */

:root {
  /* ----------------------------------------------------------------
     THE WEBSITE PALETTE IS THE TES LOGO, chosen 2026-10-08.

     Brief: "go bright, a more colour navy blue, really needs to stand
     out, like the logo we made for tes". The Tes avatar is #1F3A5F navy
     with an #E8734A coral dot. The hero takes the avatar navy itself
     rather than a darker shade, which is what makes it read brighter.

     THE SITE AND THE FILES ARE DELIBERATELY DIFFERENT. All 906 built
     resources, the renderers and the deck diagrams stay on petrol
     #152935 + caramel #C5926C, which is what the decks have always
     used. Owner's call: recolour the website, leave the files alone.

     Coral is weak on both white (3.01) and this navy (3.82), so it is
     large-accent-only. Four variants, NOT interchangeable:
       --coral          #E8734A  fills, dots, chips, large accents
       --coral-dark     #D1602F  large bold glyphs on light
       --accent-text    #B55A3A  coral-coloured TEXT on light (AA)
       --accent-on-dark #F6A079  small text on the navy hero (AA)
     This block redefines each page's own :root, which is why the
     stylesheet must stay last in the head.
     ---------------------------------------------------------------- */
  --navy: #1f3a5f;
  --navy-dark: #1f3a5f;
  --navy-darker: #152a45;
  --coral: #e8734a;
  --coral-dark: #d1602f;
  --accent-text: #b55a3a;
  --accent-on-dark: #f6a079;
  --coral-button: #b55a3a;
  --coral-button-hover: #974b30;
  --cream: #fbf8f3;
  --peach: #fde5d6;
  --grey: #5b6472;
  --line: #e8e0d6;
  --on-dark: #dce6f2;
  --on-dark-muted: #a7b8cd;
  --ink-strong: #0d1319;
  --grey-light: #848c98;
  --radius-lg: 20px;
  --radius-md: 16px;
  --gap-section: 92px;
  --sans-system: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--sans-system);
  background: #fff;
  color: var(--ink-strong);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
}

/* Container. 1080px left big dead margins on any normal monitor and was a
   real part of why the product read as small; chalkie.ai runs 1316px at a
   1340px viewport. Text measure is capped per-element, not by the box. */
.wrap {
  width: 100%;
  max-width: 1320px;
  padding-left: 32px;
  padding-right: 32px;
}

/* width:100% is load-bearing on the nav: without it a flex item in a column
   flex body shrink-to-fits and `margin: 0 auto` then centres the whole bar.
   This bit the app the moment its nav held more than a wordmark. */
.nav {
  width: 100%;
  max-width: 1320px;
  padding: 18px 32px;
  /* The old kit painted the bar cream against a cream body; on the white
     page that leaves a visible strip above the hero. */
  background: transparent;
}

.logo {
  font-weight: 900;
  font-size: 23px;
  letter-spacing: -0.01em;
}

/* Display caramel is 2.73:1 on white and fails even the large-text bar.
   These two are the only places the accent appears as a glyph on light. */
.logo span,
.sitenav-logo span,
.footer-logo span {
  color: var(--coral-dark);
}

.eyebrow {
  color: var(--accent-text);
}

/* Buttons. Chalkie's are 20px/800 on a 16px radius; ours were 16px/700 on
   10px, which reads as a form control rather than an invitation. */
.btn-primary {
  padding: 17px 30px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  border-radius: var(--radius-md);
  box-shadow: none;
}

.btn-ghost {
  padding: 16px 26px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  border-radius: var(--radius-md);
}

.nav-cta {
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  border-radius: 12px;
  background: var(--navy-dark);
  box-shadow: none;
}

.nav-cta:hover {
  background: var(--navy-darker);
}

/* The hero becomes an inset rounded block on white, which is the single
   most recognisable thing about the layout the app now uses. */
.hero {
  width: calc(100% - 32px);
  max-width: 1320px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
}

/* Headings. Heavy and tight at a size that registers; the old 28px/800 at
   default tracking is the main reason sections read as filler. */
h1,
h2,
h3,
h4,
.section-title {
  letter-spacing: -0.03em;
}

.section-title {
  font-size: 34px;
  font-weight: 800;
}

.section-sub {
  font-size: 16.5px;
}

/* Cards lose their chrome. A 1px border at a 14px radius on cream is the
   cheapest-looking component in the old kit; Chalkie's gallery cards have
   no background, no border and no shadow at all. */
.subject-card {
  border: none;
  border-radius: var(--radius-md);
  padding: 0;
  background: transparent;
}

.subject-card:hover {
  border-color: transparent;
}

.subject-card h4 {
  font-size: 20px;
  font-weight: 800;
}

.card {
  border-radius: var(--radius-lg);
  padding: 30px;
}

@media (max-width: 720px) {
  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  .nav {
    padding: 16px 20px;
  }
  .section-title {
    font-size: 26px;
  }
  .hero {
    width: calc(100% - 20px);
    border-radius: 14px;
  }
}

/* ============================================================
   SITE NAVIGATION: hover dropdowns, shared by every page.

   Replaces a bar that held a wordmark and one button, so the only way to
   reach anything was to scroll the homepage. Built to work for everyone,
   not just a mouse:
     - :focus-within opens a menu for keyboard users, so Tab reaches every
       item without JavaScript.
     - A touch device has no hover at all, so under 900px the menus become
       a single expanded list inside a toggled panel rather than hover
       targets that can never fire.
     - The gap between a trigger and its panel is bridged by padding on the
       trigger, not margin, or the menu closes as the pointer crosses it.
   ============================================================ */

.sitenav {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid #efe8de;
  background: #fff;
}

.sitenav-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.sitenav-logo {
  font-weight: 900;
  font-size: 23px;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-decoration: none;
  margin-right: 6px;
}

.sitenav-logo span {
  color: var(--coral);
}

.sitenav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.sitenav-item {
  position: relative;
}

.sitenav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Vertical padding here, never margin on the panel: it is what keeps the
     pointer inside the hover target on the way down to the menu. */
  padding: 14px 13px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #39414d;
  text-decoration: none;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  border-radius: 10px;
}

.sitenav-link:hover,
.sitenav-link:focus-visible {
  color: var(--ink-strong);
  background: #f6f2ec;
}

.sitenav-caret {
  width: 9px;
  height: 9px;
  flex: none;
  opacity: 0.55;
}

.sitenav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 268px;
  background: #fff;
  border: 1px solid #ece5db;
  border-radius: var(--radius-md);
  box-shadow: 0 18px 44px rgba(16, 31, 51, 0.14);
  padding: 8px;
  display: none;
}

.sitenav-item:hover > .sitenav-panel,
.sitenav-item:focus-within > .sitenav-panel {
  display: block;
}

.sitenav-panel a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink-strong);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.sitenav-panel a span {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--grey);
  letter-spacing: 0;
  margin-top: 1px;
}

.sitenav-panel a:hover,
.sitenav-panel a:focus-visible {
  background: #f6f2ec;
}

.sitenav-panel hr {
  border: none;
  border-top: 1px solid #f0eae1;
  margin: 6px 8px;
}

.sitenav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.sitenav-login {
  font-size: 15px;
  font-weight: 700;
  color: var(--grey);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
}

.sitenav-login:hover {
  color: var(--ink-strong);
}

.sitenav-start {
  background: var(--navy-dark);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 12px;
  white-space: nowrap;
}

.sitenav-start:hover {
  background: var(--navy-darker);
}

.sitenav-toggle {
  display: none;
  background: none;
  border: 1px solid #e4ddd3;
  border-radius: 10px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-strong);
  cursor: pointer;
}

/* Touch: no hover exists, so every menu is simply open inside a panel the
   burger toggles. */
@media (max-width: 900px) {
  .sitenav-inner {
    flex-wrap: wrap;
    padding: 12px 20px;
    gap: 10px;
  }
  .sitenav-toggle {
    display: block;
    margin-left: auto;
  }
  .sitenav-menu {
    display: none;
    order: 3;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 8px;
  }
  .sitenav[data-open="true"] .sitenav-menu {
    display: flex;
  }
  .sitenav-actions {
    order: 2;
  }
  .sitenav-login {
    display: none;
  }
  .sitenav-link {
    width: 100%;
    justify-content: space-between;
    padding: 12px 4px;
    font-size: 16px;
  }
  .sitenav-caret {
    display: none;
  }
  .sitenav-panel {
    position: static;
    display: block;
    border: none;
    box-shadow: none;
    padding: 0 0 6px 12px;
    min-width: 0;
    border-left: 2px solid #f0eae1;
    margin-left: 4px;
  }
  .sitenav-panel a {
    padding: 9px 10px;
    font-size: 15px;
  }
}