/*
 * base/typography.css — element-level type rules that theme.json cannot set.
 *
 * theme.json already handles the global font family, size, line height, heading
 * styles and link colours. Only add rules here for things it has no field for:
 * balanced headings, list/table/quote details, first-child margin collapsing.
 */

/*
 * Eyebrow — the small uppercase label above a headline.
 *
 * Figma calls this "Typography/Eyebrow": 16px/16px, weight 700, +2px tracking,
 * uppercase, body sans. It is not a heading element, so theme.json has no
 * element slot for it; it is applied as a class to whatever tag the section
 * needs (usually a <p> above an h2).
 *
 * The +2px tracking is expressed as 0.125em so it scales if the size ever
 * changes — 2px at the 16px design size.
 */
.fcs-eyebrow {
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.125em;
	text-transform: uppercase;
	margin-block: 0;
}

/* Keep headline line breaks tidy without hand-inserted <br>. */
h1,
h2,
h3 {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

/*
 * An h3 given the H4 size preset takes the whole H4 style, not just its size.
 * Lets a card title sit at the right outline level (h3 under a section h2)
 * while matching Figma's Typography/H4. Mirrors theme.json's h4 element —
 * change both together. No h3 used this preset before, so nothing else moves.
 *
 * text-wrap: inherit undoes the h1–h3 balance above: a real h4 never had it,
 * and without this the card titles break their lines in different places.
 *
 * Deliberately h3 only. search.html, archive.html and index.html put an h2 at
 * the H4 preset and want it in the headings font, so an h2 that must look like
 * H4 opts in with the "H4 style" block style below instead.
 */
h3.has-h-4-font-size {
	font-family: var( --wp--preset--font-family--body );
	font-weight: 700;
	line-height: 1.333;
	text-wrap: inherit;
}

/*
 * "H4 style" and "H5 style" heading block styles (registered in functions.php
 * for core/heading and core/post-title): the whole H4 or H5 look at whatever
 * level the outline needs. Size still comes from the size preset, so a heading
 * can keep its own (the Our History years stay at H2 size). Mirror theme.json's
 * h4 and h5 elements — change them together.
 */
:is( .wp-block-heading, .wp-block-post-title ).is-style-h4 {
	font-family: var( --wp--preset--font-family--body );
	font-weight: 700;
	line-height: 1.333;
	text-wrap: inherit;
}

:is( .wp-block-heading, .wp-block-post-title ).is-style-h5 {
	font-family: var( --wp--preset--font-family--body );
	font-weight: 700;
	line-height: 1.556;
	text-wrap: inherit;
}

/* Long words (URLs, German-length compounds) should not overflow a column. */
h1,
h2,
h3,
h4,
h5,
h6,
p {
	overflow-wrap: break-word;
}

/* Editor content lists — core sets no padding, which looks unindented. */
.wp-block-post-content :where( ul, ol ):not( [class*="wp-block-" ] ) {
	padding-inline-start: 1.5em;
}

blockquote {
	border-inline-start: 3px solid var( --wp--preset--color--accent );
	padding-inline-start: 1.25rem;
	font-style: italic;
}