/*
Theme Name: Camden Healthy Start
Theme URI: https://camdenhealthystart.org
Description: Custom child theme for Camden Healthy Start — built on Ollie Pro.
Author: Johns & Taylor
Author URI: https://johnsandtaylor.com
Template: ollie
Version: 1.0.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: block-patterns, block-styles, full-site-editing, wide-blocks
Text Domain: ollie-child
*/

/* ============================================
   WP 7.0 BLOCK-GAP RESTORATION  (load-bearing)
   --------------------------------------------
   WP 7.0 stopped emitting Ollie's NAMED spacing
   presets (small/medium/large) once this child
   theme declared its own numeric spacingSizes
   scale (10–80) with spacingScale.steps:0. That
   leaves --wp--preset--spacing--medium undefined.
   Ollie's blockGap = var:preset|spacing|medium,
   which the child inherits, so --wp--style--
   block-gap resolves to nothing and every gap
   relying on WP's default block-gap collapses to
   zero (cards/blocks/flex groups go flush).

   Fix: re-declare --wp--preset--spacing--medium
   at :root using Ollie's exact original value.
   theme.json stays untouched. Same root cause
   was fixed on TRC and EVA — see Resiliency
   Center CLAUDE.md gotcha #10 for full context.

   IMPORTANT: After editing, flush Hummingbird
   cache + hard-refresh. Stale cache repeatedly
   masked this fix on TRC during debugging.
   ============================================ */

:root {
	--wp--preset--spacing--medium: clamp(1.5rem, 4vw, 2rem);
}

/* Paired rule: restoring `medium` re-activates WP's default
   :where(.is-layout-constrained) > * + * top-margin between
   direct children of the post-content wrapper. Interior pages
   stack full-bleed sections (strap, hero, section breakers)
   that self-pad and are meant to butt flush. Zero the seam
   wherever an .alignfull section sits on either side.
   Targets both wrapper classes (.entry-content is the active
   one on this site per functions.php § 4d; .wp-block-post-content
   covered as a belt-and-suspenders fallback). */
.entry-content > .alignfull + *,
.entry-content > * + .alignfull,
.wp-block-post-content > .alignfull + *,
.wp-block-post-content > * + .alignfull {
	margin-block-start: 0;
}

/* First-child gap-killer: WP's constrained-layout rule also injects
   margin-block-start on the FIRST child of the content wrapper.
   That puts ~24-32px of dead space between the site header and
   the page's first block (almost always a hero on this site).
   Hero patterns own their internal padding; no external margin needed. */
.entry-content > :first-child,
.wp-block-post-content > :first-child {
	margin-block-start: 0;
}

/* The actual header→hero gap on this site: <main> itself is a non-first
   child of .wp-site-blocks (header template part is first), and WP's
   is-layout-flow rule injects margin-block-start on every non-first
   child of a flow container. The :first-child zero rule doesn't fire
   for <main>. Patch directly: <main> should always butt against the
   site header. Specificity 0,1,1 (main.wp-block-group) beats WP's
   :root :where(.is-layout-flow) > * (0,1,0). */
main.wp-block-group {
	margin-block-start: 0;
}

/* Homepage seams: the front-page template (front-page.html) is a flat stack —
   header part, then the section patterns (hero, stats, how-we-help, gallery,
   cta, badge), then footer part — all direct children of .wp-site-blocks, NOT
   wrapped in .entry-content/<main>. So the rules above don't reach them, and
   restoring `medium` re-activates WP's root flow-layout block-gap (~1.5–2rem)
   between every section. These are self-padded full-bleed bands meant to butt
   flush (like the hero), so zero the gap between all top-level children on the
   homepage only. The sections live inside the <main> wrapper (constrained
   layout), so target both that wrapper's children and the .wp-site-blocks
   seams (header→main→footer). Scoped to body.home and beats WP's :root
   :where() block-gap rules on specificity; interior pages keep their rhythm. */
body.home .wp-site-blocks > * + *,
body.home main.wp-block-group > * + * {
	margin-block-start: 0;
}

/* Kill WP core's default `margin-bottom: 1.75em` on .wp-block-columns.
   WP applies this via :where(.wp-block-columns) (0-specificity), and
   when patterns stack two columns blocks with their own inline
   margin-top, the larger of the two collapsed margins wins. That makes
   the vertical gap between rows of tiles always *larger* than the
   horizontal column-gap, even when both are specified as the same
   spacing token. Killing it lets the pattern's inline margin-top alone
   control inter-row spacing — symmetric with column-gap by construction.
   No !important required: .wp-block-columns (0,1,0) beats :where() (0,0,0). */
.wp-block-columns {
	margin-bottom: 0;
}

/* ============================================
   CUSTOM CSS — BEYOND THEME.JSON
   ============================================ */

/* --- Hero sections --- */
.chs-hero-home {
	background: #0179B3;
	color: #fff;
	padding: 6rem 0;
}

.chs-hero-home h1,
.chs-hero-home h2 {
	color: #fff;
}

.chs-hero-home p {
	opacity: 0.9;
}

.chs-page-hero {
	background: #0179B3;
	color: #fff;
	padding: 4rem 0 2.5rem;
}

.chs-page-hero h1 {
	color: #fff;
}

.chs-page-hero p {
	opacity: 0.85;
}

/* Interior page heroes reuse the homepage's framed featured image (.chs-hero-photo).
   The homepage's drop shadow is scoped to the video-hero block, so re-declare it
   here for the framed photo wherever it appears on interior pages. Same value as
   blocks/video-hero/style.css, so the homepage is unaffected (it wins on specificity). */
.chs-hero-photo img {
	box-shadow: 0 22px 48px rgba(1, 30, 48, 0.45);
	display: block;
}

/* --- Stats bar --- */
.chs-stats-bar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	text-align: center;
	padding: 2.5rem 0;
}

.chs-stats-bar .stat-number {
	font-family: bookmania, 'DM Serif Display', Georgia, serif;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	color: #0179B3;
	line-height: 1;
}

.chs-stats-bar .stat-label {
	font-size: 1rem;
	color: #4A5568;
	margin-top: 0.25rem;
}

/* 2025 Impact stats — desktop-only white dividers between stat columns.
   Gated at 782px to match WP's column-stacking breakpoint, so the lines
   only appear when the columns sit side by side (hidden once stacked). */
@media (min-width: 782px) {
	.chs-stats-columns .wp-block-column + .wp-block-column {
		border-left: 1px solid rgba(255, 255, 255, 0.4);
	}
}

/* --- Card grids --- */
.chs-card-grid {
	display: grid;
	gap: 1.5rem;
}

.chs-card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.chs-card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.chs-card-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* --- Service cards --- */
.chs-service-card {
	background: #fff;
	border-radius: 8px;
	padding: 2rem;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chs-service-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.chs-service-card h3 {
	margin-bottom: 0.5rem;
}

/* --- Section backgrounds --- */
.chs-section-alt {
	background: #fff;
}

.chs-section-tinted {
	background: #E07D30;
	color: #fff;
}

.chs-section-tinted h2,
.chs-section-tinted h3 {
	color: #fff;
}

.chs-section-tinted p {
	opacity: 0.9;
}

/* --- CTA band (green gradient) --- */
.chs-cta-band {
	background: linear-gradient(135deg, #7AAC2B, #5a8a1f);
	color: #fff;
	text-align: center;
	padding: 4rem 0;
}

.chs-cta-band h2 {
	color: #fff;
}

/* --- Button variants --- */
.chs-btn-primary {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 8px;
	font-family: gibson, 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 600;
	background: #7AAC2B;
	color: #fff;
	text-decoration: none;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
}

.chs-btn-primary:hover {
	background: #5a8a1f;
	transform: translateY(-1px);
	color: #fff;
}

.chs-btn-outline {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 8px;
	font-family: gibson, 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 600;
	background: transparent;
	color: #fff;
	text-decoration: none;
	border: 2px solid #fff;
	transition: all 0.3s ease;
	cursor: pointer;
}

.chs-btn-outline:hover {
	background: rgba(255,255,255,0.1);
	color: #fff;
}

.chs-btn-accent {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 8px;
	font-family: gibson, 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 600;
	background: #E07D30;
	color: #fff;
	text-decoration: none;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
}

.chs-btn-accent:hover {
	background: #C96B25;
	transform: translateY(-1px);
	color: #fff;
}

/* --- Service sub-page sidebar --- */
.chs-service-sidebar {
	/* Soft orange/peach tint — matches the homepage "How We Help"
	   section background (.chs-how-we-help). */
	background: #FAE8DA;
	border-radius: 12px;
	padding: 2rem;
	/* Establish a container so the contact email can size itself to the
	   sidebar width (see mailto rule below) and stay on one line. */
	container-type: inline-size;
}

.chs-service-sidebar h4 {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #4A5568;
	margin-bottom: 1rem;
}

.chs-service-sidebar a {
	display: block;
	padding: 0.75rem 0;
	border-bottom: 1px solid #E2E8F0;
	color: #1A2B3D;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.3s ease;
}

.chs-service-sidebar a:hover,
.chs-service-sidebar a.active {
	color: #0179B3;
}

/* The last menu link sits directly above the section divider (the <hr>
   separator), so its own bottom border is a redundant double line. */
.chs-service-sidebar p:has(+ .wp-block-separator) a {
	border-bottom: none;
	padding-bottom: 0;
}

/* Contact variant of the peach strip (About Us > "Visit Us"). It borrows the
   sidebar's look but holds an address, not a nav list, so the rules that turn
   sidebar anchors into full-width bordered rows are reset here. Link colour is
   Primary Dark for contrast on the peach tint (5.9:1). */
.chs-service-sidebar.chs-sidebar-contact a {
	display: inline;
	padding: 0;
	border-bottom: 0;
	color: #015E8F;
	font-weight: inherit;
	text-decoration: underline;
}

.chs-service-sidebar.chs-sidebar-contact a:hover,
.chs-service-sidebar.chs-sidebar-contact a:focus {
	color: #1A2B3D;
}

/* "Contact Us" subhead — match the "Our Services" eyebrow (h4): small
   uppercase gray label. font-size !important beats the block's inline
   1.125rem. #4A5568 on the peach background is 6.4:1 (AA-safe). */
.chs-service-sidebar h3 {
	/* Sans-serif to match the "Our Services" eyebrow — h1–h3 otherwise
	   inherit the serif display font. */
	font-family: gibson, "DM Sans", "Segoe UI", Roboto, sans-serif;
	font-size: 1rem !important;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #4A5568;
}

/* Tighten the Our Services menu so the five items read as one related
   group: drop the 2rem inter-paragraph block-gap margin and use compact
   link padding instead of the default 0.75rem. */
/* `*=` not `^=`: TranslatePress prefixes translated URLs (/es/services/…),
   which silently un-matched these rules on the Spanish site and restored the
   2rem gaps + 0.75rem padding (bug found Aug 26 2026). */
.chs-service-sidebar p:has(> a[href*="/services/"]) {
	margin-top: 0;
}

.chs-service-sidebar a[href*="/services/"] {
	padding: 0.4rem 0;
}

/* Divider between the menu and Contact Us — inverted from the light tint
   to a dark slate gray so it clearly separates the two sections against
   the peach background. */
.chs-service-sidebar hr.wp-block-separator {
	/* Fine 1px gray line — drop the chunky 2px border and let a 1px
	   background be the whole line. !important beats WordPress's
	   theme.json color utility classes, which are emitted !important. */
	border: 0 !important;
	height: 1px !important;
	background-color: #94A3B8 !important;
	color: #94A3B8 !important;
}

.chs-service-sidebar .sidebar-contact {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 2px solid #0179B3;
}

/* --- Gallery grid --- */
.chs-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.chs-gallery-grid img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 8px;
}

/* --- Video grid --- */
.chs-video-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* --- Event list --- */
.chs-event-item {
	display: flex;
	gap: 1.5rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid #E2E8F0;
}

.chs-event-date {
	text-align: center;
	min-width: 60px;
}

.chs-event-date .month {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #E07D30;
	font-weight: 600;
}

.chs-event-date .day {
	font-family: bookmania, 'DM Serif Display', Georgia, serif;
	font-size: 2rem;
	font-weight: 700;
	color: #0179B3;
	line-height: 1;
}

/* --- Team grid --- */
.chs-team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	text-align: center;
}

.chs-team-grid img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 0.75rem;
}

/* --- Program staff grid (About page) --- */
.chs-staff-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 2.25rem 1.5rem;
	align-items: start;
}

/* Neutralize WP flow-layout vertical margins on grid items */
.chs-staff-grid > * {
	margin-block: 0;
}

.chs-staff-card {
	text-align: center;
}

.chs-staff-grid .wp-block-image {
	margin: 0 auto 0.85rem;
}

.chs-staff-grid .wp-block-image img {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	margin: 0 auto;
}

.chs-staff-name {
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 0.15rem;
	color: #1A2B3D;
}

.chs-staff-title {
	font-size: 1rem;
	line-height: 1.35;
	color: #4A5568;
	margin: 0;
}

@media (max-width: 1024px) {
	.chs-staff-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
	.chs-staff-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
}

/* --- Footer --- */
.chs-footer {
	background: #0179B3;
	color: #fff;
	padding: 4rem 0 2rem;
}

.chs-footer h4 {
	color: #fff;
	font-size: 1rem;
	margin-bottom: 1rem;
}

.chs-footer a {
	color: rgba(255,255,255,0.8);
	text-decoration: none;
	transition: color 0.3s ease;
}

.chs-footer a:hover {
	color: #fff;
}

/* Tighten footer link lists — override the theme's default block-gap
   (~2rem) that was spacing these menu items far apart. */
.chs-footer-links > p {
	margin-block-start: 0.5rem;
	margin-bottom: 0;
	line-height: 1.4;
}

.chs-footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding-top: 1.5rem;
	margin-top: 2rem;
	font-size: 13px;
	opacity: 0.8;
}

/* Lower-footer legal line (rendered by the [chs_footer_legal]
   shortcode in parts/footer.html) — © year is computed
   server-side so it never goes stale. */
.chs-footer-legal {
	color: rgba(255,255,255,0.6);
	font-size: 0.8125rem;
}
.chs-footer-legal a {
	color: rgba(255,255,255,0.7);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.3s ease;
}
.chs-footer-legal a:hover,
.chs-footer-legal a:focus-visible {
	color: #fff;
}

/* --- Site Header --- */
.chs-site-header {
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
	z-index: 900;
	min-height: 72px;
	display: flex;
	align-items: center;
}

/* --- Navigation: link padding per V3 (8px 14px, 6px radius), 16px font per Karl V2 review --- */
.chs-main-nav .wp-block-navigation-item a.wp-block-navigation-item__content {
	padding: 8px 14px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 500;
	transition: all 0.2s;
}

.chs-main-nav .wp-block-navigation-item a.wp-block-navigation-item__content:hover {
	color: #0179B3;
	background: #F5F8FA;
}

/* --- Navigation CTA button --- */
.chs-nav-cta-link a.wp-block-navigation-item__content,
.chs-nav-cta-link a.wp-block-navigation-item__content:hover {
	background: #7AAC2B !important;
	color: #fff !important;
	padding: 8px 14px !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	transition: opacity 0.3s ease;
}

.chs-nav-cta-link a.wp-block-navigation-item__content:hover {
	opacity: 0.9;
}

/* --- Navigation submenu / dropdown --- */
.chs-main-nav .wp-block-navigation__submenu-container {
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #fff;
	min-width: 200px;
	padding: 6px 0;
	border-radius: 8px;
	/* Clip the full-width item hover/current highlight to the rounded corners so
	   the first/last item's rollover state doesn't poke square corners past the
	   dropdown's radius. WP 7.0 core forces `overflow:visible` on the OPEN submenu
	   (`[aria-expanded="true"] ~ container`, specificity 0,5,0) to let nested
	   flyouts escape — we have none, so override it here. (Does not clip the
	   container's own outset box-shadow.) */
	overflow: hidden !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	border: none;
	z-index: 100;
}

/* Ensure the parent <li> establishes a positioning context */
.chs-main-nav .wp-block-navigation-item.has-child {
	position: relative;
}

/* Submenu list items: stack vertically, full width, no inherited flex */
.chs-main-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Submenu links: full-width clickable rows, override Ollie's inline padding */
.chs-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item a.wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 10px 18px !important;
	border-radius: 0;
	font-size: 14px;
	font-weight: 500;
	color: #1A2B3D;
	text-decoration: none;
	white-space: nowrap;
}

.chs-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item a.wp-block-navigation-item__content:hover,
.chs-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item a.wp-block-navigation-item__content:focus-visible {
	background: #F5F8FA;
	color: #0179B3;
	text-decoration: none;
}

/* --- Language Toggle (custom shortcode, see functions.php § 4b) --- */
/* Strip inline border-left and padding-left from header.html — we replace
   them with a pseudo-element divider for consistent height across toggles */
.chs-lang-toggle,
.chs-search-toggle {
	border-left: 0 !important;
	padding-left: 0 !important;
	align-items: center;
	gap: 10px !important;
	/* Cancel most of the parent's 24px flex gap so the divider sits ~10px
	   from the previous element — matches the 10px gap inside */
	margin-left: -14px !important;
}

/* Pseudo-element divider — fixed 20px height, identical for both groups */
.chs-lang-toggle::before,
.chs-search-toggle::before {
	content: '';
	display: block;
	width: 1px;
	height: 20px;
	background: rgba(0, 0, 0, 0.18);
	flex: 0 0 1px;
}

.chs-lang-switcher {
	display: flex;
	align-items: center;
	gap: 6px;
}

.chs-lang-pill {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	padding: 3px 7px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	color: #6F6F6F;
	background: none;
	text-decoration: none;
	line-height: 1;
	transition: all 0.2s;
}

.chs-lang-pill:hover {
	color: #0179B3;
	border-color: #0179B3;
}

.chs-lang-pill.is-active {
	color: #0179B3;
	border-color: #0179B3;
	cursor: default;
}

/* --- Search Trigger Button (custom shortcode, see functions.php § 4c) ---
   Layout (border-left strip, divider pseudo-element, margin-left tightening)
   is handled in the combined .chs-lang-toggle, .chs-search-toggle rule above */

.chs-search-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	background: none;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	color: #6F6F6F;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.chs-search-trigger:hover,
.chs-search-trigger:focus-visible {
	color: #0179B3;
	border-color: #0179B3;
	background: #F5F8FA;
	outline: none;
}

/* --- Search Modal (native <dialog>, injected via wp_footer) --- */
.chs-search-modal {
	padding: 0;
	border: none;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
	max-width: 560px;
	width: calc(100% - 32px);
	margin: auto;
	color: #1A2B3D;
}

.chs-search-modal::backdrop {
	background: rgba(20, 17, 31, 0.55);
	backdrop-filter: blur(2px);
}

/* Subtle entry animation */
.chs-search-modal[open] {
	animation: chs-search-modal-in 180ms ease-out;
}

.chs-search-modal[open]::backdrop {
	animation: chs-search-backdrop-in 180ms ease-out;
}

@keyframes chs-search-modal-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes chs-search-backdrop-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.chs-search-modal[open],
	.chs-search-modal[open]::backdrop {
		animation: none;
	}
}

.chs-search-modal__inner {
	position: relative;
	padding: 32px 32px 28px;
}

.chs-search-modal__title {
	font-family: bookmania, 'DM Serif Display', Georgia, serif;
	font-size: 1.5rem;
	color: #0179B3;
	margin: 0 0 16px 0;
}

.chs-search-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	border-radius: 50%;
	color: #6F6F6F;
	cursor: pointer;
	transition: color 0.2s, background 0.2s;
}

.chs-search-modal__close:hover,
.chs-search-modal__close:focus-visible {
	color: #1A2B3D;
	background: #F5F8FA;
	outline: none;
}

/* Make WP search form play nicely inside the modal */
.chs-search-modal .wp-block-search,
.chs-search-modal form[role="search"] {
	margin: 0;
}

.chs-search-modal .wp-block-search__inside-wrapper,
.chs-search-modal form[role="search"] {
	display: flex;
	gap: 8px;
}

.chs-search-modal input[type="search"],
.chs-search-modal .wp-block-search__input,
.chs-search-modal .search-field {
	flex: 1;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 12px 14px;
	font-size: 1rem;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	background: #fff;
	color: #1A2B3D;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.chs-search-modal input[type="search"]:focus,
.chs-search-modal .wp-block-search__input:focus,
.chs-search-modal .search-field:focus {
	outline: none;
	border-color: #0179B3;
	box-shadow: 0 0 0 3px rgba(1, 121, 179, 0.15);
}

/* Submit button — match site CTA style (covers both block and classic search forms) */
.chs-search-modal .wp-block-search__button,
.chs-search-modal .search-submit,
.chs-search-modal button[type="submit"],
.chs-search-modal input[type="submit"] {
	-webkit-appearance: none;
	appearance: none;
	padding: 0.6em 1.4em;
	background: #7AAC2B;
	color: #fff !important;
	border: none;
	border-radius: 8px;
	font-family: gibson, 'DM Sans', 'Segoe UI', Roboto, sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.2s;
}

.chs-search-modal .wp-block-search__button:hover,
.chs-search-modal .search-submit:hover,
.chs-search-modal button[type="submit"]:hover,
.chs-search-modal input[type="submit"]:hover {
	background: #5a8a1f;
}

.chs-search-modal .wp-block-search__button:focus-visible,
.chs-search-modal .search-submit:focus-visible,
.chs-search-modal button[type="submit"]:focus-visible,
.chs-search-modal input[type="submit"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(122, 172, 43, 0.35);
}

/* Hide the redundant "Search for:" label that classic searchform.php adds */
.chs-search-modal .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.chs-search-modal label {
	display: block;
	flex: 1;
	min-width: 0;
	margin: 0;
}

/* Legacy CTA class — keep for backward compat */
.chs-nav-cta {
	background: #7AAC2B;
	color: #fff !important;
	padding: 10px 20px;
	border-radius: 8px;
	font-weight: 600;
	transition: opacity 0.3s ease;
}

.chs-nav-cta:hover {
	opacity: 0.9;
	color: #fff !important;
}

/* --- Focus-visible (WCAG 2.1 AA — keyboard navigation) --- */
.chs-service-sidebar a:focus-visible,
.chs-main-nav a:focus-visible,
.chs-footer a:focus-visible,
.chs-lang-toggle a:focus-visible,
a:focus-visible {
	outline: 2px solid #0179B3;
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- Breadcrumb --- */
.chs-breadcrumb {
	font-size: 1rem;
	opacity: 0.7;
	margin-bottom: 0.5rem;
}

.chs-breadcrumb a {
	color: rgba(255,255,255,0.8);
	text-decoration: none;
}

.chs-breadcrumb a:hover {
	color: #fff;
}

/* --- Resources page topic-card h3 — 1.25rem per Karl V2 review --- */
.page-template-page .wp-block-group.has-base-background-color h3.wp-block-heading.has-text-align-center,
body.page-resources h3.wp-block-heading.has-text-align-center {
	font-size: 1.25rem;
	font-weight: 600;
}

/* --- Topic cards (Resources) --- */
.chs-topic-card {
	background: #fff;
	border-radius: 12px;
	padding: 2rem;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	transition: transform 0.3s ease;
}

.chs-topic-card:hover {
	transform: translateY(-2px);
}

.chs-topic-card .topic-icon {
	width: 60px;
	height: 60px;
	margin: 0 auto 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F5F8FA;
	border-radius: 12px;
	font-size: 1.5rem;
}

/* ============================================
   BODY COPY SIZE — 18px min on desktop
   (per Karl Apr 28 review)
   ============================================ */

@media (min-width: 768px) {
	body,
	.wp-site-blocks,
	main p,
	main li,
	main blockquote {
		font-size: 1.125rem;
	}
}

/* ============================================
   BODY CONTENT TYPOGRAPHY — vertical rhythm
   ============================================ */

/* Push headings away from preceding body content.
   Sibling selectors so hero/section openers stay tight. */
main :is(p, ul, ol, blockquote) + h2,
main :is(p, ul, ol, blockquote) + h3 {
	margin-top: 2.5rem;
}

main :is(p, ul, ol, blockquote) + h4 {
	margin-top: 1.75rem;
}

/* Default heading rhythm — applies even when heading is first
   child of a column or group (where adjacent-sibling rules don't fire).
   !important is required to beat WP's inline layout CSS:
     :root :where(.is-layout-flow) > :first-child { margin-block-start: 0; }
   which has specificity (0,0,2,0) — higher than any reasonable child-theme
   selector without !important. Treating heading rhythm as foundational. */
main h2.wp-block-heading {
	margin-top: 2.5rem !important;
	margin-bottom: 1.25rem;
}

main h3.wp-block-heading {
	margin-top: 2rem !important;
	margin-bottom: 0.75rem;
}

main h4.wp-block-heading {
	margin-top: 1.5rem !important;
	margin-bottom: 0.5rem;
}

/* Reset top margin only when a heading sits at the top of a padded
   wp-block-group — the group's padding owns that space.
   We deliberately DON'T reset inside .wp-block-column, since columns
   carry no padding of their own and headings there need their margin
   for breathing room from the previous block.
   !important to beat the heading rhythm rule above (also !important). */
main .wp-block-group > :is(h1, h2, h3, h4).wp-block-heading:first-child {
	margin-top: 0 !important;
}

/* Heading-to-its-own-paragraph gap — tight enough to read as a unit,
   loose enough to breathe (was 0.5rem, felt cramped) */
main h1 + p,
main h2 + p,
main h3 + p,
main h4 + p {
	margin-top: 0.75rem;
}

/* Paragraph + list breathing room */
main p {
	margin-bottom: 1.25rem;
	line-height: 1.65;
}

main ul,
main ol {
	margin-bottom: 1.5rem;
}

main li {
	margin-bottom: 0.5rem;
	line-height: 1.6;
}

/* Don't apply rhythm rules inside hero patterns or button blocks */
.chs-hero-home p,
.chs-page-hero p,
.chs-cta-band p,
.wp-block-button p {
	margin-bottom: 0;
	line-height: inherit;
}

/* Hero/page-hero H1 — let the band's padding own the spacing, not the heading */
.chs-hero-home h1,
.chs-hero-home h2,
.chs-page-hero h1 {
	margin-top: 0;
	margin-bottom: 0;
}

/* ============================================
   BUTTON SPACING — native WP block buttons
   (.chs-btn-* classes are styled separately above)
   ============================================ */

/* Bump padding on core block buttons for tap target + visual weight */
main .wp-block-button .wp-block-button__link {
	padding: 14px 28px;
	font-family: gibson, 'DM Sans', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Button row breathing room when it follows text */
main :is(p, h1, h2, h3, h4, ul, ol) + .wp-block-buttons {
	margin-top: 1.75rem;
}

/* Spacing between buttons when they wrap to multiple rows */
main .wp-block-buttons.is-layout-flex {
	gap: 0.75rem 1rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
	.chs-card-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.chs-gallery-grid { grid-template-columns: repeat(3, 1fr); }
	.chs-team-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
	.chs-card-grid-2,
	.chs-card-grid-3 { grid-template-columns: 1fr; }
	.chs-video-grid { grid-template-columns: repeat(2, 1fr); }
	.chs-stats-bar { grid-template-columns: 1fr; gap: 1.5rem; }
	.chs-hero-home { padding: 4rem 0; }
	.chs-gallery-grid { grid-template-columns: repeat(2, 1fr); }
	.chs-team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.chs-card-grid-4 { grid-template-columns: 1fr; }
	.chs-video-grid { grid-template-columns: 1fr; }
	.chs-gallery-grid { grid-template-columns: repeat(2, 1fr); }

	/* Tighter logo at narrow viewports so header controls don't crowd */
	.chs-logo img {
		height: 40px !important;
	}
}

/* ============================================
   RESPONSIVE NAV — hamburger below 1280px
   Overrides WP core nav block's default 600px
   breakpoint. Toggle + overlay markup comes
   from setting overlayMenu:"mobile" on the
   navigation block in parts/header.html.
   ============================================ */

/* --- Below 1280px: force hamburger + overlay --- */
@media (max-width: 1279.98px) {

	/* Shrink the logo a touch to reclaim space for hamburger + lang + search */
	.chs-logo img {
		height: 48px !important;
	}

	/* Show the hamburger toggle (WP hides it >=600px by default) */
	.chs-main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
		background: transparent;
		border: 0;
		padding: 8px;
		color: #1A2B3D;
		cursor: pointer;
	}

	.chs-main-nav .wp-block-navigation__responsive-container-open:hover,
	.chs-main-nav .wp-block-navigation__responsive-container-open:focus-visible {
		color: #0179B3;
	}

	/* Hide the inline nav container until opened */
	.chs-main-nav .wp-block-navigation__responsive-container:not(.is-menu-open):not(.is-menu-open\:hover) {
		display: none !important;
	}

	/* Overlay panel when opened */
	.chs-main-nav .wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1000;
		background: #fff;
		padding: 24px;
		flex-direction: column;
		overflow-y: auto;
	}

	/* Stack nav items vertically inside the overlay */
	.chs-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		width: 100%;
	}

	/* Larger tap targets in overlay */
	.chs-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a.wp-block-navigation-item__content {
		font-size: 18px;
		padding: 12px 16px;
		display: block;
	}

	/* Submenu opens flat (no floating dropdown) inside overlay */
	.chs-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		position: static !important;
		box-shadow: none !important;
		border: 0 !important;
		padding-left: 12px !important;
		min-width: 0 !important;
	}

	/* CTA link spans full width in overlay so it reads as a button */
	.chs-main-nav .wp-block-navigation__responsive-container.is-menu-open .chs-nav-cta-link {
		margin-top: 8px;
	}
	.chs-main-nav .wp-block-navigation__responsive-container.is-menu-open .chs-nav-cta-link a.wp-block-navigation-item__content {
		text-align: center;
	}
}

/* --- 1280px and up: force inline (override WP's 600px rule) --- */
@media (min-width: 1280px) {

	/* Hide the hamburger */
	.chs-main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none !important;
	}

	/* Hide the close button (only relevant when overlay is open) */
	.chs-main-nav .wp-block-navigation__responsive-container-close {
		display: none !important;
	}

	/* Inline container — flatten WP's overlay defaults */
	.chs-main-nav .wp-block-navigation__responsive-container {
		display: block !important;
		position: static !important;
		background: transparent !important;
		padding: 0 !important;
		width: auto !important;
	}

	/* --- Gentle slide-down on submenu hover (desktop only) --- */
	/* Always render the submenu so we can transition; reveal via opacity/transform */
	.chs-main-nav .wp-block-navigation__submenu-container {
		display: block !important;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		pointer-events: none;
		transition:
			opacity 180ms ease,
			transform 180ms ease,
			visibility 0s linear 180ms;
	}

	.chs-main-nav .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
	.chs-main-nav .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container,
	.chs-main-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
		transition:
			opacity 180ms ease,
			transform 180ms ease,
			visibility 0s linear 0s;
	}

	/* Respect users who prefer reduced motion (WCAG 2.3.3) */
	@media (prefers-reduced-motion: reduce) {
		.chs-main-nav .wp-block-navigation__submenu-container {
			transition: none;
			transform: none;
		}
	}
}

/* ============================================
   SEARCH RESULTS PAGE
   Template: ollie/patterns/template-page-search.php
   Body classes: .search, .search-results
   ============================================ */

/* Page header — soften background tint + restore padding the parent template
   tries to set via undefined --x-large spacing variables */
.search-results .has-tertiary-background-color,
.search .has-tertiary-background-color {
	background-color: #F5F8FA !important;
	padding-top: 3rem !important;
	padding-bottom: 2.5rem !important;
	padding-left: var(--wp--preset--spacing--30) !important;
	padding-right: var(--wp--preset--spacing--30) !important;
}

/* Space between the search form group and the results main */
.search-results .site-content,
.search .site-content {
	padding-top: 2.5rem !important;
	padding-bottom: 4rem !important;
	padding-left: var(--wp--preset--spacing--30) !important;
	padding-right: var(--wp--preset--spacing--30) !important;
}

/* Bump side gutters at wider viewports so content doesn't hug the cap edge */
@media (min-width: 768px) {
	.search-results .has-tertiary-background-color,
	.search .has-tertiary-background-color,
	.search-results .site-content,
	.search .site-content {
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}
}

/* Cap content width at 1180px (parent uses 1200px from theme.json) */
.search-results .site-content > *,
.search .site-content > *,
.search-results .has-tertiary-background-color > .wp-block-group,
.search .has-tertiary-background-color > .wp-block-group {
	max-width: 1180px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* "Search results for:" heading */
.search-results .wp-block-query-title,
.search .wp-block-query-title {
	color: #0179B3;
	font-family: bookmania, 'DM Serif Display', Georgia, serif;
	font-size: 2rem;
	margin-bottom: 1.25rem;
}

/* Result titles — override the global secondary (green) link color */
.search-results .wp-block-post-title a,
.search .wp-block-post-title a {
	color: #0179B3;
	text-decoration: none;
	transition: color 0.15s ease;
}

.search-results .wp-block-post-title a:hover,
.search .wp-block-post-title a:hover,
.search-results .wp-block-post-title a:focus-visible,
.search .wp-block-post-title a:focus-visible {
	color: #015E8F;
	text-decoration: underline;
}

.search-results .wp-block-post-title,
.search .wp-block-post-title {
	font-size: 1.5rem;
	line-height: 1.3;
	margin: 0 0 0.5rem 0;
}

/* Excerpt body — softer color, comfortable reading line-height */
.search-results .wp-block-post-excerpt,
.search .wp-block-post-excerpt {
	color: #4A5568;
	line-height: 1.65;
	margin: 0;
	font-size: 1rem;
}

.search-results .wp-block-post-excerpt p,
.search .wp-block-post-excerpt p {
	margin: 0;
}

/* Each post in the loop — generous breathing room between items */
.search-results .wp-block-post,
.search .wp-block-post {
	margin-bottom: 2.25rem;
}

/* Separator between results — quieter line */
.search-results .wp-block-separator,
.search .wp-block-separator {
	border: 0;
	border-top: 1px solid #E2E8F0 !important;
	margin-top: 2.25rem !important;
	margin-bottom: 0 !important;
	opacity: 1;
}

/* Pagination at bottom of results */
.search-results .wp-block-query-pagination,
.search .wp-block-query-pagination {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid #E2E8F0;
}

.search-results .wp-block-query-pagination a,
.search .wp-block-query-pagination a {
	color: #0179B3;
	font-weight: 600;
	text-decoration: none;
}

.search-results .wp-block-query-pagination a:hover,
.search .wp-block-query-pagination a:hover {
	color: #015E8F;
	text-decoration: underline;
}

/* Soften the focus state on the inline search form (matches modal treatment) */
.search-results .wp-block-search__input:focus,
.search .wp-block-search__input:focus,
.search-results .search-field:focus,
.search .search-field:focus {
	outline: none;
	border-color: #0179B3;
	box-shadow: 0 0 0 3px rgba(1, 121, 179, 0.15);
}

/* ============================================
   PAGE LAYOUT — hero + body section overrides
   The page block patterns set padding via undefined-or-large
   spacing tokens (--80 = 8rem), making the hero asymmetric and
   the gap between hero and body excessive. These rules normalize
   the rhythm without requiring edits to every page's content.
   Targets the alignfull primary-bg group as direct child of
   .entry-content — the standard page-hero pattern.
   ============================================ */

/* Hero band — symmetric padding across all interior pages.
   Broadened to match any first-child alignfull group + any alignfull
   group with a colored background, so pages using primary/secondary/accent
   backgrounds all get normalized hero heights. */
.entry-content > .wp-block-group.alignfull:first-child,
.entry-content > .wp-block-group.alignfull.has-primary-background-color,
.entry-content > .wp-block-group.alignfull.has-secondary-background-color,
.entry-content > .wp-block-group.alignfull.has-accent-background-color,
.entry-content > .wp-block-group.alignfull.has-primary-dark-background-color,
.entry-content > .wp-block-group.alignfull.has-primary-deep-background-color {
	padding-top: 3rem !important;
	padding-bottom: 3rem !important;
}

/* Body section immediately after a hero — close the gap.
   Also resets a nested inner group's padding-top, since some pages
   put their padding on the inner group rather than the outer one. */
.entry-content > .wp-block-group.alignfull:first-child + .wp-block-group.alignfull,
.entry-content > .wp-block-group.alignfull.has-primary-background-color + .wp-block-group.alignfull,
.entry-content > .wp-block-group.alignfull.has-secondary-background-color + .wp-block-group.alignfull,
.entry-content > .wp-block-group.alignfull.has-accent-background-color + .wp-block-group.alignfull {
	padding-top: 3rem !important;
}

.entry-content > .wp-block-group.alignfull:first-child + .wp-block-group.alignfull > .wp-block-group,
.entry-content > .wp-block-group.alignfull.has-primary-background-color + .wp-block-group.alignfull > .wp-block-group,
.entry-content > .wp-block-group.alignfull.has-secondary-background-color + .wp-block-group.alignfull > .wp-block-group,
.entry-content > .wp-block-group.alignfull.has-accent-background-color + .wp-block-group.alignfull > .wp-block-group {
	padding-top: 0 !important;
}

/* Hero internal rhythm — equal gap above and below the H1.
   Reset ALL descendants' top/bottom margins AND padding (some pages
   set inline padding on the H1/P themselves instead of on the group;
   without this reset those pages render hero blocks ~3x too tall). */
.entry-content > .wp-block-group.alignfull:first-child *,
.entry-content > .wp-block-group.alignfull.has-primary-background-color *,
.entry-content > .wp-block-group.alignfull.has-secondary-background-color *,
.entry-content > .wp-block-group.alignfull.has-accent-background-color * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-block-start: 0 !important;
	padding-block-end: 0 !important;
}

.entry-content > .wp-block-group.alignfull:first-child h1.wp-block-heading,
.entry-content > .wp-block-group.alignfull.has-primary-background-color h1.wp-block-heading,
.entry-content > .wp-block-group.alignfull.has-secondary-background-color h1.wp-block-heading,
.entry-content > .wp-block-group.alignfull.has-accent-background-color h1.wp-block-heading {
	margin-top: 1rem !important;
	margin-bottom: 1rem !important;
}

/* Breadcrumb links — inherit the muted breadcrumb color, no underline,
   subtle brightness lift on hover. JS in functions.php § 4d adds the
   .chs-breadcrumb class and converts non-last segments into <a>s */
.entry-content .chs-breadcrumb a {
	color: inherit;
	text-decoration: none;
	opacity: 1;
	transition: opacity 0.15s ease;
}

.entry-content .chs-breadcrumb a:hover,
.entry-content .chs-breadcrumb a:focus-visible {
	text-decoration: none;
	color: #fff;
	outline: none;
}

/* Breadcrumb arrow separator (SVG injected by the JS).
   Sized to the surrounding text via em units; color inherits from the
   breadcrumb paragraph (white on the hero band). */
.chs-breadcrumb-sep {
	display: inline-block;
	vertical-align: -0.2em;
	width: 1em;
	height: 1em;
	margin: 0 0.35em;
	opacity: 0.85;
	flex-shrink: 0;
}

/* Mobile — even tighter at narrow viewports */
@media (max-width: 768px) {
	.entry-content > .wp-block-group.alignfull:first-child,
	.entry-content > .wp-block-group.alignfull.has-primary-background-color,
	.entry-content > .wp-block-group.alignfull.has-secondary-background-color,
	.entry-content > .wp-block-group.alignfull.has-accent-background-color {
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}
	.entry-content > .wp-block-group.alignfull:first-child + .wp-block-group.alignfull,
	.entry-content > .wp-block-group.alignfull.has-primary-background-color + .wp-block-group.alignfull,
	.entry-content > .wp-block-group.alignfull.has-secondary-background-color + .wp-block-group.alignfull,
	.entry-content > .wp-block-group.alignfull.has-accent-background-color + .wp-block-group.alignfull {
		padding-top: 2.25rem !important;
	}
}

/* ============================================
   LIST INDENT — tuck bullets inside the content
   alignment so they sit beneath the paragraph
   above instead of hanging off to the left.
   Excludes nav/social/internal block lists.
   ============================================ */

main ul:not(.wp-block-social-links):not(.wp-block-navigation__container):not(.wp-block-navigation__submenu-container):not(.wp-block-page-list),
main ol,
.entry-content ul:not(.wp-block-social-links):not(.wp-block-navigation__container):not(.wp-block-navigation__submenu-container):not(.wp-block-page-list),
.entry-content ol {
	padding-left: 1.5rem;
	list-style-position: outside;
}

/* ============================================
   EQUAL-HEIGHT CARDS in column layouts
   Targets two card patterns:
     - Services page: rounded + shadowed card
     - Home page "How We Help": rounded + bordered card (.chs-help-card)
   Cards stretch to the column's height; the final
   paragraph (the "Learn More →" link) is pushed to
   the bottom so all CTAs align across the row.
   ============================================ */

.wp-block-column > .wp-block-group[style*="border-radius"][style*="box-shadow"],
.chs-help-card {
	height: 100%;
	display: flex !important;
	flex-direction: column;
}

.wp-block-column > .wp-block-group[style*="border-radius"][style*="box-shadow"] > .wp-block-group {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Push the last paragraph (typically the "Learn More" link) to the bottom */
.wp-block-column > .wp-block-group[style*="border-radius"][style*="box-shadow"] > .wp-block-group > p:last-child,
.chs-help-card > p:last-child {
	margin-top: auto !important;
	padding-top: 1rem;
}

/* ============================================
   "HOW WE HELP" — Home page service grid
   Icon badge sizing + SVG centering.
   The pattern uses .chs-help-card__icon for the
   colored square containing the line-art SVG.
   ============================================ */

.chs-how-we-help .chs-help-card__icon {
	/* 52px tile / 32px glyph (Joe, Aug 26 2026 — 24px was too small for the
	   people-in-hands Community icon). */
	width: 52px !important;
	height: 52px !important;
	min-height: 52px;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.chs-how-we-help .chs-help-card__icon svg {
	display: block;
	width: 32px;
	height: 32px;
}

/* ============================================
   HOW WE HELP — icon beside heading
   (Karl May 13 feedback: "move the names up next to
   the icons/side by side, instead of having icons on
   one line and font under")
   Overrides the equal-height column-flex layout for
   this section to put icon + h3 on the same row with
   description wrapping below.
   ============================================ */

.chs-how-we-help .chs-help-card {
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
}

.chs-how-we-help .chs-help-card > .chs-help-card__icon {
	margin-bottom: 0 !important;
	margin-right: 14px !important;
	flex: 0 0 auto;
}

.chs-how-we-help .chs-help-card > h3.wp-block-heading {
	flex: 1 1 auto;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Everything after icon + heading flows to its own row */
.chs-how-we-help .chs-help-card > :nth-child(n+3) {
	flex: 1 0 100%;
	margin-top: 14px !important;
}

/* ============================================
   SIDEBAR EMAIL — KEEP ON ONE LINE
   (Karl May 13 feedback: "Email address spills over.
   Can we get it all on one line?")
   The long mailto address is the only string wide enough to
   overflow the narrow right-rail. Instead of letting it wrap
   (which chops it mid-word), size it to the sidebar width using
   container-query units so it always fits on a single line, and
   only shrinks below the normal 0.95rem when the rail gets narrow
   (narrow desktop windows / large-tablet landscape). Below 782px
   the columns stack full-width, the container is wide again, and
   the cap keeps it at the comfortable 0.95rem.
   ============================================ */

.chs-service-sidebar a[href^="mailto:"] {
	display: inline-block;
	max-width: 100%;
	/* The one deliberate exception to the 16px house floor (Aug 15 2026).
	   camdenhealthystart@thecooperative.org is 37 characters; it needs 295px
	   at 1rem and the sidebar rail is 286px, so at 1rem it wraps and orphans
	   the final letter. At 0.95rem (15.2px) it needs 281px and stays on one
	   line. WCAG 2.0 AA sets no minimum font size, so this is a legibility
	   trade-off, not a compliance one. Raise to 1rem if the wrap is preferred
	   — nothing else depends on this rule. */
	font-size: 0.95rem;
	word-break: normal;
	overflow-wrap: normal;
}

/* Footer email: at narrow widths, break at the @ (the <wbr> in the
   markup) rather than shrinking or chopping mid-word. Disabling
   arbitrary wrapping leaves the <wbr> as the only break point. */
.chs-footer-email {
	overflow-wrap: normal;
	word-break: normal;
}

/* ============================================
   FOOTER CONTACT ICONS (phone / email / Facebook)
   (Karl May 13 feedback: "can/should we also add a
   phone and email icon on the left-hand side... bump
   up the size of the Facebook icon?")
   Three inline-SVG icons in the left-side brand column,
   Facebook sized larger as the visual anchor.
   ============================================ */

.chs-footer-contact-icons a.chs-footer-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	opacity: 0.85;
	transition: opacity 0.2s ease, transform 0.2s ease;
	text-decoration: none;
}

.chs-footer-contact-icons a.chs-footer-icon:hover,
.chs-footer-contact-icons a.chs-footer-icon:focus-visible {
	opacity: 1;
	transform: translateY(-1px);
	outline: none;
}

.chs-footer-contact-icons a.chs-footer-icon:focus-visible {
	outline: 2px solid rgba(255,255,255,0.5);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Facebook slightly larger to anchor the row */
.chs-footer-contact-icons a.chs-footer-icon--facebook svg {
	width: 30px;
	height: 30px;
}

/* ============================================
   ARROW-CTA PATTERN — reusable across the site
   (Karl May 27 — "add space between text and
   arrow icon... consistent pattern across the site")
   Strip "→" from link text; render via ::after so:
     1) screen readers skip the decorative character
     2) we control spacing via CSS, not invisible-space chars
     3) we get a hover slide-effect for free
   Apply to any link that should read as a forward-going
   call-to-action by adding class="chs-cta-arrow".
   ============================================ */

a.chs-cta-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	text-decoration: none;
	font-weight: 600;
}

a.chs-cta-arrow::after {
	content: "→";
	display: inline-block;
	font-weight: 400;
	transition: transform 0.2s ease;
	line-height: 1;
}

a.chs-cta-arrow:hover::after,
a.chs-cta-arrow:focus-visible::after {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	a.chs-cta-arrow::after {
		transition: none;
	}
}

/* Community page (Aug 21 2026 feedback): the "Learn More About Community
   Action Network" button now sits directly under the What We Offer bullets
   (its 40px spacer was removed). Give it a modest breath so it reads as
   attached to the list without touching it. */
.page-id-80 .wp-block-list + .wp-block-stackable-button-group {
	margin-top: 1.5rem;
}

/* ============================================
   THE EVENTS CALENDAR — CHS SKIN
   --------------------------------------------
   Restyles TEC's native List view (embedded on
   /events/ via [tribe_events view="list"]) and
   the single-event "entity" page so both match
   the CHS design system. TEC ships its own font
   stack + accent color via CSS custom properties,
   so the cleanest override is to remap those vars
   to our tokens, then fine-tune a few elements.
   ============================================ */

/* 1. Fonts + accent: remap TEC's design tokens to CHS.
   TEC v2 views set every font-family and accent/active
   color from these variables, so overriding them here
   cascades through the whole calendar with no !important. */
.tribe-common {
	--tec-font-family-sans-serif: var( --wp--preset--font-family--body );
	--tec-font-family-serif: var( --wp--preset--font-family--heading );
	--tec-color-accent-primary: var( --wp--preset--color--secondary );
	--tec-color-accent-primary-hover: var( --wp--preset--color--secondary-hover );
	--tec-color-accent-primary-active: var( --wp--preset--color--secondary-hover );
	--tec-color-text-primary: #1A2B3D;
	--tec-color-text-secondary: #4A5568;
}

/* 2. Alignment: TEC's container adds its own horizontal
   inset + max-width, which pushed the event rows in from
   the section heading. Flush it to the block's content box
   so the "Upcoming Events" heading, intro copy, and every
   event row share one left margin. */
.tribe-common.tribe-events,
.tribe-events .tribe-common-l-container,
.tribe-events .tribe-events-l-container {
	max-width: none;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.tribe-events .tribe-events-calendar-list,
.tribe-events .tribe-events-header,
.tribe-events .tribe-events-c-top-bar {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* 3. Event titles → CHS heading font, primary blue. */
.tribe-events-calendar-list__event-title {
	margin: 0 0 0.35rem;
}
.tribe-events-calendar-list__event-title-link {
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 1.2;
	/* Primary Dark, not Primary: #0179B3 on the tertiary section
	   bg (#F5F8FA) is 4.49:1 — a hair under WCAG AA (4.5:1) at
	   this size/weight. #015E8F clears it comfortably. */
	color: #015E8F !important;
}
.tribe-events-calendar-list__event-title-link:hover,
.tribe-events-calendar-list__event-title-link:focus {
	color: #014A70 !important;
}

/* 4. Event date/time meta + description → CHS body copy. */
.tribe-events-calendar-list__event-datetime,
.tribe-events-calendar-list__event-datetime-wrapper {
	font-family: var( --wp--preset--font-family--body );
	color: #4A5568;
}
.tribe-events-calendar-list__event-description,
.tribe-events-calendar-list__event-description p {
	font-family: var( --wp--preset--font-family--body );
	color: #1A2B3D;
	line-height: 1.6;
}

/* 5. Month separator ("July 2026") → CHS heading font. */
.tribe-events-calendar-list__month-separator-text {
	font-family: var( --wp--preset--font-family--heading ) !important;
	color: #015E8F !important; /* AA: #0179B3 was 4.49:1 on #F5F8FA */
	font-weight: 400;
}

/* 6. Date tag → square-ish rounded tile with a thin border.
   Weekday in accent orange, day number in the heading
   serif + primary blue (mirrors the old .chs-event-date).
   Aug 18 2026 punch list: fixed 76×76 square (the tile was
   stretching wide/short) with a row-gap between the weekday
   and the day number. */
.tribe-events-calendar-list__event-date-tag {
	align-self: flex-start;
}
.tribe-events-calendar-list__event-date-tag-datetime {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 76px !important;
	height: 76px !important;
	row-gap: 6px !important;
	padding: 0.5rem !important;
	background: #fff;
	border: 1px solid #D9E2EC !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(1, 30, 48, 0.05);
}
.tribe-events-calendar-list__event-date-tag-weekday {
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	/* Darkened accent: brand orange #E07D30 on white is 2.94:1 —
	   fails AA for this small (0.7rem) text. #B05A18 reads as the
	   same accent and clears 4.5:1. */
	color: #B05A18 !important;
	line-height: 1.2;
}
.tribe-events-calendar-list__event-date-tag-daynum {
	font-family: var( --wp--preset--font-family--heading ) !important;
	font-size: 1.85rem !important;
	font-weight: 400 !important;
	color: #0179B3 !important;
	line-height: 1 !important;
}

/* 7. A little breathing room between rows. */
.tribe-events-calendar-list__event-row {
	margin-bottom: 0.5rem;
}

/* 8. Events page (ID 98) — one shared left/right edge on desktop.
   The three sections arrived at three different insets:
   - hero: 24px inline padding (spacing|30), content on the raw
     1200px grid edge, no inner wrapper
   - Upcoming/CTA sections: 32px padding on an inner wrapper,
     stacked on top of the grid edge (grid + 32px)
   - TEC event rows: -24px grid-gutter margins hanging out past
     the container the skin already flushed (grid + 32 - 24)
   Normalize: every section's OUTER group carries the same root
   padding, inner wrappers contribute 0, and the TEC rows drop
   their negative gutters. Desktop-only — mobile keeps the
   stock insets. */
@media ( min-width: 782px ) {
	.page-id-98 .wp-block-post-content > .wp-block-group.alignfull {
		padding-left: var( --wp--style--root--padding-left, 2rem ) !important;
		padding-right: var( --wp--style--root--padding-right, 2rem ) !important;
	}
	.page-id-98 .wp-block-post-content > .wp-block-group.alignfull > .wp-block-group {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}
.tribe-events .tribe-events-calendar-list__event-row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* The date-tag column keeps TEC's 24px left gutter even with the
   row gutters gone — the white tag box is the visible left edge,
   so pull it flush with the shared margin. */
.tribe-events .tribe-events-calendar-list__event-date-tag {
	padding-left: 0 !important;
}

/* 9. Client feedback (Aug 21 2026): no search bar and no
   "Subscribe to calendar" on the Events page — the program
   will run too few events to merit a search, and the subscribe
   control competes with the page's real calls to action.
   Hidden with CSS (not a TEC setting) so the list keeps every
   other behaviour and the choice is reversible in one place. */
.tribe-events .tribe-events-header__events-bar,
.tribe-events .tribe-events-c-events-bar,
.tribe-events .tribe-events-c-search,
.tribe-events .tribe-events-c-subscribe-dropdown__container,
.tribe-events .tribe-events-c-subscribe-dropdown,
.tribe-events .tribe-events-c-ical,
.tribe-events .tribe-events-header__top-bar .tribe-events-c-top-bar__nav {
	display: none !important;
}
/* With nothing after the last row, drop the space TEC and the
   section reserve below the list so the row sits close to the
   "Questions?" band. */
.tribe-events .tribe-events-calendar-list__event-row:last-child {
	margin-bottom: 1.25rem !important; /* keeps the last thumbnail clear of the prev/next rule */
}
.tribe-events .tribe-events-calendar-list,
.tribe-events .tribe-events-l-container,
.tribe-events .tribe-events-header {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}
.tribe-events .tribe-events-after-html {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
/* Prev/Next links: breathing room above the rule and below the last
   thumbnail, and a little under the links before the green band (Joe, Aug 26). */
.tribe-events .tribe-events-c-nav {
	margin-top: 0 !important;
	padding-top: 1rem !important;
	padding-bottom: 0.5rem !important;
}
.tribe-events .tribe-events-c-nav__list {
	padding-top: 1.5rem !important;
}
/* With the search bar gone, TEC's 96px container top padding is dead
   space between the intro copy and the date bar. */
.page-id-98 .tribe-events .tribe-events-l-container {
	padding-top: 0 !important;
}
/* The "Upcoming Events" section's inner wrapper carried 128px of
   bottom padding (spacing|80) below the list; the "Questions?"
   band brings its own top padding, so 40px is enough here. */
.page-id-98 .wp-block-post-content > .wp-block-group.alignfull > .wp-block-group:has(.tribe-events) {
	padding-bottom: var(--wp--preset--spacing--40, 2.5rem) !important;
}

/* ============================================
   SINGLE EVENT — CHS "entity" page
   Hero band (primary blue) with breadcrumb, title,
   date/time meta, and the event's featured image,
   mirroring the service/interior page hero.
   ============================================ */

.chs-event-hero {
	color: #fff;
}
.chs-event-hero h1,
.chs-event-hero .wp-block-post-title {
	color: #fff;
}
.chs-event-hero .chs-breadcrumb,
.chs-event-hero .chs-breadcrumb a {
	color: #fff;
}
.chs-event-hero .chs-breadcrumb a {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.chs-event-hero .chs-breadcrumb a:hover {
	opacity: 0.8;
}

/* Featured image in the hero — reuse the framed-photo treatment. */
.chs-event-hero .wp-block-post-featured-image img {
	border-radius: 0.75rem;
	box-shadow: 0 22px 48px rgba(1, 30, 48, 0.45);
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Event date/time + location meta (rendered by [chs_event_meta]). */
.chs-event-meta {
	margin-top: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.chs-event-meta p {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-family: var( --wp--preset--font-family--body );
	font-size: 1.05rem;
	line-height: 1.4;
}
.chs-event-hero .chs-event-meta,
.chs-event-hero .chs-event-meta p,
.chs-event-hero .chs-event-meta span,
.chs-event-hero .chs-event-meta abbr {
	color: #fff;
	text-decoration: none;
	border: 0;
}
.chs-event-meta svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	opacity: 0.9;
}

/* Event body copy inherits the site's base typography. */
.chs-event-content .wp-block-post-content {
	font-size: 1.05rem;
}

/* --- Resources topic cards: decorative topic icons ---------------------------
   FHI-style line icons sit to the LEFT of each card heading. They are drawn as
   CSS ::before background images, not inline <svg>, on purpose:
     - the heading stays plain text, so TranslatePress segments it normally;
     - a content:'' pseudo-element is not exposed to assistive tech, which is
       what we want (they are decorative, not informative);
     - no block markup changes beyond a class name, so nothing can go invalid.
   Stroke colour is Primary #0179B3. Icons carry no meaning that the heading
   does not already carry, so WCAG 1.4.11 does not apply to them. */
.chs-topic-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-align: left;
}

.chs-topic-head::before {
	content: "";
	flex: 0 0 2rem;
	width: 2rem;
	height: 2rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Breastfeeding Support — heart with a milk drop */
.chs-topic-head--breastfeeding::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230179B3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.6C12 20.6 3.6 15.2 3.6 9.4A4.6 4.6 0 0 1 12 6.7a4.6 4.6 0 0 1 8.4 2.7c0 5.8-8.4 11.2-8.4 11.2Z'/%3E%3Cpath d='M12 9.6c1 1.3 1.6 2.1 1.6 2.8a1.6 1.6 0 0 1-3.2 0c0-.7.6-1.5 1.6-2.8Z' fill='%230179B3' stroke='none'/%3E%3C/svg%3E");
}

/* Safe Sleep — crescent moon and star */
.chs-topic-head--sleep::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230179B3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.2 15.1A8.6 8.6 0 0 1 9.4 4.3a8.6 8.6 0 1 0 10.8 10.8Z'/%3E%3Cpath d='m17.4 3 .7 1.9 1.9.7-1.9.7-.7 1.9-.7-1.9-1.9-.7 1.9-.7Z' fill='%230179B3' stroke='none'/%3E%3C/svg%3E");
}

/* Mental Health — head in profile with a heart */
.chs-topic-head--mind::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230179B3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.4 21.5v-2.6c2.4-1.2 4-3.6 4-6.4a7.4 7.4 0 0 0-14.8-.4c0 1.3-.5 2-1.1 2.8-.5.6-.2 1.4.5 1.6l1.3.4v1.7a2.1 2.1 0 0 0 2.1 2.1h1.4v2.8'/%3E%3Cpath d='M11.9 15.4 10 13.6a1.6 1.6 0 0 1 2.3-2.2l-.4-.4a1.6 1.6 0 1 1 2.3 2.2Z'/%3E%3C/svg%3E");
}

/* Child Development — sprout */
.chs-topic-head--growth::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230179B3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V10'/%3E%3Cpath d='M12 12.4c0-4 3.2-7.2 7.2-7.2 0 4-3.2 7.2-7.2 7.2Z'/%3E%3Cpath d='M12 17.2c0-3.4-2.7-6.1-6.1-6.1 0 3.4 2.7 6.1 6.1 6.1Z'/%3E%3C/svg%3E");
}

/* Healthy Homes — house with a heart */
.chs-topic-head--home::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230179B3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10.6 9-7.1 9 7.1'/%3E%3Cpath d='M5.3 9.1V20.5h13.4V9.1'/%3E%3Cpath d='m12 17.6-2-1.9a1.7 1.7 0 0 1 2.4-2.4l-.4-.4a1.7 1.7 0 1 1 2.4 2.4Z'/%3E%3C/svg%3E");
}

/* Stacked cards on phones keep the icon beside the heading, just smaller. */
@media (max-width: 781px) {
	.chs-topic-head::before {
		flex-basis: 1.75rem;
		width: 1.75rem;
		height: 1.75rem;
	}
}