/*
Theme Name: Child Care for All Now
Theme URI: https://github.com/E11-Group/childcareforallnow
Author: E11 Group
Author URI: https://e11group.com
Description: Child theme of Launchpad for Child Care for All Now (C4), a project of Child Care for Every Family Action. Shares the Child Care for All design system. 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.3.14
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: childcareforallnow
Repository: E11-Group/childcareforallnow
*/

/* ============================================================
   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-footer-statement, .ccfa-join-title, .ccfa-cta-banner h2, .ccfa-report-block h2, .ccfa-majority h2, .ccfa-what-title {
	text-wrap: balance;
}
p, li, dd, figcaption, label, legend, .ccfa-lead, .ccfa-statement-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 1.5rem;
	font-size: 1.28rem;
}
/* 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; same 2:1 mark as C3) 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 (the C3 megaphone rose above the
   panel; C4 keeps the behaviour); 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 */
}
/* 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: "© 2026 CC4FEN · Privacy Policy" in small muted type,
   a breath below the columns; no rule (matches C3, 2026-09-23). */
.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);
}
/* Phones: keep the line clear of the parent's floating back-to-top button. */
.ccfa-footer .ccfa-footer-legal {
	padding-right: 4.5rem;
}
@media (min-width: 782px) {
	.ccfa-footer .ccfa-footer-legal {
		padding-right: 0;
	}
}

/* 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-childcareforallnow-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-childcareforallnow-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-childcareforallnow-hero-collage > * {
	position: absolute;
	margin: 0;
}
.wp-block-childcareforallnow-hero-collage .ccfa-hero-strip,
.wp-block-childcareforallnow-hero-collage .ccfa-hero-photo {
	display: block;
	height: auto;
	max-width: none;
	pointer-events: none;
	user-select: none;
}
.wp-block-childcareforallnow-hero-collage .ccfa-hero-strip img,
.wp-block-childcareforallnow-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-childcareforallnow-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-childcareforallnow-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-childcareforallnow-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 (client copy 2026-09-29): "para todos los votantes" is longer than "For All Voters" and ran off the lime strip.
   Phones: one smaller line started further left. From 768px: two balanced lines on the strip, right of the photo (as C3). */
:lang(es) .ccfa-hero-text--all { left: 27%; font-size: 5.2cqi; }
@media (min-width: 768px) {
	:lang(es) .wp-block-childcareforallnow-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 — Staatliches, centred on white, as on the C3 homepage
   ------------------------------------------------------------ */
.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 auto;
	max-width: 26.3em; /* C3 artboard: 973px at 37px */
}

/* ------------------------------------------------------------
   Report card teaser — black block beside the lime Majority block
   ------------------------------------------------------------
   Same voice and placement as the C3 homepage black block (client
   2026-09-25, the torn "F" graphic removed): Rubik Light lime
   headline, light lead, cyan button pinned bottom-right from 768px;
   phones centre everything like every black block. */
.ccfa-report-block.ccfa-report-block {
	display: flex;
	flex-direction: column;
}
.ccfa-report-block.ccfa-report-block > * {
	min-width: 0;
}
.ccfa-report-block > h2 {
	margin: 0 0 0.5em;
}
.ccfa-report-block > .ccfa-lead.ccfa-lead {
	margin: 0 0 auto; /* pushes the button to the block's bottom edge */
}
.ccfa-report-block > .ccfa-report-actions.ccfa-report-actions {
	margin: var(--ccfa-space-s) 0 0;
	justify-content: center; /* phones; right from 768px */
}
@media (min-width: 768px) {
	.ccfa-report-block > .ccfa-report-actions.ccfa-report-actions {
		justify-content: flex-end;
	}
}
/* Report page title: H1 + lead, centred like the Partners intro */
.ccfa-report-intro.ccfa-report-intro > h1 {
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
	margin: 0 0 0.4em;
}
.ccfa-report-intro.ccfa-report-intro > .ccfa-lead {
	margin: 0 auto;
	max-width: 34em;
}
.ccfa-report-intro.ccfa-report-intro + .ccfa-report.ccfa-report {
	padding-top: 0;
}
/* The lime record follows the black block inside the same section. */
.ccfa-report > .ccfa-report-record.ccfa-report-record {
	margin-top: var(--ccfa-space-m);
}
.ccfa-report-record > .ccfa-lead.ccfa-lead {
	margin-bottom: 1em;
	max-width: 36em;
}
.ccfa-report-record > h2 {
	max-width: none;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
	margin-bottom: 0.6em;
}
/* The client's list: a thumbs-down in front of each point */
.ccfa-thumbs-list.ccfa-thumbs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ccfa-space-s);
}
.ccfa-thumbs-list > li {
	position: relative;
	margin: 0;
	padding-left: 2.6rem;
	font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem);
	line-height: 1.5;
	max-width: 44em;
}
.ccfa-thumbs-list > li::before {
	content: '👎';
	position: absolute;
	left: 0;
	top: 0;
	font-size: 1.5rem;
	line-height: 1.1;
}

/* Two-up: the teaser and the Majority block share a row from 782px (core's
   columns breakpoint); both columns stretch so the pair is the same height. */
.ccfa-two-up.ccfa-two-up {
	gap: var(--ccfa-space-m);
}
.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-majority.ccfa-majority {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Majority statement — lime (client 2026-09-25), centred, one measure */
.ccfa-majority.ccfa-majority {
	text-align: center;
}
.ccfa-majority.ccfa-majority > * {
	margin-inline: auto;
}
.ccfa-majority > h2 {
	font-size: clamp(2rem, 1.2rem + 3vw, 3.4375rem);
	max-width: none;
}
.ccfa-majority > .ccfa-lead.ccfa-lead {
	max-width: 32em;
}

/* ------------------------------------------------------------
   Black block + flush lime cards (the C3 homepage device; here the report page's record)
   ------------------------------------------------------------
   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; }
	/* Two auto rows (client 2026-09-28): each row is as tall as its own longest card, and any height the black block
	   adds is shared evenly between the rows, so the top cards do not carry the bottom row's extra text as dead space.
	   No aspect-ratio on the cards (aspect-ratio grid items are sized per row, which left cards within a row uneven). */
	.ccfa-cards.ccfa-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; align-content: stretch; }
	.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: 0; }
	.ccfa-card > p { max-width: 16.5em; }
}

/* Record cards: the client's thumbs-down cutout on torn orange paper (2026-09-28; replaced the thin-line mask icon).
   A 139×127 PNG with transparency, shown as an image at its own ratio. */
.ccfa-card--icon.ccfa-card--icon {
	padding-top: clamp(1.25rem, 0.6rem + 1.7vw, 2.375rem);
}
.ccfa-card--icon.ccfa-card--icon::before {
	content: '';
	display: block;
	width: 3.5rem;
	aspect-ratio: 139 / 127;
	margin: 0 0 0.75rem;
	background: var(--ccfa-img-thumbs) center / contain no-repeat;
}
.ccfa-card--icon.ccfa-card--icon > p {
	font-size: clamp(0.9375rem, 0.8rem + 0.35vw, 1.0625rem);
	max-width: none;
}
@media (min-width: 768px) {
	.ccfa-card--icon.ccfa-card--icon::before { margin-inline: 0; }
}
.ccfa-what-block.ccfa-what-block > .ccfa-what-lead { font-size: clamp(1.0625rem, 0.8rem + 0.7vw, 1.375rem); }

/* ============================================================
   Inner pages (partners, join-us, legal) and the homepage blocks
   ============================================================
   Ported from the Child Care for All design system (designs/site.css).
   Same devices: 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: 62%; }
.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.is-report      .ccfa-page-hero-figure { width: 88%; top: -4%; } /* the family of three (client 2026-09-24) */
.ccfa-page-hero-panel.is-report .ccfa-page-hero-title.ccfa-page-hero-title { color: var(--wp--preset--color--base); }
.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;
	}
	/* How It Works: green strip, mother + daughter */
	.ccfa-page-hero-panel.is-how-it-works .ccfa-page-hero-strip.is-desktop { left: 12%;  top: 15%;  width: 74.8%; }
	/* Anchored by the bottom: the cutout's bottom-right corner (PNG 696,685 of 793x723) sits on the strip's bottom-right corner (SVG 962,204 of 968x282); its bottom edge runs parallel to the strip. */
	.ccfa-page-hero-panel.is-how-it-works .ccfa-page-hero-figure           { right: 10%;   top: auto; bottom: 22.2%; width: 30%; }
	/* `top` is each strip's colour-band centre (measured); translateY(-50%) centres the text on it. */
	.ccfa-page-hero-panel.is-how-it-works .ccfa-page-hero-title.ccfa-page-hero-title { left: 15.4%; top: 65%; max-width: 34%; transform: translateY(-50%) rotate(-3.4deg); }
	/* Who Benefits: purple strip, pointing girl */
	.ccfa-page-hero-panel.is-who-benefits .ccfa-page-hero-strip.is-desktop { left: 10%;  top: 13%;  width: 78.9%; }
	.ccfa-page-hero-panel.is-who-benefits .ccfa-page-hero-figure           { right: 15.3%; top: -13.5%; width: 25.3%; }
	.ccfa-page-hero-panel.is-who-benefits .ccfa-page-hero-title.ccfa-page-hero-title { left: 13.7%; top: 34%; max-width: 36%; transform: translateY(-50%) rotate(4.4deg); } /* centred between the paper's top edge and the start of the tear; 4.4deg = the paper's straight top edge */
	/* Report card: magenta strip, family of three standing on the panel's bottom edge, white title (artboard extras 2026-09-24) */
	.ccfa-page-hero-panel.is-report .ccfa-page-hero-strip.is-desktop { left: 10%;  top: 13%;  width: 78.9%; }
	.ccfa-page-hero-panel.is-report .ccfa-page-hero-figure           { right: 6%; top: auto; bottom: 0; width: 44%; }
	.ccfa-page-hero-panel.is-report .ccfa-page-hero-title.ccfa-page-hero-title { left: 13.7%; top: 34%; max-width: 36%; transform: translateY(-50%) rotate(4.4deg); }
	/* Partners: the client's long orange tear (box art, EXTRAS artboard 2026-09-24; tear-orange.png 5.4:1 spanning
	   the panel like the report page), title upright on its left, hugging kids on the right (same as C3, 2026-09-25). */
	.ccfa-page-hero-panel.is-partners .ccfa-page-hero-strip.is-desktop { left: 6%; width: 88%; top: 25%; }
	.ccfa-page-hero-panel.is-partners .ccfa-page-hero-figure           { right: 10.6%; top: auto; bottom: 0; width: 34.8%; } /* the PNG has no transparent bottom margin: the kids stand on the panel's bottom edge */
	.ccfa-page-hero-panel.is-partners .ccfa-page-hero-title.ccfa-page-hero-title { left: 11%; top: 58%; max-width: 38%; font-size: 3cqi; transform: translateY(-50%); }
}
/* Spanish (client copy 2026-09-29): the report-card title is three times the English length. Phones: smaller
   type, three lines centred on the strip. From 768px: wider measure and smaller type so it sits in the magenta band. */
:lang(es) .ccfa-page-hero-panel.is-report .ccfa-page-hero-title.ccfa-page-hero-title { font-size: 5.4cqi; top: 82%; }
@media (min-width: 768px) {
	:lang(es) .ccfa-page-hero-panel.is-report .ccfa-page-hero-title.ccfa-page-hero-title { font-size: 2.1cqi; max-width: 39%; top: 36%; }
}
/* Spanish teaser headline on the homepage: a smaller ramp keeps the black block near the English height. */
:lang(es) .ccfa-block--black.ccfa-block--black.ccfa-report-block > h2 { font-size: clamp(1.75rem, 0.8rem + 2.4vw, 2.75rem); max-width: none; }

/* 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-s); } /* How It Works: the statement leads straight into the card grid */
.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-body { max-width: calc(30 * clamp(1.25rem, 1rem + 1.1vw, 1.9rem)); /* the same measure as the Staatliches lead above it (client 2026-09-25) */ margin: var(--ccfa-space-m) auto 0; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); line-height: 1.55; }
.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;
}
/* 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: 0.55em;
	width: 1.5rem;
	height: 2px;
	background: currentColor;
}
.ccfa-point-list > li::after {
	content: '';
	position: absolute;
	left: 1.05rem;
	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;
}

/* CTA banner — the C4 footer device on every page (client 2026-09-28: girl + purple is C3; boy + orange + black button is C4) */
/* Orange CTA banner with the boy cutout (client 2026-09-25: girl + purple + arrow on the homepage, boy +
   orange + black button on inner pages). Phones: the boy stands behind the box; ≥768px he stands in front
   at its left edge, fist above the box, feet running into the footer (the section clips him), button 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-boy.ccfa-cta-boy {
	position: relative;
	z-index: 0;
	width: 46%;
	margin: 0 auto -26%;
	pointer-events: none;
}
.ccfa-cta-boy 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 + 1.85vw, 2.3125rem);
	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: clamp(4rem, 2rem + 6vw, 7.75rem);
		padding-bottom: clamp(3rem, 1.5rem + 5vw, 7.6875rem);
		clip-path: inset(-100vh 0 0 0); /* clip the cutout's feet at the footer's edge only; the raised fist may rise past the section top on tablets */
	}
	.ccfa-cta-col.ccfa-cta-col { display: block; }
	.ccfa-cta-boy.ccfa-cta-boy {
		position: absolute;
		z-index: 2;
		left: -1.5%;
		top: auto;
		bottom: calc(2.5rem - clamp(3rem, 1.5rem + 5vw, 7.6875rem)); /* the section's bottom padding minus 40px: he sits a little higher than the girl (client 2026-09-25), his fist clear of the box top */
		width: 37%;
		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) 37%; /* clear of the boy's raised fist */
	}
	.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); }
}
/* C4: the pledge line runs four lines, so from 768px the button drops under it, right-aligned,
   and the boy is a touch bigger so his feet still run past the taller box. */
@media (min-width: 768px) {
	.ccfa-cta-banner.ccfa-cta-banner { flex-wrap: wrap; padding-left: 49%; } /* clear of the boy's right fist */
	.ccfa-cta-banner > h2 { flex: 1 1 100%; max-width: 16em; font-size: clamp(1.5rem, 1rem + 1.8vw, 2.5rem); }
	.ccfa-cta-banner > .wp-block-buttons { margin-left: auto; }
	.ccfa-cta-boy.ccfa-cta-boy { width: 43%; } /* scaled to the box (client 2026-09-25): his fist just clears its top at 1366 and his feet still reach the footer */
	.ccfa-cta.ccfa-cta { padding-bottom: calc(clamp(3rem, 1.5rem + 5vw, 7.6875rem) - 2.5rem); } /* 40px less than the homepage: the footer's top edge meets the raised boy's feet (client 2026-09-25) */
	.ccfa-cta.ccfa-cta { padding-top: clamp(2.5rem, 1rem + 3vw, 4.5rem); } /* the boy's fist rises only ~40px, so the homepage's tall top padding read as a hole above the box (client 2026-09-25) */
	.ccfa-cta-banner.ccfa-cta-banner { padding-left: 42%; } /* the 40%-wide boy's fist reaches past 37%; keep the heading clear of it */
}
/* 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;
}

/* ------------------------------------------------------------
   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-grid--supporters {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ccfa-logo-wall.ccfa-logo-wall > .ccfa-logo-grid--supporters {
	margin-top: var(--ccfa-space-m);
}
.ccfa-logo-tile {
	aspect-ratio: 3 / 2;
	display: grid;
	place-items: center;
	margin: 0;
	padding: var(--ccfa-space-s);
	border-radius: 0.375rem;
	background: var(--wp--preset--color--base); /* white: several client logos arrive on a white ground (SEIU), so the tile matches */
	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-grid--supporters .ccfa-logo-tile {
	font-size: 0.8125rem;
	aspect-ratio: 4 / 3;
}
/* The logo is positioned inside the tile so a tall (square) logo cannot stretch the tile: the tile keeps its
   3:2 ratio from aspect-ratio and the image fits a box inset by the tile padding (client logos 2026-09-30). */
.ccfa-logo-tile.ccfa-logo-tile { position: relative; }
.ccfa-logo-tile a,
.ccfa-logo-tile > img {
	position: absolute;
	inset: var(--ccfa-space-s);
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr); /* the one track is the box, never the image's intrinsic height */
	place-items: center;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
}
.ccfa-logo-tile a img,
.ccfa-logo-tile > img {
	/* Fill the inset box and letterbox the artwork inside it: a definite width/height + object-fit, not a
	   percentage max-height (which the tall square logos escaped in some browsers, 2026-09-30). */
	display: block;
	width: 84%;
	height: 86%;
	max-width: none;
	max-height: none;
	object-fit: contain;
	object-position: center;
}
.ccfa-logo-tile > img { width: auto; height: auto; max-width: calc(100% - 2 * var(--ccfa-space-s)); max-height: calc(100% - 2 * var(--ccfa-space-s)); margin: auto; }
@media (min-width: 768px) {
	.ccfa-logo-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.ccfa-logo-grid--supporters {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.ccfa-logo-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.ccfa-logo-grid--supporters {
		grid-template-columns: repeat(6, 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). */
	display: inline-grid;
	align-items: center;
	justify-items: center;
	box-sizing: border-box;
	width: 5em;
	height: calc(5em * 186 / 267); /* the artwork's aspect ratio */
	font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	line-height: 1;
	margin: 0 0 var(--ccfa-space-s);
	padding: 1.25em 0.4em 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;
}

/* Pledge form (blocks/join-form) — the client's Action Network embed (2026-09-28) inside the lime panel.
   Action Network's style-embed-v3.css is loaded as shipped; these rules, scoped to .ccfa-join-form--an and
   carrying the #can_embed_form id and `!important` (every Action Network declaration is `!important`), out-rank it and re-dress the injected markup in the site's fonts,
   inputs and button. The embed's own title is hidden (the panel has its heading); its columns are
   stacked; the sponsor line and the Action Network mark stay, small. */
.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--an .can_embed,
.ccfa-join-form--an #can_embed_form#can_embed_form,
.ccfa-join-form--an #can_embed_form#can_embed_form #can_embed_form_inner {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--primary) !important;
	font-size: 1rem !important;
	line-height: 1.45 !important;
}
.ccfa-join-form--an #can_embed_form#can_embed_form > h2,
.ccfa-join-form--an #can_embed_form#can_embed_form #can_embed_form_inner > h2,
.ccfa-join-form--an #can_embed_form#can_embed_form h4:empty { display: none !important; } /* never hide `.clear`: the country picker's wrapper carries that class too */
.ccfa-join-form--an #can_embed_form#can_embed_form #form_col1,
.ccfa-join-form--an #can_embed_form#can_embed_form #form_col2 { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.ccfa-join-form--an #can_embed_form#can_embed_form ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.ccfa-join-form--an #can_embed_form#can_embed_form li { margin: 0 0 0.85rem !important; padding: 0 !important; }
.ccfa-join-form--an #can_embed_form#can_embed_form label.control-label {
	display: block !important;
	margin: 0 0 0.4rem !important;
	font-family: var(--wp--preset--font-family--tertiary) !important;
	font-weight: 600 !important;
	font-size: 0.9375rem !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--wp--preset--color--contrast) !important;
}
.ccfa-join-form--an #can_embed_form#can_embed_form label.control-label.disabled:empty { display: none !important; }
.ccfa-join-form--an #can_embed_form#can_embed_form .floatlabel-wrapper .floatlabel-label { font-family: var(--wp--preset--font-family--tertiary) !important; font-weight: 600 !important; color: var(--wp--preset--color--contrast) !important; } /* the floating label above a filled field keeps Action Network's positioning */
.ccfa-join-form--an #can_embed_form#can_embed_form .floatlabel-label-inactive { display: none !important; } /* Action Network shows the placeholder instead */
.ccfa-join-form--an #can_embed_form#can_embed_form input[type="text"],
.ccfa-join-form--an #can_embed_form#can_embed_form input[type="email"],
.ccfa-join-form--an #can_embed_form#can_embed_form input[type="tel"],
.ccfa-join-form--an #can_embed_form#can_embed_form textarea,
.ccfa-join-form--an #can_embed_form#can_embed_form select {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0.65rem 0.9rem !important;
	font: inherit !important;
	font-size: 1rem !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;
}
.ccfa-join-form--an #can_embed_form#can_embed_form textarea { min-height: 6rem !important; }
/* Country picker (revealed by "Not in US?"): Action Network overlays an invisible native select on a styled span. */
.ccfa-join-form--an #can_embed_form#can_embed_form .country_drop_wrap { display: none; margin: 0 0 0.85rem !important; }
.ccfa-join-form--an #can_embed_form#can_embed_form .country_drop_wrap span.can_select {
	display: block !important;
	box-sizing: border-box !important;
	height: auto !important;
	line-height: 1.45 !important;
	padding: 0.65rem 2.75rem 0.65rem 0.9rem !important;
	font: inherit !important;
	font-size: 1rem !important;
	color: var(--wp--preset--color--contrast) !important;
	background-color: var(--wp--preset--color--base) !important;
	border: 2px solid var(--wp--preset--color--contrast) !important;
	border-radius: 0.375rem !important;
	box-shadow: none !important;
}
.ccfa-join-form--an #can_embed_form#can_embed_form .country_drop_wrap span.can_selectInner { line-height: inherit !important; }
.ccfa-join-form--an #can_embed_form#can_embed_form .country_drop_wrap select.can_select {
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	width: 100% !important;
	height: 100% !important;
	opacity: 0 !important;
	cursor: pointer !important;
}
.ccfa-join-form--an #can_embed_form#can_embed_form input:focus,
.ccfa-join-form--an #can_embed_form#can_embed_form textarea:focus,
.ccfa-join-form--an #can_embed_form#can_embed_form select:focus {
	outline: 3px solid var(--wp--preset--color--accent) !important;
	outline-offset: 0 !important;
	border-color: var(--wp--preset--color--contrast) !important;
	box-shadow: none !important;
}
.ccfa-join-form--an #can_embed_form#can_embed_form ::placeholder { color: var(--wp--preset--color--muted) !important; opacity: 1 !important; }
/* Validation: Action Network flags empty required fields with .error_input / .error_checkbox; the signal is brand orange. */
.ccfa-join-form--an #can_embed_form#can_embed_form input.error_input,
.ccfa-join-form--an #can_embed_form#can_embed_form textarea.error_input,
.ccfa-join-form--an #can_embed_form#can_embed_form .check_radio_field label.error_checkbox {
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary) !important;
}
.ccfa-join-form--an #can_embed_form#can_embed_form input.error_input:focus,
.ccfa-join-form--an #can_embed_form#can_embed_form textarea.error_input:focus {
	outline-color: var(--wp--preset--color--primary) !important;
}
.ccfa-join-form--an #can_embed_form#can_embed_form .check_radio_field label.checkbox.error_checkbox,
.ccfa-join-form--an #can_embed_form#can_embed_form #d_sharing label.error_checkbox { color: var(--wp--preset--color--primary-dark) !important; }
.ccfa-join-form--an #can_embed_form#can_embed_form .check_radio_field label input.error_input[type="checkbox"],
.ccfa-join-form--an #can_embed_form#can_embed_form .check_radio_field label input.error_input[type="radio"] {
	outline: 2px solid var(--wp--preset--color--primary) !important;
	outline-offset: 1px !important;
	border-radius: 3px !important;
}
.ccfa-join-form--an #can_embed_form#can_embed_form .check_radio_field label input.error_input[type="radio"] { border-radius: 50% !important; }
.ccfa-join-form--an #can_embed_form#can_embed_form .international_link-wrap { display: block !important; margin: -0.35rem 0 0.85rem !important; }
.ccfa-join-form--an #can_embed_form#can_embed_form .international_link {
	font-family: var(--wp--preset--font-family--tertiary) !important;
	font-size: 0.875rem !important;
	color: var(--wp--preset--color--contrast) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	cursor: pointer !important;
}
.ccfa-join-form--an #can_embed_form#can_embed_form .check_radio_field { display: flex !important; flex-wrap: wrap !important; gap: 0.45rem !important; }
.ccfa-join-form--an #can_embed_form#can_embed_form .check_radio_field label.radio,
.ccfa-join-form--an #can_embed_form#can_embed_form .check_radio_field label.checkbox,
.ccfa-join-form--an #can_embed_form#can_embed_form #d_sharing label {
	position: static !important;
	height: auto !important;
	width: auto !important;
	float: none !important;
	display: inline-flex !important;
	align-items: flex-start !important;
	gap: 0.5rem !important;
	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 !important;
}
.ccfa-join-form--an #can_embed_form#can_embed_form .check_radio_field label.radio {
	background: var(--wp--preset--color--base) !important;
	border: 2px solid var(--wp--preset--color--contrast) !important;
	border-radius: 999px !important;
	padding: 0.5rem 1rem !important;
	align-items: center !important;
}
.ccfa-join-form--an #can_embed_form#can_embed_form .check_radio_field label input[type="radio"],
.ccfa-join-form--an #can_embed_form#can_embed_form .check_radio_field label input[type="checkbox"],
.ccfa-join-form--an #can_embed_form#can_embed_form #d_sharing label input[type="checkbox"] {
	position: static !important;
	top: auto !important;
	left: auto !important;
	float: none !important;
	display: inline-block !important;
	accent-color: var(--wp--preset--color--primary) !important;
	width: 1.1rem !important;
	height: 1.1rem !important;
	margin: 0.15rem 0 0 !important;
	flex: none !important;
}
.ccfa-join-form--an #can_embed_form#can_embed_form .check_radio_field label.radio input[type="radio"] { margin-top: 0 !important; }
.ccfa-join-form--an #can_embed_form#can_embed_form .checkbox_group_wrap { margin-top: 0.25rem !important; }
.ccfa-join-form--an #can_embed_form#can_embed_form input[type="submit"] {
	display: block !important;
	width: 100% !important;
	margin: var(--ccfa-space-s) 0 0 !important;
	padding: 0.9rem 1.5rem !important;
	font-family: var(--wp--preset--font-family--tertiary) !important;
	font-weight: 700 !important;
	font-size: 1.125rem !important;
	letter-spacing: 0.01em !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
	color: var(--wp--preset--color--contrast) !important;
	background: var(--wp--preset--color--primary) !important;
	border: 0 !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease !important;
}
.ccfa-join-form--an #can_embed_form#can_embed_form input[type="submit"]:hover,
.ccfa-join-form--an #can_embed_form#can_embed_form input[type="submit"]:focus-visible { background: var(--wp--preset--color--primary-dark) !important; color: var(--wp--preset--color--contrast) !important; }
.ccfa-join-form--an #can_embed_form#can_embed_form #d_sharing { margin: 0.85rem 0 0 !important; padding: 0 !important; border: 0 !important; }
.ccfa-join-form--an #can_embed_form#can_embed_form #action_info {
	margin: var(--ccfa-space-s) 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-family: var(--wp--preset--font-family--tertiary) !important;
	font-size: 0.8125rem !important;
	color: var(--wp--preset--color--muted) !important;
}
.ccfa-join-form--an #can_embed_form#can_embed_form #action_info a { color: inherit !important; text-decoration: underline !important; text-underline-offset: 3px !important; }
.ccfa-join-form--an #can_embed_form#can_embed_form #logo_wrap { margin: 0.5rem 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; text-align: left !important; }
.ccfa-join-form--an #can_embed_form#can_embed_form #logo_wrap svg { width: 84px !important; height: auto !important; opacity: 0.6 !important; }
.ccfa-join-form--an #can_embed_form#can_embed_form #can_embed_form_inner > h4 {
	margin: 0 0 var(--ccfa-space-s) !important;
	padding: 0 !important;
	border: 0 !important;
	font-family: var(--wp--preset--font-family--primary) !important;
	font-weight: 400 !important;
	font-size: 1.0625rem !important;
	line-height: 1.45 !important;
	color: var(--wp--preset--color--contrast) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.ccfa-join-form--an #can_embed_form#can_embed_form #can_embed_form_inner > h4::after { display: none !important; }
/* Editor preview: the embed cannot run in the editor, so a note stands in for the form. */
.ccfa-join-form__embed.is-editor-note {
	background: var(--wp--preset--color--base);
	border: 2px dashed var(--wp--preset--color--contrast);
	border-radius: 0.375rem;
	padding: var(--ccfa-space-m);
	font-family: var(--wp--preset--font-family--tertiary);
	font-size: 0.9375rem;
}
.ccfa-join-form__embed.is-editor-note p { margin: 0 0 0.35rem; }
.ccfa-join-form__note {
	margin: 0;
	font-family: var(--wp--preset--font-family--tertiary);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}

/* ------------------------------------------------------------
   Editor affordances for the inner pages
   ------------------------------------------------------------ */
/* The pledge form preview is inert; the heading stays editable. */
.editor-styles-wrapper .ccfa-join-form.is-editor-preview .ccfa-join-form__embed {
	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); }