/* ==========================================================================
   main.css - independent revision material for the IAM Certificate.
   Plain CSS. No build step. Mobile-first. UK English.

   The brand name is set in NAV in build-nav.js and appears here only in this
   comment. It deliberately contains no reference to the IAM.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  color-scheme: light;

  --paper:        #F7F6F2;
  --paper-sunk:   #F0EDE4;   /* the one deeper tone, used by .bleed only */
  --ink:          #1B1A17;
  --ink-2:        #3A3833;   /* secondary figure lines: dark, never faint */
  --ink-3:        #57534A;   /* secondary text: darkened for contrast */
  --rule:         #DCD7CA;
  --rule-strong:  #B9B2A0;
  --accent:       #1D5C55;
  --accent-dark:  #123F3A;
  --accent-tint:  #E7EDEA;
  --good:         #1D5C55;
  --bad:          #8B2F1C;
  --bad-tint:     #F5E9E5;

  --sans:  Inter, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", "Palatino Linotype", Georgia, ui-serif, serif;
  --mono:  ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  --measure: 35rem;   /* prose text, about 68 characters */
  --label-col: 8.75rem;   /* 140px */
  --gap: 3.5rem;   /* 56px between the label and the content */
}

/* ----------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* Also on body: the root value alone still leaves the full-bleed overhang
   (the scrollbar width) scrollable. clip, not hidden, so no scroll
   container is created. */
body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 40em) { body { font-size: 1.125rem; } }

img { max-width: 100%; height: auto; }

a {
  color: var(--accent-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

/* ----------------------------------------------------------------- type -- */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 0.35em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.8vw, 3.1rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); margin-top: 3.25rem; }
h3 { font-size: 1.15rem; margin-top: 2.25rem; margin-bottom: 0.3em; letter-spacing: -0.005em; }

p { margin: 0 0 1.15em; }

.lede { font-size: 1.2em; line-height: 1.5; color: var(--ink-2); margin-bottom: 1.6em; text-wrap: pretty; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 0.7rem;
}

.prose > ul, .prose > ol { margin: 0 0 1.15em; padding-left: 1.15em; }
.prose li { margin-bottom: 0.4em; }
.prose strong { font-weight: 600; }

/* Small furniture: sans, not serif. */
.meta, figcaption, .note, caption, th, label, button, .tag { font-family: var(--sans); }

.note { font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }

/* Figures and scores only. */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- layout -- */
/* Left-biased shell; the label gutter inside each band carries the asymmetry. */
/* The one page container. Header, main and footer all use it, so the brand,
   the nav links and the content align to the same edges on every page. */
.shell {
  max-width: 77.5rem;   /* 1240px */
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.band { margin-block: 4.5rem; }
.band > .band__label { margin-bottom: 0.6rem; }
.band__body { max-width: 44rem; }
.band__body > :first-child { margin-top: 0; }

@media (min-width: 64em) {
  .band {
    display: grid;
    grid-template-columns: var(--label-col) minmax(0, var(--measure));
    column-gap: var(--gap);
    align-items: start;
  }
  .band > .band__label { text-align: right; margin: 0; padding-top: 0.5rem; }
  .band--wide { grid-template-columns: var(--label-col) minmax(0, 48rem); }
    .band--wide .band__body { max-width: 48rem; }
}

/* --------------------------------------------------------------- header -- */
.site-header { border-bottom: 1px solid var(--rule); padding-block: 1.1rem; }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1.5rem; }

.wordmark {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.wordmark:hover { color: var(--accent-dark); }

.site-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-family: var(--sans); font-size: 0.85rem; }
/* .site-nav link styling lives in the NAVIGATION section below. */

.skip-link { position: absolute; left: -9999px; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; font-family: var(--sans); }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 10; }

/* ------------------------------------------------------------ page head -- */
.page-head { padding-block: 3rem 0.5rem; }
.page-head .lede { max-width: 40rem; }

.breadcrumb { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-3); margin: 0 0 1.4rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; }
.breadcrumb li { display: inline; }
.breadcrumb li + li::before { content: " / "; color: var(--rule-strong); }
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ---------------------------------------------------------------- facts -- */
/* Key/value lines separated by hairlines. No card chrome. */
.factlist { margin: 0; max-width: 38rem; }
.factlist div { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; padding: 0.55rem 0; border-top: 1px solid var(--rule); }
.factlist div:last-child { border-bottom: 1px solid var(--rule); }
.factlist dt { font-family: var(--sans); font-size: 0.82rem; font-weight: 500; color: var(--ink-3); flex: 0 0 9rem; }
.factlist dd { margin: 0; font-size: 0.98rem; color: var(--ink-2); }

/* --------------------------------------------------------------- figure -- */
.figure {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 2rem + 3vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
/* Secondary line under a large number: reasonably large and dark. */
.figure-note {
  font-family: var(--sans);
  font-size: 1.12rem;
  line-height: 1.4;
  color: var(--ink);
  margin: 0.6rem 0 0;
  max-width: 26rem;
}

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 0.72rem 1.15rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--accent);
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #FFFFFF; }
.btn--ghost { background: transparent; color: var(--accent-dark); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--accent-tint); color: var(--accent-dark); border-color: var(--accent); }
.btn[disabled] { opacity: 0.45; cursor: default; }

/* ------------------------------------------------------------ buy block -- */
/* One of the three moments that gets the deeper tone and extra room. */
/* The band around it supplies the grid and the spacing. */
.buy { margin: 0; }
.buy h2 { margin-top: 0; max-width: none; }
.buy__price {
  font-family: var(--mono);
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0.75rem 0 1.25rem;
}
.buy__list { list-style: none; margin: 0 0 1.25rem; padding: 0; max-width: 34rem; }
.buy__list li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.55rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
}
.buy__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 1px;
  background: var(--accent);
}
.buy__note { font-family: var(--sans); font-size: 0.92rem; color: var(--ink-2); max-width: 32rem; margin: 0; }
.buy__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.6rem 0 0; }

/* --------------------------------------------------------------- footer -- */
.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 4.5rem;
  padding-block: 2rem 3.5rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.site-footer a { color: var(--ink-2); }
.disclaimer { max-width: 44rem; margin: 0 0 0.8rem; }
.disclaimer strong { color: var(--ink); font-weight: 600; }

/* The single outbound link, under the disclaimer. Same muted footer voice. */
.footer-also { max-width: 44rem; margin: 0 0 0.8rem; }


/* ------------------------------------------------------- content table -- */
/* Generic table for page content. The quiz results table is styled
   separately in quiz.css so that file stays self-contained for the
   offline download. */
.table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.95rem; }
.table caption {
  text-align: left;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 0.6rem;
}
.table th, .table td {
  text-align: left;
  padding: 0.6rem 0.5rem 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.table thead th {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-3);
  border-bottom-color: var(--rule-strong);
}
.table tbody th { font-family: var(--serif); font-weight: 400; color: var(--ink); }
.table td { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.table .num { text-align: right; width: 5rem; padding-right: 0; }
.table tr.is-below th, .table tr.is-below td { color: var(--bad); }
.table tfoot th, .table tfoot td { border-bottom: 0; padding-top: 0.7rem; }

.verdict-line {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bad);
  margin: 0 0 1.5rem;
}

/* Two figures side by side, e.g. the two pass thresholds. */
.figures { display: grid; gap: 2.25rem; margin: 2.25rem 0 2.5rem; }
@media (min-width: 34em) { .figures { grid-template-columns: 1fr 1fr; gap: 2rem; } }

/* ==========================================================================
   NAVIGATION
   One layout for all nine pages: the .shell container plus a top bar. No
   sidebar, no second column, no per-page variation.
   ========================================================================== */

/* Mobile first: brand on one row, links left aligned on the next. Three links
   do not need a hamburger, so they stay visible at every width. */
.site-header__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem 1.5rem;
}

@media (min-width: 43.75em) {
  .site-header__inner { flex-direction: row; align-items: baseline; }
}

.site-nav a {
  color: var(--ink-2);
  text-decoration: none;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--accent-dark); }

/* Current section: weight change and a thin accent underline. No fill. */
.site-nav a[aria-current] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* ----------------------------------------------------------- module index */
/* A contents page: fixed number column, title and description on separate
   lines, hairlines between rows only, no cards and no link chrome. */
.modindex {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 48rem;
}
.modindex li + li { border-top: 1px solid var(--rule); }

.modindex a {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 1.5rem;
  gap: 0 1rem;
  align-items: start;
  padding: 1.5rem 0;
  color: var(--ink);
  text-decoration: none;
}
@media (min-width: 40em) {
  .modindex a { grid-template-columns: 5rem minmax(0, 1fr) 1.5rem; gap: 0 1rem; }
}

.modindex__num {
  font-family: var(--mono);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  color: var(--accent);
}
.modindex__body { min-width: 0; }
.modindex__title {
  display: block;
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.15s ease;
}
.modindex__desc {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink-2);
  margin-top: 0.4rem;
  max-width: 34rem;
}
.modindex__arrow {
  font-family: var(--sans);
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--ink-3);
  justify-self: end;
  transition: transform 0.15s ease, color 0.15s ease;
}
.modindex a:hover .modindex__title { color: var(--accent); }
.modindex a:hover .modindex__arrow { color: var(--accent); transform: translateX(4px); }

.breadcrumb--under { margin: 0.1rem 0 0.6rem; }

/* ---------------------------------------------- previous / next modules -- */
/* Spans the same width as the module switcher at the top of the page, so
   the two navigation blocks share their left and right edges. */
.pager {
  display: grid;
  gap: 1.25rem;
  border-top: 1px solid var(--rule);
  margin-top: 4.5rem;
  padding-top: 1.5rem;
}
@media (min-width: 34em) { .pager { grid-template-columns: 1fr 1fr; gap: 2rem; } }

.pager a { text-decoration: none; display: block; }
.pager__dir {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.4rem;
}
.pager__label { font-family: var(--sans); font-size: 0.98rem; line-height: 1.35; color: var(--accent-dark); }
.pager a:hover .pager__label { color: var(--accent); text-decoration: underline; }
.pager__num { font-family: var(--mono); color: var(--ink-3); margin-right: 0.4rem; }
.pager__prev { grid-column: 1; }
.pager__next { grid-column: 2; text-align: right; }

.pager__back {
  font-family: var(--sans);
  font-size: 0.9rem;
  margin: 1.5rem 0 0;
}
.pager__back a { color: var(--accent-dark); text-decoration: none; }
.pager__back a:hover { color: var(--accent); text-decoration: underline; }

/* ------------------------------------------------------------- footer --- */
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  align-items: baseline;
  margin: 1.25rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.82rem;
  color: var(--ink-3);
}
.footer-meta a { color: var(--ink-2); text-decoration: none; }
.footer-meta a:hover { color: var(--accent-dark); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .modindex__arrow { transition: none; }
  .modindex a:hover .modindex__arrow { transform: none; }
}

/* ---------------------------------------------------------- page sample -- */
/* The one image on the site: a scan of a notes page. It carries a rule
   because the scan is white and the paper behind it is not. Width and
   height are on the element itself, so the space is reserved before it
   loads and nothing moves. */
.sample { margin: 0 0 1.5rem; max-width: 786px; }
.sample img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: #FFFFFF;
}

/* -------------------------------------------------------- in-content list */
/* A compact list of modules used inside body copy on the sales pages. Kept
   deliberately lighter than .modindex, which is the contents-page component
   on the guide and the landing page. */
.modlist { list-style: none; margin: 0; padding: 0; }
.modlist li { border-top: 1px solid var(--rule); }
.modlist li:last-child { border-bottom: 1px solid var(--rule); }
.modlist a {
  display: block;
  padding: 0.8rem 0;
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--ink-2);
  text-decoration: none;
}
.modlist a:hover { color: var(--accent-dark); }
/* ------------------------------------------------------------- measure --- */
/* Prose takes the reading measure; headings are free to run wider. Nothing
   is centred: the column is centred, the text inside it stays left aligned. */
.prose p,
.prose ul,
.prose ol { max-width: var(--measure); }
.prose h2,
.prose h3,
.prose h4 { max-width: none; }
.band__body > .note { max-width: var(--measure); }

/* ============================================================== full bleed */
/* The one deeper tone, used behind exactly three components site-wide: the
   buy block, the worked example, and the free quiz on the sales page. The
   background runs edge to edge; the content stays on the standard grid. */
.bleed {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  padding-block: 3.25rem;
  background: var(--paper-sunk);
  border-block: 1px solid var(--rule);
}
.bleed > :first-child { margin-top: 0; }
.bleed > :last-child { margin-bottom: 0; }

/* As a band, the grid columns still line up inside the bled area. */
.band.bleed { margin-block: 5.5rem; }

/* ========================================================= module switcher */
.modswitch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem 1.25rem;
  margin: 0 0 3rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 46em) {
  .modswitch { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1.25rem; }
}

.modswitch a {
  display: block;
  padding: 0.45rem 0;
  text-decoration: none;
  color: var(--ink-2);
  border-top: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.modswitch a:hover { color: var(--accent-dark); }

.modswitch__num {
  display: block;
  font-family: var(--mono);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  margin-bottom: 0.15rem;
}
.modswitch__title {
  display: block;
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.3;
}
.modswitch a[aria-current="page"] {
  color: var(--ink);
  border-top-color: var(--accent);
}
.modswitch a[aria-current="page"] .modswitch__num { color: var(--accent); font-weight: 700; }
.modswitch a[aria-current="page"] .modswitch__title { font-weight: 600; }

/* ------------------------------------------------ previous / next slots -- */
/* The empty span keeps the two-column layout on modules 1 and 5. */
.pager__empty { display: block; }
.pager__label { display: block; }
@media (min-width: 34em) {
  .pager__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ================================================= definition list blocks */
.terms, .split { margin: 0; }
.terms > div, .split > div {
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
}
.terms > div:last-child, .split > div:last-child { border-bottom: 1px solid var(--rule); }

.terms dt, .split dt {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.3rem;
}
.terms dd, .split dd {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: var(--measure);
}
.split dd { color: var(--ink); }

/* ================================================================= motion */
/* Hover transitions only, all about 150ms, all switched off on request. */
.btn { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.site-nav a { transition: color 0.15s ease, border-color 0.15s ease; }
.pager a .pager__label { transition: color 0.15s ease; }

@media (prefers-reduced-motion: reduce) {
  .btn,
  .site-nav a,
  .modswitch a,
  .modindex__title,
  .modindex__arrow,
  .pager a .pager__label { transition: none; }
  .modindex a:hover .modindex__arrow { transform: none; }
}