/* Shared shell for the academy pages. Colours come from tokens.css, so the
   night theme needs no overrides here. */

/* Full width, with the content held to 1120px by the padding: these elements
   carry the page's stage light, which a max-width would crop to a box with a
   hard edge against the page ground. */
.academy,
.course,
.lesson {
  padding: clamp(32px, 6vh, 72px) max(20px, calc((100% - 1120px) / 2));
  color: var(--oa-ink);
}

/* A filled button needs the saturated brand violet on both themes: the dark
   remap below turns --oa-accent into a pale ink for text, and white on that
   pale violet fails contrast. */
.academy,
.course,
.lesson {
  --oa-accent-fill: #6c63ff;
  --oa-accent-fill-hover: #574fd6;
}

/* theme_dark.css paints every <header> as site chrome (#12161f, bottom
   border, !important), and these heroes are <header> elements -- so each one
   sat in a lighter box of its own. They are page content, not chrome. */
.page-dark .academy__hero,
.page-dark .course__hero,
.page-dark .lesson__hero {
  background: none !important;
  border-bottom-color: var(--oa-line-soft);
}

.page-dark .course__top .course__hero { border-bottom: 0; }

.academy__eyebrow,
.course__eyebrow,
.lesson__eyebrow {
  margin: 0 0 var(--oa-space-2);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oa-muted);
}

.course__eyebrow a,
.lesson__eyebrow a {
  color: inherit;
  text-decoration: none;
}

.course__eyebrow a:hover,
.lesson__eyebrow a:hover {
  color: var(--oa-accent);
}

.academy__title,
.course__title,
.lesson__title {
  margin: 0 0 var(--oa-space-3);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  text-wrap: balance;
}

.academy__lede,
.course__summary {
  max-width: 62ch;
  margin: 0;
  font-size: 1.07rem;
  line-height: 1.6;
  color: var(--oa-ink-soft);
}

.academy__empty,
.course__empty {
  color: var(--oa-muted);
}

/* theme_dark.css overrides components rather than redefining the --oa-* tokens,
   so remap the ones these pages use. Everything above stays written against the
   light tokens and needs no dark-mode rule of its own. */
.page-dark .academy,
.page-dark .course,
.page-dark .lesson,
.page-dark .feedback-example {
  --oa-ink: var(--nt-ink-strong);
  --oa-ink-soft: var(--nt-ink);
  --oa-muted: var(--nt-muted);
  --oa-faint: var(--nt-faint);
  --oa-line: var(--nt-border);
  --oa-line-soft: var(--nt-line);
  --oa-surface: var(--nt-card);
  --oa-surface-sunken: rgba(255, 255, 255, 0.06);
  --oa-accent: var(--nt-accent-ink);
  --oa-accent-wash: rgba(169, 163, 255, 0.14);
  --oa-accent-border: rgba(169, 163, 255, 0.45);
  /* Marking colours: the light-theme greens and ambers are unreadable on a
     dark card, so they are restated rather than inherited. */
  --oa-in-range: #5ec98f;
  --oa-in-range-wash: rgba(94, 201, 143, 0.14);
  --oa-out-range: #e0a44a;
  --oa-out-range-wash: rgba(224, 164, 74, 0.14);
}