/*
 * PAVSA — frontend styles.
 *
 * Tokens (colours, type, spacing) come from theme.json presets and are used
 * here only as --wp--preset--* variables. This file handles the classic
 * template chrome (exit bar, header, footer), the block style variants, and
 * the composed pieces core blocks cannot express on their own.
 */

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

:root {
	/* Layout rails. Declared here because they are structural, not design
	   tokens — theme.json owns anything a client could reasonably restyle. */
	--pavsa-gutter: clamp(1.25rem, 5vw, 4rem);
	--pavsa-content: 986px;
	--pavsa-radius: 10px;
	--pavsa-header-height: 125px;
	--pavsa-footer-gutter: clamp(1.25rem, 4vw, 3.75rem);
	/* One shade below navy, for the footer's base band. */
	--pavsa-footer-base: #122743;
}

html {
	scroll-behavior: smooth;
	/* Clears the sticky exit bar plus breathing room. */
	scroll-padding-top: 8rem;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	max-width: 100%;
}

img {
	height: auto;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	word-wrap: normal;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 500;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--cream);
}

.skip-link:focus {
	/* Below the sticky exit bar rather than behind it. */
	top: calc(50px + 1rem);
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--coral);
	outline-offset: 3px;
}

/* Shared centred column. */
.pavsa-wrap,
.page-content > :where(*),
.page-hero__inner,
.donate-banner__inner {
	max-width: var(--pavsa-content);
	margin-inline: auto;
	padding-inline: var(--pavsa-gutter);
	box-sizing: content-box;
}

/* ------------------------------------------------------------------ */
/* Exit bar                                                            */
/* ------------------------------------------------------------------ */

/*
 * Sticks to the top so the way out is always one click away, however far
 * someone has scrolled. Sits above the header and its dropdown panel (220)
 * so nothing can ever cover it.
 */
.exit-bar {
	position: sticky;
	top: 0;
	z-index: 400;
	background: var(--wp--preset--color--coral);
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.exit-bar__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1rem;
	color: var(--wp--preset--color--white);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

/*
 * The whole bar is the link, so "Click HERE" carries the underline as the
 * visible affordance — without it the bar reads as a notice rather than
 * something you can act on.
 */
.exit-bar__cta {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.exit-bar__link:hover .exit-bar__label,
.exit-bar__link:hover .exit-bar__cta {
	text-decoration: underline;
}

.exit-bar__icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

.site-header {
	background: var(--wp--preset--color--blue);
	/* Contains the sub-menu's 100vw bleed; the y axis stays visible so the
	   panel can still overflow below the header. */
	overflow: clip visible;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--pavsa-header-height);
	padding: 1rem clamp(1.25rem, 4vw, 3.75rem);
}

/*
 * The dropdown panel's bleed starts at the nav item's bottom edge, which sits
 * above the header's own bottom — so the logo and CTA, being taller than the
 * nav text, must out-rank it (200) to stay visible. The overlap itself is
 * invisible: panel and header are the same blue.
 */
.site-header__brand,
.site-header__cta {
	position: relative;
	z-index: 220;
}

/* The CTA is a fixed phrase; wrapping it looks broken at narrow widths. */
.site-header__cta {
	white-space: nowrap;
}

.site-header__logo {
	display: block;
	line-height: 0;
}

.site-header__logo img {
	display: block;
	/* Design note in the 7.7.25 copy revision asks for a larger header logo. */
	width: clamp(210px, 26vw, 360px);
	height: auto;
}

.site-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.25rem);
	margin-left: auto;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	color: var(--wp--preset--color--white);
	font-size: 1.125rem;
	font-weight: 700;
	text-decoration: none;
}

/* Title case, per the comp. Kept from breaking mid-label at tight widths. */
.site-nav__list > li > a {
	white-space: nowrap;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

/* Top level uses the coral rule below instead of a text underline. */
.site-nav__list > li > a:hover,
.site-nav__list > li.current-menu-item > a,
.site-nav__list > li:focus-within > a {
	text-decoration: none;
}

/*
 * Sub-menus continue the header's blue rather than sitting in a white card,
 * per the comp (Figma 268:1156). Revealed on hover and on focus so they stay
 * keyboard reachable.
 */
.site-nav__list > li {
	position: relative;
}

.site-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 200;
	min-width: max-content;
	/*
	 * Animated open rather than toggled with display, which cannot transition.
	 * visibility keeps the panel out of the tab order while closed; delaying
	 * it on the way out lets the fade finish before it is hidden.
	 */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-0.75rem);
	transition:
		opacity 0.18s ease,
		transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
		visibility 0s linear 0.24s;
	margin: 0;
	/*
	 * The panel is the same blue as the header, so its top edge is invisible;
	 * this padding is what puts the first item roughly 38px below the header,
	 * matching the comp. Retune if the header height changes.
	 */
	padding: 5.5rem 0 3rem;
	list-style: none;
}

/*
 * Full-bleed ground. Overshoots a viewport in both directions and lets
 * .site-header's `overflow: clip visible` trim it back — the header is already
 * exactly viewport-width, so the result is a true full bleed no matter where
 * the parent item sits. A `left: 50%; margin-left: -50vw` bleed does NOT work
 * here, because the 50% resolves against the submenu rather than the viewport.
 */
.site-nav__list .sub-menu::before {
	position: absolute;
	top: 0;
	right: -100vw;
	bottom: 0;
	left: -100vw;
	background: var(--wp--preset--color--blue);
	content: "";
}

.site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition:
		opacity 0.18s ease,
		transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
		visibility 0s;
}


/* Positioned so it paints above the bleed, which is an earlier sibling. */
.site-nav__list .sub-menu a {
	position: relative;
	display: block;
	padding: 19px 20px;
	border-radius: var(--pavsa-radius);
	color: var(--wp--preset--color--white);
	font-size: 1.125rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s ease;
}

.site-nav__list .sub-menu a:hover,
.site-nav__list .sub-menu a:focus-visible,
.site-nav__list .sub-menu .current-menu-item > a {
	background: var(--wp--preset--color--coral);
	text-decoration: none;
}

/*
 * Every top-level item is marked with a coral rule rather than a text
 * underline — including ones without a submenu, like Contact, which otherwise
 * got a different treatment from its neighbours. The rule sits below the
 * anchor's box, which is inside the panel's area, so the anchor has to
 * out-rank the panel (200) or the rule paints behind it.
 */
.site-nav__list > li > a {
	position: relative;
	z-index: 220;
}

/*
 * Declared in the closed state too, collapsed to zero width. A pseudo-element
 * that only exists on hover has no "from" value to transition out of.
 */
.site-nav__list > li > a::after {
	position: absolute;
	right: 0;
	bottom: -1.1rem;
	left: 0;
	height: 3px;
	background: var(--wp--preset--color--coral);
	/* Grows out from the left to meet the open panel. */
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
	content: "";
}

.site-nav__list > li:hover > a::after,
.site-nav__list > li:focus-within > a::after,
.site-nav__list > li.current-menu-item > a::after,
.site-nav__list > li.current-menu-ancestor > a::after,
.site-nav__list > li.current-menu-parent > a::after {
	transform: scaleX(1);
}

.site-header__toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wp--preset--color--white);
	cursor: pointer;
}

.site-header__toggle-bar,
.site-header__toggle-bar::before,
.site-header__toggle-bar::after {
	position: absolute;
	left: 10px;
	width: 24px;
	height: 2px;
	background: currentColor;
	content: "";
}

.site-header__toggle-bar {
	top: 21px;
}

.site-header__toggle-bar::before {
	top: -7px;
	left: 0;
}

.site-header__toggle-bar::after {
	top: 7px;
	left: 0;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar {
	background: transparent;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar::before {
	top: 0;
	transform: rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar::after {
	top: 0;
	transform: rotate(-45deg);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.pavsa-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 20px;
	border-radius: 200px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.pavsa-button--solid,
.wp-block-button.is-style-pill-solid .wp-block-button__link {
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--cream);
}

.pavsa-button--solid:hover,
.wp-block-button.is-style-pill-solid .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--cream);
}

.pavsa-button--light,
.wp-block-button.is-style-pill-light .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--blue);
}

.pavsa-button--light:hover,
.wp-block-button.is-style-pill-light .wp-block-button__link:hover {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--navy);
}

/* ------------------------------------------------------------------ */
/* Hero and page content                                               */
/* ------------------------------------------------------------------ */

.page-hero {
	background: var(--wp--preset--color--cream);
	padding-block: clamp(3rem, 8vw, 7.3rem) clamp(2rem, 5vw, 4rem);
}

.page-hero__title,
.pavsa-hero-title {
	margin: 0;
	/*
	 * The comp sets the hero measure at 892px inside the 986px column. That is
	 * expressed as trailing padding rather than max-width on purpose: core's
	 * constrained layout applies `margin-inline: auto !important` to every
	 * child, so any box narrower than the column gets centred and no amount of
	 * specificity can stop it. Keeping the box full-width makes those auto
	 * margins a no-op, and the padding shortens the line instead.
	 * 94px / 986px = 9.5%. The width itself is left to core's constrained
	 * layout, which already caps the box at the 986px content size — which
	 * only holds with border-box, so the padding comes out of the 986 rather
	 * than being added to it.
	 */
	box-sizing: border-box;
	color: var(--wp--preset--color--blue);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-large);
	font-weight: 500;
	line-height: 1.35;
}

.site-main {
	background: var(--wp--preset--color--cream);
}

.page-content {
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 8vw, 6rem);
}

/* Full-width bands opt out of the centred column. */
.page-content > .alignfull,
.page-content > .pavsa-band {
	max-width: none;
}

/*
 * ...and go edge to edge, unless they supply their own gutter further down.
 * .pavsa-band and .page-hero are themselves .alignfull, so a blanket
 * padding-inline: 0 here beat their gutter rule on specificity (0,2,0 against
 * 0,1,0) and left headings and body copy flush against the viewport edge on
 * mobile. Invisible on desktop, where the 986px measure keeps content well
 * inside the viewport regardless.
 */
.page-content > .alignfull:not(.pavsa-band):not(.page-hero) {
	padding-inline: 0;
}

.pavsa-band {
	padding-block: clamp(2.5rem, 6vw, 5.5rem);
}

.pavsa-band--blue {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
}

.pavsa-band--sand {
	background: var(--wp--preset--color--sand);
}

.pavsa-band--blue :is(h1, h2, h3, h4) {
	color: var(--wp--preset--color--white);
}

/* Body links inherit the blue token, which is invisible on the blue band. */
.pavsa-band--blue a:not(.wp-block-button__link):not(.pavsa-button) {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Small coral label above a section heading. */
.is-style-eyebrow {
	margin-bottom: 0.75rem;
	color: var(--wp--preset--color--coral);
	/*
	 * Museo 900 at 20px, per the comp (Figma 280:1027) — this is a local
	 * override there, not one of the six shared text styles, which is why it
	 * did not surface when the type scale was first built.
	 */
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 900;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Disclosure rows (core/details)                                      */
/* ------------------------------------------------------------------ */

.wp-block-details.is-style-disclosure {
	border-bottom: 1px solid rgba(64, 92, 169, 0.45);
	padding-block: clamp(1rem, 2.5vw, 1.75rem);
}

.wp-block-details.is-style-disclosure > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	list-style: none;
	cursor: pointer;
	color: var(--wp--preset--color--blue);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 500;
	line-height: 1.2;
}

.wp-block-details.is-style-disclosure > summary::-webkit-details-marker,
.wp-block-details.is-style-disclosure > summary::marker {
	display: none;
	content: "";
}

/* Coral circular arrow. Rotates to point up when the row is open. */
.wp-block-details.is-style-disclosure > summary::after {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--wp--preset--color--coral) no-repeat center / 18px 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E");
	transform: rotate(180deg);
	transition: transform 0.2s ease;
	content: "";
}

.wp-block-details.is-style-disclosure[open] > summary::after {
	transform: rotate(0deg);
}

.wp-block-details.is-style-disclosure > summary:hover::after {
	background-color: var(--wp--preset--color--navy);
}

/* The revealed panel. */
.wp-block-details.is-style-disclosure > :not(summary) {
	margin-block: 1.5rem 0;
}

.wp-block-details.is-style-disclosure .is-style-panel {
	margin-top: 1.75rem;
}

/* ------------------------------------------------------------------ */
/* Panels and cards                                                    */
/* ------------------------------------------------------------------ */

.wp-block-group.is-style-panel {
	padding: clamp(1.5rem, 3vw, 2.8rem);
	border-radius: var(--pavsa-radius);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.wp-block-group.is-style-panel :is(h1, h2, h3, h4, strong) {
	color: var(--wp--preset--color--white);
}

.wp-block-group.is-style-panel a {
	color: var(--wp--preset--color--white);
}

.wp-block-group.is-style-staff-card {
	padding: 1.25rem;
	border-radius: 4px;
	background: var(--wp--preset--color--sand);
	text-align: center;
}

.wp-block-group.is-style-staff-card p {
	margin: 0 0 0.25rem;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.wp-block-group.is-style-staff-card p:first-child {
	color: var(--wp--preset--color--navy);
	font-size: 0.9375rem;
	font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Donate banner                                                       */
/* ------------------------------------------------------------------ */

.donate-banner {
	background: var(--wp--preset--color--blue);
	padding-block: clamp(2.5rem, 5vw, 4.2rem);
}

.donate-banner__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.donate-banner__title {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-large);
	font-weight: 500;
	line-height: 1.1;
}

.donate-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* Donate widget (footer + Donate page) — links out to GiveMN          */
/* ------------------------------------------------------------------ */

.donate-field {
	display: flex;
	align-items: center;
	max-width: 317px;
	margin-bottom: 0.75rem;
	background: var(--wp--preset--color--white);
	border-radius: 4px;
}

.donate-field__prefix {
	padding-inline: 0.85rem;
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

.donate-field__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	padding: 0.9rem 0.85rem 0.9rem 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--navy);
	font-family: inherit;
	font-size: 1rem;
}

.donate-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.donate-chip {
	padding: 0.5rem 1rem;
	border: 1px solid currentColor;
	border-radius: 200px;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.donate-chip:hover,
.donate-chip[aria-pressed="true"] {
	background: var(--wp--preset--color--coral);
	border-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--cream);
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.site-footer {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	/* No bottom padding: the base band runs to the foot of the page. */
	padding: clamp(2.5rem, 6vw, 3.75rem) var(--pavsa-footer-gutter) 0;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
	max-width: 1320px;
	margin-inline: auto;
}

.site-footer__brand img {
	display: block;
	width: clamp(140px, 14vw, 207px);
	height: auto;
}

.site-footer__heading {
	margin: 0 0 0.9rem;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.5rem;
	font-weight: 700;
}

.site-footer a {
	color: var(--wp--preset--color--white);
}

/*
 * The default solid-button hover goes navy, which is the footer's own
 * background — the button would vanish. Invert to white here instead.
 */
.site-footer .pavsa-button--solid:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--blue);
}

.contact-list {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
}

.contact-list dt {
	font-weight: 700;
}

.contact-list dd {
	margin: 0 0 0.85rem;
}

.contact-list address {
	font-style: normal;
}

.site-footer__welcome {
	margin: 0;
	font-size: 1rem;
}

.site-footer__nav {
	max-width: 1320px;
	margin: 2.5rem auto 0;
}

.site-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}

.site-footer__legal {
	max-width: 1320px;
	margin: 1.5rem auto 0;
	font-size: 0.75rem;
	opacity: 0.75;
}

/* ------------------------------------------------------------------ */
/* Scroll fade-ins — nothing is hidden until JS opts the page in       */
/* ------------------------------------------------------------------ */

.js-fade .pavsa-fade {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.js-fade .pavsa-fade.is-inview {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.js-fade .pavsa-fade {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.site-footer__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 860px) {
	.site-header__toggle {
		display: block;
	}

	/* Design note: give the logo breathing room on mobile. */
	.site-header__inner {
		padding-block: 1.25rem;
		gap: 1rem;
	}

	.site-header__logo img {
		width: clamp(160px, 52vw, 240px);
	}

	.site-header__inner {
		flex-wrap: wrap;
		min-height: 0;
	}

	.site-header__nav {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
		width: 100%;
		margin-left: 0;
		padding-block: 1.5rem 0.5rem;
	}

	.site-header__nav.is-open {
		display: flex;
	}

	.site-nav,
	.site-nav__list {
		width: 100%;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	/* Mobile stacks everything inline; the desktop panel treatment is undone. */
	.site-nav__list .sub-menu {
		position: static;
		min-width: 0;
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: none;
		padding: 0.5rem 0 0 1rem;
		background: none;
		box-shadow: none;
	}

	.site-nav__list .sub-menu::before {
		display: none;
	}

	.site-nav__list .sub-menu a {
		padding: 0.5rem 0.75rem;
		font-size: 1rem;
		color: var(--wp--preset--color--white);
	}

	.site-nav__list > li > a::after {
		display: none;
	}

	.donate-banner__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 640px) {
	.site-footer__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-details.is-style-disclosure > summary {
		gap: 1rem;
	}

	.wp-block-details.is-style-disclosure > summary::after {
		width: 40px;
		height: 40px;
		background-size: 14px 14px;
	}
}

/* ------------------------------------------------------------------ */
/* Pattern layouts                                                     */
/* ------------------------------------------------------------------ */

/* Bands supply their own gutter; the constrained layout inside them only
   sets max-width, not padding. */
.pavsa-band,
.page-hero {
	padding-inline: var(--pavsa-gutter);
}

.pavsa-band--tight {
	padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

/* Two-column splits collapse to one column well before the columns block's
   own 782px breakpoint, because these carry long-form copy. */
.pavsa-split.wp-block-columns,
.pavsa-about.wp-block-columns {
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

.pavsa-about.wp-block-columns {
	align-items: center;
}

/*
 * Client feedback: the badge read as oversized and made the About and
 * "Other Ways to Support" bands too tall. Scaled down so the stripe is
 * shorter, and centred explicitly — the figure's own alignment was letting it
 * sit off-centre once the columns stacked on mobile.
 */
.pavsa-about .pavsa-badge {
	margin-inline: auto;
	text-align: center;
}

.pavsa-about .pavsa-badge img {
	display: block;
	width: min(100%, 260px);
	margin-inline: auto;
	height: auto;
}

@media (max-width: 860px) {
	.pavsa-about .pavsa-badge img {
		width: min(70%, 200px);
	}
}

.pavsa-staff-grid.wp-block-group {
	gap: 1.25rem;
	margin-top: 1.5rem;
}

/* Donate widget on the Donate page sits on the sand band. */
.donate-widget {
	margin-bottom: 2rem;
}

.donate-widget .donate-chip {
	color: var(--wp--preset--color--navy);
}

.donate-widget__note {
	margin: 0.9rem 0 0;
	font-size: 0.875rem;
	opacity: 0.8;
}

/* The details block reveals a panel; give the inner content the band's
   content width rather than the summary's. */
.wp-block-details.is-style-disclosure .wp-block-columns,
.wp-block-details.is-style-disclosure .wp-block-group {
	margin-top: 1.5rem;
}

@media (max-width: 860px) {
	.pavsa-split.wp-block-columns,
	.pavsa-about.wp-block-columns {
		flex-wrap: wrap;
	}

	.pavsa-split.wp-block-columns > .wp-block-column,
	.pavsa-about.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ------------------------------------------------------------------ */
/* Gravity Forms                                                       */
/* ------------------------------------------------------------------ */

/* functions.php disables Gravity Forms' own stylesheet, so the theme owns
   the whole appearance of a form. */
.gform_wrapper ul,
.gform_wrapper .gform_fields {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gform_wrapper .gfield {
	margin-bottom: 1.25rem;
}

.gform_wrapper .gfield_label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 1rem;
	font-weight: 700;
}

.gform_wrapper .gfield_required {
	margin-left: 0.2rem;
	color: var(--wp--preset--color--coral);
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(26, 51, 87, 0.35);
	border-radius: 4px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font-family: inherit;
	font-size: 1rem;
	box-sizing: border-box;
}

.gform_wrapper textarea {
	min-height: 9rem;
	resize: vertical;
}

.gform_wrapper .gfield_description {
	margin-top: 0.4rem;
	font-size: 0.875rem;
	opacity: 0.85;
}

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 20px;
	border: 0;
	border-radius: 200px;
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--cream);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
	background: var(--wp--preset--color--navy);
}

/* Validation states need to read without relying on colour alone. */
.gform_wrapper .gfield_error .gfield_label::after {
	content: " — please check this field";
	font-weight: 400;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea {
	border-color: var(--wp--preset--color--coral);
	border-width: 2px;
}

.gform_wrapper .validation_message {
	margin-top: 0.35rem;
	color: #8c2f16;
	font-size: 0.875rem;
	font-weight: 600;
}

.gform_wrapper .gform_validation_errors {
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--wp--preset--color--coral);
	background: var(--wp--preset--color--white);
}

.gform_confirmation_message {
	padding: 1.25rem 1.5rem;
	border-radius: var(--pavsa-radius);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.gform_confirmation_message a {
	color: var(--wp--preset--color--white);
}

/* ------------------------------------------------------------------ */
/* Home service index                                                  */
/* ------------------------------------------------------------------ */

/* The seven named services read as a menu rather than a bulleted list. */
.pavsa-service-index.wp-block-list {
	margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
	padding: 0;
	list-style: none;
}

.pavsa-service-index li {
	border-bottom: 1px solid rgba(64, 92, 169, 0.35);
}

.pavsa-service-index a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: clamp(0.85rem, 2vw, 1.4rem);
	color: var(--wp--preset--color--blue);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-small);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
}

.pavsa-service-index a::after {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--coral) no-repeat center / 14px 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
	transition: background-color 0.18s ease;
	content: "";
}

.pavsa-service-index a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.pavsa-service-index a:hover::after {
	background-color: var(--wp--preset--color--navy);
}

/* ------------------------------------------------------------------ */
/* Values grid                                                         */
/* ------------------------------------------------------------------ */

.pavsa-value-grid.wp-block-group {
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 782px) {
	.pavsa-value-grid.wp-block-group {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Nested lists inside disclosure panels need their own indent. */
.wp-block-details.is-style-disclosure .wp-block-list .wp-block-list {
	margin-top: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* Hero measure                                                        */
/* ------------------------------------------------------------------ */

@media (min-width: 782px) {
	.page-hero__title,
	.pavsa-hero-title {
		padding-inline-end: 9.5%;
	}
}


/* ------------------------------------------------------------------ */
/* Social links                                                        */
/* ------------------------------------------------------------------ */

.social-links {
	display: flex;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

/*
 * 44px target even though the glyph is 26px, so the tap area is usable.
 * Scoped under .site-footer to outrank `.site-footer a`, which would
 * otherwise paint these white.
 */
.site-footer .social-links__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: -10px;
	color: var(--wp--preset--color--coral);
	transition: color 0.18s ease;
}

.site-footer .social-links__link:hover {
	color: var(--wp--preset--color--white);
}

.social-links__link svg {
	display: block;
	width: 26px;
	height: 26px;
}

/* ------------------------------------------------------------------ */
/* Grant disclaimer                                                    */
/* ------------------------------------------------------------------ */

.site-footer__grant {
	max-width: 1320px;
	margin: 1rem auto 0;
	font-size: 0.6875rem;
	line-height: 1.5;
	opacity: 0.7;
}

/* ------------------------------------------------------------------ */
/* Home hero helpline and welcome line                                 */
/* ------------------------------------------------------------------ */

.pavsa-hero-phone {
	margin-top: clamp(1rem, 2vw, 1.5rem);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
}

/* Label sits in the body colour so the number stays the emphasised part. */
.pavsa-hero-phone__label {
	color: var(--wp--preset--color--navy);
	white-space: nowrap;
}

.pavsa-hero-phone a {
	/*
	 * inline-block makes the number an atomic inline box, so it can never be
	 * split across lines regardless of what else touches white-space further
	 * down the cascade. Belt and braces with the nowrap on tel: links below.
	 */
	display: inline-block;
	text-decoration: none;
}

/*
 * Phone numbers must never break mid-number. The hyphens in 218-726-1931 are
 * line-break opportunities, so at the hero's display size on a phone it split
 * as "218-" / "726-1931". A helpline broken across two lines is hard to read
 * and hard to dial, so this covers every tel: link on the site, not just the
 * hero. The line may still break between the label and the number.
 */
a[href^="tel:"] {
	white-space: nowrap;
}

.pavsa-hero-phone a:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.pavsa-welcome {
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
	color: var(--wp--preset--color--coral);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ */
/* Footer base band                                                    */
/* ------------------------------------------------------------------ */

/*
 * Bleeds past the footer's own gutter by exactly that gutter, so the darker
 * ground spans the viewport without the two values drifting apart.
 */
.site-footer__base {
	margin-top: clamp(2rem, 4vw, 3rem);
	margin-inline: calc(-1 * var(--pavsa-footer-gutter));
	padding: clamp(1.25rem, 2.5vw, 1.75rem) var(--pavsa-footer-gutter);
	background: var(--pavsa-footer-base);
}

.site-footer__base-inner {
	max-width: 1320px;
	margin-inline: auto;
}

.site-footer__base .site-footer__nav,
.site-footer__base .site-footer__legal,
.site-footer__base .site-footer__grant {
	max-width: none;
	margin-inline: 0;
}

.site-footer__base .site-footer__nav {
	margin-top: 0;
	margin-bottom: 1rem;
}

/* ------------------------------------------------------------------ */
/* Reduced motion — menu                                               */
/* ------------------------------------------------------------------ */

/*
 * The panel still appears and disappears; it just does so without travel or
 * fade. Keeping visibility instant here is deliberate — a delayed hide with
 * no visible transition would only feel unresponsive.
 */
@media (prefers-reduced-motion: reduce) {
	.site-nav__list .sub-menu,
	.site-nav__list > li:hover > .sub-menu,
	.site-nav__list > li:focus-within > .sub-menu {
		transform: none;
		transition: none;
	}

	.site-nav__list > li > a::after {
		transition: none;
	}
}