/**
 * Titula - heading treatments, table of contents skins and accent palettes.
 *
 * Every rule here is scoped to .acaart-pad-article and switched on by a class
 * the renderer adds, so a site that changes nothing gets exactly what it got
 * before: no rule in this file applies until a style is chosen.
 *
 * All of it uses logical properties, so each treatment mirrors itself in a
 * right-to-left article without a second set of rules.
 */

/* ==========================================================================
 * Accent palettes
 *
 * "Auto" is absent on purpose: with no palette class the article keeps the
 * colour Titula detected from the theme, which is the right answer for most
 * sites. A named palette is for the case where the theme colour is not the
 * colour the article wants.
 * ========================================================================== */

.acaart-pad-article.acaart-pad-palette-forest {
	--acaart-accent: #2f6b46;
}

.acaart-pad-article.acaart-pad-palette-ocean {
	--acaart-accent: #1c6b8a;
}

.acaart-pad-article.acaart-pad-palette-ink {
	--acaart-accent: #1c2a33;
}

.acaart-pad-article.acaart-pad-palette-vermilion {
	--acaart-accent: #c8452f;
}

.acaart-pad-article.acaart-pad-palette-amber {
	--acaart-accent: #a86a10;
}

.acaart-pad-article.acaart-pad-palette-plum {
	--acaart-accent: #6b3a63;
}

/* ==========================================================================
 * Heading treatments
 *
 * Each is switched on by a class on the article, and each resets whatever the
 * previous treatment drew, so switching between them leaves nothing behind.
 * ========================================================================== */

/* Shared reset: no treatment inherits another's decoration. */
.acaart-pad-article .acaart-pad-heading--plain::before,
.acaart-pad-article .acaart-pad-heading--plain::after {
	content: none;
}

/* --------------------------------------------------------------------------
 * Accent bar - a short coloured bar on the start edge
 * ----------------------------------------------------------------------- */

.acaart-pad-article .acaart-pad-heading--accent {
	position: relative;
	padding-inline-start: 0.85em;
	border-block-end: 0;
}

.acaart-pad-article .acaart-pad-heading--accent::after {
	content: none;
}

.acaart-pad-article .acaart-pad-heading--accent::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.12em;
	inset-block-end: 0.12em;
	inline-size: 4px;
	border-radius: 2px;
	background: var(--acaart-accent);
}

/* --------------------------------------------------------------------------
 * Eyebrow - a short rule above the heading
 *
 * The rule is drawn with a border rather than a background so it inherits the
 * accent colour without a second custom property.
 * ----------------------------------------------------------------------- */

.acaart-pad-article .acaart-pad-heading--eyebrow {
	border-block-end: 0;
	padding-block-start: 0.9em;
}

.acaart-pad-article .acaart-pad-heading--eyebrow::after {
	content: none;
}

.acaart-pad-article .acaart-pad-heading--eyebrow::before {
	content: "";
	display: block;
	inline-size: 2.6em;
	block-size: 3px;
	margin-block-end: 0.55em;
	border-radius: 2px;
	background: var(--acaart-accent);
}

/* --------------------------------------------------------------------------
 * Banner - a soft panel, a rule above, a hairline below
 *
 * The heaviest treatment, and the one that most changes how a page reads. It
 * suits articles with few, well-separated sections; on an article with a
 * heading every two paragraphs it becomes noise, which is why it is not a
 * default.
 * ----------------------------------------------------------------------- */

.acaart-pad-article .acaart-pad-heading--banner {
	position: relative;
	margin-block-start: 2.2em;
	padding-block: 1.35em 1.15em;
	padding-inline: 1.5em;
	border: 1px solid var(--acaart-border);
	border-radius: calc(var(--acaart-radius) * 1.5);
	border-block-end: 1px solid var(--acaart-border);
	overflow: hidden;
	/*
	 * A very quiet wash of the accent, fading out across the panel. The
	 * gradient is the only decoration: no image is loaded and nothing is
	 * drawn that a print stylesheet cannot drop.
	 */
	background:
		linear-gradient(
			115deg,
			color-mix(in srgb, var(--acaart-accent) 7%, transparent) 0%,
			transparent 55%
		),
		var(--acaart-background);
}

.acaart-pad-article .acaart-pad-heading--banner::after {
	content: none;
}

/* The rule above the text, with a dotted tail. */
.acaart-pad-article .acaart-pad-heading--banner::before {
	content: "";
	display: block;
	inline-size: 3.4em;
	block-size: 4px;
	margin-block-end: 0.7em;
	border-radius: 2px;
	background:
		linear-gradient(
			to right,
			var(--acaart-accent) 0 62%,
			transparent 62% 72%,
			var(--acaart-accent) 72% 80%,
			transparent 80% 88%,
			var(--acaart-accent) 88% 100%
		);
}

/*
 * In a right-to-left article the rule reads from the other end, so the
 * gradient is mirrored. `to right` is physical by necessity - gradients have
 * no logical direction - so this is the one place a direction rule is needed.
 */
[dir="rtl"] .acaart-pad-article .acaart-pad-heading--banner::before,
.acaart-pad-article[dir="rtl"] .acaart-pad-heading--banner::before {
	background:
		linear-gradient(
			to left,
			var(--acaart-accent) 0 62%,
			transparent 62% 72%,
			var(--acaart-accent) 72% 80%,
			transparent 80% 88%,
			var(--acaart-accent) 88% 100%
		);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.acaart-pad-article .acaart-pad-heading--banner {
		background: var(--acaart-surface);
	}
}

/* --------------------------------------------------------------------------
 * Numbered - the section number carries the eye
 *
 * This style no longer runs a counter of its own. It did, and the result was
 * two numbers on the same heading once the Numbering setting was also on: one
 * from this style's ::before and one from the dedicated number element.
 *
 * There is now a single numbering mechanism - `.acaart-pad-heading__number` -
 * and this style simply decides how that element looks. Choosing the style
 * turns numbering on for H2 through `numbered_forces_numbers` below, so the
 * style still works on its own without the Numbering setting being touched.
 * ----------------------------------------------------------------------- */

.acaart-pad-article.acaart-pad-headings-numbered {
	counter-reset: acaart-h2;
}

.acaart-pad-article .acaart-pad-heading--numbered {
	display: flex;
	align-items: baseline;
	gap: var(--acaart-space-sm, 0.6em);
	border-block-end: 0;
}

.acaart-pad-article .acaart-pad-heading--numbered::before,
.acaart-pad-article .acaart-pad-heading--numbered::after {
	content: none;
}

/*
 * The style's own presentation of the shared number element: a quiet label
 * that opens the panel rather than a poster headline.
 */
.acaart-pad-article h2.acaart-pad-heading--numbered > .acaart-pad-heading__number {
	display: inline-block;
	flex: 0 0 auto;
	color: var(--acaart-accent);
	font-size: 0.72em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}

.acaart-pad-article h2.acaart-pad-heading--numbered > .acaart-pad-heading__number::after {
	content: counter(acaart-h2, decimal-leading-zero);
}

/* --------------------------------------------------------------------------
 * Ghost numeral - the same number, drawn large and faint behind the text
 *
 * Also no counter of its own, for the same reason. It positions and paints the
 * shared element instead, so Ghost with numbering shows one numeral, not two.
 * ----------------------------------------------------------------------- */

.acaart-pad-article.acaart-pad-headings-ghost {
	counter-reset: acaart-h2;
}

.acaart-pad-article .acaart-pad-heading--ghost {
	position: relative;
	border-block-end: 0;
	padding-block-start: 0.35em;
	isolation: isolate;
}

.acaart-pad-article .acaart-pad-heading--ghost::before,
.acaart-pad-article .acaart-pad-heading--ghost::after {
	content: none;
}

.acaart-pad-article h2.acaart-pad-heading--ghost > .acaart-pad-heading__number {
	display: block;
	position: absolute;
	z-index: -1;
	inset-block-start: -0.28em;
	inset-inline-start: -0.06em;
	margin: 0;
	font-size: 2.6em;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: color-mix(in srgb, var(--acaart-accent) 15%, transparent);
	pointer-events: none;
}

.acaart-pad-article h2.acaart-pad-heading--ghost > .acaart-pad-heading__number::after {
	content: counter(acaart-h2, decimal-leading-zero);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.acaart-pad-article h2.acaart-pad-heading--ghost > .acaart-pad-heading__number {
		color: var(--acaart-border);
	}
}

/*
 * Both styles imply numbering, so the counter advances for them even when the
 * Numbering setting is off - otherwise choosing "Numbered" would produce no
 * number at all until a second setting was found and changed.
 */
.acaart-pad-article.acaart-pad-headings-numbered h2.acaart-pad-heading,
.acaart-pad-article.acaart-pad-headings-ghost h2.acaart-pad-heading {
	counter-increment: acaart-h2;
}

/* ==========================================================================
 * Table of contents skins
 * ========================================================================== */

/* Card - raised off the page. */
.acaart-pad-article .acaart-pad-toc--skin-card {
	border: 0;
	border-radius: calc(var(--acaart-radius) * 1.5);
	background: var(--acaart-background);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* Minimal - rules above and below, nothing else. */
.acaart-pad-article .acaart-pad-toc--skin-minimal {
	padding-inline: 0;
	border: 0;
	border-block: 1px solid var(--acaart-border);
	border-radius: 0;
	background: none;
}

/* Sidebar - a coloured edge down the start side. */
.acaart-pad-article .acaart-pad-toc--skin-sidebar {
	border: 0;
	border-inline-start: 3px solid var(--acaart-accent);
	border-radius: 0;
	background: color-mix(in srgb, var(--acaart-accent) 4%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.acaart-pad-article .acaart-pad-toc--skin-sidebar {
		background: var(--acaart-surface);
	}
}

/* Numbered - circled numbers in place of the plain ones. */
.acaart-pad-article .acaart-pad-toc--skin-numbered .acaart-pad-toc__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.75em;
	block-size: 1.75em;
	margin-inline-end: 0.55em;
	border-radius: 50%;
	background: color-mix(in srgb, var(--acaart-accent) 12%, transparent);
	color: var(--acaart-accent);
	font-size: 0.78em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.acaart-pad-article .acaart-pad-toc--skin-numbered .acaart-pad-toc__number {
		background: var(--acaart-surface);
	}
}

/*
 * Compact - two columns where there is room.
 *
 * Columns are only worth it when the list is long enough to be awkward as one
 * column, and only on a screen wide enough that two columns are not two narrow
 * ones. Below that it stays single-column.
 */
@media (min-width: 700px) {
	.acaart-pad-article .acaart-pad-toc--skin-compact .acaart-pad-toc__list {
		columns: 2;
		column-gap: 2.2em;
	}

	.acaart-pad-article .acaart-pad-toc--skin-compact .acaart-pad-toc__item {
		/* Stops an entry splitting across the column break mid-line. */
		break-inside: avoid;
	}

	/*
	 * Nested lists are left in one column: a sub-item separated from its
	 * parent by a column break loses the relationship it exists to show.
	 */
	.acaart-pad-article .acaart-pad-toc--skin-compact .acaart-pad-toc__list .acaart-pad-toc__list {
		columns: 1;
	}
}

/* ==========================================================================
 * Print
 *
 * Decorative panels and shadows are dropped: they cost ink and add nothing on
 * paper, where the heading's position already separates it from the text.
 * ========================================================================== */

@media print {
	.acaart-pad-article .acaart-pad-heading--banner {
		padding: 0;
		border: 0;
		background: none;
	}

	.acaart-pad-article .acaart-pad-toc--skin-card {
		box-shadow: none;
		border: 1px solid #ccc;
	}
}

/* --------------------------------------------------------------------------
 * Tinted band - the heading inside a soft panel with an accent edge
 * ----------------------------------------------------------------------- */

.acaart-pad-article .acaart-pad-heading--band {
	padding-block: 0.6em;
	padding-inline: 0.85em;
	border-block-end: 0;
	border-inline-start: 3px solid var(--acaart-accent);
	background: color-mix(in srgb, var(--acaart-accent) 8%, transparent);
	/* A single-sided border must not meet a rounded corner. */
	border-radius: 0;
}

.acaart-pad-article .acaart-pad-heading--band::after,
.acaart-pad-article .acaart-pad-heading--band::before {
	content: none;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.acaart-pad-article .acaart-pad-heading--band {
		background: var(--acaart-surface);
	}
}

/* --------------------------------------------------------------------------
 * Legend - the heading breaking a hairline rule
 *
 * A print convention: the rule runs the width of the column and the heading
 * sits on it, masking the part it covers. The mask is the article background,
 * so this is the one treatment that needs the background to be opaque - on a
 * patterned background the rule would show through the text.
 * ----------------------------------------------------------------------- */

.acaart-pad-article .acaart-pad-heading--legend {
	position: relative;
	border-block-end: 0;
	padding-block-start: 0.4em;
}

.acaart-pad-article .acaart-pad-heading--legend::after {
	content: none;
}

.acaart-pad-article .acaart-pad-heading--legend::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-inline: 0;
	inset-block-start: 50%;
	block-size: 1px;
	background: var(--acaart-border);
}

.acaart-pad-article .acaart-pad-heading--legend > span,
.acaart-pad-article .acaart-pad-heading--legend {
	isolation: isolate;
}

/*
 * The heading text carries the mask. `box-decoration-break` keeps the mask
 * unbroken when the heading wraps to a second line, which is what stops a
 * two-line legend heading from showing a rule through its own text.
 */
.acaart-pad-article .acaart-pad-heading--legend {
	background: var(--acaart-background);
	box-shadow: 0 0 0 0.55em var(--acaart-background);
	inline-size: fit-content;
	max-inline-size: 100%;
	padding-inline-end: 0.75em;
}

/* --------------------------------------------------------------------------
 * Marker - a highlighter stroke behind the text
 *
 * Best on short headings. The stroke is drawn as a gradient behind the text
 * rather than a background on the block, so it follows the words instead of
 * filling the column; `box-decoration-break: clone` keeps it continuous when
 * a heading wraps, though a long wrapped heading still reads better in
 * another treatment.
 * ----------------------------------------------------------------------- */

.acaart-pad-article .acaart-pad-heading--marker {
	border-block-end: 0;
	inline-size: fit-content;
	max-inline-size: 100%;
	padding-inline: 0.18em;
	background-image: linear-gradient(
		to top,
		color-mix(in srgb, var(--acaart-accent) 30%, transparent) 0 42%,
		transparent 42%
	);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.acaart-pad-article .acaart-pad-heading--marker::after,
.acaart-pad-article .acaart-pad-heading--marker::before {
	content: none;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.acaart-pad-article .acaart-pad-heading--marker {
		background-image: none;
		border-block-end: 4px solid var(--acaart-border);
	}
}

@media print {
	.acaart-pad-article .acaart-pad-heading--band,
	.acaart-pad-article .acaart-pad-heading--marker {
		padding: 0;
		border-inline-start: 0;
		background: none;
	}

	.acaart-pad-article h2.acaart-pad-heading--ghost::before {
		content: none;
	}

	.acaart-pad-article .acaart-pad-heading--legend {
		box-shadow: none;
	}
}

/* ==========================================================================
 * Hierarchy
 *
 * H2, H3 and H4 do different jobs, and giving all three the same decoration
 * at three sizes is what makes an article read as a flat list. These rules
 * let a heading family set each level independently.
 *
 * Everything below adjusts a variable rather than restating a treatment, so
 * the ten heading styles above are unaffected by adding an eleventh, and a
 * combination of settings costs no extra CSS.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * Weight
 *
 * "Theme default" writes nothing at all, so the theme's own heading weight
 * survives. Only an explicit choice overrides it.
 * ----------------------------------------------------------------------- */

.acaart-pad-article.has-heading-weight-medium :is(h2, h3, h4).acaart-pad-heading {
	font-weight: 600;
}

.acaart-pad-article.has-heading-weight-strong :is(h2, h3, h4).acaart-pad-heading {
	font-weight: 750;
}

/* --------------------------------------------------------------------------
 * Accent strength
 *
 * Adjusts the mix, not the colour, so a custom palette carries through.
 * ----------------------------------------------------------------------- */

.acaart-pad-article.has-heading-accent-subtle {
	--acaart-accent-soft: color-mix(in srgb, var(--acaart-accent) 6%, transparent);
	--acaart-decor-weight: 2px;
}

.acaart-pad-article.has-heading-accent-normal {
	--acaart-decor-weight: 3px;
}

.acaart-pad-article.has-heading-accent-strong {
	--acaart-accent-soft: color-mix(in srgb, var(--acaart-accent) 16%, transparent);
	--acaart-decor-weight: 4px;
}

/* --------------------------------------------------------------------------
 * Decoration width
 *
 * Applies to the treatments that draw a rule. `max-inline-size` rather than a
 * fixed width, so a short heading never carries a rule wider than itself.
 * ----------------------------------------------------------------------- */

.acaart-pad-article.has-heading-decor-short {
	--acaart-decor-width: 2.6em;
}

.acaart-pad-article.has-heading-decor-medium {
	--acaart-decor-width: 5em;
}

.acaart-pad-article.has-heading-decor-full {
	--acaart-decor-width: 100%;
}

.acaart-pad-article .acaart-pad-heading--eyebrow::before,
.acaart-pad-article .acaart-pad-heading--banner::before {
	inline-size: var(--acaart-decor-width, 2.6em);
	max-inline-size: 100%;
	block-size: var(--acaart-decor-weight, 3px);
}

/* --------------------------------------------------------------------------
 * Alignment
 *
 * Logical, so Start is the right edge in a right-to-left article without a
 * second rule. Centre deliberately also centres the decoration, which would
 * otherwise sit against one edge under centred text.
 * ----------------------------------------------------------------------- */

.acaart-pad-article.has-heading-align-start :is(h2, h3, h4).acaart-pad-heading {
	text-align: start;
}

.acaart-pad-article.has-heading-align-center :is(h2, h3, h4).acaart-pad-heading {
	text-align: center;
}

.acaart-pad-article.has-heading-align-center .acaart-pad-heading::before {
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
 * H3 and H4 treatment
 *
 * "Follow" writes nothing: the level keeps whatever the chosen style gives it.
 * Minimal reduces it to a quiet accent, Plain strips decoration entirely while
 * leaving the theme's own size and weight alone.
 * ----------------------------------------------------------------------- */

.acaart-pad-article.has-heading-h3-minimal h3.acaart-pad-heading,
.acaart-pad-article.has-heading-h4-minimal h4.acaart-pad-heading {
	padding-inline-start: 0.6em;
	border-inline-start: 2px solid var(--acaart-accent-soft);
	border-block-end: 0;
	background: none;
}

.acaart-pad-article.has-heading-h3-minimal h3.acaart-pad-heading::before,
.acaart-pad-article.has-heading-h3-minimal h3.acaart-pad-heading::after,
.acaart-pad-article.has-heading-h4-minimal h4.acaart-pad-heading::before,
.acaart-pad-article.has-heading-h4-minimal h4.acaart-pad-heading::after {
	content: none;
}

.acaart-pad-article.has-heading-h3-plain h3.acaart-pad-heading,
.acaart-pad-article.has-heading-h4-plain h4.acaart-pad-heading {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	inline-size: auto;
}

.acaart-pad-article.has-heading-h3-plain h3.acaart-pad-heading::before,
.acaart-pad-article.has-heading-h3-plain h3.acaart-pad-heading::after,
.acaart-pad-article.has-heading-h4-plain h4.acaart-pad-heading::before,
.acaart-pad-article.has-heading-h4-plain h4.acaart-pad-heading::after {
	content: none;
}

/* --------------------------------------------------------------------------
 * Numbering
 *
 * Independent of the Numbered style, so any treatment can carry numbers. The
 * counter is reset on the article and the number is a pseudo-element, so a
 * screen reader announces the heading text alone.
 *
 * H3 numbering nests under its H2 rather than running its own sequence, which
 * is the only numbering a reader can follow.
 * ----------------------------------------------------------------------- */

.acaart-pad-article.has-heading-numbering-h2,
.acaart-pad-article.has-heading-numbering-h2h3 {
	counter-reset: acaart-h2;
}

.acaart-pad-article.has-heading-numbering-h2 h2.acaart-pad-heading::after,
.acaart-pad-article.has-heading-numbering-h2h3 h2.acaart-pad-heading::after {
	content: none;
}

.acaart-pad-article.has-heading-numbering-h2 h2.acaart-pad-heading,
.acaart-pad-article.has-heading-numbering-h2h3 h2.acaart-pad-heading {
	counter-increment: acaart-h2;
	counter-reset: acaart-h3;
}

/*
 * Numbering renders into its own element.
 *
 * Nine of the ten treatments use the heading's ::before for decoration, so
 * numbering cannot share it: whichever rule won, the other feature vanished.
 * The span is inserted during processing, is empty unless numbering is on, and
 * is aria-hidden so a screen reader announces the heading text alone.
 *
 * `inline-block` keeps the number on the first line while allowing a long
 * heading to wrap underneath it rather than beside it.
 */
.acaart-pad-article .acaart-pad-heading__number {
	display: none;
}

.acaart-pad-article.has-heading-numbering-h2 h2.acaart-pad-heading > .acaart-pad-heading__number,
.acaart-pad-article.has-heading-numbering-h2h3 h2.acaart-pad-heading > .acaart-pad-heading__number {
	display: inline-block;
	margin-inline-end: 0.35em;
	color: var(--acaart-accent);
	font-variant-numeric: tabular-nums;
}

.acaart-pad-article.has-heading-numbering-h2 h2.acaart-pad-heading > .acaart-pad-heading__number::after,
.acaart-pad-article.has-heading-numbering-h2h3 h2.acaart-pad-heading > .acaart-pad-heading__number::after {
	content: counter(acaart-h2) ".";
}

.acaart-pad-article.has-heading-numbering-h2h3 h3.acaart-pad-heading {
	counter-increment: acaart-h3;
}

.acaart-pad-article.has-heading-numbering-h2h3 h3.acaart-pad-heading > .acaart-pad-heading__number {
	display: inline-block;
	margin-inline-end: 0.35em;
	color: var(--acaart-accent);
	font-variant-numeric: tabular-nums;
}

.acaart-pad-article.has-heading-numbering-h2h3 h3.acaart-pad-heading > .acaart-pad-heading__number::after {
	content: counter(acaart-h2) "." counter(acaart-h3);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.acaart-pad-article.has-heading-accent-subtle,
	.acaart-pad-article.has-heading-accent-strong {
		--acaart-accent-soft: rgba(0, 0, 0, 0.06);
	}
}

/* ==========================================================================
 * Additional heading treatments
 *
 * Each is a genuinely different editorial idea rather than a variation on an
 * existing one. All follow the same constraints: no fixed height, no clipping,
 * logical properties throughout, decoration drawn with borders and backgrounds
 * rather than images, and typography inherited from the theme.
 *
 * None of them uses the heading's own ::before for text, so numbering - which
 * lives in its own element - composes with every one of them.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * Editorial - a hairline above, and room to breathe
 *
 * The quietest of the six. The space does the separating and the rule only
 * confirms it, which is how a printed page marks a new section.
 * ----------------------------------------------------------------------- */

.acaart-pad-article .acaart-pad-heading--editorial {
	margin-block-start: var(--acaart-space-xl, 2.4em);
	padding-block-start: var(--acaart-space-md, 1em);
	border-block-start: 1px solid var(--acaart-border);
	border-block-end: 0;
}

.acaart-pad-article .acaart-pad-heading--editorial::before,
.acaart-pad-article .acaart-pad-heading--editorial::after {
	content: none;
}

/* --------------------------------------------------------------------------
 * Corner - a bracket at the opening corner
 *
 * Two borders on a pseudo-element rather than a drawn shape, so it costs
 * nothing and mirrors itself: `inset-inline-start` puts the bracket at the
 * right in an RTL article, where the text begins.
 * ----------------------------------------------------------------------- */

.acaart-pad-article .acaart-pad-heading--corner {
	position: relative;
	padding-block-start: var(--acaart-space-sm, 0.6em);
	padding-inline-start: var(--acaart-space-sm, 0.6em);
	border-block-end: 0;
}

.acaart-pad-article .acaart-pad-heading--corner::after {
	content: none;
}

.acaart-pad-article .acaart-pad-heading--corner::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 0.7em;
	block-size: 0.7em;
	border-block-start: var(--acaart-decor-weight, 3px) solid var(--acaart-accent);
	border-inline-start: var(--acaart-decor-weight, 3px) solid var(--acaart-accent);
}

/* --------------------------------------------------------------------------
 * Divider - a full rule above
 *
 * The rule spans the column, so it reads as the end of what came before as
 * much as the start of what follows. Uses the decoration weight but ignores
 * the decoration width, because a partial divider is an eyebrow.
 * ----------------------------------------------------------------------- */

.acaart-pad-article .acaart-pad-heading--divider {
	margin-block-start: var(--acaart-space-lg, 1.6em);
	padding-block-start: var(--acaart-space-md, 1em);
	border-block-start: var(--acaart-decor-weight, 3px) solid var(--acaart-accent);
	border-block-end: 0;
}

.acaart-pad-article .acaart-pad-heading--divider::before,
.acaart-pad-article .acaart-pad-heading--divider::after {
	content: none;
}

/* --------------------------------------------------------------------------
 * Section tab - the heading on a tinted tab
 *
 * `fit-content` keeps the tab the width of its text and `max-inline-size`
 * stops a long heading from overflowing the column; the tab then wraps to two
 * lines rather than being clipped.
 * ----------------------------------------------------------------------- */

.acaart-pad-article .acaart-pad-heading--tab {
	display: block;
	inline-size: fit-content;
	max-inline-size: 100%;
	padding-block: var(--acaart-space-xs, 0.35em);
	padding-inline: var(--acaart-space-sm, 0.6em);
	border-block-end: 0;
	border-start-start-radius: var(--acaart-radius-md, 6px);
	border-start-end-radius: var(--acaart-radius-md, 6px);
	background: var(--acaart-accent-soft);
	box-shadow: inset 0 calc(-1 * var(--acaart-decor-weight, 3px)) 0 0 var(--acaart-accent);
}

.acaart-pad-article .acaart-pad-heading--tab::before,
.acaart-pad-article .acaart-pad-heading--tab::after {
	content: none;
}

/* --------------------------------------------------------------------------
 * Index chip - a small label above the heading
 *
 * The chip is decoration and carries no text of its own, so it stays out of
 * the accessibility tree and out of the way of numbering.
 * ----------------------------------------------------------------------- */

.acaart-pad-article .acaart-pad-heading--chip {
	border-block-end: 0;
}

.acaart-pad-article .acaart-pad-heading--chip::after {
	content: none;
}

.acaart-pad-article .acaart-pad-heading--chip::before {
	content: "";
	display: block;
	inline-size: var(--acaart-decor-width, 2.6em);
	max-inline-size: 100%;
	block-size: 0.5em;
	margin-block-end: var(--acaart-space-sm, 0.6em);
	border-radius: 999px;
	background: var(--acaart-accent);
}

/* --------------------------------------------------------------------------
 * Underline - a thick rule under the text only
 *
 * `fit-content` is what makes the rule follow the words rather than the
 * column. A heading that wraps carries the rule under its last line, which is
 * the accepted behaviour of this treatment in print.
 * ----------------------------------------------------------------------- */

.acaart-pad-article .acaart-pad-heading--underline {
	display: block;
	inline-size: fit-content;
	max-inline-size: 100%;
	padding-block-end: var(--acaart-space-xs, 0.35em);
	border-block-end: calc(var(--acaart-decor-weight, 3px) + 1px) solid var(--acaart-accent-soft);
}

.acaart-pad-article .acaart-pad-heading--underline::before,
.acaart-pad-article .acaart-pad-heading--underline::after {
	content: none;
}

/*
 * A heading carrying a number must not have the number sit outside a
 * fit-content box, so those treatments relax back to full width when numbering
 * is on and keep their decoration through the border instead.
 */
.acaart-pad-article.has-heading-numbering-h2 .acaart-pad-heading--underline,
.acaart-pad-article.has-heading-numbering-h2h3 .acaart-pad-heading--underline,
.acaart-pad-article.has-heading-numbering-h2 .acaart-pad-heading--tab,
.acaart-pad-article.has-heading-numbering-h2h3 .acaart-pad-heading--tab {
	inline-size: auto;
}

/* --------------------------------------------------------------------------
 * Minimal - the supporting treatment
 *
 * Applied to H3 or H4 when their setting asks for it, and used by "follow" as
 * the lighter relative of several H2 treatments. A quiet accent edge: enough
 * to mark a subsection, not enough to compete with the section above it.
 * ----------------------------------------------------------------------- */

.acaart-pad-article .acaart-pad-heading--minimal {
	padding-inline-start: var(--acaart-space-sm, 0.6em);
	border-inline-start: 2px solid var(--acaart-accent-soft);
	border-block-end: 0;
	background: none;
}

.acaart-pad-article .acaart-pad-heading--minimal::before,
.acaart-pad-article .acaart-pad-heading--minimal::after {
	content: none;
}

/* --------------------------------------------------------------------------
 * Heading spacing
 *
 * Applied to the levels the plugin styles, using the token scale so the three
 * options stay in proportion to each other and to the article's own text size.
 * ----------------------------------------------------------------------- */

.acaart-pad-article.has-heading-spacing-compact :is(h2, h3, h4).acaart-pad-heading {
	margin-block-start: var(--acaart-space-md, 1em);
	margin-block-end: var(--acaart-space-xs, 0.35em);
}

.acaart-pad-article.has-heading-spacing-spacious :is(h2, h3, h4).acaart-pad-heading {
	margin-block-start: var(--acaart-space-xl, 2.4em);
	margin-block-end: var(--acaart-space-md, 1em);
}

/* --------------------------------------------------------------------------
 * Classic - a rule beneath the heading
 *
 * The default treatment, and the one every other rule assumes it is replacing.
 * It had no declaration of its own: the picker offered it, the setting stored
 * it, and it rendered identically to Plain because nothing drew the rule its
 * own description promised.
 * ----------------------------------------------------------------------- */

.acaart-pad-article .acaart-pad-heading--classic {
	padding-block-end: var(--acaart-space-xs, 0.35em);
	border-block-end: 1px solid var(--acaart-border);
}

.acaart-pad-article .acaart-pad-heading--classic::before,
.acaart-pad-article .acaart-pad-heading--classic::after {
	content: none;
}

/*
 * H3 and H4 inheriting Classic through "follow" get a lighter rule: the same
 * line at full strength under every subsection turns the page into a ledger.
 */
.acaart-pad-article h3.acaart-pad-heading--classic,
.acaart-pad-article h4.acaart-pad-heading--classic {
	border-block-end-color: var(--acaart-accent-soft);
}