// =============================================================================
// TYPOGRAPHY — global foundation for bare content elements (h1–h6, p, lists,
// links) plus the .eyebrow / .caption utilities.
//
// Basis: content-only-intro's type spec — the project's cleanest match to the
// design system — generalized here so components describing the same kind of
// content (headings, body paragraphs, prose links) don't redeclare font rules.
// The actual values live in the shared mixins (_mixins.scss: display-heading,
// eyebrow-text, body-text, prose-link); this file only applies them to bare
// tags and a couple of small utility classes.
//
// Imported AFTER the Bootstrap import in main.scss (post-bootstrap overrides
// section) — Bootstrap's reboot sets its own bare h1–h6 rules at the same
// specificity, so these must win by cascade order, same precedent as the
// .btn override next to it.
// =============================================================================

@import 'mixins';

// h1/h2 share the project's single most-duplicated heading pattern (30px
// mobile → 48px desktop, Playfair Display 400). There's no distinct h1 track
// in the type scale outside the hero component's own scoped 72px style — a
// real h1 inside default page/RTE content falls back to the same size as h2.
h1,
h2 {
  @include display-heading;
}

// No direct Figma reference for h3–h6 beyond testimonial-card__title (h3);
// this is a proportional descending scale for arbitrary RTE/default content —
// override per-component if the design later specifies otherwise.
h3 {
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);      // 24px mobile
  font-weight: 500;
  line-height: var(--lh-display-xs);
  color: var(--color-text-primary);
  margin: 0;

  @include respond-to('desktop') {
    font-size: var(--fs-display-sm);    // 30px
    line-height: var(--lh-display-sm);
  }
}

h4 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);              // 20px
  font-weight: 500;
  line-height: var(--lh-xl);
  color: var(--color-text-primary);
  margin: 0;
}

h5 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);              // 18px
  font-weight: 500;
  line-height: var(--lh-lg);
  color: var(--color-text-primary);
  margin: 0;
}

h6 {
  font-family: var(--font-display);
  font-size: var(--fs-base);            // 16px
  font-weight: 500;
  line-height: var(--lh-base);
  color: var(--color-text-primary);
  margin: 0;
}

p {
  @include body-text;
  margin: 0;
}

// Eyebrow / overline utility — opt-in class (a presentational label role, not
// a heading level, so it isn't a bare-tag default).
.eyebrow {
  @include eyebrow-text;
}

// Caption utility — small muted text for figure/media captions. No current
// component consumes this yet; kept ready rather than redeclared ad hoc when
// one does.
.caption {
  font-family: var(--font-body);
  font-size: var(--fs-xs);              // 12px
  font-weight: 400;
  line-height: var(--lh-xs);
  color: var(--color-text-muted);
  margin: 0;
}

// ─── Rich/prose content (default Text CE bodytext + content-only-intro body) ─
// Lists and inline links only need real styling where arbitrary rich text can
// appear. The reset's `list-style: none` stays the sitewide default for
// component-authored lists (nav, footer, info-card, etc.), which always
// supply their own markers or intentionally have none.
.frame-type-text,
.content-only-intro__body {
  ul,
  ol {
    padding-left: 1.25rem;
    margin: 1rem 0;
  }

  ul {
    list-style: disc;
  }

  ol {
    list-style: decimal;
  }

  li {
    @include body-text;
    margin-bottom: 0.5rem;

    &:last-child {
      margin-bottom: 0;
    }
  }

  a {
    @include prose-link;
  }
}

// ─── Default Text content element (CType text, layout 0) ────────────────────
// Styles TYPO3's own default frame/header/paragraph structure to match
// content-only-intro's internal type/spacing rhythm, so editors can use the
// default Text element instead of the layout-200 content-only-intro override
// for this kind of content — see _content-only-intro.scss for the (now-thin)
// legacy variant kept for existing content using that layout.
//
// Deliberately NOT setting the section-level padding-block (56px/160px) here:
// .frame-type-text is TYPO3's generic wrapper for every default Text content
// element sitewide, not just this intro-style usage — adding that spacing
// globally pushed every other plain text block on the site down/apart
// incorrectly. That spacing stays scoped to .content-only-intro's own
// padding-block only.
.frame-type-text {
  header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-eyebrow-title); // 16px, matches content-only-intro__heading

    // Title = the header field's own heading (core always renders it
    // first, whatever h-level header_layout picks — h2 by default here).
    > *:first-child {
      @include display-heading;
    }

    // Only a literal <p> gets eyebrow treatment — core's subheader field
    // always renders as a heading (h3 by default), which should just look
    // like a normal heading, not be forced into the eyebrow role. A <p>
    // here would only ever come from the (currently unused) Date field —
    // Header/Date.fluid.html — which core always renders after the title,
    // the reverse of content-only-intro's own eyebrow-before-title markup
    // order, so it's moved visually above via `order` instead of changing
    // the (unmodified) core markup.
    > p {
      @include eyebrow-text($mobile-weight: 500, $uppercase: false);
      color: var(--color-text-secondary);
      order: -1;

      @include respond-to('desktop') {
        max-width: 536px;
      }
    }
  }

  > p {
    max-width: 722px;
  }

  // Title → first paragraph gap, matches content-only-intro__body's margin.
  header + p {
    margin-top: var(--gap-title-body-mobile); // 16px mobile

    @include respond-to('desktop') {
      margin-top: var(--gap-title-body); // 24px desktop
    }
  }

  // Paragraph → paragraph gap for multi-paragraph bodytext — same rhythm as
  // image-and-content__body's own flex `gap` between paragraphs.
  p + p {
    margin-top: var(--gap-paragraph-mobile); // 24px mobile

    @include respond-to('desktop') {
      margin-top: var(--gap-paragraph); // 48px desktop
    }
  }

  // A trailing link is usually its own <p> only because the RTE inserts a
  // paragraph break after Enter — it reads as "body text, then a link", not
  // a second distinct paragraph, so it shouldn't get the full inter-paragraph
  // gap above. Tighten it to the title→body rhythm instead.
  p:has(> a:only-child) {
    margin-top: var(--gap-title-body-mobile); // 16px mobile

    @include respond-to('desktop') {
      margin-top: var(--gap-title-body); // 24px desktop
    }
  }
}

// ─── Default Header content element (CType header) ──────────────────────────
// Same approach as .frame-type-text above: match content-only-intro's look
// using TYPO3's own core header/subheader markup, unchanged. A header CE's
// header_layout can render its title as any h1-h6 (unlike the text CE,
// which is always h2 in practice), so the override here applies
// display-heading to whichever tag renders first rather than one hardcoded
// level — h3-h6 don't get this look from the bare global rules above on
// their own.
.frame-type-header {
  header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-eyebrow-title); // 16px, matches content-only-intro__heading

    > :first-child {
      @include display-heading;
    }

    // Same accessibility call as .frame-type-text above: core renders the
    // subheader after the title — the reverse of content-only-intro's
    // eyebrow-before-title order. Reordering visually via CSS would put
    // sighted and screen-reader reading order out of sync (WCAG 1.3.2), so
    // this stays a secondary heading below the title (its own bare h2-h6
    // global style, already margin: 0) rather than being forced into the
    // eyebrow role.
  }
}