/*
  Homepage component styles, ported from brave-web/src/pages/Home.jsx and its
  child components. Every value here comes from a token in tokens.css — no raw
  hex or px literals for anything the design system defines.
*/

/* ---------------------------------------------------------------- Sections */

.brave-constrain {
	box-sizing: border-box;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

.brave-section {
	padding-block: var(--space-8);
}

.brave-section--subtle {
	background: var(--surface-subtle);
}

.brave-section--dark {
	background: var(--surface-dark);
	color: var(--text-on-dark);
}

.brave-eyebrow {
	margin: 0 0 var(--space-2);
	font-family: var(--font-body);
	font-size: var(--text-caption-size);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--text-muted);
}

.brave-eyebrow--blue {
	color: var(--program-books);
}

.brave-accent-year {
	color: var(--program-health);
}

.brave-section--dark .brave-eyebrow {
	color: var(--gray-300);
}

.brave-section__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-h2);
	line-height: var(--lh-h2);
	font-weight: var(--weight-semibold);
}

.brave-section__subtitle {
	margin: var(--space-3) 0 0;
	max-width: 62ch;
	font-size: var(--text-body-lg);
	line-height: var(--lh-body);
	color: var(--text-muted);
}

.brave-section--dark .brave-section__subtitle {
	color: var(--gray-300);
}

.brave-center {
	text-align: center;
}

.brave-center .brave-section__subtitle {
	margin-inline: auto;
}

.brave-section-heading {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: end;
	justify-content: space-between;
}

.brave-section-heading__action {
	flex: 0 0 auto;
	margin-top: 0;
}

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

.brave-hero {
	position: relative;
	background-color: var(--surface-dark);
	background-size: cover;
	background-position: center;
	color: var(--text-on-dark);
}

/* Scrim guarantees text contrast over any background — photograph or the
   animated brand video (WCAG 1.4.3). Keep this layer no matter what lands
   underneath it. Explicit z-indexes because the video is a real DOM child:
   without them it would paint ABOVE this pseudo-element. */
.brave-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--overlay-hero);
}

/* Animated brand-logo background (see page-home.php for the accessibility
   contract: no autoplay attribute, JS starts it and injects the pause
   control). Sits under the scrim.

   object-fit: contain, not cover — client feedback: cover cropped the
   artwork's wings and wordmark. Contain letterboxes instead, and the bars
   vanish because the section background below is sampled from the video's
   own edge tone and both sit under the same scrim. The source is trimmed
   to its dark section (from 6.8s) so no white frame ever appears against
   the dark bars. */
.brave-hero--video {
	background-color: rgb(30, 26, 22);
}

.brave-hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Pause/play control home.js injects for the background video. Above the
   scrim so it is always reachable; quiet styling so it never competes with
   the donate module. */
.brave-hero__video-toggle {
	position: absolute;
	right: var(--space-4);
	bottom: var(--space-4);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--touch-target);
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-body-sm, 0.9rem);
	font-weight: var(--weight-semibold);
	color: var(--text-on-dark);
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--radius-md);
	cursor: pointer;
}

.brave-hero__video-toggle:hover {
	background: rgba(0, 0, 0, 0.75);
}

.brave-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var(--space-7);
	align-items: center;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-8) var(--space-4);
}

@media ( min-width: 900px ) {
	.brave-hero__inner {
		grid-template-columns: 1.15fr 0.85fr;
	}
}

.brave-hero__eyebrow {
	margin: 0 0 var(--space-3);
	font-size: var(--text-caption-size);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--gray-300);
}

.brave-hero__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-h1);
	line-height: var(--lh-h1);
	font-weight: var(--weight-bold);
	color: var(--text-on-dark);
	text-wrap: balance;
}

@media ( min-width: 900px ) {
	.brave-hero__title {
		font-size: var(--text-display);
		line-height: var(--lh-display);
	}
}

.brave-hero__subtitle {
	margin: var(--space-4) 0 0;
	max-width: 56ch;
	font-size: var(--text-body-lg);
	line-height: var(--lh-body);
	color: var(--gray-200);
}

.brave-hero__placeholder {
	margin: var(--space-4) 0 0;
	font-size: var(--text-caption-size);
	color: var(--gray-400);
}

/* ---------------------------------------------------------- Donation CTA */

.brave-donate {
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
	padding: var(--space-5);
	background: var(--surface-card);
	color: var(--text-body);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-raised);
}

.brave-donate__heading {
	margin: 0 0 var(--space-1);
	font-family: var(--font-display);
	font-size: var(--text-h3);
	line-height: var(--lh-h3);
	color: var(--ink);
}

.brave-donate__copy {
	margin: var(--space-3) 0 0;
	color: var(--text-muted);
}

.brave-donate__submit {
	display: flex;
	width: 100%;
	min-height: 52px;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	margin-top: 10px;
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-body-lg);
	font-weight: var(--weight-bold);
	color: var(--cta-donate-text);
	background: var(--cta-donate-bg);
	border: 0;
	border-radius: var(--radius-md);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-standard),
		transform var(--dur-fast) var(--ease-standard),
		box-shadow var(--dur-fast) var(--ease-standard);
}

.brave-donate__submit:hover {
	background: var(--cta-donate-hover);
	transform: translateY(-2px);
	box-shadow: var(--shadow-raised);
}

.brave-donate__submit:active {
	background: var(--cta-donate-press);
	transform: translateY(1px);
}

.brave-donate__legal {
	margin: 10px 0 0;
	font-size: var(--text-caption-size);
	color: var(--text-muted);
	text-align: center;
}

/* ------------------------------------------------------------------ Cards */

.brave-grid {
	display: grid;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

@media ( min-width: 720px ) {
	.brave-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.brave-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	padding: var(--space-4);
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	transition: border-color var(--dur-med) var(--ease-standard),
		box-shadow var(--dur-med) var(--ease-standard),
		transform var(--dur-med) var(--ease-standard);
}

.brave-card:hover,
.brave-card:focus-within {
	border-color: var(--gray-400);
	box-shadow: var(--shadow-raised);
	transform: translateY(-3px);
}

.brave-card--blue {
	border-top: 4px solid var(--program-books);
	background: linear-gradient(180deg, var(--program-books-tint), var(--white) 42%);
}

.brave-card--orange {
	border-top: 4px solid var(--program-health);
	background: linear-gradient(180deg, var(--program-health-tint), var(--white) 42%);
}

.brave-card--green {
	border-top: 4px solid var(--program-bucks);
	background: linear-gradient(180deg, var(--program-bucks-tint), var(--white) 42%);
}

.brave-card__title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-h4);
	line-height: var(--lh-h4);
	font-weight: var(--weight-semibold);
	color: var(--ink);
}

.brave-card__text {
	flex: 1;
	margin: 0;
	font-size: var(--text-body-md);
	line-height: var(--lh-body);
	color: var(--text-muted);
}

.brave-card__goal {
	margin: var(--space-3) 0 0;
	font-size: var(--text-caption-size);
	font-weight: var(--weight-semibold);
	color: var(--link-accent);
}

/* --------------------------------------------------------- Program cards */

/* ------------------------------------------------------ KidsZone invitation */

.brave-kidszone-invite {
	position: relative;
	color: var(--white);
	background:
		radial-gradient(circle at 12% 25%, rgba(156, 201, 255, 0.3), transparent 24%),
		linear-gradient(115deg, #071733 0%, #10498F 58%, #34256D 100%);
	overflow: hidden;
}

.brave-kidszone-invite__inner {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-5);
	min-height: 270px;
	padding-block: var(--space-5);
}

.brave-kidszone-invite__art {
	position: relative;
	width: 170px;
	height: 170px;
}

.brave-kidszone-invite__moon {
	position: absolute;
	left: 28px;
	top: 22px;
	width: 112px;
	height: 112px;
	background: #FFF1AD;
	border-radius: 50%;
	box-shadow: 0 0 38px rgba(255, 241, 173, 0.32);
}

.brave-kidszone-invite__moon::after {
	content: '';
	position: absolute;
	right: -15px;
	top: -8px;
	width: 112px;
	height: 112px;
	background: #0C2A5E;
	border-radius: 50%;
}

.brave-kidszone-invite__star {
	position: absolute;
	color: #FFD45C;
	animation: brave-kidszone-invite-twinkle 2.5s ease-in-out infinite alternate;
}

.brave-kidszone-invite__star--one { left: 4px; top: 20px; font-size: 22px; }
.brave-kidszone-invite__star--two { right: 7px; top: 5px; font-size: 16px; animation-delay: -1s; }
.brave-kidszone-invite__star--three { right: 17px; bottom: 18px; font-size: 26px; animation-delay: -1.8s; }

.brave-kidszone-invite__rocket {
	position: absolute;
	right: 5px;
	top: 65px;
	font-size: 44px;
	transform: rotate(-22deg);
}

.brave-kidszone-invite .brave-eyebrow {
	color: #9CC9FF;
}

.brave-kidszone-invite__copy h2 {
	margin: 0;
	font-size: var(--text-h2);
	line-height: var(--lh-h2);
	color: var(--white);
}

.brave-kidszone-invite__copy > p:last-child {
	max-width: 630px;
	margin: var(--space-3) 0 0;
	font-size: var(--text-body-lg);
	line-height: var(--lh-body);
	color: #E2EFFF;
}

.brave-kidszone-invite__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	min-height: 58px;
	padding: var(--space-3) var(--space-4);
	color: #071733;
	background: #FFD45C;
	border: 3px solid #FFD45C;
	border-radius: var(--radius-pill);
	font-size: var(--text-body-lg);
	font-weight: var(--weight-bold);
	text-decoration: none;
	box-shadow: 0 7px 0 #9C6500;
	transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

.brave-kidszone-invite__button:hover,
.brave-kidszone-invite__button:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 0 #9C6500;
}

@keyframes brave-kidszone-invite-twinkle {
	from { opacity: 0.45; transform: scale(0.8); }
	to { opacity: 1; transform: scale(1.15); }
}

@media ( max-width: 760px ) {
	.brave-kidszone-invite__inner {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: var(--space-3);
	}

	.brave-kidszone-invite__art {
		width: 96px;
		height: 110px;
	}

	.brave-kidszone-invite__moon {
		left: 5px;
		top: 18px;
		width: 76px;
		height: 76px;
	}

	.brave-kidszone-invite__moon::after {
		right: -12px;
		top: -6px;
		width: 76px;
		height: 76px;
	}

	.brave-kidszone-invite__rocket {
		right: -7px;
		top: 45px;
		font-size: 31px;
	}

	.brave-kidszone-invite__star--three {
		display: none;
	}

	.brave-kidszone-invite__button {
		grid-column: 1 / -1;
		width: 100%;
	}
}

.brave-program-grid {
	display: grid;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

@media ( min-width: 720px ) {
	.brave-program-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.brave-program-card {
	--program-accent: var(--program-books);
	--program-tint: var(--program-books-tint);

	display: flex;
	min-width: 0;
	height: 100%;
	flex-direction: column;
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-top: 5px solid var(--program-accent);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.brave-program-card--health {
	--program-accent: var(--program-health);
	--program-tint: var(--program-health-tint);
}

.brave-program-card--bucks {
	--program-accent: var(--program-bucks);
	--program-tint: var(--program-bucks-tint);
}

.brave-program-card__media {
	/* These are portrait-format program posters, not decorative crops. Keep
	   their intrinsic ratio so the complete artwork and embedded title remain
	   visible at every card width. */
	aspect-ratio: 733 / 1100;
	background: var(--program-tint);
	overflow: hidden;
}

.brave-program-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.brave-program-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--space-4);
}

.brave-program-card__number {
	align-self: flex-start;
	margin: 0 0 var(--space-3);
	padding: var(--space-1) var(--space-2);
	font-size: var(--text-caption-size);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-caps);
	color: var(--program-accent);
	background: var(--program-tint);
	border-radius: var(--radius-pill);
}

.brave-program-card__title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-h4);
	line-height: var(--lh-h4);
	font-weight: var(--weight-semibold);
	color: var(--ink);
}

.brave-program-card__text {
	flex: 1;
	margin: 0;
	font-size: var(--text-body-md);
	line-height: var(--lh-body);
	color: var(--text-muted);
}

.brave-program-card__goal {
	margin: var(--space-4) 0 0;
	padding: var(--space-3);
	font-size: var(--text-caption-size);
	line-height: var(--lh-caption);
	color: var(--program-accent);
	background: var(--program-tint);
	border-radius: var(--radius-md);
}

/* ----------------------------------------------------------- Blog cards */

.brave-post-grid {
	display: grid;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

@media ( min-width: 640px ) {
	.brave-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media ( min-width: 960px ) {
	.brave-post-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.brave-post-card {
	min-width: 0;
	height: 100%;
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transition: border-color var(--dur-med) var(--ease-standard),
		box-shadow var(--dur-med) var(--ease-standard),
		transform var(--dur-med) var(--ease-standard);
}

.brave-post-card:hover,
.brave-post-card:focus-within {
	border-color: var(--gray-400);
	box-shadow: var(--shadow-raised);
	transform: translateY(-4px);
}

.brave-post-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--ink);
	text-decoration: none;
}

.brave-post-card__media {
	height: 180px;
	background: var(--gray-200);
	overflow: hidden;
}

.brave-post-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-standard);
}

.brave-post-card:hover .brave-post-card__image,
.brave-post-card:focus-within .brave-post-card__image {
	transform: scale(1.04);
}

.brave-post-card__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-caps);
	color: var(--gray-600);
	background: linear-gradient(135deg, var(--gray-100), var(--gray-300));
}

.brave-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--space-4);
}

.brave-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
	font-size: var(--text-caption-size);
	line-height: var(--lh-caption);
	color: var(--text-caption);
}

.brave-post-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-h4);
	line-height: var(--lh-h4);
	font-weight: var(--weight-semibold);
	text-wrap: balance;
}

.brave-post-card__excerpt {
	flex: 1;
	margin: var(--space-2) 0 var(--space-3);
	font-size: var(--text-body-md);
	line-height: var(--lh-body);
	color: var(--text-muted);
}

.brave-post-card__more {
	align-self: flex-start;
	font-weight: var(--weight-semibold);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--dur-fast) var(--ease-standard);
}

.brave-post-card:hover .brave-post-card__more,
.brave-post-card:focus-within .brave-post-card__more {
	text-decoration-color: currentColor;
}

.brave-page-hero {
	padding-block: var(--space-7);
	background: var(--surface-dark);
	color: var(--text-on-dark);
}

.brave-page-hero .brave-eyebrow {
	color: var(--gray-300);
}

.brave-page-hero__title {
	max-width: 18ch;
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-h1);
	line-height: var(--lh-h1);
	color: var(--white);
	text-wrap: balance;
}

.brave-pagination {
	margin-top: var(--space-7);
}

.brave-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.brave-pagination a,
.brave-pagination .current,
.brave-pagination .dots {
	display: inline-flex;
	min-width: var(--touch-target);
	min-height: var(--touch-target);
	align-items: center;
	justify-content: center;
	padding-inline: var(--space-2);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	text-decoration: none;
}

.brave-pagination a:hover,
.brave-pagination .current {
	color: var(--white);
	background: var(--ink);
	border-color: var(--ink);
}

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

.brave-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--touch-target);
	margin-top: var(--space-4);
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-button);
	font-weight: var(--weight-semibold);
	border-radius: var(--radius-md);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-standard),
		color var(--dur-fast) var(--ease-standard);
}

.brave-btn--donate {
	color: var(--cta-donate-text);
	background: var(--cta-donate-bg);
	border: 2px solid var(--cta-donate-bg);
}

.brave-btn--donate:hover {
	background: var(--cta-donate-hover);
	border-color: var(--cta-donate-hover);
	color: var(--cta-donate-text);
}

.brave-btn--secondary {
	color: var(--ink);
	background: transparent;
	border: 2px solid var(--border-strong);
}

.brave-btn--secondary:hover {
	background: var(--ink);
	color: var(--white);
}

.brave-btn--block {
	width: 100%;
}

/* --------------------------------------------------------------- Stats */

.brave-goals-summary {
	margin-top: var(--space-7);
	padding: var(--space-6);
	color: var(--white);
	background: var(--ink);
	border-radius: var(--radius-lg);
}

.brave-goals-summary .brave-eyebrow {
	color: var(--blue-300);
}

.brave-goals-summary__title {
	margin: var(--space-2) 0 0;
	font-family: var(--font-display);
	font-size: var(--text-h3);
	line-height: var(--lh-h3);
	color: var(--white);
}

.brave-goals-summary__intro {
	max-width: 680px;
	margin: var(--space-3) auto 0;
	font-size: var(--text-body-md);
	line-height: var(--lh-body);
	color: var(--gray-300);
}

.brave-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
	margin-top: var(--space-6);
}

@media ( min-width: 900px ) {
	.brave-stats {
		grid-template-columns: repeat(4, 1fr);
	}
}

.brave-stat__value {
	font-family: var(--font-display);
	font-size: var(--text-display);
	line-height: var(--lh-display);
	font-weight: var(--weight-bold);
	color: var(--white);
}

.brave-stat:nth-child(1) .brave-stat__value {
	color: var(--blue-300);
}

.brave-stat:nth-child(2) .brave-stat__value {
	color: var(--orange-300);
}

.brave-stat:nth-child(3) .brave-stat__value {
	color: var(--green-300);
}

.brave-stat__label {
	margin: var(--space-2) 0 0;
	font-size: var(--text-body-md);
	line-height: var(--lh-body);
	color: var(--gray-300);
}

/* -------------------------------------------------------- Testimonials */

.brave-quote {
	margin: 0;
	padding: var(--space-4);
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-left: 4px solid var(--ink);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.brave-quote--blue {
	border-left-color: var(--program-books);
}

.brave-quote--orange {
	border-left-color: var(--program-health);
}

.brave-quote--green {
	border-left-color: var(--program-bucks);
}

.brave-quote__text {
	margin: 0;
	font-size: var(--text-body-lg);
	line-height: var(--lh-body);
	color: var(--ink);
}

.brave-quote__text > :first-child {
	margin-top: 0;
}

.brave-quote__text > :last-child {
	margin-bottom: 0;
}

.brave-quote__rating {
	margin: 0 0 var(--space-3);
	font-size: var(--text-body-lg);
	letter-spacing: 0.12em;
	color: var(--orange-700);
}

.brave-quote__cite {
	display: block;
	margin-top: var(--space-3);
	font-size: var(--text-caption-size);
	font-style: normal;
	font-weight: var(--weight-semibold);
	color: var(--text-muted);
}

/* --------------------------------------------------------- Scroll reveal */

/*
  Scroll reveal — deliberately has NO hidden state.

  Elements are fully visible by default. JS adds .is-in as an element enters the
  viewport, and only then does the fade play (starting from opacity 0 via the
  keyframes). Nothing is ever set to opacity 0 and left waiting to be turned
  back on, so JS failing, being throttled in a background tab, or the visitor
  jumping past a section can never leave content permanently invisible.

  On a government site, invisible content is an accessibility failure — this is
  why the animation is additive rather than a reveal-from-hidden.
*/
.js-reveal.is-in {
	/* Do not retain the animation's final transform: hover and :focus-within
	   elevation must be able to take over after the entrance completes. */
	animation: brave-fade-up var(--dur-slow) var(--ease-standard);
}

@media ( prefers-reduced-motion: reduce ) {
	.js-reveal.is-in {
		animation: none;
	}

	.brave-post-card:hover,
	.brave-post-card:focus-within,
	.brave-post-card:hover .brave-post-card__image,
	.brave-post-card:focus-within .brave-post-card__image,
	.brave-card:hover,
	.brave-card:focus-within {
		transform: none;
	}

}

/* ------------------------------------------------------------ Site header */

.brave-siteheader {
	background: var(--surface-page);
	border-bottom: 1px solid var(--border-default);
}

.brave-siteheader__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--space-3);
}

.brave-siteheader__brand {
	display: inline-flex;
	align-items: center;
	color: var(--ink);
	text-decoration: none;
}

.brave-siteheader__logo {
	width: auto;
	/* Client feedback (Aug 2026): "make our logo BIGGER". 64px → 84px. The
	   header is min-height driven, so it grows to fit; nav and actions stay
	   vertically centered beside it. Mobile keeps a smaller mark — see the
	   max-width: 1099px block below. */
	height: 84px;
	max-width: 280px;
	object-fit: contain;
}

/*
  .brave-siteheader__navgroup wraps <nav> + the action buttons so the header
  stays a two-item flex row (brand, navgroup) — see the comment in
  page-home.php for why a bare third top-level item would misbehave.
*/
.brave-siteheader__navgroup {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Keep browse links and action buttons distinct without pushing the action
	   cluster into a second row on ordinary desktop widths. */
	gap: var(--space-4);
}

.brave-siteheader__actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/*
  Structure: <nav class="brave-siteheader__nav"><ul class="brave-nav__list">
  <li class="brave-nav-item">…</li></ul></nav>, produced by wp_nav_menu() +
  Brave_Nav_Walker (see includes/class-nav-walker.php). The <ul> is the flex
  row; each <li> is a flex item. Groups (dropdowns) are nested <li><ul
  class="brave-submenu"> inside a top-level <li>, built from Appearance →
  Menus by nesting items there — no template change needed to add a group.
*/
.brave-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.brave-nav-item {
	position: relative;
}

.brave-nav-item > a {
	display: inline-flex;
	align-items: center;
	/* 2.5.8 Target Size — keep nav links a comfortable target, not 18px text. */
	min-height: var(--touch-target);
	font-size: var(--text-body-md);
	font-weight: var(--weight-semibold);
	color: var(--ink);
	text-decoration: none;
}

.brave-nav-item > a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.brave-siteheader__cta,
.brave-siteheader__cta:hover {
	margin-top: 0;
	text-decoration: none;
}

/*
  Utility link in the actions cluster (Contact). Matches nav-link typography so
  it reads as navigation, but stays unboxed so the two real buttons beside it
  keep their visual priority.
*/
.brave-siteheader__utility {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-target);
	font-size: var(--text-body-md);
	font-weight: var(--weight-semibold);
	color: var(--ink);
	text-decoration: none;
}

.brave-siteheader__utility:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------- Dropdown groups */

/*
  No-JS baseline: a plain nested list, fully visible, indented under its
  parent. This is what a visitor with JavaScript disabled sees — every link in
  every group, always reachable, nothing hidden behind a control that might
  not work. home.js progressively enhances this into a proper disclosure
  dropdown; see initSubmenus() there.
*/
.brave-submenu {
	margin: var(--space-2) 0 0 var(--space-3);
	padding: 0;
	list-style: none;
	border-left: 2px solid var(--border-default);
}

.brave-submenu .brave-nav-item > a {
	min-height: var( --touch-target );
	padding-left: var(--space-3);
	font-weight: var(--weight-regular);
}

/*
  JS-enhanced state (desktop): the toggle button home.js inserts, and the
  submenu becomes an absolutely positioned dropdown panel, shown only while
  its <li> carries [data-open="true"].
*/
.brave-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--touch-target);
	height: var(--touch-target);
	margin-left: -6px;
	padding: 0;
	color: var(--ink);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.brave-submenu-toggle__chevron {
	display: inline-block;
	transition: transform var(--dur-fast) var(--ease-standard);
}

.brave-nav-item[data-open='true'] .brave-submenu-toggle__chevron {
	transform: rotate(180deg);
}

@media ( min-width: 1100px ) {
	/* Use the full header row deliberately: keep the logo close to the first
	   navigation item, let the browse links share the remaining space, and
	   preserve a clear break before the action cluster. */
	.brave-siteheader__inner {
		flex-wrap: nowrap;
		justify-content: flex-start;
	}

	.brave-siteheader__navgroup {
		flex: 1 1 auto;
		flex-wrap: nowrap;
		min-width: 0;
		margin-left: var(--space-5);
		gap: var(--space-5);
	}

	.brave-siteheader__nav {
		flex: 1 1 auto;
		min-width: 0;
	}

	.brave-nav__list {
		justify-content: space-between;
	}

	.brave-siteheader__actions {
		flex: 0 0 auto;
		gap: var(--space-3);
	}

	/* Only when JS has actually wired the toggle (js-enhanced on <html>) do we
	   switch the submenu to a floating, closed-by-default panel. Without that
	   class the plain nested list above stays in the flow, matching the no-JS
	   guarantee even at desktop width. */
	.js-enhanced .brave-submenu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 20;
		min-width: 220px;
		margin: var(--space-2) 0 0;
		padding: var(--space-2);
		background: var(--surface-card);
		border: 1px solid var(--border-default);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-raised);
	}

	.js-enhanced .brave-nav-item:not([data-open='true']) .brave-submenu {
		display: none;
	}

	.js-enhanced .brave-submenu .brave-nav-item > a {
		padding-left: var(--space-2);
	}
}

/* ------------------------------------------------------------ Site footer */

.brave-sitefooter {
	background: var(--surface-dark);
	color: var(--text-on-dark);
}

.brave-sitefooter__main {
	display: grid;
	grid-template-columns: minmax(230px, 1.4fr) minmax(130px, 0.7fr) minmax(150px, 0.8fr) minmax(250px, 1.25fr);
	gap: var(--space-7);
	padding-block: var(--space-7);
}

.brave-sitefooter__brand-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-bold);
	line-height: 1.15;
	color: var(--white);
	text-decoration: none;
}

.brave-sitefooter__brand-link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.brave-sitefooter__logo {
	width: 72px;
	height: 54px;
	object-fit: contain;
	background: var(--white);
	border-radius: var(--radius-sm);
}

.brave-sitefooter__tagline {
	max-width: 34ch;
	margin: var(--space-4) 0 0;
	font-size: var(--text-body-md);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-body);
	color: var(--white);
}

.brave-sitefooter__summary {
	max-width: 38ch;
	margin: var(--space-2) 0 0;
	font-size: var(--text-caption-size);
	line-height: var(--lh-body);
	color: var(--gray-300);
}

.brave-sitefooter h2 {
	margin: 0 0 var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-body-md);
	font-weight: var(--weight-bold);
	letter-spacing: 0.01em;
	color: var(--white);
}

.brave-sitefooter__nav ul,
.brave-sitefooter__socials,
.brave-sitefooter__bottom ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.brave-sitefooter__nav li + li {
	margin-top: var(--space-2);
}

.brave-sitefooter a {
	color: var(--white);
}

.brave-sitefooter__nav a,
.brave-sitefooter__contact address a,
.brave-sitefooter__bottom a {
	text-decoration-color: transparent;
	text-underline-offset: 4px;
}

.brave-sitefooter__nav a:hover,
.brave-sitefooter__contact address a:hover,
.brave-sitefooter__bottom a:hover {
	text-decoration-color: currentColor;
}

.brave-sitefooter__contact address {
	display: grid;
	gap: var(--space-1);
	font-style: normal;
	font-size: var(--text-caption-size);
	line-height: var(--lh-body);
	color: var(--gray-300);
}

.brave-sitefooter__contact address a:first-of-type {
	margin-top: var(--space-2);
}

.brave-sitefooter__phone-number {
	white-space: nowrap;
}

.brave-sitefooter .brave-sitefooter__follow-heading {
	margin-top: var(--space-5);
}

.brave-sitefooter__socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.brave-sitefooter__socials a {
	display: flex;
	width: var(--touch-target);
	height: var(--touch-target);
	min-height: var(--touch-target);
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: var(--text-caption-size);
	text-decoration: none;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 50%;
}

.brave-sitefooter__socials a:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.48);
}

.brave-sitefooter__socials svg {
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	padding: 8px;
	fill: none;
	stroke: var(--surface-dark);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	background: var(--white);
	border-radius: 50%;
}

.brave-sitefooter__socials .brave-sitefooter__social-dot {
	fill: var(--surface-dark);
	stroke: none;
}

.brave-sitefooter__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(0, 0, 0, 0.16);
}

.brave-sitefooter__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-3);
	font-size: var(--text-caption-size);
	color: var(--gray-300);
}

.brave-sitefooter__bottom p {
	margin: 0;
}

.brave-sitefooter__bottom ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--space-2) var(--space-4);
}

@media ( max-width: 1020px ) {
	.brave-sitefooter__main {
		grid-template-columns: minmax(240px, 1.3fr) repeat(2, minmax(130px, 0.7fr));
	}

	.brave-sitefooter__contact {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(230px, 1fr) minmax(300px, 1.5fr);
		column-gap: var(--space-6);
	}

	.brave-sitefooter__contact address {
		grid-column: 1;
	}

	.brave-sitefooter .brave-sitefooter__follow-heading {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}

	.brave-sitefooter__socials {
		grid-column: 2;
		grid-row: 2;
	}
}

@media ( max-width: 720px ) {
	.brave-sitefooter__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-6) var(--space-4);
	}

	.brave-sitefooter__brand,
	.brave-sitefooter__contact {
		grid-column: 1 / -1;
	}

	.brave-sitefooter__contact {
		display: block;
	}

	.brave-sitefooter .brave-sitefooter__follow-heading {
		margin-top: var(--space-5);
	}

	.brave-sitefooter__bottom-inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.brave-sitefooter__bottom ul {
		justify-content: flex-start;
	}
}

@media ( max-width: 420px ) {
	.brave-sitefooter__main {
		grid-template-columns: 1fr;
	}

	.brave-sitefooter__brand,
	.brave-sitefooter__contact {
		grid-column: auto;
	}
}

/* ==========================================================================
   Responsive / mobile
   ==========================================================================
   Breakpoint is 900px, matching the hero's two-column switch, so the layout
   changes as one step rather than in pieces.
   ========================================================================== */

/* -------------------------------------------------------- Mobile nav toggle */

/*
  The toggle button is CREATED BY JAVASCRIPT (see home.js). That is deliberate:
  with JS disabled the nav simply renders as a visible stacked list, and the
  visitor never meets a button that does nothing. Navigation must not depend on
  JavaScript on a government site.
*/
.brave-nav-toggle {
	display: none;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--touch-target);
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-body-md);
	font-weight: var(--weight-semibold);
	color: var(--ink);
	background: transparent;
	border: 2px solid var(--border-strong);
	border-radius: var(--radius-md);
	cursor: pointer;
}

.brave-nav-toggle__bars {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.brave-nav-toggle__bars::before,
.brave-nav-toggle__bars::after {
	content: '';
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.brave-nav-toggle__bars::before {
	top: -6px;
}

.brave-nav-toggle__bars::after {
	top: 6px;
}

@media ( max-width: 1099px ) {
	/* The 84px desktop mark would dominate the compact header and push the
	   Menu toggle onto its own row — scale it back at this breakpoint. */
	.brave-siteheader__logo {
		height: 60px;
	}

	.brave-nav-toggle {
		display: inline-flex;
	}

	/*
	 * Deliberately no `flex-wrap: nowrap` here. The base rule (top of this
	 * file) sets flex-wrap: wrap on .brave-siteheader__inner, which is required
	 * for the next rule to work: .brave-siteheader__nav has flex-basis: 100%,
	 * meaning "take a whole row of your own." Wrap is what lets it actually
	 * drop onto a new line below the logo and toggle when opened — nowrap
	 * forces the browser to squeeze it into the same row instead, which is
	 * exactly the squished-into-the-header bug this comment is here to
	 * prevent someone reintroducing.
	 */

	.brave-siteheader__navgroup {
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.brave-siteheader__nav {
		padding-bottom: var(--space-2);
	}

	.brave-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.brave-nav-item > a {
		/* Full-width rows: a comfortable target instead of a 34px word. */
		padding: var(--space-2) 0;
		border-bottom: 1px solid var(--border-default);
	}

	/* Keep nested links in the document flow as the no-JS fallback. When JS is
	   available, each top-level group becomes a compact disclosure so opening
	   the tablet menu does not expand every submenu at once. */
	.brave-nav-item--has-children {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--touch-target);
		align-items: stretch;
	}

	.brave-nav-item--has-children > a {
		grid-column: 1;
		grid-row: 1;
	}

	.brave-nav-item--has-children > .brave-submenu-toggle {
		grid-column: 2;
		grid-row: 1;
		display: inline-flex;
		width: var(--touch-target);
		min-height: var(--touch-target);
		margin: 0;
		border-bottom: 1px solid var(--border-default);
	}

	.brave-nav-item--has-children > .brave-submenu {
		grid-column: 1 / -1;
		margin: 0;
		padding: var(--space-1) 0 var(--space-1) var(--space-3);
	}

	.js-enhanced .brave-nav-item--has-children:not([data-open='true']) > .brave-submenu {
		display: none;
	}

	.brave-submenu .brave-nav-item > a {
		border-bottom: 1px solid var(--border-default);
	}

	/* Donate CTA moved out of <nav> (see page-home.php) since it's a call to
	   action, not a page link — but on mobile it should still appear as part
	   of the same open/close panel as the page links, at full width. */
	.brave-siteheader__cta {
		margin-top: var(--space-2);
		justify-content: center;
	}

	.brave-siteheader__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.brave-siteheader__actions .brave-siteheader__cta {
		width: 100%;
	}

	/* Contact rejoins the stacked link list on mobile — the actions cluster
	   and the nav are one open/close panel here, so it should read as another
	   full-width row, not a floating word above the buttons. */
	.brave-siteheader__utility {
		padding: var(--space-2) 0;
		border-bottom: 1px solid var(--border-default);
	}

	/* JS sets this attribute; without JS the nav and action buttons stay open
	   and usable rather than depending on a toggle that might not exist. */
	.brave-siteheader[data-nav='closed'] .brave-siteheader__navgroup {
		display: none;
	}
}

/* ------------------------------------------------------- Scale down type */

@media ( max-width: 899px ) {
	.brave-hero__inner {
		padding-block: var(--space-7);
		gap: var(--space-5);
	}

	.brave-hero__title {
		font-size: var(--text-h2);
		line-height: var(--lh-h2);
	}

	.brave-hero__subtitle {
		font-size: var(--text-body-md);
	}

	.brave-section {
		padding-block: var(--space-6);
	}

	.brave-section__title {
		font-size: var(--text-h3);
		line-height: var(--lh-h3);
	}

	.brave-section__subtitle {
		font-size: var(--text-body-md);
	}

	.brave-grid {
		margin-top: var(--space-5);
	}

	.brave-program-grid {
		margin-top: var(--space-5);
	}

	/* 56px numerals crowd a 375px screen and force awkward two-line labels. */
	.brave-stat__value {
		font-size: var(--text-h1);
		line-height: var(--lh-h1);
	}

	.brave-stats {
		gap: var(--space-5);
		margin-top: var(--space-5);
	}

	.brave-sitefooter {
		padding-block: var(--space-6);
	}
}

/* ------------------------------------------------- Donation module, narrow */

@media ( max-width: 480px ) {
	/* Four columns leaves ~54px per button — too tight to read or hit
	   comfortably. Two rows of two gives each a full-width target. */
	.brave-donate__amounts {
		grid-template-columns: repeat(2, 1fr);
	}

	.brave-donate {
		padding: var(--space-4);
	}

}