/* =====================================================================
   Carpenters Café — Design System
   Sections below are numbered to match the build brief for easy lookup.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Design Tokens (brief Section 3)
   ------------------------------------------------------------------- */
:root {
	/* Primary brand palette */
	--cc-brown: #B97755;
	--cc-dark-brown: #3A241A;
	--cc-coffee: #5A3828;
	--cc-cream: #FAF6EF;
	--cc-warm-sand: #E5D4C4;
	--cc-soft-tan: #D9B598;
	--cc-charcoal: #1F1E1C;
	--cc-white: #FFFFFF;

	/* Accents — used sparingly */
	--cc-gold: #C89A5B;
	--cc-muted-green: #6F7D55;
	--cc-alert-orange: #D9823B;

	/* Footer */
	--cc-footer-bg: #1F1612;
	--cc-footer-text: #FAF6EF;
	--cc-footer-accent: #B97755;

	/* Typography */
	--cc-font-heading: 'Manrope', sans-serif;
	--cc-font-body: 'Inter', sans-serif;

	--cc-h1: clamp(2.25rem, 4.4vw, 4rem);
	--cc-h2: clamp(1.75rem, 3vw, 2.625rem);
	--cc-h3: clamp(1.125rem, 1.8vw, 1.5rem);
	--cc-body: clamp(0.9375rem, 0.95vw, 1.0625rem);
	--cc-tracking: -0.015em;

	/* Spacing */
	--cc-section-pad: clamp(3.25rem, 7vw, 6rem);
	--cc-container-w: 1600px;
	--cc-gap: clamp(1rem, 2.4vw, 2rem);

	/* Page header / page content shared insets — kept as single tokens
	   so the standard-page hero and the content column below it always
	   start at the exact same x-position, instead of each having its
	   own separately-tuned padding that can drift apart. */
	--cc-header-gutter: clamp(1.25rem, 5vw, 2.5rem);
	--cc-header-gutter-left: clamp(3rem, 9vw, 5.5rem);
	/* Matches the hero panel's OUTER edge (where the dark colour starts,
	   i.e. the grid's own margin-inline-start) — not the text position
	   inside the panel's internal padding. That's what makes the
	   content column below actually line up with the hero block, not
	   with where the hero's text happens to sit inside it. */
	--cc-content-inset-left: var(--cc-header-gutter-left);
	--cc-content-inset-right: var(--cc-header-gutter);

	/* Radii / shadow */
	--cc-radius-lg: 16px;
	--cc-radius-md: 10px;
	--cc-radius-pill: 999px;
	--cc-shadow-soft: 0 16px 36px -22px rgba(58, 36, 26, 0.16);
	--cc-shadow-card: 0 6px 16px -12px rgba(58, 36, 26, 0.1);

	--cc-transition: 0.2s ease;

	/* Header logo width — overridden inline by the Customizer (see
	   cc_customize_inline_css() in inc/customizer.php). */
	--cc-logo-width: 150px;
}

/* ---------------------------------------------------------------------
   2. Reset + base
   ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	font-family: var(--cc-font-body);
	font-size: var(--cc-body);
	line-height: 1.6;
	color: var(--cc-charcoal);
	background: var(--cc-cream);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--cc-font-heading);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: var(--cc-tracking);
	margin: 0 0 0.5em;
	color: var(--cc-dark-brown);
}

p { margin: 0 0 1em; }
img { max-width: 100%; display: block; }
a { color: var(--cc-coffee); text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* The reset above is intentional for component lists (nav, cards, footer
   columns, tag rows) — but it would also silently strip bullets/numbers
   out of real editorial content (the_content(), ACF WYSIWYG fields).
   Restore normal list rendering wherever free-form WordPress content is
   output, so this stays a component reset rather than a site-wide one. */
.cc-page-content ul,
.cc-page-content ol {
	margin: 0 0 1.25em 1.25em;
	padding: 0;
	list-style: revert;
}
.cc-page-content li { margin-bottom: 0.4em; }

button { font-family: inherit; }

/* Accessible focus state — never remove without replacing (Section 16) */
:focus-visible {
	outline: 3px solid var(--cc-gold);
	outline-offset: 2px;
	border-radius: 4px;
}

.cc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.cc-skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	z-index: 999;
	background: var(--cc-dark-brown);
	color: var(--cc-cream);
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 8px 0;
}
.cc-skip-link:focus {
	left: 0;
}

.cc-container {
	max-width: var(--cc-container-w);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 3vw, 2rem);
}

/* Scroll-reveal: starts hidden only once JS confirms it can animate */
[data-cc-reveal] {
	opacity: 1;
	transform: none;
}
.cc-js [data-cc-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.cc-js [data-cc-reveal].cc-is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---------------------------------------------------------------------
   3. Buttons (Section 15)
   ------------------------------------------------------------------- */
.cc-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border-radius: var(--cc-radius-pill);
	padding: 0.7rem 1.4rem;
	font-weight: 600;
	font-size: 0.875rem;
	transition: transform var(--cc-transition), background var(--cc-transition), color var(--cc-transition), border-color var(--cc-transition);
	white-space: nowrap;
	/* .cc-form's submit <button class="cc-btn ..."> is a real <button>,
	   not an <a> — native buttons default to cursor:default, so without
	   this it wouldn't get the pointer cursor every other .cc-btn
	   (all <a> tags) gets for free from the browser. */
	cursor: pointer;
}
.cc-btn--primary {
	background: var(--cc-dark-brown);
	color: var(--cc-cream);
	border: 1px solid var(--cc-dark-brown);
}
.cc-btn--primary:hover { background: var(--cc-coffee); transform: translateY(-1px); }

.cc-btn--secondary {
	background: var(--cc-cream);
	color: var(--cc-dark-brown);
	border: 1px solid var(--cc-brown);
}
.cc-btn--secondary:hover { background: var(--cc-warm-sand); transform: translateY(-1px); }

.cc-btn--tertiary {
	background: none;
	border: none;
	padding: 0;
	color: var(--cc-coffee);
	font-weight: 600;
}
.cc-btn--tertiary:hover .cc-btn__arrow { transform: translateX(4px); }
.cc-btn__arrow { display: inline-block; transition: transform var(--cc-transition); }

.cc-btn--lg { padding: 0.85rem 1.75rem; font-size: 0.95rem; }

/* ---------------------------------------------------------------------
   4. Badges / Eyebrows (Section 15)
   ------------------------------------------------------------------- */
.cc-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 0.3rem 0.85rem;
	border-radius: var(--cc-radius-pill);
	margin-bottom: 0.75rem;
}
.cc-badge--brown { background: var(--cc-warm-sand); color: var(--cc-dark-brown); }
.cc-badge--gold  { background: var(--cc-gold); color: var(--cc-dark-brown); }
.cc-badge--cream { background: var(--cc-cream); color: var(--cc-coffee); border: 1px solid var(--cc-soft-tan); }
.cc-badge--green { background: var(--cc-muted-green); color: var(--cc-cream); }

.cc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--cc-coffee);
	background: var(--cc-cream);
	border: 1px solid var(--cc-warm-sand);
	padding: 0.4rem 0.9rem;
	border-radius: var(--cc-radius-pill);
	margin-bottom: 0.85rem;
}
.cc-eyebrow::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cc-gold);
	flex-shrink: 0;
}

.cc-section-head { max-width: 640px; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.cc-section-head--center { margin-inline: auto; text-align: center; }
/* Programme Cards and Community Stories: the heading block matches the
   card grid's constrained width/centering, so the heading's left edge
   lines up with the first card instead of sitting further left. */
.cc-programmes .cc-section-head {
	max-width: 1140px;
	margin-inline: auto;
}
.cc-section-head--center .cc-eyebrow { margin-inline: auto; }
.cc-section-head__title { font-size: var(--cc-h2); margin: 0; }

/* Small neutral pill — used for short tags (hero card, category labels) */
.cc-tag {
	display: inline-flex;
	align-items: center;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--cc-coffee);
	background: var(--cc-cream);
	border: 1px solid var(--cc-warm-sand);
	border-radius: var(--cc-radius-pill);
	padding: 0.3rem 0.7rem;
}

/* Text + circular arrow — replaces the old plain "→" link for a calmer,
   more editorial affordance (cards, "see all" links, hero secondary CTA) */
.cc-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--cc-dark-brown);
}
.cc-link-arrow__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border: 1px solid var(--cc-brown);
	border-radius: 50%;
	color: var(--cc-brown);
	transition: transform var(--cc-transition), background var(--cc-transition), color var(--cc-transition), border-color var(--cc-transition);
}
.cc-link-arrow:hover .cc-link-arrow__icon {
	background: var(--cc-dark-brown);
	border-color: var(--cc-dark-brown);
	color: var(--cc-cream);
	transform: translate(2px, -2px);
}
.cc-final-cta .cc-link-arrow,
.cc-donation .cc-link-arrow { color: var(--cc-cream); }
.cc-final-cta .cc-link-arrow__icon,
.cc-donation .cc-link-arrow__icon { border-color: rgba(250, 246, 239, 0.4); color: var(--cc-cream); }

/* ---------------------------------------------------------------------
   5. Image placeholder (used while real photography is sourced)
   ------------------------------------------------------------------- */
.cc-image-placeholder {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	background: linear-gradient(165deg, var(--cc-cream), var(--cc-warm-sand));
	border-radius: var(--cc-radius-md);
}

/* ---------------------------------------------------------------------
   6. Header (brief Section 7)
   ------------------------------------------------------------------- */
.cc-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(250, 246, 239, 0.94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--cc-warm-sand);
}

/* Front-page-only overlay header: floats transparently on top of the
   hero photo (the photo's own top-edge scrim — see .cc-hero__scrim —
   provides the contrast for the light text below). `position: fixed`
   removes it from the page flow entirely, so the hero naturally starts
   at the very top of the viewport behind it — no negative-margin
   trickery needed. assets/js/main.js toggles `.cc-header--scrolled`
   once the visitor scrolls, which reverts every overridden rule below
   back to the normal solid header by simply no longer matching. */
.cc-header--home:not(.cc-header--scrolled) {
	position: fixed;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
}
.cc-header--home:not(.cc-header--scrolled) .cc-header__logo-text,
.cc-header--home:not(.cc-header--scrolled) .cc-header__menu a,
.cc-header--home:not(.cc-header--scrolled) .cc-header__support-link {
	color: var(--cc-cream);
}
.cc-header--home:not(.cc-header--scrolled) .cc-header__menu a:hover,
.cc-header--home:not(.cc-header--scrolled) .cc-header__support-link:hover {
	color: var(--cc-warm-sand);
}
.cc-header--home:not(.cc-header--scrolled) .cc-header__call {
	border-color: rgba(250, 246, 239, 0.5);
	color: var(--cc-cream);
}
.cc-header--home:not(.cc-header--scrolled) .cc-header__call:hover {
	border-color: var(--cc-cream);
}
.cc-header--home:not(.cc-header--scrolled) .cc-header__toggle-bar {
	background: var(--cc-cream);
}
/* The Donate button stays solid for emphasis, but switches to a light
   fill so it pops against the dark photo instead of blending into it. */
.cc-header--home:not(.cc-header--scrolled) .cc-header__donate {
	background: var(--cc-cream);
	color: var(--cc-dark-brown);
	border-color: var(--cc-cream);
}
.cc-header--home:not(.cc-header--scrolled) .cc-header__donate:hover {
	background: var(--cc-white);
}
/* Once scrolled, fixed positioning is kept (so nav stays reachable)
   but every colour override above stops applying — back to normal. */
.cc-header--home.cc-header--scrolled {
	position: fixed;
	left: 0;
	right: 0;
}
.cc-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding-block: 0.8rem;
}
.cc-header__logo {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}
.cc-header__logo img,
.cc-header__logo .custom-logo {
	width: var(--cc-logo-width);
	height: auto;
	display: block;
}
.cc-header__logo-text {
	font-family: var(--cc-font-heading);
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: var(--cc-tracking);
	color: var(--cc-dark-brown);
}

.cc-header__nav {
	margin-inline: auto;
}
.cc-header__menu {
	display: flex;
	gap: clamp(1rem, 2vw, 1.75rem);
	font-weight: 500;
	font-size: 0.875rem;
}
.cc-header__menu a {
	color: var(--cc-charcoal);
}
.cc-header__menu a:hover { color: var(--cc-brown); }

.cc-header__actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
.cc-header__call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--cc-warm-sand);
	color: var(--cc-coffee);
	flex-shrink: 0;
	transition: border-color var(--cc-transition), color var(--cc-transition);
}
.cc-header__call:hover { border-color: var(--cc-brown); color: var(--cc-dark-brown); }
.cc-header__support-link {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--cc-dark-brown);
}
.cc-header__support-link:hover { color: var(--cc-brown); }

.cc-header__toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
	margin-left: auto;
}
.cc-header__toggle-bar {
	width: 24px;
	height: 2px;
	background: var(--cc-dark-brown);
	border-radius: 2px;
}

.cc-mobile-nav {
	display: none;
	position: fixed;
	inset: 0;
	top: 0;
	background: var(--cc-cream);
	z-index: 60;
	/* ~50% more compact than before across the board. */
	padding: clamp(2.5rem, 9vw, 3.5rem) 1.25rem 1.5rem;
	overflow-y: auto;
}
.cc-mobile-nav.cc-is-open { display: block; }

.cc-mobile-nav__close {
	position: absolute;
	top: clamp(1rem, 4vw, 1.5rem);
	right: 1.25rem;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
}
.cc-mobile-nav__close-bar {
	position: absolute;
	width: 22px;
	height: 2px;
	background: var(--cc-dark-brown);
	border-radius: 2px;
}
.cc-mobile-nav__close-bar:first-child { transform: rotate(45deg); }
.cc-mobile-nav__close-bar:last-child { transform: rotate(-45deg); }

.cc-mobile-nav__menu {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	font-size: 1rem;
	font-family: var(--cc-font-heading);
	font-weight: 700;
	margin-bottom: 1.25rem;
}
.cc-mobile-nav__actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.cc-mobile-nav__actions .cc-btn { justify-content: center; width: 100%; }

@media (max-width: 880px) {
	.cc-header__nav, .cc-header__actions { display: none; }
	.cc-header__toggle { display: flex; }
}

/* ---------------------------------------------------------------------
   7. Hero (Section 1) — two-column editorial layout
   ------------------------------------------------------------------- */
.cc-hero {
	padding-block: clamp(2.5rem, 6vw, 5rem);
	background: var(--cc-cream);
}
.cc-hero__inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

/* --- Left column: copy --- */
.cc-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-family: var(--cc-font-heading);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-brown);
	margin-bottom: 1.5rem;
}
.cc-hero__eyebrow-rule {
	width: 2.5rem;
	height: 2px;
	background: var(--cc-gold);
	flex-shrink: 0;
}
.cc-hero__heading {
	color: var(--cc-dark-brown);
	font-size: clamp(2.75rem, 5.5vw, 4.75rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
}
.cc-hero__heading-accent { color: var(--cc-gold); }

.cc-hero__subtext {
	color: var(--cc-coffee);
	font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
	line-height: 1.6;
	max-width: 46ch;
	margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
}
.cc-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
/* Solid gold primary CTA; outlined secondary handled by base tertiary. */
.cc-hero__ctas .cc-btn--primary {
	background: var(--cc-gold);
	color: var(--cc-dark-brown);
	border-color: var(--cc-gold);
}
.cc-hero__ctas .cc-btn--primary:hover {
	background: var(--cc-brown);
	border-color: var(--cc-brown);
	color: var(--cc-cream);
}
/* The "Volunteer with us" button reads as an outlined pill here rather
   than the default text-link tertiary, to match the two-button pairing
   in the design. */
.cc-hero__ctas .cc-btn--tertiary {
	padding: 0.9rem 1.6rem;
	border: 1px solid var(--cc-soft-tan);
	border-radius: var(--cc-radius-pill);
	color: var(--cc-dark-brown);
	background: transparent;
}
.cc-hero__ctas .cc-btn--tertiary:hover {
	border-color: var(--cc-brown);
	background: var(--cc-white);
}

/* --- Social-proof row --- */
.cc-hero__proof {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}
.cc-hero__avatars {
	display: inline-flex;
	flex-shrink: 0;
}
.cc-hero__avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--cc-cream);
	background: var(--cc-warm-sand);
	margin-left: -0.65rem;
}
.cc-hero__avatar:first-child { margin-left: 0; }
.cc-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cc-hero__proof-text {
	font-size: 0.95rem;
	color: var(--cc-coffee);
	line-height: 1.4;
}
.cc-hero__proof-text strong { color: var(--cc-dark-brown); font-weight: 700; }

/* --- Right column: image + floating stat card --- */
.cc-hero__media {
	position: relative;
	align-self: stretch;
	min-height: clamp(360px, 42vw, 560px);
}
.cc-hero__image-frame {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: clamp(360px, 42vw, 560px);
	border-radius: var(--cc-radius-lg);
	overflow: hidden;
	background: var(--cc-warm-sand);
}
.cc-hero__image { width: 100%; height: 100%; object-fit: cover; }
/* Empty-state placeholder keeps the same rounded frame proportions. */
.cc-hero__image-frame .cc-image-placeholder {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}
.cc-hero__stat {
	position: absolute;
	left: clamp(-1rem, -2vw, -2rem);
	bottom: clamp(1.5rem, 4vw, 3rem);
	display: flex;
	align-items: center;
	gap: 0.85rem;
	background: var(--cc-white);
	border-radius: var(--cc-radius-md);
	box-shadow: var(--cc-shadow-soft);
	padding: 1rem 1.5rem;
}
.cc-hero__stat-value {
	font-family: var(--cc-font-heading);
	font-weight: 800;
	font-size: clamp(2.25rem, 3.5vw, 3rem);
	line-height: 1;
	color: var(--cc-gold);
}
.cc-hero__stat-label {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--cc-coffee);
	max-width: 12ch;
}

/* --- Tablet: stack the columns, image below the copy --- */
@media (max-width: 980px) {
	.cc-hero__inner { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
	.cc-hero__media { min-height: 0; }
	.cc-hero__image-frame { min-height: clamp(320px, 60vw, 440px); }
	.cc-hero__stat { left: auto; right: clamp(1rem, 4vw, 2rem); }
}

/* --- Mobile --- */
@media (max-width: 620px) {
	.cc-hero__heading { font-size: clamp(2.5rem, 11vw, 3.25rem); }
	.cc-hero__ctas { gap: 0.75rem; }
	.cc-hero__ctas .cc-btn { width: 100%; justify-content: center; }
	.cc-hero__proof { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------
   8. Connected Companies — scrolling logo marquee (Section 2)
   ------------------------------------------------------------------- */
.cc-logos {
	padding-block: clamp(1.5rem, 4vw, 2.5rem);
	border-top: 1px solid var(--cc-warm-sand);
	border-bottom: 1px solid var(--cc-warm-sand);
}
.cc-logos__label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cc-brown);
	margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
}
/* Viewport masks the overflow and fades both edges so logos slide in/out
   softly rather than popping at a hard border. */
.cc-logos__viewport {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cc-logos__track {
	display: flex;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5rem);
	width: max-content;
	animation: cc-logos-scroll 40s linear infinite;
}
.cc-logos__viewport:hover .cc-logos__track { animation-play-state: paused; }

.cc-logos__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 44px;
}
.cc-logos__img {
	max-height: 44px;
	width: auto;
	object-fit: contain;
	/* Calm, editorial: desaturate logos so the strip reads as one tonal
	   band, lifting to full colour on hover. */
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter var(--cc-transition), opacity var(--cc-transition);
}
.cc-logos__item:hover .cc-logos__img { filter: grayscale(0); opacity: 1; }
.cc-logos__item--text {
	font-family: var(--cc-font-heading);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--cc-coffee);
	opacity: 0.75;
	white-space: nowrap;
}

@keyframes cc-logos-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.cc-logos__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* ---------------------------------------------------------------------
   9. Mission Statement (Section 3)
   ------------------------------------------------------------------- */
.cc-mission { padding-block: var(--cc-section-pad); }
.cc-mission__inner { max-width: 920px; margin-inline: auto; text-align: center; }
.cc-mission__statement {
	font-family: var(--cc-font-heading);
	font-weight: 600;
	letter-spacing: var(--cc-tracking);
	font-size: clamp(1.625rem, 3.4vw, 2.5rem);
	color: var(--cc-dark-brown);
	line-height: 1.25;
}
.cc-mission__support { color: var(--cc-coffee); font-size: 1.125rem; max-width: 60ch; margin-inline: auto; }

/* ---------------------------------------------------------------------
   10. Impact (Section 4)
   ------------------------------------------------------------------- */
.cc-impact {
	position: relative;
	background: var(--cc-dark-brown);
	color: var(--cc-cream);
	padding-block: var(--cc-section-pad);
	overflow: hidden;
}
.cc-impact--has-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.cc-impact--has-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(31, 22, 18, 0.82);
	z-index: 0;
	pointer-events: none;
}
.cc-impact__bg-word {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--cc-font-heading);
	font-weight: 800;
	font-size: clamp(5rem, 18vw, 14rem);
	color: rgba(250, 246, 239, 0.06);
	margin: 0;
	white-space: nowrap;
	pointer-events: none;
}
.cc-impact__inner { position: relative; z-index: 1; }
.cc-impact__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: clamp(1rem, 3vw, 1.5rem);
	text-align: center;
}
.cc-impact__stat {
	background: rgba(250, 246, 239, 0.05);
	border: 1px solid rgba(250, 246, 239, 0.1);
	border-radius: var(--cc-radius-md);
	padding: clamp(1.25rem, 3vw, 1.75rem) 1rem;
}
.cc-impact__value {
	font-family: var(--cc-font-heading);
	font-weight: 700;
	font-size: clamp(2rem, 4.5vw, 3rem);
	color: var(--cc-gold);
	margin-bottom: 0.25rem;
}
.cc-impact__label { font-size: 0.875rem; color: var(--cc-warm-sand); }

/* ---------------------------------------------------------------------
   11. Cards + grids (shared by Programme Cards, Stories) — Section 5/7
   ------------------------------------------------------------------- */
.cc-programmes { padding-block: var(--cc-section-pad); }
.cc-stories { padding-block: clamp(2.5rem, 5vw, 4rem); }

.cc-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--cc-gap);
}

/* Programme Cards: capped at 3 per row and narrower than the full wide
   container, so cards stay a sensible width instead of stretching across
   a 1600px page. */
.cc-card-grid--programmes {
	grid-template-columns: repeat(3, 1fr);
	max-width: 1140px;
	margin-inline: auto;
}
@media (max-width: 980px) {
	.cc-card-grid--programmes {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 620px) {
	.cc-card-grid--programmes {
		grid-template-columns: 1fr;
	}
}

.cc-card {
	background: var(--cc-white);
	border-radius: var(--cc-radius-lg);
	overflow: hidden;
	box-shadow: var(--cc-shadow-card);
	display: flex;
	flex-direction: column;
	transition: transform var(--cc-transition), box-shadow var(--cc-transition);
}
.cc-card:hover { transform: translateY(-3px); box-shadow: var(--cc-shadow-soft); }

.cc-card__media {
	display: block;
	position: relative;
	width: 100%;
	height: clamp(160px, 18vw, 220px);
	aspect-ratio: 8 / 5;
	overflow: hidden;
	flex-shrink: 0;
	background: linear-gradient(165deg, var(--cc-cream), var(--cc-warm-sand));
}
.cc-card__media .cc-image-placeholder { height: 100%; aspect-ratio: auto; border-radius: 0; }
.cc-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cc-card__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.cc-card--programme { padding-bottom: 1.5rem; }
.cc-card--programme .cc-card__title,
.cc-card--programme .cc-card__text { padding-inline: 1.5rem; }
.cc-card--programme .cc-card__title { margin-top: 1.1rem; margin-bottom: 0.4rem; font-size: 1.0625rem; }
.cc-card--programme .cc-btn,
.cc-card--programme .cc-link-arrow { margin-inline: 1.5rem; margin-top: 0.5rem; }

/* ---------------------------------------------------------------------
   Community Stories — horizontal news carousel
   ------------------------------------------------------------------- */
.cc-stories__head {
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.cc-stories__head .cc-eyebrow { justify-content: center; }
.cc-stories__title {
	font-size: var(--cc-h2);
	margin: 0 0 1.25rem;
}
.cc-stories__see-all {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--cc-font-heading);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cc-dark-brown);
}
.cc-stories__see-all-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	border: 1px solid var(--cc-warm-sand);
	transition: background var(--cc-transition), border-color var(--cc-transition), transform var(--cc-transition);
}
.cc-stories__see-all-icon svg { width: 1.1rem; height: 1.1rem; }
.cc-stories__see-all:hover .cc-stories__see-all-icon {
	background: var(--cc-dark-brown);
	border-color: var(--cc-dark-brown);
	color: var(--cc-cream);
	transform: translate(2px, -2px);
}

/* The viewport clips; the track scrolls horizontally with snap points.
   Native scroll means it works with no JS — arrows are an enhancement. */
.cc-stories__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;            /* Firefox */
	-ms-overflow-style: none;         /* old Edge */
	/* Let cards bleed to the page edge on the right for a "more to come"
	   feel, while keeping the left aligned to the container. */
	margin-inline: calc(-1 * clamp(1.25rem, 5vw, 2.5rem));
	padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.cc-stories__viewport::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.cc-stories__track {
	display: flex;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	padding-bottom: 0.5rem;
}

.cc-story-card {
	flex: 0 0 auto;
	width: clamp(260px, 24vw, 320px);
	scroll-snap-align: start;
}
/* Alternating stagger: odd cards sit high, even cards drop down, giving
   a gentle zigzag rhythm (matches the reference) rather than a strict
   one-directional staircase. Scoped to the carousel track so the
   archive grid stays evenly aligned. */
.cc-stories__track .cc-story-card:nth-child(odd)  { margin-top: 0; }
.cc-stories__track .cc-story-card:nth-child(even) { margin-top: clamp(2rem, 4vw, 3.5rem); }
/* When reused inside the Stories archive grid (index.php), the card
   should fill its grid cell rather than use the carousel's fixed width. */
.cc-card-grid .cc-story-card { width: auto; }
.cc-story-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3.4;
	border-radius: var(--cc-radius-lg);
	overflow: hidden;
	background: linear-gradient(165deg, var(--cc-cream), var(--cc-warm-sand));
	margin-bottom: 1rem;
}
.cc-story-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.cc-story-card__media .cc-image-placeholder { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.cc-story-card:hover .cc-story-card__image { transform: scale(1.04); }
.cc-story-card__date {
	display: block;
	font-size: 0.8125rem;
	color: var(--cc-coffee);
	margin-bottom: 0.5rem;
}
.cc-story-card__title {
	font-size: 1.125rem;
	line-height: 1.25;
	margin: 0;
}
.cc-story-card__title a { color: var(--cc-dark-brown); }
.cc-story-card__title a:hover { color: var(--cc-brown); }

.cc-stories__controls {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.cc-stories__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	border: 1px solid var(--cc-warm-sand);
	background: transparent;
	color: var(--cc-dark-brown);
	cursor: pointer;
	transition: background var(--cc-transition), border-color var(--cc-transition), color var(--cc-transition);
}
.cc-stories__arrow svg { width: 1.25rem; height: 1.25rem; }
.cc-stories__arrow:hover:not(:disabled) {
	background: var(--cc-dark-brown);
	border-color: var(--cc-dark-brown);
	color: var(--cc-cream);
}
.cc-stories__arrow:disabled { opacity: 0.35; cursor: default; }

/* On smaller screens the cards are wide and few are visible, so the
   stagger just creates awkward gaps — flatten it back out. */
@media (max-width: 720px) {
	.cc-stories__track .cc-story-card:nth-child(odd),
	.cc-stories__track .cc-story-card:nth-child(even) { margin-top: 0; }
}

/* ---------------------------------------------------------------------
   12. Founder Story (Section 6)
   ------------------------------------------------------------------- */
.cc-founder { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--cc-warm-sand); }
.cc-founder__inner {
	display: grid;
	grid-template-columns: 0.72fr 1.28fr;
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: start;
}
.cc-founder__portrait {
	border-radius: var(--cc-radius-lg);
	box-shadow: var(--cc-shadow-soft);
	width: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 5;
	max-height: clamp(320px, 34vw, 480px);
}
.cc-founder__heading { font-size: var(--cc-h2); }
.cc-founder__body {
	font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
	line-height: 1.6;
	color: var(--cc-coffee);
	max-width: 56ch;
	margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.cc-founder__quote {
	font-family: var(--cc-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	border-left: 4px solid var(--cc-brown);
	padding-left: 1.25rem;
	margin: 1.5rem 0;
	color: var(--cc-dark-brown);
}

/* Timeline: a vertical connector line threads through ring markers, with
   the year in gold and the milestone in dark brown. */
.cc-timeline { display: flex; flex-direction: column; }
.cc-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: auto 5ch 1fr;
	align-items: center;
	gap: 0 1.25rem;
	padding-block: clamp(0.6rem, 1.2vw, 0.9rem);
}
/* Connector line sits behind the markers, centered on the 14px marker
   column (7px), running the full height of each row. Suppressed above
   the first marker and below the last so the line starts and ends at a
   ring rather than floating past them. */
.cc-timeline__item::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--cc-gold);
	opacity: 0.45;
}
.cc-timeline__item:first-child::before { top: 50%; }
.cc-timeline__item:last-child::before { bottom: 50%; }
.cc-timeline__marker {
	position: relative;
	z-index: 1;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid var(--cc-gold);
	background: var(--cc-warm-sand);
	flex-shrink: 0;
}
.cc-timeline__year {
	font-family: var(--cc-font-heading);
	font-weight: 800;
	font-size: 1.0625rem;
	color: var(--cc-gold);
}
.cc-timeline__milestone {
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--cc-dark-brown);
}

@media (max-width: 900px) {
	.cc-founder__inner { grid-template-columns: 1fr; }
	.cc-founder__portrait { max-width: 360px; }
}

/* ---------------------------------------------------------------------
   13. Get Involved (Section 8)
   ------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   Get Involved — compact icon-tile cards
   ------------------------------------------------------------------- */
.cc-get-involved { padding-block: clamp(2.5rem, 5vw, 4rem); }

.cc-get-involved__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.cc-get-involved__title {
	font-size: var(--cc-h2);
	max-width: 18ch;
	margin: 0;
}
.cc-get-involved__see-all {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--cc-brown);
	white-space: nowrap;
}
.cc-get-involved__see-all:hover { color: var(--cc-dark-brown); }
.cc-get-involved__see-all-icon {
	display: inline-flex;
	transition: transform var(--cc-transition);
}
.cc-get-involved__see-all:hover .cc-get-involved__see-all-icon { transform: translate(2px, -2px); }

.cc-involve-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.cc-involve-card {
	display: flex;
	flex-direction: column;
	background: var(--cc-white);
	border: 1px solid var(--cc-warm-sand);
	border-radius: var(--cc-radius-md);
	padding: clamp(1.1rem, 1.6vw, 1.5rem);
	transition: transform var(--cc-transition), box-shadow var(--cc-transition), border-color var(--cc-transition);
}
a.cc-involve-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--cc-shadow-soft);
	border-color: transparent;
}
/* Featured card sits slightly raised with a stronger shadow. */
.cc-involve-card--featured {
	transform: translateY(-10px);
	box-shadow: var(--cc-shadow-soft);
	border-color: transparent;
}
a.cc-involve-card--featured:hover { transform: translateY(-14px); }

.cc-involve-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 12px;
	background: var(--cc-warm-sand);
	color: var(--cc-brown);
	margin-bottom: 1rem;
}
.cc-involve-card__icon svg { width: 1.375rem; height: 1.375rem; }
.cc-involve-card__title {
	font-size: 1rem;
	line-height: 1.25;
	color: var(--cc-dark-brown);
	margin: 0 0 0.4rem;
}
.cc-involve-card__text {
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--cc-coffee);
	margin: 0;
}

.cc-get-involved__ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 1024px) {
	.cc-involve-grid { grid-template-columns: repeat(3, 1fr); }
	.cc-involve-card--featured { transform: none; } /* stagger looks odd when wrapped */
	a.cc-involve-card--featured:hover { transform: translateY(-4px); }
}
@media (max-width: 620px) {
	.cc-involve-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
	.cc-involve-card__icon { margin-bottom: 1.25rem; }
}

/* ---------------------------------------------------------------------
   14. Donation CTA (Section 9)
   ------------------------------------------------------------------- */
.cc-donation { padding-block: var(--cc-section-pad); background: var(--cc-coffee); color: var(--cc-cream); }
.cc-donation .cc-section-head__title { color: var(--cc-cream); }
.cc-donation__tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.25rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.cc-donation__tier {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	background: rgba(250, 246, 239, 0.08);
	border: 1px solid rgba(250, 246, 239, 0.25);
	border-radius: var(--cc-radius-md);
	padding: 1.5rem;
	transition: background var(--cc-transition), transform var(--cc-transition);
}
.cc-donation__tier:hover { background: rgba(250, 246, 239, 0.16); transform: translateY(-4px); }
.cc-donation__tier-amount {
	font-family: var(--cc-font-heading);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--cc-gold);
}
.cc-donation__tier-desc { font-size: 0.9rem; color: var(--cc-warm-sand); }
.cc-donation__cta { text-align: center; }
.cc-donation__note { color: var(--cc-warm-sand); margin-top: 1rem; font-size: 0.9rem; }

/* ---------------------------------------------------------------------
   15. Final CTA (Section 10)
   ------------------------------------------------------------------- */
.cc-final-cta { padding-block: var(--cc-section-pad); background: var(--cc-charcoal); color: var(--cc-cream); }
/* Optional background image: cover the section and lay a dark overlay
   over it so the white heading, subtext and buttons stay readable. */
.cc-final-cta--has-image {
	position: relative;
	background-image: var(--cc-final-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	isolation: isolate;
}
.cc-final-cta--has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(rgba(20, 16, 12, 0.72), rgba(20, 16, 12, 0.78));
}
.cc-final-cta__inner { text-align: center; max-width: 760px; margin-inline: auto; position: relative; }
.cc-final-cta__heading { color: var(--cc-cream); font-size: var(--cc-h2); }
.cc-final-cta__subtext { color: var(--cc-warm-sand); font-size: 1.1rem; }
.cc-final-cta__ctas { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.cc-final-cta .cc-btn--secondary { background: transparent; color: var(--cc-cream); border-color: rgba(250, 246, 239, 0.4); }
.cc-final-cta .cc-btn--secondary:hover { background: rgba(250, 246, 239, 0.1); }

/* ---------------------------------------------------------------------
   16. Footer (Section 19)
   ------------------------------------------------------------------- */
.cc-footer { background: var(--cc-footer-bg); color: var(--cc-footer-text); padding-block: clamp(3rem, 7vw, 5rem) 2rem; }

.cc-footer__top {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) 2fr;
	gap: clamp(2.5rem, 6vw, 5rem);
	padding-bottom: clamp(2rem, 5vw, 3rem);
	border-bottom: 1px solid rgba(250, 246, 239, 0.15);
}
@media (max-width: 860px) {
	.cc-footer__top { grid-template-columns: 1fr; gap: 2.5rem; }
}

.cc-footer__logo-text {
	font-family: var(--cc-font-heading);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--cc-cream);
	margin: 0 0 0.85rem;
}
.cc-footer__tagline {
	color: var(--cc-warm-sand);
	opacity: 0.85;
	max-width: 34ch;
	margin: 0 0 1.5rem;
}
.cc-footer__subscribe {
	display: flex;
	max-width: 380px;
	border: 1px solid rgba(250, 246, 239, 0.25);
	border-radius: var(--cc-radius-pill);
	padding: 0.3rem 0.3rem 0.3rem 1.1rem;
	gap: 0.5rem;
}
.cc-footer__subscribe-input {
	flex: 1 1 auto;
	background: none;
	border: none;
	color: var(--cc-cream);
	font-size: 0.875rem;
	padding: 0.5rem 0;
}
.cc-footer__subscribe-input::placeholder { color: rgba(250, 246, 239, 0.55); }
.cc-footer__subscribe-input:focus { outline: none; }
.cc-footer__subscribe-btn {
	flex-shrink: 0;
	background: var(--cc-gold);
	color: var(--cc-dark-brown);
	border: none;
	border-radius: var(--cc-radius-pill);
	font-weight: 600;
	font-size: 0.875rem;
	padding: 0.65rem 1.25rem;
	cursor: pointer;
	transition: background var(--cc-transition);
}
.cc-footer__subscribe-btn:hover { background: var(--cc-soft-tan); }

.cc-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: clamp(1.5rem, 4vw, 2.5rem);
}
.cc-footer__title { color: var(--cc-footer-accent); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem; }
.cc-footer__list { display: flex; flex-direction: column; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.cc-footer__list li { width: 100%; display: block; }
.cc-footer__list a, .cc-footer__col a { color: var(--cc-footer-text); opacity: 0.85; display: inline-block; }
.cc-footer__list a:hover, .cc-footer__col a:hover { opacity: 1; color: var(--cc-footer-accent); }
.cc-footer__address { font-style: normal; opacity: 0.85; }
.cc-footer__hours { opacity: 0.7; font-size: 0.9rem; }

.cc-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding-top: 1.5rem;
	font-size: 0.85rem;
	opacity: 0.7;
}
.cc-footer__legal { display: flex; gap: 1.25rem; }
.cc-footer__legal a { color: var(--cc-footer-text); }
.cc-footer__social { display: flex; gap: 0.85rem; }
.cc-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid rgba(250, 246, 239, 0.25);
	color: var(--cc-footer-text);
	transition: border-color var(--cc-transition), color var(--cc-transition);
}
.cc-footer__social-link:hover {
	border-color: var(--cc-footer-text);
	color: var(--cc-cream);
}

/* ---------------------------------------------------------------------
   17. Generic page header/content (About, Get Support, Contact, etc.)

   Deliberately compact: title + one optional line of descriptive
   subtitle, nothing else. Two variants, sharing the same dark-brown/
   cream/gold palette:
   - Flat block (no featured image): full-width solid colour.
   - Split panel (featured image set): solid colour text panel + the
     real photo filling the other half. The photo is a genuine <img>
     (get_the_post_thumbnail() in page.php), not a CSS background-image,
     so it stays fully vibrant instead of getting dimmed under an
     overlay.
   ------------------------------------------------------------------- */
.cc-page-header {
	position: relative;
	background: var(--cc-dark-brown);
	color: var(--cc-cream);
	isolation: isolate;
}

.cc-page-header__title {
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	text-transform: uppercase;
	letter-spacing: -0.005em;
	font-weight: 800;
	line-height: 1.05;
	color: var(--cc-cream);
	margin: 0;
}
.cc-page-header__title-accent { color: var(--cc-gold); }
.cc-page-header__subtitle {
	font-size: 1rem;
	color: var(--cc-warm-sand);
	max-width: 42ch;
	margin: 0.6rem 0 0;
}

/* --- Flat variant (no featured image) --- */
.cc-page-header:not(.cc-page-header--split) {
	padding-block: clamp(2rem, 4.5vw, 3rem);
}
.cc-page-header:not(.cc-page-header--split) .cc-container {
	padding-inline-start: var(--cc-content-inset-left);
}
.cc-page-header:not(.cc-page-header--split) .cc-page-header__title {
	font-size: clamp(2rem, 3.8vw, 3rem);
	max-width: 24ch;
}
.cc-page-header:not(.cc-page-header--split) .cc-page-header__subtitle {
	max-width: 55ch;
}

/* --- Split variant (featured image set) --- */
.cc-page-header--split {
	/* --cc-header-gutter / --cc-header-gutter-left now live in :root
	   (section 1) — shared with .cc-page-content below so the hero
	   text and the content column always start at the same x-position.
	   Transparent so the page's own cream background shows in the side
	   gutters — the panel (not the outer header) owns the dark
	   background now, matching the CAF reference where the whole block
	   sits inset from the viewport edge rather than full-bleed. */
	background: transparent;
	/* The flat variant gets its top/bottom breathing room from
	   .cc-page-header:not(.cc-page-header--split)'s padding-block
	   below — this variant never had an equivalent, so the panel/photo
	   sat flush against the sticky nav above it with no gap. Shrinking
	   the grid's min-height (above) made this more visible since the
	   block itself is shorter now. */
	padding-block: clamp(1.5rem, 3vw, 2.25rem) 0;
}
.cc-page-header--split .cc-page-header__title {
	font-size: clamp(2rem, 3.5vw, 2.75rem);
}
.cc-page-header--split .cc-page-header__subtitle {
	font-size: 0.95rem;
	margin-top: 0.5rem;
}
.cc-page-header--split .cc-page-header__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	/* Space on both sides, like the reference — the grid no longer runs
	   edge-to-edge; it's inset from the viewport edges. Left gets 40%
	   more than right so more of the left flourish shows past the
	   panel's edge. */
	margin-inline-start: var(--cc-header-gutter-left);
	margin-inline-end: var(--cc-header-gutter);
	/* A floor, not a target — the larger title above now drives most of
	   the real height on its own. */
	min-height: clamp(90px, 6vw, 120px);
}
.cc-page-header__panel {
	display: flex;
	align-items: center;
	position: relative;
	background: var(--cc-dark-brown);
}
.cc-page-header__panel-inner {
	padding-block: clamp(0.9rem, 1.6vw, 1.25rem);
	padding-inline-start: clamp(1.25rem, 5vw, 3rem);
	padding-inline-end: clamp(1.25rem, 3vw, 2rem);
	max-width: 640px;
}

.cc-page-header__media {
	position: relative;
	overflow: hidden;
	/* Without this, .cc-page-header__media-img's height:100% resolves
	   against an auto-height grid row, so the ROW HEIGHT ends up being
	   driven by the photo's own intrinsic aspect ratio — the min-height
	   above is only a floor and gets overridden by a tall/portrait
	   photo. Setting an explicit desktop ratio here (mirrors the
	   existing 4/3 mobile ratio below) is what actually caps the
	   header's height regardless of what photo is uploaded. */
	aspect-ratio: 21 / 9;
}
.cc-page-header__media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* object-fit:cover crops from the center by default. Anchoring to
	   'top' instead keeps faces/heads in frame — the 21/9 desktop
	   aspect-ratio above is short and wide, so a center-anchored crop
	   was slicing off the top of people's heads in every uploaded
	   photo. If a future photo is composed with its subject lower in
	   frame, this may need to become a per-image ACF focal-point value
	   instead of a fixed 'top'. */
	object-position: top;
	display: block;
}

/* Flourish — horizontal gold bars centered vertically at the block's
   outer edges (not anchored to the bottom), left bar longer (wider)
   than right for asymmetry. z-index sits BELOW the grid (which is
   explicitly z-index:1 above) so the bars render behind the title/
   photo instead of cutting across the text. Anchored to the outer
   split header, flush with its own left/right edges so they sit in
   the gutter created by the grid's margin-inline (and slightly overlap
   the panel/photo corner, echoing the reference's accent blocks). */
.cc-page-header--split::before,
.cc-page-header--split::after {
	content: '';
	position: absolute;
	top: 50%;
	height: clamp(42px, 4.8vw, 60px);
	background: var(--cc-gold);
	transform: translateY(-50%);
	z-index: 0;
}
.cc-page-header--split::before {
	left: 0;
	width: clamp(98px, 11.2vw, 168px);
}
.cc-page-header--split::after {
	right: 0;
	width: clamp(45px, 5vw, 80px);
}

@media (max-width: 900px) {
	.cc-page-header--split .cc-page-header__grid {
		grid-template-columns: 1fr;
		min-height: auto;
		/* Desktop uses an intentionally larger left gutter to align with
		   the gold flourish. On mobile the flourish is hidden and the
		   grid is single-column, so that asymmetry just reads as the
		   whole panel being pushed right — collapse both sides to the
		   normal small container gutter. */
		margin-inline-start: clamp(1.25rem, 5vw, 2rem);
		margin-inline-end: clamp(1.25rem, 5vw, 2rem);
	}
	.cc-page-header__media {
		aspect-ratio: 4 / 3;
	}
	.cc-page-header--split::before,
	.cc-page-header--split::after {
		display: none;
	}
}

.cc-page-content {
	padding-block: clamp(2.5rem, 6vw, 4rem);
	/* Same left inset as the hero text above (--cc-content-inset-left,
	   see section 1) — this is what actually fixes the alignment; the
	   width model below only works because this starting edge is fixed. */
	padding-inline-start: var(--cc-content-inset-left);
	padding-inline-end: var(--cc-content-inset-right);
}

/* Width model: left-anchored, not centered. Previously every block was
   individually centred (margin-inline: auto) within its own max-width —
   which meant a 760px paragraph and a 1100px "wide" block landed at
   *different* x-positions from each other, and neither matched the
   hero's fixed left inset above them. Removing the auto-centring means
   every block starts at the same padded left edge; its width class
   (default/alignwide/alignfull) only controls how far right it extends. */
.cc-page-content > * {
	max-width: 760px;
}
.cc-page-content > .alignwide {
	max-width: 1100px;
}
.cc-page-content > .alignfull {
	/* Fills the full available width within .cc-page-content's own
	   padding — i.e. reaches exactly the hero's left/right edges above
	   it, since both now share --cc-content-inset-left/-right. This is
	   NOT a true edge-to-edge viewport breakout (nothing on the site
	   currently needs that); it's "as wide as the padded column
	   allows," which is what makes a pattern like What We Do — Accordion
	   actually reach the hero's edges instead of stopping short at a
	   narrower 1100px "wide" cap. */
	max-width: none;
}

/* Plain intro paragraphs (default-width children, no align class) run
   as two balanced columns on desktop instead of one long 760px column.
   .alignwide/.alignfull children — the Award Card and the What We Do
   Accordion — opt back OUT with column-span:all so they still render
   as single full-measure blocks instead of getting sliced across the
   column break. Matches the .cc-page-header--split breakpoint (900px)
   so the header and content column change register together. */
@media (min-width: 901px) {
	.cc-page-content {
		column-count: 2;
		column-gap: clamp(2rem, 4vw, 3.5rem);
	}
	.cc-page-content > .alignwide,
	.cc-page-content > .alignfull {
		column-span: all;
	}
}

.cc-page-content h2 { font-size: var(--cc-h3); margin-top: 2em; }
.cc-page-content p { font-size: 1.05rem; color: var(--cc-coffee); }

/* ---- Core block styling (Section 5's "no page builder" brief means
   editors compose pages from core Gutenberg blocks — these rules make
   every block an editor reaches for look intentional, not default-WP.) */

/* The global reset (section 2) zeroes list-style everywhere for the
   theme's own custom markup (nav menus, card grids, etc.) — restore
   real bullets/numbers specifically inside editor-authored content. */
.cc-page-content ul { list-style: disc; padding-left: 1.4em; margin-bottom: 1em; }
.cc-page-content ol { list-style: decimal; padding-left: 1.4em; margin-bottom: 1em; }
.cc-page-content li { margin-bottom: 0.4em; }

.cc-page-content blockquote,
.cc-page-content .wp-block-quote {
	font-family: var(--cc-font-heading);
	font-size: 1.4rem;
	font-weight: 700;
	border-left: 4px solid var(--cc-brown);
	padding-left: 1.25rem;
	margin: 2em 0;
	color: var(--cc-dark-brown);
}
.cc-page-content .wp-block-quote cite {
	display: block;
	font-family: var(--cc-font-body);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--cc-brown);
	margin-top: 0.5rem;
	font-style: normal;
}

.cc-page-content .wp-block-image img,
.cc-page-content figure img {
	border-radius: var(--cc-radius-md);
	box-shadow: var(--cc-shadow-card);
}
.cc-page-content .wp-block-image figcaption {
	color: var(--cc-coffee);
	font-size: 0.9rem;
	margin-top: 0.6rem;
}

/* Split Intro / Split Intro Reversed patterns (inc/patterns.php) — a
   real uploaded photo can be any shape (portrait, ultra-wide, huge
   file). Without a fixed ratio, an oversized portrait image forces the
   whole row to its height, leaving the shorter text column stranded in
   the middle of a lot of empty space (vertical-align: center). Cropping
   every pattern image to the same 4:5 ratio, matching the treatment
   already used for the homepage hero/portrait images, keeps the layout
   balanced regardless of what gets uploaded. */
.cc-pattern-split .wp-block-image img {
	aspect-ratio: 4 / 5;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cc-page-content .wp-block-gallery {
	gap: var(--cc-gap);
}
.cc-page-content .wp-block-gallery img {
	border-radius: var(--cc-radius-md);
}

.cc-page-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	border-radius: var(--cc-radius-pill);
	padding: 0.9rem 1.6rem;
	font-weight: 700;
	font-size: 0.95rem;
	background: var(--cc-dark-brown);
	color: var(--cc-cream);
	transition: transform var(--cc-transition), background var(--cc-transition);
}
.cc-page-content .wp-block-button__link:hover {
	background: var(--cc-coffee);
	transform: translateY(-2px);
}
.cc-page-content .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--cc-dark-brown);
	border: 2px solid var(--cc-brown);
}

/* Mobile: when buttons wrap to a stacked layout, make them full-width
   and centered instead of each shrinking to its own text width — two
   pills of different widths both left-aligned reads as unintentional,
   not as a deliberate stacked CTA. */
@media (max-width: 600px) {
	.cc-page-content .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.cc-page-content .wp-block-button {
		width: 100%;
	}
	.cc-page-content .wp-block-button__link {
		justify-content: center;
		width: 100%;
	}
}

.cc-page-content .wp-block-columns {
	gap: var(--cc-gap);
}

/* Stat Row pattern (inc/patterns.php) — large gold numbers, quiet labels */
.cc-pattern-stat-row {
	text-align: center;
}
.cc-pattern-stat h3 {
	font-family: var(--cc-font-heading);
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--cc-gold);
	margin-bottom: 0.25rem;
}
.cc-pattern-stat p {
	font-size: 0.95rem;
	color: var(--cc-coffee);
}

/* Mission Statement pattern (inc/patterns.php) — the text itself is
   styled by the existing .cc-mission__statement / .cc-mission__support
   rules (section 9, shared with the homepage Mission block); this only
   adds the width/centering/spacing since the pattern isn't wrapped in
   the homepage's own <section class="cc-mission">. */
.cc-mission-pattern {
	max-width: 920px;
	margin-inline: auto;
	padding-block: clamp(2rem, 5vw, 3.5rem);
	text-align: center;
}

/* Impact stats card — dark card echoing the Neighbourly impact board
   design, sized more compactly for use inside a page column rather
   than as its own full-width feature.

   Every text element gets an explicit color here rather than relying
   on inheritance from .cc-impact-card's `color: var(--cc-cream)`.
   These are <p>/<h3> tags rendered inside .cc-page-content, and rules
   like .cc-page-content p { color: var(--cc-coffee); } are the same
   specificity as a plain element selector but come later in the
   cascade — so they were silently overriding the inherited cream
   color and making the eyebrow/label text nearly invisible against
   the dark background. Explicit .cc-page-content .cc-impact-card__*
   overrides win outright instead of depending on source order. */
.cc-impact-card {
	background: var(--cc-dark-brown);
	border-radius: var(--cc-radius-lg);
	padding: clamp(1.5rem, 4vw, 2rem);
	color: var(--cc-cream);
	/* column-span:all elements break out of the 2-column intro-paragraph
	   flow (see the column-count:2 rule above) but don't inherit any
	   gap from it — the card landed flush against the paragraph column
	   above with zero breathing room. Explicit top margin fixes it
	   regardless of how tall/short the two paragraph columns end up. */
	margin-top: clamp(2rem, 5vw, 3rem);
}
.cc-impact-card__eyebrow,
.cc-page-content .cc-impact-card__eyebrow {
	font-family: var(--cc-font-heading);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	color: var(--cc-warm-sand);
	margin: 0 0 1.25rem;
	text-transform: none;
}
.cc-impact-card__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 1.5rem;
	margin-bottom: 1.25rem;
}
.cc-impact-card__stat {
	flex: 1 1 40%;
	min-width: 120px;
}
.cc-impact-card__value,
.cc-page-content .cc-impact-card__value {
	font-family: var(--cc-font-heading);
	font-weight: 800;
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	color: var(--cc-cream);
	margin: 0 0 0.15rem;
	line-height: 1.1;
}
.cc-impact-card__label,
.cc-page-content .cc-impact-card__label {
	font-size: 0.8rem;
	color: var(--cc-warm-sand);
	margin: 0;
}
.cc-impact-card .wp-block-buttons {
	margin-top: 0.5rem;
}
.cc-impact-card .wp-block-button__link,
.cc-page-content .cc-impact-card .wp-block-button__link {
	background: transparent;
	color: var(--cc-cream);
	border: 1px solid rgba(250, 246, 239, 0.4);
	font-size: 0.85rem;
	padding: 0.6rem 1.1rem;
}
.cc-impact-card .wp-block-button__link:hover,
.cc-page-content .cc-impact-card .wp-block-button__link:hover {
	background: rgba(250, 246, 239, 0.1);
}

/* What We Do accordion (inc/patterns.php) — core Details block, styled
   to match the brand instead of default browser disclosure markers. */
.cc-page-content .wp-block-details {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border-top: 1px solid var(--cc-warm-sand);
	padding-block: 1rem;
}
.cc-page-content .wp-block-details + .wp-block-details {
	border-top: none;
}
.cc-page-content .wp-block-details:last-of-type {
	border-bottom: 1px solid var(--cc-warm-sand);
	margin-bottom: 2rem;
}
.cc-page-content .wp-block-details summary {
	display: block;
	width: 100%;
	box-sizing: border-box;
	list-style: none;
	cursor: pointer;
	font-family: var(--cc-font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--cc-dark-brown);
	padding-right: 2rem;
	position: relative;
}
.cc-page-content .wp-block-details summary::-webkit-details-marker {
	display: none;
}
.cc-page-content .wp-block-details summary::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 0;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--cc-gold);
	transition: transform var(--cc-transition);
}
.cc-page-content .wp-block-details[open] summary::after {
	content: '+';
	transform: rotate(45deg);
}
.cc-page-content .wp-block-details p {
	margin-top: 0.75rem;
	color: var(--cc-coffee);
}

.cc-page-content hr.wp-block-separator {
	border: none;
	border-top: 1px solid var(--cc-warm-sand);
	margin-block: 2.5rem;
}

.cc-main--archive .cc-page-header { background: transparent; padding-bottom: 0; }
.cc-main--archive .cc-card-grid { padding-block: clamp(2rem, 5vw, 3rem) clamp(3rem, 6vw, 5rem); }
.cc-pagination { text-align: center; padding-bottom: 3rem; }

/* ---------------------------------------------------------------------
   18. Forms (Section 15) — calm, simple, accessible
   ------------------------------------------------------------------- */
input, textarea, select {
	font-family: inherit;
	font-size: 1rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid var(--cc-soft-tan);
	border-radius: 12px;
	background: var(--cc-white);
	width: 100%;
}
label { display: block; font-weight: 600; margin-bottom: 0.4rem; color: var(--cc-dark-brown); }

input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 2px solid var(--cc-gold);
	outline-offset: 2px;
	border-color: var(--cc-gold);
}

/* Native Volunteer/Contact forms — see inc/forms.php. Wraps the plain
   input/label styling above with field spacing, a submit button that
   matches .cc-btn, and a success/error notice driven by the ?cc_form=
   query var the admin-post.php redirect appends. */
.cc-form {
	max-width: 620px;
	margin-top: 1.5rem;
}
.cc-form__row {
	margin-bottom: 1.25rem;
}
.cc-form__row--two-up {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
@media (max-width: 600px) {
	.cc-form__row--two-up {
		grid-template-columns: 1fr;
	}
}
.cc-form textarea {
	resize: vertical;
	min-height: 140px;
}
.cc-form__required {
	color: var(--cc-coffee);
	font-weight: 400;
}
/* Honeypot — visually hidden but still in the tab order of nothing
   (tabindex="-1" in the markup) and still readable by screen readers'
   accessibility tree unless we remove it from that too. Off-screen
   positioning (not display:none) keeps it "visible" to unsophisticated
   bots that only check for display/visibility before filling forms. */
.cc-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.cc-form__submit {
	margin-top: 0.5rem;
}
.cc-form__notice {
	padding: 1rem 1.25rem;
	border-radius: var(--cc-radius-md);
	margin-bottom: 1.5rem;
	font-weight: 600;
}
.cc-form__notice--success {
	background: rgba(122, 158, 122, 0.15);
	color: #2f5d34;
	border: 1px solid rgba(122, 158, 122, 0.4);
}
.cc-form__notice--error {
	background: rgba(200, 90, 90, 0.12);
	color: #8a3232;
	border: 1px solid rgba(200, 90, 90, 0.35);
}

/* ---------------------------------------------------------------------
   19. Mobile-wide tidy-up
   ------------------------------------------------------------------- */
@media (max-width: 600px) {
	.cc-donation__tiers { grid-template-columns: 1fr 1fr; }
}
/* Mobile: the content column's left inset (--cc-content-inset-left) is
   sized to align with the desktop split-header flourish. On phones that
   inset dwarfs the right gutter and tilts the whole column right — even
   it out to a normal small gutter on both sides. */
@media (max-width: 900px) {
	.cc-page-content {
		padding-inline-start: clamp(1.25rem, 5vw, 2rem);
		padding-inline-end: clamp(1.25rem, 5vw, 2rem);
	}
	.cc-page-header:not(.cc-page-header--split) .cc-container {
		padding-inline-start: clamp(1.25rem, 5vw, 2rem);
	}
}