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

/* Header: compact Join the Team / Inauguration CTAs + uppercase nav links without underlines. */
.site-header .header-cta .wp-block-button__link {
	padding: 0.5em 1.1em;
	font-size: var(--wp--preset--font-size--medium);
}

.site-header .wp-block-base-navbar a,
.site-footer nav a {
	text-decoration: none;
}

.site-header .wp-block-base-navbar a:hover,
.site-footer nav a:hover {
	text-decoration: underline;
}

.site-header .wp-block-base-navbar {
	font-family: var(--wp--preset--font-family--acumin-pro-semi-condensed);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Match the navbar's desktop rule specificity (3 classes) so this gap wins.
   Explicit value: the spacing presets resolve smaller than intended here. */
.site-header .wp-block-base-navbar .wp-block-base-navbar__overlay .wp-block-base-navbar__menu {
	gap: 2.25rem;
}

/* Header logo: stacked "Governor-elect / Ford" mark (~1.6:1); sized so the
   header stays the height it had with the old wide wordmark. */
.site-header .wp-block-site-logo img {
	width: clamp(80px, 10vw, 130px);
	height: auto;
}

/* Header CTAs: separation from the nav links. Join the Team is the outlined
   secondary action, Inauguration the solid red primary one. */
.site-header .header-ctas {
	margin-left: 1.5rem;
}

.site-header .header-apply .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--base);
}

.site-header .header-apply .wp-block-button__link:hover,
.site-header .header-apply .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Phones: the navbar collapses to its overlay; tighten both CTAs so logo,
   Join the Team, Inauguration and the menu toggle share one row. */
@media (max-width: 781px) {
	.site-header .header-ctas {
		margin-left: 0;
		gap: 0.4rem;
	}

	.site-header .header-cta .wp-block-button__link {
		padding: 0.55em 0.8em;
		font-size: var(--wp--preset--font-size--small);
		letter-spacing: 0.08em;
		white-space: nowrap;
	}
}

/* Collapsed nav (below the header navbar's overlayBreakpoint, 1200px): the
   menu toggle sits at the far right, after the CTAs. Visual order only; the
   menu opens as a fixed full-screen overlay, so its position is unaffected. */
@media (max-width: 1199px) {
	.site-header .wp-block-base-navbar {
		order: 1;
	}
}

/* Phones: the logo must not be squeezed out by the two CTAs (flex shrinks
   it to 0 otherwise), so it keeps a fixed width and the CTAs tighten
   instead. Measured to fit without horizontal scroll from 320px up. */
.site-header .wp-block-site-logo {
	flex-shrink: 0;
}

@media (max-width: 479px) {
	.site-header .wp-block-site-logo img {
		width: 56px;
	}

	.site-header .header-cta .wp-block-button__link {
		font-size: 0.8125rem;
		padding: 0.55em;
		letter-spacing: 0.03em;
	}
}

@media (max-width: 359px) {
	.site-header .wp-block-site-logo img {
		width: 44px;
	}

	.site-header .header-cta .wp-block-button__link {
		font-size: 0.6875rem;
		padding: 0.5em 0.45em;
		letter-spacing: 0.02em;
	}
}

/* Overlay header (Page with Hero template): transparent, floats over the hero. */
header.is-overlay {
	position: absolute;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 20;
}

header.is-overlay .site-header {
	background-color: transparent !important;
}

/* Keep white hero text legible over the light overlay. */
.wp-block-cover .hero-text-shadow {
	text-shadow: 0 2px 16px rgba(9, 31, 65, 0.45);
}

/* Single post navigation: previous left, next right (even when alone). */
.post-nav a {
	text-decoration: none;
}

.post-nav a:hover {
	text-decoration: underline;
}

.post-nav .post-navigation-link-next {
	margin-left: auto;
}

/* Footer sits flush against the last section (no root block-gap strip). */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Footer logo is decorative chrome, not content: no rounded image corners. */
.site-footer .footer-logo img {
	border-radius: 0;
}

/* Outline buttons follow the brand primary instead of currentColor. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Canvas: a flex column so short pages keep the footer at the bottom. */
.wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Two-tone headline: a <mark> inside a heading is the highlight word. */
:where(h1, h2, h3) mark {
	background: none;
	color: var(--wp--preset--color--accent);
}

/* Long-form content sits on a white panel inside the dark frame. Headings
   inherit the panel's navy text; links switch to navy for contrast. */
.content-panel {
	color: var(--wp--preset--color--contrast);
}

.content-panel a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--primary);
}

/* Donate panel: the amount block's buttons and the "Other amount" button
   share one grid — 3 columns (2 on phones), like UVF's 3x2 amount grid.
   display: contents flattens the wrappers so every button is a grid cell. */
.donate-panel .donate-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
}

.donate-panel .donate-grid > *,
.donate-panel .donate-grid .base-donation-banner,
.donate-panel .donate-grid .base-donation-banner__amounts {
	display: contents;
}

.donate-panel .donate-grid .wp-block-button {
	margin: 0;
}

.donate-panel .wp-block-button__link {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--large);
	padding-block: 1rem;
	padding-inline: 0.5rem;
}

.donate-panel .wp-block-button__link:hover,
.donate-panel .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

.donate-panel .donate-other .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

.donate-panel .donate-other .wp-block-button__link:hover,
.donate-panel .donate-other .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

@media (max-width: 599px) {
	.donate-panel .donate-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Home hero: on phones, stack like UVF — the photo fills the top, the
   headline sits below it on solid navy. */
@media (max-width: 781px) {
	.hero-home.wp-block-cover {
		--hero-header: 5.5rem;
		align-items: flex-end;
		padding-top: calc(var(--hero-header) + 44vh) !important;
		background-color: var(--wp--preset--color--contrast);
	}

	/* The photo starts below the overlay header so the logo and CTAs sit on
	   navy, not over the subject's face. */
	.hero-home > .wp-block-cover__image-background {
		top: var(--hero-header);
		height: 50vh;
		bottom: auto;
	}

	.hero-home > .wp-block-cover__background {
		background: linear-gradient(to top, var(--wp--preset--color--contrast) 42%, rgba(9, 31, 65, 0) 68%) !important;
		opacity: 1 !important;
	}
}

/* Inauguration signup: one-row email form on the dark hero. The heading and
   placeholder carry the prompt, so the label is visually hidden (still read by
   screen readers); error text recolors for the dark ground. */
.inauguration-signup .gform-theme--orbital {
	--gf-color-danger: var(--wp--preset--color--accent);
	--gf-color-danger-rgb: 150, 211, 236; /* accent #96d3ec — GF needs raw RGB for its error glow */
	--gf-ctrl-desc-color-error: var(--wp--preset--color--accent);
}

.inauguration-signup .gform_fields {
	align-items: start;
}

.inauguration-signup .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.inauguration-signup .gform_validation_errors {
	background: transparent;
}

/* Footer: circular outlined social icons. */
.site-footer .wp-block-social-links .wp-block-social-link {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
	border-radius: 50%;
}

.site-footer .wp-block-social-links .wp-block-social-link-anchor {
	min-width: 48px;
	min-height: 48px;
}

.site-footer .wp-block-social-links .wp-block-social-link:hover {
	border-color: var(--wp--preset--color--accent);
}

.site-footer nav a {
	letter-spacing: 0.15em;
	font-weight: 700;
}

.site-footer .paid-for-by p {
	letter-spacing: 0.25em;
	text-transform: uppercase;
}

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