/**
 * Nashon — small graphic utilities theme.json / core block attributes
 * can't express on their own, for the hero, donate band, and footer.
 * Everything else (color, type, spacing) lives in theme.json.
 */

/* WordPress puts a margin-top (the theme's default blockGap) between
   the three root template blocks — header, <main>, and the footer
   template part — that isn't reachable via a block attribute the way
   <main>'s OWN blockGap is (front-page.html). Pin both to 1px directly. */
main.wp-block-group {
	margin-top: 1px;
}
footer.wp-block-template-part {
	margin-top: 1px;
}

/* Single post/initiative view (templates/single.html) — genuinely
   dynamic core blocks (post-date/post-author-name/post-terms,
   post-title, post-featured-image, post-content), so any post type
   using the default single template gets a readable, on-brand page
   without a dedicated template per post type. Two columns: article +
   a real sidebar (nashon/single-sidebar — Post Info + Latest Posts),
   reusing .latest-post/.latest-posts from the homepage News section. */
.single-content {
	padding-bottom: clamp(64px, 8vw, 112px);
}
/* Title sits on the featured image itself, reusing .page-hero wholesale
   (photo + torn bottom edge + the same split-heading treatment every
   other page title uses) instead of a plain text title above a
   separate image. .page-hero__media is normally a plain <div>
   elsewhere; here it's a real <figure> (wp:post-featured-image), so it
   needs its own margin reset. No .page-hero__overlay here — unlike
   Contact/Blog/Archive, this photo IS the actual post's own image and
   should read clearly; the dark layer is scoped to a backdrop that
   hugs the title+meta content directly instead of washing the whole
   photo (see .single-hero__backdrop), and it never touches the torn
   edge so the tear stays crisp regardless of title length. */
.single-hero {
	margin-bottom: clamp(32px, 5vw, 56px);
}
.single-hero .page-hero__media {
	margin: 0;
}
/* The shared .page-hero__inner caps out at 760px, which was quietly
   overriding .single-hero__backdrop's own (wider) max-width below and
   forcing long titles into a tall, narrow stack of short lines —
   reads as a boxy rectangle rather than a fitted panel. Loosen it here
   so the backdrop can actually use the width it's allowed. */
.single-hero .page-hero__inner {
	max-width: min(94vw, 1100px);
}
.single-hero__backdrop {
	display: inline-block;
	max-width: 100%;
	padding: clamp(20px, 3vw, 32px) clamp(24px, 4vw, 40px);
	border-radius: 16px;
	/* No backdrop-filter blur — the featured image behind this can be
	   something like an event banner where the photo's own detail
	   still matters, not just a generic background. The dark tint
	   alone gives the title contrast without smudging that. */
	background: rgba(20, 20, 20, 0.55);
}
/* Same solid-to-hollow split as every other page title — first half of
   the real post title solid white, back half a hollow/outline stroke
   (see patterns/single-title.php, which computes the split since it
   depends on the actual title text). */
.single-hero__title {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	text-transform: uppercase;
	/* Not text-wrap:balance — balance evens out line lengths, which for
	   a long title means MORE, shorter lines (a tall, narrow stack).
	   Plain wrapping fills each line before breaking, so the title
	   spreads wider and stacks fewer lines instead. */
	text-wrap: wrap;
}
.single-hero__title span {
	color: transparent;
	-webkit-text-stroke: 1.5px #fff;
}
.single-meta {
	gap: 14px !important;
	margin-top: 16px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9rem;
}
.single-meta__date,
.single-meta__author {
	color: rgba(255, 255, 255, 0.75);
}
.single-meta__category a {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	color: var(--wp--preset--color--base);
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: none;
}
.single-layout.wp-block-columns {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}
.single-layout__main {
	flex: 2.2 2.2 0% !important;
}
.single-layout__sidebar {
	flex: 1 1 0% !important;
	position: sticky;
	top: 96px;
}
.single-content .entry-content p {
	color: var(--wp--preset--color--muted);
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
	line-height: 1.75;
}
.single-content .entry-content blockquote {
	margin: 32px 0;
	padding: 8px 0 8px 24px;
	border-left: 4px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--paper);
	border-radius: 0 8px 8px 0;
}
.single-content .entry-content blockquote p {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1rem, 1.5vw, 1.35rem);
	font-style: italic;
	line-height: 1.5;
}

/* Sidebar — Post Info + Latest Posts cards */
.single-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
/* Always a column, unlike .news-sidebar (which briefly goes row at
   the 1024px breakpoint) — pin .search-form/.latest-posts back to
   their own content height regardless of any flex-basis rules meant
   for that row state, so they can never balloon here. */
.single-sidebar > .search-form,
.single-sidebar > .single-sidebar__card {
	flex: 0 0 auto;
}
.single-sidebar__card {
	padding: 24px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
}
.single-sidebar__card h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1rem;
	font-weight: 800;
}
.single-sidebar__bar {
	display: inline-block;
	width: 5px;
	height: 20px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
}
.single-sidebar__info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.single-sidebar__info li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.88rem;
}
.single-sidebar__info li span {
	color: var(--wp--preset--color--muted);
}
.single-sidebar__info li strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}
.single-sidebar__info li strong a {
	color: inherit;
	text-decoration: none;
}
.single-sidebar__info li strong a:hover {
	color: var(--wp--preset--color--primary);
}

@media (max-width: 900px) {
	.single-layout.wp-block-columns {
		flex-wrap: wrap !important;
	}
	.single-layout__main,
	.single-layout__sidebar {
		flex: 1 1 100% !important;
	}
	.single-layout__sidebar {
		position: static;
	}
}

/* ===== 404 — typographic, no photo. ===== */
.error-404 {
	padding: clamp(64px, 10vw, 128px) 24px clamp(56px, 8vw, 96px);
	text-align: center;
}
.error-404__inner {
	max-width: 640px;
	margin: 0 auto;
}
.error-404__code {
	margin: 0 0 24px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(4rem, 16vw, 8rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}
.error-404__code span {
	color: transparent;
	-webkit-text-stroke: 2px var(--wp--preset--color--primary);
}
.error-404 .section-label {
	justify-content: center;
	margin: 0 auto 20px;
}
.error-404 h1 {
	margin: 0 0 16px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	text-transform: uppercase;
	text-wrap: balance;
}
.error-404 h1 span {
	color: transparent;
	-webkit-text-stroke: 1.5px #000;
}
.error-404__intro {
	margin: 0 auto 32px;
	max-width: 30rem;
	color: var(--wp--preset--color--muted);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1rem);
	line-height: 1.65;
}
.error-404__search {
	max-width: 420px;
	margin: 0 auto 28px;
}
.error-404__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
@media (max-width: 480px) {
	.error-404__links {
		flex-direction: column;
		align-items: stretch;
	}
	.error-404__links .btn {
		justify-content: center;
	}
}

/* ===== Page hero — the sitewide interior-page header: a real photo,
   dark overlay for legible white text, and a torn bottom edge (curved
   SVG clipPath, not a polygon()'s straight facets — see the
   wp_footer-injected <defs> in functions.php) that exposes the page's
   own white background underneath, the way the client reference tears
   its hero photo at the bottom. Every interior page (Contact, About,
   Agenda, ...) uses this same markup/class:
     <section class="page-hero page-hero--tear-N">
       <div class="page-hero__media"><img ...><div class="page-hero__overlay"></div></div>
       <div class="page-hero__inner"> ...section-label + h1 + breadcrumb... </div>
     </section>
   Pick a DIFFERENT tear-N (1-4, see below) per page so pages sitting
   near each other in the nav don't all show the identical rip. ===== */
.page-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(360px, 42vw, 480px);
	padding: 24px;
	background: var(--wp--preset--color--base);
	text-align: center;
}
.page-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Curved, hand-drawn tear (SVG clipPath with bezier curves — see
	   the wp_footer-injected <defs> in functions.php) rather than a
	   polygon()'s straight-line facets, so the edge actually looks torn
	   instead of cut. Four variants exist (page-hero--tear-1..4) so
	   different pages don't all show the identical rip; this bare
	   fallback covers a .page-hero with no variant class. */
	clip-path: url(#page-hero-tear-2);
}
.page-hero--tear-1 .page-hero__media {
	clip-path: url(#page-hero-tear-1);
}
.page-hero--tear-2 .page-hero__media {
	clip-path: url(#page-hero-tear-2);
}
.page-hero--tear-3 .page-hero__media {
	clip-path: url(#page-hero-tear-3);
}
.page-hero--tear-4 .page-hero__media {
	clip-path: url(#page-hero-tear-4);
}
.page-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.page-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 20, 20, 0.45), rgba(20, 20, 20, 0.75));
}
.page-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto;
	padding-bottom: clamp(32px, 5vw, 56px);
}
/* Variant used where the photo should read clearly rather than sit
   under a full wash (currently Blog/About) — same idea as the
   single-post .single-hero__backdrop: the dark layer hugs the actual
   label+title+breadcrumb content instead of covering the whole photo
   in a flat rectangle. .page-hero__inner still just centers it.
   padding-bottom is more generous than the base variant's, not 0 —
   the torn bottom edge clips away a slice of this section's own
   height, and with no full overlay to blur the seam, the backdrop
   needs real clearance so it never touches that cut. */
.page-hero--fit-backdrop .page-hero__inner {
	max-width: 100%;
	padding-bottom: clamp(48px, 6vw, 72px);
}
.page-hero__backdrop {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	max-width: min(90vw, 800px);
	padding: clamp(28px, 4vw, 44px) clamp(28px, 5vw, 52px);
	border-radius: 20px;
	/* No blur — see .single-hero__backdrop for why: the photo behind
	   this can matter in its own right (e.g. an event banner). */
	background: rgba(20, 20, 20, 0.55);
}
.page-hero .section-label {
	justify-content: center;
	margin: 0 auto 22px;
}
.page-hero h1 {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 5vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-transform: uppercase;
	text-wrap: balance;
}
/* Same solid-to-hollow split as every other section heading (about,
   donate-band, initiatives, core-values, footer) — white stroke since
   this banner sits on a dark-overlaid photo like those do. */
.page-hero h1 span {
	color: transparent;
	-webkit-text-stroke: 1.5px #fff;
}
.page-hero__intro {
	margin: 16px auto 0;
	max-width: 32rem;
	color: rgba(255, 255, 255, 0.8);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
	line-height: 1.6;
}
.page-hero__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 8px;
	margin-top: 22px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9rem;
	text-align: center;
}
.page-hero__breadcrumb a {
	color: inherit;
	text-decoration: none;
}
.page-hero__breadcrumb a:hover {
	color: var(--wp--preset--color--base);
}
.page-hero__breadcrumb svg {
	flex: none;
	color: rgba(255, 255, 255, 0.4);
}
.page-hero__breadcrumb span {
	color: var(--wp--preset--color--secondary);
	font-weight: 700;
}

/* Shared button components, built on the real core/button block (not a
   bare <a>) so editors can change the label/link from the block editor
   like any other button. className lands on the outer .wp-block-button
   wrapper — the actual visual styling has to target the inner
   .wp-block-button__link anchor core always renders inside it.
   .btn carries every shared property (font, motion, and color — via
   --btn-* custom properties, defaulted to the primary brand color below
   so a page/section only needs to redeclare the ones it wants to
   change, e.g. .some-dark-section .btn { --btn-bg: #fff; --btn-color:
   var(--wp--preset--color--contrast); }). .btn--rect (sharp corners,
   wide) and .btn--circle (fixed-size disc, stacked icon+label) are this
   site's two shapes — reach for --rect on a normal text CTA and
   --circle on a compact icon-forward link. Hero adds its own
   position/z-index on top of whichever sits there (see hero-exact.css). */
/* button.btn / a.btn cover cases that aren't a real core/button block
   — a raw <button> inside a <form> (can't be a block there), or a
   plain <a> written directly in a pattern's raw HTML instead of
   through wp:buttons. Same visual treatment, applied directly instead
   of via a nested .wp-block-button__link. */
.btn .wp-block-button__link,
button.btn,
a.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 0;
	background: var(--btn-bg, var(--wp--preset--color--primary));
	color: var(--btn-color, #fff);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	box-shadow: var(--btn-shadow, 0 8px 16px rgba(49, 161, 255, 0.35));
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	text-decoration: none;
	cursor: pointer;
}
.btn .wp-block-button__link:hover,
.btn .wp-block-button__link:focus-visible,
button.btn:hover,
button.btn:focus-visible,
a.btn:hover,
a.btn:focus-visible {
	background: var(--btn-bg-hover, #1a8de6);
	color: var(--btn-color, #fff);
	transform: translateY(-3px);
	outline: none;
}
.btn .wp-block-button__link span,
button.btn span,
a.btn span {
	font-size: 17px;
}

.btn--rect .wp-block-button__link,
button.btn--rect,
a.btn--rect {
	border-radius: 0;
	padding: 17px 43px;
}
@media (max-width: 700px) {
	.btn--rect .wp-block-button__link,
	button.btn--rect,
	a.btn--rect {
		padding: 14px 29px;
	}
}

.btn--circle .wp-block-button__link {
	flex-direction: column;
	width: 90px;
	height: 90px;
	padding: 0;
	gap: 2px;
	border-radius: 50%;
	font-size: 12px;
	text-align: center;
}
.btn--circle .wp-block-button__link span {
	font-size: 18px;
}

/* Warm accent variant — secondary amber instead of primary blue, for a
   card/item-level action sitting next to a primary blue one (e.g. the
   initiatives section's per-item CTA next to the header's blue "Get In
   Touch"), so the two read as a deliberate two-color CTA system rather
   than everything being the same button. */
.btn--accent .wp-block-button__link,
button.btn--accent,
a.btn--accent {
	--btn-bg: var(--wp--preset--color--secondary);
	--btn-bg-hover: #e59a03;
	--btn-color: var(--wp--preset--color--contrast);
	--btn-shadow: 0 8px 16px rgba(253, 169, 3, 0.35);
}

/* Donate band — full-bleed photo panel on a brand-yellow backdrop. Sized
   with aspect-ratio + clamp() instead of ported fixed pixel heights so it
   holds up on any viewport without extra breakpoints. No video is embedded:
   the reference used its own stock demo footage, so this uses a real KCYPS
   photo instead — swap the <img> for a muted, poster-first <video> if real
   footage becomes available. */
.donate-band {
	background: var(--wp--preset--color--secondary);
	padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 1.5rem);
}
.donate-band__inner {
	position: relative;
	max-width: 1320px;
	margin: 0 auto;
	min-height: 320px;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	border-radius: 8px;
	overflow: hidden;
}
.donate-band__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.donate-band__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.donate-band__media iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw; /* 16:9, viewport-width based */
	min-width: 177.78vh; /* 16:9 inverse, viewport-height based */
	min-height: 100%;
	border: 0;
	pointer-events: none;
	transform: translate(-50%, -50%);
}
.donate-band__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(20, 20, 20, 0.74) 0%, rgba(20, 20, 20, 0.74) 42%, rgba(20, 20, 20, 0.18) 100%);
}
.donate-band__content {
	position: relative;
	z-index: 1;
	max-width: 34rem;
	padding: clamp(1.5rem, 5vw, 4.5rem);
	color: #fff;
}
.donate-band__content h2 {
	margin: 0 0 0.75rem;
	color: #fff;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-transform: uppercase;
}
/* Same solid-to-hollow split as the hero and about headings, just with
   a white stroke so it still reads against the dark photo overlay. */
.donate-band__content h2 span {
	color: transparent;
	-webkit-text-stroke: 1.5px #fff;
}
.donate-band__content p {
	margin: 0 0 1.5rem;
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
	line-height: 1.6;
	max-width: 30rem;
}
@media (max-width: 700px) {
	.donate-band__inner {
		aspect-ratio: 3 / 4;
		min-height: 420px;
		align-items: flex-end;
	}
	.donate-band__content {
		padding: 1.75rem;
	}
	/* The default gradient darkens the top-left for the desktop layout's
	   left-aligned text; on mobile the content sits at the bottom instead
	   (align-items: flex-end above), so the tint needs to concentrate
	   there too, or the text sits over the clearest part of the video. */
	.donate-band__overlay {
		background: linear-gradient(to top, rgba(20, 20, 20, 0.82) 0%, rgba(20, 20, 20, 0.6) 45%, rgba(20, 20, 20, 0.15) 100%);
	}
}

/* Footer top seam — a pre-drawn torn-edge strip (white to contrast-dark)
   sits right above the footer's own box so the boundary reads as an
   irregular tear instead of a straight line. Sized by aspect-ratio, not a
   fixed height, so it scales cleanly on any screen without extra breakpoints. */
.site-footer {
	position: relative;
}
.site-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	width: 100%;
	aspect-ratio: 1920 / 116;
	background: url("../images/white-dark.jpg") center bottom / 100% 100% no-repeat;
	pointer-events: none;
}

/* Screen-reader-only text — standard WP a11y utility. Needed for the
   newsletter form's <label>. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #111;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Footer background photo + dark tint, and the wrapper that keeps real
   content above both. Real KCYPS photo (not the reference's own image),
   lazy-loaded since the footer is always below the fold. */
.site-footer__media {
	position: absolute;
	inset: 0;
	/* Same constrained-layout max-width WP applies to direct children of the
	   outer footer group hits this too, even though it's absolutely
	   positioned — max-width still caps it and the inherited auto margins
	   still center it, insetting the photo from both edges. Cancel both. */
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	z-index: 0;
	overflow: hidden;
}
.site-footer__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.site-footer__overlay {
	position: absolute;
	inset: 0;
	/* Brightest at the very bottom (logo/links/social row), darkening
	   gradually the whole way up — not a quick ramp — so it's fully dark,
	   matching the torn-edge seam's own #282828, by the time it reaches the
	   seam at the top. */
	background: linear-gradient(
		to top,
		rgba(40, 40, 40, 0.7) 0%,
		rgba(40, 40, 40, 1) 88%,
		rgba(40, 40, 40, 1) 100%
	);
}
.site-footer__inner {
	position: relative;
	z-index: 1;
	/* Cancel the constrained-layout max-width WP applies to direct children
	   of the outer footer group — this should fill the space the footer's
	   own padding already leaves, not be squeezed to the site's reading
	   width on top of that. */
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}
/* WP's "constrained" layout re-applies that same content-width cap to EACH
   unaligned direct child individually (footer-top, footer-columns,
   footer-bottom, footer-copyright), not just the group itself — on wide
   screens that leaves large dead margins either side even though
   .site-footer__inner above is already full-width. */
.footer-top,
.footer-columns,
.footer-bottom,
.footer-copyright {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Top row: headline + newsletter signup — a glass panel floating on
   the footer's own dark ground, elevated above plain text-on-background
   the way the initiatives/contact forms already are elsewhere on the
   site (accent icon badge + bordered card), rather than a one-off look. */
.footer-top {
	margin-bottom: var(--wp--preset--spacing--30);
	padding: clamp(4px, 0.5vw, 6px) clamp(10px, 1.5vw, 16px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(6px);
}
.footer-newsletter-icon {
	display: inline-grid;
	place-items: center;
	width: 14px;
	height: 14px;
	margin: 0 5px 0 0;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	vertical-align: middle;
}
.footer-newsletter-icon svg {
	width: 8px;
	height: 8px;
}
/* Same solid-to-hollow split as every other section heading (about,
   donate-band, contact) — white stroke since the footer sits on the
   same dark ink background as those. Nowrap so "SUBSCRIBE TO OUR
   NEWSLETTER" always sits on one line instead of wrapping inside the
   narrow column — but the heading and the newsletter form sit in two
   equal-width wp:columns, and a FIXED font-size that fits the wide
   desktop column was overflowing past it into the input's column at
   narrower-but-not-yet-stacked widths. Scale the size down with the
   viewport instead of holding it fixed, so it always fits its half of
   the row right up to the 600px point where the columns stack. */
/* font-size needs !important — core's global-styles CSS ships
   .has-heading-sm-font-size with its own !important, which otherwise
   beats this clamp() and lets "SUBSCRIBE TO OUR NEWSLETTER" render at
   the full heading-sm size, overflowing its column into the input
   beside it. */
.footer-top h2 {
	display: flex;
	align-items: center;
	min-width: 0;
	color: var(--wp--preset--color--base);
	font-size: clamp(0.85rem, 0.55rem + 0.8vw, 1.05rem) !important;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}
.footer-top h2 span {
	color: transparent;
	-webkit-text-stroke: 1.5px #fff;
}
.footer-top .wp-block-column > p {
	font-size: clamp(0.78rem, 0.74rem + 0.2vw, 0.9rem);
}
.footer-newsletter {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 360px;
	margin-left: auto;
	padding: 3px 3px 3px 14px;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Hover: soft amber glow (same hue as the resting border) — a cue
   before the visitor commits to clicking in. Focus: border and glow
   switch to primary blue instead, matching the "blue = active input"
   convention already used on the Contact/Get Involved forms, so
   typing reads as a distinct state rather than just "more yellow". */
.footer-newsletter:hover {
	box-shadow: 0 0 0 3px rgba(253, 169, 3, 0.22);
}
.footer-newsletter:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(49, 161, 255, 0.22);
}
.footer-newsletter__icon {
	display: grid;
	place-items: center;
	flex: none;
	color: rgba(255, 255, 255, 0.5);
}
.footer-newsletter__input {
	flex: 1;
	min-width: 0;
	background: none;
	border: none;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.9rem);
	padding: 0.3rem 0;
}
.footer-newsletter__input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}
.footer-newsletter__input:focus {
	outline: none;
}
.footer-newsletter__button {
	display: grid;
	place-items: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	border: none;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.footer-newsletter__button svg {
	width: 12px;
	height: 12px;
}
.footer-newsletter__button:hover {
	transform: translateX(2px);
}
.footer-newsletter__button:hover {
	background: #e59a03;
}
@media (max-width: 600px) {
	.footer-newsletter {
		margin-left: 0;
		max-width: none;
		width: 100%;
	}
	.footer-top {
		margin-bottom: var(--wp--preset--spacing--40);
	}
	/* At this width the columns block has stacked, so the heading's own
	   column is much narrower than the "nowrap" rule above assumes —
	   "SUBSCRIBE TO OUR NEWSLETTER" plus its icon no longer fits on one
	   line and was overflowing past the card's edge. Let it wrap and
	   drop a size. */
	/* display:flex on .footer-top h2 (desktop) turns the icon and each
	   text segment into separate flex items squeezed into one row —
	   when they don't fit, flexbox shrinks them below a single word's
	   width and text breaks mid-word instead of at the space. Dropping
	   back to normal block/inline flow here lets it wrap at word
	   boundaries the ordinary way; .footer-newsletter-icon was already
	   built as a plain inline element (vertical-align:middle) for
	   exactly this. */
	.footer-top h2 {
		display: block;
		font-size: 0.95rem !important;
		white-space: normal;
	}
}

/* Footer columns */
.footer-columns.wp-block-columns {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
}
@media (max-width: 780px) {
	.footer-columns.wp-block-columns {
		gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	}
}
.footer-columns h3 {
	position: relative;
	margin: 0 0 1.5rem;
	padding-bottom: 14px;
	color: var(--wp--preset--color--base);
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
}
/* Small accent bar standing in for the old trailing colon — a quieter,
   more deliberate way to mark "this is a heading" than punctuation. */
.footer-columns h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--secondary);
}
.footer-columns > .wp-block-column {
	color: rgba(255, 255, 255, 0.85);
}
.footer-columns > .wp-block-column > p {
	margin: 0;
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
}

.chevron-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.95rem;
	font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1.05rem);
}
.chevron-list li {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}
.chevron-list li::before {
	content: "\276F";
	flex: none;
	color: var(--wp--preset--color--secondary);
	font-size: 0.8em;
}
.chevron-list--blue li::before {
	color: var(--wp--preset--color--primary);
}
.chevron-list a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
.chevron-list a:hover {
	color: var(--wp--preset--color--secondary);
}
.chevron-list--blue a:hover {
	color: var(--wp--preset--color--primary);
}

/* Recent News — core/latest-posts, restyled as compact thumbnail cards */
.footer-news.wp-block-latest-posts {
	margin: 0;
}
.footer-news .wp-block-latest-posts__list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.footer-news li {
	display: grid;
	grid-template-columns: 64px 1fr;
	grid-template-rows: auto auto;
	column-gap: 0.9rem;
}
.footer-news li:hover .wp-block-latest-posts__post-title {
	color: var(--wp--preset--color--secondary);
}
.footer-news .wp-block-latest-posts__featured-image {
	grid-column: 1;
	grid-row: 1 / 3;
	margin: 0;
}
.footer-news .wp-block-latest-posts__featured-image img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}
.footer-news .wp-block-latest-posts__post-title {
	grid-column: 2;
	grid-row: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: var(--wp--preset--color--base);
	font-weight: 700;
	font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1rem);
	line-height: 1.3;
	text-decoration: none;
	margin-bottom: 0.3rem;
	transition: color 0.2s ease;
}
.footer-news .wp-block-latest-posts__post-excerpt {
	grid-column: 2;
	grid-row: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: clamp(0.78rem, 0.72rem + 0.3vw, 0.9rem);
	line-height: 1.4;
}
.footer-news .wp-block-latest-posts__post-excerpt a {
	color: inherit;
	text-decoration: underline;
}

/* Bottom bar: logo on one end, links + social grouped on the other —
   two flex items split by space-between, not three (three left a lone
   middle item looking accidentally centered). */
.footer-bottom {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	align-items: center;
	gap: 1.5rem;
}
.footer-bottom__end {
	align-items: center;
	gap: 2.5rem;
}
.footer-logo figure {
	margin: 0;
}
.footer-logo img {
	display: block;
	height: 40px;
	width: auto;
}
.footer-links {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: clamp(0.85rem, 0.8rem + 0.2vw, 1rem);
}
.footer-links a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
.footer-links a:hover {
	color: var(--wp--preset--color--secondary);
}
.footer-bottom .wp-block-social-links {
	margin: 0;
}
.footer-bottom .wp-block-social-links .wp-social-link {
	transition: transform 0.2s ease;
}
.footer-bottom .wp-block-social-links .wp-social-link:hover {
	transform: translateY(-3px);
}

.footer-copyright {
	margin-top: 1rem;
	color: rgba(255, 255, 255, 0.55);
	font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.95rem);
}











/* ===== About Section =====
 * Structure/layout ported as-is from the client-supplied reference
 * component. Colors remapped to KCYPS brand tokens (orange accent ->
 * primary blue, ink -> contrast, greys -> muted/border), headings moved
 * to the theme's brand typeface (Nunito Sans) instead of the reference's
 * Oswald/DM Sans, and a handful of undersized text rules bumped for
 * legibility — see theme.json for the token values themselves. */
.about-section {
  position: relative;
  /* No bottom padding — the last .about-block's own background should
     run right up to the boundary with the next section, not leave a
     plain white gap after it. */
  padding: 64px 0 0;
  isolation: isolate;
  background-color: var(--wp--preset--color--base);
}

.about-inner {
  position: relative;
  z-index: 3;
  max-width: 1168px;
  margin: 0 auto;
  padding: 0 8.75vw;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 32px;
  padding: 6px 16px 6px 12px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  color: var(--wp--preset--color--primary);
  background: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.section-label span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
}

/* ===== Shared interior-page components =====
   Used by every content page built from real blocks (About, Agenda,
   Resources, Events, Gallery) — promoted here from what started as
   About-page-only CSS once a third page needed the identical rule.
   .section-eyebrow is a block-editable reimplementation of
   .section-label above (a ::before dot instead of a literal <span>,
   since a Paragraph block is one plain text run). */
.section-eyebrow {
	display: inline-flex;
	align-items: center;
	margin: 0 0 20px;
	padding: 6px 16px 6px 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	color: var(--wp--preset--color--primary);
	background: rgba(255, 255, 255, 0.9);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.section-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	margin-right: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	flex: none;
}

/* Torn-edge hero (Cover block) — one page-hero-cover--tear-N class per
   page (see functions.php for the four clip-path shapes) so different
   pages don't all show the same rip. */
.wp-block-cover.page-hero-cover {
	display: flex;
	align-items: center;
	justify-content: center;
}
.wp-block-cover.page-hero-cover .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.wp-block-cover.page-hero-cover--tear-1 .wp-block-cover__background,
.wp-block-cover.page-hero-cover--tear-1 > img.wp-block-cover__image-background {
	clip-path: url(#page-hero-tear-1);
}
.wp-block-cover.page-hero-cover--tear-2 .wp-block-cover__background,
.wp-block-cover.page-hero-cover--tear-2 > img.wp-block-cover__image-background {
	clip-path: url(#page-hero-tear-2);
}
.wp-block-cover.page-hero-cover--tear-3 .wp-block-cover__background,
.wp-block-cover.page-hero-cover--tear-3 > img.wp-block-cover__image-background {
	clip-path: url(#page-hero-tear-3);
}
.wp-block-cover.page-hero-cover--tear-4 .wp-block-cover__background,
.wp-block-cover.page-hero-cover--tear-4 > img.wp-block-cover__image-background {
	clip-path: url(#page-hero-tear-4);
}
.page-hero-cover__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 22px !important;
	padding: 6px 16px 6px 12px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--base);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.page-hero-cover__eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	margin-right: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
}
.page-hero-cover__title.wp-block-heading {
	max-width: 20em;
	margin: 0 auto;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 5vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-transform: uppercase;
	text-wrap: balance;
}
/* Same solid-to-hollow split as every other prominent heading on the
   site (hero, donate-band, initiatives, core-values, footer, team
   hero) — a white stroke since this title sits on a dark-overlaid
   photo like those do. */
.page-hero-cover__title.wp-block-heading span {
	color: transparent;
	-webkit-text-stroke: 1.5px #fff;
}

/* Closing CTA card — the dark moment lives inside a rounded card on a
   light section background, never a full-bleed dark section: whatever
   sits directly before .site-footer needs to stay light, since
   .site-footer::before is a torn-paper graphic that transitions
   white-to-dark. A full-bleed dark section here would leave it with
   nothing light to tear away from. */
.page-cta-section {
	padding: clamp(48px, 6vw, 80px) 8.75vw clamp(88px, 10vw, 150px);
	background: var(--wp--preset--color--paper);
}
.page-cta-card {
	max-width: 880px;
	margin: 0 auto;
	padding: clamp(40px, 5vw, 64px);
	border-radius: 28px;
	background: var(--wp--preset--color--contrast);
	box-shadow: 0 24px 48px rgba(40, 40, 40, 0.18);
	text-align: center;
}
.page-cta-card h2.wp-block-heading {
	margin: 0 0 14px;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 3.6vw, 2.9rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-transform: uppercase;
	text-wrap: balance;
}
.page-cta-card h2.wp-block-heading span {
	color: transparent;
	-webkit-text-stroke: 1.5px #fff;
}
.page-cta-card__text {
	max-width: 34rem;
	margin: 0 auto 32px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 1.05rem;
	line-height: 1.7;
}

/* Shared prev/next pager — nashon_render_pager() in functions.php,
   used by both the Resources and Events dynamic listings so a section
   that grows past one page of results (patterns/resources-list.php,
   patterns/events-list.php) stays a real paginated query instead of
   ever loading everything at once. */
.nashon-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 36px;
}
.nashon-pager__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 20px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nashon-pager__link:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.nashon-pager__status {
	color: var(--wp--preset--color--muted);
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
}
@media (max-width: 480px) {
	.nashon-pager {
		flex-wrap: wrap;
	}
	.nashon-pager__status {
		order: 3;
		width: 100%;
		text-align: center;
	}
}

.about-section h1 {
  max-width: 1020px;
  margin: 0 0 40px;
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* Second line hollow/outline, same treatment as the hero's "UP" (see
   .hero h1 span in hero-exact.css) — solid ink fades to an outlined
   silhouette partway through the heading. */
.about-section h1 span {
  color: transparent;
  -webkit-text-stroke: 1.5px #000;
}

/* Two content blocks — KCYPS overview, then the YPS Agenda — each its
   own image + copy row, own faint background texture, and (second one)
   the photo alternated to the other side so the section reads as a
   proper zigzag rather than two identical rows stacked on top of
   each other.

   Each block sits OUTSIDE .about-inner so its background can run edge
   to edge of the section (unlike .about-inner, nothing here caps its
   width) — .about-grid then re-applies that same 1168px/centered
   constraint so the actual photo+copy content still lines up under
   the heading above it. */
.about-block {
  /* No z-index here on purpose — giving this a stacking context would
     trap .about-grid's z-index inside it, comparing the content only
     against its own siblings instead of against .orange-thread. The
     background lives on .about-block__bg instead, a plain sibling of
     .about-grid, so both can be compared against the squiggle directly
     in .about-section's one shared stacking context: bg (0) < line
     (2, on .orange-thread) < content (3, on .about-grid). */
  position: relative;
  padding: 32px 8.75vw;
}
.about-block__bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: url("../images/clear-2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.about-block--reverse .about-block__bg {
  background-image: url("../images/clear-3.jpg");
}

.about-block--reverse .image-wrap {
  order: 2;
}

.about-block + .about-block {
  margin-top: 1px;
}

.about-grid {
  position: relative;
  z-index: 3;
  max-width: 1168px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 0.86fr);
  align-items: start;
  gap: clamp(48px, 8vw, 120px);
}

.image-wrap {
  width: min(100%, 502px);
  aspect-ratio: 1.38 / 1;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 16px 32px rgba(40, 40, 40, 0.1);
}

.image-wrap figure {
  margin: 0;
  width: 100%;
  height: 100%;
}

.image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.88) contrast(0.96);
  transition: transform 500ms ease, filter 500ms ease;
}

.image-wrap:hover img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1);
}

.about-copy {
  max-width: 426px;
  padding-top: 4px;
}

.about-copy h2 {
  margin: 0 0 16px;
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.2;
}

.about-copy p {
  margin: 0;
  color: var(--wp--preset--color--muted);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 400;
  line-height: 1.65;
}

.about-copy p + p {
  margin-top: 14px;
}

.about-copy .btn {
  margin-top: 28px;
}

.orange-thread {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 0;
  width: 100%;
  height: calc(100% - 18px);
  pointer-events: none;
}
.about-thread-gradient__start {
  stop-color: var(--wp--preset--color--primary);
}
.about-thread-gradient__end {
  stop-color: var(--wp--preset--color--secondary);
}

@media (max-width: 900px) {
  .about-section {
    padding: 56px 0 0;
  }

  .about-inner {
    padding: 0 5vw;
  }

  .about-block {
    padding: 28px 5vw;
  }

  .about-grid {
    gap: clamp(32px, 8vw, 80px);
  }
}

@media (max-width: 720px) {
  .about-section {
    padding: 48px 0 0;
  }

  .about-inner {
    padding: 0 24px;
  }

  .about-block {
    padding: 24px;
  }

  .about-section h1 {
    margin-bottom: 28px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about-block--reverse .image-wrap {
    order: 0;
  }

  .image-wrap {
    width: 100%;
    max-width: none;
  }

  .about-copy {
    max-width: 470px;
  }

  .about-copy .btn {
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-wrap img,
  .btn {
    transition: none;
  }
}

/* ===== News Section ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.news-section {
  position: relative;
  padding: clamp(48px, 6vw, 80px) 8.75vw;
  background: var(--wp--preset--color--paper);
  isolation: isolate;
}

.news-heading {
  max-width: 1168px;
  margin: 0 auto 66px;
  display: flex;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}

.news-heading h2 {
  margin: 0;
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.6rem, 5.2vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
  flex: 0 0 auto;
}

/* Same solid-to-hollow split used by the hero/about/donate-band/
   initiatives headings, for one consistent heading treatment
   throughout the page. */
.news-heading h2 span {
  color: transparent;
  -webkit-text-stroke: 1.5px #000;
}

.news-heading p {
  margin: 0 0 8px;
  max-width: 360px;
  color: var(--wp--preset--color--muted);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  flex: 1 1 220px;
}

.view-all-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  border: 1px solid var(--wp--preset--color--contrast);
  border-radius: 999px;
  color: var(--wp--preset--color--contrast);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  white-space: nowrap;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.view-all-button .wp-block-button__link:hover,
.view-all-button .wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
  outline: none;
}

.news-layout {
  max-width: 1168px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.news-card {
  position: relative;
  aspect-ratio: 1.32 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: var(--wp--preset--color--contrast);
  cursor: pointer;
  isolation: isolate;
}

.news-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease, filter 400ms ease;
}
/* Sitewide featured-image fallback (nashon_get_post_image() in
   functions.php) — the logo is a wide wordmark on a light ground, not
   a photo, so the card's whole dark-photo-plus-white-text scheme has
   to flip: light card, contained (not cropped) logo, dark text, and
   the darkening overlay (built for a photo) turned off entirely. */
.news-card--logo {
  background: var(--wp--preset--color--paper);
}
.news-card--logo img {
  width: 55%;
  height: 55%;
  top: 22.5%;
  left: 22.5%;
  object-fit: contain;
}
.news-card--logo::after {
  content: none;
}
.news-card--logo .news-card-overlay {
  color: var(--wp--preset--color--contrast);
  background: linear-gradient(to top, var(--wp--preset--color--paper) 0%, var(--wp--preset--color--paper) 55%, rgba(250, 250, 250, 0) 100%);
}
.news-card--logo .date-badge {
  background: rgba(40, 40, 40, 0.08);
  color: var(--wp--preset--color--contrast);
}
.news-card--logo .news-card-overlay p {
  color: var(--wp--preset--color--muted);
}

.news-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(40, 40, 40, 0.88) 0%, rgba(40, 40, 40, 0.32) 52%, rgba(40, 40, 40, 0) 100%);
  z-index: 1;
  transition: opacity 300ms ease;
}

.news-card:hover img,
.news-card:focus-visible img {
  transform: scale(1.06);
  filter: saturate(1.05);
}

.news-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  color: #fff;
}

.date-badge {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.news-card-overlay h3 {
  margin: 0 0 6px;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--card-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.news-card-overlay p {
  margin: 0;
  font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 400ms ease, opacity 300ms ease 100ms, margin-top 400ms ease;
}

.news-card:hover .news-card-overlay p,
.news-card:focus-visible .news-card-overlay p {
  max-height: 80px;
  opacity: 1;
  margin-top: 4px;
}

.news-card:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

/* Sidebar */
.news-sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 32px;
}

.search-form {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 4px 4px 4px 16px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  background: #fff;
  transition: border-color 200ms ease;
}

.search-form:focus-within {
  border-color: var(--wp--preset--color--primary);
}

.search-form input {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  /* Any input under 16px triggers iOS Safari's auto-zoom-on-focus —
     tapping the field zooms the whole viewport in, which is what reads
     as the search bar "becoming huge" on a phone. 16px sidesteps that
     on every mobile browser, not just iOS. */
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  color: var(--wp--preset--color--contrast);
  outline: none;
}

.search-form input::-webkit-search-decoration,
.search-form input::-webkit-search-cancel-button,
.search-form input::-webkit-search-results-button,
.search-form input::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.search-form input::placeholder {
  color: var(--wp--preset--color--muted);
}

.search-form button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--contrast);
  color: #fff;
  cursor: pointer;
  transition: background 200ms ease;
  flex: 0 0 auto;
}

.search-form button:hover {
  background: var(--wp--preset--color--primary);
}

.news-sidebar > h3 {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--contrast);
}

.latest-posts {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.latest-post {
  display: flex;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: opacity 200ms ease;
}

.latest-post:hover {
  opacity: 0.7;
}

.latest-post img {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
}
.latest-post--logo img {
  object-fit: contain;
  background: var(--wp--preset--color--paper);
  padding: 8px;
}

.latest-post span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.latest-post strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
  line-height: 1.25;
}

.latest-post small {
  font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1rem);
  color: var(--wp--preset--color--muted);
  line-height: 1.45;
}

.why-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  background: var(--wp--preset--color--contrast);
  color: #fff;
}

.why-card figure {
  margin: 0;
}

.why-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.why-card > div {
  padding: 18px 18px 22px;
}

.why-card h3 {
  margin: 0 0 6px;
  font-family: var(--wp--preset--font-family--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.why-card p {
  margin: 0;
  font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 1024px) {
  .news-layout {
    grid-template-columns: 1fr;
  }

  .news-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
  }

  /* Scoped to .news-sidebar specifically — .search-form/.latest-posts
     are reused as-is inside .single-sidebar (templates/single.html),
     which is ALWAYS a column layout and never gets the ">*  { flex: 0
     0 auto; }" reset below (that's scoped to .news-sidebar too). A
     bare ".search-form { flex: 1 1 240px }" here would leak into that
     always-column context and get read as a height instead of a
     width, ballooning the search bar on any screen ≤1024px. */
  .news-sidebar .search-form {
    flex: 1 1 240px;
  }

  .news-sidebar .latest-posts {
    flex: 1 1 260px;
  }

  .news-sidebar .why-card {
    flex: 1 1 240px;
  }
}

@media (max-width: 720px) {
  .news-section {
    padding: 48px 24px;
  }

  .news-heading {
    margin-bottom: 44px;
    gap: 24px;
  }

  .news-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .news-sidebar {
    flex-direction: column;
  }

  .news-sidebar > *,
  .news-sidebar > .search-form,
  .news-sidebar > .latest-posts,
  .news-sidebar > .why-card {
    width: 100%;
    /* Matching ".news-sidebar > .search-form" etc. here, not just the
       bare ">*", matters: ".news-sidebar .search-form" in the 1024px
       block above has specificity (0,2,0), higher than ">* " (0,1,0),
       so without an equally-specific selector here the row-mode
       flex-basis would keep winning even under 720px by specificity
       alone, regardless of source order.
       .search-form / .latest-posts / .why-card carry a "flex: 1 1 240px"
       (etc.) tuned for the ROW layout at the tablet breakpoint above,
       where that basis means width. In this column layout the same
       flex-basis is read as a HEIGHT instead, forcing the search bar's
       tiny content into a tall box that turns its border-radius:999px
       into a blob. Reset flex sizing here so each item is just as tall
       as its own content again. */
    flex: 0 0 auto;
  }
}