/*!
Theme Name:  SARC Kadence Child
Theme URI:   https://www.sanandreasregional.org
Description: Child theme for the San Andreas Regional Center website rebuild.
             Extends Kadence with SARC brand identity, custom post types, and
             WCAG 2.1 AA accessibility enhancements.
Author:      Marc Katzschner / Some Pulp, LLC
Template:    kadence
Version:     1.0.0
License:     GNU General Public License v2.0 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sarc-kadence-child
*/

/* ============================================================
   TABLE OF CONTENTS
   1.  CSS Custom Properties
   2.  Global Reset / Base
   3.  Accessibility Utilities
   4.  Typography overrides
   5.  Buttons & CTAs
   6.  DDS-mandated buttons
   ── Homepage Sections ──
   A.  Hero split
   B.  Form card (newsletter signup)
   C.  Stats bar
   D.  Audience selector ("Are you …")
   E.  Services section
   F.  Community News (7A)
   G.  Events + Quick Links (7B)
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */

:root {
	/* Brand palette — mirrors Kadence global palette */
	--sarc-green:           #008458;   /* p1 — Tree Green */
	--sarc-tree-green:      #008458;   /* alias */
	--sarc-burnt-orange:    #C74600;   /* p2 — Burnt Orange (updated from #CD4B00 — passes 4.5:1 on near-white mint) */
	--sarc-orange:          #C74600;   /* alias */
	--sarc-deep-forest:     #0F241D;   /* p3 — Deep Forest */
	--sarc-dark-forest:     #0C4532;   /* p4 — Dark Forest */
	--sarc-slate-green:     #375C4F;   /* p5 — Slate Green */
	--sarc-soft-sage:       #7A998F;   /* p6 — Soft Sage (decorative only) */
	--sarc-light-mint:      #E8F2EF;   /* p7 — Light Mint */
	--sarc-near-white-mint: #F6F9F8;   /* p8 — Near-White Mint */
	--sarc-near-white:      #F6F9F8;   /* alias */
	--sarc-white:           #FFFFFF;   /* p9 — White */

	/* DDS-mandated button colors (California DDS requirement) */
	--dds-yellow:       #FCCC07;
	--dds-blue:         #A7D3F7;
	--dds-text:         #0F241D;   /* dark text required on both DDS backgrounds */

	/* Spacing */
	--section-pad-v:    80px;
	--section-pad-v-sm: 48px;
	--content-max:      1224px;
	--content-narrow:   760px;

	/* Card shadows — from SARC_default-styles.pdf */
	--card-shadow:        2px 2px 4px rgba(0, 0, 0, 0.20); /* static card */
	--card-shadow-linked: 5px 5px 7px rgba(0, 0, 0, 0.20); /* linked card — rest */
	--card-shadow-press:  2px 2px 4px rgba(0, 0, 0, 0.20); /* linked card — hover/active (press) */
	--card-radius:        8px;

	/* Transitions */
	--transition: 0.2s ease;
}


/* ============================================================
   2. GLOBAL RESET / BASE
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: var(--wp--preset--font-family--proxima-nova), "Helvetica Neue", Arial, sans-serif;
	font-size: 1.125rem;    /* default text: Proxima Nova Medium 18pt = 18px */
	font-weight: 500;
	line-height: 1.6;
	color: var(--sarc-deep-forest);
	background-color: var(--sarc-white);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Remove Kadence default button color overrides */
.wp-block-button__link,
.kb-btn {
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-weight: 700;
	letter-spacing: 0.03em;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}


/* ============================================================
   3. ACCESSIBILITY UTILITIES
   ============================================================ */


/*
 * Global focus ring — dark-forest outline + white inner ring.
 * White box-shadow fills the offset gap, providing contrast on dark backgrounds.
 * Dark outline provides contrast on light backgrounds.
 * border-radius: 3px rounds the ring on elements that have no border-radius of their own.
 * Elements with their own border-radius (buttons, cards) keep that shape naturally.
 */
:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--sarc-white);
	border-radius: 3px;
}

/* Remove redundant outline from mouse users */
:focus:not(:focus-visible) {
	outline: none;
}

/* Screen-reader only text */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ============================================================
   4. TYPOGRAPHY OVERRIDES
   ============================================================ */

h1, h2, h3, h4 {
	font-family: var(--wp--preset--font-family--brandon-grotesque), "Helvetica Neue", Arial, sans-serif;
	color: var(--sarc-dark-forest);
}

h5, h6 {
	font-family: var(--wp--preset--font-family--proxima-nova), "Helvetica Neue", Arial, sans-serif;
	color: var(--sarc-slate-green);
}

/* Type scale — SARC_default-styles.pdf (pt values treated as px) */
h1 { font-size: 4.5rem;   font-weight: 700; line-height: 1.05; } /* 72pt = 72px */
h2 { font-size: 3rem;     font-weight: 700; line-height: 1.1;  } /* 48pt = 48px */
h3 { font-size: 1.5rem;   font-weight: 700; line-height: 1.2;  } /* 24pt = 24px */
h4 { font-size: 1.5rem;   font-weight: 700; line-height: 1.2;  }
h5 { font-size: 1.5rem;   font-weight: 700; line-height: 1.2;  } /* Proxima Nova Bold 24pt */
h6 { font-size: 1.5rem;   font-weight: 700; line-height: 1.2;  }

/* Large text — 24pt = 24px; used explicitly where spec calls for it (hero P, stat labels) */
.sarc-large-text {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.6;
}

p { margin-top: 0; margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--sarc-orange);
	text-decoration: underline;
}
a:hover,
a:focus {
	color: var(--sarc-dark-forest);
}

/* Section eyebrow label (Proxima Nova, uppercase, tree-green) */
.sarc-eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sarc-green);
	margin-bottom: 0.5rem;
}

/* White text variant for dark sections */
.has-dark-bg h1,
.has-dark-bg h2,
.has-dark-bg h3,
.has-dark-bg h4 {
	color: var(--sarc-white);
}
.has-dark-bg p {
	color: rgba(255,255,255,0.82);
}
.has-dark-bg .sarc-eyebrow {
	color: rgba(255,255,255,0.70);
}
.has-dark-bg a {
	color: var(--sarc-white);
}


/* ============================================================
   5. BUTTONS & CTAs
   ============================================================ */

.sarc-btn,
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 14px 28px;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-radius: 4px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
	white-space: nowrap;
}

/* Primary: green bg, white text — WCAG 4.73:1 ✅ AA */
.sarc-btn-primary,
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button:not([class*="is-style"]) .wp-block-button__link {
	background-color: var(--sarc-green);
	border-color: var(--sarc-green);
	color: var(--sarc-white) !important;
}
.sarc-btn-primary:hover,
.sarc-btn-primary:focus,
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:focus {
	background-color: var(--sarc-dark-forest);
	border-color: var(--sarc-dark-forest);
	color: var(--sarc-white) !important;
	box-shadow: 0 4px 12px rgba(12, 69, 50, 0.35);
}

/* Secondary: orange bg, white text — WCAG 4.56:1 ✅ AA */
/* Spec: Proxima Nova Bold 18pt, #fff on #cd4b00 */
/* Hover spec: #cd4b00 text, white bg, 1px outline #cd4b00 */
.sarc-btn-secondary {
	background-color: var(--sarc-orange);
	border-color: var(--sarc-orange);
	color: var(--sarc-white) !important;
}
.sarc-btn-secondary:hover,
.sarc-btn-secondary:focus {
	background-color: var(--sarc-white);
	border-color: var(--sarc-orange);
	color: var(--sarc-orange) !important;
	box-shadow: none;
}

/* Outline: transparent bg */
.sarc-btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--sarc-dark-forest);
	color: var(--sarc-dark-forest) !important;
}
.sarc-btn-outline:hover,
.sarc-btn-outline:focus,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: var(--sarc-dark-forest);
	color: var(--sarc-white) !important;
}

/* Outline on dark bg: white border */
.has-dark-bg .sarc-btn-outline {
	border-color: var(--sarc-white);
	color: var(--sarc-white) !important;
}
.has-dark-bg .sarc-btn-outline:hover,
.has-dark-bg .sarc-btn-outline:focus {
	background-color: var(--sarc-white);
	color: var(--sarc-dark-forest) !important;
}



/* ============================================================
   6. DDS-MANDATED BUTTONS
   California DDS required button styles — do not alter colors.
   Dark text (#0F241D) verified WCAG AAA on both backgrounds.
   ============================================================ */

.btn-transparency {
	background-color: var(--dds-yellow) !important;  /* #FCCC07 — 10.68:1 with dark text ✅ AAA */
	border-color: var(--dds-yellow) !important;
	color: var(--dds-text) !important;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-weight: 700;
}
.btn-transparency:hover,
.btn-transparency:focus {
	background-color: #e0b500 !important;
	border-color: #e0b500 !important;
	color: var(--dds-text) !important;
}

.btn-public-meeting {
	background-color: var(--dds-blue) !important;   /* #A7D3F7 — 10.31:1 with dark text ✅ AAA */
	border-color: var(--dds-blue) !important;
	color: var(--dds-text) !important;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-weight: 700;
}
.btn-public-meeting:hover,
.btn-public-meeting:focus {
	background-color: #7db9e8 !important;
	border-color: #7db9e8 !important;
	color: var(--dds-text) !important;
}


/* ============================================================
   HOMEPAGE SECTIONS
   ============================================================ */

/* ── TRUE SPLIT HERO ──────────────────────────────────────────────────────── */

/*
 * .sarc-hero-split wraps the Kadence rowlayout block.
 * We need to:
 *  1. Make the row truly full-width (override Kadence's max-width container).
 *  2. Let each column background fill its half of the viewport.
 *  3. Align the inner content of each column with the 1200px max-width center.
 */
.wp-block-kadence-rowlayout.sarc-hero-split {
	/* Break out of .entry-content-wrap's 32px padding for a true full-bleed hero */
	margin-left: -32px !important;
	margin-right: -32px !important;
	margin-top: -32px !important;
	width: calc(100% + 64px) !important;
	max-width: calc(100% + 64px) !important;
}

/* Kadence Blocks 3.x renders .kt-row-column-wrap as display:grid.
 * Override to a true 50/50 grid with no gap or padding. */
.wp-block-kadence-rowlayout.sarc-hero-split > .kt-row-column-wrap {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	grid-template-rows: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	gap: 0 !important;
}

/* Each column fills its grid cell */
.wp-block-kadence-rowlayout.sarc-hero-split > .kt-row-column-wrap > .wp-block-kadence-column {
	min-width: 0;
	width: 100% !important;
}

/* Left column: solid green on the column wrapper itself.
 * Kadence applies background to .kt-inside-inner-col (inner container), not here —
 * so we force the background on the outer wrapper to fill the full 50% half. */
.wp-block-kadence-column.sarc-hero-left {
	background-color: var(--sarc-dark-forest) !important;
}

/* Force white text inside the hero left column — overrides body text cascade
 * and any Kadence-generated specificity on headings/paragraphs. */
.wp-block-kadence-column.sarc-hero-left .wp-block-heading,
.wp-block-kadence-column.sarc-hero-left p {
	color: var(--sarc-white) !important;
}

/* Left column: align content with --content-max centerline using padding.
 * min(80px,...) caps the left padding so text width never falls below ~464px.
 * padding-bottom: 240px reserves empty space for the form card overlap zone. */
.wp-block-kadence-column.sarc-hero-left > .kt-inside-inner-col {
	max-width: calc(var(--content-max) / 2);
	margin-left: auto; /* push content to the right edge of its 50vw half */
	padding-right: 3.5rem;
	padding-left: 1.5rem;
	padding-top: 100px;
	padding-bottom: 240px;
	box-sizing: border-box;
}

/* Right column: stretch the bg image to fill full height.
 * The block sets background-image via inline style from bgImg attribute.
 * We enforce cover/center and provide a placeholder color as fallback. */
.wp-block-kadence-column.sarc-hero-right {
	/* auto 100%: scale image so height fills the container; no zoom beyond that */
	background-size: auto 100% !important;
	background-position: center center !important;
	background-color: var(--sarc-slate-green); /* fallback if no photo yet */
	min-height: 560px;
}
.wp-block-kadence-column.sarc-hero-right > .kt-inside-inner-col {
	height: 100%;
}
/* If Kadence does not apply bgImg at column level, use this temporary override
   pointing to the Unsplash placeholder until a real SARC photo is provided. */
.wp-block-kadence-column.sarc-hero-right:not([style*="background-image"]) {
	background-image: url("/wp-content/uploads/2026/04/bg.jpg");
}

/* Tablet/mobile: switch to single column, photo above text */
@media (max-width: 991px) {
	.wp-block-kadence-rowlayout.sarc-hero-split > .kt-row-column-wrap {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto auto !important;
	}
	.wp-block-kadence-column.sarc-hero-right {
		grid-row: 1; /* photo on top */
		min-height: 320px;
	}
	.wp-block-kadence-column.sarc-hero-left {
		grid-row: 2; /* text below */
	}
	.wp-block-kadence-column.sarc-hero-left > .kt-inside-inner-col {
		max-width: 100%;
		margin-left: 0;
		padding-left: 2rem;
		padding-right: 2rem;
		padding-top: 60px;
		padding-bottom: 200px; /* reserve overlap zone for the form card */
	}
}

/* ── HERO CTA BUTTON ─────────────────────────────────────────────────────── */

/* White-outline button on dark green bg; inverts to white bg on hover/focus */
.sarc-hero-cta-btn {
	display: inline-block;
	padding: 0.8rem 2rem;
	background-color: var(--sarc-dark-forest); /* matches column bg — border reads as outline */
	color: var(--sarc-white);
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: 4px;
	border: 2px solid var(--sarc-white);
	letter-spacing: 0.02em;
	line-height: 1.2;
	transition: background-color var(--transition), color var(--transition);
}

.sarc-hero-cta-btn:hover,
.sarc-hero-cta-btn:focus {
	background-color: var(--sarc-white);
	color: var(--sarc-dark-forest);
	text-decoration: none;
}

/* Reversed ring on dark background: white outer outline, dark inner shadow */
.sarc-hero-cta-btn:focus-visible {
	outline: 3px solid var(--sarc-white);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--sarc-dark-forest);
}


/* ── FORM CARD SECTION ────────────────────────────────────────────────────── */

/* Outer row: full-bleed, pulled up over the hero bottom, on top via z-index */
.wp-block-kadence-rowlayout.sarc-form-card-section {
	margin-left: -32px !important;
	margin-right: -32px !important;
	margin-top: -180px !important;
	width: calc(100% + 64px) !important;
	max-width: calc(100% + 64px) !important;
	position: relative;
	z-index: 20;
	pointer-events: none; /* transparent to clicks in the empty right half */
}

/* Inner grid: 3-column layout — gutter | form card | right half.
 * Gutter = (section_width - content_max) / 2 using 100% (grid container width),
 * which is always in-sync with the CSS layout engine and avoids 100vw desync. */
.wp-block-kadence-rowlayout.sarc-form-card-section > .kt-row-column-wrap {
	display: grid !important;
	grid-template-columns: max(0px, calc((100% - var(--content-max)) / 2)) calc(var(--content-max) / 2) 1fr !important;
	grid-template-rows: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	gap: 0 !important;
}

/* Left column wrapper — restore pointer events */
.wp-block-kadence-column.sarc-form-card-col {
	pointer-events: auto;
}

/* Left column inner: match hero text column alignment */
.wp-block-kadence-column.sarc-form-card-col > .kt-inside-inner-col {
	max-width: calc(var(--content-max) / 2);
	margin-left: auto;
	padding-right: 3.5rem;
	padding-left: 1.5rem;
	padding-top: 0;
	padding-bottom: 3rem;
	box-sizing: border-box;
}

/* The white card — static card shadow per SARC_default-styles.pdf */
.sarc-form-card {
	background: var(--sarc-white);
	border-radius: 8px;
	box-shadow: var(--card-shadow);
	padding: 2rem 2rem 2rem 2rem;
	position: relative; /* for honeypot absolute positioning */
}

/* "Stay Connected..." heading — Tree Green, Proxima Nova Bold 18px */
.sarc-form-card-heading {
	color: var(--sarc-green) !important;
	font-family: var(--wp--preset--font-family--proxima-nova) !important;
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin: 0 0 1.25rem 0 !important;
}

/* Form */
.sarc-mc-form {
	width: 100%;
}

/* Row 1: First Name | Last Name — 2 columns */
.sarc-mc-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.625rem;
	margin-bottom: 0.625rem;
}

/* Row 2: Email Address — full width */
.sarc-mc-field--email {
	margin-bottom: 0.875rem;
}

/* All inputs */
.sarc-mc-field input {
	width: 100%;
	padding: 0.65rem 0.875rem;
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 1rem;
	background-color: var(--sarc-white);
	color: var(--sarc-deep-forest);
	border: 1px solid var(--sarc-slate-green);
	border-radius: 4px;
	box-sizing: border-box;
	line-height: 1.4;
}

/* Placeholder text: Tree Green (visible until user clicks in) */
.sarc-mc-field input::placeholder {
	color: var(--sarc-green);
	opacity: 1;
}

/* Mouse click: darken border only — no outline ring */
.sarc-mc-field input:focus {
	border-color: var(--sarc-dark-forest);
}

/* !important overrides Kadence's global input outline and box-shadow resets */
.sarc-mc-field input:focus-visible {
	outline: 3px solid var(--sarc-dark-forest) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px var(--sarc-white) !important;
	border-color: var(--sarc-dark-forest);
}

/* Submit button: Burnt Orange, full width, Proxima Nova Bold 18px */
.sarc-mc-submit {
	display: block;
	width: 100%;
	padding: 0.8rem 1.5rem;
	background-color: var(--sarc-orange);
	color: var(--sarc-white);
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 1.125rem;
	font-weight: 700;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.sarc-mc-submit:hover,
.sarc-mc-submit:focus {
	background-color: #a33b00;
}


/* All non-mobile: explicit grid-column placement keeps the form card in column 2.
 * At 992–1224px the gutter collapses to 0px (max(0px,...)) so column 2 = left edge;
 * at ≥1225px the gutter expands to pin the card to the content area boundary. */
@media (min-width: 992px) {
	.wp-block-kadence-column.sarc-form-card-col {
		grid-column: 2;
	}
	.wp-block-kadence-rowlayout.sarc-form-card-section > .kt-row-column-wrap > .wp-block-kadence-column:last-child {
		grid-column: 3;
	}
	.wp-block-kadence-column.sarc-form-card-col > .kt-inside-inner-col {
		margin-left: 0;
	}
}

/* Wide desktop only: remove horizontal padding so content aligns with hero text and stats. */
@media (min-width: 1225px) {
	.wp-block-kadence-column.sarc-hero-left > .kt-inside-inner-col,
	.wp-block-kadence-column.sarc-form-card-col > .kt-inside-inner-col {
		padding-left: 0;
	}
}

/* Tablet/mobile: keep the overlap effect, stack fields to single column */
@media (max-width: 991px) {
	.wp-block-kadence-rowlayout.sarc-form-card-section {
		margin-top: -150px !important;
		z-index: 20;
	}
	.wp-block-kadence-rowlayout.sarc-form-card-section > .kt-row-column-wrap {
		grid-template-columns: 1fr !important;
	}
	/* Reset explicit grid-column placement from wide-desktop rule */
	.wp-block-kadence-column.sarc-form-card-col,
	.wp-block-kadence-rowlayout.sarc-form-card-section > .kt-row-column-wrap > .wp-block-kadence-column:last-child {
		grid-column: auto;
	}
	/* Hide the empty right column so it doesn't create unwanted space */
	.wp-block-kadence-rowlayout.sarc-form-card-section > .kt-row-column-wrap > .wp-block-kadence-column:last-child {
		display: none;
	}
	.wp-block-kadence-column.sarc-form-card-col > .kt-inside-inner-col {
		max-width: 100%;
		margin-left: 0;
		padding-left: 1rem;
		padding-right: 1rem;
	}
	/* Tighter card padding on tablet/mobile to maximise form width */
	.sarc-form-card {
		padding: 1.5rem;
	}
	.sarc-mc-fields {
		grid-template-columns: 1fr 1fr; /* keep First/Last side by side on tablet */
	}
}

@media (max-width: 600px) {
	/* Scale down hero H1 at small phone widths */
	.wp-block-kadence-column.sarc-hero-left .wp-block-heading {
		font-size: clamp(1.75rem, 8vw, 3rem) !important;
	}
	.sarc-mc-fields {
		grid-template-columns: 1fr; /* stack First/Last on small phones */
	}
}

/* ── STATS BAR ────────────────────────────────────────────────────────────── */

/* Countup divider between columns */
.wp-block-kadence-rowlayout[class*="sarc_stats"] .wp-block-kadence-column + .wp-block-kadence-column {
	border-left: 1px solid rgba(255,255,255,0.25);
}
@media (max-width: 600px) {
	.wp-block-kadence-rowlayout[class*="sarc_stats"] .wp-block-kadence-column + .wp-block-kadence-column {
		border-left: none;
		border-top: 1px solid rgba(255,255,255,0.25);
	}
}

/* ── DDS REQUIRED BUTTONS ─────────────────────────────────────────────────── */

.sarc-btn-dds:hover,
.sarc-btn-dds:focus {
	opacity: 0.85;
	text-decoration: none;
}

/* ── CTA NEWSLETTER FORM ──────────────────────────────────────────────────── */

.sarc-cta-form input[type="email"],
.sarc-cta-form input[type="text"] {
	color: #fff !important;
}
.sarc-cta-form input::placeholder { color: rgba(255,255,255,0.45) !important; }
.sarc-cta-form input:focus {
	outline: 2px solid var(--sarc-green);
	outline-offset: 1px;
}
.sarc-cta-form button:hover { background: var(--sarc-dark-forest) !important; }

/* ── SERVICE CARD HOVER ───────────────────────────────────────────────────── */

/* Lifted card effect on hover for service cards */
.wp-block-kadence-rowlayout[class*="sarc_svc"] .wp-block-kadence-column {
	transition: transform 0.2s, box-shadow 0.2s;
}
.wp-block-kadence-rowlayout[class*="sarc_svc"] .wp-block-kadence-column:hover {
	transform: translateY(-3px);
	box-shadow: 4px 8px 20px rgba(0,0,0,0.12) !important;
}

/* ── NEWS QUERY LOOP ──────────────────────────────────────────────────────── */

.wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.wp-block-post-template li { margin: 0; }
.wp-block-post-featured-image img { width: 100%; object-fit: cover; }
.wp-block-post-title a { color: var(--sarc-dark-forest); text-decoration: none; }
.wp-block-post-title a:hover { color: var(--sarc-orange); }
.wp-block-post-date { color: var(--sarc-slate-green); }

/* ── STATS BAR ────────────────────────────────────────────────────────────── */

.wp-block-kadence-rowlayout.sarc-stats-section {
	margin-left: -32px !important;
	margin-right: -32px !important;
	margin-top: -160px !important;
	width: calc(100% + 64px) !important;
	max-width: calc(100% + 64px) !important;
	background: var(--sarc-white);
	border-top: 70px solid var(--sarc-green);
	padding-top: 5rem;
	padding-bottom: 3.5rem;
	position: relative;
	z-index: 1;
}

.wp-block-kadence-rowlayout.sarc-stats-section > .kt-row-column-wrap {
	display: grid !important;
	grid-template-columns: 1fr 1fr 1fr !important;
	grid-template-rows: auto !important;
	align-items: stretch !important;
	max-width: var(--content-max) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	gap: 3rem !important;
	padding: 0 !important;
	box-sizing: border-box;
}

/* Make Kadence column wrappers and card fill full grid-cell height */
.wp-block-kadence-rowlayout.sarc-stats-section .wp-block-kadence-column,
.wp-block-kadence-rowlayout.sarc-stats-section .kt-inside-inner-col {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.wp-block-kadence-rowlayout.sarc-stats-section .sarc-stat-card {
	flex: 1;
}

.sarc-stat-card {
	background: var(--sarc-near-white);
	border-radius: 8px;
	box-shadow: var(--card-shadow);
	padding: 2rem 2rem 3.5rem;
	position: relative;
	overflow: hidden;
}

.sarc-stat-number {
	display: block;
	font-family: "brandon-grotesque", "Helvetica Neue", Arial, sans-serif;
	font-size: 4.5rem; /* 72px */
	font-weight: 700;
	line-height: 1;
	color: var(--sarc-dark-forest);
	margin-bottom: 0.5rem;
}

.sarc-stat-label {
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
	font-size: 1.5rem; /* 24px */
	font-weight: 700;
	line-height: 1.3;
	color: var(--sarc-deep-forest);
	margin: 0;
}

.sarc-stat-areas {
	font-weight: 500;
	display: block;
}

.sarc-stat-icon {
	position: absolute;
	bottom: 1rem;
	left: 1.25rem;
	border-radius: 50%;
	width: 56px;
	height: 56px;
	object-fit: cover;
}

/* Stats — tablet */
@media (max-width: 991px) {
	.wp-block-kadence-rowlayout.sarc-stats-section {
		margin-top: -190px !important; /* form card section taller at tablet (single col, taller card) */
		padding-top: 8rem;
	}
	.wp-block-kadence-rowlayout.sarc-stats-section > .kt-row-column-wrap {
		grid-template-columns: 1fr 1fr 1fr !important;
		gap: 1.25rem !important;
		padding: 0 1rem !important;
	}
	.sarc-stat-number { font-size: 3rem; }
	.sarc-stat-label { font-size: 1.25rem; }
}

/* Stats — mobile */
@media (max-width: 640px) {
	.wp-block-kadence-rowlayout.sarc-stats-section {
		margin-top: -210px !important;
		padding-top: 8rem;
	}
	.wp-block-kadence-rowlayout.sarc-stats-section > .kt-row-column-wrap {
		grid-template-columns: 1fr !important;
		padding: 0 1rem !important;
		gap: 1.25rem !important;
	}
	.sarc-stat-card { padding: 1.5rem 1.5rem 3rem; }
	.sarc-stat-number { font-size: 3.5rem; }
}

/* ── AUDIENCE SELECTOR ("Are you ...") ───────────────────────────────────── */

.wp-block-kadence-rowlayout.sarc-audience-section {
	margin-left: -32px !important;
	margin-right: -32px !important;
	width: calc(100% + 64px) !important;
	max-width: calc(100% + 64px) !important;
	background: var(--sarc-near-white);
}

/* Heading row */
.wp-block-kadence-rowlayout.sarc-audience-head {
	padding-top: 4rem;
	padding-bottom: 0;
}

.wp-block-kadence-rowlayout.sarc-audience-head > .kt-row-column-wrap {
	display: block !important;
	max-width: var(--content-max);
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
}

/* "Are you ..." — H2 element, H1 visual scale (72pt = 4.5rem) per spec */
.wp-block-kadence-rowlayout.sarc-audience-head h2.wp-block-heading {
	font-family: "brandon-grotesque", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 4.5rem !important;
	font-weight: 700 !important;
	line-height: 1.05 !important;
	color: var(--sarc-dark-forest) !important;
	margin: 0;
}

/* Cards row */
.wp-block-kadence-rowlayout.sarc-audience-cards {
	padding-top: 2.5rem;
	padding-bottom: 4.5rem;
}

.wp-block-kadence-rowlayout.sarc-audience-cards > .kt-row-column-wrap {
	display: grid !important;
	grid-template-columns: 1fr 1fr 1fr !important;
	align-items: stretch !important;
	max-width: var(--content-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	gap: 3rem !important;
	padding: 0 !important;
	box-sizing: border-box;
}

/* Strip ALL padding/border from Kadence wrappers so image reaches top & sides */
.wp-block-kadence-rowlayout.sarc-audience-cards .wp-block-kadence-column,
.wp-block-kadence-rowlayout.sarc-audience-cards .kt-inside-inner-col,
.wp-block-kadence-rowlayout.sarc-audience-cards .wp-block-html {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
}

/* Card — entire <a> is the link surface; linked-card shadow per spec */
.sarc-audience-card {
	display: flex;
	flex-direction: column;
	align-items: stretch; /* override legacy align-items:center from old rule */
	gap: 0;              /* override legacy gap:16px from old rule */
	flex: 1;
	padding: 0;          /* override legacy padding:32px 24px from old rule */
	text-align: left;    /* override legacy text-align:center from old rule */
	background: var(--sarc-white);
	border-radius: 8px;
	border: none;
	box-shadow: var(--card-shadow-linked); /* 5px 5px 7px — linked card rest */
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	position: relative;
	transition: box-shadow var(--transition), transform var(--transition);
}

/* Hover/active: lift + shadow reduces (matches news card behaviour) */
.sarc-audience-card:hover,
.sarc-audience-card:focus-visible {
	box-shadow: var(--card-shadow-press);
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.sarc-audience-card { transition: none; }
}

/* Image — flush to card top and sides; height !important overrides global img reset */
.sarc-audience-card__image {
	width: 100%;
	aspect-ratio: 370 / 260;
	overflow: hidden;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	display: block;
	border-radius: 0;
}

.sarc-audience-card__image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	margin: 0;
	padding: 0;
}

/* Card body — left-aligned, tight padding matching design */
.sarc-audience-card__body {
	padding: 1.75rem 1.125rem 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	text-align: left;
}

/* H3: Brandon Grotesque Bold, 24pt = 1.5rem per spec */
.sarc-audience-card__title {
	font-family: "brandon-grotesque", "Helvetica Neue", Arial, sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--sarc-dark-forest);
	line-height: 1.2;
	margin: 0 0 0.4rem 0;
}

/* Default body text: Proxima Nova Medium, 18pt = 1.125rem per spec */
.sarc-audience-card__text {
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--sarc-deep-forest);
	line-height: 1.6;
	margin: 0;
	flex: 1;
}

/* "Learn more" — Burnt Orange, no underline at rest; underline on hover/focus only */
.sarc-audience-card__cta {
	display: inline-block;
	margin-top: 0.625rem;
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sarc-orange);
	text-decoration: none;
}

.sarc-audience-card:hover .sarc-audience-card__cta,
.sarc-audience-card:focus-visible .sarc-audience-card__cta {
	text-decoration: underline;
}

/* Tablet */
@media (max-width: 991px) {
	.wp-block-kadence-rowlayout.sarc-audience-head h2.wp-block-heading {
		font-size: 3rem !important;
	}
	.wp-block-kadence-rowlayout.sarc-audience-cards > .kt-row-column-wrap {
		gap: 1.5rem !important;
		padding: 0 1rem !important;
	}
}

/* Mobile — stack cards */
@media (max-width: 640px) {
	.wp-block-kadence-rowlayout.sarc-audience-head {
		padding-top: 3rem;
	}
	.wp-block-kadence-rowlayout.sarc-audience-head h2.wp-block-heading {
		font-size: 2.5rem !important;
	}
	/* Give the "Are you ..." heading the same horizontal inset as the cards */
	.wp-block-kadence-rowlayout.sarc-audience-head > .kt-row-column-wrap {
		padding: 0 1rem !important;
	}
	.wp-block-kadence-rowlayout.sarc-audience-cards {
		padding-bottom: 3rem;
	}
	.wp-block-kadence-rowlayout.sarc-audience-cards > .kt-row-column-wrap {
		grid-template-columns: 1fr !important;
		gap: 1.25rem !important;
		padding: 0 1rem !important;
	}
}

/* ── SERVICES SECTION (5+6) ──────────────────────────────────────────────── */

/* Shared: full-bleed dark forest background */
.wp-block-kadence-rowlayout.sarc-services-section {
	background-color: var(--sarc-dark-forest);
	margin-left: -32px !important;
	margin-right: -32px !important;
	width: calc(100% + 64px) !important;
	max-width: calc(100% + 64px) !important;
}

/* Row 1 — intro heading */
.wp-block-kadence-rowlayout.sarc-services-head {
	padding-top: 4rem;
	padding-bottom: 0;
}

.wp-block-kadence-rowlayout.sarc-services-head > .kt-row-column-wrap {
	display: block !important;
	max-width: 860px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 2rem !important;
}

/* Non-default: white, Proxima Nova Bold 24pt — overrides default h2 (Brandon 48pt dark) */
.wp-block-kadence-rowlayout.sarc-services-head h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--proxima-nova) !important;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	color: var(--sarc-white) !important;
	line-height: 1.4 !important;
	margin: 0;
}

/* Row 2 — service cards */
.wp-block-kadence-rowlayout.sarc-services-cards {
	padding-top: 2.5rem;
	padding-bottom: 0;
}

.wp-block-kadence-rowlayout.sarc-services-cards > .kt-row-column-wrap {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	align-items: stretch !important;
	max-width: var(--content-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	gap: 2rem !important;
	padding: 0 !important;
	box-sizing: border-box;
}

/* Strip Kadence wrapper padding so card div controls its own height */
.wp-block-kadence-rowlayout.sarc-services-cards .wp-block-kadence-column,
.wp-block-kadence-rowlayout.sarc-services-cards .kt-inside-inner-col,
.wp-block-kadence-rowlayout.sarc-services-cards .wp-block-html {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
}

/* Kill Kadence's default transition so columns have no hover animation */
.wp-block-kadence-rowlayout.sarc-services-cards .kt-inside-inner-col {
	transition: none !important;
}

/* Row 3 — CTA button */
.wp-block-kadence-rowlayout.sarc-services-cta {
	padding-top: 2.5rem;
	padding-bottom: 4rem;
}

.wp-block-kadence-rowlayout.sarc-services-cta > .kt-row-column-wrap {
	display: flex !important;
	justify-content: center !important;
	padding: 0 !important;
}

.wp-block-kadence-rowlayout.sarc-services-cta .kt-inside-inner-col {
	display: flex;
	justify-content: center;
	padding: 0 !important;
}

/* Service card — same shadow + bg as stats cards; content centered in wide card */
.sarc-service-card {
	background: var(--sarc-white);
	border-radius: 8px;
	box-shadow: var(--card-shadow);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1;
	box-sizing: border-box;
}

/* Native dimensions; flex-start prevents stretch from parent align-items:center */
.sarc-service-card__icon {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	margin-bottom: 1.25rem;
	flex-shrink: 0;
}

/* Matches audience card title: Brandon Grotesque Bold 24pt var(--sarc-dark-forest) */
.sarc-service-card__title {
	font-family: "brandon-grotesque", "Helvetica Neue", Arial, sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--sarc-dark-forest);
	line-height: 1.2;
	margin: 0 0 0.75rem;
	max-width: 300px;
	width: 100%;
}

/* Matches audience card text: Proxima Nova Medium 18pt var(--sarc-deep-forest) */
.sarc-service-card__text {
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--sarc-deep-forest);
	line-height: 1.6;
	margin: 0 0 1.25rem;
	flex: 1;
	max-width: 300px;
	width: 100%;
}

/* Sub-links — Burnt Orange, no underline at rest, underline on hover/focus */
.sarc-service-card__links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	max-width: 300px;
	width: 100%;
}

.sarc-service-card__link {
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sarc-orange); /* var(--sarc-orange) on var(--sarc-white) = 4.56:1 ✅ AA */
	text-decoration: none;
}

.sarc-service-card__link:hover,
.sarc-service-card__link:focus {
	color: var(--sarc-orange);
	text-decoration: underline;
}


/* "Apply for Services" — burnt orange, same hover pattern as form submit */
.sarc-services-cta-btn {
	display: inline-block;
	padding: 0.8rem 2rem;
	background-color: var(--sarc-orange);
	color: var(--sarc-white);
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: 4px;
	letter-spacing: 0.02em;
	line-height: 1.2;
	transition: background-color var(--transition);
}

.sarc-services-cta-btn:hover,
.sarc-services-cta-btn:focus {
	background-color: #a33b00;
	color: var(--sarc-white) !important;
	text-decoration: none;
}


/* Tablet */
@media (max-width: 991px) {
	.wp-block-kadence-rowlayout.sarc-services-cards > .kt-row-column-wrap {
		gap: 1.5rem !important;
		padding: 0 1rem !important;
	}
}

/* Mobile — stack cards */
@media (max-width: 640px) {
	.wp-block-kadence-rowlayout.sarc-services-head {
		padding-top: 3rem;
	}
	.wp-block-kadence-rowlayout.sarc-services-cards > .kt-row-column-wrap {
		grid-template-columns: 1fr !important;
		gap: 1.25rem !important;
		padding: 0 1rem !important;
	}
	.wp-block-kadence-rowlayout.sarc-services-cta {
		padding-bottom: 3rem;
	}
}

/* ── COMMUNITY NEWS SECTION (7A) ─────────────────────────────────────────── */

/* Shared: full-bleed white background */
.wp-block-kadence-rowlayout.sarc-news-section {
	background-color: var(--sarc-white);
	margin-left:  -32px !important;
	margin-right: -32px !important;
	width:     calc(100% + 64px) !important;
	max-width: calc(100% + 64px) !important;
}

/* Heading row */
.wp-block-kadence-rowlayout.sarc-news-head {
	padding-top: 4rem;
	padding-bottom: 0;
}

.wp-block-kadence-rowlayout.sarc-news-head > .kt-row-column-wrap {
	display: block !important;
	max-width: var(--content-max);
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
}

/* "Community News & Events" — H2 element, H1 visual scale per spec */
.wp-block-kadence-rowlayout.sarc-news-head h2.wp-block-heading {
	font-family: "brandon-grotesque", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 4.5rem !important;
	font-weight: 700 !important;
	line-height: 1.05 !important;
	color: var(--sarc-dark-forest) !important;
	text-align: center !important;
	margin: 0;
}

/* Sub-header row */
.wp-block-kadence-rowlayout.sarc-news-subhead {
	padding-top: 2rem;
	padding-bottom: 0;
}

.wp-block-kadence-rowlayout.sarc-news-subhead .kt-inside-inner-col {
	padding: 0 !important;
}

/* "Latest News" h3 + "See More News..." flex row */
.sarc-news-subheader {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	width: 100%;
	max-width: var(--content-max);
	margin: 0 auto;
}

.sarc-news-subheader__title {
	font-family: "brandon-grotesque", "Helvetica Neue", Arial, sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--sarc-dark-forest);
	line-height: 1.2;
	margin: 0;
	text-align: left !important;
}

.sarc-news-subheader__link {
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sarc-orange);
	text-decoration: none;
	white-space: nowrap;
}

.sarc-news-subheader__link:hover,
.sarc-news-subheader__link:focus {
	color: var(--sarc-orange);
	text-decoration: underline;
}


/* Cards row */
.wp-block-kadence-rowlayout.sarc-news-cards {
	padding-top: 2rem;
	padding-bottom: 4.5rem;
}

.wp-block-kadence-rowlayout.sarc-news-cards > .kt-row-column-wrap {
	max-width: var(--content-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
}

.wp-block-kadence-rowlayout.sarc-news-cards .wp-block-kadence-column,
.wp-block-kadence-rowlayout.sarc-news-cards .kt-inside-inner-col {
	padding: 0 !important;
}

/* Query Loop grid — .sarc-news-cards-grid is on the <ul> post-template */
.sarc-news-cards-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	align-items: start !important;
	gap: 2rem !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Individual news card */
.sarc-news-cards-grid .wp-block-post {
	background-color: var(--wp--preset--color--sarc-light-mint);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow-linked);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: box-shadow var(--transition), transform var(--transition);
}

.sarc-news-cards-grid .wp-block-post:hover,
.sarc-news-cards-grid .wp-block-post:focus-within {
	box-shadow: var(--card-shadow-press);
	transform: translateY(-3px);
}

/* Featured image — 370×260 aspect, edge-to-edge */
.sarc-news-cards-grid .wp-block-post-featured-image {
	aspect-ratio: 370 / 260;
	overflow: hidden;
}

.sarc-news-cards-grid .wp-block-post-featured-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.sarc-news-cards-grid .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Post date — shown above title */
.sarc-news-cards-grid .wp-block-post-date {
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--sarc-slate-green);
	margin: 0;
	padding: 1.25rem 1.125rem 0;
}

.sarc-news-cards-grid .wp-block-post-date time {
	color: inherit;
}

/* Post title (h4) */
.sarc-news-cards-grid .wp-block-post-title {
	font-family: "brandon-grotesque", "Helvetica Neue", Arial, sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--sarc-dark-forest);
	line-height: 1.2;
	margin: 0;
	padding: 0.5rem 1.125rem 0.5rem;
}

.sarc-news-cards-grid .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

/* Stretched link — title anchor covers the full card */
.sarc-news-cards-grid .wp-block-post-title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.sarc-news-cards-grid .wp-block-post-title a:focus-visible {
	outline: none;
}

/* Focus ring on card container — outline/box-shadow are not clipped by overflow: hidden */
.sarc-news-cards-grid .wp-block-post:focus-within {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--sarc-white);
	border-radius: 8px;
}

/* Excerpt */
.sarc-news-cards-grid .wp-block-post-excerpt {
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--sarc-deep-forest);
	line-height: 1.6;
	margin: 0;
	padding: 0 1.125rem 0.5rem;
	flex: 1;
}

.sarc-news-cards-grid .wp-block-post-excerpt p,
.sarc-news-cards-grid .wp-block-post-excerpt .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* "Read more" decorative span (aria-hidden) */
.sarc-news-card__readmore {
	display: block;
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sarc-orange);
	padding: 0 1.125rem 1.25rem;
}

.sarc-news-cards-grid .wp-block-post:hover .sarc-news-card__readmore,
.sarc-news-cards-grid .wp-block-post:focus-within .sarc-news-card__readmore {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.sarc-news-cards-grid .wp-block-post { transition: none; }
	.sarc-news-cards-grid .wp-block-post:hover,
	.sarc-news-cards-grid .wp-block-post:focus-within { transform: none; }
}

/* Tablet */
@media (max-width: 991px) {
	.sarc-news-cards-grid {
		gap: 1.5rem !important;
	}
	.wp-block-kadence-rowlayout.sarc-news-head h2.wp-block-heading {
		font-size: 3rem !important;
	}
}

@media (max-width: 640px) {
	.wp-block-kadence-rowlayout.sarc-news-head {
		padding-top: 3rem;
	}
	.wp-block-kadence-rowlayout.sarc-news-head h2.wp-block-heading {
		font-size: 2.5rem !important;
	}
	/* Match the 1rem gutter used by stats tiles — subheader text aligns with card edges */
	.wp-block-kadence-rowlayout.sarc-news-head > .kt-row-column-wrap {
		padding: 0 1rem !important;
	}
	.wp-block-kadence-rowlayout.sarc-news-subhead .kt-inside-inner-col {
		padding: 0 1rem !important;
	}
	.wp-block-kadence-rowlayout.sarc-news-cards > .kt-row-column-wrap {
		padding: 0 1rem !important;
	}
	.sarc-news-cards-grid {
		grid-template-columns: 1fr !important;
		gap: 1.25rem !important;
	}
	.wp-block-kadence-rowlayout.sarc-news-cards {
		padding-bottom: 3rem;
	}
}

/* ── EVENTS + QUICK LINKS SECTION (7B) ───────────────────────────────────── */

/* Row — full-bleed, columns own their backgrounds */
.wp-block-kadence-rowlayout.sarc-events-ql-section {
	margin-left:  -32px !important;
	margin-right: -32px !important;
	width:     calc(100% + 64px) !important;
	max-width: calc(100% + 64px) !important;
}

/* Desktop: gradient bleeds the dark green to the right viewport edge */
@media (min-width: 992px) {
	.wp-block-kadence-rowlayout.sarc-events-ql-section {
		background: linear-gradient(to right, var(--sarc-white) 50%, var(--sarc-dark-forest) 50%);
	}
}

.wp-block-kadence-rowlayout.sarc-events-ql-section > .kt-row-column-wrap {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	align-items: stretch !important;
	padding: 0 !important;
	max-width: var(--content-max);
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Left column — Events */
.wp-block-kadence-rowlayout.sarc-events-ql-section .sarc-events-col {
	display: flex;
	flex-direction: column;
}

.wp-block-kadence-rowlayout.sarc-events-ql-section .sarc-events-col > .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	padding: 2rem 1rem 2rem 0 !important;
}

/* Prevent Gutenberg constrained layout from centering the card away from the column edge */
.sarc-events-card.wp-block-group {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.sarc-events-card.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Events widget card — taller service-card variant, no hover */
.sarc-events-card {
	background: var(--sarc-near-white);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: 1.5rem 1.5rem 1.5rem 1.125rem;
	margin-top: 1.5rem;
	flex: 1;
}

/* TEC widget overrides — scoped to .sarc-events-card */

/* 1. Hide redundant "Upcoming Events" header inside widget */
.sarc-events-card .tribe-events-widget-events-list__header {
	display: none;
}

/* 2. "More Events" footer link — aligned with event titles, double spacing above */
.sarc-events-card .tribe-events-widget-events-list__view-more {
	/* at least 2× the 16px between event rows */
	margin-top: 2rem !important;
}

.sarc-events-card .tribe-events-widget-events-list__view-more-link,
.sarc-events-card .tribe-events-widget-events-list__view-more-link:visited {
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sarc-dark-forest) !important;
	text-decoration: none !important;
	border-bottom: none !important;
}

.sarc-events-card .tribe-events-widget-events-list__view-more-link:hover,
.sarc-events-card .tribe-events-widget-events-list__view-more-link:focus {
	color: var(--sarc-dark-forest) !important;
	text-decoration: underline !important;
	border-bottom: none !important;
}

/* 3. Event titles — h4 via template override; styled as Proxima Nova Bold 18pt var(--sarc-deep-forest) */
.sarc-events-card .tribe-events-widget-events-list__event-title {
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	color: var(--sarc-deep-forest) !important;
	line-height: 1.4 !important;
	margin: 0.25rem 0 0 !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* 4. Event title link — dark forest at rest, burnt orange on hover/focus */
.sarc-events-card .tribe-events-widget-events-list__event-title-link,
.sarc-events-card .tribe-events-widget-events-list__event-title-link:visited {
	color: var(--sarc-dark-forest) !important;
	text-decoration: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
	font-weight: 700;
}

.sarc-events-card .tribe-events-widget-events-list__event-title-link:hover,
.sarc-events-card .tribe-events-widget-events-list__event-title-link:focus {
	color: var(--sarc-orange) !important;
	text-decoration: underline !important;
	border-bottom: none !important;
}

/* 5. Date/time — Proxima Nova 18pt, regular weight, dark forest */
.sarc-events-card .tribe-events-widget-events-list__event-datetime-wrapper,
.sarc-events-card .tribe-events-widget-events-list__event-datetime {
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 1.125rem !important;
	font-weight: 400 !important;
	color: var(--sarc-dark-forest) !important;
	margin: 0 !important;
}

/* 6. Date tag — bordered box left of each event */
.sarc-events-card .tribe-events-widget-events-list__event-date-tag {
	margin-left: 0;
	margin-right: 0.875rem;
}

.sarc-events-card .tribe-events-widget-events-list__event-date-tag-datetime {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 2px solid var(--sarc-dark-forest);
	border-radius: 6px;
	padding: 0.375rem 0.625rem;
	min-width: 3.25rem;
	text-align: center;
	margin-bottom: 0.5rem;
}

.sarc-events-card .tribe-events-widget-events-list__event-date-tag-month {
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 1.125rem !important;
	font-weight: 400 !important;
	color: var(--sarc-dark-forest) !important;
	text-transform: uppercase;
	line-height: 1.2;
}

.sarc-events-card .tribe-events-widget-events-list__event-date-tag-daynum {
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	color: var(--sarc-dark-forest) !important;
	line-height: 1.1;
}

/* Right column — Quick Links */
/* Mobile: column provides its own green background */
/* Desktop: gradient on row provides the green; column is transparent */
.wp-block-kadence-column.sarc-ql-col {
	background-color: var(--sarc-dark-forest);
}

@media (min-width: 992px) {
	.wp-block-kadence-column.sarc-ql-col {
		background-color: transparent;
	}
}

.wp-block-kadence-rowlayout.sarc-events-ql-section .sarc-ql-col > .kt-inside-inner-col {
	padding-top:    2.5rem !important;
	padding-left:   1rem !important;
	padding-bottom: 3rem !important;
	padding-right:  0 !important;
}

/* "Quick Links" — h2, Brandon Grotesque Bold 48pt (3rem), white */
.sarc-ql-heading {
	font-family: "brandon-grotesque", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 3rem !important;
	font-weight: 700 !important;
	color: var(--sarc-white) !important;
	line-height: 1.1 !important;
	margin: 0 0 2rem !important;
}

/* Quick links nav */
.sarc-quick-links {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Individual quick link card */
.sarc-quick-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--sarc-near-white);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow-linked);
	padding: 0.875rem 1.25rem 0.875rem 1.5rem;
	text-decoration: none;
	transition: box-shadow var(--transition), transform var(--transition);
}

.sarc-quick-link__text {
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--sarc-deep-forest);
	transition: color var(--transition);
}

/* Icon — two images stacked, swapped via opacity */
.sarc-quick-link__icon {
	flex-shrink: 0;
	width: 54px;
	height: 54px;
	position: relative;
	margin-left: 1rem;
}

.sarc-quick-link__icon-default,
.sarc-quick-link__icon-active {
	display: block;
	width: 54px;
	height: 54px;
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity var(--transition);
}

.sarc-quick-link__icon-active { opacity: 0; }

/* Hover / focus-visible */
.sarc-quick-link:hover,
.sarc-quick-link:focus-visible {
	box-shadow: var(--card-shadow-press);
	transform: translateY(-3px);
}

.sarc-quick-link:hover .sarc-quick-link__text,
.sarc-quick-link:focus-visible .sarc-quick-link__text {
	color: var(--sarc-orange);
	text-decoration: underline;
}

.sarc-quick-link:hover .sarc-quick-link__icon-default,
.sarc-quick-link:focus-visible .sarc-quick-link__icon-default { opacity: 0; }

.sarc-quick-link:hover .sarc-quick-link__icon-active,
.sarc-quick-link:focus-visible .sarc-quick-link__icon-active { opacity: 1; }


@media (prefers-reduced-motion: reduce) {
	.sarc-quick-link { transition: none; }
	.sarc-quick-link__icon-default,
	.sarc-quick-link__icon-active { transition: none; }
}

/* Tablet + mobile — stack columns, scale headings */
@media (max-width: 991px) {
	.sarc-ql-heading { font-size: 2.5rem !important; }
	.sarc-quick-link__text { font-size: 1.25rem; }
	.wp-block-kadence-rowlayout.sarc-events-ql-section > .kt-row-column-wrap {
		grid-template-columns: 1fr !important;
		max-width: none;
	}
	.wp-block-kadence-rowlayout.sarc-events-ql-section .sarc-events-col > .kt-inside-inner-col,
	.wp-block-kadence-rowlayout.sarc-events-ql-section .sarc-ql-col > .kt-inside-inner-col {
		padding: 1.5rem !important;
	}
	.wp-block-kadence-rowlayout.sarc-events-ql-section .sarc-ql-col > .kt-inside-inner-col {
		padding-bottom: 2.5rem !important;
	}
}

/* ── Tablet indentation fix (992–1224px) ─────────────────────────────────── */
/* At this range the viewport is narrower than --content-max (1224px), so the
   inner .kt-row-column-wrap fills the full viewport width and content touches
   the screen edge. Add 1.5rem horizontal padding to match the hero left column
   and form card, which both carry padding-left: 1.5rem at this breakpoint.
   Services head is excluded — its max-width: 860px already provides centering.
   The events gradient (linear-gradient at 50%) stays aligned because adding
   symmetric padding keeps the column boundary at viewport/2. */
@media (min-width: 992px) and (max-width: 1224px) {
	.wp-block-kadence-rowlayout.sarc-stats-section > .kt-row-column-wrap,
	.wp-block-kadence-rowlayout.sarc-audience-head > .kt-row-column-wrap,
	.wp-block-kadence-rowlayout.sarc-audience-cards > .kt-row-column-wrap,
	.wp-block-kadence-rowlayout.sarc-services-cards > .kt-row-column-wrap,
	.wp-block-kadence-rowlayout.sarc-services-cta > .kt-row-column-wrap,
	.wp-block-kadence-rowlayout.sarc-news-head > .kt-row-column-wrap,
	.wp-block-kadence-rowlayout.sarc-news-cards > .kt-row-column-wrap,
	.wp-block-kadence-rowlayout.sarc-events-ql-section > .kt-row-column-wrap {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}
	/* News subheader row: padding lives on .kt-inside-inner-col, not the outer grid */
	.wp-block-kadence-rowlayout.sarc-news-subhead .kt-inside-inner-col {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}
}

/* ── iPhone landscape: safe-area-inset padding ───────────────────────────── */
/* viewport-fit=cover lets backgrounds reach the physical screen edge, but
   content inside full-bleed sections can fall behind the Dynamic Island or
   rounded corners. env(safe-area-inset-left/right) is 0 in portrait (no
   effect there) and 44–59px in iPhone landscape. max() keeps the existing
   base padding on every other device and falls back gracefully if the browser
   does not support env(). Applied only at ≤991px (landscape iPhone range). */
@supports (padding-left: env(safe-area-inset-left)) {
	@media (max-width: 991px) {
		.wp-block-kadence-rowlayout.sarc-stats-section > .kt-row-column-wrap,
		.wp-block-kadence-rowlayout.sarc-audience-head > .kt-row-column-wrap,
		.wp-block-kadence-rowlayout.sarc-audience-cards > .kt-row-column-wrap,
		.wp-block-kadence-rowlayout.sarc-services-head > .kt-row-column-wrap,
		.wp-block-kadence-rowlayout.sarc-services-cards > .kt-row-column-wrap,
		.wp-block-kadence-rowlayout.sarc-services-cta > .kt-row-column-wrap,
		.wp-block-kadence-rowlayout.sarc-news-head > .kt-row-column-wrap,
		.wp-block-kadence-rowlayout.sarc-news-cards > .kt-row-column-wrap {
			padding-left:  max(1rem, env(safe-area-inset-left))  !important;
			padding-right: max(1rem, env(safe-area-inset-right)) !important;
		}
		/* Events + QL: safe-area padding moves to the column inner containers so the
		   column backgrounds (dark green QL, white events) can reach the screen edges */
		.wp-block-kadence-rowlayout.sarc-events-ql-section .sarc-events-col > .kt-inside-inner-col,
		.wp-block-kadence-rowlayout.sarc-events-ql-section .sarc-ql-col > .kt-inside-inner-col {
			padding-left:  max(1.5rem, env(safe-area-inset-left))  !important;
			padding-right: max(1.5rem, env(safe-area-inset-right)) !important;
		}
		/* News subheader: padding lives on .kt-inside-inner-col rather than the grid */
		.wp-block-kadence-rowlayout.sarc-news-subhead .kt-inside-inner-col {
			padding-left:  max(1rem, env(safe-area-inset-left))  !important;
			padding-right: max(1rem, env(safe-area-inset-right)) !important;
		}
		/* Hero text column uses 2rem base; keep 2rem as the minimum */
		.wp-block-kadence-column.sarc-hero-left > .kt-inside-inner-col {
			padding-left:  max(2rem, env(safe-area-inset-left))  !important;
			padding-right: max(2rem, env(safe-area-inset-right)) !important;
		}
		/* Form card column: 1rem base at mobile */
		.wp-block-kadence-column.sarc-form-card-col > .kt-inside-inner-col {
			padding-left:  max(1rem, env(safe-area-inset-left))  !important;
			padding-right: max(1rem, env(safe-area-inset-right)) !important;
		}
		/* Mobile header — utility bar row and logo/hamburger row.
		   !important required: the base header padding rules and ≤991px overrides
		   are declared later in this stylesheet and win the cascade without it. */
		#masthead .site-top-header-wrap .site-header-row-container-inner {
			padding-left:  max(1.5rem, env(safe-area-inset-left))  !important;
			padding-right: max(1.5rem, env(safe-area-inset-right)) !important;
		}
		#masthead .site-main-header-wrap .site-header-row-container-inner {
			padding-left:  max(1.5rem, env(safe-area-inset-left))  !important;
			padding-right: max(1.5rem, env(safe-area-inset-right)) !important;
		}
	}
}

/* ============================================================
   HEADER — UTILITY BAR + MAIN NAV
   ============================================================ */

/* Override Kadence's hardcoded 1025px mobile/desktop header switch */
@media screen and (min-width: 1025px) {
	#main-header { display: none !important; }
	#mobile-header { display: block !important; }
}
@media screen and (min-width: 992px) {
	#main-header { display: block !important; }
	#mobile-header { display: none !important; }
}

/* ── Hide site title text (logo SVG includes wordmark) ── */
#masthead .site-branding .site-title-wrap {
	display: none;
}

/* ── Utility bar (top row) — allow logo to overlap ── */
/* z-index: 150 creates a stacking context above the main nav row (z-index: auto)
   within #masthead, so the language dropdown paints on top of the nav bar. */
#masthead .site-top-header-wrap {
	background: var(--sarc-near-white-mint);
	border-bottom: 1px solid var(--sarc-light-mint);
	overflow: visible;
	position: relative;
	/* z-index: auto — no stacking context here; lets TRP dropdown participate in #masthead
	   context at z-index:200, above the logo at z-index:155. A value of 150 would cap all
	   children at 150 in #masthead, putting the dropdown behind the logo. */
	z-index: auto;
}

#masthead .site-top-header-wrap .site-header-row-container-inner {
	max-width: 1308px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* Force both row containers to full width so right edges align */
#masthead .site-top-header-wrap .site-container,
#masthead .site-main-header-wrap .site-container {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

#masthead .site-top-header-inner-wrap {
	width: 100%;
	grid-template-columns: 1fr auto;
}

/* Right-align all utility bar content */
#masthead .site-header-top-section-right {
	justify-content: flex-end;
	margin-left: auto;
}

/* ── Language switcher (Kadence HTML element) ── */
#masthead .header-html {
	display: flex;
	align-items: center;
	white-space: nowrap;
	flex-shrink: 0;
}

#masthead .header-html .header-html-inner {
	white-space: nowrap;
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
}

#masthead .header-html .header-html-inner p {
	margin: 0;
	line-height: inherit;
	position: relative;
	top: 1px;
}

.sarc-lang-label {
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--sarc-slate-green);
	white-space: nowrap;
	flex-shrink: 0;
}

/* TranslatePress language switcher in header — V1 HTML (trp-ls-shortcode-current-language) */
/* Note: Kadence renders two header instances (desktop + mobile) — both contain the TRP switcher; expected. */
.sarc-lang-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* Container: position:relative anchors the absolute dropdown.
   z-index NOT set here — we don't want a stacking context (which would cap the dropdown
   to 150 inside .site-top-header-wrap). The dropdown's own z-index:200 participates
   directly in #masthead's stacking context and beats the logo at z-index:155.
   TRP sets width:200px — override to shrink-wrap. */
#masthead .header-html .trp-language-switcher {
	position: relative !important;
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
}

/* Width inflation fix: TRP inline JS sets style.width on both elements — CSS !important overrides inline styles */
#masthead .header-html .trp-ls-shortcode-current-language,
#masthead .header-html .trp-ls-shortcode-language {
	width: auto !important;
}

/* TRP V1 CSS applies box + arrow to .trp-language-switcher > div (.trp-ls-shortcode-current-language) — strip them */
#masthead .header-html .trp-ls-shortcode-current-language {
	border: none !important;
	background: none !important;
	background-image: none !important;
	padding: 0 !important;
	height: auto !important;
	display: inline-block !important;
}

/* TRP V1 CSS hides trigger on :hover/:focus so dropdown appears to "replace" it — keep it visible.
   TRP click-mode inline CSS also hides trigger when .trp-ls-clicked — override both. */
#masthead .header-html .trp-language-switcher:hover .trp-ls-shortcode-current-language,
#masthead .header-html .trp-language-switcher:focus .trp-ls-shortcode-current-language,
#masthead .header-html .trp-ls-shortcode-current-language.trp-ls-clicked {
	visibility: visible !important;
}

/* Trigger link — styled to match the "Search" button in the utility bar */
#masthead .header-html .trp-ls-shortcode-current-language a {
	font-family: var(--wp--preset--font-family--proxima-nova) !important;
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	color: var(--sarc-slate-green) !important;
	text-decoration: underline !important;
	text-decoration-color: transparent !important;
	text-underline-offset: 2px !important;
	transition: text-decoration-color 0.2s ease, text-underline-offset 0.2s ease;
	white-space: nowrap;
}

#masthead .header-html .trp-ls-shortcode-current-language a:hover,
#masthead .header-html .trp-ls-shortcode-current-language a:focus {
	color: var(--sarc-slate-green) !important;
	text-decoration-color: currentColor !important;
	text-underline-offset: 4px !important;
}

#masthead .header-html .trp-ls-shortcode-current-language a:focus-visible {
	outline: 3px solid var(--sarc-dark-forest) !important;
	outline-offset: 3px !important;
}

/* Suppress TRP's hover-show mechanism — click only (handled by trp-clickable-ls.js + .trp-ls-clicked).
   Specificity 1,3,1 — beats TRP's native hover rule at 0,2,1. */
#masthead .header-html .trp-language-switcher:hover .trp-ls-shortcode-language,
#masthead .header-html .trp-language-switcher:focus .trp-ls-shortcode-language {
	display: none !important;
	visibility: hidden !important;
}

/* Dropdown — positioned below the trigger.
   z-index:200 participates in #masthead (not inside .site-top-header-wrap's stacking context,
   since that element is now z-index:auto). Beats logo at z-index:155. */
#masthead .header-html .trp-ls-shortcode-language {
	position: absolute !important;
	top: calc(100% + 6px) !important;
	left: 0 !important;
	z-index: 200 !important;
	background: var(--sarc-near-white-mint) !important;
	border: 1px solid var(--sarc-light-mint) !important;
	border-radius: var(--card-radius) !important;
	box-shadow: var(--card-shadow) !important;
	min-width: 150px !important;
	padding: 4px 0 !important;
	overflow: visible !important;
	animation: sarc-dropdown-in 0.15s ease;
}

/* Show dropdown when TRP's click JS adds .trp-ls-clicked.
   Specificity 1,4,0 — beats the hover suppressor above (1,3,1). */
#masthead .header-html .trp-language-switcher .trp-ls-shortcode-language.trp-ls-clicked {
	display: block !important;
	visibility: visible !important;
}

/* Hide the "English" disabled link inside the dropdown (current language shown in trigger) */
#masthead .header-html .trp-ls-shortcode-language .trp-ls-disabled-language {
	display: none !important;
}

/* Dropdown links */
#masthead .header-html .trp-ls-shortcode-language a:not(.trp-ls-disabled-language) {
	display: block !important;
	font-family: var(--wp--preset--font-family--proxima-nova) !important;
	font-size: 1.125rem !important;
	font-weight: 400 !important;
	color: var(--sarc-deep-forest) !important;
	text-decoration: underline !important;
	text-decoration-color: transparent !important;
	text-underline-offset: 2px !important;
	padding: 0.8rem 2rem !important;
	white-space: nowrap;
	border-bottom: 1px solid var(--sarc-light-mint) !important;
	transition: color 0.2s ease, text-decoration-color 0.2s ease, background-color 0.15s ease;
}

#masthead .header-html .trp-ls-shortcode-language a:not(.trp-ls-disabled-language):last-child {
	border-bottom: none !important;
}

#masthead .header-html .trp-ls-shortcode-language a:not(.trp-ls-disabled-language):hover,
#masthead .header-html .trp-ls-shortcode-language a:not(.trp-ls-disabled-language):focus {
	color: var(--sarc-slate-green) !important;
	text-decoration-color: currentColor !important;
	text-underline-offset: 4px !important;
	background: var(--sarc-white) !important;
}

#masthead .header-html .trp-ls-shortcode-language a:not(.trp-ls-disabled-language):focus-visible {
	outline: 3px solid var(--sarc-dark-forest) !important;
	outline-offset: -3px !important;
}

/* ── Kadence search button in utility bar ── */
#masthead .search-toggle-open-container .search-toggle-open {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--sarc-slate-green);
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 1.125rem;
	font-weight: 400;
	padding: 0.3rem 0.5rem;
	background: none;
	border: none;
	cursor: pointer;
	vertical-align: baseline;
	position: relative;
	top: 1px;
}

#masthead .search-toggle-open-container .search-toggle-open:hover,
#masthead .search-toggle-open-container .search-toggle-open:focus {
	color: var(--sarc-deep-forest);
}

#masthead .search-toggle-open-container .search-toggle-label {
	font-size: inherit;
	font-weight: 700;
	order: 1;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 2px;
	transition: text-decoration-color 0.2s ease, text-underline-offset 0.2s ease;
}

#masthead .search-toggle-open-container .search-toggle-icon {
	order: 2;
}

#masthead .search-toggle-open-container .search-toggle-open:hover .search-toggle-label,
#masthead .search-toggle-open-container .search-toggle-open:focus .search-toggle-label {
	text-decoration-color: currentColor;
	text-underline-offset: 4px;
}

/* ── Secondary nav (DDS buttons + Apply for Services) ── */
#secondary-navigation .secondary-menu-container ul {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
}

#secondary-navigation .secondary-menu-container ul li {
	display: flex;
	align-items: center;
}

/* Base shape for all utility nav links — DDS button size */
#secondary-navigation .secondary-menu-container ul li a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 1.125rem;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

#secondary-navigation .secondary-menu-container ul li a:hover,
#secondary-navigation .secondary-menu-container ul li a:focus {
	text-decoration: underline;
}

/* DDS buttons: darken on hover/focus — focus ring handled by global :focus-visible */
#secondary-navigation .secondary-menu-container ul li.sarc-util-transparency a:hover,
#secondary-navigation .secondary-menu-container ul li.sarc-util-transparency a:focus {
	background: #e0b500;
	text-decoration: none;
}
#secondary-navigation .secondary-menu-container ul li.sarc-util-notices a:hover,
#secondary-navigation .secondary-menu-container ul li.sarc-util-notices a:focus {
	background: #7db9e8;
	text-decoration: none;
}


/* Transparency button — DDS yellow, eye icon — equal height to Apply for Services */
#secondary-navigation .secondary-menu-container ul li.sarc-util-transparency a {
	background: #fccc07;
	color: var(--sarc-deep-forest);
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
}

#secondary-navigation .secondary-menu-container ul li.sarc-util-transparency a::before {
	content: "";
	display: inline-block;
	width: 1.1em;
	height: 0.75em;
	background: url("assets/eye-transparent.png") center/contain no-repeat;
	flex-shrink: 0;
}

/* Public Meeting Notices button — DDS light blue — equal height to Apply for Services */
#secondary-navigation .secondary-menu-container ul li.sarc-util-notices a {
	background: #a7d3f7;
	color: var(--sarc-deep-forest);
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
}

/* Apply for Services — exact match to .sarc-services-cta-btn on homepage */
#secondary-navigation .secondary-menu-container ul li.sarc-util-apply a {
	background: var(--sarc-burnt-orange);
	color: var(--sarc-white);
	padding: 0.8rem 2rem;
}

#secondary-navigation .secondary-menu-container ul li.sarc-util-apply a:hover,
#secondary-navigation .secondary-menu-container ul li.sarc-util-apply a:focus {
	background: #a33b00;
	color: var(--sarc-white);
	text-decoration: none;
}

/* Ensure header stacking context sits above page content (e.g. form card z-index: 20).
   !important required — header.min.css loads after child theme and resets #masthead z-index. */
#masthead {
	z-index: 100 !important;
}

/* Kadence's header.min.css expands .dropdown-nav-special-toggle to width:100% with
   pointer-events:all on touch devices (@media hover:none), making it an invisible overlay
   that intercepts every tap before it reaches our sarc-nav-toggle buttons. Neutralize it. */
@media (hover: none) {
	#masthead .primary-menu-container .dropdown-nav-special-toggle {
		pointer-events: none !important;
	}
}

/* ── Main nav row ── */
#masthead .site-main-header-wrap {
	background: var(--sarc-white);
	border-bottom: 2px solid var(--sarc-light-mint);
	position: relative;
	z-index: auto;
	overflow: visible;
}

#masthead .site-main-header-wrap .site-header-row-container-inner {
	max-width: 1308px;
	margin: 0 auto;
	padding: 0 1.5rem;
	overflow: visible;
}

/* Main row grid: fixed logo column + flex nav column */
#masthead .site-main-header-inner-wrap {
	grid-template-columns: auto 1fr;
	overflow: visible;
	padding-right: 0 !important;
}

#masthead #site-navigation.main-navigation {
	width: 100%;
}

/* Pull logo section into the left padding zone */
#masthead .site-header-main-section-left {
	overflow: visible;
	margin-left: -36px;
}

/* Right-align nav items, push down to base-align with logo wordmark */
#masthead .site-header-main-section-right {
	justify-content: flex-end;
	align-items: flex-end;
	padding-bottom: 8px;
	overflow: visible;
}

#masthead #site-navigation.main-navigation .primary-menu-container > ul {
	flex-wrap: nowrap !important;
	justify-content: flex-end !important;
	white-space: nowrap;
	width: 100%;
}

#masthead #site-navigation.main-navigation .primary-menu-container,
#masthead .site-header-item-main-navigation {
	width: 100%;
	white-space: nowrap;
}

/* ── Logo: 290px wide, base-aligned with nav links ── */
/* z-index: 155 participates in #masthead's stacking context directly (site-main-header-wrap
   is z-index:auto so it creates no stacking context). 155 > utility bar (150) so the logo
   paints in front of the utility bar where they overlap. */
#masthead .site-branding {
	position: relative;
	z-index: 155;
	flex-shrink: 0;
}

#masthead .site-branding img.custom-logo {
	width: 290px;
	height: auto;
	max-width: none;
	margin-top: -66px;
	display: block;
}

/* ── Primary navigation typography ── */
#masthead #site-navigation.main-navigation .primary-menu-container ul li a {
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sarc-deep-forest);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 2px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease, text-underline-offset 0.2s ease;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 0.4rem !important;
	padding-right: 0.4rem !important;
	white-space: nowrap;
}

#masthead #site-navigation.main-navigation .primary-menu-container ul li a:hover,
#masthead #site-navigation.main-navigation .primary-menu-container ul li a:focus {
	color: var(--sarc-slate-green);
	text-decoration-color: currentColor;
	text-underline-offset: 4px;
}


/* Active/current page — top-level: underline only, no background */
#masthead #site-navigation.main-navigation .primary-menu-container ul li.current-menu-item > a,
#masthead #site-navigation.main-navigation .primary-menu-container ul li.current-menu-ancestor > a {
	color: var(--sarc-slate-green);
	text-decoration-color: currentColor;
	text-underline-offset: 4px;
}

/* Remove Kadence's dark background highlight from current-page items inside dropdown sub-menus */
#masthead #site-navigation.main-navigation .primary-menu-container .sub-menu li.current-menu-item > a,
#masthead #site-navigation.main-navigation .primary-menu-container .sub-menu li.current-menu-ancestor > a,
#masthead #site-navigation.main-navigation .primary-menu-container .sub-menu li.current_page_item > a,
#masthead #site-navigation.main-navigation .primary-menu-container .sub-menu li.current_page_ancestor > a,
#masthead #site-navigation.main-navigation .primary-menu-container .sub-menu li.current-menu-item > a:hover,
#masthead #site-navigation.main-navigation .primary-menu-container .sub-menu li.current-menu-item > a:focus {
	background: transparent !important;
	color: var(--sarc-deep-forest) !important;
}

/* ── Hide Kadence's built-in dropdown chevrons/arrows ── */
#masthead #site-navigation.main-navigation .primary-menu-container ul li .dropdown-nav-toggle,
#masthead #site-navigation.main-navigation .primary-menu-container ul li > a .nav-drop-icon,
#masthead #site-navigation.main-navigation .primary-menu-container ul li > a::after {
	display: none !important;
}

/* ── Desktop nav toggle buttons — replace parent <a>s for container-only items ── */
#masthead .primary-menu-container > ul > li.menu-item-has-children > button.sarc-nav-toggle {
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sarc-deep-forest);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 2px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease, text-underline-offset 0.2s ease;
	padding: 0 0.4rem !important;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	line-height: inherit;
}

#masthead .primary-menu-container > ul > li.menu-item-has-children > button.sarc-nav-toggle:hover,
#masthead .primary-menu-container > ul > li.menu-item-has-children > button.sarc-nav-toggle:focus,
#masthead .primary-menu-container > ul > li.is-open > button.sarc-nav-toggle {
	color: var(--sarc-slate-green);
	text-decoration-color: currentColor;
	text-underline-offset: 4px;
}



/* ── Dropdown sub-menu: hidden by default, shown on .is-open ── */
#masthead .primary-menu-container > ul > li.menu-item-has-children {
	position: relative;
}

/* Positioning context for centered mega-menu */
#masthead .primary-menu-container > ul {
	position: relative;
}

#masthead .primary-menu-container > ul > li > ul.sub-menu {
	display: none !important;
	position: absolute;
	top: calc(100% + 6px);
	left: -20px;
	z-index: 200;
}

/* News & Events (last regular dropdown): right-align at compressed widths where it would overflow */
@media (max-width: 1320px) {
	#masthead .primary-menu-container > ul > li.sarc-dropdown-right > ul.sub-menu {
		left: auto;
		right: 0;
	}
}

#masthead .primary-menu-container > ul > li.is-open > ul.sub-menu {
	display: block !important;
	animation: sarc-dropdown-in 0.15s ease;
}

@keyframes sarc-dropdown-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Dropdown panel: card style ── */
#masthead #site-navigation.main-navigation .header-menu-container ul ul.sub-menu {
	background: var(--sarc-near-white-mint);
	border: 1px solid var(--sarc-light-mint);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	min-width: 260px;
	padding: 0 !important;
}

/* ── Dropdown links: match mobile drawer style ── */
#masthead #site-navigation.main-navigation .header-menu-container ul ul.sub-menu li a {
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 1.125rem;
	font-weight: 400;
	padding: 0.8rem 2rem !important;
	color: var(--sarc-deep-forest);
	display: block;
	width: auto !important;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 2px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease, background-color 0.15s ease;
	border-bottom: 1px solid var(--sarc-light-mint);
}

#masthead #site-navigation.main-navigation .header-menu-container ul ul.sub-menu li:last-child > a {
	border-bottom: none;
}

#masthead #site-navigation.main-navigation .header-menu-container ul ul.sub-menu li a:hover,
#masthead #site-navigation.main-navigation .header-menu-container ul ul.sub-menu li a:focus {
	color: var(--sarc-slate-green);
	text-decoration-color: currentColor;
	text-underline-offset: 4px;
	background: var(--sarc-white);
}

#masthead #site-navigation.main-navigation .header-menu-container ul ul.sub-menu li a:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: -3px;
}

/* ── Mega-menu (About): 3-column, centered under nav ── */

/* Override li positioning so the panel escapes to the ul-level anchor */
#masthead .primary-menu-container > ul > li.sarc-mega-menu {
	position: static;
}

/* Panel: grid layout, centered — opacity-only animation avoids transform conflict */
#masthead .primary-menu-container > ul > li.sarc-mega-menu.is-open > ul.sub-menu {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	width: 900px;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.5rem 0;
	animation: sarc-mega-in 0.15s ease;
}

@keyframes sarc-mega-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Nested sub-menus inside mega-menu: render inline, no panel styling */
#masthead .primary-menu-container > ul > li.sarc-mega-menu.is-open > ul.sub-menu > li > ul.sub-menu {
	display: block !important;
	position: static !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	box-shadow: none !important;
	border: none !important;
	background: none !important;
	padding: 0 !important;
	min-width: 0 !important;
	width: auto !important;
	animation: none !important;
	z-index: auto !important;
}

/* Remove divider lines from links inside mega-menu columns — column layout makes them unnecessary */
#masthead .primary-menu-container > ul > li.sarc-mega-menu.is-open > ul.sub-menu > li > ul.sub-menu li a {
	border-bottom: none !important;
}

/* ── Mega-menu column headers (non-clickable): bold, mobile-drawer style ── */

/* Background on the li fills the entire row behind all three header cells */
#masthead #site-navigation.main-navigation .header-menu-container ul ul.sub-menu li.sarc-mega-heading {
	background: var(--sarc-near-white-mint);
}

/* More specific than the general link rule (2,4,3) vs (2,3,3) so it wins without !important on padding */
#masthead #site-navigation.main-navigation .header-menu-container ul ul.sub-menu li.sarc-mega-heading > a {
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sarc-deep-forest) !important;
	text-decoration: none !important;
	text-decoration-color: transparent !important;
	background: none !important;
	pointer-events: none;
	cursor: default;
	padding: 1rem 2rem 0;
	border-bottom: 2px solid var(--sarc-light-mint);
}

/* ── Skip navigation link ── */
.sarc-skip-nav {
	position: absolute;
	top: -9999px;
	left: 1rem;
	background: var(--sarc-near-white-mint);
	color: var(--sarc-dark-forest) !important;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	padding: 0.6rem 1.25rem;
	border-radius: 0 0 4px 4px;
	border: 1px solid var(--sarc-light-mint);
	border-top: none;
	box-shadow: var(--card-shadow);
	text-decoration: none;
	z-index: 200000;
	transition: top 0.1s;
}

.sarc-skip-nav:focus {
	top: 0;
}

.sarc-skip-nav:hover,
.sarc-skip-nav:focus {
	color: var(--sarc-dark-forest) !important;
	text-decoration: underline;
}


/* ── Mobile: utility bar (language + search only), logo, hamburger ── */
@media (max-width: 991px) {

	/* Keep utility bar visible but stripped to language + search */
	#secondary-navigation .secondary-menu-container ul li.sarc-util-transparency,
	#secondary-navigation .secondary-menu-container ul li.sarc-util-notices,
	#secondary-navigation .secondary-menu-container ul li.sarc-util-apply {
		display: none;
	}

	/* "Select Language:" → "Language:" — hide the "Select Language:" span */
	.sarc-lang-label {
		display: none;
	}

	/* Inject "Language:" label before TRP switcher */
	#masthead .header-html .sarc-lang-wrap::before {
		content: "Language:";
		font-family: var(--wp--preset--font-family--proxima-nova);
		font-size: 1.125rem;
		font-weight: 400;
		color: var(--sarc-slate-green);
	}

	/* Utility bar: tighten padding, language nudge */
	#masthead .site-top-header-wrap .site-header-row-container-inner {
		padding: 0.4rem 1.5rem;
	}

	/* Nudge language wrapper down 1px to match Search baseline */
	#masthead .header-html .header-html-inner {
		position: relative;
		top: 1px;
	}

	/* Logo row: padding + overlap into utility bar */
	#masthead .site-main-header-wrap .site-header-row-container-inner {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	#masthead .site-branding img.custom-logo {
		margin-top: -50px !important;
		width: 290px !important;
		height: auto !important;
	}

	#masthead .site-header-main-section-left {
		justify-content: flex-start !important;
		align-items: center;
	}

	#masthead .site-branding {
		margin-left: 0;
	}

	/* ── Hamburger / Menu button — matches Learn More sizing ── */
	#masthead .menu-toggle-open {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
		font-size: 1.125rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		color: var(--sarc-dark-forest);
		background: var(--sarc-white);
		border: 2px solid var(--sarc-dark-forest);
		border-radius: 4px;
		padding: 14px 28px;
		cursor: pointer;
		line-height: 1;
		transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	}

	#masthead .menu-toggle-open:hover,
	#masthead .menu-toggle-open:focus {
		background: var(--sarc-dark-forest);
		border-color: var(--sarc-dark-forest);
		color: var(--sarc-white);
	}


	#masthead .menu-toggle-open .menu-toggle-icon {
		font-size: 1.25rem;
		line-height: 1;
	}

	/* TRP current language + Search: match Menu at 1.125rem */
	#masthead .header-html .trp-ls-shortcode-current-language a,
	#masthead .search-toggle-open-container .search-toggle-open {
		font-size: 1.125rem !important;
	}
}

/* ── Small phones (≤499px): scale logo proportionally so Menu button stays on-screen ──
   290px logo / 500px viewport = 58vw. Below 500px this keeps the ratio intact. */
@media (max-width: 499px) {
	#masthead .site-branding img.custom-logo {
		width: 58vw !important;
		margin-top: -42px !important;
	}
	/* Column gap creates the logo→button breathing room */
	#masthead .site-main-header-inner-wrap {
		column-gap: 20px;
	}
	/* Reduce horizontal padding 28px → 18px to stay within the tighter right column */
	#masthead .menu-toggle-open {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}

/* ── Mobile drawer ── */
@media (max-width: 991px) {

	/* Drawer panel: white background */
	#mobile-drawer .drawer-inner {
		background: var(--sarc-white);
	}

	/* Close button: dark on white */
	#mobile-drawer .drawer-header .drawer-toggle {
		color: var(--sarc-dark-forest);
	}

	#mobile-drawer .menu-toggle-close .toggle-close-bar {
		background: var(--sarc-dark-forest);
	}

	/* Parent row: full-width clickable flex row */
	#mobile-drawer .drawer-nav-drop-wrap {
		display: flex;
		align-items: center;
		cursor: pointer;
		border-bottom: 1px solid var(--sarc-light-mint);
		transition: background 0.15s ease;
	}

	#mobile-drawer .drawer-nav-drop-wrap:hover,
	#mobile-drawer .drawer-nav-drop-wrap:focus-within {
		background: var(--sarc-near-white-mint);
	}

	/* Parent section header link */
	#mobile-drawer .drawer-nav-drop-wrap > a {
		flex: 1;
		font-family: var(--wp--preset--font-family--proxima-nova);
		font-size: 1.125rem;
		font-weight: 700 !important;
		color: var(--sarc-deep-forest) !important;
		padding: 0.85rem 1.25rem;
		text-decoration: underline;
		text-decoration-color: transparent;
		text-underline-offset: 2px;
		transition: color 0.2s ease, text-decoration-color 0.2s ease, text-underline-offset 0.2s ease;
	}

	#mobile-drawer .drawer-nav-drop-wrap:hover > a,
	#mobile-drawer .drawer-nav-drop-wrap:focus-within > a {
		color: var(--sarc-slate-green) !important;
		text-decoration-color: currentColor;
		text-underline-offset: 4px;
	}

	/* Toggle arrow button */
	#mobile-drawer .drawer-sub-toggle {
		color: var(--sarc-slate-green);
		padding: 0.85rem 1.25rem;
		background: none;
		border: none;
		border-left: 1px solid var(--sarc-light-mint);
		cursor: pointer;
		flex-shrink: 0;
	}

	#mobile-drawer .drawer-sub-toggle:focus-visible {
		outline: 3px solid var(--sarc-dark-forest);
		outline-offset: -3px;
	}

	/* Child page links — drawer lives in #mobile-drawer, not #mobile-header */
	#mobile-drawer .mobile-navigation ul li a {
		font-family: var(--wp--preset--font-family--proxima-nova);
		font-size: 1.125rem;
		font-weight: 400;
		color: var(--sarc-deep-forest);
		padding: 0.75rem 1.5rem;
		display: block;
		border-bottom: 1px solid var(--sarc-light-mint);
		background: none;
		text-decoration: underline;
		text-decoration-color: transparent;
		text-underline-offset: 2px;
		transition: color 0.2s ease, text-decoration-color 0.2s ease, text-underline-offset 0.2s ease;
	}

	#mobile-drawer .mobile-navigation ul li a:hover,
	#mobile-drawer .mobile-navigation ul li a:focus {
		color: var(--sarc-slate-green);
		text-decoration-color: currentColor;
		text-underline-offset: 4px;
		background: var(--sarc-near-white-mint);
	}

	#mobile-drawer .mobile-navigation ul li a:focus-visible {
		outline: 3px solid var(--sarc-dark-forest);
		outline-offset: -3px;
	}

	/* Sub-menu children: indent */
	#mobile-drawer .mobile-navigation ul ul.sub-menu li a {
		padding-left: 2.5rem;
	}

	/* Utility buttons below nav */
	.sarc-drawer-actions {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		padding: 1.5rem 1.25rem;
		border-top: 2px solid var(--sarc-light-mint);
	}

	.sarc-drawer-actions a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		width: 100%;
		padding: 0.8rem 1.5rem;
		border-radius: 4px;
		font-family: var(--wp--preset--font-family--proxima-nova);
		font-size: 1.125rem;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0.02em;
		text-decoration: none;
		box-sizing: border-box;
		transition: background-color 0.15s ease;
	}

	.sarc-drawer-actions .sarc-util-transparency {
		background: #fccc07;
		color: var(--sarc-deep-forest);
	}

	.sarc-drawer-actions .sarc-util-transparency:hover,
	.sarc-drawer-actions .sarc-util-transparency:focus {
		background: #e0b500;
	}

	.sarc-drawer-actions .sarc-util-transparency img {
		width: 1.2em;
		height: auto;
		flex-shrink: 0;
	}

	.sarc-drawer-actions .sarc-util-notices {
		background: #a7d3f7;
		color: var(--sarc-deep-forest);
	}

	.sarc-drawer-actions .sarc-util-notices:hover,
	.sarc-drawer-actions .sarc-util-notices:focus {
		background: #7db9e8;
	}

	.sarc-drawer-actions .sarc-util-apply {
		background: var(--sarc-burnt-orange);
		color: var(--sarc-white);
	}

	.sarc-drawer-actions .sarc-util-apply:hover,
	.sarc-drawer-actions .sarc-util-apply:focus {
		background: #a33b00;
		color: var(--sarc-white);
	}
}

/* ── Search drawer — base styles (all breakpoints) ── */

#search-drawer .drawer-inner {
	background: var(--sarc-soft-sage) !important;
	color: var(--sarc-deep-forest) !important;
}

/* Close button: dark-forest square, white ×, reverses on hover */
#search-drawer .drawer-header .drawer-toggle {
	font-size: 24px !important;
	width: 1em !important;
	height: 1em !important;
	padding: 0.25em !important;
	margin-top: 1rem !important;
	margin-right: 1rem !important;
	box-sizing: content-box !important;
	background: var(--sarc-dark-forest) !important;
	border: 2px solid var(--sarc-white) !important;
	border-radius: 4px !important;
	color: var(--sarc-white) !important;
	box-shadow: none !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
#search-drawer .drawer-header .drawer-toggle:hover,
#search-drawer .drawer-header .drawer-toggle:focus {
	background: var(--sarc-white) !important;
	color: var(--sarc-dark-forest) !important;
	border-color: var(--sarc-dark-forest) !important;
}

/* Input field */
#search-drawer .drawer-inner input.search-field {
	background: var(--sarc-white) !important;
	color: var(--sarc-deep-forest) !important;
	font-family: var(--wp--preset--font-family--proxima-nova) !important;
	font-size: 2rem !important;
	padding: 1.3rem 5rem 1.3rem 1rem !important;
	border: 1px solid var(--sarc-slate-green) !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	line-height: 1.4 !important;
}
#search-drawer .drawer-inner input.search-field::placeholder {
	color: var(--sarc-slate-green) !important;
	opacity: 1;
}
#search-drawer .drawer-inner input.search-field:focus {
	color: var(--sarc-deep-forest) !important;
	border-color: var(--sarc-dark-forest) !important;
	box-shadow: none !important;
}
/* !important required — base rule has box-shadow: none !important which beats the global */
#search-drawer .drawer-inner input.search-field:focus-visible {
	outline: 3px solid var(--sarc-dark-forest) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px var(--sarc-white) !important;
	border-color: var(--sarc-dark-forest) !important;
}

/* Submit icon — slate-green by default, darkens to deep-forest on hover (same pattern as 404 form) */
#search-drawer .drawer-inner .kadence-search-icon-wrap {
	color: var(--sarc-slate-green) !important;
	width: 60px !important;
	transition: color var(--transition) !important;
}
#search-drawer .drawer-inner .kadence-search-icon-wrap svg {
	width: 31px !important;
	height: 34px !important;
}
#search-drawer .drawer-inner .search-submit[type=submit] {
	width: 60px !important;
	border-radius: 4px !important;
}
#search-drawer .drawer-inner .search-submit[type=submit]:hover ~ .kadence-search-icon-wrap,
#search-drawer .drawer-inner button[type=submit]:hover ~ .kadence-search-icon-wrap {
	color: var(--sarc-deep-forest) !important;
}

/* ── Desktop: search confined to header band (≥992px) ── */
/*
 * JS (sarc_search_in_header) moves #search-drawer into #masthead at ≥992px.
 * The #masthead parent makes these overrides more specific than the base rules,
 * winning the !important cascade without disrupting mobile (≤991px) behavior.
 */
@media (min-width: 992px) {
	/* Full-header overlay — absolute within #masthead (position:relative) */
	#masthead #search-drawer {
		position: absolute !important;
		top: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		z-index: 200 !important;
	}
	/* No page-level backdrop */
	#masthead #search-drawer .drawer-overlay {
		display: none !important;
	}
	/* drawer-inner: covers the full header, laid out as a horizontal flex row */
	#masthead #search-drawer .drawer-inner {
		position: absolute !important;
		top: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		max-width: none !important;
		transform: none !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		padding: 0 2rem !important;
		gap: 1.5rem !important;
		overflow: visible !important;
	}
	/* Search form: stretches to fill available space */
	#masthead #search-drawer .drawer-content {
		flex: 1 !important;
		order: 1 !important;
		position: static !important;
		padding: 0 !important;
	}
	#masthead #search-drawer .drawer-content form {
		max-width: none !important;
		width: 100% !important;
		margin: 0 !important;
	}
	/* Close button: right of the form, no extra margin */
	#masthead #search-drawer .drawer-header {
		flex: none !important;
		order: 2 !important;
		padding: 0 !important;
		min-height: 0 !important;
		justify-content: flex-end !important;
	}
	#masthead #search-drawer .drawer-header .drawer-toggle {
		margin-top: 0 !important;
		margin-right: 0 !important;
	}
	/* Scale input to fit within header height */
	#masthead #search-drawer .drawer-inner input.search-field {
		font-size: 1.5rem !important;
		padding: 0.6rem 5rem 0.6rem 1rem !important;
	}
	#masthead #search-drawer .drawer-inner .kadence-search-icon-wrap svg {
		width: 24px !important;
		height: 26px !important;
	}
}

/* ── "News & Events" → "News" at narrowest desktop widths ── */
@media (min-width: 992px) and (max-width: 1024px) {
	.sarc-nav-hide-narrow {
		display: none;
	}
}

/* ── Hide Contact Us at narrow intermediate widths ── */
@media (min-width: 992px) and (max-width: 1177px) {
	#masthead #site-navigation.main-navigation .primary-menu-container > ul > li:last-child {
		display: none;
	}
}

/* ── Responsive: compress nav at intermediate widths ── */
@media (min-width: 992px) and (max-width: 1320px) {
	/* Lock both row containers to the same width/padding so right edges align */
	#masthead .site-top-header-wrap .site-header-row-container-inner,
	#masthead .site-main-header-wrap .site-header-row-container-inner {
		max-width: 1308px;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		margin-left: auto;
		margin-right: auto;
	}

	#masthead #site-navigation.main-navigation .primary-menu-container ul li a {
		font-size: 0.9375rem;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	#masthead .primary-menu-container > ul > li.menu-item-has-children > button.sarc-nav-toggle {
		font-size: 0.9375rem;
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
	}

	#secondary-navigation .secondary-menu-container ul li a {
		font-size: 0.9375rem;
		padding-left: 0.875rem;
		padding-right: 0.875rem;
	}

	#secondary-navigation .secondary-menu-container ul li.sarc-util-apply a {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.sarc-lang-label,
	#masthead .header-html .trp-ls-shortcode-current-language a {
		font-size: 0.9375rem !important;
	}

	#masthead .search-toggle-open-container .search-toggle-open {
		font-size: 0.9375rem;
	}

	/* Dropdown link compression — reduce font and padding proportionally */
	#masthead #site-navigation.main-navigation .header-menu-container ul ul.sub-menu li a {
		font-size: 0.9375rem;
		padding: 0.73rem 1.5rem !important;
	}

	/* Mega-menu header compression — more specific selector to win */
	#masthead #site-navigation.main-navigation .header-menu-container ul ul.sub-menu li.sarc-mega-heading > a {
		font-size: 0.9375rem;
		padding: 1rem 1.5rem 0 !important;
	}

	/* Mega-menu panel: slightly narrower at compressed widths */
	#masthead .primary-menu-container > ul > li.sarc-mega-menu.is-open > ul.sub-menu {
		width: 740px;
	}
}


/* ============================================================
   FOOTER
   ============================================================ */

/* ── Pre-footer: shared green band ─────────────────────────── */

.sarc-prefooter {
	background: var(--sarc-green);
	width: 100%;
}

/* Homepage variant: logo + tagline.
   max-width and padding intentionally match the header container (1308px / 1.5rem)
   so that applying margin-left: -36px to the logo link aligns it exactly with
   the header logo at all viewport widths — see .sarc-prefooter-logo-link below. */
.sarc-prefooter--home .sarc-prefooter-inner {
	max-width: 1308px;
	margin: 0 auto;
	padding: 3.5rem 1.5rem;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.sarc-prefooter-logo {
	width: 290px; /* matches header logo width */
	height: auto;
	display: block;
}

.sarc-prefooter-tagline {
	grid-column: 2 / 4; /* spans cols 2 + 3, left edge = Clients/Caretakers column */
}

.sarc-prefooter-logo-link {
	display: inline-block;
	flex-shrink: 0;
	/* Pull logo left into the padding zone. Measured at 1389px viewport:
	   header logo at 53px, pre-footer inner at 41px + 24px padding = 65px start.
	   65 - 12 = 53px — matches header logo exactly. */
	margin-left: -12px;
}

.sarc-prefooter-logo-link:focus-visible {
	outline: 3px solid var(--sarc-white);
	outline-offset: 4px;
}

.sarc-prefooter-tagline {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1.5rem; /* 24pt */
	font-weight: 700;
	color: var(--sarc-white);
	line-height: 1.5;
	margin: 0;
}

/* Interior-page variant: form card floating over a narrow green strip.
   Mirrors the hero form approach:
     • body:not(.home) main gets padding-bottom: 80px — empty zone at page bottom
     • margin-top: -80px pulls the pre-footer up so the card starts at real content bottom
     • ::before creates the narrow visible green strip (80px tall, starting at the
       natural content-bottom line — i.e., 80px into the pre-footer)
     • The footer-nav-row sits immediately below the pre-footer (card bottom) */
.sarc-prefooter--form {
	background: transparent; /* green handled entirely by ::before */
	margin-top: -80px;       /* pull up over page-content padding zone */
	position: relative;
	z-index: 10;             /* above <main> content and footer nav */
	overflow: visible;
}
/* Above the dark-green bar (first 80px) match the page content (white).
   Below the bar match the footer background (near-white-mint).
   The home page controls its own prefooter background separately. */
body:not(.home) .sarc-prefooter--form {
	background: linear-gradient(
		to bottom,
		var(--sarc-near-white-mint) 80px,
		var(--sarc-near-white) 80px
	);
}
/* Events calendar has a white page background — top gradient zone must match. */
body.post-type-archive-tribe_events .sarc-prefooter--form {
	background: linear-gradient(
		to bottom,
		var(--sarc-white) 80px,
		var(--sarc-near-white) 80px
	);
}

/* The narrow visible green strip */
.sarc-prefooter--form::before {
	content: '';
	position: absolute;
	top: 80px;               /* sits at the natural page-content bottom line */
	left: 0;
	right: 0;
	height: 80px;
	background: var(--sarc-green);
	z-index: 0;
}

/* Reserve bottom padding on interior page main content so real content is never
   covered — the form card overlaps only the empty padding zone. */
body:not(.home) main {
	padding-bottom: 80px;
}

.sarc-prefooter--form .sarc-prefooter-inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 2rem;         /* vertical padding removed — card drives the height */
	position: relative;
	z-index: 1;              /* above the ::before green strip */
}

.sarc-prefooter-card {
	max-width: 530px;
}

/* ── Main footer wrapper ────────────────────────────────────── */

.sarc-footer {
	background: var(--sarc-near-white); /* #F6F9F8 */
}

/* Shared inner container — content-width centred */
.sarc-footer-nav-inner,
.sarc-footer-feed-inner,
.sarc-footer-social-inner,
.sarc-footer-copyright-inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding-left: 2rem;
	padding-right: 2rem;
}

/* ── Nav columns row ────────────────────────────────────────── */

.sarc-footer-nav-row {
	padding-top: 4rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--sarc-light-mint);
}

.sarc-footer-nav-inner {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

/* Base menu list styles (both flat and section-heading menus) */
.sarc-footer-menu,
.sarc-footer-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Flat col-1 links */
.sarc-footer-col--1 .sarc-footer-menu > li {
	margin-bottom: 0.9rem;
}

.sarc-footer-col--1 .sarc-footer-menu > li > a {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1.5rem; /* 24pt */
	font-weight: 500;
	color: var(--sarc-deep-forest);
	text-decoration: none;
	transition: color var(--transition);
}

.sarc-footer-col--1 .sarc-footer-menu > li > a:hover,
.sarc-footer-col--1 .sarc-footer-menu > li > a:focus {
	color: var(--sarc-orange);
	text-decoration: underline;
}

.sarc-footer-col--1 .sarc-footer-menu > li > a:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 2px;
}

/* Section-heading menus (col 2 & 3): flatten sub-menus */
.sarc-footer-menu--sections > li {
	margin-bottom: 0.5rem;
}

/* Parent items with href="#" — styled as non-link headings */
.sarc-footer-menu--sections > li > a[href="#"] {
	font-family: var(--wp--preset--font-family--brandon-grotesque), sans-serif;
	font-size: 1.5rem; /* 24pt */
	font-weight: 700;
	color: var(--sarc-deep-forest);
	text-decoration: none;
	pointer-events: none;
	cursor: default;
	display: block;
	padding-bottom: 0.5rem;
	margin-top: 1.5rem;
	margin-bottom: 0.25rem;
}

/* First heading in the column: no top margin */
.sarc-footer-menu--sections > li:first-child > a[href="#"] {
	margin-top: 0;
}

/* Sub-menu: render flat (not as a dropdown) */
.sarc-footer-menu--sections .sub-menu {
	position: static !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-width: 0 !important;
	transform: none !important;
	pointer-events: auto !important;
}

.sarc-footer-menu--sections .sub-menu li {
	margin-bottom: 0.75rem;
}

.sarc-footer-menu--sections .sub-menu li a {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1.5rem; /* 24pt */
	font-weight: 500;
	color: var(--sarc-deep-forest);
	text-decoration: none;
	transition: color var(--transition);
}

.sarc-footer-menu--sections .sub-menu li a:hover,
.sarc-footer-menu--sections .sub-menu li a:focus {
	color: var(--sarc-orange);
	text-decoration: underline;
}

.sarc-footer-menu--sections .sub-menu li a:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 2px;
}

/* Hide any dropdown-toggle chevrons Kadence might inject */
.sarc-footer-menu .dropdown-nav-toggle,
.sarc-footer-menu .nav-drop-icon {
	display: none !important;
}

/* ── Service Providers spacer (removed from col-2 Clients submenu) ─ */
/* Preserves the visual gap between Self Determination Program and Caretakers */
.sarc-footer-col--2 .sarc-footer-menu--sections > li:first-child > .sub-menu > li:last-child {
	margin-bottom: 3.5rem;
}

/* ── Instagram feed row ─────────────────────────────────────── */

.sarc-footer-feed-row {
	padding-top: 2rem;
	padding-bottom: 1rem;
}

/* "Follow Us On Social Media" label above the feed */
.sarc-footer-feed-label {
	padding-bottom: 0.75rem;
}

.sarc-footer-feed-label-inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding-left: 2rem;
	padding-right: 2rem;
}

.sarc-footer-social-label {
	font-family: var(--wp--preset--font-family--brandon-grotesque), sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--sarc-deep-forest);
	margin: 0;
}

/* Feed goes full-width — override the shared max-width/padding inner rule */
.sarc-footer-feed-inner {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.sarc-footer-feed-wrap {
	background: var(--sarc-white);
	border-radius: 0; /* no radius — full-width strip */
	height: 300px;
	overflow: hidden;
	position: relative; /* anchor for injected nav buttons */
}

/* Single-row strip: override plugin's multi-row grid with a nowrap flex row.
   !important needed because the plugin sets grid-template-columns inline. */
.sarc-footer-feed-wrap .instagram-gallery-feed {
	height: 300px;
	overflow: hidden;
}

.sarc-footer-feed-wrap .instagram-gallery-list {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	height: 300px !important;
	gap: 0 !important;
	/* Native horizontal scroll — enables touch swipe and JS scrollBy */
	overflow-x: scroll !important;
	overflow-y: hidden !important;
	scroll-behavior: smooth !important;
	scroll-snap-type: x mandatory !important;
	/* Hide scrollbar in all browsers */
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
}

.sarc-footer-feed-wrap .instagram-gallery-list::-webkit-scrollbar {
	display: none;
}

/* Each post: fixed 300×300px square — as many fit as the viewport allows */
.sarc-footer-feed-wrap .instagram-gallery-item {
	flex: 0 0 300px !important;
	width: 300px !important;
	height: 300px !important;
	scroll-snap-align: start !important;
}

/* Hide plugin's original low-contrast arrow buttons */
.sarc-footer-feed-wrap .insta-gallery-slider__button-container {
	display: none !important;
}

/* ── Injected feed nav buttons ── */
.sarc-feed-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 44px !important;   /* !important beats the catch-all width:100% rule below */
	height: 44px !important;
	aspect-ratio: 1 / 1;
	padding: 0;
	box-sizing: border-box;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--sarc-dark-forest);
	color: var(--sarc-white);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	transition: background-color var(--transition);
}

.sarc-feed-nav-btn:hover,
.sarc-feed-nav-btn:focus {
	background-color: var(--sarc-green);
}

.sarc-feed-nav-btn:focus-visible {
	outline: 3px solid var(--sarc-white);
	outline-offset: 3px;
}

.sarc-feed-nav-btn--prev { left: 8px; }
.sarc-feed-nav-btn--next { right: 8px; }

/* Ensure all image wrapper layers fill the item height */
.sarc-footer-feed-wrap .instagram-gallery-item__wrap,
.sarc-footer-feed-wrap .instagram-gallery-item__media,
.sarc-footer-feed-wrap .instagram-gallery-item__media-wrap {
	height: 100% !important;
	width: 100% !important;
}

/* Image fills and covers the square */
.sarc-footer-feed-wrap .instagram-gallery-item__image {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Placeholder shown until plugin is connected */
.sarc-footer-feed-placeholder {
	padding: 3rem;
	text-align: center;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1rem;
	color: var(--sarc-slate-green);
}

/* Once Social Feed Gallery shortcode is in place, let it fill the wrap.
   Exclude our injected nav buttons so they keep their 44px width. */
.sarc-footer-feed-wrap > :not(.sarc-footer-feed-placeholder):not(.sarc-feed-nav-btn) {
	width: 100%;
}

/* ── Social icons row ───────────────────────────────────────── */

.sarc-footer-social-row {
	padding-top: 1.75rem;
	padding-bottom: 2rem;
}

.sarc-footer-social-icons {
	display: flex;
	gap: 0.875rem;
	align-items: center;
	flex-wrap: wrap;
}

.sarc-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 2px solid var(--sarc-deep-forest);
	color: var(--sarc-deep-forest);
	background: transparent;
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
	flex-shrink: 0;
}

.sarc-social-icon svg {
	fill: currentColor;
	width: 18px;
	height: 18px;
	display: block;
}

/* YouTube play-triangle: cutout against the button background at each state.
   Rest  → near-white fill (matches footer bg, so triangle appears as a cutout).
   Hover → dark-forest fill (matches hover bg, so triangle stays invisible/cutout). */
.sarc-yt-triangle            { fill: var(--sarc-near-white); }
.sarc-social-icon:hover .sarc-yt-triangle,
.sarc-social-icon:focus .sarc-yt-triangle { fill: var(--sarc-deep-forest); }

.sarc-social-icon:hover,
.sarc-social-icon:focus {
	background-color: var(--sarc-deep-forest);
	color: var(--sarc-white);
	border-color: var(--sarc-deep-forest);
}

.sarc-social-icon:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 3px;
}

/* ── Copyright bar ──────────────────────────────────────────── */

.sarc-footer-copyright-bar {
	background: var(--sarc-dark-forest); /* #0C4532 */
}

.sarc-footer-copyright-inner {
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.sarc-footer-copyright-bar p {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1rem;
	font-weight: 500;
	color: var(--sarc-white);
	margin: 0;
}

/* ── Tablet edge padding (992–1224px) ───────────────────────── */
/* Add footer rows to the sitewide tablet padding block */

@media (min-width: 992px) and (max-width: 1224px) {
	.sarc-prefooter--home .sarc-prefooter-inner,
	.sarc-prefooter--form .sarc-prefooter-inner,
	.sarc-footer-nav-inner,
	.sarc-footer-feed-label-inner,
	.sarc-footer-social-inner,
	.sarc-footer-copyright-inner {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}
}

/* ── Mobile (≤991px) ────────────────────────────────────────── */

@media (max-width: 991px) {
	/* Pre-footer: stack logo above tagline */
	.sarc-prefooter--home .sarc-prefooter-inner {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		padding: 2.5rem 1.5rem;
	}

	.sarc-prefooter-logo-link {
		margin-left: -22px;
	}

	.sarc-prefooter-tagline {
		grid-column: auto; /* reset span — single-column stack */
		font-size: 1.125rem;
	}

	/* Interior pre-footer: full-width card, no vertical padding */
	.sarc-prefooter--form .sarc-prefooter-inner {
		padding: 0 1.5rem;
	}

	.sarc-prefooter-card {
		max-width: 100%;
	}

	/* Nav: keep 3 columns but tighten spacing and reduce font sizes */
	.sarc-footer-nav-inner {
		gap: 1.5rem;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.sarc-footer-nav-row {
		padding-top: 2.5rem;
		padding-bottom: 2rem;
	}

	.sarc-footer-col--1 .sarc-footer-menu > li {
		margin-bottom: 0.5rem;
	}

	/* First heading in col 2 / col 3: no extra top margin at tablet */
	.sarc-footer-menu--sections > li:first-child > a[href="#"] {
		margin-top: 0;
	}

	.sarc-footer-col--1 .sarc-footer-menu > li > a,
	.sarc-footer-menu--sections > li > a[href="#"] {
		font-size: 1rem;
	}

	.sarc-footer-menu--sections .sub-menu li a {
		font-size: 0.875rem;
	}

	/* Social feed label: scale heading to match column headings at mobile */
	.sarc-footer-social-label {
		font-size: 1rem;
	}

	.sarc-footer-feed-label-inner {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	/* Service Providers spacer: scale down for smaller list items at mobile */
	.sarc-footer-col--2 .sarc-footer-menu--sections > li:first-child > .sub-menu > li:last-child {
		margin-bottom: 2.25rem;
	}

	/* Social, copyright: standard padding */
	.sarc-footer-social-inner,
	.sarc-footer-copyright-inner {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* ── Small phones (≤499px): hide nav links, show Site Map only ── */

@media (max-width: 499px) {
	/* Hide cols 2 and 3 entirely */
	.sarc-footer-col--2,
	.sarc-footer-col--3 {
		display: none;
	}

	/* Hide all col 1 items, then reveal Site Map */
	.sarc-footer-col--1 .sarc-footer-menu > li {
		display: none;
	}

	.sarc-footer-col--1 .sarc-footer-menu > li.sarc-site-map {
		display: block;
	}
}

/* ── Wide desktop: zero inner padding so edges align with hero content ── */
/* This block must live AFTER the base 2rem rules above to win the cascade. */

@media (min-width: 1225px) {
	/* Pre-footer --home keeps its 1.5rem padding (mirrors the header container) */
	.sarc-prefooter--form .sarc-prefooter-inner,
	.sarc-footer-nav-inner,
	.sarc-footer-feed-label-inner,
	.sarc-footer-social-inner,
	.sarc-footer-copyright-inner {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ── Safe-area insets (iPhone landscape) ────────────────────── */

@supports (padding-left: env(safe-area-inset-left)) {
	@media (max-width: 991px) {
		.sarc-prefooter--home .sarc-prefooter-inner,
		.sarc-prefooter--form .sarc-prefooter-inner,
		.sarc-footer-nav-inner,
		.sarc-footer-feed-label-inner,
		.sarc-footer-social-inner,
		.sarc-footer-copyright-inner {
			padding-left:  max(1.5rem, env(safe-area-inset-left))  !important;
			padding-right: max(1.5rem, env(safe-area-inset-right)) !important;
		}
	}
}


/* ============================================================
   INTERIOR PAGE TEMPLATE  (page.php)
   ============================================================ */

/* ── Page title banner ─────────────────────────────────────── */

.sarc-page-banner {
	background: var(--sarc-dark-forest);
}
.sarc-page-banner__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 2rem 2rem;
}
.sarc-page-banner__title {
	font-family: var(--wp--preset--font-family--brandon-grotesque), sans-serif;
	font-size: 3rem;      /* 48pt — H2 visual weight, compact for a title band */
	font-weight: 700;
	color: var(--sarc-white);
	margin: 0;
	line-height: 1.15;
}

/* ── Interior body wrapper ─────────────────────────────────── */

.sarc-interior-body {
	background: var(--sarc-near-white-mint);
	padding-bottom: 5rem;
}

/*
 * Desktop grid (≥769px):
 *   Row 1: breadcrumb spanning both columns
 *   Row 2: sidebar (1/3) | content (2/3)
 */
.sarc-interior-body__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 1.5rem 2rem 0;
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"breadcrumb breadcrumb"
		"sidebar    content";
	column-gap: 2.5rem;
	align-items: start;
}

/* Pages without a matching sidebar use the full content width */
.sarc-interior-body__inner.no-sidebar {
	grid-template-columns: 1fr;
	grid-template-areas:
		"breadcrumb"
		"content";
}

/* ── Breadcrumb ─────────────────────────────────────────────── */

.sarc-breadcrumb-wrap {
	grid-area: breadcrumb;
	padding-bottom: 1.5rem;
}
/* Yoast breadcrumb output is transformed to <ol><li> by sarc_breadcrumb_to_list()
   in functions.php Section 16a. Each <li> holds only a link or the current-page
   span — no adjacent non-link text — so axe link-in-text-block cannot fire.
   The separator is a CSS ::after pseudo-element; screen readers skip it. */
.sarc-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sarc-deep-forest);
}
/* CSS separator — replaces the removed <span class="breadcrumb-separator"> */
.sarc-breadcrumb li:not(:last-child)::after {
	content: '\203A'; /* › — Unicode escape avoids UTF-8/Latin-1 charset mismatch */
	color: var(--sarc-slate-green);
	font-weight: 400;
	margin: 0 0.35em;
}
.sarc-breadcrumb li a {
	color: var(--sarc-dark-forest);
	text-decoration: none;
}
.sarc-breadcrumb li a:hover,
.sarc-breadcrumb li a:focus {
	color: var(--sarc-dark-forest);
	text-decoration: underline;
}
.sarc-breadcrumb li a:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 2px;
	border-radius: 2px;
}
/* Current page — slate green, regular weight, not a link */
.sarc-breadcrumb .breadcrumb_last {
	color: var(--sarc-slate-green);
	font-weight: 400;
}

/* ── Sidebar nav — desktop card ─────────────────────────────── */

.sarc-sidebar-nav-container {
	margin: 0;
	padding: 0;
}
.sarc-sidebar-nav-wrap {
	grid-area: sidebar;
	position: sticky;
	top: 1.5rem;
	align-self: start;
}
.sarc-sidebar-nav {
	list-style: none;
	margin: 0;
	padding: 0.375rem 0;
	background: var(--sarc-light-mint);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	overflow: hidden;
}
.sarc-sidebar-nav li {
	margin: 0;
}
.sarc-sidebar-nav li a {
	display: block;
	padding: 0.8rem 1.5rem;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--sarc-deep-forest);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.7);
	transition: background-color var(--transition), color var(--transition);
}
.sarc-sidebar-nav li:last-child a {
	border-bottom: none;
}
.sarc-sidebar-nav li a:hover,
.sarc-sidebar-nav li a:focus {
	background: rgba(255, 255, 255, 0.5);
	color: var(--sarc-slate-green);
	text-decoration: underline;
}
.sarc-sidebar-nav li a:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: -3px;
}

/* Current page: bold, reverse-color pill — near-white on dark forest */
.sarc-sidebar-nav li.current-menu-item > a,
.sarc-sidebar-nav li.current_page_item > a {
	font-weight: 700;
	background: var(--sarc-dark-forest);
	color: var(--sarc-near-white-mint);
	box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.20);
	pointer-events: none;
	cursor: default;
}
.sarc-sidebar-nav li.current-menu-item > a:hover,
.sarc-sidebar-nav li.current_page_item > a:hover,
.sarc-sidebar-nav li.current-menu-item > a:focus,
.sarc-sidebar-nav li.current_page_item > a:focus {
	background: var(--sarc-dark-forest);
	color: var(--sarc-near-white-mint);
	text-decoration: none;
}
.sarc-sidebar-nav li.current-menu-item > a:focus-visible,
.sarc-sidebar-nav li.current_page_item > a:focus-visible {
	outline-color: var(--sarc-near-white-mint); /* visible on dark background */
}

/* ── Interior content area ──────────────────────────────────── */

.sarc-interior-content {
	grid-area: content;
	min-width: 0;   /* prevents grid blowout from long content */
}

/* Body text links: bold orange, underline on hover — per default-styles.pdf */
.sarc-interior-content a:not(.wp-block-button__link):not([class*="sarc-"]) {
	color: var(--sarc-orange);
	font-weight: 700;
	text-decoration: none;
}
.sarc-interior-content a:not(.wp-block-button__link):not([class*="sarc-"]):hover,
.sarc-interior-content a:not(.wp-block-button__link):not([class*="sarc-"]):focus {
	text-decoration: underline;
}
.sarc-interior-content a:not(.wp-block-button__link):not([class*="sarc-"]):focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── ≤768px: horizontal scroll nav strip ───────────────────── */

@media (max-width: 768px) {
	.sarc-interior-body__inner,
	.sarc-interior-body__inner.no-sidebar {
		grid-template-columns: 1fr;
		grid-template-areas:
			"sidebar"
			"breadcrumb"
			"content";
		padding: 0;
		column-gap: 0;
	}

	/* Sidebar becomes a full-width horizontal scroll strip */
	.sarc-sidebar-nav-wrap {
		position: relative; /* anchor for injected scroll buttons */
		grid-area: sidebar;
		top: 0;             /* reset desktop sticky offset */
		min-width: 0;       /* prevent grid item stretching to scroll content width */
	}
	.sarc-sidebar-nav {
		display: flex;
		flex-direction: row;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch; /* smooth momentum on iOS/trackpad */
		overflow-y: hidden;
		border-radius: 0;
		box-shadow: none;
		padding: 0;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.sarc-sidebar-nav::-webkit-scrollbar {
		display: none;
	}
	.sarc-sidebar-nav-btn {
		display: flex; /* show scroll arrows only in the horizontal strip */
	}
	.sarc-sidebar-nav li {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
	.sarc-sidebar-nav li a {
		border-bottom: none;
		border-right: 1px solid rgba(255, 255, 255, 0.7);
		white-space: nowrap;
		padding: 0.75rem 1.25rem;
	}
	.sarc-sidebar-nav li:last-child a {
		border-right: none;
	}

	/* Breadcrumb and content get their own padding at mobile */
	.sarc-breadcrumb-wrap {
		padding: 1rem 1.5rem 0.75rem;
	}
	.sarc-interior-content {
		padding: 1.5rem;
	}
}

/* Scroll arrow buttons injected by Section 17 JS — only visible at mobile */
.sarc-sidebar-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 32px !important;
	height: 32px !important;
	aspect-ratio: 1 / 1;
	padding: 0;
	box-sizing: border-box;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	background-color: var(--sarc-dark-forest);
	color: var(--sarc-white);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.25rem;
	line-height: 1;
	transition: background-color var(--transition);
}
.sarc-sidebar-nav-btn:hover,
.sarc-sidebar-nav-btn:focus {
	background-color: var(--sarc-green);
}
.sarc-sidebar-nav-btn:focus-visible {
	outline: 3px solid var(--sarc-white);
	outline-offset: 3px;
}
.sarc-sidebar-nav-btn--prev { left: 4px; }
.sarc-sidebar-nav-btn--next { right: 4px; }

/* Hide scroll buttons at desktop — the nav is a sidebar card, not a scroll strip */
@media (min-width: 769px) {
	.sarc-sidebar-nav-btn { display: none; }
}

/* ── ≤499px: tighten nav strip link padding ─────────────────── */

@media (max-width: 499px) {
	.sarc-sidebar-nav li a {
		padding: 0.75rem 1rem;
		font-size: 1rem;
	}
}

/* ── ≥1225px: zero horizontal padding so left edge aligns with footer ── */

@media (min-width: 1225px) {
	.sarc-page-banner__inner,
	.sarc-interior-body__inner {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ── Safe-area insets (iPhone landscape Dynamic Island) ─────── */

@supports (padding-left: env(safe-area-inset-left)) {
	@media (max-width: 768px) {
		.sarc-page-banner__inner {
			padding-left:  max(2rem, env(safe-area-inset-left));
			padding-right: max(2rem, env(safe-area-inset-right));
		}
		.sarc-breadcrumb-wrap {
			padding-left:  max(1.5rem, env(safe-area-inset-left));
			padding-right: max(1.5rem, env(safe-area-inset-right));
		}
		.sarc-interior-content {
			padding-left:  max(1.5rem, env(safe-area-inset-left));
			padding-right: max(1.5rem, env(safe-area-inset-right));
		}
	}
}

/* ============================================================
   404 ERROR PAGE
   ============================================================ */

.sarc-404-page {
	background: var(--sarc-white);
	padding: 5rem 2rem 6rem;
	min-height: 60vh; /* prevents footer floating up on short viewports */
}

.sarc-404-inner {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

/* Decorative "404" — purely visual, aria-hidden in markup */
.sarc-404__code {
	display: block;
	font-family: var(--wp--preset--font-family--brandon-grotesque), sans-serif;
	font-size: clamp(6rem, 20vw, 10rem);
	font-weight: 700;
	line-height: 1;
	color: var(--sarc-tree-green);
	letter-spacing: -0.02em;
	margin-bottom: 0.25rem;
}

.sarc-404__heading {
	font-family: var(--wp--preset--font-family--brandon-grotesque), sans-serif;
	font-size: 3rem; /* matches global h2 scale */
	font-weight: 700;
	color: var(--sarc-dark-forest);
	margin: 0 0 1rem;
	line-height: 1.15;
}

.sarc-404__message {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1.125rem;
	color: var(--sarc-deep-forest);
	line-height: 1.6;
	margin-bottom: 2.5rem;
}

/* ── Search form ─────────────────────────────────────────── */
/*
 * Layout: input fills the label (flex: 1); the submit button and Kadence's
 * icon wrap are both position:absolute over the right side of the field.
 * Submit is transparent (z-index:1) so it captures clicks/hover; icon is the
 * visual (pointer-events:none, below submit). Sibling selector
 * .search-submit:hover ~ .kadence-search-icon-wrap drives the colour change.
 * This mirrors the search drawer approach exactly.
 */

.sarc-404__search {
	margin-bottom: 3rem;
}

.sarc-404-page .search-form {
	display: flex;
	position: relative; /* anchor for absolute submit + icon */
	max-width: 480px;
	margin: 0 auto;
}

.sarc-404-page .search-form label {
	flex: 1;
	margin: 0;
}

/* Input: right padding reserves the icon zone; fully rounded (icon is overlaid) */
/* !important on color: Kadence global.min.css sets input[type=search]{color:var(--global-palette5)}
   which resolves to a Tailwind gray when kadence_global_palette isn't in the DB. */
.sarc-404-page .search-field {
	width: 100%;
	height: 52px;
	padding: 0 3.5rem 0 1rem;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1rem;
	color: var(--sarc-deep-forest) !important;
	background: var(--sarc-white);
	border: 1px solid var(--sarc-slate-green);
	border-radius: 4px;
	box-sizing: border-box;
	outline: none;
	transition: border-color var(--transition);
}

.sarc-404-page .search-field::placeholder {
	color: var(--sarc-slate-green);
	opacity: 1;
}

.sarc-404-page .search-field:focus {
	border-color: var(--sarc-dark-forest);
}

.sarc-404-page .search-field:focus-visible {
	outline: 3px solid var(--sarc-dark-forest) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px var(--sarc-white) !important;
	border-color: var(--sarc-dark-forest) !important;
}

/* Icon: slate-green by default → deep-forest on hover; pointer-events:none so
   the transparent submit button above it captures the mouse events.
   !important on color: Kadence global.min.css .search-form .kadence-search-icon-wrap has
   equal specificity (0,2,0) and may load after child theme CSS on some pages. */
.sarc-404-page .kadence-search-icon-wrap {
	position: absolute;
	right: 0;
	top: 0;
	width: 52px;
	height: 52px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: var(--sarc-slate-green) !important;
	pointer-events: none;
	transition: color var(--transition) !important;
}

.sarc-404-page .kadence-search-icon-wrap svg {
	width: 20px;
	height: 20px;
}

/* Submit: transparent overlay exactly covering the icon area; z-index:1 so it
   sits above the icon and receives all pointer events */
.sarc-404-page .search-submit {
	position: absolute;
	right: 0;
	top: 0;
	width: 52px;
	height: 52px;
	background: transparent;
	border: none;
	padding: 0;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 0;    /* hides the button's text label */
	color: transparent;
	z-index: 1;
}

/* Darken icon on submit hover/focus — sibling selector works because
   .search-submit precedes .kadence-search-icon-wrap in Kadence's DOM.
   !important required: Kadence's hover rule includes [type=submit] attribute
   selector, giving it specificity 0,5,0 vs our 0,4,0 — !important is the
   only reliable way to override it. */
.sarc-404-page .search-submit:hover ~ .kadence-search-icon-wrap,
.sarc-404-page .search-submit:focus ~ .kadence-search-icon-wrap {
	color: var(--sarc-deep-forest) !important;
}

.sarc-404-page .search-submit:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 3px;
}

/* ── Key section links ───────────────────────────────────── */

.sarc-404__links {
	text-align: center;
	border-top: 1px solid var(--sarc-light-mint);
	padding-top: 2rem;
}

/* Styled as a small label, not visually large like a normal h2 */
.sarc-404__links-heading {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sarc-slate-green);
	margin: 0 0 1rem;
}

.sarc-404__links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.625rem 2.5rem;
}

.sarc-404__links li a {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sarc-dark-forest);
	text-decoration: none;
}

.sarc-404__links li a:hover,
.sarc-404__links li a:focus {
	color: var(--sarc-orange);
	text-decoration: underline;
}

.sarc-404__links li a:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 2px;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 600px) {
	.sarc-404-page {
		padding: 3rem 1.25rem 4rem;
	}

	.sarc-404__links ul {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   NEWS ARCHIVE  (archive-sarc_news.php)
   ============================================================ */

/* Banner and body wrapper: reuses .sarc-page-banner, .sarc-interior-body,
   .sarc-interior-body__inner.no-sidebar — no new CSS needed for the shell. */

/* ── Card grid ─────────────────────────────────────────────── */

.sarc-news-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	list-style: none;
	margin: 0 0 3rem;
	padding: 0;
	align-items: start;
}

/* ── Individual card ───────────────────────────────────────── */

.sarc-news-archive__card {
	background-color: var(--sarc-white);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow-linked);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: box-shadow var(--transition), transform var(--transition);
}

.sarc-news-archive__card:hover,
.sarc-news-archive__card:focus-within {
	box-shadow: var(--card-shadow-press);
	transform: translateY(-3px);
}

/* Focus ring on the card container (not the link, which is absolute-positioned) */
.sarc-news-archive__card:focus-within {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--sarc-white);
}

@media (prefers-reduced-motion: reduce) {
	.sarc-news-archive__card { transition: none; }
	.sarc-news-archive__card:hover,
	.sarc-news-archive__card:focus-within { transform: none; }
}

/* ── Card image ────────────────────────────────────────────── */

.sarc-news-archive__card-image {
	aspect-ratio: 370 / 260;
	overflow: hidden;
	background: var(--sarc-white);
}

.sarc-news-archive__card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Card body ─────────────────────────────────────────────── */

.sarc-news-archive__card-body {
	padding: 1.25rem 1.125rem 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Date */
.sarc-news-archive__card-date {
	display: block;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--sarc-slate-green);
	margin-bottom: 0.5rem;
}

/* Title */
.sarc-news-archive__card-title {
	font-family: var(--wp--preset--font-family--brandon-grotesque), sans-serif;
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--sarc-dark-forest);
	line-height: 1.2;
	margin: 0 0 0.625rem;
}

.sarc-news-archive__card-title a {
	color: var(--sarc-dark-forest) !important;
	text-decoration: none !important;
}

/* Stretched link — covers the entire card */
.sarc-news-archive__card-title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.sarc-news-archive__card-title a:focus-visible {
	outline: none; /* focus ring is on the card container via :focus-within */
}

/* Excerpt */
.sarc-news-archive__card-excerpt {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--sarc-deep-forest);
	line-height: 1.6;
	margin: 0 0 0.5rem;
	flex: 1;
}

.sarc-news-archive__card-excerpt p {
	margin: 0;
}

/* "Read more" label (aria-hidden — card link covers full card) */
.sarc-news-archive__card-readmore {
	display: block;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--sarc-orange);
	margin-top: auto;
	padding-top: 0.5rem;
}

.sarc-news-archive__card:hover .sarc-news-archive__card-readmore,
.sarc-news-archive__card:focus-within .sarc-news-archive__card-readmore {
	text-decoration: underline;
}

/* ── Pagination ────────────────────────────────────────────── */

.sarc-news-archive__pagination {
	margin: 0.5rem 0 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	align-items: center;
}

.sarc-news-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: 0.5rem 0.75rem;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1rem;
	font-weight: 500;
	color: var(--sarc-dark-forest) !important;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: 4px;
	transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}

.sarc-news-archive__pagination .page-numbers:not(.current):hover,
.sarc-news-archive__pagination .page-numbers:not(.current):focus {
	color: var(--sarc-orange) !important;
	text-decoration: underline;
	border-color: var(--sarc-orange);
}

.sarc-news-archive__pagination .page-numbers.current {
	background: var(--sarc-dark-forest);
	color: var(--sarc-white) !important;
	border-color: var(--sarc-dark-forest);
}

.sarc-news-archive__pagination .page-numbers:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 2px;
}

/* ── Empty state ───────────────────────────────────────────── */

.sarc-no-results {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1.125rem;
	color: var(--sarc-slate-green);
	padding: 3rem 0;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 991px) {
	.sarc-news-archive__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
}

@media (max-width: 599px) {
	.sarc-news-archive__grid {
		grid-template-columns: 1fr;
	}
}

/* Tablet edge padding: news archive body inner needs same 1.5rem treatment
   as other interior content at 992–1224px */
@media (min-width: 992px) and (max-width: 1224px) {
	.sarc-news-archive-page .sarc-page-banner__inner,
	.sarc-news-archive-page .sarc-interior-body__inner {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}
}

/* ── Page-level background ─────────────────────────────────── */

/* Near-White Mint fills the entire page behind the card grid */
.post-type-archive-sarc_news {
	background-color: var(--sarc-near-white-mint);
}


/* ============================================================
   SINGLE NEWS ITEM  (single-sarc_news.php)
   ============================================================ */

/* Banner, breadcrumb, sidebar nav, and interior grid: all reuse
   .sarc-page-banner, .sarc-interior-body, .sarc-sidebar-nav-wrap,
   .sarc-interior-content — no new layout CSS needed. */

/* ── Article meta (date) ───────────────────────────────────── */

.sarc-single-news__meta {
	margin-bottom: 1.25rem;
}

.sarc-single-news__meta time {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1rem;
	font-weight: 500;
	color: var(--sarc-slate-green);
}

/* ── Featured image hero ───────────────────────────────────── */

.sarc-single-news__hero {
	margin-bottom: 1.75rem;
	border-radius: var(--card-radius);
	overflow: hidden;
}

.sarc-single-news__hero img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Body content ──────────────────────────────────────────── */

.sarc-single-news__content {
	margin-bottom: 0.5rem;
}

/* ── Back to News link ─────────────────────────────────────── */

.sarc-single-news__back {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: 2.5rem;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--sarc-orange);
	text-decoration: none;
}

.sarc-single-news__back:hover,
.sarc-single-news__back:focus {
	text-decoration: underline;
	color: var(--sarc-orange);
}

.sarc-single-news__back:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 2px;
	border-radius: 2px;
}


/* ============================================================
   NEWSLETTERS ARCHIVE  (archive-sarc_newsletter.php)
   ============================================================ */

/* ── Bulletin signup form card (sidebar left col) ────────── */

.sarc-bulletin-form-card {
	background: var(--sarc-white);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: 1.5rem;
	margin-top: 1.5rem;
}

/* Reuse .sarc-form-card-heading for the "Sign Up…" label */
.sarc-bulletin-form-card .sarc-form-card-heading {
	font-size: 1rem !important; /* narrower card — slightly smaller than pre-footer */
}

/* Stack form fields vertically in the narrow sidebar column */
.sarc-bulletin-form .sarc-mc-field {
	margin-bottom: 0.625rem;
}

/* Status messages */
.sarc-bulletin-form-msg {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	border-radius: 4px;
	padding: 0.625rem 0.875rem;
	margin-bottom: 1rem;
}
.sarc-bulletin-form-msg--success {
	background: #d4edda;
	color: #155724;
}
.sarc-bulletin-form-msg--error {
	background: #f8d7da;
	color: #721c24;
}

/* ── Desktop: nav scrolls, form sticks ─────────────────────
   Two problems to solve:
   (a) The entire .sarc-sidebar-nav-wrap is normally sticky — we want
       only the FORM to stick, not the nav.
   (b) position:sticky requires the containing block to be TALLER than
       the sticky element. The aside is normally as tall as nav+form only,
       leaving zero sticky scroll-range. Fix: align-self:stretch + flex
       column makes the aside fill the full row height (= content column
       height), so the form has a tall containing block to stick within.    */

@media (min-width: 769px) {
	.sarc-newsletter-archive-page .sarc-sidebar-nav-wrap {
		position: static;    /* nav scrolls with page — not sticky */
		top: 0;
		align-self: stretch; /* fill full row height (= content col height) */
		display: flex;
		flex-direction: column;
	}
	.sarc-newsletter-archive-page .sarc-bulletin-form-card {
		position: sticky;
		top: 1.5rem;
	}
}

/* ── Tablet / medium (992–1224px) ───────────────────────── */

@media (min-width: 992px) and (max-width: 1224px) {
	.sarc-bulletin-form-card {
		padding: 1.25rem;
	}
}

/* ── Mobile (≤768px): floating card, same style as homepage form card ── */
/* Keep border-radius and box-shadow — just add side margins so the card
   "floats" slightly inset from the screen edges.                         */

@media (max-width: 768px) {
	.sarc-bulletin-form-card {
		margin: 0.75rem 1.25rem 0.25rem;
		/* border-radius and box-shadow inherited from base — intentionally kept */
	}
}

/* ── Mobile: fix scroll-arrow button vertical position ─────
   The form card lives inside .sarc-sidebar-nav-wrap, making the
   aside taller than the nav strip alone. The injected scroll buttons
   use position:absolute; top:50% which lands in the form, not the
   nav strip. Override to position relative to just the nav strip.

   Nav strip item height: 0.75rem top-pad + ~1.4 line-height + 0.75rem bot-pad ≈ 56px.
   Button height: 32px. Perfect centre: (56 - 32) / 2 = 12px. */

@media (max-width: 768px) {
	.sarc-newsletter-archive-page .sarc-sidebar-nav-btn {
		top: 12px;       /* centres 32px button in ~56px nav strip */
		transform: none; /* drop the translateY(-50%) that relies on aside centre */
	}
}

/* ── ≤499px: tighten slightly ───────────────────────────── */

@media (max-width: 499px) {
	.sarc-newsletter-link {
		font-size: 0.9375rem;
	}
	.sarc-bulletin-form-card {
		padding: 1.25rem;
		margin-left: 1rem;
		margin-right: 1rem;
	}
}

/* ── Year headings ──────────────────────────────────────── */

.sarc-newsletter-year-heading {
	font-family: var(--wp--preset--font-family--brandon-grotesque), var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--sarc-dark-forest);
	margin: 2.25rem 0 0.625rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--sarc-light-mint);
}
.sarc-newsletter-year-heading:first-child {
	margin-top: 0;
}

/* ── Bulletin item list ─────────────────────────────────── */

.sarc-newsletter-list {
	list-style: none;
	margin: 0 0 0.25rem 0;
	padding: 0;
}
.sarc-newsletter-item {
	margin: 0;
	border-bottom: 1px solid var(--sarc-light-mint);
}
.sarc-newsletter-item:last-child {
	border-bottom: none;
}

/* Link and no-file span share the same layout */
.sarc-newsletter-link {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.6875rem 0.5rem;
	color: var(--sarc-dark-forest) !important;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1rem;
	font-weight: 400 !important;
	text-decoration: none !important;
	line-height: 1.4;
	border-radius: 4px;
	transition: background-color var(--transition);
}
a.sarc-newsletter-link:hover,
a.sarc-newsletter-link:focus {
	background: var(--sarc-light-mint);
	text-decoration: none !important;
}
a.sarc-newsletter-link:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 1px;
}
.sarc-newsletter-link--no-file {
	color: var(--sarc-slate-green) !important;
	cursor: default;
}

/* File icon */
.sarc-newsletter-icon {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--sarc-orange);
	margin-top: 0.15em; /* optical alignment with first text line */
}
a.sarc-newsletter-link:hover .sarc-newsletter-icon,
a.sarc-newsletter-link:focus .sarc-newsletter-icon {
	color: var(--sarc-dark-forest);
}

/* Item title — wraps naturally; file-type badge appended via ::after */
.sarc-newsletter-item-title {
	flex: 1;
}

/* ============================================================
   GLOBAL: file-type indicators on download links (WCAG 2.1)
   ============================================================
   Appended as inline text after link titles. CSS-generated content
   is read by screen readers (no aria-label override on these links).
   Selector pattern: parent <a href="...ext"> > child title span.
   ============================================================ */

/* Newsletter / meeting-minutes list links — badge after title span */
a.sarc-newsletter-link[href$=".pdf"]   > .sarc-newsletter-item-title::after,
a.sarc-newsletter-link[href$=".doc"]   > .sarc-newsletter-item-title::after,
a.sarc-newsletter-link[href$=".docx"]  > .sarc-newsletter-item-title::after,
a.sarc-newsletter-link[href$=".xlsx"]  > .sarc-newsletter-item-title::after,
a.sarc-newsletter-link[href$=".xlsm"]  > .sarc-newsletter-item-title::after,
a.sarc-newsletter-link[href$=".xls"]   > .sarc-newsletter-item-title::after,
a.sarc-newsletter-link[href$=".ppt"]   > .sarc-newsletter-item-title::after,
a.sarc-newsletter-link[href$=".pptx"]  > .sarc-newsletter-item-title::after {
	display: inline;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sarc-slate-green);
	background: var(--sarc-light-mint);
	border: 1px solid var(--sarc-slate-green); /* SC 1.4.11: ensures 6.56:1 boundary on
	                                               both white (rest) and light-mint (hover) */
	padding: 0.1em 0.4em;
	border-radius: 3px;
	margin-left: 0.5em;
	vertical-align: middle;
	white-space: nowrap;
}
a.sarc-newsletter-link[href$=".pdf"]::after   { content: none; } /* no double-badge on the <a> itself */
a.sarc-newsletter-link[href$=".pdf"]   > .sarc-newsletter-item-title::after { content: "PDF"; }
a.sarc-newsletter-link[href$=".doc"]   > .sarc-newsletter-item-title::after,
a.sarc-newsletter-link[href$=".docx"]  > .sarc-newsletter-item-title::after { content: "Word"; }
a.sarc-newsletter-link[href$=".xlsx"]  > .sarc-newsletter-item-title::after,
a.sarc-newsletter-link[href$=".xlsm"]  > .sarc-newsletter-item-title::after,
a.sarc-newsletter-link[href$=".xls"]   > .sarc-newsletter-item-title::after { content: "Excel"; }
a.sarc-newsletter-link[href$=".ppt"]   > .sarc-newsletter-item-title::after,
a.sarc-newsletter-link[href$=".pptx"]  > .sarc-newsletter-item-title::after { content: "PPT"; }

/* Interior body content: inline text links to downloadable files.
   Excludes structured-list links (.sarc-newsletter-link) to avoid
   double-labelling when they share the same content area.
   NOTE: these rules are intentionally DUPLICATED after the external-link icon
   rule (see "File-type labels — override" below) so they win the ::after
   cascade on links that are also target="_blank". The copies here handle
   links that do NOT open in a new tab. */
.sarc-interior-content a[href$=".pdf"]:not(.sarc-newsletter-link)::after   { content: " (PDF)"; font-size: 0.875em; font-weight: 600; color: var(--sarc-slate-green); }
.sarc-interior-content a[href$=".doc"]:not(.sarc-newsletter-link)::after,
.sarc-interior-content a[href$=".docx"]:not(.sarc-newsletter-link)::after  { content: " (Word)"; font-size: 0.875em; font-weight: 600; color: var(--sarc-slate-green); }
.sarc-interior-content a[href$=".xlsx"]:not(.sarc-newsletter-link)::after,
.sarc-interior-content a[href$=".xlsm"]:not(.sarc-newsletter-link)::after,
.sarc-interior-content a[href$=".xls"]:not(.sarc-newsletter-link)::after   { content: " (Excel)"; font-size: 0.875em; font-weight: 600; color: var(--sarc-slate-green); }
.sarc-interior-content a[href$=".ppt"]:not(.sarc-newsletter-link)::after,
.sarc-interior-content a[href$=".pptx"]:not(.sarc-newsletter-link)::after  { content: " (PPT)"; font-size: 0.875em; font-weight: 600; color: var(--sarc-slate-green); }

/* ============================================================
   MEETING MINUTES ARCHIVE  (archive-meeting_minutes.php)
   ============================================================
   No additional CSS required. This archive reuses all
   .sarc-newsletter-list / .sarc-newsletter-link / .sarc-newsletter-icon /
   .sarc-newsletter-year-heading / .sarc-newsletter-item-title rules above.

   The sidebar uses the standard sticky behaviour (position:sticky; top:1.5rem)
   inherited from the base .sarc-sidebar-nav-wrap rule — no override needed
   because there is no form card to complicate the containing-block height.

   Template-specific overrides go here if ever needed, scoped to:
   .sarc-meeting-minutes-archive-page { ... }
*/

/* ============================================================
   TRANSPARENCY & REPORTS TEMPLATE  (page-transparency.php)
   Shared by /transparency/ and /reports-policies/
   ============================================================ */


/* Intro block above accordion sections (e.g. Transparency page preamble) */
.sarc-transparency-intro {
	margin-bottom: 2.5rem;
	color: var(--sarc-deep-forest);
}
.sarc-transparency-intro p {
	margin-bottom: 1em;
}

/* ── Section group heading (h2 on reports-policies; absent on transparency) ── */
.sarc-accordion-section-heading {
	font-family: var(--wp--preset--font-family--brandon-grotesque), sans-serif;
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--sarc-dark-forest);
	margin: 7.5rem 0 3rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--sarc-light-mint);
}
.sarc-accordion-section-heading:first-child {
	margin-top: 0;
}

/* ── Accordion group (flex column of cards) ── */
.sarc-accordion-group {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 3rem;
}

/* ── Accordion card ── */
.sarc-accordion-card {
	background: #fff;
	border-radius: var(--card-radius);
	/* Default: elevated / pressable (closed state) */
	box-shadow: var(--card-shadow-linked);
	overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition);
}
/* Closed card — hover lift, mirrors News Archive card behavior */
.sarc-accordion-card:not(.sarc-accordion-card--open):hover {
	box-shadow: var(--card-shadow-press);
	transform: translateY(-3px);
}
/* Open card: flat / pressed — via :has() + JS fallback class */
.sarc-accordion-card:has(.sarc-accordion-trigger[aria-expanded="true"]),
.sarc-accordion-card--open {
	box-shadow: var(--card-shadow);
}

/* ── Accordion heading wrapper (h2 or h3 depending on page) ── */
.sarc-accordion-heading {
	margin: 0;
	padding: 0;
	font-size: 1rem;
	line-height: 1;
}

/* ── Trigger button ── */
.sarc-accordion-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1rem 1.25rem;
	background: #fff;
	border: none;
	cursor: pointer;
	text-align: left;
	gap: 1rem;
	border-radius: 0; /* card clips corners */
}
/* Hold white + no shadow on hover AND on click-focus (Chrome retains :focus after a
   click; Safari doesn't — which is why the blue appeared in Chrome only when moving
   the cursor out of an open card's trigger row).
   :focus:not(:focus-visible) = click-focus only; keyboard focus-ring is unaffected. */
.sarc-accordion-trigger:hover,
.sarc-accordion-trigger:focus:not(:focus-visible) {
	background-color: #fff;
	box-shadow: none;
}
.sarc-accordion-trigger:hover .sarc-accordion-title {
	text-decoration: underline;
}
.sarc-accordion-trigger:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: -3px;
	border-radius: var(--card-radius);
	/* Kadence global.min.css sets background + color on button:focus.
	   Those properties are per-property in the cascade — our higher-specificity
	   selector only wins for properties we explicitly declare here. */
	background-color: #fff;
	color: var(--sarc-dark-forest);
	box-shadow: none;
}

/* Trigger label */
.sarc-accordion-title {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--sarc-dark-forest);
	line-height: 1.3;
}

/* Chevron — burnt orange, rotates 180° when open */
.sarc-accordion-chevron {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--sarc-orange);
	transition: transform 0.25s ease;
}
.sarc-accordion-trigger[aria-expanded="true"] .sarc-accordion-chevron {
	transform: rotate(180deg);
}

/* ── Panel ── */
/* No display:none here — JS adds [hidden] on init for no-JS fallback. */
.sarc-accordion-panel[hidden] {
	display: none;
}
.sarc-accordion-panel-inner {
	padding: 0.375rem 1.25rem 1.25rem;
	border-top: 1px solid var(--sarc-light-mint);
}

/* Panel intro text (narrative paragraphs above link lists) */
.sarc-accordion-panel-inner p {
	color: var(--sarc-deep-forest);
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 0.75em;
}
.sarc-accordion-panel-inner p:last-child {
	margin-bottom: 0;
}

/* Panel link lists — reuse .sarc-newsletter-list / .sarc-newsletter-item /
   .sarc-newsletter-link / .sarc-newsletter-icon classes defined above.
   No additional CSS needed. */

/* ── External link icon (appears after link title on non-SARC links) ── */
.sarc-ext-icon {
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-left: 0.2em;
	flex-shrink: 0;
	color: var(--sarc-slate-green);
	vertical-align: middle;
	position: relative;
	top: -0.06em;
}

/* ============================================================
   EVENTS CALENDAR & SINGLE EVENT
   Template: tribe/events/v2/default-template.php
   Archive (list + month) and single tribe_events posts both
   render through the same override file via Template_Bootstrap.
   ============================================================ */

/* ── Width alignment ─────────────────────────────────────── */
/* Widen the banner inner from --content-max (1224px) to
   Kadence's content-container max-width (--global-content-width,
   ~1290px on this site), and replace the fixed 2rem side padding
   with Kadence's responsive edge-padding variable.
   Result: the "Events Calendar" title left-aligns with TEC content
   and with the header/footer content edges at every breakpoint. */
.sarc-events-page-wrap .sarc-page-banner__inner {
	max-width: var(--global-content-width);
	padding-left: var(--global-content-edge-padding);
	padding-right: var(--global-content-edge-padding);
}

/* ── Typography: SARC brand fonts ─────────────────────────── */
/* Override TEC's single font-family variable with Proxima Nova.
   Brandon Grotesque is applied below to heading utility classes. */
.sarc-events-page-wrap .tribe-common {
	--tec-font-family-sans-serif: var(--wp--preset--font-family--proxima-nova), "Helvetica Neue", Arial, sans-serif;
}

/* All TEC heading utility classes (h1–h8) and responsive variants
   (e.g. tribe-common-h4--min-medium) — matched via substring selector. */
.sarc-events-page-wrap .tribe-common [class*="tribe-common-h"] {
	font-family: var(--wp--preset--font-family--brandon-grotesque), "Helvetica Neue", Arial, sans-serif;
	color: var(--sarc-dark-forest);
}

/* ── "Find Events" search button: burnt orange + white text ── */
/* TEC Pro's common-full.css hardcodes background-color directly on
   .tribe-common-c-btn, bypassing CSS variable overrides — !important
   is required. The hover darkens to dark forest (matches utility nav). */
.sarc-events-page-wrap .tribe-events .tribe-common-c-btn {
	background-color: var(--sarc-orange) !important;
	color: #ffffff !important;
}
.sarc-events-page-wrap .tribe-events .tribe-common-c-btn:hover,
.sarc-events-page-wrap .tribe-events .tribe-common-c-btn:focus {
	background-color: #a33b00 !important; /* darkened orange — same as Apply for Services hover */
	color: #ffffff !important;
}

/* ── "Subscribe to Calendar" dropdown: dark forest / white ─── */
/* The outer wrapper (.tribe-common-c-btn-border) is a styled <div>;
   the inner <button> (.tribe-events-c-subscribe-dropdown__button-text)
   handles keyboard interaction.
   :focus-within on the wrapper catches keyboard focus on the inner button. */
.sarc-events-page-wrap .tribe-events .tribe-common-c-btn-border {
	background-color: #ffffff !important;
	border-color: var(--sarc-dark-forest) !important;
}
.sarc-events-page-wrap .tribe-events .tribe-common-c-btn-border
	.tribe-events-c-subscribe-dropdown__button-text {
	color: var(--sarc-dark-forest) !important;
}
.sarc-events-page-wrap .tribe-events
	.tribe-events-c-subscribe-dropdown__button-icon {
	color: var(--sarc-dark-forest) !important;
	fill:  var(--sarc-dark-forest) !important;
}
/* Reverse on hover (mouse) and focus-within (keyboard) */
.sarc-events-page-wrap .tribe-events .tribe-common-c-btn-border:hover,
.sarc-events-page-wrap .tribe-events .tribe-common-c-btn-border:focus-within {
	background-color: var(--sarc-dark-forest) !important;
}
.sarc-events-page-wrap .tribe-events .tribe-common-c-btn-border:hover
	.tribe-events-c-subscribe-dropdown__button-text,
.sarc-events-page-wrap .tribe-events .tribe-common-c-btn-border:focus-within
	.tribe-events-c-subscribe-dropdown__button-text,
.sarc-events-page-wrap .tribe-events .tribe-common-c-btn-border:hover
	.tribe-events-c-subscribe-dropdown__button-icon,
.sarc-events-page-wrap .tribe-events .tribe-common-c-btn-border:focus-within
	.tribe-events-c-subscribe-dropdown__button-icon {
	color: #ffffff !important;
	fill:  #ffffff !important;
}

/* ── Event title links: orange + underline on hover/focus ─── */
/* At rest: TEC's default --tec-color-text-events-title (no override).
   On interaction: burnt orange + underline for discoverability. */
.sarc-events-page-wrap .tribe-events
	.tribe-events-calendar-list__event-title-link:hover,
.sarc-events-page-wrap .tribe-events
	.tribe-events-calendar-list__event-title-link:focus,
.sarc-events-page-wrap .tribe-events
	.tribe-events-calendar-month__calendar-event-title-link:hover,
.sarc-events-page-wrap .tribe-events
	.tribe-events-calendar-month__calendar-event-title-link:focus,
.sarc-events-page-wrap .tribe-events
	.tribe-events-calendar-month__calendar-event-tooltip-title-link:hover,
.sarc-events-page-wrap .tribe-events
	.tribe-events-calendar-month__calendar-event-tooltip-title-link:focus,
.sarc-events-page-wrap .tribe-events
	.tribe-events-calendar-month-mobile-events__mobile-event-title-link:hover,
.sarc-events-page-wrap .tribe-events
	.tribe-events-calendar-month-mobile-events__mobile-event-title-link:focus {
	color: var(--sarc-orange) !important;
	text-decoration: underline !important;
	/* TEC's common-full.css adds border-bottom on .tribe-common-anchor-thin:hover —
	   suppress it so only our text-decoration underline appears. */
	border-bottom: none !important;
}

/* ── Month-view day-number links: slate green (present/future) / tree green (past) ─ */
/* Present/future dates: slate green (#375C4F, 6.76:1 on white — passes AA).
   Past dates: tree green (#008458, 4.72:1 on white — just passes AA). TEC also
   applies opacity:.7 to the past-day date wrapper, which would drop the effective
   contrast below 3:1 — reset that opacity to 1. */
.sarc-events-page-wrap
	.tribe-events-calendar-month__day-date-link,
.sarc-events-page-wrap
	.tribe-events-calendar-month__day-date-daynum {
	color: var(--sarc-slate-green) !important;
}
.sarc-events-page-wrap
	.tribe-events-calendar-month__day-date-link:hover,
.sarc-events-page-wrap
	.tribe-events-calendar-month__day-date-link:focus {
	color: var(--sarc-dark-forest) !important;
	text-decoration: underline;
}
/* Past date numbers: reset TEC opacity fade and use tree green */
.sarc-events-page-wrap
	.tribe-events-calendar-month__day--past
	.tribe-events-calendar-month__day-date {
	opacity: 1 !important;
}
.sarc-events-page-wrap
	.tribe-events-calendar-month__day--past
	.tribe-events-calendar-month__day-date-daynum,
.sarc-events-page-wrap
	.tribe-events-calendar-month__day--past
	.tribe-events-calendar-month__day-date-link {
	color: var(--sarc-tree-green) !important;
}

/* All event text inside calendar grid cells: dark forest.
   font-size: 1.0em resets TEC's small utility-class sizes back to the
   inherited base (same as body text), which is the right visual weight
   for a calendar grid. Applied to single-day and multi-day events alike. */
.sarc-events-page-wrap
	.tribe-events-calendar-month__calendar-event-title,
.sarc-events-page-wrap
	.tribe-events-calendar-month__calendar-event-datetime {
	color: var(--sarc-dark-forest) !important;
	font-size: 1.0em !important;
}

/* ── Month-view multi-day event bar: dark forest + white text ─ */
/* Multiday event bars default to a gray-ish TEC accent.
   Override to dark forest background with white text for
   legibility and brand consistency. */
.sarc-events-page-wrap
	.tribe-events-calendar-month__multiday-event-bar-inner {
	background-color: var(--sarc-dark-forest) !important;
}
.sarc-events-page-wrap
	.tribe-events-calendar-month__multiday-event-bar-title,
.sarc-events-page-wrap
	.tribe-events-calendar-month__multiday-event-bar-inner * {
	color: #ffffff !important;
	font-size: 1.0em !important;
}

/* ── List view prev/next page navigation (like breadcrumb style) ─── */
/* Dark forest + bold at rest; orange + underline on hover.
   Matches the breadcrumb link interaction pattern. */
.sarc-events-page-wrap .tribe-events-c-nav__list-item a {
	color: var(--sarc-dark-forest) !important;
	font-weight: 700;
	text-decoration: none !important;
}
.sarc-events-page-wrap .tribe-events-c-nav__list-item a:hover,
.sarc-events-page-wrap .tribe-events-c-nav__list-item a:focus {
	color: var(--sarc-orange) !important;
	text-decoration: underline !important;
}

/* ── Single event: near-white mint page background ─────────── */
/* body.single-tribe_events is set by WordPress from the CPT slug. */
.single-tribe_events .sarc-events-main {
	background: var(--sarc-near-white-mint);
}

/* ── Single event: entry-content-wrap as white card ─────────── */
/* Mirrors news archive card: white bg, rounded corners, drop shadow.
   overflow:hidden clips child content to the border-radius. */
.single-tribe_events .entry-content-wrap {
	background: var(--sarc-white);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	overflow: hidden;
}

/* ── Single event: pre-footer background gradient ─────────── */
/* Replace the default white-top gradient with near-white mint so the
   transition to the dark-green bar is seamless. */

/* ── Single event: legacy TEC template typography ─────────── */
/* The main single event content renders OUTSIDE .tribe-common (legacy
   #tribe-events-pg-template structure). Font and colour overrides scoped
   to .sarc-events-page-wrap don't reach these elements, so target them
   directly under .single-tribe_events. */
.single-tribe_events #tribe-events-pg-template,
.single-tribe_events .tribe-events-single-event-description,
.single-tribe_events .tribe-events-meta-group {
	font-family: var(--wp--preset--font-family--proxima-nova), "Helvetica Neue", Arial, sans-serif;
	color: var(--sarc-deep-forest);
}
/* Section headings: "Details", "Venue", "Related Events" */
.single-tribe_events .tribe-events-single-event-title,
.single-tribe_events .tribe-events-single-section-title,
.single-tribe_events .tribe-events-related-events-title {
	font-family: var(--wp--preset--font-family--brandon-grotesque), "Helvetica Neue", Arial, sans-serif;
	color: var(--sarc-dark-forest);
}
/* Meta labels ("When:", "Where:", etc.) */
.single-tribe_events .tribe-events-meta-label {
	font-family: var(--wp--preset--font-family--proxima-nova), "Helvetica Neue", Arial, sans-serif;
	color: var(--sarc-dark-forest);
	font-weight: 600;
}
/* Meta values and venue/organizer text */
.single-tribe_events .tribe-events-meta-value,
.single-tribe_events .tribe-venue,
.single-tribe_events .tribe-venue-location,
.single-tribe_events .tribe-venue-tel,
.single-tribe_events .tribe-venue-url {
	font-family: var(--wp--preset--font-family--proxima-nova), "Helvetica Neue", Arial, sans-serif;
	color: var(--sarc-deep-forest);
}
/* Links inside the meta panel */
.single-tribe_events .tribe-events-meta-group a {
	color: var(--sarc-dark-forest);
}
.single-tribe_events .tribe-events-meta-group a:hover,
.single-tribe_events .tribe-events-meta-group a:focus {
	color: var(--sarc-orange);
	text-decoration: underline;
}

/* ── Single event: description links — orange, bold, no underline at rest ─── */
/* Matches the site-wide orange bold link style. Underline appears on hover/focus
   for visibility. (Body text links globally use this pattern per default-styles.pdf) */
.single-tribe_events .tribe-events-single-event-description a {
	color: var(--sarc-orange) !important;
	font-weight: 700;
	text-decoration: none !important;
	border-bottom: none !important; /* suppress TEC's .tribe-common-anchor-thin border-bottom at rest */
}
.single-tribe_events .tribe-events-single-event-description a:hover,
.single-tribe_events .tribe-events-single-event-description a:focus {
	color: var(--sarc-orange) !important;
	text-decoration: underline !important;
	/* TEC's common-full.css adds border-bottom on .tribe-common-anchor-thin:hover —
	   suppress it so only our text-decoration underline appears. */
	border-bottom: none !important;
}

/* ── Single event: category tag links — same orange treatment ─ */
.single-tribe_events .tribe-events-event-categories a {
	color: var(--sarc-orange) !important;
	font-weight: 700;
	text-decoration: none !important;
}
.single-tribe_events .tribe-events-event-categories a:hover,
.single-tribe_events .tribe-events-event-categories a:focus {
	color: var(--sarc-orange) !important;
	text-decoration: underline !important;
}

/* ── Single event: "All Events" back link + prev/next navigation ─── */
/* These are contextual nav links, not body links — dark forest (like breadcrumb),
   bold, no underline at rest. Orange + underline on hover. */
.single-tribe_events .tribe-events-back a,
.single-tribe_events .tribe-events-nav-pagination a {
	color: var(--sarc-dark-forest) !important;
	font-weight: 700;
	text-decoration: none !important;
}
.single-tribe_events .tribe-events-back a:hover,
.single-tribe_events .tribe-events-back a:focus,
.single-tribe_events .tribe-events-nav-pagination a:hover,
.single-tribe_events .tribe-events-nav-pagination a:focus {
	color: var(--sarc-orange) !important;
	text-decoration: underline !important;
}

/* ==========================================================================
   STAFF DIRECTORY  (page-staff-directory.php)
   ========================================================================== */

/* Page background */
.sarc-staff-directory-page {
	background-color: var(--sarc-near-white-mint);
}

/* ── Filter row ─────────────────────────────────────────────────────────── */

.sarc-staff-filters {
	margin-bottom: 2.5rem;
}

.sarc-staff-filters__controls {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
	align-items: flex-end;
	margin-bottom: 1rem;
}

.sarc-staff-filters__group {
	flex: 1 1 220px;
	max-width: 360px;
}

.sarc-staff-filters__label {
	display: block;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--sarc-deep-forest);
	margin-bottom: 0.375rem;
}

.sarc-staff-filters__select-wrap {
	position: relative;
}

/* Custom chevron arrow via inline SVG data URI (dark forest #0C4532) */
.sarc-staff-filters__select {
	width: 100%;
	padding: 0.65rem 2.5rem 0.65rem 0.875rem;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1rem;
	font-weight: 400;
	color: var(--sarc-deep-forest);
	background-color: var(--sarc-white);
	border: 1px solid var(--sarc-slate-green);
	border-radius: 4px;
	box-sizing: border-box;
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230C4532' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	background-size: 12px 8px;
	cursor: pointer;
	transition: border-color 0.15s;
}

.sarc-staff-filters__select:hover {
	border-color: var(--sarc-slate-green);
}

.sarc-staff-filters__select:focus {
	border-color: var(--sarc-dark-forest);
	outline: none;
}

.sarc-staff-filters__select:focus-visible {
	outline: 3px solid var(--sarc-dark-forest) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px var(--sarc-white) !important;
	border-color: var(--sarc-dark-forest);
}

/* Result count */
.sarc-staff-filters__count {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--sarc-slate-green);
	margin: 0;
}

/* ── Card grid ──────────────────────────────────────────────────────────── */

.sarc-staff-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	list-style: none;
	margin: 0 0 3rem;
	padding: 0;
	align-items: start;
}

/* ── Individual card ────────────────────────────────────────────────────── */

.sarc-staff-card {
	background-color: var(--sarc-white);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow-linked);
	padding: 1.375rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
}

.sarc-staff-card__name {
	font-family: var(--wp--preset--font-family--brandon-grotesque), sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sarc-dark-forest);
	line-height: 1.2;
	margin: 0 0 0.5rem;
}

.sarc-staff-card__title {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--sarc-slate-green);
	line-height: 1.4;
	margin: 0 0 0.625rem;
}

/* Department list (unstyled) */
.sarc-staff-card__depts {
	list-style: none;
	padding: 0;
	margin: 0 0 0.625rem;
}

.sarc-staff-card__depts li {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--sarc-slate-green);
	line-height: 1.4;
}

/* Contact links */
.sarc-staff-card__email,
.sarc-staff-card__phone {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.9rem;
	margin: 0.25rem 0 0;
	line-height: 1.4;
}

.sarc-staff-card__email a,
.sarc-staff-card__phone a {
	color: var(--sarc-deep-forest) !important;
	text-decoration: none;
	word-break: break-word;
}

.sarc-staff-card__email a:hover,
.sarc-staff-card__email a:focus,
.sarc-staff-card__phone a:hover,
.sarc-staff-card__phone a:focus {
	text-decoration: underline;
}

.sarc-staff-card__email a:focus-visible,
.sarc-staff-card__phone a:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Empty state (shown when filters return zero results) */
.sarc-staff-grid__empty {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1.125rem;
	color: var(--sarc-slate-green);
	padding: 3rem 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

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

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

@media (max-width: 599px) {
	.sarc-staff-filters__group {
		max-width: 100%;
	}
	.sarc-staff-grid {
		grid-template-columns: 1fr;
	}
}

/* Tablet edge padding — align with other interior pages */
@media (min-width: 992px) and (max-width: 1224px) {
	.sarc-staff-directory-page .sarc-page-banner__inner,
	.sarc-staff-directory-page .sarc-interior-body__inner {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}
}

/* Wide desktop: strip padding so content aligns with header/footer */
@media (min-width: 1225px) {
	.sarc-staff-directory-page .sarc-page-banner__inner,
	.sarc-staff-directory-page .sarc-interior-body__inner {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ==========================================================================
   CONTACT / OFFICE LOCATIONS  (page-contact.php)
   ========================================================================== */

/* ── Page background: white interior body; form card + offices stay mint ─── */

body.sarc-contact-template .sarc-interior-body {
	background: var(--sarc-white);
}

/* ── Two-column layout: intro text + form card ───────────────────────────── */

.sarc-contact-layout {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 3rem;
	align-items: start;
}

@media (max-width: 991px) {
	.sarc-contact-layout {
		grid-template-columns: 1fr;
	}
}

/* ── Left column: editorial content ─────────────────────────────────────── */

.sarc-contact-content p {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1.0625rem;
	color: var(--sarc-deep-forest);
	line-height: 1.7;
	margin-bottom: 1.25rem;
}

.sarc-contact-content a {
	color: var(--sarc-orange) !important;
	font-weight: 700;
	text-decoration: none;
}

.sarc-contact-content a:hover,
.sarc-contact-content a:focus {
	text-decoration: underline;
}

.sarc-contact-content a:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── Form card ───────────────────────────────────────────────────────────── */

.sarc-contact-form-card {
	background: var(--sarc-near-white-mint);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow-linked);
	padding: 2rem 1.75rem;
}

.sarc-contact-form-heading {
	font-family: var(--wp--preset--font-family--brandon-grotesque), sans-serif;
	font-size: 1.625rem;
	font-weight: 700;
	color: var(--sarc-dark-forest);
	margin: 0 0 0.25rem;
	line-height: 1.2;
}

.sarc-contact-form-subhead {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.9375rem;
	color: var(--sarc-slate-green);
	margin: 0 0 1.5rem;
}

/* Alert banners */
.sarc-contact-form__alert {
	padding: 0.875rem 1rem;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1rem;
	margin-bottom: 1.5rem;
	line-height: 1.5;
}

.sarc-contact-form__alert--success {
	background: #e8f5ee;
	color: var(--sarc-dark-forest);
	border-left: 4px solid var(--sarc-tree-green);
}

.sarc-contact-form__alert--error {
	background: #fff0eb;
	color: #7a1f00;
	border-left: 4px solid var(--sarc-orange);
}

/* Form fields */
.sarc-contact-form__field {
	margin-bottom: 1.125rem;
}

.sarc-contact-form__label {
	display: block;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--sarc-deep-forest);
	margin-bottom: 0.375rem;
}

.sarc-contact-form__required {
	color: var(--sarc-orange);
	margin-left: 0.2em;
}

.sarc-contact-form__input,
.sarc-contact-form__textarea {
	width: 100%;
	padding: 0.65rem 0.875rem;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1rem;
	color: var(--sarc-deep-forest);
	background: var(--sarc-white);
	border: 1px solid var(--sarc-slate-green);
	border-radius: 4px;
	box-sizing: border-box;
	line-height: 1.4;
	transition: border-color 0.15s;
}

.sarc-contact-form__textarea {
	resize: vertical;
	min-height: 120px;
}

.sarc-contact-form__input:hover,
.sarc-contact-form__textarea:hover {
	border-color: var(--sarc-slate-green);
}

.sarc-contact-form__input:focus,
.sarc-contact-form__textarea:focus {
	border-color: var(--sarc-dark-forest);
	outline: none;
}

.sarc-contact-form__input:focus-visible,
.sarc-contact-form__textarea:focus-visible {
	outline: 3px solid var(--sarc-dark-forest) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px var(--sarc-white) !important;
	border-color: var(--sarc-dark-forest);
}

/* Select — same chevron pattern as staff directory */
.sarc-contact-form__select-wrap {
	position: relative;
}

.sarc-contact-form__select {
	width: 100%;
	padding: 0.65rem 2.5rem 0.65rem 0.875rem;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1rem;
	color: var(--sarc-deep-forest);
	background-color: var(--sarc-white);
	border: 1px solid var(--sarc-slate-green);
	border-radius: 4px;
	box-sizing: border-box;
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230C4532' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	background-size: 12px 8px;
	cursor: pointer;
	transition: border-color 0.15s;
}

.sarc-contact-form__select:hover {
	border-color: var(--sarc-slate-green);
}

.sarc-contact-form__select:focus {
	border-color: var(--sarc-dark-forest);
	outline: none;
}

.sarc-contact-form__select:focus-visible {
	outline: 3px solid var(--sarc-dark-forest) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px var(--sarc-white) !important;
}

/* Required note */
.sarc-contact-form__required-note {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.875rem;
	color: var(--sarc-slate-green);
	margin: 0.5rem 0 1.25rem;
}

/* Submit button — burnt orange, full width */
.sarc-contact-form__submit {
	display: block;
	width: 100%;
	padding: 0.8rem 1.5rem;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--sarc-white) !important;
	background: var(--sarc-orange);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s;
	box-sizing: border-box;
}

.sarc-contact-form__submit:hover,
.sarc-contact-form__submit:focus {
	background: #a33b00 !important;
	box-shadow: var(--card-shadow);
}

.sarc-contact-form__submit:focus-visible {
	outline: 3px solid var(--sarc-dark-forest) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px var(--sarc-white) !important;
}

/* ── Office locations section ────────────────────────────────────────────── */

.sarc-offices-section {
	background: var(--sarc-near-white-mint);
	padding: 4rem 2rem;
}

.sarc-offices-section__inner {
	max-width: var(--content-max);
	margin: 0 auto;
}

.sarc-offices-heading {
	font-family: var(--wp--preset--font-family--brandon-grotesque), sans-serif;
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--sarc-dark-forest);
	margin: 0 0 2rem;
	line-height: 1.15;
}

.sarc-offices-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	align-items: start;
}

/* ── Office card — static (no hover lift) ────────────────────────────────── */

.sarc-office-card {
	background: var(--sarc-white);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	overflow: hidden;
}

.sarc-office-card__map {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--sarc-light-mint);
}

.sarc-office-card__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.sarc-office-card__body {
	padding: 1.5rem 1.375rem 1.625rem;
}

.sarc-office-card__county {
	font-family: var(--wp--preset--font-family--brandon-grotesque), sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--sarc-dark-forest);
	line-height: 1.2;
	margin: 0 0 0.625rem;
}

.sarc-office-card__address {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1rem;
	color: var(--sarc-deep-forest);
	line-height: 1.5;
	margin: 0 0 0.75rem;
}

.sarc-office-card__contact {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.9375rem;
	color: var(--sarc-deep-forest);
	line-height: 1.5;
	margin: 0 0 0.25rem;
}

.sarc-office-card__contact a {
	color: var(--sarc-deep-forest) !important;
	text-decoration: none;
}

.sarc-office-card__contact a:hover,
.sarc-office-card__contact a:focus {
	text-decoration: underline;
}

.sarc-office-card__directions {
	display: inline-block;
	margin-top: 0.875rem;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--sarc-orange) !important;
	text-decoration: none;
}

.sarc-office-card__directions:hover,
.sarc-office-card__directions:focus {
	text-decoration: underline;
}

.sarc-office-card__directions:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
	.sarc-offices-grid {
		grid-template-columns: 1fr;
	}

	.sarc-offices-section {
		padding: 3rem 1.5rem;
	}

	.sarc-office-card__map {
		aspect-ratio: 8 / 3;
	}
}

@media (min-width: 992px) and (max-width: 1224px) {
	.sarc-contact-page .sarc-page-banner__inner,
	.sarc-contact-page .sarc-interior-body__inner {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}
}

@media (min-width: 1225px) {
	.sarc-contact-page .sarc-page-banner__inner,
	.sarc-contact-page .sarc-interior-body__inner {
		padding-left: 0;
		padding-right: 0;
	}
}


/* ==========================================================================
   SEARCH RESULTS  (search.php)
   ========================================================================== */


/* ── Search bar ──────────────────────────────────────────────────────────── */

.sarc-search-bar {
	margin-bottom: 2.5rem;
}

.sarc-search-bar__field-wrap {
	position: relative;
	max-width: 560px;
	margin-bottom: 0.875rem;
}

.sarc-search-bar__input {
	width: 100%;
	height: 52px;
	padding: 0 3.5rem 0 1rem;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1rem;
	color: var(--sarc-deep-forest) !important;
	background: var(--sarc-white);
	border: 1px solid var(--sarc-slate-green);
	border-radius: 4px;
	box-sizing: border-box;
	outline: none;
	transition: border-color var(--transition);
}

.sarc-search-bar__input::placeholder {
	color: var(--sarc-slate-green);
	opacity: 1;
}

.sarc-search-bar__input:hover {
	border-color: var(--sarc-slate-green);
}

.sarc-search-bar__input:focus {
	border-color: var(--sarc-dark-forest);
}

.sarc-search-bar__input:focus-visible {
	outline: 3px solid var(--sarc-dark-forest) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px var(--sarc-near-white-mint) !important;
	border-color: var(--sarc-dark-forest) !important;
}

/* Submit: transparent overlay over the icon zone */
.sarc-search-bar__submit {
	position: absolute;
	right: 0;
	top: 0;
	width: 52px;
	height: 52px;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--sarc-slate-green);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--transition);
}

.sarc-search-bar__submit:hover,
.sarc-search-bar__submit:focus {
	color: var(--sarc-deep-forest);
}

.sarc-search-bar__submit:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 2px;
	border-radius: 4px;
}

.sarc-search-bar__submit svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Result count */
.sarc-search-bar__count {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.9375rem;
	color: var(--sarc-slate-green);
	margin: 0;
}

.sarc-search-bar__count strong {
	color: var(--sarc-deep-forest);
	font-weight: 600;
}

/* ── Responsive + alignment ──────────────────────────────────────────────── */

@media (min-width: 992px) and (max-width: 1224px) {
	.sarc-search-page .sarc-page-banner__inner,
	.sarc-search-page .sarc-interior-body__inner {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}
}

@media (min-width: 1225px) {
	.sarc-search-page .sarc-page-banner__inner,
	.sarc-search-page .sarc-interior-body__inner {
		padding-left: 0;
		padding-right: 0;
	}
}



/* ============================================================
   PROVIDER DIRECTORY  (page-provider-directory.php)
   ============================================================ */

/* ── CSV download button (inside content area, top-right) ──── */

.sarc-provider-csv-wrap {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1rem;
}

.sarc-provider-csv-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.8rem 2rem;
	border: 2px solid var(--sarc-dark-forest);
	border-radius: 4px;
	background: transparent;
	color: var(--sarc-dark-forest);
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.sarc-provider-csv-btn:hover,
.sarc-provider-csv-btn:focus {
	background: var(--sarc-dark-forest);
	color: var(--sarc-white);
	box-shadow: var(--card-shadow);
	text-decoration: none;
}

.sarc-provider-csv-btn:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 3px;
}

.sarc-provider-csv-icon {
	fill: currentColor;
	flex-shrink: 0;
}

/* ── Content area (grid-area: content) ────────────────────── */

.sarc-provider-content {
	grid-area: content;
	min-width: 0;
}

/* ── Intro text ───────────────────────────────────────────── */

.sarc-provider-intro {
	margin-bottom: 1.5rem;
}

.sarc-provider-intro p {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1rem;
	color: var(--sarc-deep-forest);
	margin: 0 0 0.375rem;
}

/* Learn more link: orange — passes 4.61:1 on near-white mint with updated #C74600 */
.sarc-provider-intro a {
	color: var(--sarc-orange) !important;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.sarc-provider-intro a:hover,
.sarc-provider-intro a:focus,
.sarc-provider-intro a:active {
	color: var(--sarc-orange) !important;
	text-decoration: underline;
}

.sarc-provider-intro a:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 2px;
	border-radius: 2px;
}

/* External-link icon on target="_blank" links in content areas.
   :not(:has(.sarc-ext-icon)) prevents a second icon on Transparency page links
   that already have the SVG injected by sarc_render_transparency_content(). */
.sarc-interior-content a[target="_blank"]:not(:has(.sarc-ext-icon))::after,
.sarc-provider-intro   a[target="_blank"]:not(:has(.sarc-ext-icon))::after {
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-left: 0.25em;
	vertical-align: -0.05em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23C74600' d='M10 7v3H2V2h3V0H0v12h12V7h-2zm0-7H6l1.5 1.5L4 5l1 1 3.5-3.5L10 4V0z'/%3E%3C/svg%3E") no-repeat center / contain;
	background-size: contain;
}

/* ── File-type labels — override (must appear AFTER the external-link icon rule) ──
   The external-link icon rule above uses ::after on a[target="_blank"], which
   overwrites (PDF)/(Word)/etc. on file links that also open in a new tab.
   These rules restore the file-type label by appearing later in the cascade.
   They also suppress the external-link SVG icon on those same links (via
   background:none) since "(PDF)" already communicates both file type and
   external destination. */

.sarc-interior-content a[href$=".pdf"]:not(.sarc-newsletter-link)::after,
.sarc-provider-intro   a[href$=".pdf"]::after {
	content: " (PDF)";
	font-size: 0.875em;
	font-weight: 600;
	color: var(--sarc-slate-green);
	display: inline;
	width: auto;
	height: auto;
	background: none;
}

.sarc-interior-content a[href$=".doc"]:not(.sarc-newsletter-link)::after,
.sarc-interior-content a[href$=".docx"]:not(.sarc-newsletter-link)::after {
	content: " (Word)";
	font-size: 0.875em;
	font-weight: 600;
	color: var(--sarc-slate-green);
	display: inline;
	width: auto;
	height: auto;
	background: none;
}

.sarc-interior-content a[href$=".xlsx"]:not(.sarc-newsletter-link)::after,
.sarc-interior-content a[href$=".xlsm"]:not(.sarc-newsletter-link)::after,
.sarc-interior-content a[href$=".xls"]:not(.sarc-newsletter-link)::after {
	content: " (Excel)";
	font-size: 0.875em;
	font-weight: 600;
	color: var(--sarc-slate-green);
	display: inline;
	width: auto;
	height: auto;
	background: none;
}

.sarc-interior-content a[href$=".ppt"]:not(.sarc-newsletter-link)::after,
.sarc-interior-content a[href$=".pptx"]:not(.sarc-newsletter-link)::after {
	content: " (PPT)";
	font-size: 0.875em;
	font-weight: 600;
	color: var(--sarc-slate-green);
	display: inline;
	width: auto;
	height: auto;
	background: none;
}

.sarc-provider-updated {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.875rem;
	color: var(--sarc-slate-green);
	font-style: italic;
	margin: 0 !important;
}

/* ── Filter form card ─────────────────────────────────────── */

.sarc-provider-filters {
	background: var(--sarc-white);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: 1.5rem;
	margin-bottom: 1.75rem;
}

.sarc-provider-filters__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr) auto;
	gap: 1rem;
	align-items: end;
}

.sarc-provider-filters__field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.sarc-provider-filters__field label {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sarc-dark-forest);
	letter-spacing: 0.01em;
}

/* Input styles match pre-footer mail signup form */
.sarc-provider-filters__field input[type="text"] {
	width: 100%;
	padding: 0.65rem 0.875rem;
	border: 1px solid var(--sarc-slate-green);
	border-radius: 4px;
	background: var(--sarc-white);
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1rem;
	color: var(--sarc-deep-forest);
	box-sizing: border-box;
	line-height: 1.4;
	transition: border-color 0.15s;
	-webkit-appearance: none;
}

.sarc-provider-filters__field input[type="text"]::placeholder {
	color: var(--sarc-green);
	opacity: 1;
}

.sarc-provider-filters__field input[type="text"]:focus {
	border-color: var(--sarc-dark-forest);
	outline: none;
}

.sarc-provider-filters__field input[type="text"]:focus-visible {
	outline: 3px solid var(--sarc-dark-forest) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px var(--sarc-white) !important;
	border-color: var(--sarc-dark-forest);
}

.sarc-provider-filters__actions {
	display: flex;
	align-items: flex-end;
	padding-bottom: 1px;
}

/* Clear button — inactive (disabled) state */
.sarc-provider-clear-btn {
	height: 42px;
	padding: 0 1.25rem;
	background: transparent !important;
	border: 1px solid var(--sarc-slate-green) !important;
	border-radius: 4px;
	color: var(--sarc-slate-green) !important;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: not-allowed;
	white-space: nowrap;
	opacity: 0.5;
	box-shadow: none !important;
	transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s, opacity 0.15s;
}

/* Kill any Kadence hover state on the disabled button */
.sarc-provider-clear-btn:disabled,
.sarc-provider-clear-btn:disabled:hover,
.sarc-provider-clear-btn:disabled:focus,
.sarc-provider-clear-btn:disabled:active {
	background: transparent !important;
	border-color: var(--sarc-slate-green) !important;
	color: var(--sarc-slate-green) !important;
	box-shadow: none !important;
	pointer-events: none;
}

/* Clear button — active (enabled) state */
.sarc-provider-clear-btn:not(:disabled) {
	background: var(--sarc-dark-forest) !important;
	border-color: var(--sarc-dark-forest) !important;
	color: var(--sarc-white) !important;
	cursor: pointer;
	opacity: 1;
}

.sarc-provider-clear-btn:not(:disabled):hover,
.sarc-provider-clear-btn:not(:disabled):focus {
	background: #082e1e !important;
	border-color: #082e1e !important;
	box-shadow: 0 2px 8px rgba(8, 46, 30, 0.35) !important;
}

.sarc-provider-clear-btn:not(:disabled):focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 2px;
}

/* ── Results bar (count + top pagination) ─────────────────── */

.sarc-provider-results-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1rem;
	min-height: 2rem;
}

.sarc-provider-count {
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.9375rem;
	color: var(--sarc-slate-green);
	margin: 0;
}

.sarc-provider-count strong {
	color: var(--sarc-dark-forest);
}

/* ── Pagination — mirrors .sarc-news-archive__pagination ─────── */

.sarc-provider-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	align-items: center;
}

.sarc-provider-pagination--bottom {
	margin-top: 1.5rem;
	justify-content: center;
}

/* All page buttons — same base as news archive .page-numbers */
.sarc-pager-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: 0.5rem 0.75rem;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 1rem;
	font-weight: 500;
	color: var(--sarc-dark-forest) !important;
	background: transparent;
	border: 2px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

/* Hover/focus — orange outline + orange text (same as news) */
.sarc-pager-btn:not(.sarc-pager-btn--current):hover,
.sarc-pager-btn:not(.sarc-pager-btn--current):focus {
	color: var(--sarc-orange) !important;
	border-color: var(--sarc-orange);
	background: transparent;
}

.sarc-pager-btn:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 2px;
}

/* Current: filled dark forest (same as news .current) */
/* opacity: 1 !important overrides Kadence global.min.css button:disabled { opacity: .5 } */
.sarc-pager-btn--current {
	background: #0C4532 !important;
	color: var(--sarc-white) !important;
	border-color: #0C4532 !important;
	font-weight: 700;
	cursor: default;
	opacity: 1 !important;
}

.sarc-pager-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	color: var(--sarc-slate-green);
	font-size: 0.875rem;
}

/* ── Table wrapper ────────────────────────────────────────── */

.sarc-provider-table-wrap {
	overflow-x: auto;
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	background: var(--sarc-white);
	transition: opacity 0.15s;
}

.sarc-provider-table-wrap:focus-visible {
	outline: 3px solid var(--sarc-dark-forest);
	outline-offset: 2px;
}

.sarc-provider-table-wrap--loading {
	opacity: 0.5;
	pointer-events: none;
}

/* ── Table: desktop ───────────────────────────────────────── */

.sarc-provider-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--proxima-nova), sans-serif;
	font-size: 0.9375rem;
}

/* Header row */
.sarc-provider-table thead tr {
	background: var(--sarc-dark-forest);
}

.sarc-provider-table thead th {
	padding: 0.875rem 1rem;
	text-align: left;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--sarc-white);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	border: none;
}

/* Body rows */
.sarc-provider-table tbody tr {
	border-bottom: 1px solid var(--sarc-light-mint);
	transition: background 0.1s;
}

.sarc-provider-table tbody tr:last-child {
	border-bottom: none;
}

.sarc-provider-table tbody tr:nth-child(even) {
	background: var(--sarc-near-white-mint);
}

.sarc-provider-table tbody tr:hover {
	background: var(--sarc-light-mint);
}

.sarc-provider-table tbody td {
	padding: 0.75rem 1rem;
	color: var(--sarc-deep-forest);
	vertical-align: top;
	border: none;
}

/* Vendor # column: slate green */
.sarc-provider-table tbody td:nth-child(2) {
	color: var(--sarc-slate-green);
	font-size: 0.875rem;
	white-space: nowrap;
}

/* Phone column: no-wrap */
.sarc-provider-table tbody td:nth-child(4) {
	white-space: nowrap;
}

/* Service codes: slightly bolder */
.sarc-provider-table tbody td:nth-child(5) {
	font-weight: 600;
	color: var(--sarc-dark-forest);
}

/* No-results row */
.sarc-provider-no-results td {
	padding: 3rem 1rem;
	text-align: center;
	color: var(--sarc-slate-green);
	font-style: italic;
}

/* ── Table → Cards on mobile ──────────────────────────────── */

@media (max-width: 767px) {

	.sarc-provider-table-wrap {
		overflow-x: visible;
		background: transparent;
		box-shadow: none;
		border-radius: 0;
	}

	.sarc-provider-table,
	.sarc-provider-table tbody {
		display: block;
	}

	.sarc-provider-table thead {
		display: none; /* column labels come from data-label */
	}

	/* Each row becomes a card */
	.sarc-provider-table tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"name  vid"
			"city  phone"
			"codes codes"
			"types types";
		gap: 0.25rem 1rem;
		background: var(--sarc-white);
		border-radius: var(--card-radius);
		box-shadow: var(--card-shadow);
		padding: 1.125rem 1.25rem;
		margin-bottom: 0.875rem;
		border-bottom: none;
	}

	.sarc-provider-table tbody tr:nth-child(even) {
		background: var(--sarc-white);
	}

	.sarc-provider-table tbody tr:hover {
		background: var(--sarc-white);
	}

	/* Vendor Name */
	.sarc-provider-table tbody td[data-label="Vendor Name"] {
		grid-area: name;
		font-size: 1rem;
		font-weight: 700;
		color: var(--sarc-dark-forest);
		padding: 0;
		align-self: center;
	}

	/* Vendor # — right-aligned badge */
	.sarc-provider-table tbody td[data-label="Vendor #"] {
		grid-area: vid;
		font-size: 0.8125rem;
		font-weight: 600;
		color: var(--sarc-slate-green);
		padding: 0;
		text-align: right;
		align-self: center;
	}

	/* City */
	.sarc-provider-table tbody td[data-label="City"] {
		grid-area: city;
		font-size: 0.9375rem;
		color: var(--sarc-slate-green);
		padding: 0.125rem 0 0;
	}

	/* Phone */
	.sarc-provider-table tbody td[data-label="Phone"] {
		grid-area: phone;
		font-size: 0.9375rem;
		color: var(--sarc-slate-green);
		padding: 0.125rem 0 0;
		text-align: right;
	}

	/* Service codes */
	.sarc-provider-table tbody td[data-label="Service Code(s)"] {
		grid-area: codes;
		font-size: 0.875rem;
		font-weight: 600;
		color: var(--sarc-dark-forest);
		padding: 0.5rem 0 0;
	}

	.sarc-provider-table tbody td[data-label="Service Code(s)"]::before {
		content: "Codes: ";
		font-weight: 400;
		color: var(--sarc-slate-green);
	}

	/* Service types */
	.sarc-provider-table tbody td[data-label="Service Type(s)"] {
		grid-area: types;
		font-size: 0.875rem;
		color: var(--sarc-slate-green);
		padding: 0.125rem 0 0;
	}

	.sarc-provider-table tbody td[data-label="Service Type(s)"]::before {
		content: "Type: ";
		color: var(--sarc-slate-green);
		font-weight: 400;
	}

	.sarc-provider-no-results td {
		text-align: left;
	}

	/* Filter grid: 2 columns on mobile */
	.sarc-provider-filters__grid {
		grid-template-columns: 1fr 1fr;
	}

	/* Service Type field + Clear button span full width */
	.sarc-provider-filters__field:last-of-type,
	.sarc-provider-filters__actions {
		grid-column: 1 / -1;
	}

	/* Clear button: full width on mobile */
	.sarc-provider-clear-btn {
		width: 100%;
	}

	/* Results bar: stack on mobile */
	.sarc-provider-results-bar {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ── Narrow mobile: single column filter ──────────────────── */

@media (max-width: 479px) {
	.sarc-provider-filters__grid {
		grid-template-columns: 1fr;
	}
}

/* ── Tablet alignment ─────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 991px) {
	.sarc-provider-filters__grid {
		grid-template-columns: repeat(3, 1fr) auto;
	}

	/* Service Type wraps to second row, spans 3 columns */
	.sarc-provider-filters__field:nth-child(4),
	.sarc-provider-filters__field:nth-child(5) {
		grid-column: span 2;
	}

	.sarc-provider-filters__actions {
		align-self: end;
	}
}

/* ── Mobile content padding (matches .sarc-interior-content) ─ */

@media (max-width: 768px) {
	.sarc-provider-content {
		padding: 1.5rem;
	}
}

@media (min-width: 992px) and (max-width: 1224px) {
	.sarc-provider-directory-page .sarc-page-banner__inner,
	.sarc-provider-directory-page .sarc-interior-body__inner {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}
}

@media (min-width: 1225px) {
	.sarc-provider-directory-page .sarc-page-banner__inner,
	.sarc-provider-directory-page .sarc-interior-body__inner {
		padding-left: 0;
		padding-right: 0;
	}
}