/**
 * Base — Starter: front-end base styles.
 *
 * theme.json owns the design system. Keep this file for rules theme.json
 * cannot express: accessibility affordances, focus states, motion preferences.
 * Reference theme.json tokens via CSS custom properties
 * (e.g. var(--wp--preset--color--primary)).
 */

/* Visible keyboard focus everywhere, using the theme's primary color. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #2563eb);
	outline-offset: 2px;
}

/* Screen-reader-only text, visible when focused (skip links, hidden headings). */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base, #ffffff);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--contrast, #111111);
	display: block;
	font-size: 1rem;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Smooth in-page jumps (disabled under reduced-motion below). */
html {
	scroll-behavior: smooth;
}

/* Give anchor targets breathing room when linked to — and clearance for a
   sticky header if a site adds one. Low specificity (:where) so it's easy to
   override or retune per project. */
:where([id]) {
	scroll-margin-top: var(--wp--preset--spacing--50, 1.5rem);
}

/* WCAG 2.5.8 (target size, AA): core/social-links renders compact icon anchors
   (~16px) that fall below the 24px minimum. Pad the clickable anchor so the
   target is conformant at any icon size, wherever social links appear. */
.wp-block-social-links .wp-block-social-link-anchor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
}

/* Respect reduced-motion preferences globally. */
@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;
	}
}

/* Header nav links: uppercase, bold, no resting underline (client request).
   The underline returns on hover/focus so the links still read as
   interactive. */
.site-header .wp-block-base-navbar .wp-block-navigation-item__content {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
}

/* Dark blue in the inline bar only (≥600px, the navbar breakpoint; ~6.2:1 on
   the base header). Below it the links live in the dark mobile overlay, which
   keeps its own light text. The `> a` selector outranks the navbar's
   `color: inherit` rule. */
@media (min-width: 600px) {

	.site-header .wp-block-base-navbar .wp-block-navigation-item > a.wp-block-navigation-item__content {
		color: var(--wp--preset--color--primary);
	}
}

/* Mobile nav overlay: dark blue instead of the navbar's default near-black
   (client request). Its base (white) text is ~6.2:1 on primary, and the
   overlay logo is already filtered to white. */
.site-header .wp-block-base-navbar {
	--base-navbar-overlay-bg: var(--wp--preset--color--primary);
}

/* Centre the stacked overlay links. Scoped below the navbar breakpoint so
   the inline desktop bar keeps its right-aligned layout. */
@media (max-width: 599px) {

	.site-header .wp-block-base-navbar__overlay .wp-block-base-navbar__menu {
		align-items: center;
		text-align: center;
	}
}

/* Header Donate button: uppercase to match the nav. */
.site-header .wp-block-button__link {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.site-header .wp-block-base-navbar .wp-block-navigation-item__content:hover,
.site-header .wp-block-base-navbar .wp-block-navigation-item__content:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Mobile header: logo on the left; navbar toggle + Donate on the right, all on
   ONE row. Stacking Donate under the logo read as broken (client feedback,
   2026-11-09). Below the navbar breakpoint (600px, matching blocks/src/navbar)
   the header's spacing|70 side padding and the 200px logo don't fit beside the
   toggle and button at 320–414px, so both shrink. `!important` on padding
   outranks the part's inline padding style. */
@media (max-width: 599px) {

	.site-header {
		padding-left: var(--wp--preset--spacing--30, 1rem) !important;
		padding-right: var(--wp--preset--spacing--30, 1rem) !important;
	}

	.site-header > .wp-block-group.is-layout-flex {
		flex-wrap: nowrap;
		column-gap: var(--wp--preset--spacing--20, 0.75rem);
	}

	.site-header .wp-block-site-logo img {
		width: 130px;
		height: auto;
	}

	.site-header .wp-block-group.is-layout-flex {
		column-gap: var(--wp--preset--spacing--20, 0.75rem);
	}
}

/* Hero cover columns: stack earlier than core does. core/columns stays side by
   side until 781px, but a hero Cover pairs a photo column with a signup-form
   column — at tablet widths the form stays tall while the photo is squeezed to
   a thumbnail. Below 992px give each column the full width instead. The
   `!important`s mirror core's own stacking rule: `flex-basis` is an inline
   style on each column, and core pins `flex-wrap: nowrap !important` above
   781px, so both have to be outranked. Scoped to Covers so ordinary in-content
   columns keep core's breakpoint. */
@media (max-width: 992px) {

	.wp-block-cover .wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;

		/* The hero sets blockGap on the `left` axis only, so stacked columns
		   would meet with no row gap at all. */
		row-gap: var(--wp--preset--spacing--50, 2rem);
	}

	.wp-block-cover .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}