/**
 * @file
 * CycleIn brand heading letterform motif.
 *
 * Display headings (the hero H1 and the uppercase section H2s) render the
 * CycleIn wordmark motif: the round open-O/C glyphs are drawn Light while the
 * rest of the word stays Black ("Expanded"), and the brand "IN" lockup is set
 * in the Coffee Service brandmark font. The per-letter wrapping is emitted by
 * cyclein_public.theme (_cyclein_public_brand_heading); these rules only style
 * the decorative spans. The spans carry no semantics — screen readers still
 * read the full heading text — so the motif is purely presentational.
 *
 * All literal font values come from the C09 tokens in tokens.css.
 */

/* The display run: the heavy, wide Mona Sans Expanded Black cut. Applied to the
   known display headings — the hero/about H1s and the uppercase section H2s on
   the homepage, /training and /organisations — so the wrapped spans share a
   consistent Expanded baseline (client fb4). */
.paragraph--hero__heading,
.paragraph--about-hero__heading,
.paragraph--catalogue-hero__heading,
.paragraph--path-chooser__heading,
.paragraph--video-showcase__heading,
.paragraph--numbered-steps__heading,
.paragraph--benefit-grid__heading,
.paragraph--pricing-section__heading,
.paragraph--pricing-tiers__heading,
.paragraph--catalogue-cards__heading,
.paragraph--course-content__heading,
.paragraph--faq-section__heading,
.paragraph--cta-banner__heading {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
}

/* Round open-O/C cluster: the Expanded Light cut gives the thin, open-circle
   glyph at the same width as the surrounding Expanded letters. */
.brand-heading__round {
  font-weight: var(--font-weight-light);
}

/* Brand "IN" lockup: the slanted Coffee Service display face. It is optically
   larger than Mona Sans at the same point size, so it is nudged down slightly
   and given a touch of breathing room from the neighbouring letters.

   The side bearings are asymmetric because the face is slanted: the glyphs lean
   into the following word, so their ink crowds the letter after the run while
   leaving a gap before it. Even side padding therefore reads as a collision on
   the trailing edge (round-8 r41 — "IN" touching "WITH" in the hero). Measured
   against the Figma frame (sampled at the design's own cap height, so
   rasterisation cancels), the design leaves 0.175x the cap height between the
   run and the next glyph while 0.08em of even padding rendered only 0.103x.
   The leading bearing is unchanged — it already matches — so the trailing one
   carries the whole correction. */
.brand-heading__in {
  font-family: var(--font-family-brandmark);
  font-variation-settings: normal;
  font-weight: var(--font-weight-regular);
  font-style: normal;
  padding-inline: 0.08em 0.13em;
}

/**
 * Round-10 checklist r9/r10 (and the heading half of r16/r17): the display
 * section headings render at the H2 size where the design puts them on the
 * display size.
 *
 * Measured from the design export itself
 * (00-project-input/figma/specs/handover-page-FULL.json), not from a crop:
 * every section display heading is fontSize 70 / weight 900 / lineHeight 84 —
 * "CHooSE YOUR PATH", "SEE THE CoURSE IN ACTIoN", "THE BENEFITS of CYCLING",
 * "PRICING", "Frequently asked questions", "WHAT yOU'LL LEARN", "WHO IS CYCLEIN
 * FOR?", "COURSE CONTENT", "Licence OptiOns", "LMS AccESS", "Why Offer
 * CyCleIn?" — while the live H2 measured 35px/42px, exactly half.
 *
 * This is not a token error: C09 is right that --type-h2 is 35px, and the design
 * does use 35px — for the sub/card headings ("What is CycleIn?", "What the
 * training covers", "Certificate of completion included"). The display section
 * headings simply belong on the H1 size while staying <h2> elements, so the
 * one-H1-per-page structure is untouched.
 *
 * Scoped to >=1200px deliberately. The design's 1200px and 1920px frames carry
 * the same 70/84, so the scale is fixed across desktop and matches this
 * breakpoint exactly (the tokens swap to the mobile scale at 1199px). The export
 * holds no mobile node data — only PNG renders — so mobile is left untouched at
 * its current size rather than changed on a guess.
 */
@media (min-width: 1200px) {
  .paragraph--path-chooser__heading,
  .paragraph--video-showcase__heading,
  .paragraph--numbered-steps__heading,
  .paragraph--benefit-grid__heading,
  .paragraph--pricing-section__heading,
  .paragraph--pricing-tiers__heading,
  .paragraph--catalogue-cards__heading,
  .paragraph--course-content__heading,
  .paragraph--faq-section__heading,
  .paragraph--cta-banner__heading {
    font-size: var(--type-h1);
    line-height: var(--type-h1-line-height);
  }

  /**
   * The catalogue-cards, course-content and pricing-tiers templates wrap their
   * heading in .cyclein-section, and the theme catalogue library sets
   * `.cyclein-section > h2 { font-size: var(--type-h2-size) }`. That is (0,1,1)
   * against the (0,1,0) above, so it wins on specificity no matter the order —
   * those three headings stayed at 35px while the other seven moved. Matching
   * the wrapper as well takes this to (0,2,0) and settles it. Same declared
   * size; this only reaches the three the module's rule was holding.
   */
  .cyclein-section > .paragraph--pricing-tiers__heading,
  .cyclein-section > .paragraph--catalogue-cards__heading,
  .cyclein-section > .paragraph--course-content__heading {
    font-size: var(--type-h1);
    line-height: var(--type-h1-line-height);
  }
}