/**
 * CCSC theme overrides and WordPress bridging.
 *
 * The legacy stylesheet (legacy.css) targets Drupal-generated class names.
 * This file maps the new WordPress markup onto that design, fixes accessibility
 * issues, and provides styles for components not present in the legacy CSS.
 */

:root {
	--ccsc-blue: #e2f4ff;
	--ccsc-red: #e52833;
	--ccsc-soft-black: #3d3d3d;
	--ccsc-gray: #e8e6ea;
	--ccsc-max-width: 1200px;
}

/* ---- Base ---- */
html, body {
	overflow-x: clip; /* contain full-bleed 100vw sections, avoid horizontal scroll */
}
body {
	background-color: #eee;
	color: var(--ccsc-soft-black);
	margin: 0;
	font-family: "Proxima Nova", proxima-nova, "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

.layout-center {
	background-color: #fff;
	max-width: 100%;
	margin: 0 auto;
}

/* ---- Skip link (accessible) ---- */
.ccsc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ccsc-red);
	color: #fff;
	padding: 10px 16px;
	z-index: 1000;
}
.ccsc-skip-link:focus {
	left: 8px;
	top: 8px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}

/* ---- Header (overlaid translucent bar, like the legacy design) ---- */
/* Fixed on desktop so it stays in view while scrolling. Headroom.js then
   toggles .headroom--pinned / .headroom--unpinned: the bar lingers briefly on
   scroll-down (offset 75 / tolerance 10) and then slides up out of view,
   matching the live site's #superfish-1 behavior. */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 40;
	background: linear-gradient(rgba(40,55,80,0.75), rgba(40,55,80,0.40));
}
.site-header__inner {
	/* Header spans the full viewport so the logo sits flush left and the
	   links/icons sit flush right, instead of being boxed into the centered
	   1200px content container. */
	width: 100%;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 0.5rem 1.5rem;
}
.site-logo { flex: 0 0 auto; margin-right: auto; }
.site-logo__link { display: inline-block; }
.site-logo__img {
	/* Scale the logo with the viewport so it stays readable on very wide
	   screens, with a floor (56px, the original size) and a ceiling (88px) so
	   it never gets too small or overpowering. */
	height: clamp(56px, 5vw, 88px);
	max-height: none;
	width: auto;
	display: block;
}
/* Default (desktop, translucent navy header): show the white-text logo. */
.site-logo__img--desktop { display: block; }
.site-logo__img--mobile  { display: none; }
/* Collapsed (hamburger) header has a white background, so swap to the
   black-text logo for contrast. Mirrors the header's own background switch. */
.site-header.nav-collapsed .site-logo__img--desktop { display: none; }
.site-header.nav-collapsed .site-logo__img--mobile  { display: block; }
/* Keep the logo a fixed, compact size in the collapsed bar (vertical space is
   tight there); only the desktop bar scales up on wide screens. */
.site-header.nav-collapsed .site-logo__img { height: 48px; }
.headroom {
	will-change: transform;
	transition: transform 200ms linear;
}
.headroom--pinned { transform: translateY(0%); }
.headroom--unpinned { transform: translateY(-100%); }

/* ---- Primary navigation: horizontal top level, dropdown children ---- */
.primary-nav { flex: 0 1 auto; }
.primary-menu,
.primary-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-menu {
	display: flex;
	flex-wrap: nowrap; /* keep the five top-level items on one line like the live bar */
	justify-content: flex-end;
	gap: 0.5rem 1.25rem;
}
.primary-menu > li { white-space: nowrap; }
.primary-menu > li { position: relative; }
.primary-menu a {
	text-decoration: none;
	color: #fff;
	font-weight: 300; /* thinner, matching the live menu */
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.95rem;
	padding: 1rem 0.25rem;
	display: inline-block;
	background-color: rgba(255,255,255,0); /* transparent base for ease-in */
	transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
.primary-menu a:hover,
.primary-menu a:focus {
	color: #fff;
	/* semi-transparent highlight that eases in on hover */
	background-color: rgba(255,255,255,0.18);
}
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-ancestor > a {
	border-bottom: 3px solid var(--ccsc-red);
}

/* Dropdowns
   Eased open/close: instead of toggling `display` (which can't animate and
   snaps in), the panel stays in the layout and is hidden via opacity +
   visibility, with a small downward slide. On hover/focus it fades and slides
   into place; on leave it eases back out. */
.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(0,0,0,0.18);
	padding: 0.25rem 0;
	z-index: 50;
	/* Hidden resting state. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	/* Ease out on close (slower than the open); visibility is delayed to match
	   so the fade can finish before the panel is removed. */
	transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0.55s;
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu,
.primary-menu li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	/* Ease in on open; no visibility delay so it appears immediately. */
	transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
	.primary-menu .sub-menu,
	.primary-menu li:hover > .sub-menu,
	.primary-menu li:focus-within > .sub-menu {
		transition: none;
		transform: none;
	}
}
.primary-menu .sub-menu a {
	color: var(--ccsc-soft-black);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	display: block;
	padding: 0.55rem 1rem;
}
.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus {
	background: var(--ccsc-blue);
	color: var(--ccsc-soft-black);
	text-shadow: none;
}

/* Header icon row */
.header-icons {
	flex: 0 0 auto;
	display: flex;
	gap: 0.9rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.header-icons a {
	color: #fff;
	line-height: 0;
	display: inline-flex;
	align-items: center;
}
.header-icons .header-icon {
	display: block;
	width: 20px;
	height: 20px;
}
.header-icons a:hover .header-icon,
.header-icons a:focus .header-icon {
	opacity: 0.8;
}

/* ---- Google Translate switcher (globe icon) ----
   Presented like the live site: a white globe in the header icon row. Our SVG
   is the visible control; Google's "simple" gadget renders into
   #google_translate_element and is overlaid transparently on top as the click
   target (main.js also forwards globe clicks to it as a fallback). Only
   Google's visible chrome is hidden — never the gadget's clickable link. */
.header-icon-translate {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 20px;
	height: 20px;
	cursor: pointer;
}
.header-icon-translate .header-icon {
	display: block;
	width: 20px;
	height: 20px;
	color: #fff;
	pointer-events: none; /* clicks go to the overlaid gadget link */
}
.header-icon-translate:hover .header-icon {
	opacity: 0.8;
}

/* The gadget overlays the globe exactly and is transparent but clickable. */
.header-icon-translate #google_translate_element {
	position: absolute;
	inset: 0;
	width: 20px;
	height: 20px;
	overflow: hidden;
	z-index: 2;
}
/* Google's wrapper + "simple" gadget: make the clickable link fill the 20px
   box and be transparent (we show our own globe underneath). Keep it
   displayed — hiding .skiptranslate/.goog-te-gadget would remove the click
   target entirely. */
.header-icon-translate .goog-te-gadget,
.header-icon-translate .goog-te-gadget-simple,
.header-icon-translate .goog-te-gadget-simple a,
.header-icon-translate .goog-te-gadget-simple .goog-te-menu-value {
	display: block;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: none !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 20px;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
}
/* Hide the text/arrow spans Google puts inside the trigger, but not the <a>. */
.header-icon-translate .goog-te-gadget-simple span {
	display: none !important;
}
.header-icon-translate .goog-te-gadget-icon {
	display: none !important;
}

/* Keyboard focus ring on the globe when the gadget link is focused. */
.header-icon-translate:focus-within .header-icon {
	outline: 3px solid #fff;
	outline-offset: 2px;
	border-radius: 3px;
}

/* Google injects a top banner iframe and shifts <body> down when a language is
   active. Neutralize only the banner + body offset; do NOT hide .skiptranslate
   globally (that also matches the gadget itself). */
body { top: 0 !important; }
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame { display: none !important; }

/* Mobile nav toggle (hamburger) */
.nav-toggle {
	display: none;
	margin-left: auto;
	background: var(--ccsc-red);
	border: 0;
	width: 44px; height: 40px;
	cursor: pointer;
	border-radius: 4px;
	position: relative;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	position: absolute;
	left: 50%; transform: translateX(-50%);
	width: 22px; height: 2px; background: #fff;
}
.nav-toggle__bar { top: 50%; }
.nav-toggle__bar::before { content: ""; top: -7px; }
.nav-toggle__bar::after  { content: ""; top: 7px; }

.nav-toggle:focus-visible,
a:focus-visible,
button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* ---- Collapsed (hamburger) layout ----
   The switch is overflow-driven: main.js adds .nav-collapsed to .site-header the
   moment the horizontal bar no longer fits, independent of a fixed breakpoint.
   The same rules are also applied under a max-width media query as a no-JS
   fallback (see below). */
.site-header.nav-collapsed {
	position: static;
	background: #fff;
	border-bottom: 3px solid var(--ccsc-red);
}
.site-header.nav-collapsed .site-header__inner { flex-wrap: wrap; }
.site-header.nav-collapsed .nav-toggle { display: block; }
.site-header.nav-collapsed .primary-nav { flex-basis: 100%; }
.site-header.nav-collapsed .primary-menu { flex-direction: column; gap: 0; }
.site-header.nav-collapsed .primary-menu a {
	color: var(--ccsc-soft-black);
	text-shadow: none;
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid #eee;
}
.site-header.nav-collapsed .primary-menu .sub-menu {
	position: static;
	box-shadow: none;
	min-width: 0;
	padding-left: 1rem;
	/* In the hamburger panel the sub-menus are always expanded inline — undo the
	   desktop fade/slide hidden state so they stay fully visible. */
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: none;
}
.site-header.nav-collapsed .header-icons a { color: var(--ccsc-soft-black); }
.site-header.nav-collapsed .primary-nav[hidden] { display: none; }

/* When the hamburger menu is open, Headroom must not slide the header. The
   header carries the open panel, so a translateY from Headroom would drag the
   menu off-screen on scroll (the bottom items become unreachable and the page
   appears to scroll past them). Neutralize the transform and the slide
   transition while open, and let the open panel scroll internally if it is
   taller than the viewport so the last items are always reachable. */
.site-header.nav-collapsed.menu-open {
	transform: none !important;
	transition: none !important;
}
.site-header.nav-collapsed.menu-open .primary-nav:not([hidden]) {
	max-height: calc(100vh - 64px); /* viewport minus the top logo/toggle row */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain; /* don't chain scroll to the page behind */
}

/* In collapsed (hamburger) mode the icon row is NOT shown in the top bar. It
   moves to the bottom of the open menu instead. Flex order + 100% basis put it
   on its own line after the nav; it only appears when the menu is open (i.e.
   the nav is not hidden). */
.site-header.nav-collapsed .header-icons {
	display: none;
}
.site-header.nav-collapsed .primary-nav:not([hidden]) ~ .header-icons {
	display: flex;
	order: 3;            /* after logo/toggle (implicit) and the nav */
	flex-basis: 100%;
	justify-content: center;
	gap: 1.5rem;
	padding: 1rem 0 0.5rem;
	border-top: 1px solid #eee;
	margin-top: 0.25rem;
}
/* The translate globe sits on a dark bar on desktop; in the light hamburger
   panel, show it in the soft-black icon color like the other links. */
.site-header.nav-collapsed .primary-nav:not([hidden]) ~ .header-icons .header-icon {
	color: var(--ccsc-soft-black);
}

/* No-JS fallback: without the overflow script, fall back to a sensible fixed
   breakpoint so the menu is still usable on small screens. (With JS, the
   <html> element loses .no-js and this block is ignored.) */
.no-js .primary-nav[hidden] { display: block; }
@media (max-width: 860px) {
	.no-js .site-header {
		position: static;
		background: #fff;
		border-bottom: 3px solid var(--ccsc-red);
	}
	.no-js .site-header__inner { flex-wrap: wrap; }
	.no-js .nav-toggle { display: block; }
	.no-js .primary-nav { flex-basis: 100%; }
	.no-js .primary-menu { flex-direction: column; gap: 0; }
	.no-js .primary-menu a { color: var(--ccsc-soft-black); text-shadow: none; padding: 0.75rem 0.5rem; border-bottom: 1px solid #eee; }
	.no-js .primary-menu .sub-menu { position: static; box-shadow: none; min-width: 0; padding-left: 1rem; opacity: 1; visibility: visible; transform: none; transition: none; }
	.no-js .header-icons a { color: var(--ccsc-soft-black); }
	/* Move the icon row to the bottom, full width (menu is always open in no-JS). */
	.no-js .header-icons {
		order: 3;
		flex-basis: 100%;
		justify-content: center;
		gap: 1.5rem;
		padding: 1rem 0 0.5rem;
		border-top: 1px solid #eee;
	}
	.no-js .header-icons .header-icon { color: var(--ccsc-soft-black); }
	/* White header in the no-JS collapsed state → black-text logo, compact size. */
	.no-js .site-logo__img--desktop { display: none; }
	.no-js .site-logo__img--mobile  { display: block; }
	.no-js .site-logo__img { height: 48px; }
}

/* ---- Content container ---- */
.site-main {
	max-width: var(--ccsc-max-width);
	margin: 0 auto;
	padding: 1.5rem 1rem 3rem;
}
/* When the final section is a full-bleed colored band (e.g. the front page's
   circle-anchors section), drop the container's bottom padding so the band
   meets the footer flush, with no white gap between them. */
.site-main > .ccsc-fullbleed:last-child {
	margin-bottom: -3rem; /* cancel .site-main padding-bottom */
}
/* When the page opens with a hero, the overlaid header sits on top of it.
   When it does not, reserve space so the absolute header never covers content. */
.site-main > .ccsc-hero:first-child,
.site-main > article > .ccsc-hero:first-child {
	margin-top: 0;
}
/* On pages that open with a hero, the hero must sit flush at the very top so
   the fixed header overlays it (as on the front page and the live site). The
   container's own top padding would otherwise push the hero down, leaving a
   white gap above the banner, so remove it here. */
body.has-hero .site-main {
	padding-top: 0;
}
body:not(.has-hero) .site-main {
	padding-top: 6rem;
}
@media (max-width: 860px) {
	body:not(.has-hero) .site-main { padding-top: 1.5rem; }
}
.entry-title {
	font-size: 2.25rem;
	font-weight: 600;
}

/* ---- Inner-page content headings ----
   The live Drupal site styled body-content headings inside
   `body .layout-center article` (see legacy.css): h3 got a red underline and
   h4 a light-blue block. Those legacy selectors only matched the old markup and
   only covered h3/h4, so WordPress pages authored in Gutenberg (which start at
   h2) rendered with no heading treatment. These rules carry that visual
   language onto the new `.entry-content` wrapper, which is emitted only by the
   inner-page templates (page, post, staff, calendar) and never by the
   front page, so the homepage is unaffected. */
.entry-content h2,
.entry-content h3 {
	border-bottom: 4px solid var(--ccsc-red);
	padding-bottom: 0.4rem;
	margin-bottom: 2rem;
	font-weight: 700;
}
.entry-content h2 {
	font-size: 1.75rem;
	line-height: 1.3;
}
.entry-content h3 {
	font-size: 1.35rem;
	line-height: 1.3;
}
.entry-content h4 {
	padding: 10px;
	background-color: var(--ccsc-blue);
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
}

/* Inner-page h5 at the legacy scale. The FAQ accordion restyles h5 as its
   toggle via `.ccsc-faq h5` (defined later with equal specificity, so it wins
   by source order). */
.entry-content h5 {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 1rem;
}

/* ---- Inner-page list bullets ----
   The live site gives list items inside page content a custom red bullet via
   `body .layout-center article li:before` (see legacy.css). That legacy
   selector expected `.layout-center` to be a child element of <body> (the old
   Drupal markup). In this theme `layout-center` is a class ON <body>, so the
   descendant selector never matches and the bullets were lost. Re-scope the
   same treatment to `.entry-content`, the inner-page content wrapper emitted by
   the page/post/staff/calendar templates and never by the front page. */
.entry-content ul li {
	list-style: none;
}
.entry-content ul li::before {
	content: "\2022";
	color: var(--ccsc-red);
	font-size: 30px;
	display: block;
	position: relative;
	max-width: 0;
	max-height: 0;
	left: -20px;
	top: -3px;
}

/* ---- Apply Now: application button blocks ----
   The migrated apply-now content keeps the live site's `.apply-button-div`
   wrappers and `ul.apply-button-list` markup, but the legacy rules that styled
   them were scoped to Drupal node IDs (.node-101 / .node-234) and never came
   across. These recreate that treatment, scoped to `.entry-content` so they
   apply wherever the content block appears. Values mirror the legacy theme:
   two 50%% float columns, red rounded "button" list items that darken on hover. */
/* Contain the floated apply-button columns so the content that follows them
   (and the article's bottom edge) sits below, not alongside. The live site got
   this from `body .layout-center { overflow: hidden }` + the article clearfix. */
.entry-content::after {
	content: "";
	display: table;
	clear: both;
}
.entry-content .apply-button-div {
	width: 50%;
	float: left;
	padding-right: 40px;
	box-sizing: border-box;
}
/* The two 50%% columns sit side by side; the block that follows them (the plain
   div with the deadline text and image) must drop below, not wrap alongside the
   floats. Clear any element that immediately follows an apply-button column. */
.entry-content .apply-button-div + :not(.apply-button-div) {
	clear: both;
}
.entry-content ul.apply-button-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Cancel the legacy red bullet (body .layout-center article li:before) on
   these button lists, exactly as the live site did. */
.entry-content ul.apply-button-list li::before {
	content: none;
}
.entry-content ul.apply-button-list li {
	display: inline-block;
	background-color: var(--ccsc-red);
	margin: 10px;
	padding: 10px;
	border-radius: 5px;
}
.entry-content ul.apply-button-list li a,
.entry-content ul.apply-button-list li a:visited {
	display: block;
	padding: 20px;
	text-decoration: none;
	color: #fff;
}
.entry-content ul.apply-button-list li:hover {
	background-color: #b42833;
	transition: all 0.2s ease-in-out;
}
/* On narrow screens the two columns stack full width, like the live site. */
@media (max-width: 860px) {
	.entry-content .apply-button-div {
		width: 100%;
		float: none;
		padding-right: 0;
	}
}

/* ---- Hero ---- */
.ccsc-hero {
	position: relative;
	overflow: hidden;
}

/* Full-bleed helper: break out of the constrained .site-main container so a
   section spans the full viewport width. Using left/right positioning relative
   to the viewport avoids the sub-pixel overflow that calc(50% - 50vw) can cause
   when the container has padding. */
.ccsc-hero--home,
.ccsc-hero--section,
.ccsc-fullbleed {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* Full-bleed section: the band (background/padding) spans the viewport while the
   inner content is centered at the container width. */
.ccsc-fullbleed__inner {
	max-width: var(--ccsc-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
	box-sizing: border-box;
}
/* Remove the container's top/side padding effect for the hero so it is flush
   under the overlaid header. */
.site-main > .ccsc-hero--home:first-child {
	margin-top: -1.5rem; /* cancels .site-main top padding */
}
/* On mobile the header collapses to position:static (in normal flow), so the
   negative top margin above would pull the hero up under the static header and
   clip the logo. The negative margin is only needed to sit flush beneath the
   FIXED (out-of-flow) desktop header, so reset it once the header is static. */
@media (max-width: 860px) {
	.site-main > .ccsc-hero--home:first-child { margin-top: 0; }
}
/* Same reset when JS collapses the header into the white hamburger bar. */
.site-header.nav-collapsed ~ .site-main > .ccsc-hero--home:first-child {
	margin-top: 0;
}
/* Match the live site (.flexslider .slides img): the hero keeps the image's
   natural aspect ratio (width:100% / height:auto) with only a min-height floor
   for very narrow viewports. We intentionally do NOT cap the height, so wide
   screens never crop the top of the photo. */
.ccsc-hero img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	min-height: 250px;
}

/* Full-width home hero images span the viewport and scale by aspect ratio. */
.ccsc-hero--home img {
	width: 100%;
	height: auto;
}
.js .ccsc-hero--home .ccsc-slide img { height: auto; }

/* ---- Hero slider (cross-fade) ---- */
.ccsc-slider__track {
	position: relative;
}
.ccsc-slider .ccsc-slide {
	margin: 0;
}
/* When JS is active, stack slides and fade between them. */
.js .ccsc-slider .ccsc-slider__track {
	display: grid;
}
.js .ccsc-slider .ccsc-slide {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity 600ms ease-in-out;
	pointer-events: none;
}
.js .ccsc-slider .ccsc-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}
/* Without JS, show the first slide only (others hidden) to avoid a tall stack. */
.no-js .ccsc-slider .ccsc-slide:not(.is-active) {
	display: none;
}

/* Prev/next controls */
.ccsc-slider__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 12;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(0,0,0,0.4);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}
.ccsc-slider__btn:hover,
.ccsc-slider__btn:focus-visible { background: var(--ccsc-red); }
.ccsc-slider__btn--prev { left: 12px; }
.ccsc-slider__btn--next { right: 12px; }

/* Dots pinned to the very bottom edge of the hero, clear of the CTA button. */
.ccsc-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	z-index: 12;
	display: flex;
	justify-content: center;
	gap: 4px;
}
/* Small visible dot (via ::before), with a larger transparent hit area. */
.ccsc-slider__dot {
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ccsc-slider__dot::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 1px solid #fff;
	background: transparent;
}
.ccsc-slider__dot.is-active::before,
.ccsc-slider__dot:hover::before { background: #fff; }
.ccsc-slider__dot:focus-visible { outline: 2px solid #fff; outline-offset: 1px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
	.js .ccsc-slider .ccsc-slide { transition: none; }
}
.ccsc-hero__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1rem 1.5rem;
	color: #fff;
	background: linear-gradient(transparent, rgba(0,0,0,0.6));
	font-size: 1.25rem;
}

/* Stacked red-block hero words (Belong / Grow / Achieve), bottom-left. */
.ccsc-hero__words {
	position: absolute;
	left: 0;
	bottom: 2.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Small vertical gap between the stacked red bars (Belong / Grow / Achieve)
	   so each reads as its own block, matching the live site. */
	gap: 6px;
}
.ccsc-hero__word {
	background: var(--ccsc-red);
	color: #fff;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: clamp(1.75rem, 4vw, 3rem);
	line-height: 1.05;
	padding: 0.1em 0.4em;
}
@media (max-width: 860px) {
	.ccsc-hero__words { bottom: 1rem; }
}

/* US News gold badge, overlaid near the top-right of the home rotator (as on
   the live site: ~100px wide, pulled up over the hero). The home hero is full
   viewport width, so offset the badge from the right so it sits just inside the
   centered content column rather than flush to the viewport edge. */
/* US News gold badge, overlaid near the lower-right of the home rotator, as on
   the live site (~90px, square image, ~10px from the right edge, sitting in the
   lower third of the hero). The selector is scoped under `.ccsc-hero--home img`
   and overrides every sizing property the full-width hero image rules set —
   including `min-height: 250px`, which was stretching/overflowing the badge. */
.ccsc-hero--home img.ccsc-hero__badge {
	position: absolute;
	bottom: 12%;
	right: 15px;
	top: auto;
	left: auto;
	width: 90px;
	height: auto;
	min-height: 0;
	max-height: none;
	object-fit: contain;
	z-index: 10;
	display: block;
}
@media (max-width: 600px) {
	/* Smaller on phones so it doesn't crowd the hero words/CTA. */
	.ccsc-hero--home img.ccsc-hero__badge { width: 64px; right: 10px; bottom: 14%; }
}

/* Bordered "Apply Now" button over the hero, matching the legacy treatment.
   Raised well above the dot row so the two never visually overlap. */
.ccsc-hero__cta {
	position: relative;
	height: 0;
	text-align: center;
	z-index: 10;
	bottom: 105px;
}
.ccsc-hero__cta a,
a.ccsc-btn--enroll {
	display: inline-block;
	max-width: calc(100vw - 2rem);
	font-size: 1.15rem;
	color: #fff;
	text-decoration: none;
	border: 2px solid #fff;
	padding: 0.6rem 1.1rem;
	transition: background-color 0.3s linear;
	box-sizing: border-box;
}
.ccsc-hero__cta a:hover,
a.ccsc-btn--enroll:hover {
	background-color: rgba(230, 48, 45, 0.75);
}
@media (max-width: 600px) {
	/* On small screens, the hero words sit top-left and the CTA becomes a solid
	   full-width bar directly below the hero image, so the full label always fits. */
	.ccsc-hero__words { bottom: auto; top: 1rem; }

	/* Dots would collide with the CTA bar at the section bottom; hide them.
	   Prev/next arrows remain for navigation. */
	.ccsc-hero--home .ccsc-slider__dots { display: none; }

	.ccsc-hero__cta {
		position: static;
		height: auto;
		bottom: auto;
		background: var(--ccsc-red);
		padding: 0;
		width: 100%;
		box-sizing: border-box;
	}
	.ccsc-hero__cta a,
	a.ccsc-btn--enroll {
		display: block;
		width: 100%;
		border: 0;
		text-align: center;
		font-size: 1rem;
		line-height: 1.3;
		padding: 0.85rem 1rem;
		white-space: normal;
		box-sizing: border-box;
	}
	.ccsc-hero__cta a:hover,
	a.ccsc-btn--enroll:hover { background-color: rgba(230, 48, 45, 0.85); }
}

/* The "What We Offer" feature cards span the full viewport width on the live
   Drupal site, so let this section's inner wrapper go edge-to-edge instead of
   clamping to the 1200px container. The header text is re-centered below. */
.view-id-what_we_offer > .ccsc-fullbleed__inner {
	max-width: none;
	padding-left: 30px;
	padding-right: 30px;
}
/* Zero the default UA list padding/margin; the symmetric side padding on the
   inner wrapper (above) keeps the card row inset evenly from both edges.
   match the live site. */
/* ---- Feature card row (legacy "what_we_offer" layout) ----
   The three cards each hold a fixed max width so they never shrink and get cut
   off, and the row distributes the LEFTOVER space between them as the gap. As
   the viewport widens the cards stay the same size while the spacing between
   them grows, until the row reaches its cap. Stacked to one column below 960px;
   the colored band stays full-width throughout. */
.view-id-what_we_offer > .ccsc-fullbleed__inner > ul {
	margin: 0 auto;
	padding: 0 0 20px;
	list-style: none;
	max-width: 2000px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px; /* vertical spacing when stacked (legacy) */
}
@media (min-width: 960px) {
	.view-id-what_we_offer > .ccsc-fullbleed__inner > ul {
		flex-direction: row;
		flex-wrap: nowrap; /* keep all three cards on one line — never wrap/drop one */
		align-items: stretch;
		/* space-between pushes the leftover space (past 3 capped cards) into the
		   gaps between them, so the spacing grows with the viewport. nowrap
		   guarantees the third card can never drop to a new line. A minimum gap
		   keeps them apart at the narrow end before they reach their cap. */
		justify-content: space-between;
		gap: 20px 40px;
	}
}
@media (max-width: 860px) {
	.view-id-what_we_offer > .ccsc-fullbleed__inner {
		padding-left: 15px;
		padding-right: 15px;
	}
}
/* Neutralize the legacy float grid from legacy.css. That file still ships the
   original Drupal layout for these items — `.offer-view-item:nth-child(3n+...)`
   with `float` and large positive/negative margins (margin-left up to 66.6%,
   margin-right: -100%). Those `nth-child` selectors outrank a plain-class rule,
   so inside our flex row they were displacing the third card off-screen (the
   "missing" card). Reset them here with matching `nth-child` specificity so the
   flex layout controls positioning. */
.view-id-what_we_offer .offer-view-item,
.view-id-what_we_offer .offer-view-item:nth-child(1n+0),
.view-id-what_we_offer .offer-view-item:nth-child(3n+1),
.view-id-what_we_offer .offer-view-item:nth-child(3n+2),
.view-id-what_we_offer .offer-view-item:nth-child(3n+0) {
	float: none;
	margin-left: 0;
	margin-right: 0;
}
/* Each card: full width when stacked. */
.view-id-what_we_offer .offer-view-item {
	box-sizing: border-box;
	padding: 0;
	width: 100%;
	max-width: 490px;
}
/* In the row, cards share the space equally and may shrink so all three always
   fit on one line, but never grow past the ~490px readable width. The leftover
   space past 3*490px becomes the gap between them (and grows with the
   viewport). */
@media (min-width: 960px) {
	.view-id-what_we_offer .offer-view-item,
	.view-id-what_we_offer .offer-view-item:nth-child(3n+1),
	.view-id-what_we_offer .offer-view-item:nth-child(3n+2),
	.view-id-what_we_offer .offer-view-item:nth-child(3n+0) {
		flex: 1 1 0;
		min-width: 0;
		float: none;
		margin-left: 0;
		margin-right: 0;
		max-width: 490px;
	}
}

/* ---- "Who We Are" view header above the feature cards ---- */
.view-id-what_we_offer .view-header {
	text-align: center;
	padding: 0 1rem 1.5rem;
	max-width: var(--ccsc-max-width);
	margin-left: auto;
	margin-right: auto;
}
.view-id-what_we_offer .view-header h1 {
	font-weight: 700;
	font-size: 2rem;
	margin: 0 auto 0.5rem;
}
.view-id-what_we_offer .view-header p {
	max-width: 70%;
	margin: 0 auto;
	font-weight: 400;
	line-height: 1.5;
}
@media (max-width: 860px) {
	.view-id-what_we_offer .view-header p { max-width: 90%; }
}

/* Feature card image fills the wrapper at a wide aspect ratio (legacy 300px band). */
.view-id-what_we_offer .wwo-wrapper .imageholder img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	max-height: none;
	padding: 0;
}
/* The "Learn more" link revealed on hover (inside the sliding text overlay). */
.view-id-what_we_offer .textoverlay .btn {
	display: inline-block;
	margin-top: 0.5rem;
	color: #fff;
	text-decoration: none;
	border: 2px solid #fff;
	padding: 0.4rem 1rem;
	font-size: 0.95rem;
}
.view-id-what_we_offer .textoverlay .btn:hover,
.view-id-what_we_offer .textoverlay .btn:focus {
	background-color: rgba(230,48,45,0.75);
}

/* ---- Circle image anchors ("Our Mission / Enroll / Support / Join") ----
   Colors (light-blue band, default dark text) come from legacy.css and match
   the live site. These overrides only fix layout: a small circular image
   floated left with the title + body in a clean column beside it, so the body
   text no longer wraps underneath the circle. */
/* On the live site this section runs nearly full width, with items only ~30px
   from the page edges. Clamping the inner wrapper to the 1200px container added
   ~100px centering gutters on wide screens, pushing the items far inward. Let it
   span the band with a small symmetric side padding instead (zeroing the <ul>
   default list indent so left and right match). */
.view-id-circle_image_anchors > .ccsc-fullbleed__inner {
	max-width: none;
	margin: 0;
	padding-left: 30px;
	padding-right: 30px;
	list-style: none;
	/* The wrapper spans 100vw (full-bleed); keep the side padding inside that
	   width so it never adds to the viewport and triggers horizontal scroll. */
	box-sizing: border-box;
}
@media (max-width: 860px) {
	.view-id-circle_image_anchors > .ccsc-fullbleed__inner {
		padding-left: 15px;
		padding-right: 15px;
	}
}
/* Vertical padding on the band. */
.view-id-circle_image_anchors {
	padding: 50px 0;
}
.view-id-circle_image_anchors ul li {
	padding: 10px;
}
/* Default (wider screens, > 550px): circle image floated to the LEFT of the
   title + body column, matching the live site. The live stylesheet floats the
   image left by default and only stacks/centers it at max-width:550px, so we
   mirror that breakpoint below. */
.view-id-circle_image_anchors .circle-view-item {
	min-width: 0;
	padding: 0.75rem 1.5rem 0.75rem 0;
	box-sizing: border-box;
}
/* Clear the float so each item reserves full height even if its text is short. */
.view-id-circle_image_anchors .circle-view-item::after {
	content: "";
	display: table;
	clear: both;
}
.view-id-circle_image_anchors .views-field-field-circle-image {
	float: left;
	padding: 0;
	margin: 0 1.25rem 0 0;
	width: 140px;
	max-width: 100%;
}
.view-id-circle_image_anchors .views-field-field-circle-image img {
	width: 140px;
	height: 140px;
	max-width: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
/* Title and body sit in a column beside the circle (don't wrap underneath it).
   140px image + 1.25rem gap = ~160px left offset. */
.view-id-circle_image_anchors .views-field-title,
.view-id-circle_image_anchors .views-field-body {
	margin-left: 160px;
	min-width: 0;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
.view-id-circle_image_anchors .views-field-title {
	font-weight: 700;
	font-size: 1.25rem;
	padding-bottom: 0; /* legacy adds 10px; remove to tighten the gap to the body */
	margin-bottom: 0.1rem;
}
.view-id-circle_image_anchors .views-field-title h3 {
	margin: 0; /* drop the heading's default margins so the body sits just below */
}
/* Remove the body's default top margin so it sits right under the title. */
.view-id-circle_image_anchors .views-field-body,
.view-id-circle_image_anchors .views-field-body p:first-child {
	margin-top: 0;
}
@media (max-width: 860px) {
	.view-id-circle_image_anchors .circle-view-item { padding: 1.25rem 1rem 1.25rem 0; }
}
/* Narrow screens (<= 550px, the live site's breakpoint): stack the content
   top-to-bottom — circle image, then title, then body — and center it. */
@media (max-width: 550px) {
	.view-id-circle_image_anchors .circle-view-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 1.25rem 1rem;
	}
	.view-id-circle_image_anchors .views-field-field-circle-image {
		float: none;
		margin: 0 auto 0.75rem;
	}
	.view-id-circle_image_anchors .views-field-field-circle-image img {
		margin-left: auto;
		margin-right: auto;
	}
	.view-id-circle_image_anchors .views-field-title,
	.view-id-circle_image_anchors .views-field-body {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
	}
}

/* ---- Feature/action card grids ---- */
.ccsc-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	padding: 2rem 0;
}
@media (min-width: 640px) { .ccsc-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
	.ccsc-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.ccsc-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.ccsc-card { text-align: center; }
.ccsc-card img { width: 100%; height: auto; border-radius: 4px; }
.ccsc-card h3 { font-weight: 700; }
.ccsc-card__link { text-decoration: none; color: var(--ccsc-soft-black); }

/* ---- Staff directory ---- */
.staff-department { margin: 2rem 0; }
.staff-department h2 {
	border-bottom: 4px solid var(--ccsc-red);
	padding-bottom: 0.5rem;
}
.staff-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .staff-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .staff-grid { grid-template-columns: repeat(5, 1fr); } }
.staff-card { text-align: center; }
.staff-card img { width: 100%; height: auto; border-radius: 4px; }
/* Name and title are inline <span>s in the markup; make them block so the
   title sits on its own line beneath the name instead of running on after it. */
.staff-card__name { display: block; font-weight: 700; margin: 0.5rem 0 0; }
.staff-card__title { display: block; color: #666; font-size: 0.9rem; }

/* ---- Documents ---- */
.doc-list { list-style: none; padding: 0; }
.doc-list li {
	padding: 0.75rem 0;
	border-bottom: 1px solid #ddd;
}
.doc-list a { font-weight: 600; color: var(--ccsc-red); text-decoration: none; }
.doc-meta { color: #666; font-size: 0.85rem; margin-left: 0.5rem; }

/* ---- FAQ accordion (progressive enhancement) ---- */
.ccsc-faq h5 {
	background: var(--ccsc-blue);
	border-bottom: 2px dotted var(--ccsc-red);
	padding: 0.75rem 1rem;
	cursor: pointer;
	margin: 0.25rem 0 0;
}
.ccsc-faq h5::before {
	content: "\25BC";
	display: inline-block;
	margin-right: 0.5rem;
	font-size: 0.8em;
	transition: transform 0.2s;
}
.ccsc-faq h5[aria-expanded="false"]::before { transform: rotate(-90deg); }

/* ---- Footer ---- */
.site-footer {
	background: var(--ccsc-soft-black);
	color: #fff;
	padding: 2.5rem 1rem 3rem;
	text-align: center;
}
.site-footer__inner {
	max-width: var(--ccsc-max-width);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}
.site-footer__logo-img {
	width: 100%;
	max-width: 840px;
	height: auto;
	display: block;
}
.site-footer__address {
	color: #fff;
}
.site-footer__address p {
	margin: 0;
	line-height: 1.7;
	color: #fff;
}
.site-footer a { color: #fff; text-decoration: underline; }
.social-media-links { display: flex; gap: 1rem; list-style: none; padding: 0; justify-content: center; }

/* ---- Search results ---- */
.search-result { padding: 1rem 0; border-bottom: 1px solid #ddd; }
.search-result__type {
	display: inline-block;
	font-size: 0.75rem;
	text-transform: uppercase;
	background: var(--ccsc-blue);
	padding: 0.1rem 0.5rem;
	border-radius: 3px;
	margin-left: 0.5rem;
}

/* ---- Front-page announcement popup ---- */
.ccsc-popup {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}
.ccsc-popup[hidden] {
	display: none;
}
/* Prevent background scroll while the modal is open. */
body.ccsc-popup-open {
	overflow: hidden;
}
.ccsc-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}
.ccsc-popup__dialog {
	position: relative;
	background: #fff;
	color: var(--ccsc-soft-black);
	max-width: 520px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	padding: 2.25rem 2rem 2rem;
	border-radius: 6px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
	border-top: 5px solid var(--ccsc-red);
}
.ccsc-popup.is-open .ccsc-popup__dialog {
	animation: ccsc-popup-in 0.25s ease-out;
}
@keyframes ccsc-popup-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
.ccsc-popup__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
	line-height: 1;
	background: transparent;
	border: 0;
	color: var(--ccsc-soft-black);
	cursor: pointer;
	border-radius: 50%;
}
.ccsc-popup__close:hover,
.ccsc-popup__close:focus {
	background: var(--ccsc-gray);
}
.ccsc-popup__title {
	margin: 0 0 0.75rem;
	font-size: 1.5rem;
	color: var(--ccsc-red);
	padding-right: 1.5rem;
}
.ccsc-popup__body {
	font-size: 1rem;
	line-height: 1.5;
}
.ccsc-popup__body :first-child { margin-top: 0; }
.ccsc-popup__body :last-child { margin-bottom: 0; }
.ccsc-popup__actions {
	margin: 1.5rem 0 0;
}
.ccsc-popup__cta {
	display: inline-block;
	background: var(--ccsc-red);
	color: #fff;
	text-decoration: none;
	padding: 0.65rem 1.5rem;
	border-radius: 4px;
	font-weight: 600;
}
.ccsc-popup__cta:hover,
.ccsc-popup__cta:focus {
	background: #c81f29;
	color: #fff;
}
@media (prefers-reduced-motion: reduce) {
	.ccsc-popup.is-open .ccsc-popup__dialog {
		animation: none;
	}
}