/*
 * Stage 2 of docs/design-unification-plan.md: typography.
 * Accepted on 2026-10-24 and loaded on every page (templates/element/ui/next_styles.php).
 *
 * PT Serif stays for headings and reading text, Geometria takes the interface:
 * buttons, fields, navigation, tables, dates and small labels. Page titles
 * share one scale, reading text is capped at 68 characters per line.
 * The widget (#hr24AppBox) and the cabinets (body.body-admin) are untouched.
 */

/* Interface in Geometria. The logo (.navbar-brand) keeps its serif. */
html:root body:not(.body-admin):not(.h24-site) :is(.btn, button, input, select, textarea, label, .form-control, .nav-link, .breadcrumb, .badge, .page-link, small, time, th, .personal-space-nav__item, .personal-space-list a, .personal-space-list button, .today-schedule__tabs button, .feed-card__date, .dropdown-item):not(:where(#hr24AppBox, #hr24AppBox *)) {
  font-family: var(--h24-font-sans);
}

/* Labels above headings: one style everywhere. */
html:root body:not(.body-admin):not(.h24-site) :is(.gospel-eyebrow, .landing-hero__eyebrow, .liturgy-eyebrow, .prayerbook-kicker, .prayerbook-synodic__eyebrow, .prayerbook-group__title, .personal-space-card__eyebrow, .personal-space-directory__section h2, .home-temple-dialog__eyebrow, .today-card__eyebrow, .today-header__date) {
  font-family: var(--h24-type-eyebrow-family);
  font-size: var(--h24-type-eyebrow-size) !important;
  font-weight: var(--h24-type-eyebrow-weight);
  letter-spacing: var(--h24-type-eyebrow-tracking);
  line-height: var(--h24-type-eyebrow-line);
  text-transform: uppercase;
}

/* Page titles: one scale; hero titles use the display size on wider screens. */
html:root body:not(.body-admin):not(.h24-site) :is(h1, .h1):not(:where(#hr24AppBox *)) {
  font-family: var(--h24-type-h1-family);
  font-size: clamp(1.75rem, 1.5rem + 1vw, var(--h24-type-h1-size));
  font-weight: var(--h24-type-h1-weight);
  letter-spacing: normal;
  line-height: var(--h24-type-h1-line);
}

html:root body:not(.body-admin):not(.h24-site) :is(.gospel-hero, .landing-hero, .liturgy-hero) :is(h1, .h1) {
  font-size: clamp(2rem, 1.6rem + 1.6vw, var(--h24-type-display-size));
  line-height: var(--h24-type-display-line);
}

/* Section headings keep their sizes but share the serif and its regular weight. */
html:root body:not(.body-admin):not(.h24-site) :is(h2, h3, h4):not(:where(#hr24AppBox *)):not(.prayerbook-group__title):not(.personal-space-directory__section h2) {
  font-family: var(--h24-font-serif);
  font-weight: var(--h24-type-h2-weight);
}

/* The Gospel landing set its section titles in Georgia at 50px. */
html:root .gospel-landing h2 {
  font-size: clamp(var(--h24-type-h2-size), 1.3rem + 1.2vw, 2rem);
  line-height: var(--h24-type-h2-line);
}

/* Reading width: at most 68 characters per line, centred text stays centred. */
html:root body:not(.body-admin):not(.h24-site) :is(.container, .container-fluid, .personal-space-shell, .gospel-landing, .text-box, .zapiski-article, .svechi-article, .item-block.landing-content, .temple-info-section, .liturgy-source) :is(p, li):not(:where(#hr24AppBox *)),
html:root body:not(.body-admin):not(.h24-site) :is(.landing-hero__lead, .liturgy-lead) {
  max-width: var(--h24-size-measure);
}

html:root body:not(.body-admin):not(.h24-site) :is(.text-center :is(p, li), p.text-center):not(:where(#hr24AppBox *)) {
  margin-inline: auto;
}

/* Buttons never push the page sideways on narrow phones. */
html:root body:not(.body-admin):not(.h24-site) .btn:not(:where(#hr24AppBox *)) {
  max-width: 100%;
  white-space: normal;
}

html:root body:not(.body-admin):not(.h24-site) .btn-lg:not(:where(#hr24AppBox *)) {
  font-size: 1.0625rem;
}