/* typography — element reset, headings, emphasis, body, leads, eyebrows, audience rule
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* ------------------------------------------------------------- typography */
h1, h2, h3, h4, h5, h6,
.content-area-title, .title-font {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: var(--display-lh);
  text-transform: var(--display-case);
  color: var(--text-heading);
  text-wrap: pretty;
}

h1, .title-font { font-size: clamp(2.4rem, 5vw, 3.4rem); letter-spacing: var(--display-track-hero); line-height: var(--display-lh-hero); }
h2, .content-area-title { font-size: clamp(2rem, 4.2vw, 3rem); }
/* Block section title (shared by accordion, content, contact, q&a, tabs …). A
   step below the display h2 — it was reading almost as large as a page h1 — and
   with space beneath so the block content isn't cramped against it. */
.content-area-title { font-size: clamp(2rem, 4vw, 2.2rem); margin-bottom: 1.1rem; }
h3 { font-size: 1.45rem; line-height: 1.12; }
h4 { font-size: 1.35rem; line-height: 1.15; }
h5, h6 { font-size: 1.25rem; line-height: 1.2; }
h6 { font-size: var(--fs-min); }

/* Emphasis is how a title carries a voice. One per title, on the clause that
   holds the meaning. <em> for voice, <strong> for a fact, never both. */
h1 em, h2 em, h3 em, h4 em,
.content-area-title em, .title-font em {
  font-style: var(--em-style);
  font-weight: var(--em-weight);
  color: var(--em-color);
}
h1 strong, h2 strong, h3 strong,
.content-area-title strong, .title-font strong {
  font-weight: 800;
  color: var(--strong-color);
}

p + p { margin-top: 1rem; }

/* Blockquote — default WYSIWYG quote. An accent rule and the display face lift a
   pulled quote off the body copy so it reads as intentional, not just indented
   text. Component quotes (e.g. .dncg-sc-testimonial) override at higher
   specificity. */
blockquote {
  margin: 1.75rem 0;
  padding: .2rem 0 .2rem 1.6rem;
  border-left: 4px solid var(--accent);
  max-width: var(--measure);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--text-heading);
}
blockquote p + p { margin-top: .9rem; }
blockquote :is(cite, footer) {
  display: block;
  margin-top: .9rem;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  font-style: normal;
  color: var(--muted);
}

a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: .22em; }
a:hover { color: var(--link-hover); }

/* ==========================================================================
   .prose — the layer that puts back what the reset at the top takes away.

   That reset is right for a design system: `p, ul, ol, li { margin: 0 }` and
   `ul, ol { list-style: none }` mean every component states its own spacing and
   nothing inherits a browser default it did not ask for. Components do exactly
   that. EDITOR CONTENT does not, and cannot: the_content() emits whatever an
   author typed, so the reset was the last word on it. On a news post that meant
   bullet lists with no bullets and no indent (they read as loose lines of text),
   headings sitting flush against the paragraph below them, and no gap after the
   final paragraph of a section because the only paragraph rule in the sheet is
   `p + p`, which by definition cannot reach a last child.

   So: components keep the reset, editor prose gets this. Applied by the
   templates that render the_content() without a component wrapper.
   ========================================================================== */
.prose > :first-child { margin-top: 0; }

/* Headings need air ABOVE (to separate from the previous section) and BELOW (so
   the paragraph is not clamped to them). The top margin is the larger of the
   two, which is what makes a heading read as belonging to what follows it. */
.prose :is(h2, h3, h4, h5, h6) { margin: 2rem 0 .7rem; }
.prose h2 { font-size: clamp(1.9rem, 3.4vw, 2.2rem); }

/* Every paragraph, not just one that follows another. This is the rule that
   gives a section's LAST paragraph a gap beneath it. */
.prose p { margin-bottom: 1.1rem; line-height: 1.65; }

/* Markers back on, with the indent that makes a list read as a list. Nested
   lists tuck in rather than restarting at the margin. */
.prose :is(ul, ol) { margin: 0 0 1.1rem; padding-left: 1.6rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .35rem; }
.prose li::marker { color: var(--accent); }
.prose :is(ul, ol) :is(ul, ol) { margin: .35rem 0 .35rem; }
.prose ul ul { list-style: circle; }

.prose :is(figure, table, blockquote, iframe, .wp-block-embed) { margin-bottom: 1.4rem; }
/* No `> :last-child { margin-bottom: 0 }`. The usual reason to add one is to
   stop a double gap at the foot of a panel, but this content is not in a panel:
   on the enrolment post the last paragraph is followed immediately by a CTA
   button, and zeroing it is exactly what left the two touching. The final
   paragraph keeps its margin. */

strong { font-weight: 700; }
/* .92em computes to 1.012rem inside body copy (body is --fs-min, 1.1rem), under
   the floor. Pinned to --fs-min so it tracks the token rather than the arithmetic. */
code, kbd, samp { font-family: var(--font-mono); font-size: var(--fs-min); }
cite { font-style: normal; }

/* The quiet lead-in that sits ABOVE a statement. Display face, weight 400. */
.d-lead {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--text-heading);
  margin-bottom: .35rem;
  max-width: var(--measure);
}

/* The muted intro that sits AFTER a heading. Body face. */
.section-intro,
.content-area-title + p,
.title-area p {
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: var(--measure);
  margin-top: .5rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* The -text step, not the raw --em-color. An eyebrow is a small TEXT role at
     --fs-eyebrow (1.1rem), so 4.5:1 applies; --display-em is sized for heading
     emphasis, where the type is large and 3:1 applies. Identical on five brands;
     hesta steps it. The dark-ground and bg-mid-grey eyebrow colours are set in
     base.css and bridge.css and still win over this. */
  color: var(--display-em-text);
  margin-bottom: .8rem;
}
/* The audience rule — the ONLY place inside a section where the three fixed
   audience colours may appear. Semantic wayfinding, never decoration. */
.eyebrow::before { content: none; }
.eyebrow--rule::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 28px;
  height: 4px;
  background: linear-gradient(90deg,
    var(--aud-students) 0 33.33%,
    var(--aud-parents) 33.33% 66.66%,
    var(--aud-employers) 66.66% 100%);
}
.eyebrow--students { color: var(--aud-students); }
.eyebrow--students::before { content: ""; display: block; flex: 0 0 auto; width: 28px; height: 4px; background: var(--aud-students); }
.eyebrow--parents { color: var(--aud-parents); }
.eyebrow--parents::before { content: ""; display: block; flex: 0 0 auto; width: 28px; height: 4px; background: var(--aud-parents); }
.eyebrow--green,
.eyebrow--employers { color: var(--aud-employers-text); }
.eyebrow--employers::before { content: ""; display: block; flex: 0 0 auto; width: 28px; height: 4px; background: var(--aud-employers); }

.audience-rule {
  height: 4px;
  background: linear-gradient(90deg,
    var(--aud-students) 0 33.33%,
    var(--aud-parents) 33.33% 66.66%,
    var(--aud-employers) 66.66% 100%);
}