/*
 * Emberloom Arcana Headings — frontend
 *
 * Every declaration reads a `--eah-*` custom property with a shipped
 * fallback, so the stylesheet itself is static: global settings, presets and
 * shortcode attributes set the properties inline on `.eah`, and Elementor's
 * style controls override the properties themselves from a
 * higher-specificity selector.
 *
 * TWO MODES. `.eah--archive` is the term-archive heading; `.eah--page` is the
 * instrument stripe. They share every part — the difference is that a page
 * stripe lays its eyebrow row out as a flex line so the rule can stretch
 * between the name and the live state, and it resets the type scale to the
 * stripe's (11px / 0.3em) rather than the archive's.
 *
 * Page-mode values are set as custom properties on `.eah--page`, not as
 * declarations. A class rule loses to the inline `style` the renderer writes
 * for a setting, a preset or a shortcode attribute, so every page-mode value
 * stays an overridable default rather than something to fight.
 */

.eah {
	display: block;
	max-width: var(--eah-max-width, none);
}

.eah--align-center { text-align: center; margin-inline: auto; }
.eah--align-right  { text-align: right; }

/* ------------------------------------------------------------- eyebrow */

/*
 * Inline-block, not flex: the rule and the eyebrow text then follow whatever
 * `text-align` is in force, so alignment is one mechanism (a single
 * `text-align` declaration) for both the eyebrow and the heading — which is
 * also what lets Elementor's alignment control drive the whole block.
 */
.eah__eyebrow {
	margin: 0 0 var(--eah-gap-eyebrow, 1.5rem);
}

.eah__rule {
	display: inline-block;
	vertical-align: middle;
	width: var(--eah-rule-width, 2.75rem);
	height: var(--eah-rule-thickness, 1px);
	background: var(--eah-rule-color, currentColor);
}

/*
 * The gap belongs to whichever side of the rule the text is on. With the rule
 * leading in it is a right margin; with the rule bridging to the state, the
 * flex row's gap handles it and a margin here would double it.
 */
.eah--rule-before .eah__rule {
	margin-right: var(--eah-rule-gap, 1.25rem);
}

/*
 * Plain inline, not inline-block. An inline-block is an atomic box: it cannot
 * break internally, so as soon as rule + gap + the whole eyebrow no longer fit
 * on one line the text dropped to a line of its own and left the rule stranded
 * above it — which is what happens on a phone with any eyebrow of a realistic
 * length. Inline lets the text wrap between words instead, and the rule keeps
 * its place at the start of the first line however long the text runs.
 */
.eah__eyebrow-text {
	display: inline;
	vertical-align: middle;
	color: var(--eah-eyebrow-color, currentColor);
	font-family: var(--eah-eyebrow-font, inherit);
	font-size: var(--eah-eyebrow-size, 0.75rem);
	font-weight: var(--eah-eyebrow-weight, 600);
	letter-spacing: var(--eah-eyebrow-spacing, 0.18em);
	text-transform: var(--eah-eyebrow-transform, uppercase);
	line-height: 1.2;
}

.eah__lead { color: var(--eah-lead-color, inherit); }
.eah__tail { color: var(--eah-tail-color, inherit); }

.eah__sep {
	margin: 0 var(--eah-separator-space, 0.55em);
	color: var(--eah-separator-color, inherit);
}

/* --------------------------------------------------------------- title */

.eah__title {
	margin: 0;
	text-wrap: balance;
	color: var(--eah-title-color, inherit);
	font-family: var(--eah-title-font, inherit);
	font-size: var(--eah-title-size, clamp(2.75rem, 7vw, 5.5rem));
	font-weight: var(--eah-title-weight, 400);
	letter-spacing: var(--eah-title-spacing, normal);
	line-height: var(--eah-title-line-height, 1.02);
}

.eah__title-main {
	/* Inline, because the <br> after it is what makes the break. A block
	   here would produce a second, uncontrollable line gap. */
	display: inline;
}

/*
 * The subhead lives inside the heading element, so it has to reset every
 * type property the heading sets rather than inherit it.
 */
.eah__title-sub,
.eah__sub-standalone .eah__title-sub {
	/* inline-block, not inline: padding on a purely inline box does not
	   push the surrounding lines apart, so the padding control below would
	   look like it did nothing. */
	display: inline-block;
	margin-top: var(--eah-gap-sub, 1.25rem);
	padding: var(--eah-sub-padding, 0);
	max-width: var(--eah-sub-max-width, 46ch);
	color: var(--eah-sub-color, inherit);
	font-family: var(--eah-sub-font, inherit);
	font-size: var(--eah-sub-size, clamp(1rem, 1.4vw, 1.35rem));
	font-weight: var(--eah-sub-weight, 400);
	letter-spacing: var(--eah-sub-spacing, normal);
	line-height: var(--eah-sub-line-height, 1.5);
	text-transform: none;
	text-wrap: pretty;
}

.eah--align-center .eah__title-sub { margin-inline: auto; }
.eah--align-right .eah__title-sub  { margin-inline-start: auto; }

.eah__sub-standalone {
	margin: 0;
}

/* ---------------------------------------------------------- small screens */

@media (max-width: 782px) {
	.eah__rule {
		width: var(--eah-rule-width, 1.75rem);
		margin-right: var(--eah-rule-gap, 0.85rem);
	}
	.eah__eyebrow-text {
		letter-spacing: var(--eah-eyebrow-spacing, 0.14em);
	}
}

/* ============================================================ stat row */

.eah-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 0;
}

.eah-stats--align-left  { justify-content: flex-start; }
.eah-stats--align-right { justify-content: flex-end; }

.eah-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 0 calc(var(--eah-stats-gap, 2.75rem) / 2);
	text-align: center;
}

/*
 * Half the gap on each item is what puts a whole gap between neighbours, but
 * on the two ends it has nothing to separate — it just insets the row from
 * whatever contains it, and Space Between Stats then moves two things at once:
 * you cannot close the outer inset without also closing up the stats. So the
 * outer edges are dropped. Padding around the row belongs to the container
 * that holds it, which can already be given its own.
 */
.eah-stats__item:first-child { padding-inline-start: 0; }
.eah-stats__item:last-child  { padding-inline-end: 0; }

/*
 * The divider hangs off every item after the first, so it only ever appears
 * *between* stats — however many there are, and however they wrap. A
 * pseudo-element rather than a border, so its height can be set independently
 * of how tall the stat happens to be.
 */
.eah-stats__item + .eah-stats__item {
	position: relative;
}

.eah-stats__item + .eah-stats__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	transform: translateY(-50%);
	width: var(--eah-stats-divider-width, 1px);
	height: var(--eah-stats-divider-height, 100%);
	background: var(--eah-stats-divider-color, currentColor);
	opacity: var(--eah-stats-divider-alpha, 0.35);
}

.eah-stats--no-divider .eah-stats__item + .eah-stats__item::before {
	content: none;
}

.eah-stats__value {
	display: block;
	color: var(--eah-stat-value-color, inherit);
	font-family: var(--eah-stat-value-font, inherit);
	font-size: var(--eah-stat-value-size, clamp(2rem, 3.5vw, 2.75rem));
	font-weight: var(--eah-stat-value-weight, 400);
	letter-spacing: var(--eah-stat-value-spacing, normal);
	line-height: 1.1;
	font-variant-numeric: lining-nums tabular-nums;
}

.eah-stats__label {
	display: block;
	margin-top: var(--eah-stat-label-gap, 0.75rem);
	color: var(--eah-stat-label-color, inherit);
	font-family: var(--eah-stat-label-font, inherit);
	font-size: var(--eah-stat-label-size, 0.75rem);
	font-weight: var(--eah-stat-label-weight, 600);
	letter-spacing: var(--eah-stat-label-spacing, 0.18em);
	text-transform: var(--eah-stat-label-transform, uppercase);
	line-height: 1.2;
}

@media (max-width: 782px) {
	.eah-stats__item {
		padding: 0 calc(var(--eah-stats-gap, 1.5rem) / 2);
	}
}


/* ============================================================ page mode */

/*
 * The instrument stripe:
 *
 *   03 · THE SIGIL PRESS ───────────────── 6 LETTERS REMAINING
 *
 * Flex, not inline like the archive eyebrow, because the rule has to take up
 * exactly the space the two ends leave it. That also means `text-align` no
 * longer positions this row — alignment in page mode is the flex line's job,
 * handled below.
 */

.eah--page {
	/* The stripe's own type scale — see _design-system/emberloom-frontend-type.md. */
	--eah-eyebrow-size: 11px;
	--eah-eyebrow-spacing: 0.3em;
	--eah-state-size: 11px;
	--eah-state-spacing: 0.24em;
	--eah-rule-min-width: 1.25rem;
	--eah-eyebrow-row-gap: 1rem;
	--eah-gap-eyebrow: 2rem;

	/* A page title is set tighter and smaller than an archive's: two short
	   lines rather than one long one. */
	--eah-title-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem);
	--eah-title-line-height: 0.94;
	--eah-title-spacing: -0.03em;

	/* The opening line is body copy, measured for reading. */
	--eah-sub-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
	--eah-sub-line-height: 1.68;
	--eah-sub-max-width: 42ch;
	--eah-gap-sub: 1.5rem;
}

.eah--page .eah__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--eah-eyebrow-row-gap, 1rem);
}

/*
 * `flex: 1` on the rule and `width: auto` to undo the archive's fixed length —
 * without the reset, `flex-basis` would start from 2.75rem and the rule would
 * never shrink below it on a narrow screen.
 */
.eah--page .eah__rule {
	/* Grows to bridge the gap by default. Set a Rule Length and the renderer
	   also prints `--eah-rule-grow: 0`, which stops the bridging and lets the
	   width stand — otherwise `flex-grow` would win and the length would
	   silently do nothing. CSS cannot ask "was this property set?", so the
	   renderer answers it (Renderer::style_attribute). */
	flex: var(--eah-rule-grow, 1) 1 auto;
	width: var(--eah-rule-width, auto);
	min-width: var(--eah-rule-min-width, 1.25rem);
	margin: 0;
}

/* The two ends hold their size; only the rule between them gives. */
.eah--page .eah__eyebrow-text,
.eah--page .eah__state {
	flex: 0 0 auto;
}

/*
 * With a fixed-length rule there is no longer anything stretching to fill the
 * row, so the state would sit straight after the rule instead of closing the
 * line. This margin takes up the slack and keeps it at the far end.
 *
 * It has to stay `0` while the rule is growing: an auto margin absorbs free
 * space *before* `flex-grow` gets any, so leaving it on unconditionally would
 * stop the rule bridging at all — the exact bug in reverse.
 */
.eah--page .eah__state {
	margin-inline-start: var(--eah-state-push, 0);
}

/*
 * Inline-block here, unlike the archive's plain inline: inside a flex line the
 * eyebrow text is a flex item either way, and inline-block keeps
 * `vertical-align` from interfering with the row's own centring.
 */
.eah--page .eah__eyebrow-text {
	display: inline-block;
}

.eah__state {
	color: var(--eah-state-color, inherit);
	font-family: var(--eah-state-font, inherit);
	font-size: var(--eah-state-size, 0.75rem);
	font-weight: var(--eah-state-weight, 600);
	letter-spacing: var(--eah-state-spacing, 0.14em);
	text-transform: var(--eah-state-transform, uppercase);
	line-height: 1.2;
	text-align: end;
	/* The count changes as someone types; tabular figures stop the whole
	   line shifting sideways when 9 becomes 10. */
	font-variant-numeric: tabular-nums;
}

/*
 * A flex row ignores `text-align`, so the alignment modifiers have to move the
 * line itself. Centre and right only make sense for a stripe with no state at
 * the far end — with one, the row already spans the full width.
 */
.eah--page.eah--align-center .eah__eyebrow { justify-content: center; }
.eah--page.eah--align-right .eah__eyebrow  { justify-content: flex-end; }

/* ------------------------------------------------------------------ tones */

/*
 * Colours follow the surrounding section by default, which is what a heading
 * should do. These two are for a stripe that has to state its own: the design
 * puts the Oracle and the Sigil Press on ink and the Reduction on cream.
 */

.eah--tone-dark {
	--eah-eyebrow-color: #C19F6F;
	--eah-state-color: rgba(239, 235, 231, 0.7);
	--eah-rule-color: rgba(239, 235, 231, 0.18);
	--eah-title-color: #EFEBE7;
	--eah-sub-color: rgba(239, 235, 231, 0.78);
}

.eah--tone-light {
	--eah-eyebrow-color: #623F45;
	/* Charcoal rather than the mauve: at 11px the mauve is too light on
	   cream to clear 4.5:1. */
	--eah-state-color: #4A4039;
	--eah-rule-color: #DBD2C9;
	--eah-title-color: #2E2A26;
	--eah-sub-color: #4A4039;
}

/* -------------------------------------------------------- small screens */

/*
 * On a phone the row may wrap, but only when it has to. The state keeps its
 * place at the end of the name's line whenever name + shortest rule + state
 * fit, and drops underneath only when they do not. (It used to take a full
 * row on every phone, so shortening the rule could never bring it back up.)
 *
 * The name may also shrink and wrap between words, so a name longer than
 * the screen wraps instead of running off the edge.
 */
@media (max-width: 560px) {
	.eah--page .eah__eyebrow {
		flex-wrap: wrap;
		row-gap: 0.5rem;
	}
	.eah--page .eah__rule {
		min-width: var(--eah-rule-min-width, 0.75rem);
	}
	.eah--page .eah__eyebrow-text {
		flex-shrink: 1;
		min-width: 0;
	}
}