/* ==========================================================================
   Lingriser — global stylesheet
   Design tokens, reset, layout, header, footer, and shared components.
   Page-specific rules live in css/<page>.css.
   ========================================================================== */

/* ---------- Design tokens ---------- */
/* Every rule below reads from these. Never write a raw hex outside this block. */

:root {
  /* Surfaces and text */
  --color-bg: #ffffff;
  --color-bg-subtle: #f6f9fb;
  --color-bg-deep: #0f2a31;
  --color-text: #16202e;
  --color-text-muted: #5b6b7f;
  --color-text-invert: #ffffff;
  --color-border: #e2e9f2;

  /* Brand — teal. Trust, study, calm. */
  --color-brand: #1d7a8c;
  --color-brand-dark: #14606f;
  --color-brand-tint: #e6f3f6;

  /* Accent — amber. Energy, gamification, calls to action. */
  --color-accent: #e07f27;
  --color-accent-dark: #c26a19;
  --color-accent-tint: #fdf1e3;

  /* Typography — system stack, so no font is loaded from a CDN and the
     Content-Security-Policy can stay font-src 'self'. */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 104px;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(22, 32, 46, 0.06);
  --shadow-md: 0 4px 16px rgba(22, 32, 46, 0.08);
  --shadow-lg: 0 16px 40px rgba(22, 32, 46, 0.12);

  /* Layout */
  --header-height: 72px;
  --max-width: 1160px;
}

/* ---------- Reset ---------- */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; font-size: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }

/* ---------- Base ---------- */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-4)); }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }

:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.section { padding: var(--space-9) 0; }
.section--subtle { background: var(--color-bg-subtle); }

.section-head {
  max-width: 660px;
  margin: 0 auto var(--space-7);
  text-align: center;
}

.section-head p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

/* Centred qualifying note under a card row. */
.section-note {
  max-width: 68ch;
  margin: var(--space-6) auto 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.section-note strong { color: var(--color-text); }

/* The reset strips link styling, so links inside body copy need it back. */
.section-head p a,
.section-note a,
.cta p a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.section-head p a:hover,
.section-note a:hover,
.cta p a:hover { color: var(--color-brand-dark); }

.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-brand);
  color: var(--color-text-invert);
  border-radius: var(--radius-sm);
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--space-3); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, transform 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--color-brand); color: var(--color-text-invert); }
.btn--primary:hover { background: var(--color-brand-dark); }

.btn--accent { background: var(--color-accent); color: var(--color-text-invert); }
.btn--accent:hover { background: var(--color-accent-dark); }

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--ghost:hover { border-color: var(--color-brand); color: var(--color-brand); }

.btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--text-base); }

/* Row of buttons that stacks to full width on a phone. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (max-width: 560px) {
  .btn-row .btn { width: 100%; }
}

/* ---------- Call to action panel ---------- */
/* Shared: closes the homepage and carries the tutor recruitment block. */

.cta {
  padding: var(--space-8);
  background: var(--color-brand-tint);
  border-radius: var(--radius-lg);
  text-align: center;
}
.cta p {
  max-width: 52ch;
  margin: var(--space-3) auto var(--space-6);
  color: var(--color-text-muted);
}
.cta .btn-row { justify-content: center; }

@media (max-width: 560px) {
  .cta { padding: var(--space-6) var(--space-5); }
}

/* ---------- Cards ---------- */

.card {
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Bulleted list inside a card. Shared, because both the homepage stage cards
   and the About page tutor cards use it. */
.marker-list { margin-top: var(--space-4); }
.marker-list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.marker-list li + li { margin-top: var(--space-2); }
.marker-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
}

/* Card rows that collapse to one column on narrow screens. `.trio` carries the
   ACE stages and the competency cycles; `.duo` carries the two tutor roles. */
.trio,
.duo {
  display: grid;
  gap: var(--space-5);
  align-items: stretch;
}
.trio { grid-template-columns: repeat(3, 1fr); }
.duo { grid-template-columns: repeat(2, 1fr); }

/* Card with a coloured rule along the top edge. */
.card--barred { position: relative; padding-top: var(--space-7); }
.card--barred::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-border);
}
.card--brand::before { background: var(--color-brand); }
.card--accent::before { background: var(--color-accent); }

/* Small uppercase label naming the role or stage a card covers. */
.card-role {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.card--brand .card-role { color: var(--color-brand); }
.card--accent .card-role { color: var(--color-accent-dark); }

@media (max-width: 940px) {
  .trio,
  .duo { grid-template-columns: 1fr; }
}

/* ---------- Split ---------- */

/* Text on one side, a supporting card or figures on the other. Homepage progress
   section and the research page. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.split h2 { margin-bottom: var(--space-4); }
.split > div > p { color: var(--color-text-muted); }

@media (max-width: 940px) {
  .split { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* ---------- Stat tiles ---------- */

/* A number and what it counts. Used on the homepage band and the research page;
   every figure should name its source nearby, in a .stat-source or section note. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.stats--3 { grid-template-columns: repeat(3, 1fr); }
/* Tiles stacked in one column, for a half-width .split column. */
.stats--stack,
.stats--stack.stats--3 { grid-template-columns: 1fr; }

.stat {
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.stat strong {
  display: block;
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-brand);
}
.stat--accent strong { color: var(--color-accent-dark); }

.stat span {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.stat-source {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (max-width: 940px) {
  .stats,
  .stats--3 { grid-template-columns: repeat(2, 1fr); }
  .stats--stack.stats--3 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .stats,
  .stats--3 { grid-template-columns: 1fr; }
  .stat strong { font-size: var(--text-2xl); }
}

/* ---------- Numbered steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  counter-reset: step;
}

.step { counter-increment: step; }

.step::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--color-brand-tint);
  color: var(--color-brand-dark);
  font-weight: 700;
}

.step h3 { margin-bottom: var(--space-2); }
.step p { color: var(--color-text-muted); font-size: var(--text-sm); }

@media (max-width: 940px) {
  .steps { grid-template-columns: 1fr; }
}

/* ---------- Statement panel ---------- */
/* Dark full-width panel for a single high-level claim. Opens the About page. */

.statement-panel {
  padding: var(--space-8);
  background: var(--color-bg-deep);
  border-radius: var(--radius-lg);
  color: var(--color-text-invert);
  text-align: center;
}
.statement-panel .eyebrow { color: var(--color-accent); }
.statement-panel p {
  max-width: 58ch;
  margin: var(--space-4) auto 0;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 560px) {
  .statement-panel { padding: var(--space-6) var(--space-5); }
}

/* Badge used for features that are planned but not built yet. */
.badge {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--color-accent-tint);
  color: var(--color-accent-dark);
}

/* ---------- Utilities ---------- */
/* Kept deliberately few — reach for a named class before adding to this list. */

.mt-3 { margin-top: var(--space-3); }
.mt-5 { margin-top: var(--space-5); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--header-height);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
}
.brand img { width: 32px; height: 32px; }

/* Stretched to the full header height so the dropdown can hang off the
   header's bottom edge rather than out of the middle of a 20px-tall button. */
.primary-nav { margin-left: auto; align-self: stretch; }
.primary-nav > ul { display: flex; align-items: stretch; height: 100%; gap: var(--space-6); }
.primary-nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}
.primary-nav a:hover,
.primary-nav a[aria-current='page'] { color: var(--color-text); }

/* ---------- About dropdown ---------- */
/* CSS-only. `:hover` covers pointers and `:focus-within` covers keyboards, so
   there is no JavaScript state to fall out of sync with what is on screen.
   "About" is an ordinary link to the About page, so clicking it navigates
   rather than toggling the menu shut under the cursor. */

.has-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.menu-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Chevron, rotated while the menu is showing. */
.menu-link::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.has-menu:hover .menu-link::after,
.has-menu:focus-within .menu-link::after { transform: translateY(1px) rotate(-135deg); }

.has-menu:hover > .menu-link,
.has-menu:focus-within > .menu-link { color: var(--color-text); }

.submenu {
  position: absolute;
  top: 100%;
  right: 0;
  display: none;
  min-width: 210px;
  padding: var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* Flush with the header's bottom edge, so there is no dead gap for the pointer
   to cross on the way down. */
.has-menu:hover > .submenu,
.has-menu:focus-within > .submenu { display: block; }

.primary-nav .submenu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.primary-nav .submenu a:hover {
  background: var(--color-brand-tint);
  color: var(--color-brand-dark);
}
.primary-nav .submenu a[aria-current='page'] {
  color: var(--color-brand);
  font-weight: 600;
}

.header-actions { display: flex; align-items: center; gap: var(--space-3); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.nav-toggle span {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-text);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--color-text);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .primary-nav {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    display: none;
    padding: var(--space-4) var(--space-5) var(--space-6);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
  }
  .primary-nav.open { display: block; }
  .primary-nav > ul { flex-direction: column; align-items: stretch; height: auto; gap: 0; }
  .primary-nav a { display: block; padding: var(--space-3) 0; font-size: var(--text-base); }

  /* No hover on a phone: the About links are always listed inside the panel, so
     every destination is one tap away once the hamburger is open. */
  .has-menu { position: static; display: block; }
  .menu-link { display: none; }

  .submenu {
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .submenu li + li { border-top: 1px solid var(--color-border); }

  .header-actions .btn--ghost { display: none; }
}

/* A phone header holds the logo, the one remaining button and the menu toggle; at
   full size the button wraps to two lines and crowds the logo. */
/* The header button carries a long and a short label; phones get the short one. */
.label-short { display: none; }

@media (max-width: 480px) {
  .site-header .container { padding: 0 var(--space-4); }
  .header-actions { gap: var(--space-2); }
  .header-actions .btn--primary {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    white-space: nowrap;
  }
  .label-long { display: none; }
  .label-short { display: inline; }
}

/* ---------- Footer ---------- */

.site-footer {
  padding: var(--space-8) 0 var(--space-6);
  background: var(--color-bg-deep);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-sm);
}

.footer-grid {
  display: grid;
  /* Brand column, then one per link group. Bump the repeat() count when a
     column is added, or the new one wraps onto a second row. */
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-6);
}

.site-footer .brand { color: var(--color-text-invert); }
.site-footer h3 {
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-invert);
}
.site-footer li + li { margin-top: var(--space-2); }
.site-footer a:hover { color: var(--color-text-invert); }
.site-footer .tagline { margin-top: var(--space-3); max-width: 30ch; }

.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--text-xs);
}

/* Five columns only where there is room for them; step down twice rather than
   dropping straight to two, so the middle widths do not wrap link text. */
@media (max-width: 940px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 620px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}