/*
 * ILM Components -- Heading.
 *
 * The component owns its own type scale rather than inheriting the theme's.
 * ILM Theme stops its prose rules at `.ilm-root` deliberately (see the note in
 * base.css), so these sizes are what a Heading looks like -- under ILM Theme,
 * under any other theme, and in the builder canvas alike.
 *
 * Sizes prefer the theme's heading tokens and fall back to a `clamp()` of
 * their own. `clamp()` gives a heading that grows with the viewport between a
 * floor and a ceiling, so a page title is not the same size on a phone and on
 * a desktop and does not need a breakpoint to say so.
 *
 * The selector is `h1.ilm-component--basic-heading` rather than a class alone,
 * because the level is the element. It also gives specificity 0,1,1, which
 * beats a bare `h1 { }` in any theme's stylesheet -- so the component keeps
 * its own sizing on a site that is not running ILM Theme.
 *
 * `margin: 0` -- inherited from `.ilm-component` -- because the space around a
 * heading is its parent's `gap`. A heading that brought its own margin would
 * add to that gap, and would collapse against a sibling's margin in ways that
 * depend on what the sibling is.
 */

.ilm-component--basic-heading {
	font-family: var(--ilm-font-family-heading, inherit);
	font-weight: var(--ilm-font-weight-semibold, 600);
	line-height: var(--ilm-line-height-tight, 1.2);

	/*
	 * A long unbroken word -- a URL, a compound noun in German -- would
	 * otherwise widen the heading past its column and take the layout with it.
	 */
	overflow-wrap: break-word;
}

h1.ilm-component--basic-heading {
	font-size: var(--ilm-font-size-h1, clamp(2rem, 1.55rem + 2.25vw, 2.75rem));
}

h2.ilm-component--basic-heading {
	font-size: var(--ilm-font-size-h2, clamp(1.625rem, 1.35rem + 1.375vw, 2.125rem));
}

h3.ilm-component--basic-heading {
	font-size: var(--ilm-font-size-h3, clamp(1.375rem, 1.24rem + 0.675vw, 1.625rem));
}

h4.ilm-component--basic-heading {
	font-size: var(--ilm-font-size-h4, 1.25rem);
}

h5.ilm-component--basic-heading {
	font-size: var(--ilm-font-size-h5, 1.125rem);
}

h6.ilm-component--basic-heading {
	font-size: var(--ilm-font-size-h6, 1rem);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}