/**
 * Custom Heading Block Styles.
 *
 * All selectors use :where() to keep specificity at zero, so a user's
 * own block-editor color/typography choices (which apply as inline
 * styles) always win without needing !important anywhere here.
 *
 * Every style exposes its tunable values as CSS custom properties.
 * To customize beyond the block editor's own panel, set the CSS
 * class "Additional CSS Class(es)" field in the block's Advanced
 * panel, then override the relevant --kct-* variable for that class
 * in a Custom CSS field (Customizer > Additional CSS, or a child
 * theme style.css edit).
 */

/* 1. Underline Accent — a short, bold accent-colored underline segment. */
:where(.is-style-underline-accent) {
	--kct-accent: var( --global-palette1, #2563eb );
	--kct-underline-width: 3.5rem;
	--kct-underline-thickness: 0.25em;

	display: inline-block;
	padding-bottom: 0.5em;
	position: relative;
}
:where(.is-style-underline-accent)::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: var( --kct-underline-width );
	height: var( --kct-underline-thickness );
	background: var( --kct-accent );
	border-radius: 999px;
}

/* 2. Highlight Marker — background block behind the text, like a highlighter. */
:where(.is-style-highlight-marker) {
	--kct-highlight: var( --global-palette8, #fef08a );

	display: inline;
	background: var( --kct-highlight );
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	padding: 0.1em 0.35em;
	border-radius: 0.2em;
}

/* 3. Left Border — colored left border with left padding. */
:where(.is-style-left-border) {
	--kct-border-color: var( --global-palette1, #2563eb );
	--kct-border-width: 0.3em;

	border-left: var( --kct-border-width ) solid var( --kct-border-color );
	padding-left: 0.6em;
}

/* 4. Boxed — a full border box around the heading text. */
:where(.is-style-boxed) {
	--kct-box-border-color: var( --global-palette4, #111827 );
	--kct-box-border-width: 0.125em;
	--kct-box-radius: 0.375em;

	display: inline-block;
	border: var( --kct-box-border-width ) solid var( --kct-box-border-color );
	border-radius: var( --kct-box-radius );
	padding: 0.4em 0.9em;
}

/* 5. Numbered — auto-incrementing number prefix, purely via CSS counters.
   No counter-reset needed: CSS auto-initializes an unreset counter at 0
   the first time it's used on a page, so this just works page by page. */
:where(.is-style-numbered) {
	--kct-number-color: var( --global-palette1, #2563eb );

	display: flex;
	align-items: baseline;
	gap: 0.5em;
	counter-increment: kct-heading-counter;
}
:where(.is-style-numbered)::before {
	content: counter( kct-heading-counter, decimal-leading-zero );
	color: var( --kct-number-color );
	font-size: 0.7em;
	font-weight: 700;
	opacity: 0.7;
	flex-shrink: 0;
}

/* 6. Gradient Text — two-tone gradient fill using the site's palette. */
:where(.is-style-gradient-text) {
	--kct-gradient-from: var( --global-palette1, #2563eb );
	--kct-gradient-to: var( --global-palette2, #7c3aed );

	background: linear-gradient( 90deg, var( --kct-gradient-from ), var( --kct-gradient-to ) );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
}

/* 7. Dotted Underline — a friendlier, less formal underline treatment. */
:where(.is-style-dotted-underline) {
	--kct-dot-color: var( --global-palette3, #111827 );

	text-decoration: none;
	border-bottom: 0.2em dotted var( --kct-dot-color );
	padding-bottom: 0.15em;
	display: inline-block;
}

/* 8. Split Line — heading text followed by a rule filling remaining width. */
:where(.is-style-split-line) {
	--kct-line-color: var( --global-palette6, #d1d5db );

	display: flex;
	align-items: center;
	gap: 0.75em;
	width: 100%;
}
:where(.is-style-split-line)::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var( --kct-line-color );
}

/* 9. Pill Badge — small rounded "eyebrow" label, useful above a bigger title. */
:where(.is-style-pill-badge) {
	--kct-pill-bg: var( --global-palette1, #2563eb );
	--kct-pill-text: var( --global-palette9, #ffffff );

	display: inline-block;
	background: var( --kct-pill-bg );
	color: var( --kct-pill-text );
	font-size: 0.75em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.35em 0.9em;
	border-radius: 999px;
}

/* 10. Double Underline — two stacked bars of differing widths beneath the text. */
:where(.is-style-double-underline) {
	--kct-line-1: var( --global-palette1, #2563eb );
	--kct-line-2: var( --global-palette2, #7c3aed );

	display: inline-block;
	padding-bottom: 0.55em;
	position: relative;
}
:where(.is-style-double-underline)::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3rem;
	height: 0.2em;
	background: var( --kct-line-1 );
	border-radius: 999px;
	box-shadow: 0 0.35em 0 -0.05em var( --kct-line-2 );
}