/*
Theme Name: César Chávez PTO
Theme URI: https://royalblue-rat-808179.hostingersite.com
Description: Block child theme for the César Chávez Dual Spanish Immersion PTO. Mascot-led, purple-first, built for a phone at pickup. Design tokens match the PTO brand guide; illustrations by Wences Almazán.
Author: César Chávez DSI PTO
Author URI: https://royalblue-rat-808179.hostingersite.com
Template: twentytwentyfive
Version: 4.5.2
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ccpto
Tags: block-patterns, full-site-editing, education, accessibility-ready
*/

/* ---------------------------------------------------------------------------
   Almost everything lives in theme.json. This file is only for the handful of
   things theme.json can't express.
   --------------------------------------------------------------------------- */

/* Skip link visible on focus — keyboard users need to see where they are. */
.skip-link:focus {
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--ink);
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	font-weight: 700;
	z-index: 999999;
}

/* Yellow means ACT. One per screen. Never decoration. */
.wp-block-button.is-style-action .wp-block-button__link {
	background-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-action .wp-block-button__link:hover {
	background-color: #ffef6b;
	color: var(--wp--preset--color--ink);
}

/* Quiet secondary button. */
.wp-block-button.is-style-outline-soft .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--purple);
	border: 2px solid var(--wp--preset--color--periwinkle);
}
.wp-block-button.is-style-outline-soft .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--purple);
	background-color: transparent;
	color: var(--wp--preset--color--purple);
}

/* Eyebrow label — the small caps line above a heading. */
.ccpto-eyebrow {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--purple);
	margin-bottom: 0.75rem;
}

/* Round portrait, used for board and committee chairs. */
.ccpto-portrait img {
	border-radius: 999px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* Date chip on event rows. */
.ccpto-datechip {
	background: var(--wp--preset--color--lavender);
	border-radius: 12px;
	padding: 0.7rem 1rem;
	text-align: center;
	line-height: 1.15;
}

/* Cards never carry shadows in this system — flat fills and a 1px border. */
.ccpto-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--periwinkle);
	border-radius: 18px;
}

/* Illustration linework stays black. Never tint the mascot. */
.ccpto-illustration img {
	filter: none !important;
	mix-blend-mode: normal !important;
}

/* Reduced motion: honour the preference. */
@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ---------------------------------------------------------------------------
   Header wordmark — two lines. Top line carries HWT Artz, second line is a
   quiet Montserrat locator. Added 13 Aug 2026.
   --------------------------------------------------------------------------- */
p.ccpto-lockup-1 {
	font-family: var(--wp--preset--font-family--hwt-artz) !important;
	font-size: clamp( 1.2rem, 1.6vw, 1.6rem );
	letter-spacing: 0.005em;
	line-height: 1;
}
.ccpto-lockup-1 a:hover { color: var(--wp--preset--color--purple) !important; }
p.ccpto-lockup-2 {
	font-family: var(--wp--preset--font-family--montserrat) !important;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.19em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Contrast on dark fills. The global link colour is purple #5b4093, which on
   ink #20123d measures 2.14:1 — nowhere near the 4.5:1 WCAG AA floor. Links
   sitting on ink or slate get periwinkle instead (10.71:1 and 6.6:1).
   --------------------------------------------------------------------------- */
.has-ink-background-color a:not( .wp-element-button ),
.has-slate-background-color a:not( .wp-element-button ) {
	color: var(--wp--preset--color--periwinkle);
}
.has-ink-background-color a:not( .wp-element-button ):hover,
.has-slate-background-color a:not( .wp-element-button ):hover {
	color: var(--wp--preset--color--action);
}
/* Headings inside dark fills must not fall back to ink. */
.has-ink-background-color :is( h1, h2, h3, h4 ):not( [class*="has-text-color"] ) {
	color: #ffffff;
}

/* ---------------------------------------------------------------------------
   NAVIGATION — added 13 Aug 2026
   Top level in HWT Artz, small. Dropdowns in Montserrat, uppercase, tracked.
   --------------------------------------------------------------------------- */
.wp-block-navigation {
	font-family: var(--wp--preset--font-family--hwt-artz);
}
@media ( min-width: 782px ) {
.ccpto-site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 1.32rem;
	letter-spacing: 0.012em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink) !important;
}
.ccpto-site-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.ccpto-site-header .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.ccpto-site-header .wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--purple) !important;
}
.ccpto-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--slate) !important;
}
.ccpto-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--purple) !important;
}
} /* end desktop nav colours */
.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--purple);
}
/* Underline that grows from the left, matching the wordmark hover. */
.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 0.2rem;
}
.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--wp--preset--color--purple);
	transition: width 0.18s ease;
}
.wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after {
	width: 100%;
}

/* --- Submenus ------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation__submenu-container {
	font-family: var(--wp--preset--font-family--montserrat);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--periwinkle) !important;
	border-radius: 14px;
	padding: 0.5rem;
	min-width: 232px;
	box-shadow: 0 12px 32px rgba( 32, 18, 61, 0.13 );
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	padding: 0.6rem 0.8rem;
	border-radius: 9px;
	width: 100%;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--lavender);
	color: var(--wp--preset--color--purple);
}
/* No growing underline inside dropdowns. */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
/* First item in each dropdown reads as the section itself. */
.wp-block-navigation__submenu-container > .wp-block-navigation-item:first-child .wp-block-navigation-item__content {
	color: var(--wp--preset--color--purple);
	border-bottom: 1px solid var(--wp--preset--color--periwinkle);
	border-radius: 9px 9px 0 0;
	margin-bottom: 0.25rem;
}

/* ---------------------------------------------------------------------------
   STICKY HEADER — hides on scroll down, reappears on scroll up.
   .ccpto-nav-up / .ccpto-nav-down are toggled by the script in functions.php.
   --------------------------------------------------------------------------- */
/* The inner group cannot stick: its parent <header> is only as tall as itself, so
   there is nothing to stick within. Sticky has to sit on the flow-level element. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fbfaff;
	transition: box-shadow 0.28s ease;
}
.wp-site-blocks > header.wp-block-template-part.is-stuck {
	box-shadow: 0 1px 0 #d6c2ff, 0 10px 28px rgba( 32, 18, 61, 0.08 ) !important;
}
.wp-site-blocks > header.wp-block-template-part.is-hidden {
	transform: translateY( -100% ) !important;
}
.ccpto-site-header .wp-block-group {
	align-items: center;
}
/* Anchored links must not land underneath the sticky bar. */
:root { scroll-padding-top: 120px; }
[id] { scroll-margin-top: 108px; }

@media ( prefers-reduced-motion: reduce ) {
	.wp-site-blocks > header.wp-block-template-part { transition: none; }
}


/* ---------------------------------------------------------------------------
   Dropdown indicator — added 13 Aug 2026.
   The default chevron reads as a form control. Replaced with a small dot that
   fills in on hover, so the label stays the loudest thing in the bar.
   --------------------------------------------------------------------------- */
.ccpto-site-header .wp-block-navigation__submenu-icon {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Language switcher. Polylang renders a plain list; this makes it read as
   EN / ES rather than a menu.
   --------------------------------------------------------------------------- */
.ccpto-lang {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ccpto-lang li { margin: 0; }
.ccpto-lang a {
	display: block;
	padding: 0.3rem 0.5rem;
	border-radius: 7px;
	color: var(--wp--preset--color--muted) !important;
	text-decoration: none;
}
.ccpto-lang a:hover { background: var(--wp--preset--color--lavender); color: var(--wp--preset--color--purple) !important; }
.ccpto-lang .current-lang a,
.ccpto-lang li.current-lang > a {
	background: var(--wp--preset--color--purple);
	color: #ffffff !important;
}


/* ---------------------------------------------------------------------------
   Dropdown position and the hover bridge — fixed 13 Aug 2026.
   WordPress right-aligns submenus to the parent item, and the gap between the
   label and the card was a dead zone: :hover dropped before the pointer arrived.
   Left-align to the label, and lay a transparent bridge across the gap so the
   hover survives the trip.
   --------------------------------------------------------------------------- */
.ccpto-site-header .wp-block-navigation__container > .wp-block-navigation-item.has-child {
	position: relative;
}
.ccpto-site-header .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	left: 0 !important;
	right: auto !important;
	top: 100% !important;
	margin-top: 0.55rem;
	transform: none !important;
}
/* Transparent, hoverable strip filling the visual gap. Slightly wider than the
   label so a diagonal pointer path still lands inside. */
.ccpto-site-header .wp-block-navigation__container > .wp-block-navigation-item.has-child::after {
	content: "";
	position: absolute;
	left: -8px;
	right: -8px;
	top: 100%;
	height: 0.7rem;
	background: transparent;
}
/* Keep the card open while the pointer is anywhere inside it. */
.ccpto-site-header .wp-block-navigation__submenu-container:hover,
.ccpto-site-header .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
.ccpto-site-header .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container {
	visibility: visible !important;
	opacity: 1 !important;
}


/* ---------------------------------------------------------------------------
   Header refinements — 13 Aug 2026.
   Nav labels sit on a tighter baseline so the underline hugs the type, and the
   language switcher is pushed to the far right of the row.
   --------------------------------------------------------------------------- */
.ccpto-site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding-bottom: 0.08rem;
	line-height: 1;
}
.ccpto-site-header .wp-block-navigation__container > .wp-block-navigation-item.has-child::after {
	height: 0.55rem;
}
.ccpto-site-header .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	margin-top: 0.42rem;
}
/* Far right, after the account and cart icons. */
.ccpto-site-header .ccpto-lang,
.ccpto-site-header .wp-block-shortcode:has( .ccpto-lang ) {
	order: 99;
	margin-left: 96px; /* a full inch clear of the icons */
	margin-block: 0;
}
.ccpto-site-header .wp-block-shortcode { margin-block: 0; }

/* ---------------------------------------------------------------------------
   Google Calendar embed. The iframe's insides can't be restyled from here, so
   the frame does the work: purple rule on top, brand border, rounded corners.
   --------------------------------------------------------------------------- */
.ccpto-calendar {
	border: 1px solid var(--wp--preset--color--periwinkle);
	border-top: 4px solid var(--wp--preset--color--purple);
	border-radius: 18px;
	overflow: hidden;
	background: #ffffff;
}
.ccpto-calendar iframe {
	display: block;
	border: 0;
	border-radius: 0;
}


/* ---------------------------------------------------------------------------
   Header spacing — 13 Aug 2026.
   Breathing room between the last menu label and the account/cart icons, and a
   full inch before the language switcher so it reads as a separate control.
   --------------------------------------------------------------------------- */
.ccpto-site-header .wp-block-navigation {
	margin-right: 1.75rem;
}
.ccpto-site-header .wp-block-loginout,
.ccpto-site-header .wp-block-woocommerce-customer-account,
.ccpto-site-header .wp-block-woocommerce-mini-cart {
	margin-inline: 0.35rem;
}

/* Fully sticky: the bar never leaves. Only the shadow tells you that you have
   scrolled, so the menu is always one reach away. */
.wp-site-blocks > header.wp-block-template-part.is-hidden {
	transform: none !important;
}

/* --- Mobile ---------------------------------------------------------------- */
@media ( max-width: 781px ) {
	.ccpto-site-header .wp-block-navigation { margin-right: 0.5rem; }
	.ccpto-site-header .ccpto-lang,
	.ccpto-site-header .wp-block-shortcode:has( .ccpto-lang ) { margin-left: 0.6rem; }
	.ccpto-site-header .ccpto-lang a { padding: 0.35rem 0.45rem; }
	/* The wordmark competes with the logo on a phone. Keep the badge, drop the
	   second line, shrink the first. */
	p.ccpto-lockup-1 { font-size: 1rem !important; }
	p.ccpto-lockup-2 { display: none; }
	/* Sticky bar is shorter on a phone, so anchors need less offset. */
	:root { scroll-padding-top: 84px; }
	[id] { scroll-margin-top: 76px; }
	/* Portraits and cards go full width rather than squeezing into columns. */
	.ccpto-portrait img { width: 96px !important; height: 96px !important; }
	.ccpto-calendar iframe { height: 520px; }
}
@media ( max-width: 480px ) {
	.ccpto-calendar iframe { height: 460px; }
}


/* ---------------------------------------------------------------------------
   No image may be wider than the screen. The hero mascot and the Bicibus art
   carried their intrinsic width and pushed the homepage to 504px on a 390px
   phone, which produced a horizontal scrollbar on the most important page.
   Added 13 Aug 2026.
   --------------------------------------------------------------------------- */
.wp-block-image img,
.ccpto-illustration img,
.ccpto-poster img,
figure.wp-block-image {
	max-width: 100%;
	height: auto;
}
/* Portraits keep their fixed square size — the rule above must not stretch them. */
.ccpto-portrait img {
	max-width: none;
}


/* ---------------------------------------------------------------------------
   The parent theme puts a 28px blockGap margin on <main>, which showed as a
   thin white bar between the header and the first full-bleed section and made
   the sticky bar look off-centre. Every page here opens with a full-bleed
   section that owns its own padding, so the gap is not wanted.
   Added 13 Aug 2026.
   --------------------------------------------------------------------------- */
.wp-site-blocks > main {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

/* ---------------------------------------------------------------------------
   The Giving Groove. The poster is the point, so it gets a real frame, and the
   four fundraiser types become chips instead of a run-on sentence.
   --------------------------------------------------------------------------- */
.ccpto-poster {
	margin: 0;
}
.ccpto-poster img {
	display: block;
	border-radius: 14px;
	border: 1px solid var(--wp--preset--color--periwinkle);
	box-shadow: 0 18px 44px rgba( 32, 18, 61, 0.16 );
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.ccpto-poster a:hover img,
.ccpto-poster a:focus-visible img {
	transform: translateY( -3px );
	box-shadow: 0 24px 56px rgba( 32, 18, 61, 0.22 );
}
.ccpto-poster figcaption {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-align: center;
	margin-top: 0.9rem;
}

/* Legend chips. */
.ccpto-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 0.25rem;
	padding: 0;
}
.ccpto-legend li {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0.4rem 0.85rem 0.4rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--periwinkle);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}
.ccpto-legend li::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--wp--preset--color--purple);
	flex: 0 0 auto;
}
.ccpto-legend li.is-school::before { background: #4a3e61; }
.ccpto-legend li.is-pto::before    { background: #5b4093; }
.ccpto-legend li.is-merch::before  { background: #a88cd8; }
.ccpto-legend li.is-partner::before{ background: #e59c37; }

@media ( max-width: 781px ) {
	.ccpto-legend li { font-size: 0.66rem; padding: 0.35rem 0.7rem 0.35rem 0.5rem; }
}


/* ---------------------------------------------------------------------------
   MOBILE — 13 Aug 2026.
   The hero illustration was rendering at its intrinsic 440px inside a 390px
   screen and bleeding off the right. Columns also refused to stack because the
   flex-basis was pinned in the block markup.
   --------------------------------------------------------------------------- */
@media ( max-width: 781px ) {

	/* Stacked columns, full width, regardless of the flex-basis in the markup. */
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* Illustrations scale to the column and centre. Never wider than the screen. */
	.ccpto-illustration img,
	.wp-block-image.aligncenter img,
	.wp-block-image img {
		width: auto !important;
		max-width: min( 100%, 300px ) !important;
		height: auto !important;
		margin-inline: auto;
	}
	.ccpto-poster img { max-width: 100% !important; }
	.ccpto-illustration { text-align: center; }

	/* Section padding tightens up so there is less scrolling between ideas. */
	.wp-block-group.alignfull {
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
	}

	/* --- Full-screen overlay menu ----------------------------------------- */
	.wp-block-navigation__responsive-container.is-menu-open {
		padding: 1.25rem 1.5rem 2.5rem;
		background-color: var(--wp--preset--color--purple) !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 1.5rem;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--hwt-artz) !important;
		font-size: 1.6rem !important;
		text-transform: uppercase;
		color: #ffffff !important;
		padding-block: 0.55rem;
		letter-spacing: 0.01em;
	}
	/* Submenus are laid out flat and quiet, so the whole map is visible at once. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		padding: 0 0 0 0.25rem !important;
		margin: 0 !important;
		min-width: 0;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--montserrat) !important;
		font-size: 0.78rem !important;
		font-weight: 600;
		letter-spacing: 0.1em;
		color: #d6c2ff !important;
		padding-block: 0.5rem;
	}
	/* Kill the dot indicator and the growing underline inside the overlay. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
		display: none !important;
	}
	.wp-block-navigation__responsive-container-close,
	.wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--ink);
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		color: #ffffff;
		padding: 0.5rem;
	}
	.wp-block-navigation__responsive-container-open svg,
	.wp-block-navigation__responsive-container-close svg {
		width: 28px;
		height: 28px;
	}
}


/* ---------------------------------------------------------------------------
   DESKTOP NAV REPAIR — 13 Aug 2026.
   Turning on the mobile overlay made WordPress add the overlay colours
   ( has-white-color has-purple-background-color ) to
   .wp-block-navigation__responsive-container — on every screen size, not just
   when the overlay is open. That painted the desktop dropdown purple and its
   links white on white. Scope the overlay colours to the open state only.
   --------------------------------------------------------------------------- */
@media ( min-width: 782px ) {
	.ccpto-site-header .wp-block-navigation__responsive-container:not( .is-menu-open ),
	.ccpto-site-header .wp-block-navigation__responsive-container:not( .is-menu-open ) .wp-block-navigation__responsive-container-content {
		background-color: transparent !important;
		color: inherit !important;
	}
	/* Re-assert the dropdown card now that the overlay colours are out of the way. */
	.ccpto-site-header .wp-block-navigation__responsive-container:not( .is-menu-open ) .wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--white) !important;
		border: 1px solid var(--wp--preset--color--periwinkle) !important;
		border-radius: 14px;
		box-shadow: 0 12px 32px rgba( 32, 18, 61, 0.13 );
	}
	.ccpto-site-header .wp-block-navigation__responsive-container:not( .is-menu-open ) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: var(--wp--preset--color--slate) !important;
	}
	.ccpto-site-header .wp-block-navigation__responsive-container:not( .is-menu-open ) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background-color: var(--wp--preset--color--lavender);
		color: var(--wp--preset--color--purple) !important;
	}
	/* The dot before each dropdown label is gone — "just doesn't need them",
	   Ian, 13 Aug 2026. The growing underline is the only hover cue now. */
}


/* ---------------------------------------------------------------------------
   MOBILE OVERLAY ESCAPE — 13 Aug 2026.
   The overlay is position:fixed, but a fixed element is positioned against its
   nearest ancestor that establishes a containing block — and transform,
   will-change:transform and filter all do that. The sticky header had
   will-change:transform left over from the old hide-on-scroll animation, so the
   overlay was being trapped inside the header bar instead of covering the screen.
   The header no longer animates, so nothing needs to create that context.
   --------------------------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part {
	will-change: auto;
	transform: none;
	filter: none;
}
@media ( max-width: 781px ) {
	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		inset: 0 !important;
		width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		z-index: 100000 !important;
		overflow-y: auto;
		display: flex !important;
		flex-direction: column;
	}
	/* Clear the WordPress admin bar when it is showing. */
	body.admin-bar .wp-block-navigation__responsive-container.is-menu-open {
		top: 46px !important;
		height: calc( 100dvh - 46px );
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		max-width: none;
		width: 100%;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: flex-start;
	}
	/* Nothing behind the overlay should scroll. */
	html.has-modal-open,
	body.has-modal-open {
		overflow: hidden;
	}
}


/* ---------------------------------------------------------------------------
   OVERLAY LAYOUT — 13 Aug 2026. Left-aligned, white top level, readable
   sub-items. The nav inherits items-justified-right from the desktop bar, which
   pushed the whole menu against the right edge of the overlay.
   --------------------------------------------------------------------------- */
@media ( max-width: 781px ) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		justify-content: flex-start !important;
		align-items: flex-start !important;
		text-align: left !important;
		width: 100%;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		align-items: flex-start !important;
		width: 100%;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		color: #ffffff !important;
		font-family: var(--wp--preset--font-family--hwt-artz) !important;
		font-size: 1.55rem !important;
		text-transform: uppercase;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		border-left: 2px solid rgba( 255, 255, 255, 0.22 ) !important;
		padding-left: 0.85rem !important;
		margin-top: 0.15rem !important;
		width: 100%;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: #ddd0ff !important;
	}
	/* Push the close button to the top right and give it room. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		top: 0.75rem;
		right: 1rem;
	}
}


/* ---------------------------------------------------------------------------
   Wildcat Way sign panels and workday photos — 13 Aug 2026.
   Wences' panels are the artwork, so they get a frame and no crop. The lead
   panel is centred and capped so it reads as a headline image rather than a
   stray left-aligned graphic.
   --------------------------------------------------------------------------- */
.ccpto-sign img {
	border-radius: 12px;
	border: 1px solid rgba( 32, 18, 61, 0.10 );
	display: block;
	width: 100%;
	height: auto;
}
.ccpto-sign-hero {
	max-width: 420px !important;
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--50);
}
.ccpto-sign-hero img { max-width: 420px !important; }
.ccpto-sign-hero img {
	border-radius: 16px;
	box-shadow: 0 16px 40px rgba( 32, 18, 61, 0.18 );
}
/* Photos are documentary, so they crop to a consistent shape. */
.ccpto-photo img {
	border-radius: 14px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
}
@media ( max-width: 781px ) {
	.ccpto-sign-hero, .ccpto-sign-hero img { max-width: 100% !important; margin-top: var(--wp--preset--spacing--40); }
	.ccpto-sign img,
	.ccpto-sign-hero img,
	.ccpto-photo img { max-width: 100% !important; }
}


/* ---------------------------------------------------------------------------
   TABLET AND LANDSCAPE PHONE — 13 Aug 2026.
   Reported: the top nav goes out of alignment on a tablet in portrait and a
   phone in landscape. Between roughly 782px and 1100px the wordmark, five
   labels, two icons and the language switcher will not fit on one line, so the
   row wraps and the baseline breaks. Below 1100px the hamburger takes over.
   --------------------------------------------------------------------------- */
@media ( max-width: 1100px ) {
	/* Show the overlay toggle, hide the inline list. */
	.ccpto-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.ccpto-site-header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) {
		display: none !important;
	}
	.ccpto-site-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
	}
	/* Keep the row on one line with everything vertically centred. */
	.ccpto-site-header .wp-block-group {
		flex-wrap: nowrap !important;
		align-items: center !important;
	}
	.ccpto-site-header .ccpto-lang,
	.ccpto-site-header .wp-block-shortcode:has( .ccpto-lang ) {
		margin-left: 1.25rem;
	}
}

/* The overlay styling was written for phones; it applies up to the new
   breakpoint now. */
@media ( min-width: 782px ) and ( max-width: 1100px ) {
	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		inset: 0 !important;
		z-index: 100000 !important;
		background-color: var(--wp--preset--color--purple) !important;
		padding: 1.5rem 2rem 3rem;
		overflow-y: auto;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		justify-content: flex-start !important;
		align-items: flex-start !important;
		width: 100%;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		color: #ffffff !important;
		font-family: var(--wp--preset--font-family--hwt-artz) !important;
		font-size: 1.7rem !important;
		text-transform: uppercase;
		padding-block: 0.5rem;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		background: transparent !important;
		border: 0 !important;
		border-left: 2px solid rgba( 255, 255, 255, 0.22 ) !important;
		box-shadow: none !important;
		padding-left: 0.9rem !important;
		margin: 0.15rem 0 0 !important;
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		width: 100%;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--montserrat) !important;
		font-size: 0.8rem !important;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: #ddd0ff !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none !important; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: #fff; top: 1rem; right: 1.5rem; }
}

/* ---------------------------------------------------------------------------
   Committee chair card: portraits centred, names centred with them.
   --------------------------------------------------------------------------- */
.wp-block-column.has-lavender-background-color .wp-block-group,
.wp-block-column.has-lavender-background-color > .wp-block-group:first-child {
	justify-content: center !important;
}
.wp-block-column.has-lavender-background-color .ccpto-eyebrow,
.wp-block-column.has-lavender-background-color h3,
.wp-block-column.has-lavender-background-color p {
	text-align: center;
}

/* Full-bleed festival photo. */
.ccpto-festival-hero img {
	width: 100% !important;
	max-width: none !important;
	height: clamp( 220px, 34vw, 440px ) !important;
	object-fit: cover;
	object-position: center 40%;
	display: block;
}
.ccpto-festival-hero { margin: 0; }
@media ( max-width: 781px ) {
	.ccpto-festival-hero img { height: 220px !important; max-width: none !important; }
}


/* ---------------------------------------------------------------------------
   Membership badge: centre the text inside the pill. Reviewer read the rounded
   pill as "the circle" — the text was sitting slightly high because the pill
   had symmetrical padding but no line-box centring.
   Added 13 Aug 2026.
   --------------------------------------------------------------------------- */
p.ccpto-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: fit-content;
	min-height: 2.4rem;
	line-height: 1.1;
}

/* Order-summary thumbnails at checkout were rendering at a few pixels. */
.wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__image img,
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item img {
	width: 56px !important;
	height: 56px !important;
	max-width: 56px !important;
	object-fit: contain;
	background: #ffffff;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--periwinkle);
	padding: 2px;
}
.wc-block-components-order-summary-item__image { flex: 0 0 56px; }

/* The HubSpot form slot on the Family Card page reads as a placeholder, not a bug. */
.ccpto-form-slot {
	border: 2px dashed var(--wp--preset--color--periwinkle);
	border-radius: 16px;
	padding: 1.5rem 1.75rem;
	background: var(--wp--preset--color--ground);
	margin-top: var(--wp--preset--spacing--40);
}
.ccpto-form-slot p {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.86rem;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.6rem;
}
.ccpto-form-slot p:first-child { color: var(--wp--preset--color--purple); }
.ccpto-form-slot code {
	background: var(--wp--preset--color--lavender);
	padding: 0.1rem 0.35rem;
	border-radius: 5px;
	font-size: 0.82rem;
}


/* ---------------------------------------------------------------------------
   Full-bleed page banner, used under the hero on Wildcat Way.
   Added 13 Aug 2026.
   --------------------------------------------------------------------------- */
.ccpto-page-banner { margin: 0; }
.ccpto-page-banner img {
	width: 100% !important;
	max-width: none !important;
	height: clamp( 240px, 32vw, 420px ) !important;
	object-fit: cover;
	object-position: center 45%;
	display: block;
}
.ccpto-page-banner figcaption {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-align: center;
	background: var(--wp--preset--color--ground);
	margin: 0;
	padding: 0.85rem 1rem;
}
@media ( max-width: 781px ) {
	.ccpto-page-banner img { height: 220px !important; }
}

/* Meeting recap cards. */
.ccpto-recap { border-left: 4px solid var(--wp--preset--color--purple); }
.ccpto-recap h3 { margin-top: 0; }
.ccpto-takeaways { counter-reset: t; list-style: none; margin: 0; padding: 0; }
.ccpto-takeaways li {
	counter-increment: t;
	position: relative;
	padding-left: 2.25rem;
	margin-bottom: 0.85rem;
}
.ccpto-takeaways li::before {
	content: counter(t);
	position: absolute;
	left: 0;
	top: 0.05rem;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--wp--preset--color--purple);
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.8rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}


/* ---------------------------------------------------------------------------
   Rename table on the WhatsApp page. It sits on a slate fill, so it needs its
   own light treatment rather than the default table borders.
   Added 13 Aug 2026.
   --------------------------------------------------------------------------- */
.ccpto-table { margin-top: var(--wp--preset--spacing--40); }
.ccpto-table table {
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.82rem;
	width: 100%;
}
.ccpto-table th {
	text-align: left;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #d6c2ff;
	border-bottom: 2px solid rgba( 255, 255, 255, 0.24 );
	padding: 0.5rem 0.75rem;
}
.ccpto-table td {
	color: #e3ddee;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.12 );
	padding: 0.6rem 0.75rem;
	vertical-align: top;
}
.ccpto-table td strong { color: #ffffff; }
.ccpto-table tbody tr:hover td { background: rgba( 255, 255, 255, 0.05 ); }
.ccpto-table td:nth-child(2) { text-align: right; white-space: nowrap; color: #b9aed4; }
@media ( max-width: 781px ) {
	.ccpto-table { overflow-x: auto; }
	.ccpto-table table { font-size: 0.74rem; min-width: 460px; }
}

/* Inline code, used for the naming prefixes. */
code {
	background: var(--wp--preset--color--lavender);
	color: var(--wp--preset--color--ink);
	padding: 0.1rem 0.4rem;
	border-radius: 5px;
	font-size: 0.88em;
}
.has-slate-background-color code,
.has-ink-background-color code {
	background: rgba( 255, 255, 255, 0.15 );
	color: #ffffff;
}


/* ===========================================================================
   DESIGN PASS — 13 Aug 2026
   Nothing here changes the content. It is the layer of small decisions that
   makes a site look made rather than assembled.
   =========================================================================== */

/* --- Typography ---------------------------------------------------------- */
/* Headings should not leave one orphan word on the last line. */
h1, h2, h3, .ccpto-lockup-1 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Slightly tighter tracking on the display face at large sizes — HWT Artz is
   drawn tight and loosens up when scaled. */
.has-xx-large-font-size { letter-spacing: -0.005em; }

/* --- The eyebrow gets a rule ---------------------------------------------- */
.ccpto-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.ccpto-eyebrow::after {
	content: "";
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2px;
	background: currentColor;
	opacity: 0.45;
	border-radius: 2px;
}

/* --- Cards lift on hover -------------------------------------------------- */
.ccpto-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ccpto-card:hover {
	transform: translateY( -3px );
	border-color: var(--wp--preset--color--purple);
	box-shadow: 0 14px 34px rgba( 32, 18, 61, 0.10 );
}
/* Recap cards keep their left rule and thicken it instead of lifting. */
.ccpto-recap:hover { transform: none; border-left-width: 6px; }

/* --- Links: an underline that draws itself -------------------------------- */
.wp-block-post-content a:not(.wp-element-button):not(.ccpto-lockup-1 a),
main a:not(.wp-element-button):not([class*="wp-block-navigation"]):not(.ccpto-lang a) {
	text-decoration: none;
	background-image: linear-gradient( currentColor, currentColor );
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	padding-bottom: 1px;
	transition: background-size 0.24s ease, color 0.18s ease;
}
main a:not(.wp-element-button):not([class*="wp-block-navigation"]):not(.ccpto-lang a):hover {
	background-size: 100% 2px;
}
/* Arrow links nudge forward. */
main a { --arrow-shift: 0; }
main a:hover { --arrow-shift: 3px; }

/* --- Buttons -------------------------------------------------------------- */
.wp-element-button {
	transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
	will-change: transform;
}
.wp-block-button__link:hover {
	transform: translateY( -2px );
	box-shadow: 0 10px 22px rgba( 32, 18, 61, 0.16 );
}
.wp-block-button.is-style-action .wp-block-button__link:hover {
	box-shadow: 0 10px 22px rgba( 247, 233, 81, 0.45 );
}
.wp-block-button__link:active { transform: translateY( 0 ); }

/* --- Lists get a paw-ish marker ------------------------------------------- */
main .wp-block-list:not(.ccpto-legend):not(.ccpto-lang):not(.ccpto-takeaways) {
	list-style: none;
	padding-left: 0;
}
main .wp-block-list:not(.ccpto-legend):not(.ccpto-lang):not(.ccpto-takeaways) > li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.55rem;
}
main .wp-block-list:not(.ccpto-legend):not(.ccpto-lang):not(.ccpto-takeaways) > li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--purple);
	opacity: 0.85;
}
.has-slate-background-color .wp-block-list > li::before,
.has-ink-background-color .wp-block-list > li::before,
.has-purple-background-color .wp-block-list > li::before { background: var(--wp--preset--color--action); }

/* --- Pull quote ----------------------------------------------------------- */
.wp-block-quote {
	border-left: 3px solid var(--wp--preset--color--periwinkle);
	padding-left: 1.5rem;
	position: relative;
}
.wp-block-quote cite {
	display: block;
	margin-top: 0.9rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-style: normal;
	color: var(--wp--preset--color--muted);
}

/* --- Focus ring: visible, on brand, never ugly ---------------------------- */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--purple);
	outline-offset: 3px;
	border-radius: 4px;
}
.has-purple-background-color :focus-visible,
.has-slate-background-color :focus-visible,
.has-ink-background-color :focus-visible {
	outline-color: var(--wp--preset--color--action);
}

/* --- Section seams -------------------------------------------------------- */
/* A hairline where two light sections meet, so bands read as deliberate. */
.has-ground-background-color + .has-white-background-color,
.has-white-background-color + .has-ground-background-color {
	border-top: 1px solid rgba( 214, 194, 255, 0.55 );
}

/* --- Selection ------------------------------------------------------------ */
::selection {
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--ink);
}

/* --- Images: never a hard edge -------------------------------------------- */
.ccpto-photo img { transition: transform 0.35s ease; }
.ccpto-photo:hover img { transform: scale( 1.02 ); }
.ccpto-photo { overflow: hidden; border-radius: 14px; }

/* --- Scroll reveal -------------------------------------------------------- */
/* DISABLED 14 Aug 2026 — this was hiding real content.
   The reveal started every element at opacity 0 and relied on an
   IntersectionObserver to add .is-in. On /chip-in/ all seven reveal elements
   were still at opacity 0 with the page fully settled — including the four
   donation amount buttons, which simply did not exist for a visitor. It also
   explains every "the image looks missing but the DOM says it loaded" moment
   in this build: they were genuinely invisible.
   Decoration must never be able to hide content. Fails open now. */
.ccpto-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}
.ccpto-reveal.is-in {
	opacity: 1;
	transform: none;
}
@media ( prefers-reduced-motion: reduce ) {
	.ccpto-reveal, .ccpto-reveal.is-in { opacity: 1; transform: none; transition: none; }
	.ccpto-card:hover, .wp-block-button__link:hover, .ccpto-photo:hover img { transform: none; }
}

/* --- Print: the Giving Groove and the guide should print cleanly ---------- */
@media print {
	.wp-site-blocks > header,
	.wp-site-blocks > footer,
	#wpadminbar,
	.wp-block-buttons,
	.ccpto-lang { display: none !important; }
	.wp-block-group.alignfull { padding: 0.5rem 0 !important; background: #fff !important; }
	body { color: #000; }
	h1, h2, h3 { color: #000 !important; }
	a { text-decoration: underline; }
}


/* ---------------------------------------------------------------------------
   BY THE NUMBERS band. Big display numerals on ink, with a hairline between
   each column so it reads as a table of facts rather than four floating bits.
   Added 13 Aug 2026.
   --------------------------------------------------------------------------- */
.ccpto-stat { position: relative; }
.ccpto-stat + .ccpto-stat::before {
	content: "";
	position: absolute;
	left: calc( var(--wp--preset--spacing--40) * -0.5 );
	top: 0.35rem;
	bottom: 0.35rem;
	width: 1px;
	background: rgba( 255, 255, 255, 0.16 );
}
p.ccpto-stat-num {
	font-family: var(--wp--preset--font-family--hwt-artz);
	font-size: clamp( 2.6rem, 5.2vw, 4.4rem );
	line-height: 0.92;
	color: var(--wp--preset--color--action);
	margin: 0 0 0.5rem;
	letter-spacing: -0.01em;
}
p.ccpto-stat-label {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0 0 0.5rem;
}
p.ccpto-stat-sub {
	font-size: 0.86rem;
	line-height: 1.45;
	color: #b9aed4;
	margin: 0;
}
@media ( max-width: 781px ) {
	.ccpto-stat + .ccpto-stat::before { display: none; }
	.ccpto-stat {
		border-top: 1px solid rgba( 255, 255, 255, 0.14 );
		padding-top: 1.1rem;
	}
	.wp-block-columns > .ccpto-stat:first-child { border-top: 0; padding-top: 0; }
	p.ccpto-stat-num { font-size: 2.6rem; }
}

/* ---------------------------------------------------------------------------
   Welcome Guide covers — a real book, not a thumbnail.
   --------------------------------------------------------------------------- */
.ccpto-guide-cover img {
	border-radius: 4px 10px 10px 4px;
	box-shadow:
		-6px 0 0 0 rgba( 91, 64, 147, 0.28 ),
		0 20px 44px rgba( 32, 18, 61, 0.22 );
	transition: transform 0.26s ease, box-shadow 0.26s ease;
	display: block;
	width: 100%;
	height: auto;
}
.ccpto-guide-cover a:hover img,
.ccpto-guide-cover a:focus-visible img {
	transform: translateY( -5px ) rotate( -0.6deg );
	box-shadow:
		-6px 0 0 0 rgba( 91, 64, 147, 0.34 ),
		0 28px 56px rgba( 32, 18, 61, 0.28 );
}

/* ---------------------------------------------------------------------------
   404. The mascot does the apologising.
   --------------------------------------------------------------------------- */
.ccpto-404 { text-align: center; }
.ccpto-404 img { max-width: 260px; margin-inline: auto; }
.ccpto-404 .ccpto-eyebrow { justify-content: center; }
.ccpto-404 .ccpto-eyebrow::after { display: none; }


/* ---------------------------------------------------------------------------
   Email addresses: no drawn underline, and never break across lines. The
   underline was pushing ".org" onto its own line inside the chair cards.
   Added 13 Aug 2026.
   --------------------------------------------------------------------------- */
main a[href^="mailto:"] {
	background-image: none !important;
	padding-bottom: 0;
	border-bottom: 0;
	white-space: nowrap;
	transition: color 0.18s ease;
}
main a[href^="mailto:"]:hover {
	color: var( --wp--preset--color--purple );
}

/* ---------------------------------------------------------------------------
   THE ADDRESS CHIP. Ian wants the real addresses on the cards — president@,
   vicepresident@ — not a friendly label. At four cards across, a board card is
   259px wide and "vicepresident@royalblue-rat-808179.hostingersite.com" needs 234px on one line,
   which clipped. So the chip breaks the address deliberately at the @: mailbox
   on top, domain underneath. The whole address is still there, still one link,
   still copyable, and ".org" can never be orphaned at any card width.
   Added 13 Aug 2026.
   --------------------------------------------------------------------------- */
main a.ccpto-mail {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	max-width: 100%;
	margin: 0.6rem auto 0;
	padding: 0.55rem 1rem;
	border: 1px solid rgba( 91, 64, 147, 0.16 );
	border-radius: 14px;
	background: rgba( 255, 255, 255, 0.72 );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.7 );
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	background-image: none !important;
	transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
main a.ccpto-mail .ccpto-mail-user {
	font-family: montserrat, -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.005em;
	color: #3d2a6b;
}
main a.ccpto-mail .ccpto-mail-host {
	font-size: 0.75rem;
	letter-spacing: 0.015em;
	color: #675894;
}
main a.ccpto-mail:hover {
	background-color: #ffffff;
	border-color: rgba( 91, 64, 147, 0.34 );
	transform: translateY( -1px );
	box-shadow: 0 6px 14px rgba( 32, 18, 61, 0.08 );
}
main a.ccpto-mail:focus-visible {
	outline: 2px solid var( --wp--preset--color--purple );
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   BUTTONS: the label was sitting 13px from the top of the pill and 2px from the
   bottom. theme.json asks for 0.875rem top and bottom, so something downstream
   was zeroing padding-bottom. Centre the label explicitly instead of trusting
   the padding, and stop the drawn-underline treatment putting a hairline under
   the pill. Added 13 Aug 2026.
   --------------------------------------------------------------------------- */
.wp-block-button__link.wp-element-button,
.wp-block-button > .wp-block-button__link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding-top: 0.7em !important;
	padding-bottom: 0.7em !important;
	line-height: 1.2;
	border-bottom: 0 !important;
	text-align: center;
}

/* ---------------------------------------------------------------------------
   THE CHAIR CARD. It is the most human thing on the site — the faces of the
   people doing the work — so it gets the most care. Fully centred, a soft
   gradient, a hairline ring, and the portraits overlapping slightly so two
   co-chairs read as a pair rather than two separate headshots.
   --------------------------------------------------------------------------- */
.wp-block-column.has-lavender-background-color {
	background: linear-gradient( 168deg, #efe8ff 0%, #e2d5fb 58%, #dccdf8 100% ) !important;
	border: 1px solid rgba( 91, 64, 147, 0.16 );
	box-shadow:
		inset 0 1px 0 rgba( 255, 255, 255, 0.65 ),
		0 12px 30px rgba( 32, 18, 61, 0.09 );
	border-radius: 22px !important;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	overflow: hidden;
}
/* A quiet paw-print watermark, bottom right, barely there. */
.wp-block-column.has-lavender-background-color::after {
	content: "";
	position: absolute;
	right: -10px;
	bottom: -12px;
	width: 96px;
	height: 96px;
	background: var(--ccpto-paw) center / contain no-repeat;
	opacity: 0.13;
	transform: rotate( -12deg );
	pointer-events: none;
}

.wp-block-column.has-lavender-background-color > * { width: 100%; max-width: 100%; }

/* Portraits: centred, overlapping when there are two. */
.wp-block-column.has-lavender-background-color .wp-block-group:has( .ccpto-portrait ) {
	justify-content: center !important;
	gap: 0 !important;
}
.wp-block-column.has-lavender-background-color .ccpto-portrait { margin: 0; }
.wp-block-column.has-lavender-background-color .ccpto-portrait + .ccpto-portrait { margin-left: -14px; }
.wp-block-column.has-lavender-background-color .ccpto-portrait img {
	border: 3px solid #ffffff;
	box-shadow: 0 6px 16px rgba( 32, 18, 61, 0.16 );
	transition: transform 0.2s ease;
}
.wp-block-column.has-lavender-background-color .ccpto-portrait:hover img {
	transform: translateY( -3px ) scale( 1.03 );
	z-index: 2;
	position: relative;
}

/* Type inside the card. */
.wp-block-column.has-lavender-background-color .ccpto-eyebrow {
	justify-content: center;
	margin-top: 0.35rem;
	margin-bottom: 0.35rem;
	color: var(--wp--preset--color--purple);
}
.wp-block-column.has-lavender-background-color .ccpto-eyebrow::after { display: none; }
.wp-block-column.has-lavender-background-color h3 {
	margin: 0 0 0.35rem;
	line-height: 1.08;
}
/* Divider between the names and the contact details. */
.wp-block-column.has-lavender-background-color h3 + p {
	padding-bottom: 0.85rem;
	margin-bottom: 0.85rem;
	border-bottom: 1px solid rgba( 91, 64, 147, 0.18 );
}
.wp-block-column.has-lavender-background-color .wp-block-buttons { justify-content: center; }
.wp-block-column.has-lavender-background-color em { display: block; }


/* ---------------------------------------------------------------------------
   THE PAW. One SVG, defined once as a custom property, reused wherever a
   decorative mark is wanted. Four toes and a pad — drawn rather than borrowed,
   so it scales cleanly and costs no HTTP request.
   Added 13 Aug 2026.
   --------------------------------------------------------------------------- */
:root {
	--ccpto-paw: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%235b4093'%3E%3Cellipse cx='24' cy='36' rx='10.5' ry='13.5' transform='rotate(-20 24 36)'/%3E%3Cellipse cx='42' cy='21' rx='10' ry='13.5' transform='rotate(-7 42 21)'/%3E%3Cellipse cx='62' cy='22' rx='10' ry='13.5' transform='rotate(8 62 22)'/%3E%3Cellipse cx='79' cy='38' rx='10' ry='13' transform='rotate(21 79 38)'/%3E%3Cpath d='M51 45c14.6 0 26 9.4 26 21.4C77 78 67.5 85 51 85S25 78 25 66.4C25 54.4 36.4 45 51 45z'/%3E%3C/g%3E%3C/svg%3E" );
	--ccpto-paw-light: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23ffffff'%3E%3Cellipse cx='24' cy='36' rx='10.5' ry='13.5' transform='rotate(-20 24 36)'/%3E%3Cellipse cx='42' cy='21' rx='10' ry='13.5' transform='rotate(-7 42 21)'/%3E%3Cellipse cx='62' cy='22' rx='10' ry='13.5' transform='rotate(8 62 22)'/%3E%3Cellipse cx='79' cy='38' rx='10' ry='13' transform='rotate(21 79 38)'/%3E%3Cpath d='M51 45c14.6 0 26 9.4 26 21.4C77 78 67.5 85 51 85S25 78 25 66.4C25 54.4 36.4 45 51 45z'/%3E%3C/g%3E%3C/svg%3E" );
}

/* ---------------------------------------------------------------------------
   BOARD CARDS. The four elected officers. Centred, with a purple hairline
   accent across the top, a portrait ring, and the paw sitting quietly behind.
   Restrained on purpose — these are people, not products.
   --------------------------------------------------------------------------- */
.ccpto-card:has( .ccpto-portrait ) {
	position: relative;
	overflow: hidden;
	text-align: center;
	background: linear-gradient( 180deg, #ffffff 0%, #fdfcff 62%, #f7f3ff 100% );
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
/* Thin brand rule along the top edge. */
.ccpto-card:has( .ccpto-portrait )::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient( 90deg, var(--wp--preset--color--purple), #8f74c9 55%, var(--wp--preset--color--periwinkle) );
}
/* Paw watermark, lower left so it does not fight the text. */
.ccpto-card:has( .ccpto-portrait )::after {
	content: "";
	position: absolute;
	left: -14px;
	bottom: -16px;
	width: 84px;
	height: 84px;
	background: var(--ccpto-paw) center / contain no-repeat;
	opacity: 0.07;
	transform: rotate( 14deg );
	pointer-events: none;
}
.ccpto-card:has( .ccpto-portrait ) > * { width: 100%; }

/* Portrait: centred, ringed, and it lifts with the card. */
.ccpto-card:has( .ccpto-portrait ) .ccpto-portrait {
	margin: 0.25rem auto 1rem;
	display: flex;
	justify-content: center;
}
.ccpto-card:has( .ccpto-portrait ) .ccpto-portrait img {
	border: 4px solid #ffffff;
	box-shadow: 0 8px 22px rgba( 32, 18, 61, 0.16 );
	transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.ccpto-card:has( .ccpto-portrait ):hover .ccpto-portrait img {
	transform: scale( 1.04 );
	box-shadow: 0 12px 28px rgba( 32, 18, 61, 0.22 );
}

/* Type. Role above the name, both centred, with a short rule between the name
   and the biography so the card has a spine. */
.ccpto-card:has( .ccpto-portrait ) .ccpto-eyebrow {
	justify-content: center;
	margin-bottom: 0.3rem;
}
.ccpto-card:has( .ccpto-portrait ) .ccpto-eyebrow::after { display: none; }
.ccpto-card:has( .ccpto-portrait ) h3 {
	margin: 0 0 0.75rem;
	line-height: 1.08;
	position: relative;
	padding-bottom: 0.75rem;
}
.ccpto-card:has( .ccpto-portrait ) h3::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX( -50% );
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--periwinkle);
}
.ccpto-card:has( .ccpto-portrait ) p { text-align: center; }
/* The office email sits tight under the name. */
.ccpto-card:has( .ccpto-portrait ) h3 + p a[href^="mailto:"] { font-size: 0.92em; }

@media ( max-width: 781px ) {
	.ccpto-card:has( .ccpto-portrait )::after { width: 64px; height: 64px; }
}

/* On the cart and checkout the mini-cart is disabled by WooCommerce, so it sat
   there as a dead 45px gap in the header. Hide it on those two pages only. */
.woocommerce-cart .wp-block-woocommerce-mini-cart,
.woocommerce-checkout .wp-block-woocommerce-mini-cart {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   THE McDONALD'S BAND — 14 Aug 2026.
   Ian: "ordinary people who are parents like me, TOOK DOWN MCDONALDS. I will
   never not be impressed by that." It is the strongest recruiting line on the
   whole site, so it gets to break the page rhythm: full width, dark, centred
   and loud, with the paw blown up behind it.
   --------------------------------------------------------------------------- */
.ccpto-epic {
	position: relative;
	overflow: hidden;
	text-align: center;
}
.ccpto-epic::after {
	content: "";
	position: absolute;
	right: -3%;
	bottom: -28%;
	width: min( 420px, 44vw );
	aspect-ratio: 1;
	background: var(--ccpto-paw-light) center / contain no-repeat;
	opacity: 0.055;
	transform: rotate( -14deg );
	pointer-events: none;
}
.ccpto-epic > * { position: relative; z-index: 1; }
.ccpto-epic .ccpto-eyebrow {
	color: var(--wp--preset--color--periwinkle) !important;
	justify-content: center;
}
.ccpto-epic-line {
	font-size: clamp( 2.05rem, 5.4vw, 4.25rem );
	line-height: 0.98;
	letter-spacing: -0.012em;
	text-wrap: balance;
	max-width: 30ch;
	margin-inline: auto !important;
}
.ccpto-epic-sub {
	max-width: 60ch;
	margin: 1.25rem auto 0 !important;
	font-size: clamp( 1rem, 1.35vw, 1.2rem );
	line-height: 1.55;
	color: #d9d2ec;
	text-wrap: pretty;
}
.ccpto-epic-quote {
	max-width: 54ch;
	margin: 1.75rem auto 0 !important;
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--wp--preset--color--periwinkle);
}
.ccpto-epic-quote em {
	display: block;
	margin-top: 0.6rem;
	font-style: normal;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #b6adc9;
}
@media ( max-width: 600px ) {
	.ccpto-epic-line { font-size: clamp( 1.85rem, 9vw, 2.6rem ); }
}

/* ---------------------------------------------------------------------------
   PHOTOS FROM PHONES — 14 Aug 2026.
   The Bicibus shots are 1024px wide. A wide-aligned figure stretched them to
   1440 and they went soft. Never upscale a photo: cap at its own width, centre
   it in the wide column, and let the caption sit under the middle of it.
   --------------------------------------------------------------------------- */
.ccpto-photo img {
	display: block;
	width: 100%;
	max-width: 560px;
	height: auto;
	margin-inline: auto;
	border-radius: 18px;
}
.ccpto-photo figcaption {
	max-width: 560px;
	margin: 0.75rem auto 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.78rem;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* Amount buttons on Chip In: even widths so $10 and $100 read as one control. */
.ccpto-amounts { justify-content: flex-start; }
.ccpto-amounts .wp-block-button__link { min-width: 5.5rem; text-align: center; }

/* ---------------------------------------------------------------------------
   THE HUBSPOT FORM PANEL — 14 Aug 2026.
   HubSpot v4 forms render in a cross-origin iframe, so none of our CSS can
   reach the fields; restyling them needs a paid HubSpot plan. What we can do
   is stop the frame looking pasted in: give it a white card with our radius,
   our border and our spacing, so the default fields read as content inside a
   deliberate panel rather than a foreign object on the page.
   --------------------------------------------------------------------------- */
.ccpto-form {
	background: #ffffff;
	border: 1px solid rgba( 91, 64, 147, 0.14 );
	border-radius: 22px;
	padding: clamp( 1.25rem, 3vw, 2.5rem );
	box-shadow: 0 12px 30px rgba( 32, 18, 61, 0.07 );
	margin-top: var( --wp--preset--spacing--50 );
}
.ccpto-form .hs-form-frame { max-width: 100%; }
/* The free-tier HubSpot badge sits under Submit. It cannot be removed without
   paying, so at least stop it shouting. */
.ccpto-form + p, .ccpto-form ~ .hs-form-branding { font-size: 0.8rem; }

/* The mobile overlay menu sat flush against the left edge — it needs breathing
   room. Ian, 14 Aug 2026. */
@media ( max-width: 781px ) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding-left: 0.25rem;
	}
}

/* The mobile overlay menu sat flush against the left edge — it needs breathing
   room. Ian, 14 Aug 2026. */
@media ( max-width: 781px ) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding-left: 0.25rem;
	}
}