/*
 * Afters -- global base layer.
 *
 * Ships exactly as written: no compiler, no preprocessor, no utility classes.
 * Every value below is a --wp--preset--* / --wp--custom--* property that
 * WordPress generates from theme.json. Never hand-write a hex, a px font size
 * or a raw gap here.
 *
 * Section styling belongs in blocks/{slug}/{slug}.css, declared in that block's
 * block.json so it loads only where the block renders. Keep this file to
 * genuinely global concerns.
 *
 * assets/css/tokens.reference.css documents the generated variable names. It is
 * documentation only and is never enqueued.
 */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-wrap: pretty;
}

/* Headings carry the measured Figma tracking from theme.json; only wrapping is
   decided here. */
:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

:where(img, svg, video, canvas, iframe) {
	max-width: 100%;
}

:where(img, svg, video) {
	height: auto;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--green);
	outline-offset: 2px;
}

::selection {
	background-color: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
}

hr.wp-block-separator {
	border-color: var(--wp--preset--color--haze);
}

/* WordPress markup convention, not a utility class -- core templates and the
   search block emit this exact hook. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =======================================================================
 * Cross-section primitives.
 *
 * These three are used by most of the blocks in blocks/, so they live here
 * rather than being copied into a dozen scoped stylesheets. Anything that
 * belongs to ONE section still belongs in that block's own CSS.
 *
 * Every value is a --wp--preset--* / --wp--custom--* property from
 * theme.json. No literals.
 * ======================================================================= */

/* The 1344px band the 1512px artboards draw, expressed as theme.json's
   wideSize plus the root inline padding -- so blocks never hand-roll a
   max-width. Pair with class="alignfull" on the section itself. */
.afters-shell {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-right, var(--wp--preset--spacing--6));
}

/* Narrow variant -- the 1018/1046px containers on About Us and the Parent Hub. */
.afters-shell--content {
	max-width: var(--wp--style--global--content-size);
}

/* Pill button. theme.json styles.elements.button already paints
   .wp-element-button green on full radius; this carries the larger size the
   marketing sections draw (16px/700 against the element default 14px/600)
   plus the lime variant used on dark ground. */
.afters-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--4);
	padding-inline: var(--wp--preset--spacing--7);
	border: 0;
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	line-height: 1.75;
	text-align: center;
	text-decoration: none;
	transition: opacity 120ms ease-out;
}

.afters-btn:hover,
.afters-btn:focus {
	opacity: 0.9;
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.afters-btn--lime {
	background-color: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
}

.afters-btn--lime:hover,
.afters-btn--lime:focus {
	color: var(--wp--preset--color--ink);
}

.afters-btn--sm {
	padding-block: var(--wp--preset--spacing--2);
	padding-inline: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	line-height: 1.7142;
}

/* Torn-paper photo. The rip is the Figma "Ripped paper" vector shipped as
   assets/images/paper-rip.svg -- one wide strip, slid sideways per instance
   via --afters-paper-shift so no two tears repeat, exactly as the Figma file
   masks it. The frame sits a hair proud of the photo so the light edge reads
   as a torn lip. Both layers are masked; the photo's own edge is ragged too.
   Used by about-intro, region-waves, photo-collage and wristband-cta. */
.afters-paper {
	--afters-paper-shift: 0%;
	--afters-paper-tilt: 0deg;
	display: block;
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--0-5);
	background-color: var(--wp--preset--color--haze);
	rotate: var(--afters-paper-tilt);
	-webkit-mask-image: url("../images/paper-rip.svg");
	mask-image: url("../images/paper-rip.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 320% 100%;
	mask-size: 320% 100%;
	-webkit-mask-position: var(--afters-paper-shift) center;
	mask-position: var(--afters-paper-shift) center;
}

.afters-paper img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-mask-image: url("../images/paper-rip.svg");
	mask-image: url("../images/paper-rip.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 320% 100%;
	mask-size: 320% 100%;
	-webkit-mask-position: var(--afters-paper-shift) center;
	mask-position: var(--afters-paper-shift) center;
}

/* Reduced motion: the tilt is decoration, not information. */
@media (prefers-reduced-motion: reduce) {
	.afters-paper {
		rotate: 0deg;
	}
}

/* Inline headline accent. The Figma headlines recolour a run mid-sentence
   ("a NEW ERA for grad party", "Safe, Licensed & Supervised"), so headline
   fields accept a span carrying this class rather than being one flat string.
   Global because six different blocks draw an accented headline. */
.afters-accent {
	color: var(--wp--preset--color--green);
}

/* Inline glyphs from inc/icons.php size themselves to the text they sit in. */
.afters-icon {
	display: block;
	width: 1em;
	height: auto;
	flex: none;
}