/* ============================================================
   Learn O/L English — /learn-ol-english/  (#17774)

   Loaded only by ol_english_hub.html.j2, so nothing here reaches the other
   ~580 pages. Every colour is a `--color-*` token from variables.css, which
   is what makes the page correct in both themes without a second palette.

   The `--ole-*` custom properties are component-local: they exist so the
   Marks Map SVG can be themed from CSS rather than carrying baked fills, and
   they are deliberately NOT `--color-*`-prefixed — that prefix is the theme
   namespace Check 92 polices, and these are not theme tokens.
   ============================================================ */

:root {
  --ole-recept-a: var(--color-secondary, #2A4BAF);
  --ole-recept-b: var(--color-primary-400, #4F6093);
  --ole-production: var(--color-accent);
  --ole-on-gold: #1A1206;
  --ole-pass: #059669;
  --ole-hero-from: var(--color-primary-900, #0A1228);
  --ole-hero-to: var(--color-secondary, #2A4BAF);
}
[data-theme="dark"] { --ole-pass: #34D399; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ole-pass: #34D399; }
}

.ole-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- hero */
.ole-hero {
  background: linear-gradient(165deg, var(--ole-hero-from), var(--ole-hero-to));
  color: #E2E8F0;
  padding: 56px 0;
}
.ole-eyebrow {
  color: var(--color-accent); font-size: .75rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; margin: 0 0 12px;
}
.ole-hero h1 {
  color: #fff; font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  line-height: 1.2; margin: 0 0 .35em;
}
.ole-dek { color: #C8D1EE; font-size: 1.0625rem; max-width: 58ch; margin: 0 0 26px; }
.ole-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.ole-trust { margin: 22px 0 0; font-size: .8125rem; color: #9DA6C0; }

/* ---------------------------------------------------------------- honesty band (si/ta) */
.ole-honesty {
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 18px 0; color: var(--color-text-primary); font-size: .9375rem;
}

/* ---------------------------------------------------------------- sections */
.ole-sec { padding: 48px 0; border-top: 1px solid var(--color-border); }
.ole-sec-alt { background: var(--color-surface-alt); }
.ole-sec h2 { margin: 0 0 .4em; font-size: clamp(1.375rem, 3vw, 1.75rem); color: var(--color-text-primary); }
.ole-lede { font-size: 1.0313rem; max-width: 64ch; color: var(--color-text-secondary); }

/* ---------------------------------------------------------------- buttons */
.ole-btn {
  display: inline-block; padding: 11px 20px; border-radius: var(--radius-md);
  font-weight: 700; font-size: .9063rem; text-decoration: none;
  border: 1.5px solid transparent;
}
.ole-btn-sm { padding: 8px 15px; font-size: .8438rem; border-radius: var(--radius-sm); }
.ole-btn-gold { background: var(--color-accent); color: var(--ole-on-gold); }
.ole-btn-gold:hover { filter: brightness(1.06); }
.ole-btn-ghost { border-color: currentColor; color: inherit; background: transparent; }
.ole-sec .ole-btn-ghost { color: var(--color-secondary); border-color: var(--color-secondary); }

/* ---------------------------------------------------------------- marks map */
.ole-svg-scroll, .ole-table-scroll { overflow-x: auto; margin: 24px 0 0; }
.ole-marks-map { min-width: 620px; display: block; }
.ole-svg-lbl  { font: 600 12px system-ui, sans-serif; fill: #fff; }
.ole-svg-val  { font: 800 15px system-ui, sans-serif; fill: #fff; }
.ole-svg-on-gold { fill: var(--ole-on-gold); }
.ole-svg-ax   { font: 600 12px system-ui, sans-serif; fill: var(--color-text-muted); }
.ole-svg-cap  { font: 600 11.5px system-ui, sans-serif; fill: var(--color-text-muted); }
.ole-svg-big  { font: 800 18px system-ui, sans-serif; fill: var(--ole-pass); }
.ole-svg-rule { stroke: var(--color-text-muted); stroke-width: 1.4; }
.ole-svg-pass { stroke: var(--ole-pass); stroke-width: 2.5; }
.ole-svg-passdot { fill: var(--ole-pass); }
.ole-svg-base { stroke: var(--color-border); stroke-width: 1; }

.ole-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .9063rem; }
.ole-table th, .ole-table td {
  text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--color-border); vertical-align: top;
}
.ole-table th {
  background: var(--color-surface); color: var(--color-text-primary);
  font-weight: 650; font-size: .8125rem; text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap;
}
.ole-table tr:last-child td { border-bottom: none; }
.ole-table .ole-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- books */
.ole-book-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px; margin-top: 24px;
}
.ole-book {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); overflow: hidden;
  display: flex; flex-direction: column;
}
.ole-book-cover { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--color-border); }
.ole-book-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.ole-rung {
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-accent-700, var(--color-accent));
  margin: 0 0 8px;
}
.ole-book h3 { margin: 0 0 8px; font-size: 1.0625rem; color: var(--color-text-primary); }
.ole-book-blurb { font-size: .875rem; color: var(--color-text-secondary); margin: 0 0 12px; }
.ole-gate {
  font-size: .7813rem; color: var(--color-text-muted);
  font-variant-numeric: tabular-nums; margin: auto 0 14px;
}

/* ---------------------------------------------------------------- placer + guides */
.ole-placer, .ole-guides {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); padding: 22px; margin-top: 26px;
}
.ole-placer h3, .ole-guides h3 { margin: 0 0 8px; font-size: 1.0625rem; color: var(--color-text-primary); }
.ole-placer p, .ole-guides p { color: var(--color-text-secondary); margin: 0 0 12px; }
.ole-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.ole-chip {
  border: 1.5px solid var(--color-secondary); color: var(--color-secondary);
  border-radius: var(--radius-full); padding: 7px 15px; font-size: .8438rem;
  font-weight: 650; text-decoration: none; background: transparent;
}
.ole-chip:hover { background: var(--color-surface-alt); }
.ole-chip-gold { border-color: var(--color-accent); color: var(--color-accent-700, var(--color-accent)); }

/* ---------------------------------------------------------------- papers */
.ole-paper-list { list-style: none; padding: 0; margin: 22px 0; }
.ole-paper-list li {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--color-border);
}
.ole-paper-meta { font-size: .8125rem; color: var(--color-text-muted); }

/* ---------------------------------------------------------------- convert */
.ole-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: ole-step;
}
.ole-steps li { position: relative; padding-left: 46px; }
.ole-steps li::before {
  counter-increment: ole-step; content: counter(ole-step);
  position: absolute; left: 0; top: 0; width: 32px; height: 32px;
  border-radius: var(--radius-full); background: var(--color-accent);
  color: var(--ole-on-gold); display: grid; place-items: center;
  font-weight: 800; font-size: .9375rem;
}
.ole-steps h4 { margin: 0 0 4px; font-size: 1rem; color: var(--color-text-primary); }
.ole-steps p { margin: 0; font-size: .875rem; color: var(--color-text-secondary); }

.ole-offer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px; margin-top: 32px;
}
.ole-offer {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); padding: 20px;
}
.ole-offer h3 { margin: 10px 0 8px; font-size: 1.0625rem; color: var(--color-text-primary); }
.ole-offer p { font-size: .875rem; color: var(--color-text-secondary); margin: 0 0 14px; }
.ole-badge {
  display: inline-block; font-size: .6875rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px;
  border-radius: var(--radius-full); margin: 0;
  border: 1px solid var(--color-border); color: var(--color-text-secondary);
}
.ole-badge-free { color: var(--ole-pass); border-color: var(--ole-pass); }
.ole-badge-paid { color: var(--color-accent-700, var(--color-accent)); border-color: var(--color-accent); }

/* ---------------------------------------------------------------- faq */
.ole-faq { margin: 22px 0 0; }
.ole-faq dt {
  font-weight: 700; font-size: 1.0313rem; color: var(--color-text-primary);
  margin: 0; padding-top: 16px; border-top: 1px solid var(--color-border);
}
.ole-faq dt:first-of-type { border-top: none; padding-top: 0; }
.ole-faq dd { margin: 6px 0 16px; font-size: .9063rem; color: var(--color-text-secondary); }

@media (max-width: 560px) {
  .ole-hero { padding: 36px 0; }
  .ole-sec { padding: 34px 0; }
  .ole-wrap { padding: 0 18px; }
}

/* ---------------------------------------------------------------- parent block (si/ta)
   #17775 — the guides row becomes the parent-addressed conversion surface when
   the copy supplies a badge. Gold rather than the neutral surface because on a
   localized page this is the highest-intent block: the parent is the payer, and
   the guide is the one artefact on the page written in their language. */
.ole-guides-parent {
  background: var(--color-accent-50, var(--color-surface-alt));
  border-color: var(--color-accent-200, var(--color-border));
}
.ole-guides-quote {
  border-left: 3px solid var(--color-accent);
  padding-left: 14px;
  font-style: italic;
  color: var(--color-text-primary);
  margin: 0 0 14px;
}