/**
 * KeliPress — design system components.
 *
 * Only what theme.json cannot express. Every value comes from a design token,
 * and selectors stay at low specificity (:where) so Global Styles and block
 * settings always win.
 */

/* --- Focus ---------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width) solid currentcolor;
	outline-offset: var(--wp--custom--focus--offset);
}

/* --- Buttons: variants, sizes, states --------------------------------------- */

.wp-element-button {
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.wp-block-button.is-style-secondary .wp-block-button__link {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: inherit;
}

.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	padding-inline: 0.5em;
}

.wp-block-button.kp-size-sm .wp-block-button__link {
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.5em 1em;
}

.wp-block-button.kp-size-lg .wp-block-button__link {
	font-size: var(--wp--preset--font-size--lg);
	padding: 0.85em 1.9em;
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--foreground);
	border-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background-color: transparent;
	color: inherit;
	text-decoration: underline;
}

.wp-element-button:disabled,
.wp-element-button[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.5;
}

/* --- Block styles ----------------------------------------------------------- */

.wp-block-group.is-style-card {
	padding: var(--wp--custom--card--padding);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--card--radius);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
}

.wp-block-group.is-style-card-elevated {
	padding: var(--wp--custom--card--padding);
	border-radius: var(--wp--custom--card--radius);
	background-color: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--md);
	color: var(--wp--preset--color--foreground);
}

p.is-style-eyebrow {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--strong);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	text-transform: uppercase;
}

ul.is-style-checklist {
	padding-inline-start: 0;
	list-style: none;
}

ul.is-style-checklist li {
	position: relative;
	padding-inline-start: 1.75em;
}

ul.is-style-checklist li + li {
	margin-block-start: 0.5em;
}

ul.is-style-checklist li::before {
	position: absolute;
	inset-block-start: 0.3em;
	inset-inline-start: 0;
	width: 1.1em;
	height: 1.1em;
	background-color: var(--wp--preset--color--primary);
	content: "";
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
		center / contain no-repeat;
}

/* --- Coloured bands and image covers: text, plain links and accents follow the band's text colour --- */

:where(.has-secondary-background-color, .has-primary-background-color) {
	color: var(--wp--preset--color--contrast);
}

:is(
		.has-secondary-background-color,
		.has-primary-background-color,
		.wp-block-cover
	)
	:where(a:not(.wp-element-button)),
:is(
		.has-secondary-background-color,
		.has-primary-background-color,
		.wp-block-cover
	)
	p.is-style-eyebrow,
:is(
		.has-secondary-background-color,
		.has-primary-background-color,
		.wp-block-cover
	)
	.wp-block-button.is-style-ghost
	.wp-block-button__link {
	color: inherit;
}

:is(
		.has-secondary-background-color,
		.has-primary-background-color,
		.wp-block-cover
	)
	ul.is-style-checklist
	li::before {
	background-color: currentcolor;
}

/* A card inside a band keeps its own colours. */
:is(
		.has-secondary-background-color,
		.has-primary-background-color,
		.wp-block-cover
	)
	:is(.is-style-card, .is-style-card-elevated)
	p.is-style-eyebrow {
	color: var(--wp--preset--color--primary);
}

/* --- Page rhythm ------------------------------------------------------------ */

/* Full-width sections carry their own vertical padding: stacked, they touch. */
:is(.wp-block-post-content, .is-root-container) > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* --- Site chrome ------------------------------------------------------------ */

.kp-site-header {
	border-bottom: 1px solid var(--wp--preset--color--outline);
}

.kp-site-footer {
	border-top: 1px solid var(--wp--preset--color--outline);
}

/* Transparent header: laid over the first block of the page (hero, cover). */
.kp-site-header--overlay {
	position: absolute;
	z-index: 10;
	inset-inline: 0;
	border-bottom: 0;
	color: var(--wp--preset--color--contrast);
}

:where(.wp-site-blocks) > header:has(.kp-site-header--overlay) {
	position: relative;
}

/* --- Disclosure (FAQ) ------------------------------------------------------- */

.wp-block-details summary {
	cursor: pointer;
	font-weight: var(--wp--custom--font-weight--strong);
}

.wp-block-details[open] summary {
	margin-block-end: var(--wp--preset--spacing--xs);
}

/* --- Form controls: theme.json has no input element yet --------------------- */

:where(label) {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--strong);
}

:where(
	input:not(
		[type="submit"],
		[type="button"],
		[type="reset"],
		[type="checkbox"],
		[type="radio"],
		[type="range"],
		[type="file"],
		[type="color"],
		[type="image"]
	),
	select,
	textarea
) {
	box-sizing: border-box;
	max-width: 100%;
	padding: var(--wp--custom--control--padding-block)
		var(--wp--custom--control--padding-inline);
	border: var(--wp--custom--control--border-width) solid
		var(--wp--preset--color--muted-foreground);
	border-radius: var(--wp--custom--control--radius);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	font: inherit;
	line-height: var(--wp--custom--line-height--snug);
}

:where(input, select, textarea):focus-visible {
	border-color: var(--wp--preset--color--primary);
	outline-color: var(--wp--preset--color--primary);
}

:where(input, select, textarea):where([aria-invalid="true"], .is-invalid) {
	border-color: var(--wp--preset--color--error);
}

:where(input[type="checkbox"], input[type="radio"]) {
	width: 1.1em;
	height: 1.1em;
	accent-color: var(--wp--preset--color--primary);
}

:where(input, select, textarea):disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

:where(.kp-field-error) {
	color: var(--wp--preset--color--error);
	font-size: var(--wp--preset--font-size--sm);
}

/* --- Motion ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}