/*
 * PQMD base: accessibility and shared helpers only.
 * Tokens live in theme.json. Component states live in assets/css/components/.
 */

:root {
	/* lucide arrow-right, used as a CSS mask by buttons and arrow links. */
	--pqmd-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Visible focus for every interactive element (WCAG 2.4.7). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy);
	outline-offset: var(--wp--custom--focus--offset);
}

/* On dark grounds the ring switches to yellow. */
:where(
	.has-navy-background-color,
	.has-navy-hover-background-color,
	.has-navy-deep-background-color,
	.has-ink-background-color,
	.has-error-background-color,
	.is-style-panel-glass
) :is(a, button, summary):focus-visible {
	outline-color: var(--wp--preset--color--yellow);
}

/* Header, main and footer sit flush; sections and templates own their spacing. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/*
 * The header is fixed (components/header.css), so the block after it starts below it.
 * A page that opens with a Hero cover (in its content, or first in <main> as in the single
 * post and archive templates) runs the hero up behind the header instead.
 * theme.js replaces the fallback height with the measured one.
 */
:root {
	--pqmd-header-height: var(--wp--custom--header--fallback-height);
}
.wp-site-blocks > header.wp-block-template-part + * {
	margin-block-start: var(--pqmd-header-height);
}
.wp-site-blocks > header.wp-block-template-part + main:is(
	:has(> .wp-block-post-content > :is(.is-style-hero, .is-style-hero-split):first-child),
	:has(> :is(.is-style-hero, .is-style-hero-split):first-child)
) {
	margin-block-start: 0;
}

/*
 * Scroll reveal: add the class `pqmd-reveal` to any block. theme.js adds
 * `is-revealed` when it scrolls into view (staggered via --pqmd-reveal-delay) and
 * `is-settled` once done, which hands `transition` back to the component.
 * Elements only start hidden while <html> has `pqmd-js`.
 */
@media (prefers-reduced-motion: no-preference) {
	.pqmd-js .pqmd-reveal:not(.is-settled) {
		transition:
			opacity var(--wp--custom--motion--enter) var(--wp--custom--motion--ease-entrance) var(--pqmd-reveal-delay, 0ms),
			transform var(--wp--custom--motion--enter) var(--wp--custom--motion--ease-entrance) var(--pqmd-reveal-delay, 0ms);
	}
	.pqmd-js .pqmd-reveal:not(.is-revealed) {
		opacity: 0;
		transform: translateY(var(--pqmd-reveal-shift, var(--wp--custom--motion--reveal-shift))) scale(var(--pqmd-reveal-scale, 1));
	}
}

/* Respect reduced motion (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Screen-reader-only text for pattern use. */
.pqmd-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Prevent horizontal scroll from long words at high zoom (WCAG 1.4.10). */
.entry-content,
.wp-block-post-content {
	overflow-wrap: anywhere;
}

img {
	max-width: 100%;
	height: auto;
}