/*
 * citizens-academy.css
 * Page-specific styles for the Citizens Academy page.
 * Loaded AFTER mv-main.css and btns.css.
 * Uses existing City classes/variables wherever possible.
 * Only defines what is not already available in mv-main.css or btns.css.
 *
 * Design intent: Same City typographic system and brand blue as VIMS,
 * but a distinct teal-green accent, centered hero, light stat bar,
 * pill eyebrows, left-border cards, and a timeline steps layout —
 * so the two pages feel like siblings, not twins.
 *
 * Existing classes used from mv-main.css / btns.css:
 *   Layout:       .container, .row, .column/.columns, .eight.columns,
 *                 .four.columns, .six.columns, .twelve.columns
 *   Backgrounds:  .bk-blue, .bk-lt-gray, .bk-white
 *   Text:         .color-white, .color-blue, .text-uppercase, .semi-bold,
 *                 .largish, .smallish
 *   Components:   .card, .card-title, .contact-box, .gray-box,
 *                 .box-shadow, .round-corners-sm
 *   Buttons:      .btn, .btn--s, .btn--white, .btn--blue,
 *                 .btn--gray-border, .btn--full
 *   Utilities:    .txt-center, .pad-top-bottom, .box-padding,
 *                 .margin-add-top, .margin-add-bottom, .visually-hidden
 */
/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */ :root {
	/* CA accent: teal-green — distinct from VIMS amber but still civic */
	--ca-accent: #f5a800;
	--ca-accent-light: var(--brand-blue);
	; /* brand blue */
	--ca-accent-dark: var(--brand-maroon); /* brand maroon */
	/* CA maroon pulled from brand for CTA — warm contrast to blue */
	--ca-cta-bg: var(--brand-maroon); /* #582b2c */
	/* Shared with VIMS (brand tokens from mv-main.css) */
	--ca-primary: #1a3a6b;
	--ca-white: var(--neutral-white);
	--ca-surface: var(--neutral-gray-light);
	--ca-text-muted: var(--neutral-gray-dark);
	/* Geometry */
	--ca-card-radius: 10px;
	/* Shadows */
	--ca-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07);
	--ca-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.12);
	--ca-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.16);
	--ca-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	/* Same display font family as VIMS — the shared thread */
	--font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
}
.color-accent {
	color: var(--ca-accent);
}
/* ==========================================================================
   HERO 
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	min-height: 500px;
	display: flex;
	align-items: center; 
	background-color: var(--ca-primary);

}

.hero-bg {
	background-image: url('img/city-hall.jpg');
  	background-repeat: no-repeat;
 	background-attachment: fixed;
  	background-position: right;
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 25%;
	filter: brightness(0.45) saturate(0.8);
	transition: transform 10s ease;
}



.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(26, 58, 107, 0.55) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.hero-content {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
/* CA uses a text badge instead of a logo image */
.hero-program-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--ca-accent);
	color: #fff;
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 0.4rem 1.2rem;
	border-radius: 999px;
	margin-bottom: 1.4rem;
}
.hero-title {
	font-family: var(--font-display);
	font-size: clamp(3rem, 6vw, 5.2rem); /* larger than VIMS 4rem */
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.0;
	text-transform: uppercase;
	color: var(--ca-white);
	margin: 0;
}
.hero-subtitle {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 2.2vw, 2.2rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.75); /* muted white — VIMS uses accent gold */
	margin: 0.8rem 0 0;
}
.hero-cta-group {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 2rem;
}
@media (max-width: 768px) {
	.hero {
		min-height: 360px;
	}
	.hero::after {
		height: 40px;
	}
}
/* ==========================================================================
   STAT BAR  — light background, colored numbers
   (VIMS: dark blue bg, white/gold text)
   ========================================================================== */
.stat-bar {
	padding: 2.5rem 0;
	background-color: #fff;
	border-bottom: 3px solid var(--ca-accent-light);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.stat-bar-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.stat {
	text-align: center;
	padding: 0.6rem 1rem;
	border-right: 1px solid #e5e5e7;
}
.stat:last-child {
	border-right: none;
}
.stat-num {
	font-family: var(--font-display);
	font-size: 4.4rem;
	font-weight: 800;
	color: var(--ca-accent); /* teal — VIMS uses gold */
	line-height: 1;
	display: block;
	letter-spacing: -0.01em;
}
.stat-label {
	font-size: 1.3rem;
	color: var(--neutral-gray-dark); /* dark on light — VIMS is light on dark */
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: 0.3rem;
}
@media (max-width: 768px) {
	.stat-bar-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;
	}
	.stat {
		border-right: none;
		border-bottom: 1px solid #e5e5e7;
	}
	.stat:nth-child(3), .stat:last-child {
		border-bottom: none;
	}
}
/* ==========================================================================
   SECTION LAYOUT
   ========================================================================== */

.absolute {
	position: absolute;
	top: 0;
	right: 0;
}
.section {
	padding: 4rem 0;
}
.mvca-logo {
	width: 250px;
	position: relative;
	z-index: 0;
}
#dept-title {
	font-family: var(--font-display);
	font-size: 22rem;
	font-weight: 900;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.4);
	line-height: 0;
	position: relative;
	left: 0;
	z-index: 1;
}

.z2 {
	position: relative;
	z-index: 2;
}
section.section-req {
	padding: 4rem 0 0 0 !important;
	border-top: 4px solid var(--ca-accent);
	background-color: #173059;
}
/* Pill eyebrow badge*/
.section-eyebrow {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ca-accent-light);
	background: var(--ca-accent);
	border: 1px solid rgba(42, 140, 110, 0.25);
	padding: 0.3rem 1rem;
	border-radius: 999px;
	margin-bottom: 0.9rem;
}
.section-title {
	font-family: var(--font-display);
	font-size: clamp(2.7rem, 3vw, 3.4rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--brand-blue);
	margin: 0 0 1.2rem;
	line-height: 1.1;
}
.bk-blue .section-title, .bk-dark-gray .section-title {
	color: var(--neutral-white);
}
.row {
	display: flex;
	align-items: flex-start;
}
aside.four.columns {
	margin-left: 8rem;
}
@media (max-width: 768px) {
	.row {
		flex-direction: column;
	}
	aside.four.columns {
		margin-left: 0;
		width: 100%;
	}
}
/* ==========================================================================
   SIDEBAR BOXES
   ========================================================================== */
.sidebar-box {
	border-radius: var(--ca-card-radius);
	overflow: hidden;
	margin-bottom: 1.5rem;
	box-shadow: var(--ca-shadow-sm);
	border-left: 4px solid var(--ca-accent); /* left accent — VIMS has no sidebar border */
}
.sidebar-box-head {
	padding: 0.9rem 1.3rem;
	background-color: var(--brand-blue);
}
.sidebar-box-title {
	font-family: var(--font-display);
	font-size: 1.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0;
	color: #fff;
}
/* ==========================================================================
   PATH / FEATURE CARDS  (intro section)
   Left-border style — VIMS uses top-border
   ========================================================================== */
.path-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--ca-card-radius);
	border-left: 5px solid var(--brand-blue); /* left — VIMS does border-top */
	border-top: none;
	transition: box-shadow var(--ca-transition), transform var(--ca-transition);
}
.path-card--accent {
	border-left-color: var(--ca-accent);
}
.path-card:hover {
	box-shadow: var(--ca-shadow-lg);
	transform: translateY(-4px);
}
.path-card-icon {
	width: 56px;
	height: 56px;
	border-radius: var(--ca-card-radius); /* square — VIMS is round 50% */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	flex-shrink: 0;
	align-self: flex-start;
	margin: 2rem 0 1.2rem 1.75rem;
}
.path-card-icon--blue {
	background: rgba(46, 90, 147, 0.1);
	color: var(--brand-blue);
}
.path-card-icon--accent {
	background: var(--ca-accent-light);
	color: var(--ca-accent);
}
.path-card-body {
	padding: 0 1.75rem 1.75rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.path-card-title {
	font-family: var(--font-display);
	font-size: 2.4rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--brand-blue);
	margin: 0 0 0.6rem;
}
.path-card-link {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ca-accent);
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: auto;
	padding-top: 1rem;
	transition: gap var(--ca-transition), color var(--ca-transition);
	text-decoration: none;
}
.path-card-link:hover {
	gap: 0.6rem;
	text-decoration: none;
}
/* ==========================================================================
   SESSION CURRICULUM CARDS
   ========================================================================== */
.sessions-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-top: 2.5rem;
}
.session-card {
	background: #fff;
	border-radius: var(--ca-card-radius);
	border-left: 4px solid var(--brand-blue); /* left border — no top border */
	border-top: none;
	box-shadow: var(--ca-shadow-sm);
	padding: 1.8rem;
	transition: box-shadow var(--ca-transition), border-color var(--ca-transition);
	position: relative;
}
.session-card:hover {
	box-shadow: var(--ca-shadow-lg);
	border-left-color: var(--ca-accent);
}
.session-card--accent {
	border-left-color: var(--ca-accent);
}
.session-card--accent:hover {
	border-left-color: var(--ca-accent-dark);
}
.session-num {
	font-family: var(--font-display);
	font-size: 5rem;
	font-weight: 900;
	color: rgba(42, 140, 110, 0.08); /* teal ghost */
	line-height: 1;
	position: absolute;
	top: 0.8rem;
	right: 1.2rem;
	user-select: none;
}
.session-icon {
	font-size: 2.6rem;
	margin-bottom: 0.8rem;
	display: block;
}
.session-dept {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ca-accent);
	margin-bottom: 0.25rem;
}
.session-title {
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--brand-blue);
	margin: 0 0 0.6rem;
	line-height: 1.15;
}
.session-desc {
	font-size: 1.35rem;
	color: var(--neutral-gray-dark);
	line-height: 1.6;
	margin: 0;
}
@media (max-width: 900px) {
	.sessions-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 580px) {
	.sessions-grid {
		grid-template-columns: 1fr;
	}
}
/* ==========================================================================
   ELIGIBILITY REQUIREMENTS
   ========================================================================== */
.req-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
.req-list li {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
	color: rgba(255, 255, 255, 0.88);
	font-size: 1.7rem;
	line-height: 1.6;
}
/* Diamond bullet — VIMS uses circular checkmark badge */
.req-list li::before {
	content: '◆';
	flex-shrink: 0;
	color: var(--ca-accent);
	font-size: 0.85rem;
	margin-top: 5px;
	line-height: 1;
}
.req-note {
	width: 100%;
	margin: 4rem 0 0 0;
	padding: 2.1rem 0;
	background: rgba(255, 255, 255, 0.08);
	border-top: 4px solid var(--ca-accent);
	font-size: 1.5rem;
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.6;
	text-align: center;
}
/* ==========================================================================
   HOW TO APPLY — NUMBERED STEPS
   Timeline/connector layout — VIMS uses stacked cards
   ========================================================================== */
.steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0; /* no gap — connected by line */
	position: relative;
}
/* Vertical connector line down the left */
.steps::before {
	content: '';
	position: absolute;
	top: 24px;
	bottom: 24px;
	left: 22px;
	width: 2px;
	background: linear-gradient(to bottom, var(--ca-accent) 0%, rgba(42, 140, 110, 0.15) 100%);
	z-index: 0;
}
.step {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	padding: 0 0 2.2rem 0; /* bottom padding creates connector spacing */
	position: relative;
	background: transparent; /* no card bg — VIMS cards are white */
	border-radius: 0;
}
/* Step number: square badge — VIMS is a circle */
.step-num {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: var(--ca-card-radius);
	background-color: var(--ca-accent); /* teal — VIMS uses brand-blue */
	color: var(--neutral-white);
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	box-shadow: 0 3px 10px rgba(42, 140, 110, 0.3);
}
.step-body {
	flex: 1;
	padding: 0.6rem 0 0;
}
.step-title {
	font-family: var(--font-display);
	font-size: 1.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--brand-blue);
	margin: 0 0 0.3rem;
}
.step-desc {
	font-size: 1.4rem;
	color: var(--neutral-gray-dark);
	margin: 0;
	line-height: 1.6;
}
/* ==========================================================================
   CHECKLIST SIDEBAR
   ========================================================================== */
.checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.checklist li {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	font-size: 1.3rem;
	color: var(--neutral-gray-dark);
	line-height: 1.4;
}
.checklist-check {
	color: var(--ca-accent); /* teal — VIMS uses brand-blue */
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 1px;
}
/* ==========================================================================
   CTA BANNER  — maroon background
   (VIMS uses brand-blue)
   ========================================================================== */
.cta-banner {
	padding: 3.5rem 0;
	text-align: center;
	position: relative;
	overflow: hidden;
	background-color: var(--brand-maroon); /* #582b2c — warm vs VIMS cool */
}
.cta-banner::before {
	content: 'ACADEMY';
	position: absolute;
	font-family: var(--font-display);
	font-size: 22rem;
	font-weight: 900;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.12);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	pointer-events: none;
	line-height: 1;
}
.cta-title {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 4vw, 3.8rem);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--neutral-white);
	margin: 0 0 0.5rem;
	line-height: 1.1;
}
.cta-sub {
	font-size: 2.1rem;
	color: rgba(255, 255, 255, 0.82);
	margin: 0 0 2rem;
}
.cta-btns {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.ps-aside {
	align-content: flex-end;
}
/* ==========================================================================
   TESTIMONIAL STRIP 
   ========================================================================== */
#testimonials-heading {
	color: var(--ca-white);
}
.testimonial-strip {
	padding: 12.5rem 0;
	background-color: #173059;
	.testimonial-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2.5rem;
	}
	.testimonial-card {
		background: #fff; /* white cards — VIMS uses translucent */
		border-radius: var(--ca-card-radius);
		border-top: 4px solid var(--ca-accent); /* top accent — VIMS uses left border */
		padding: 2rem 1.8rem;
		box-shadow: var(--ca-shadow-sm);
	}
	.testimonial-quote {
		font-size: 1.55rem;
		color: var(--neutral-gray-dark); /* dark on light — VIMS is light on dark */
		line-height: 1.7;
		margin: 0 0 1.2rem;
		font-style: italic;
	}
	.testimonial-author {
		font-family: var(--font-display);
		font-size: 1.3rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--brand-blue); /* blue — VIMS uses gold accent */
		margin: 0;
	}
	.testimonial-role {
		font-size: 1.2rem;
		color: var(--ca-accent);
		margin: 0.2rem 0 0;
	}
	@media (max-width: 900px) {
		.testimonial-grid {
			grid-template-columns: 1fr;
			gap: 1.5rem;
		}
	}
	/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
	@keyframes caFadeIn {
		from {
			opacity: 0;
			transform: translateY(16px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	.anim {
		animation: caFadeIn 0.65s ease both;
	}
	.anim-d1 {
		animation-delay: 0.08s;
	}
	.anim-d2 {
		animation-delay: 0.2s;
	}
	.anim-d3 {
		animation-delay: 0.32s;
	}
	.anim-d4 {
		animation-delay: 0.44s;
	}
	/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */
	@media (max-width: 768px) {
		.cta-banner::before {
			font-size: 5rem;
		}
		.steps::before {
			display: none;
		}
		.step {
			padding-bottom: 1.5rem;
		}
	}
	@media (max-width: 670px) {
		.path-row .column {
			margin-left: 0;
			width: 100%;
			margin-bottom: 1.5rem;
		}
	}