/**
 * 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;
}

/* Sticky brand header. theme.json owns its colors/spacing; this is behavior + chrome.
   No bottom border — the hero sits flush against the navbar. */
.wp-block-group.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Header logo: constrain by height, let width follow the stacked lockup.
   Tapers on small screens so the sticky header stays sane; bump the clamp max
   to scale it up/down. */
.site-logo-img img {
	display: block;
	height: clamp(104px, 10vw, 160px);
	width: auto;
}

/* Footer disclaimer: a small bordered box that hugs its text, centered. */
.site-footer .footer-disclaimer {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

/* Footer links: no underline (the color shift on hover is the affordance). */
.site-footer a:where(:not(.wp-element-button)) {
	text-decoration: none;
}

/* About media-text: drop core's 8% content inset so the copy lines up with the
   page title, and use a real column gap for separation from the image. */
.pa-about-media {
	column-gap: var(--wp--preset--spacing--60);
}
.pa-about-media > .wp-block-media-text__content {
	padding: 0;
}

/* Desktop nav: explicit horizontal space between top-level items. Set here (not
   just via the block's blockGap) so it holds even if the header part is overridden
   in the Site Editor. Scoped above the 600px nav breakpoint; mobile is handled below. */
@media (min-width: 600px) {
	.site-header .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--50);
	}

	/* Horizontal padding on each top-level item, on top of the gap above, to
	   space the nav links out further. Bump spacing|30 to widen/narrow. */
	.site-header .wp-block-navigation-item__content {
		padding-inline: var(--wp--preset--spacing--30);
	}
}

/* Primary nav links lighten to the primary blue on hover/focus (works on the
   white bar and inside the navy mobile overlay alike). */
.site-header .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--primary) !important;
}

/* Mobile menu overlay: navy panel with centered links and a centered white
   logo at the top. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--large);
	text-align: center;
}

/* Center the link list inside the open overlay. The block's justifyContent:"right"
   right-aligns the __container (the <ul>); in the column-direction overlay we override
   it back to center so the links sit under the logo. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	justify-content: center;
	align-items: center;
}

/* Centered white logo atop the open overlay (the navy bg suits the white mark).
   Path is relative to this stylesheet (assets/css/ → assets/images/). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: "";
	display: block;
	width: clamp(120px, 40vw, 180px);
	aspect-ratio: 3 / 2;
	margin: 0 auto var(--wp--preset--spacing--40);
	background: url("../images/pa-alliance-action-logo-white.png") center / contain no-repeat;
}

/* Mobile (below the 600px nav breakpoint): keep the hamburger toggle pinned to
   the right edge, after the Donate button. */
@media (max-width: 599px) {
	.site-header .wp-block-navigation {
		order: 2;
	}

	/* The block's justifyContent:"right" sets these custom props to flex-end, and
	   core's layout CSS consumes them to right-align the items — so overriding
	   justify-content/align-items alone won't win. Reset the vars to center for the
	   overlay; desktop (≥600px) keeps right alignment. */
	.site-header .wp-block-navigation.items-justified-right {
		--navigation-layout-justification-setting: center;
		--navigation-layout-justify: center;
	}

	/* Footer: the columns stack on mobile, so center their content (logo, the
	   Explore/Get involved headings + lists, and the Donate button) for a tidy
	   single-column lockup. The disclaimer + copyright are already centered. */
	.site-footer .wp-block-columns {
		text-align: center;
	}

	.site-footer .footer-logo {
		margin-inline: auto;
		width: fit-content;
	}

	.site-footer .wp-block-buttons {
		justify-content: center;
	}
}

/* Anchored sections clear the sticky header when linked to (#mission, #donate…). */
section[id] {
	scroll-margin-top: 96px;
}

/* 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;
	}
}