/**
 * CHASMG base styles: only what theme.json cannot express.
 */

/*
 * Site gutter (Figma: "Section Height & Responsive Behaviour").
 * Applied as root padding via theme.json; content caps at wideSize (1350px).
 *
 *   < 768px      20px   (375 → fluid 335)
 *   768–1279px   24px   (768 → fluid 720)
 *   ≥ 1280px     32px   (1280 → fluid 1216; from ~1414px the 1350 cap takes
 *                        over and side margins grow: 45px @1440, 125 @1600, 285 @1920)
 */
:root {
	--chasmg-gutter: 20px;
}

@media (min-width: 768px) {
	:root {
		--chasmg-gutter: 24px;
	}
}

@media (min-width: 1280px) {
	:root {
		--chasmg-gutter: 32px;
	}
}

/* Visible keyboard focus everywhere (WCAG 2.2: 2.4.7, 2.4.11). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/*
 * Page sections (.chasmg-section, set by the section patterns) run edge to
 * edge with no gap between them: each one carries its own top/bottom padding.
 * Without this, WordPress's default block gap leaves a transparent strip
 * between sections — which shows the pinned hero through during the
 * slide-over.
 */
.chasmg-section,
.chasmg-section + * {
	margin-block-start: 0;
}

.chasmg-section {
	margin-block-end: 0;
}

/* Visually hidden, still read by screen readers (safety net if core's copy isn't loaded). */
.screen-reader-text:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Anchor jumps land below the sticky header. */
html {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--chasmg-header-h, var(--wp--custom--header--height)) + 1rem);
}

/*
 * Full-width sections sit flush against each other: each one carries its own
 * padding, and the default block gap between them would let the pinned hero
 * show through while later sections scroll over it.
 */
:where(.wp-block-post-content, .wp-site-blocks, .is-root-container) > :where(.alignfull, .wp-block-chasmg-hero) + .alignfull {
	margin-block-start: 0;
}

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

/*
 * Reduced motion. Animations in the theme and custom blocks use
 * --wp--custom--motion--duration; this rule is the global safety net.
 */
@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;
	}
}