/*
Theme Name: Child Care for All
Theme URI: https://github.com/E11-Group/childcareforall
Author: E11 Group
Author URI: https://e11group.com
Description: Child theme of Launchpad for Child Care for All, a campaign of the Child Care for Every Family Network. Overrides brand colors, fonts, and patterns while inheriting Launchpad's block library and design system.
Template: launchpad
Tags: block-theme, full-site-editing, child-theme
Tested up to: 7.0
Requires PHP: 8.0
Version: 0.5.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: childcareforall
Repository: E11-Group/childcareforall
*/

/* ============================================================
   Brand rules
   ============================================================
   - Buttons are ALWAYS black text on a bright fill (orange or
     cyan). White on orange fails AA (3.2:1). theme.json sets
     the default; the accent variant lives here.
   - Staatliches is a single-weight all-caps display face; it
     carries every heading. Rubik Light does the big statements
     in the black block. Source Sans 3 is UI (nav, buttons).
   - Radii: 30px blocks/cards/banner, 6px orange button, 3px
     cyan button. No gradients, no shadows.                      */

/* foundation.css renders body text antialiased; without this WP's Rubik reads a
   touch heavier than the mockups on macOS. */
body {
	-webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------
   No widows anywhere (client request 2026-09-14): headings balance their lines,
   running text never leaves a single word on the last line.
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6, .ccfa-hero-text, .ccfa-shout, .ccfa-page-hero-title, .ccfa-page-hero-intro,
.ccfa-statement-text, .ccfa-footer-statement, .ccfa-what-title, .ccfa-who-title, .ccfa-join-title, .ccfa-cta-banner h2 {
	text-wrap: balance;
}
p, li, dd, figcaption, label, legend, .ccfa-lead, .ccfa-what-lead, .wp-block-button__link {
	text-wrap: pretty;
}

/* ------------------------------------------------------------
   Links: no underlines anywhere (client request 2026-09-10); hover is a colour change
   ------------------------------------------------------------ */
.wp-site-blocks a:not(.wp-block-button__link),
.wp-block-post-content a:not(.wp-block-button__link),
.editor-styles-wrapper a:not(.wp-block-button__link) {
	text-decoration: none;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.wp-block-button__link.wp-block-button__link:hover {
	color: var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-accent .wp-block-button__link,
.wp-block-button .wp-block-button__link.has-accent-background-color {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	border-radius: 0.1875rem;
	padding: 0.9375rem 1.25rem;
}
.wp-block-button.is-style-accent .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.has-accent-background-color:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 88%, black);
}

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */
.ccfa-header .ccfa-header-logo img {
	display: block; /* no inline baseline gap: the header row is exactly the logo/button height */
	width: clamp(110px, 8vw + 40px, 184px);
	height: auto;
}
.ccfa-header .ccfa-header-logo {
	margin: 0;
	line-height: 0;
}
.ccfa-main-nav .wp-block-navigation-item__content {
	padding: 0.5rem 0;
	border-bottom: 3px solid transparent;
	transition: border-color 0.15s ease;
	text-decoration: none;
}
.ccfa-main-nav .wp-block-navigation-item__content:hover,
.ccfa-main-nav .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--primary);
}
.ccfa-join-button .wp-block-button__link {
	padding: 1.375rem 0.75rem; /* phones: the language pill shares the row, so JOIN US gives up 12px a side */
	font-size: 1.28rem;
	white-space: nowrap; /* "JOIN US" never wraps; Spanish overrides this below 1024px */
}
@media (min-width: 600px) {
	.ccfa-join-button .wp-block-button__link {
		padding: 1.375rem 1.5rem;
	}
}
/* Language toggle (TranslatePress): a small grey EN | ES pill, the current language filled
   dark. It lives in .ccfa-nav-wrap with the nav. Phones: the wrap is display:contents, so the
   row reads logo, pill, JOIN US, hamburger. From 600px the wrap is a column as tall as JOIN US: pill on the button's top
   edge, links on its bottom edge, both right-aligned over the last link. Once the sticky
   header compacts there is no height to spare, so the pill goes inline left of the nav. */
.ccfa-language-toggle {
	display: inline-flex;
	flex-shrink: 0;
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 999px;
	overflow: hidden;
	background-color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--tertiary);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.ccfa-language-toggle__option {
	display: inline-block;
	padding: 0.35rem 0.5rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.ccfa-language-toggle__option.is-current {
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--base);
}
a.ccfa-language-toggle__option:hover,
a.ccfa-language-toggle__option:focus-visible {
	background-color: var(--wp--preset--color--neutral);
	color: var(--wp--preset--color--contrast);
}
/* Spanish logo (logo-es.svg, swapped in by TranslatePress) is a 2:1 mark against the English 1.3:1.
   Phones: shorter logo and tighter row gaps so logo, pill, JOIN US and the hamburger still fit at 390px. */
:lang(es) .ccfa-header .ccfa-header-logo img {
	width: calc(var(--ccfa-join-h) * 1.41); /* 70% of the row height at the mark's 2.02:1; width-based like the other logo rules so the scrolled clamp still wins */
	height: auto;
}
:lang(es) .ccfa-header > .wp-block-group.alignwide,
:lang(es) .ccfa-header > .wp-block-group.alignwide > .wp-block-group {
	gap: 0.5rem;
}
@media (min-width: 600px) {
	:lang(es) .ccfa-header .ccfa-header-logo img {
		width: calc(clamp(110px, 8vw + 40px, 184px) * 1.56); /* same HEIGHT as the English logo (2.02:1 vs 1.29:1), so the header keeps its depth (QA 2026-09-24) */
	}
	:lang(es) header.site-header.is-scrolled .ccfa-header .ccfa-header-logo img {
		width: calc(clamp(72px, 4vw + 30px, 96px) * 1.56);
	}
	:lang(es) .ccfa-header > .wp-block-group.alignwide,
	:lang(es) .ccfa-header > .wp-block-group.alignwide > .wp-block-group {
		gap: var(--wp--preset--spacing--medium);
	}
}
.ccfa-header .ccfa-nav-wrap.ccfa-nav-wrap {
	display: contents; /* phones: the pill and the hamburger become row items of their own: logo, pill, JOIN US, hamburger */
	position: static;
}
.ccfa-header .ccfa-language-toggle { order: 0; }
@media (min-width: 600px) {
	.ccfa-header .ccfa-nav-wrap.ccfa-nav-wrap {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: space-between;
		align-self: stretch; /* as tall as JOIN US */
		gap: 0;
		order: 0;
	}
	.ccfa-header .ccfa-language-toggle {
		font-size: 0.75rem;
	}
	.ccfa-header .ccfa-nav-wrap .ccfa-main-nav {
		margin-bottom: -0.25rem; /* link baselines sit on the button's bottom edge, the hover underline just under it */
	}
	header.site-header.is-scrolled .ccfa-header .ccfa-nav-wrap.ccfa-nav-wrap {
		flex-direction: row;
		align-items: center;
		align-self: center;
		gap: 1rem;
	}
	header.site-header.is-scrolled .ccfa-header .ccfa-language-toggle {
		order: 1; /* compact header: menu, then the pill, then JOIN US */
	}
	header.site-header.is-scrolled .ccfa-header .ccfa-nav-wrap .ccfa-main-nav {
		margin-bottom: 0;
	}
}
/* ------------------------------------------------------------
   Phone menu (client request 2026-09-14)
   ------------------------------------------------------------
   The navigation block's responsive menu, restyled: a lime hamburger the same
   height as JOIN US at the far right; when open it becomes a cross in the same
   spot, and the menu drops in BELOW the header as a lime box (three round
   corners, angled top-left) so the logo, JOIN US and the cross stay visible. */
.ccfa-header {
	position: relative;
	--ccfa-header-pad-t: var(--wp--preset--spacing--large);
	--ccfa-header-pad-b: var(--wp--preset--spacing--medium);
	--ccfa-logo-h: calc(clamp(110px, 8vw + 40px, 184px) * 0.7717); /* logo width × its 142/184 aspect = the header row height */
	--ccfa-join-h: calc(1.28rem + 2.75rem); /* JOIN US: 1.28rem line + 2 × 1.375rem padding */
}
header.site-header.is-scrolled .ccfa-header {
	--ccfa-header-pad-t: 0.625rem;
	--ccfa-header-pad-b: 0.625rem;
	--ccfa-join-h: calc(1.125rem + 1.875rem);
}
/* Phones (below core's 600px overlay-menu breakpoint): the header row is the JOIN US
   button height and the logo matches it. Desktop values are restored at 600px. */
.ccfa-header.ccfa-header {
	--ccfa-logo-h: var(--ccfa-join-h);
}
@media (min-width: 600px) {
	.ccfa-header.ccfa-header {
		--ccfa-logo-h: calc(clamp(110px, 8vw + 40px, 184px) * 0.7717);
	}
	header.site-header.is-scrolled .ccfa-header.ccfa-header {
		--ccfa-logo-h: calc(clamp(72px, 4vw + 30px, 96px) * 0.7717);
	}
}
.ccfa-header .ccfa-header-logo img {
	height: var(--ccfa-join-h); /* logo as tall as JOIN US */
	width: auto;
}
.ccfa-header .ccfa-main-nav { order: 2; position: static; } /* the panel positions against .ccfa-header, not the nav */
.ccfa-header .wp-block-buttons { order: 1; }
.ccfa-main-nav .wp-block-navigation__responsive-container-open,
.ccfa-main-nav .wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ccfa-join-h);
	height: var(--ccfa-join-h);
	padding: 0;
	margin: 0;
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--contrast);
	border-radius: 0.375rem;
	transition: height 0.3s ease, width 0.3s ease;
}
.ccfa-main-nav .wp-block-navigation__responsive-container-open svg,
.ccfa-main-nav .wp-block-navigation__responsive-container-close svg {
	width: 1.75rem;
	height: 1.75rem;
}
/* The open panel: below the header, inside the page padding */
.ccfa-main-nav .wp-block-navigation__responsive-container.is-menu-open {
	position: absolute;
	inset: auto;
	top: calc(100% + 0.5rem);
	left: auto;
	right: 0; /* flush with the hamburger's right edge */
	width: min(100%, 17rem);
	height: auto;
	padding: 0;
	background: transparent !important; /* the lime box is the content wrapper below, so the cross above it is not clipped */
	overflow: visible;
	z-index: 30;
}
.ccfa-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: block;
	padding: 1.5rem 1.5rem 2rem;
	background-color: var(--wp--preset--color--tertiary);
	border-radius: var(--ccfa-block-radius) var(--ccfa-block-radius) var(--ccfa-block-radius) 0;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 48px 100%, 0 calc(100% - 50px)); /* angled bottom-left */
}
.ccfa-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}
.ccfa-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	font-size: 1.25rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid rgba(15, 7, 8, 0.2);
	color: var(--wp--preset--color--contrast);
}
.ccfa-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
	border-bottom: 0;
}
/* The cross takes the hamburger's exact spot: above the panel, on the header row.
   The dialog wrapper must not be the positioning parent. */
.ccfa-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: static;
}
.ccfa-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	/* The panel hangs off the header row (the parent makes the logo's row a positioning
	   context), whose top edge is where the hamburger sits: place the cross on it. */
	position: absolute;
	top: calc(-1 * var(--ccfa-logo-h) - 0.5rem); /* minus the panel's 0.5rem gap under the row */
	right: 0;
	bottom: auto;
	z-index: 31;
}
header.site-header:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
	visibility: hidden;
}
@media (min-width: 600px) {
	/* Desktop header: inline nav, full-size logo, no hamburger (core hides it at 600px too,
	   but the phone `display: flex` above would win the cascade, so hide it here). */
	.ccfa-header .ccfa-header-logo img {
		height: auto;
		width: clamp(110px, 8vw + 40px, 184px);
	}
	.ccfa-header .ccfa-main-nav { order: 0; position: static; }
	.ccfa-header .wp-block-buttons { order: 0; }
	.ccfa-main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

/* Sticky header (QA 2026-09-14): the header group carries `is-position-sticky`, the
   parent makes <header> sticky and toggles `.is-scrolled` past 10px. On scroll the
   logo shrinks and the bar tightens, all transitioned; no shadow (brand rule) — a
   hairline rule marks the edge instead. Doubled selectors beat the parent's !important. */
:root {
	--ccfa-header-compact: 4.25rem; /* scrolled phone header: 10px + 48px button + 10px; the sticky chip bar and anchor offsets sit flush under it */
}
@media (min-width: 600px) {
	:root {
		--ccfa-header-compact: 4.75rem; /* scrolled desktop header (~72px measured) */
	}
}
header.site-header.site-header {
	transition: box-shadow 0.3s ease;
}
/* The compacting header changes the page height; without this, scroll anchoring
   drags scrollY back under the parent's 10px threshold and the header flickers. */
html, body, .wp-site-blocks {
	overflow-anchor: none;
}
header.site-header.is-scrolled.is-scrolled {
	box-shadow: 0 1px 0 var(--wp--preset--color--outline);
}
/* At the top of the page the header is see-through so the hero's megaphone can
   rise above the cyan panel (as in the artboard); it turns white once scrolled. */
header.site-header.site-header:not(.is-scrolled),
header.site-header:not(.is-scrolled) .ccfa-header.ccfa-header {
	background: transparent !important;
}
header.site-header.is-scrolled.is-scrolled,
header.site-header.is-scrolled .ccfa-header.ccfa-header {
	background: var(--wp--preset--color--base) !important;
	transition: background-color 0.3s ease;
}
.ccfa-header .ccfa-header-logo,
.ccfa-header .ccfa-header-logo img {
	transition: width 0.3s ease;
}
header.site-header.is-scrolled .ccfa-header.ccfa-header {
	padding-top: 0.625rem !important;
	padding-bottom: 0.625rem !important;
}
/* The parent hides `.header-logo-default` on scroll expecting a compact swap; we
   keep the one logo and just shrink it. */
header.site-header.is-scrolled .ccfa-header .ccfa-header-logo.header-logo-default {
	opacity: 1;
	max-height: none;
	position: static;
	pointer-events: auto;
}
header.site-header.is-scrolled .ccfa-header .ccfa-header-logo img {
	width: clamp(72px, 4vw + 30px, 96px);
}
header.site-header.is-scrolled .ccfa-header .ccfa-join-button .wp-block-button__link {
	padding: 0.9375rem 1.25rem !important;
	font-size: 1.125rem !important;
}
header.site-header.is-scrolled .ccfa-header > .wp-block-group {
	align-items: flex-start; /* keep the hamburger on the row's top edge, where the cross is anchored */
}
/* Spanish nav (TranslatePress, html lang="es-MX"): the three links run longer than the English ones. Tablets get
   a smaller nav; from 782px the nav is pinned to one row and the button shrinks instead. The button itself reads
   "Únete" (client 2026-09-30) at the English sizes. */
@media (min-width: 600px) {
	:lang(es) .ccfa-main-nav .wp-block-navigation-item__content {
		font-size: 1rem;
	}
}
@media (min-width: 782px) {
	:lang(es) .ccfa-header .ccfa-nav-wrap { flex: 0 0 auto; }
	:lang(es) .ccfa-main-nav .wp-block-navigation__container { flex-wrap: nowrap; }
	:lang(es) .ccfa-main-nav .wp-block-navigation-item__content { white-space: nowrap; }
	:lang(es) .ccfa-header .wp-block-buttons { flex: 0 1 auto; min-width: 0; }
}
@media (min-width: 1024px) {
	:lang(es) .ccfa-main-nav .wp-block-navigation-item__content {
		font-size: inherit;
	}
}
/* In-page anchors scroll smoothly and land below the sticky header. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ccfa-header-compact) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.ccfa-footer .ccfa-footer-logo img {
	width: clamp(80px, 6vw + 20px, 100px);
	height: auto;
}
.ccfa-footer .ccfa-footer-statement {
	font-size: clamp(1.0625rem, 0.9rem + 0.5vw, 1.3125rem);
	line-height: 1.3;
	letter-spacing: 0.01em;
	max-width: 14.1em; /* artboard: 295px at 21px → three lines */
	margin: 0;
}
.ccfa-footer .ccfa-footer-nav {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.5;
}
.ccfa-footer .ccfa-footer-nav li {
	margin: 0 0 0.25rem;
}
.ccfa-footer .ccfa-footer-nav a {
	text-decoration: none;
}
.ccfa-footer .ccfa-footer-nav a:hover {
	color: var(--wp--preset--color--primary-dark);
}
.ccfa-footer .ccfa-footer-join {
	font-size: clamp(3rem, 1rem + 6.5vw, 6.25rem);
	line-height: 0.95;
	letter-spacing: 0.01em;
	margin: -0.08em 0 0;
}
.ccfa-footer .ccfa-footer-join a {
	text-decoration: none;
}
.ccfa-footer .ccfa-footer-join a:hover {
	color: var(--wp--preset--color--primary);
}
/* Bottom line: "© <year> Child Care for All Campaign · Privacy Policy" in small muted type, a breath below the columns; no rule. */
.ccfa-footer .ccfa-footer-bottom {
	margin-top: var(--wp--preset--spacing--large);
}
.ccfa-footer .ccfa-footer-legal {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	letter-spacing: 0.01em;
}
.ccfa-footer .ccfa-footer-legal a {
	color: inherit;
	text-decoration: none;
}
.ccfa-footer .ccfa-footer-legal a::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 0.75rem;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
}
.ccfa-footer .ccfa-footer-legal a:hover {
	color: var(--wp--preset--color--primary-dark);
}
.ccfa-footer .ccfa-footer-social .wp-block-social-link,
.ccfa-footer .ccfa-footer-social .wp-block-social-link a {
	border-radius: 9999px;
	overflow: hidden;
	transition: background-color 0.15s ease;
}
.ccfa-footer .ccfa-footer-social .wp-block-social-link:hover,
.ccfa-footer .ccfa-footer-social .wp-block-social-link a:hover {
	transform: none;
	background-color: var(--wp--preset--color--primary);
}

/* Footer: single column stack on small screens (mobile-first: columns block
   already stacks below 782px; this just left-aligns the wordmark). */
.ccfa-footer .ccfa-footer-join.has-text-align-right {
	text-align: left;
}
/* Phones: the nav links and Join Us share a row as two columns (QA 2026-09-15). Core stacks
   every column below 782px with flex-basis: 100% !important, hence the !important; at 782px
   the pattern's own column widths (50 / 20 / 30) are restored the same way. */
.ccfa-footer .ccfa-footer-top > .wp-block-column:nth-child(2) { flex-basis: 45% !important; }
.ccfa-footer .ccfa-footer-top > .wp-block-column:nth-child(3) { flex-basis: calc(55% - var(--wp--preset--spacing--large)) !important; display: flex; align-items: center; align-self: stretch; } /* Join Us centred against the three links */
.ccfa-footer .ccfa-footer-join { margin-top: 0; }
@media (min-width: 782px) {
	.ccfa-footer .ccfa-footer-top > .wp-block-column:nth-child(2) { flex-basis: 20% !important; }
	.ccfa-footer .ccfa-footer-top > .wp-block-column:nth-child(3) { flex-basis: 30% !important; display: block; align-self: auto; }
	.ccfa-footer .ccfa-footer-join { margin-top: -0.08em; }
}
@media (min-width: 782px) {
	.ccfa-footer .ccfa-footer-join.has-text-align-right {
		text-align: right;
	}
}

/* ============================================================
   Homepage
   ============================================================
   Geometry is ported from designs/home.html (1366px artboard).
   Mobile-first: base rules are the phone layout, min-width
   queries re-map to the artboard. Sections carry their own
   padding, so the post-content block gap is zeroed for them. */

:root {
	--ccfa-block-radius: clamp(1.25rem, 0.75rem + 1.5vw, 1.875rem); /* 30px at 1366 */
	/* The artboard's rhythm is roughly 2x the parent spacing presets, so the
	   homepage sections use the design's own fluid scale (foundation.css). */
	--ccfa-space-s:  clamp(1rem, 0.5rem + 1vw, 1.5rem);
	--ccfa-space-m:  clamp(1.5rem, 1rem + 2vw, 3rem);
	--ccfa-space-l:  clamp(2rem, 1.5rem + 3vw, 4.5rem);
	--ccfa-space-xl: clamp(3rem, 2rem + 4vw, 6rem);
}
/* Template parts sit flush against the page content (the girl runs into the footer). */
.wp-site-blocks > .site-footer,
.wp-site-blocks > .site-content {
	margin-top: 0;
	margin-block-start: 0;
}
.wp-block-post-content > .ccfa-section,
.wp-block-post-content > .wp-block-childcareforall-hero-collage {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* ------------------------------------------------------------
   Hero collage (blocks/hero-collage)
   ------------------------------------------------------------
   Every piece is positioned as a percentage of the cyan panel and
   the shout lines are sized in container-query units, so the
   collage scales as one object. Desktop values are measured from
   the artboard (panel origin 37,214 · 1294×670). */
.wp-block-childcareforall-hero-collage {
	position: relative;
	container-type: inline-size;
	isolation: isolate;
	/* Phones: the client's mobile artboard (327×307 panel with a cut corner). */
	aspect-ratio: 327 / 307;
	background: var(--ccfa-img-hero-panel-m) center / 100% 100% no-repeat;
}
.wp-block-childcareforall-hero-collage > * {
	position: absolute;
	margin: 0;
}
.wp-block-childcareforall-hero-collage .ccfa-hero-strip,
.wp-block-childcareforall-hero-collage .ccfa-hero-photo {
	display: block;
	height: auto;
	max-width: none;
	pointer-events: none;
	user-select: none;
}
.wp-block-childcareforall-hero-collage .ccfa-hero-strip img,
.wp-block-childcareforall-hero-collage .ccfa-hero-photo img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}
.ccfa-hero-strip--magenta { left: 0.8%; top: 44%;   width: 95%;  z-index: 1; }
.ccfa-hero-strip--lime    { left: 0;    top: 59.7%; width: 100%; z-index: 2; }
.ccfa-hero-strip--orange  { left: 0;    top: 22%;   width: 100%; z-index: 3; }
.ccfa-hero-photo--family    { left: 5%; top: auto; bottom: 0; width: 49.8%; z-index: 4; }  /* stands on the panel's bottom edge */
.ccfa-hero-photo--megaphone { left: auto; right: 2%; top: -3%; width: 55.7%; z-index: 5; } /* rises above the panel, top right */
.wp-block-childcareforall-hero-collage .ccfa-hero-text {
	z-index: 6;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 6.6cqi;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
	transform-origin: left center;
}
.ccfa-hero-text--win { left: 6.7%; top: 31%; transform: rotate(0deg); }   /* phones: the mobile orange strip is cut flat */
.ccfa-hero-text--all { left: 46%;  top: 66%; transform: rotate(4.8deg); } /* follows the mobile green strip's 4.4–5.2° tilt */
@media (min-width: 768px) {
	.wp-block-childcareforall-hero-collage {
		aspect-ratio: 1294 / 670;
		background-image: var(--ccfa-img-hero-panel);
	}
	.ccfa-hero-strip--magenta { left: 9.7%;  top: 37.9%; width: 78%; }
	.ccfa-hero-strip--lime    { left: 13.7%; top: 63.7%; width: 78.8%; }
	.ccfa-hero-strip--orange  { left: 14%;   top: 3.9%;  width: 74%; }
	.ccfa-hero-photo--family    { left: 13.9%; top: 21.0%; bottom: auto; width: 43.8%; } /* bottom on the lime colour edge; the white torn paper stays visible below her (artboard) */ /* artboard: visible 236–695px, bottom on lime edge */
	.ccfa-hero-photo--megaphone { left: 45.4%; right: auto; top: -8.0%; width: 42.6%; } /* shirt bottom flush with the magenta edge */ /* artboard: visible 689–1174px, bottom on magenta edge */
	.wp-block-childcareforall-hero-collage .ccfa-hero-text { font-size: 4.25cqi; }
	.ccfa-hero-text--win { left: 17.5%; top: 11.5%; transform: rotate(1.5deg); } /* tilts with the orange strip (+1.5° in the artboard) */
	.ccfa-hero-text--all { left: 54.8%; top: 74%;   transform: rotate(3.5deg); }
}
/* Spanish: "¡Cuidado infantil para todos!" is half again as long as "Child care for all!" and ran
   off the panel. Phones: one smaller line started further left on the full-width strip.
   From 768px: keep the type size and stack it on two lines on the lime strip, right of the photo. */
:lang(es) .ccfa-hero-text--all { left: 27%; font-size: 5.2cqi; }
@media (min-width: 768px) {
	:lang(es) .wp-block-childcareforall-hero-collage .ccfa-hero-text--all {
		left: 54.8%;
		top: 70.5%;
		max-width: 34%;
		font-size: 4.25cqi;
		line-height: 0.95;
		white-space: normal;
		text-wrap: balance;
	}
}

/* ------------------------------------------------------------
   Statement
   ------------------------------------------------------------ */
.ccfa-statement.ccfa-statement {
	padding-top: var(--ccfa-space-l);
	padding-bottom: var(--ccfa-space-l);
}
.ccfa-statement .ccfa-statement-text {
	font-size: clamp(1.5rem, 1rem + 1.9vw, 2.3125rem);
	line-height: 1.3;
	letter-spacing: 0.01em;
	margin: 0;
	max-width: 26.3em; /* artboard: 973px at 37px → three lines */
	margin-inline: auto;
}

/* ------------------------------------------------------------
   What is universal child care? — black block + flush cards
   ------------------------------------------------------------
   No gaps: the 30px radii create the white seams and the
   four-point star at the centre of the 2x2. */
.ccfa-what.ccfa-what {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
.ccfa-what.ccfa-what > * {
	margin-block: 0;
	min-width: 0;
}
.ccfa-what-block.ccfa-what-block {
	display: flex;
	flex-direction: column;
	background: var(--ccfa-img-black-block) center / 100% 100% no-repeat;
	padding: clamp(1.75rem, 1rem + 2.5vw, 3.4375rem) clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1.5rem, 1rem + 1.8vw, 2.4375rem);
	min-height: 0;
	text-align: center; /* phones: copy and button centred (QA 2026-09-15) */
	align-items: center;
}
.ccfa-what-block > .ccfa-what-title {
	font-weight: 300;
	letter-spacing: -0.01em;
	line-height: 1.1;
	font-size: clamp(2rem, 0.9rem + 3.1vw, 3.6rem);
	margin: 0 0 0.5em;
}
.ccfa-what-block > .ccfa-what-lead {
	font-weight: 300;
	font-size: clamp(1.0625rem, 0.75rem + 0.85vw, 1.5rem);
	line-height: 1.45;
	margin: 0 0 auto;
}
.ccfa-what-block > .ccfa-what-actions.ccfa-what-actions {
	justify-content: center; /* phones; flex-end from 768px */
	margin: var(--ccfa-space-s) 0 0;
}
.ccfa-cards.ccfa-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
.ccfa-cards.ccfa-cards > * {
	margin-block: 0;
	min-width: 0;
}
.ccfa-card.ccfa-card {
	border-radius: var(--ccfa-block-radius);
	padding: clamp(1.25rem, 0.6rem + 1.7vw, 2.375rem) clamp(1.25rem, 0.6rem + 1.9vw, 3rem) var(--ccfa-space-s);
}
.ccfa-card > h3 {
	font-size: clamp(1.1875rem, 0.9rem + 0.5vw, 1.5rem);
	margin: 0 0 0.35em;
}
.ccfa-card > p {
	font-size: clamp(0.8125rem, 0.6rem + 0.35vw, 0.875rem);
	line-height: 1.5;
	margin: 0;
}
@media (min-width: 768px) {
	/* Tablet: block full width above a 2x2 card grid; copy returns to the left. */
	.ccfa-what-block.ccfa-what-block { min-height: 20rem; text-align: left; align-items: normal; }
	.ccfa-what-block > .ccfa-what-title { max-width: 14ch; }
	.ccfa-what-block > .ccfa-what-lead { max-width: 30em; }
	.ccfa-what-block > .ccfa-what-actions.ccfa-what-actions { justify-content: flex-end; }
	/* Every card as tall as the tallest (QA 2026-09-24): two explicit equal rows, no aspect-ratio on the
	   cards (Safari sizes aspect-ratio grid items per row, which left the rows uneven). */
	.ccfa-cards.ccfa-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); container-type: inline-size; }
	.ccfa-card.ccfa-card { min-height: 14rem; }
}
@media (min-width: 1024px) {
	.ccfa-what.ccfa-what { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ccfa-what-block.ccfa-what-block { min-height: 0; }
	.ccfa-what-block > .ccfa-what-title { max-width: 9.5em; }
	.ccfa-what-block > .ccfa-what-lead { max-width: 22em; }
	.ccfa-card.ccfa-card { min-height: 35.65cqi; } /* the artboard's 324:231 card at half the grid width; longer (Spanish) copy still grows the row */
	.ccfa-card > p { max-width: 16.5em; }
}

/* ------------------------------------------------------------
   Who benefits? — magenta banner + girl cutout
   ------------------------------------------------------------
   Phone: girl stands above the banner (legs clipped). From 768px
   she is absolutely positioned, overlapping the banner and running
   into the footer (the section clips her at its bottom edge). */
.ccfa-who.ccfa-who {
	padding-top: var(--ccfa-space-xl);
	padding-bottom: var(--ccfa-space-l);
}
.ccfa-who-col.ccfa-who-col {
	position: relative;
	display: grid;
}
.ccfa-who-col.ccfa-who-col > * {
	margin-block: 0;
}
.ccfa-who-girl.ccfa-who-girl {
	/* Phones: the girl stands behind the magenta box (her lower body tucks under it). */
	position: relative;
	z-index: 0;
	width: 58%;
	margin: 0 auto -30%;
	pointer-events: none;
}
.ccfa-who-girl img {
	width: 100%;
	height: auto;
}
.ccfa-who-banner.ccfa-who-banner {
	position: relative;
	z-index: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--ccfa-space-s);
	border-radius: var(--ccfa-block-radius);
	min-height: 0;
	padding: var(--ccfa-space-m) var(--ccfa-space-s);
}
.ccfa-who-banner .ccfa-who-title {
	font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.875rem);
	line-height: 1.15;
	margin: 0;
	max-width: none;
}
/* Beat the parent's .wp-block-post-content a underline (0,2,1). */
.wp-block-post-content .ccfa-who-banner .ccfa-who-title a,
.wp-block-post-content .ccfa-who-banner .ccfa-who-title a:hover {
	text-decoration: none;
	color: inherit;
}
.ccfa-who-banner .ccfa-who-arrow.ccfa-who-arrow {
	/* The arrow box is exactly one heading line tall (same font-size, 1.15 line-height),
	   so bottom-aligning it centres the arrow on the last line of the heading. */
	flex: none;
	font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.875rem);
	height: 1.15em;
	width: auto;
	margin: 0;
	transition: transform 0.2s ease;
}
.ccfa-who-banner .ccfa-who-arrow.ccfa-who-arrow img {
	display: block;
	height: 100%;
	width: auto;
	margin: 0;
}
.ccfa-who-banner:hover .ccfa-who-arrow {
	transform: translateX(0.35em);
}
@media (min-width: 768px) {
	.ccfa-who.ccfa-who {
		padding-top: clamp(4rem, 2rem + 6vw, 7.75rem);
		padding-bottom: clamp(3rem, 1.5rem + 5vw, 7.6875rem);
		overflow: hidden;
	}
	.ccfa-who-col.ccfa-who-col { display: block; }
	.ccfa-who-girl.ccfa-who-girl {
		position: absolute;
		z-index: 2; /* desktop: in front of the banner, as in the artboard */
		left: 0.5%;
		top: calc(-1 * clamp(2.5rem, 0.75rem + 5vw, 5rem)); /* fist ~80px above the banner at 1366 */
		width: 44.7%;
		margin: 0;
	}
	.ccfa-who-banner.ccfa-who-banner {
		flex-direction: row;
		align-items: flex-end;
		justify-content: flex-end;
		text-align: left;
		min-height: 0;
		/* Vertical padding centres the two-line heading in the 230px artboard banner. */
		padding: clamp(1.5rem, 0.75rem + 3.7vw, 3.875rem) clamp(1.5rem, 0.5rem + 4vw, 3.5rem) clamp(1.5rem, 0.75rem + 3.7vw, 3.875rem) 44%;
	}
	.ccfa-who-banner .ccfa-who-title { max-width: 9.6em; }
	.ccfa-who-banner .ccfa-who-arrow.ccfa-who-arrow { margin-bottom: 0; align-self: flex-end; }
}

/* ------------------------------------------------------------
   Editor affordances (style.css is the editor stylesheet)
   ------------------------------------------------------------ */
/* The girl is swappable — let editors click her. */
.editor-styles-wrapper .ccfa-who-girl.ccfa-who-girl {
	pointer-events: auto;
}
/* Keep the hero shout lines editable above the artwork. */
.editor-styles-wrapper .wp-block-childcareforall-hero-collage .ccfa-hero-text {
	min-width: 4ch;
	cursor: text;
}
/* The page title is never printed on the front end (every page draws its own H1), so in the
   editor it reads as the settings field it is, not as a headline the visitor will see. */
.editor-styles-wrapper .editor-post-title.editor-post-title {
	font-family: var(--wp--preset--font-family--tertiary);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0;
}
.editor-styles-wrapper .editor-visual-editor__post-title-wrapper::after {
	content: 'Page title: used in the browser tab, menus and search results. It is not printed on the page.';
	display: block;
	max-width: var(--wp--style--global--content-size, 640px);
	margin: 0.25rem auto var(--wp--preset--spacing--medium);
	font-family: var(--wp--preset--font-family--tertiary);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

/* ============================================================
   Inner pages (how-it-works, who-benefits, partners, join-us)
   ============================================================
   Ported from designs/site.css and each page's <style>. Same
   devices as the homepage: the cyan torn panel, 30px blocks,
   lime cards, B&W cutouts. Mobile-first; min-width queries only.
   Doubled selectors beat core's .has-background padding and the
   parent's !important rules. */

/* ------------------------------------------------------------
   Section rhythm
   ------------------------------------------------------------
   The page hero sits flush under the header. The first content
   section carries top + bottom padding, every later one bottom
   only (site.css: .section-gap + .section-gap { padding-top: 0 }). */
.ccfa-page-hero.ccfa-page-hero {
	padding-top: 0;
}
.ccfa-inner-section.ccfa-inner-section {
	padding-bottom: var(--ccfa-space-l);
}
.ccfa-page-hero + .ccfa-inner-section.ccfa-inner-section {
	padding-top: var(--ccfa-space-l);
}
.ccfa-join-section.ccfa-join-section {
	padding-top: var(--ccfa-space-l); /* room above the title (QA 2026-09-15) */
}

/* ------------------------------------------------------------
   Page hero — client artboards (desktop 1294×355, phone 327×307)
   ------------------------------------------------------------
   A positioned collage like the homepage: cyan cut-corner panel
   (SVG), one torn strip per page, a photo cutout that rises above
   the panel and is clipped at its bottom edge, and the H1 on the
   strip. Base rules are the phone layout; ≥768px re-maps to the
   desktop artboard. Percentages are of the panel. */
.ccfa-page-hero-panel.ccfa-page-hero-panel {
	position: relative;
	isolation: isolate;
	container-type: inline-size;
	aspect-ratio: 327 / 307;
	background: var(--ccfa-img-inner-panel-m) center / 100% 100% no-repeat;
	clip-path: inset(-40% 0 0 0); /* photos may rise above; nothing hangs below */
	padding: 0;
	margin-top: var(--ccfa-space-m); /* room for the photo above the panel */
}
.ccfa-page-hero-panel.ccfa-page-hero-panel > * {
	position: absolute;
	margin: 0;
	min-width: 0;
}
.ccfa-page-hero-strip.ccfa-page-hero-strip,
.ccfa-page-hero-figure.ccfa-page-hero-figure {
	pointer-events: none;
}
.ccfa-page-hero-strip img,
.ccfa-page-hero-figure img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}
.ccfa-page-hero-strip.is-desktop { display: none; }
.ccfa-page-hero-strip.is-phone   { left: 0; right: 0; bottom: 0; width: 100%; z-index: 2; }
.ccfa-page-hero-figure.ccfa-page-hero-figure { left: 50%; top: -6%; width: 77%; transform: translateX(-50%); z-index: 1; } /* bottom tucks behind the strip's torn edge; every cutout's head pokes ~4% above the panel */
.ccfa-page-hero-panel.is-how-it-works .ccfa-page-hero-figure { width: 81.5%; top: -10.3%; } /* PNG has an 8% transparent top margin */
.ccfa-page-hero-panel.is-who-benefits .ccfa-page-hero-figure { width: 74%; } /* phone rule for every page: head ~6% above the panel, bottom ≥ 45px behind the strip's torn edge */
.ccfa-page-hero-panel.is-partners    .ccfa-page-hero-figure { width: 86%; top: -6%; } /* sized so the hard bottom edge still hides behind the strip's tear */
.ccfa-page-hero-panel .ccfa-page-hero-title.ccfa-page-hero-title {
	z-index: 3;
	left: 4%;
	right: 4%;
	top: 83%; /* centre of the strip's colour band */
	transform: translateY(-50%);
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 7.7cqi;
	line-height: 1.05;
	background: none;
	color: var(--wp--preset--color--contrast);
}
.ccfa-page-hero-panel.is-who-benefits .ccfa-page-hero-title.ccfa-page-hero-title { color: var(--wp--preset--color--base); }
.ccfa-page-hero-panel.is-partners    .ccfa-page-hero-title.ccfa-page-hero-title { top: 85%; }
@media (min-width: 768px) {
	.ccfa-page-hero-panel.ccfa-page-hero-panel {
		aspect-ratio: 1294 / 355;
		background-image: var(--ccfa-img-inner-panel);
		margin-top: var(--ccfa-space-l);
	}
	.ccfa-page-hero-strip.is-phone   { display: none; }
	.ccfa-page-hero-strip.is-desktop { display: block; z-index: 1; }
	.ccfa-page-hero-figure.ccfa-page-hero-figure { left: auto; transform: none; z-index: 2; }
	.ccfa-page-hero-panel .ccfa-page-hero-title.ccfa-page-hero-title {
		right: auto;
		text-align: left;
		font-size: 3.3cqi;
		line-height: 1.08;
		transform-origin: left center;
	}
	/* Client box art (EXTRAS artboard, 2026-09-24): one torn strip per page spanning the panel,
	   the title upright on its left, a photo on the right rising above the panel and cropped by
	   its bottom edge. Strips are 5.4:1 PNGs; percentages are of the 1294×355 panel. */
	.ccfa-page-hero-panel .ccfa-page-hero-strip.is-desktop { left: 6%; width: 88%; }
	.ccfa-page-hero-panel .ccfa-page-hero-title.ccfa-page-hero-title { left: 11%; max-width: 38%; font-size: 3cqi; transform: translateY(-50%); }
	/* How It Works: lime strip (torn top), mother + daughter kept per the client, cropped at the panel bottom like the others */
	.ccfa-page-hero-panel.is-how-it-works .ccfa-page-hero-strip.is-desktop { top: 24%; }
	.ccfa-page-hero-panel.is-how-it-works .ccfa-page-hero-figure           { right: 9%; top: -15%; bottom: auto; width: 36%; } /* the PNG has an 8% transparent top margin: -15% puts the heads ~7% above the panel like the other pages, 36% keeps the hard bottom edge below the panel */
	.ccfa-page-hero-panel.is-how-it-works .ccfa-page-hero-title.ccfa-page-hero-title { top: 58%; }
	/* Who Benefits: magenta strip (torn bottom), mother with two boys */
	.ccfa-page-hero-panel.is-who-benefits .ccfa-page-hero-strip.is-desktop { left: 5%; width: 89%; top: 15%; }
	.ccfa-page-hero-panel.is-who-benefits .ccfa-page-hero-figure           { right: 12%; top: -5%; width: 32%; }
	.ccfa-page-hero-panel.is-who-benefits .ccfa-page-hero-title.ccfa-page-hero-title { top: 39%; }
	/* Partners: orange strip (torn top), hugging kids until the new photo arrives */
	.ccfa-page-hero-panel.is-partners .ccfa-page-hero-strip.is-desktop { top: 25%; }
	.ccfa-page-hero-panel.is-partners .ccfa-page-hero-figure           { right: 10.6%; top: auto; bottom: 0; width: 34.8%; }
	.ccfa-page-hero-panel.is-partners .ccfa-page-hero-title.ccfa-page-hero-title { top: 58%; }
}

/* Intro statement under a page hero — centred Staatliches, like the homepage statement */
.ccfa-page-intro.ccfa-page-intro { padding-top: var(--ccfa-space-l); }
.ccfa-page-intro--tight.ccfa-page-intro--tight { padding-bottom: var(--ccfa-space-l); } /* How It Works: same room below the statement as above it (client 2026-09-25) */
.ccfa-page-intro .ccfa-page-intro-text {
	font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
	line-height: 1.3;
	letter-spacing: 0.01em;
	margin: 0 auto;
	max-width: 30em;
}
.ccfa-page-intro .ccfa-page-intro-text + .ccfa-page-intro-text { margin-top: var(--ccfa-space-s); }
.ccfa-page-intro .ccfa-page-intro-note { max-width: none; margin: var(--ccfa-space-s) auto 0; } /* one line on desktop (QA 2026-09-15) */
.ccfa-page-intro .wp-block-buttons { margin-top: var(--ccfa-space-s); }

/* ------------------------------------------------------------
   Blocks — rounded colour panels (black / cyan / magenta / lime)
   ------------------------------------------------------------
   Colour comes from the group's background preset; the black
   variant layers the torn black-block artwork on top. */
.ccfa-block.ccfa-block {
	border-radius: var(--ccfa-block-radius);
	padding: clamp(1.75rem, 1rem + 2.5vw, 3.4375rem) clamp(1.5rem, 1rem + 2vw, 3rem);
}
.ccfa-block--black.ccfa-block--black {
	/* Drawn in CSS (not the stretched artwork) so the 30px corners and the
	   66×69px bottom-left cut stay true at any block proportion. */
	background: var(--wp--preset--color--dark) !important;
	border-radius: var(--ccfa-block-radius);
	/* Phones: a smaller bottom-left cut, enough bottom padding that copy never runs into it,
	   and centred content like the homepage box (QA 2026-09-15). Desktop geometry from 768px. */
	clip-path: polygon(0 0, 100% 0, 100% 100%, 48px 100%, 0 calc(100% - 50px));
	padding: clamp(1.75rem, 1rem + 2.5vw, 3.4375rem) clamp(1.5rem, 1rem + 2vw, 3rem) calc(50px + 1rem);
	text-align: center;
	justify-items: center;
}
.ccfa-block--black.ccfa-block--black > * {
	margin-inline: auto;
}
@media (min-width: 768px) {
	.ccfa-block--black.ccfa-block--black {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 66px 100%, 0 calc(100% - 69px));
		padding-bottom: clamp(1.5rem, 1rem + 1.8vw, 2.4375rem);
		text-align: left;
		justify-items: normal;
	}
	.ccfa-block--black.ccfa-block--black > * {
		margin-inline: 0;
	}
}
/* Same voice as the homepage black block (QA 2026-09-14): Rubik Light headline in lime. */
.ccfa-block--black.ccfa-block--black > h2 {
	font-family: var(--wp--preset--font-family--primary);
	font-weight: 300;
	letter-spacing: -0.01em;
	line-height: 1.1;
	font-size: clamp(2rem, 0.9rem + 3.1vw, 3.6rem);
	max-width: 10em;
}
.ccfa-block h2 {
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.875rem);
	margin: 0 0 0.5em;
	max-width: 14em;
}
.ccfa-lead.ccfa-lead {
	font-weight: 300;
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
	line-height: 1.45;
	margin: 0;
	max-width: 30em;
}
.ccfa-statement-row .ccfa-lead.ccfa-lead.ccfa-lead {
	margin-bottom: 0.75em; /* the lead line ("It's free for everyone…") stands apart from the body copy below it */
}

/* Outcomes: black block + flush 2x2 lime cards (same seams as the homepage) */
.ccfa-outcomes.ccfa-outcomes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
.ccfa-outcomes.ccfa-outcomes > * {
	margin-block: 0;
	min-width: 0;
}
.ccfa-outcomes-block.ccfa-outcomes-block {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: var(--ccfa-block-radius);
}
.ccfa-outcomes-block > h2 {
	max-width: 12em;
}
.ccfa-card-grid.ccfa-card-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: 1fr; /* equal-height cards regardless of copy length (QA 2026-09-14) */
}
.ccfa-card-grid.ccfa-card-grid > * {
	margin-block: 0;
	min-width: 0;
}
/* Inner-page cards read larger than the homepage's and size to content. */
.ccfa-card-grid .ccfa-card.ccfa-card {
	min-height: 0;
	aspect-ratio: auto;
}
.ccfa-card-grid .ccfa-card > p {
	font-size: clamp(0.9375rem, 0.8rem + 0.35vw, 1.0625rem);
	max-width: none;
}
/* Photo beside the cards: three 30px corners and the black block's bottom-left cut. */
.ccfa-outcomes-photo.ccfa-outcomes-photo {
	margin: 0;
	border-radius: var(--ccfa-block-radius);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 66px 100%, 0 calc(100% - 69px));
	overflow: hidden;
	aspect-ratio: 3 / 2;
}
.ccfa-outcomes-photo.ccfa-outcomes-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
@media (min-width: 768px) {
	.ccfa-outcomes.ccfa-outcomes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ccfa-outcomes-photo.ccfa-outcomes-photo {
		aspect-ratio: auto;
		height: 100%; /* fills the row set by the cards */
	}
	.ccfa-card-grid.ccfa-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Eligibility: copy + chips beside the "YOU are eligible!" strip */
.ccfa-eligible.ccfa-eligible {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ccfa-space-m);
	align-items: center;
}
.ccfa-eligible.ccfa-eligible > * {
	margin-block: 0;
	min-width: 0;
}
.ccfa-chips.ccfa-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ccfa-space-s);
}
.ccfa-chips > li {
	margin: 0;
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
	letter-spacing: 0.01em;
	line-height: 1.15;
	background: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: 0.55em 1.1em 0.5em;
}
@media (min-width: 768px) {
	.ccfa-eligible.ccfa-eligible {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.ccfa-eligible > .ccfa-shout {
		justify-self: end;
	}
}

/* Torn-strip callout ("YOU are eligible!", "Join us") — a paragraph
   with a background preset; the tear is a clip-path. */
.ccfa-shout.ccfa-shout {
	display: inline-block;
	margin: 0;
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.4375rem);
	line-height: 1;
	padding: 0.3em 0.7em 0.25em;
	transform: rotate(-2deg);
	clip-path: polygon(0 6%, 4% 0, 12% 5%, 22% 1%, 35% 6%, 48% 0, 60% 5%, 73% 1%, 86% 6%, 100% 2%, 100% 94%, 92% 100%, 80% 95%, 66% 100%, 52% 95%, 38% 100%, 24% 96%, 10% 100%, 0 95%);
}
.ccfa-shout.ccfa-shout.is-lime {
	transform: rotate(2deg);
}

/* Arrow lists inside the magenta / lime blocks (arrow in currentColor) */
.ccfa-point-list.ccfa-point-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ccfa-space-s);
}
.ccfa-point-list > li {
	position: relative;
	margin: 0;
	padding-left: 2.6rem;
	font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem);
	line-height: 1.5;
}
.ccfa-point-list > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: calc(0.55em - 1px); /* the 2px line centred on the same axis as the chevron (QA 2026-09-18) */
	width: 1.5rem;
	height: 2px;
	background: currentColor;
}
.ccfa-point-list > li::after {
	content: '';
	position: absolute;
	left: 0.9rem; /* rotated 0.5rem box: its tip lands on the line's end at 1.5rem */
	top: 0.55em;
	width: 0.5rem;
	height: 0.5rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	transform-origin: center;
}

/* Statement row: Staatliches on the left, Rubik body on the right */
.ccfa-statement-row.ccfa-statement-row {
	gap: var(--ccfa-space-m) var(--ccfa-space-l);
}
.ccfa-statement-row h2 {
	font-size: clamp(2rem, 1.2rem + 3vw, 3.4375rem);
	line-height: 1.05;
	margin: 0;
}
.ccfa-statement-row p {
	margin: 0 0 1em;
}
.ccfa-statement-row p:last-child {
	margin-bottom: 0;
}
/* Cost: one column, three quarters of the section width (QA 2026-09-15) */
.ccfa-cost.ccfa-cost h2 {
	font-size: clamp(2rem, 1.2rem + 3vw, 3.4375rem);
	line-height: 1.05;
	margin: 0 0 0.5em;
}
.ccfa-cost.ccfa-cost .ccfa-lead.ccfa-lead {
	margin-bottom: 0.75em;
}
.ccfa-cost.ccfa-cost p {
	margin: 0 0 1em;
}
.ccfa-cost.ccfa-cost p:last-child {
	margin-bottom: 0;
}
.ccfa-cost.ccfa-cost {
	max-width: calc(0.75 * var(--wp--style--global--wide-size, 1294px)); /* three quarters of the wide content wrapper (~970px), centred like the rest of the constrained content */
}

/* Two-up blocks */
/* Two-up blocks fill their columns so the pair is always the same height (QA 2026-09-14). */
.ccfa-two-up.ccfa-two-up > .wp-block-column.wp-block-column {
	display: flex;
	flex-direction: column;
	align-self: stretch; /* the pattern's "top" vertical alignment would stop the columns stretching */
}
.ccfa-two-up.ccfa-two-up > .wp-block-column > .ccfa-block {
	flex: 1 1 auto;
}
.ccfa-two-up.ccfa-two-up {
	gap: var(--ccfa-space-m);
}

/* "How will the government pay" — heading beside a light-weight paragraph */
.ccfa-pay.ccfa-pay {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ccfa-space-m);
	align-items: center;
}
.ccfa-pay.ccfa-pay > * {
	margin-block: 0;
	min-width: 0;
}
.ccfa-pay.ccfa-pay {
	padding-top: clamp(2.25rem, 1.5rem + 2.8vw, 4rem);
}
@media (min-width: 768px) {
	.ccfa-pay.ccfa-pay.ccfa-pay {
		padding-bottom: clamp(2.25rem, 1.5rem + 2.8vw, 4rem); /* equal above and below the two columns; the bottom-left cut needs the room */
	}
}
@media (min-width: 768px) {
	.ccfa-pay.ccfa-pay {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ccfa-space-l);
	}
}

/* CTA banner (mirrors the homepage "Who benefits?" banner) */
/* Purple CTA banner with the homepage girl (client 2026-09-28: girl + purple is Child Care for All's device,
   boy + orange is Child Care for All Now's). The homepage banner's numbers: phones, the girl stands behind the
   box; from 768px she stands in front at its left edge, fist above the box, her feet running into the footer
   (the section clips her at its bottom edge), with the button at the bottom right. */
.ccfa-cta.ccfa-cta {
	padding-top: var(--ccfa-space-xl);
	padding-bottom: var(--ccfa-space-l);
}
.ccfa-cta-col.ccfa-cta-col {
	position: relative;
	display: grid;
}
.ccfa-cta-col.ccfa-cta-col > * {
	margin-block: 0;
}
.ccfa-cta-girl.ccfa-cta-girl {
	position: relative;
	z-index: 0;
	width: 58%;
	margin: 0 auto -30%;
	pointer-events: none;
}
.ccfa-cta-girl img {
	width: 100%;
	height: auto;
}
.ccfa-cta-banner.ccfa-cta-banner {
	position: relative;
	z-index: 1;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-radius: var(--ccfa-block-radius);
	gap: var(--ccfa-space-m);
	padding: clamp(1.75rem, 1rem + 2.5vw, 3rem) clamp(1.5rem, 1rem + 3vw, 4rem);
}
.ccfa-cta-banner > h2 {
	font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.875rem);
	line-height: 1.15;
	margin: 0;
	max-width: 14em;
}
.ccfa-cta-banner > .wp-block-buttons {
	flex: none;
	margin: 0;
}
@media (min-width: 768px) {
	.ccfa-cta.ccfa-cta {
		padding-top: 0; /* the section above carries the rhythm gap; the raised fist rises into it */
		padding-bottom: clamp(2.5rem, 1rem + 4vw, 5.5rem); /* room for the girl to run down to the footer, close to the gap above the box */
		clip-path: inset(-100vh 0 0 0); /* clip only at the footer's edge */
	}
	.ccfa-cta-col.ccfa-cta-col { display: block; }
	.ccfa-cta-girl.ccfa-cta-girl {
		position: absolute;
		z-index: 2;
		left: 0.5%;
		top: -3rem; /* fist above the box, short of the section above */
		width: 44.7%; /* the homepage girl's width */
		margin: 0;
	}
	.ccfa-cta-banner.ccfa-cta-banner {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-end; /* the button sits on the box's bottom edge, right of the heading */
		justify-content: space-between;
		text-align: left;
		min-height: clamp(12rem, 8rem + 8vw, 17rem);
		padding: clamp(1.75rem, 1rem + 2.5vw, 3rem) clamp(1.5rem, 1rem + 3vw, 3.5rem) clamp(1.75rem, 1rem + 2.5vw, 3rem) 44%; /* clear of the girl, as on the homepage */
	}
	.ccfa-cta-banner > h2 { flex: 1 1 0; min-width: 0; max-width: 14em; align-self: center; }
	.ccfa-cta-banner > .wp-block-buttons { align-self: flex-end; margin-left: var(--ccfa-space-m); }
}
/* Spanish: the CTA line is twice as long, so from 768px it takes the full width beside the girl and the
   button drops under it, right-aligned, instead of stacking word by word beside the button. */
@media (min-width: 768px) {
	:lang(es) .ccfa-cta-banner.ccfa-cta-banner { flex-wrap: wrap; }
	:lang(es) .ccfa-cta-banner > h2 { flex: 1 1 100%; max-width: 16em; font-size: clamp(1.5rem, 1rem + 1.8vw, 2.5rem); }
	:lang(es) .ccfa-cta-banner > .wp-block-buttons { margin-left: auto; }
}
/* The one dark button: black fill, white text — on the orange banner only. */
.ccfa-button-dark .wp-block-button__link.wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 88%, white) !important;
	color: var(--wp--preset--color--base) !important;
}

/* ------------------------------------------------------------
   Who benefits — audience index + coloured audience sections
   ------------------------------------------------------------
   Phone: the index is a sticky horizontal chip bar bleeding to
   the viewport edges. From 1024px it is a sticky left rail. */
.ccfa-audiences.ccfa-audiences {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ccfa-space-m);
	align-items: start;
}
.ccfa-audiences.ccfa-audiences > * {
	margin-block: 0;
	min-width: 0;
}
.ccfa-audience-index.ccfa-audience-index {
	position: sticky;
	top: var(--ccfa-header-compact);
	z-index: 5;
	background: var(--wp--preset--color--base);
	margin-inline: calc(-1 * var(--wp--style--root--padding-left, var(--wp--preset--spacing--medium))) calc(-1 * var(--wp--style--root--padding-right, var(--wp--preset--spacing--medium)));
	padding: 0.45rem var(--wp--style--root--padding-right, var(--wp--preset--spacing--medium)) 0.45rem var(--wp--style--root--padding-left, var(--wp--preset--spacing--medium));
}
.ccfa-audience-index ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.45rem;
	overflow-x: auto;
	scrollbar-width: none;
}
.ccfa-audience-index ul::-webkit-scrollbar {
	display: none;
}
/* Phones/tablets: the chip bar scrolls sideways; arrow buttons at each end nudge it (QA 2026-09-15). */
.ccfa-audience-index.ccfa-audience-index {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}
.ccfa-audience-index ul {
	flex: 1 1 auto;
	min-width: 0;
}
.ccfa-audience-index .ccfa-audience-scroll {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--neutral);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}
.ccfa-audience-index .ccfa-audience-scroll:hover {
	background: var(--wp--preset--color--tertiary);
}
.ccfa-audience-index .ccfa-audience-scroll svg {
	width: 0.875rem;
	height: 0.875rem;
	display: block;
}
.ccfa-audience-index .ccfa-audience-scroll.is-disabled {
	opacity: 0.3;
	pointer-events: none;
}
.ccfa-audience-index li {
	margin: 0;
	flex: none;
}
/* (0,3,2) to beat the parent's a11y `.wp-block-post-content a:not(.wp-block-button__link)` underline. */
.wp-block-post-content .ccfa-audience-index.ccfa-audience-index li a {
	display: block;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 1.125rem;
	letter-spacing: 0.01em;
	line-height: 1.15;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	padding: 0.4em 0.2em;
	border-bottom: 3px solid var(--wp--preset--color--outline);
	transition: border-color 0.15s ease, color 0.15s ease;
}
.wp-block-post-content .ccfa-audience-index.ccfa-audience-index li a:hover,
.wp-block-post-content .ccfa-audience-index.ccfa-audience-index li a.is-active {
	border-bottom-color: var(--ccfa-audience-bar, var(--wp--preset--color--primary)); /* only the bar takes the section colour; the text stays contrast */
}
.ccfa-audience-list.ccfa-audience-list {
	display: grid;
	gap: var(--ccfa-space-m);
}
.ccfa-audience-list.ccfa-audience-list > * {
	margin-block: 0;
	min-width: 0;
}
.ccfa-audience.ccfa-audience {
	border-radius: var(--ccfa-block-radius);
	overflow: hidden;
	scroll-margin-top: 4rem;
	padding: clamp(1rem, 0.6rem + 1.2vw, 1.5rem) clamp(1.25rem, 1rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 3rem);
}
.ccfa-audience > h2 {
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.875rem);
	margin: 0 0 0.8em;
}
.ccfa-audience > p {
	margin: 0;
	font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem);
	line-height: 1.55;
	max-width: 38em;
}
@media (min-width: 1024px) {
	.ccfa-audiences.ccfa-audiences {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		gap: var(--ccfa-space-l);
	}
	.ccfa-audience-index.ccfa-audience-index {
		top: calc(var(--ccfa-header-compact) + var(--ccfa-space-s)); /* below the sticky header */
		z-index: auto;
		background: transparent;
		margin-inline: 0;
		padding: 0;
	}
	.ccfa-audience-index.ccfa-audience-index {
		display: block;
	}
	.ccfa-audience-index .ccfa-audience-scroll {
		display: none; /* the rail is vertical from 1024px */
	}
	.ccfa-audience-index ul {
		display: grid;
		gap: 0.25rem;
		overflow: visible;
	}
	.wp-block-post-content .ccfa-audience-index.ccfa-audience-index li a {
		white-space: normal;
		font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
		padding: 0.45em 0 0.45em 1.1em;
		border-bottom: 0;
		border-left: 4px solid var(--wp--preset--color--outline);
	}
	.wp-block-post-content .ccfa-audience-index.ccfa-audience-index li a:hover,
	.wp-block-post-content .ccfa-audience-index.ccfa-audience-index li a.is-active {
		border-left-color: var(--ccfa-audience-bar, var(--wp--preset--color--primary));
	}
	.ccfa-audience.ccfa-audience {
		scroll-margin-top: var(--ccfa-space-s);
	}
}

/* ------------------------------------------------------------
   Partners — intro, logo wall, statement
   ------------------------------------------------------------ */
.ccfa-partners-intro > p {
	max-width: 40em;
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
	line-height: 1.55;
	margin: 0 0 var(--ccfa-space-s);
}
.ccfa-partners-intro > .wp-block-buttons {
	margin: 0;
}
.ccfa-logo-wall.ccfa-logo-wall > * {
	margin-block: 0;
}
.ccfa-logo-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ccfa-space-s);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ccfa-logo-wall.ccfa-logo-wall > .ccfa-logo-grid--supporters {
	margin-top: var(--ccfa-space-m);
}
.ccfa-logo-wall.ccfa-logo-wall > .ccfa-logo-heading {
	margin: 0 0 var(--ccfa-space-s);
	font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
	text-align: left;
}
.ccfa-logo-wall.ccfa-logo-wall > .ccfa-logo-grid + .ccfa-logo-heading {
	margin-top: var(--ccfa-space-l);
}
.ccfa-logo-wall.ccfa-logo-wall > .ccfa-logo-heading + .ccfa-logo-grid {
	margin-top: 0;
}
.ccfa-logo-tile {
	aspect-ratio: 3 / 2;
	min-height: 0; /* the ratio is the tile's size: tall logos scale down instead of growing the tile */
	overflow: hidden;
	container-type: inline-size;
	display: grid;
	place-items: center;
	margin: 0;
	padding: var(--ccfa-space-s);
	border-radius: 0.375rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--outline);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--tertiary);
	font-weight: 600;
	font-size: 0.9375rem;
	text-align: center;
	transition: border-color 0.15s ease;
}
.ccfa-logo-tile:hover {
	border-color: var(--wp--preset--color--contrast);
}
.ccfa-logo-tile a {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}
.ccfa-logo-tile img {
	/* capped against the tile's own width (cqi): a percentage max-height never resolves inside the link wrapper, so portrait logos overflowed the tile */
	max-width: 80cqi;
	max-height: 46cqi; /* 70% of the 3/2 tile's height */
	width: auto;
	height: auto;
	object-fit: contain;
}
@media (min-width: 768px) {
	.ccfa-logo-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.ccfa-logo-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.ccfa-partners-statement.ccfa-partners-statement {
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	line-height: 1.3;
	letter-spacing: 0.01em;
	max-width: 30em;
	margin: 0 auto;
}

/* ------------------------------------------------------------
   Join us — copy column + placeholder form
   ------------------------------------------------------------ */
.ccfa-join.ccfa-join {
	gap: var(--ccfa-space-l);
}
.ccfa-join-copy > .ccfa-join-shout.ccfa-join-shout {
	/* The client's "Join us" paper card (joinus-header.svg, 267x186): torn white top, shadow,
	   orange band from ~42% to ~95% of the height. The box keeps the artwork's aspect ratio and
	   the words are centred on the band (68% down). */
	--ccfa-join-shout-size: clamp(1.5rem, 1rem + 2vw, 2.75rem); /* the box is sized from this, the words from font-size, so Spanish can shrink the words alone */
	display: inline-grid;
	align-items: center;
	justify-items: center;
	box-sizing: border-box;
	width: calc(5 * var(--ccfa-join-shout-size));
	height: calc(5 * var(--ccfa-join-shout-size) * 186 / 267); /* the artwork's aspect ratio */
	font-size: var(--ccfa-join-shout-size);
	line-height: 1;
	margin: 0 0 var(--ccfa-space-s);
	padding: calc(1.25 * var(--ccfa-join-shout-size)) calc(0.4 * var(--ccfa-join-shout-size)) 0; /* 36% of the height: the content box centre lands at 68%, the orange band's middle */
	position: relative;
	background: none !important;
	clip-path: none;
	transform: rotate(-3.73deg); /* the words follow the card's tilt (the SVG's mask rect is rotated -3.73deg) */
}
.ccfa-join-copy > .ccfa-join-shout.ccfa-join-shout::before {
	/* The artwork lives on a pseudo-element counter-rotated back to upright, so only the words tilt. */
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url('assets/images/inner/joinus-header.svg') center / 100% 100% no-repeat;
	transform: rotate(3.73deg);
}
.ccfa-join-copy > .ccfa-join-title {
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
	margin: 0 0 0.4em;
	max-width: 11em;
}
.ccfa-join-copy > .ccfa-join-intro {
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
	line-height: 1.55;
	max-width: 28em;
	margin: 0;
}
.ccfa-join-copy > .ccfa-join-figure {
	margin: var(--ccfa-space-m) 0 0;
	width: 100%; /* fills the copy column (QA 2026-09-15: bigger) */
}
.ccfa-join-figure img {
	width: 100%;
	height: auto;
}

/* Placeholder form (blocks/join-form) — lime panel, foundation.css inputs */
.ccfa-join-form.ccfa-join-form {
	margin: 0;
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--contrast);
	border-radius: var(--ccfa-block-radius);
	padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}
.ccfa-join-form__title {
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.875rem);
	margin: 0 0 var(--ccfa-space-s);
}
.ccfa-join-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.85rem var(--ccfa-space-m); /* phones: tight rows so the form stays short (QA 2026-09-15) */
}
.ccfa-join-form__grid > * {
	min-width: 0;
}
.ccfa-join-form__full {
	grid-column: 1 / -1;
}
.ccfa-join-form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.ccfa-join-form label,
.ccfa-join-form legend {
	display: block;
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--tertiary);
	font-weight: 600;
	font-size: 0.9375rem; /* phones: keeps the form short (QA 2026-09-15) */
}
@media (min-width: 768px) {
	.ccfa-join-form label,
	.ccfa-join-form legend {
		font-size: 1rem;
	}
}
.ccfa-join-form__optional {
	font-weight: 400;
}
.ccfa-join-form .ccfa-input,
.ccfa-join-form .ccfa-textarea {
	width: 100%;
	font: inherit;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 0.375rem;
	padding: 0.8rem 1rem;
	box-shadow: none;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: 0.65rem 0.9rem;
	font-size: 1rem;
}
.ccfa-join-form .ccfa-input:focus,
.ccfa-join-form .ccfa-textarea:focus {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 0;
	border-color: var(--wp--preset--color--contrast);
}
.ccfa-join-form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}
.ccfa-join-form__choices label {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	padding: 0.55rem 1rem;
	cursor: pointer;
}
.ccfa-join-form__choices input,
.ccfa-join-form__consent input {
	accent-color: var(--wp--preset--color--primary);
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	flex: none;
}
.ccfa-join-form__consent.ccfa-join-form__consent {
	display: flex;
	gap: 0.45rem;
	align-items: flex-start;
	font-family: var(--wp--preset--font-family--primary);
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.45;
	cursor: pointer;
}
.ccfa-join-form__consent input {
	margin-top: 0.2rem;
}
.ccfa-join-form__submit.ccfa-join-form__submit {
	width: 100%;
	cursor: pointer;
}
.ccfa-join-form__note {
	margin: var(--ccfa-space-s) 0 0;
	font-family: var(--wp--preset--font-family--tertiary);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

.editor-styles-wrapper .ccfa-join-form__embed.is-editor-stand-in {
	background: var(--wp--preset--color--base);
	border: 2px dashed var(--wp--preset--color--contrast);
	border-radius: 0.375rem;
	padding: var(--ccfa-space-s) var(--ccfa-space-m);
	font-family: var(--wp--preset--font-family--tertiary);
}
.editor-styles-wrapper .ccfa-join-form__embed.is-editor-stand-in p { margin: 0 0 0.35rem; }
/* Action Network embed (client, 2026-09-28): their widget injects the form into .ccfa-join-form__embed
   and ships its own stylesheet; these rules, scoped to the block, restyle it to the placeholder's design
   (lime box, 2px black inputs, pill radios, orange full-width button). Selectors carry the block class
   so they outrank Action Network's #id rules. */
.ccfa-join-form--action-network .can_embed,
.ccfa-join-form--action-network #can_embed_form.can_float,
.ccfa-join-form--action-network #can_embed_form_inner {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	font-family: var(--wp--preset--font-family--primary) !important;
	color: var(--wp--preset--color--contrast) !important;
	text-align: left;
}
.ccfa-join-form--action-network #can_embed_form_inner > h2,
.ccfa-join-form--action-network #can_embed_form_inner > h4,
.ccfa-join-form--action-network #can_embed_form .ajax-loading:not(.active) {
	display: none !important; /* the block heading carries the title */
}
.ccfa-join-form--action-network #can_embed_form.can_float #form_col1,
.ccfa-join-form--action-network #can_embed_form.can_float #form_col2 {
	float: none !important; /* Action Network floats the two columns side by side at 48% each; one column here, submit under the fields */
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.ccfa-join-form--action-network #form_col1 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.85rem var(--ccfa-space-m);
	list-style: none;
}
.ccfa-join-form--action-network #form_col1 > li,
.ccfa-join-form--action-network #form_col1 > span {
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0;
	list-style: none;
}
.ccfa-join-form--action-network #form_col1 > .form_builder_output:not(:has(*)) {
	display: none; /* an empty placeholder item would otherwise take the first grid cell */
}
.ccfa-join-form--action-network #form_col1 > .control-group,
.ccfa-join-form--action-network #form_col1 > .international_link-wrap,
.ccfa-join-form--action-network #form_col1 > .country_drop_wrap {
	grid-column: 1 / -1;
}
@media (min-width: 768px) {
	.ccfa-join-form--action-network #form_col1 {
		grid-template-columns: 1fr 1fr;
	}
}
.ccfa-join-form--action-network #can_embed_form label.control-label,
.ccfa-join-form--action-network #can_embed_form label.check_radio_label {
	display: block;
	margin: 0 0 0.5rem !important;
	font-family: var(--wp--preset--font-family--tertiary) !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	line-height: 1.3;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--wp--preset--color--contrast) !important;
}
.ccfa-join-form--action-network #can_embed_form label.control-label.disabled,
.ccfa-join-form--action-network #can_embed_form label.control-label:empty {
	display: none !important; /* the core fields label themselves through the float label */
}
.ccfa-join-form--action-network #can_embed_form .floatlabel-wrapper {
	position: relative;
	margin: 0 !important;
}
.ccfa-join-form--action-network #can_embed_form .floatlabel-label {
	font-family: var(--wp--preset--font-family--tertiary) !important;
	font-weight: 600 !important;
	font-size: 0.75rem !important;
	color: var(--wp--preset--color--muted) !important;
	left: 1rem !important;
}
.ccfa-join-form--action-network #can_embed_form input[type="text"],
.ccfa-join-form--action-network #can_embed_form input[type="email"],
.ccfa-join-form--action-network #can_embed_form textarea,
.ccfa-join-form--action-network #can_embed_form select {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 0.75rem 1rem !important;
	font: inherit !important;
	font-size: 1rem !important;
	line-height: 1.3 !important;
	color: var(--wp--preset--color--contrast) !important;
	background: var(--wp--preset--color--base) !important;
	border: 2px solid var(--wp--preset--color--contrast) !important;
	border-radius: 0.375rem !important;
	box-shadow: none !important;
	height: auto !important;
}
.ccfa-join-form--action-network #can_embed_form .floatlabel-wrapper.floatlabel-input-active input,
.ccfa-join-form--action-network #can_embed_form input.floatlabel-input:not(:placeholder-shown) {
	padding-top: 1.25rem !important;
	padding-bottom: 0.35rem !important;
}
.ccfa-join-form--action-network #can_embed_form textarea {
	min-height: 6rem;
	resize: vertical;
}
.ccfa-join-form--action-network #can_embed_form input:focus,
.ccfa-join-form--action-network #can_embed_form textarea:focus {
	outline: 3px solid var(--wp--preset--color--accent) !important;
	outline-offset: 0;
}
/* Validation: Action Network paints errors red with an inset glow and focus blue; here errors are the brand
   orange, plain 2px, and an errored field keeps an orange ring even while focused (client 2026-09-28). */
.ccfa-join-form--action-network #can_embed_form input.error_input,
.ccfa-join-form--action-network #can_embed_form textarea.error_input,
.ccfa-join-form--action-network #can_embed_form .error_input-select_wrap > .can_select {
	border: 2px solid var(--wp--preset--color--primary) !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--contrast) !important;
}
.ccfa-join-form--action-network #can_embed_form input.error_input:focus,
.ccfa-join-form--action-network #can_embed_form textarea.error_input:focus {
	outline-color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
}
.ccfa-join-form--action-network #can_embed_form input.error_input::placeholder,
.ccfa-join-form--action-network #can_embed_form textarea.error_input::placeholder {
	color: var(--wp--preset--color--primary-dark) !important;
}
.ccfa-join-form--action-network #can_embed_form .check_radio_field label.error_checkbox,
.ccfa-join-form--action-network #can_embed_form .check_radio_field label.error_checkbox span,
.ccfa-join-form--action-network #can_embed_form .error_checkbox label {
	color: var(--wp--preset--color--primary-dark) !important;
}
.ccfa-join-form--action-network #can_embed_form .check_radio_field label.radio.error_checkbox {
	border-color: var(--wp--preset--color--primary) !important;
}
.ccfa-join-form--action-network #can_embed_form .check_radio_field {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0 !important;
	padding: 0 !important;
}
.ccfa-join-form--action-network #can_embed_form label.radio,
.ccfa-join-form--action-network #can_embed_form label.checkbox,
.ccfa-join-form--action-network #d_sharing label {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--wp--preset--font-family--primary) !important;
	font-weight: 400 !important;
	font-size: 0.9375rem !important;
	line-height: 1.45 !important;
	color: var(--wp--preset--color--contrast) !important;
	cursor: pointer;
}
.ccfa-join-form--action-network #can_embed_form .check_radio_field label.radio {
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	background: var(--wp--preset--color--base) !important;
	border: 2px solid var(--wp--preset--color--contrast) !important;
	border-radius: 999px !important;
	padding: 0.55rem 1rem !important;
}
.ccfa-join-form--action-network #can_embed_form .check_radio_field label.checkbox {
	display: inline-flex !important;
	width: auto !important;
	padding: 0 !important;
}
.ccfa-join-form--action-network #can_embed_form label.radio input,
.ccfa-join-form--action-network #can_embed_form label.checkbox input,
.ccfa-join-form--action-network #d_sharing input[type="checkbox"] {
	accent-color: var(--wp--preset--color--primary);
	width: 1.1rem !important;
	height: 1.1rem !important;
	margin: 0 !important;
	flex: none;
	position: static !important;
}
.ccfa-join-form--action-network #can_embed_form label.checkbox input,
.ccfa-join-form--action-network #d_sharing input[type="checkbox"] {
	margin-top: 0.2rem !important;
}
.ccfa-join-form--action-network #can_embed_form .international_link {
	font-family: var(--wp--preset--font-family--tertiary);
	font-size: 0.875rem;
	color: var(--wp--preset--color--contrast) !important;
	text-decoration: underline !important;
}
.ccfa-join-form--action-network #form_col2 {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin-top: 0.85rem !important;
}
.ccfa-join-form--action-network #form_col2 input[type="submit"] {
	order: 2;
	width: 100% !important;
	margin: 0 !important;
	padding: 0.875rem 1.75rem !important;
	font-family: var(--wp--preset--font-family--tertiary) !important;
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em !important;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast) !important;
	background: var(--wp--preset--color--primary) !important;
	border: 0 !important;
	border-radius: 0.375rem !important;
	box-shadow: none !important;
	text-shadow: none !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.ccfa-join-form--action-network #form_col2 input[type="submit"]:hover,
.ccfa-join-form--action-network #form_col2 input[type="submit"]:focus-visible {
	background: var(--wp--preset--color--primary-dark) !important;
}
.ccfa-join-form--action-network #d_sharing {
	order: 1;
	margin: 0 !important;
	padding: 0 !important;
}
.ccfa-join-form--action-network #d_sharing ul,
.ccfa-join-form--action-network #d_sharing li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.ccfa-join-form--action-network #action_info,
.ccfa-join-form--action-network .can_embed #logo_wrap,
.ccfa-join-form--action-network #can_embed_form #logo_wrap {
	margin: var(--ccfa-space-s) 0 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	text-align: left !important;
	font-family: var(--wp--preset--font-family--tertiary);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted) !important;
}
.ccfa-join-form--action-network #action_info a {
	color: inherit !important;
}
.ccfa-join-form--action-network .can_embed #logo_wrap {
	margin-top: 0.5rem !important;
	width: auto !important;
	min-height: 0 !important;
	height: auto !important;
	line-height: 1 !important;
}
.ccfa-join-form--action-network #logo_wrap svg {
	height: 1.25rem;
	width: auto;
	opacity: 0.7;
}
@media (min-width: 768px) {
	.ccfa-join-form__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--ccfa-space-m);
	}
}

/* ------------------------------------------------------------
   Editor affordances for the inner pages
   ------------------------------------------------------------ */
/* Sticky rails fight the editor's own scroll container — pin nothing there. */
.editor-styles-wrapper .ccfa-audience-index.ccfa-audience-index {
	position: static;
}
/* Preview forms are inert; the heading stays editable. */
.editor-styles-wrapper .ccfa-join-form.is-editor-preview .ccfa-join-form__grid {
	pointer-events: none;
}

/* ------------------------------------------------------------
   Legal pages (Privacy Policy) — readable column under the page hero
   ------------------------------------------------------------ */
.ccfa-legal.ccfa-legal > h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); margin-top: var(--wp--preset--spacing--x-large); margin-bottom: 0.5rem; }
.ccfa-legal.ccfa-legal > h3 { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem); margin-top: var(--wp--preset--spacing--large); margin-bottom: 0.35rem; }
.ccfa-legal.ccfa-legal > p, .ccfa-legal.ccfa-legal > ul, .ccfa-legal.ccfa-legal > ol { font-size: 1.0625rem; line-height: 1.6; margin-top: 0; margin-bottom: 1em; }
.ccfa-legal--plain.ccfa-legal--plain { padding-top: var(--ccfa-space-l); }
.ccfa-legal--plain.ccfa-legal--plain > h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.4375rem); margin: 0 0 0.35em; }
/* Thick orange rule under the title — the only colour on a plain legal page. */
.ccfa-legal--plain.ccfa-legal--plain > h1::after { content: ''; display: block; width: min(12rem, 60%); height: 0.875rem; margin-top: 0.3em; background: var(--wp--preset--color--primary); border-radius: 3px; }
.ccfa-legal--teal.ccfa-legal--teal > h1::after { background: var(--wp--preset--color--highlight); }
.ccfa-legal--lime.ccfa-legal--lime > h1::after { background: var(--wp--preset--color--tertiary); }
.ccfa-legal.ccfa-legal > .ccfa-legal-updated { color: var(--wp--preset--color--muted); font-family: var(--wp--preset--font-family--tertiary); margin-bottom: var(--ccfa-space-m); }
.ccfa-legal a { text-decoration: none; }
.ccfa-legal a:hover { color: var(--wp--preset--color--primary-dark); }