/* ============================================================
   SHELLS Design-System — Global heading primitives
   Single source of truth for the gradient and plain heading
   styles used across Prüfstand, Tutorial and Styleguide pages.
   Consumes tokens from tokens.css and colors.css.
   Authority: docs/styleguide/STYLE_GUIDE.md §2.3 and §4.8
   ============================================================ */

/* ─── Gradient heading ─── */
.heading-gradient {
    margin: 0;
    font-weight: 700;
    background: var(--gradient-title);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.heading-gradient--h1 { font-size: var(--text-4xl); }
.heading-gradient--h2 { font-size: var(--text-2xl); }
.heading-gradient--h3 { font-size: var(--text-xl); }
/* Display: Landing-/Hero-Seiten mit extra Präsenz (§4.8 Sondergröße) */
.heading-gradient--display { font-size: 2.75rem; letter-spacing: -0.03em; line-height: 1.15; }

/* ─── Plain heading ─── */
.heading-plain {
    margin: 0;
    font-weight: 700;
    color: var(--textcolor-fullcontrast);
    line-height: 1.2;
}

.heading-plain--h1 { font-size: var(--text-4xl); }
.heading-plain--h2 { font-size: var(--text-2xl); }
.heading-plain--h3 { font-size: var(--text-xl); }

/* ─── Responsive — narrower h1 on small screens ─── */
@media (max-width: 768px) {
    .heading-gradient--h1,
    .heading-plain--h1 {
        font-size: var(--text-3xl);
    }
    .heading-gradient--display {
        font-size: var(--text-4xl);
    }
}

/* ─── Math-Font for inline formula symbols
   (STYLE_GUIDE.md §4.4 — mandatory) ───
   Any <i> inside experiment/tutorial/e-learning content areas
   renders in the math-font stack. KaTeX output is unaffected
   (KaTeX uses its own classes/fonts). Not global on <i> because
   icons and generic emphasis in other page contexts should keep
   the body-font rendering. */
.elearning-container i,
.elearn-card i,
.tutorial-content i,
.exercise-box i,
.formula-example i,
.custom-pageheader i,
.custom-pagecontent i,
.m5-kennwert-card i,
.m4-phase-card i,
.tnsel-figure i,
.module-title i,
.module-subtitle i,
.fmu-info-popup i,
.fmu-info-popup__symbol i,
.fmu-table i,
.fmu-section i,
.fmu-card i,
.fmu-badge i,
.fmu-badge__label i,
.fmu-viz-option i,
.fmu-viz-option span i,
.fmu-live-topbar i,
.col-form-label i,
.fmu-card__title i {
    font-family: var(--font-math);
    font-style: italic;
}