/* The Des Moines Jaycees — single stylesheet (SPEC §7).
   Palette: JCI Aqua #0097D7 · near-black #1A2B3C · tint #E5F4FB ·
   #006B9A where small text on/in blue needs WCAG AA contrast. */

:root {
	--blue: #0097D7;
	--blue-deep: #006B9A;   /* AA-safe for small text on white */
	--ink: #1A2B3C;
	--tint: #E5F4FB;
	--gold: #FFC845; /* accent from the chapter's leaflet */
	--max-width: 1100px;
}

* { box-sizing: border-box; }

.nowrap { white-space: nowrap; }

html {
	scroll-padding-top: 4.5rem; /* anchor targets clear the sticky header */
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	color: var(--ink);
	background: #fff;
	line-height: 1.6;
}

/* ---------- Skip link ---------- */
.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--ink);
	color: #fff;
	padding: 0.6rem 1rem;
	z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 3px solid var(--blue);
}
.site-header nav {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0.6rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.brand { display: flex; align-items: center; }
.brand img { display: block; width: 110px; height: 45px; object-fit: contain; }
.nav-links {
	list-style: none;
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
}
.nav-links a {
	display: block;
	padding: 0.45rem 0.7rem;
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
	border-radius: 4px;
}
.nav-links a:hover { background: var(--tint); }
.nav-links .nav-cta {
	background: var(--blue-deep); /* deep shade: AA for small white text */
	color: #fff;
}
.nav-links .nav-cta:hover { background: var(--ink); }

/* ---------- Hero ---------- */
.hero {
	/* Des Moines skyline (from the chapter's 2026 leaflet) under a deep-blue
	   overlay strong enough to keep white text at AA contrast everywhere */
	background:
		linear-gradient(rgba(0, 76, 110, 0.8), rgba(0, 76, 110, 0.8)),
		url("/assets/img/hero.jpg") center / cover var(--blue);
	color: #fff;
	text-align: center;
	padding: clamp(4rem, 12vw, 7.5rem) 1rem;
}
.hero h1 {
	margin: 0;
	text-transform: uppercase;
	font-size: clamp(2.5rem, 8vw, 4.5rem);
	line-height: 1.05;
	letter-spacing: 0.03em;
}
.hero h1 span { color: var(--gold); }
.hero-sub {
	max-width: 34rem;
	margin: 1.25rem auto 2rem;
	/* ≥14pt bold qualifies as WCAG large text, where white on JCI Aqua
	   passes AA (3.27:1 ≥ 3:1) — see SPEC §8 */
	font-size: clamp(1.17rem, 2.5vw, 1.3rem);
	font-weight: 700;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-block;
	background: var(--blue-deep); /* deep shade: AA for small white text */
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	padding: 0.8rem 1.6rem;
	border-radius: 6px;
}
.btn:hover { background: var(--ink); }
.btn-light {
	background: #fff;
	color: var(--blue-deep);
}
.btn-light:hover { background: var(--tint); }
.btn-outline {
	background: transparent;
	color: #fff;
	border: 2px solid #fff;
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.15); }

/* ---------- Sections ---------- */
.section {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 4.5rem) 1rem;
}
.section h2 {
	font-size: clamp(1.6rem, 4vw, 2.3rem);
	margin: 0 0 1rem;
	color: var(--ink);
}
.section h2::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 4px;
	background: var(--blue);
	margin-top: 0.5rem;
}
.section-tint {
	max-width: none;
	background: var(--tint);
}
.section-tint > * {
	/* --max-width minus the .section side padding, so content lines up
	   exactly with the border-box-sized columns of normal sections */
	max-width: calc(var(--max-width) - 2rem);
	margin-left: auto;
	margin-right: auto;
}
/* Beats `.section h2`'s margin reset so the heading centers with the
   rest of the content column inside full-bleed sections */
.section-tint > h2 {
	margin-left: auto;
	margin-right: auto;
}
.section-blue {
	max-width: none;
	background: var(--blue-deep); /* deep shade: white body text passes AA */
	color: #fff;
	text-align: center;
}
.section-blue h2 { color: #fff; }
.section-blue h2::after { background: #fff; margin-left: auto; margin-right: auto; }

.about-body { max-width: 46rem; font-size: 1.05rem; }

.mission {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	border-left: 6px solid var(--blue);
	background: var(--tint);
	font-size: 1.15rem;
	max-width: 40rem;
}
.mission p { margin: 0; }

a { color: var(--blue-deep); }

/* ---------- Card grids ---------- */
.card-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
	margin-top: 2rem;
}
@media (min-width: 640px) {
	.card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.card-grid { grid-template-columns: repeat(3, 1fr); }
	.board-grid,
	.grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.pillars-lead {
	margin: 2.5rem 0 0;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--blue-deep);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.card {
	border: 1px solid #d7e3ec;
	border-top: 4px solid var(--blue);
	border-radius: 8px;
	padding: 1.25rem 1.4rem;
	background: #fff;
}
.card h3 {
	margin: 0 0 0.5rem;
	color: var(--blue-deep);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 1.05rem;
}
.card p { margin: 0; }

/* ---------- Facebook section (SPEC §4) ---------- */
.fb-slot {
	/* Fixed floor prevents layout shift when the iframe upgrade lands */
	min-height: 380px;
	position: relative; /* anchors the off-screen probing iframe */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
.fb-card {
	background: #fff;
	border: 1px solid #d7e3ec;
	border-radius: 8px;
	padding: 2.25rem 1.5rem;
	text-align: center;
	max-width: 31rem;
	width: 100%;
}
.fb-card .fb-icon { color: var(--blue); }
.fb-card p {
	max-width: 26rem;
	margin: 0.75rem auto 1.5rem;
}
.fb-slot iframe {
	border: none;
	max-width: 100%; /* width/height attrs are set by fb-fallback.js */
}
/* JS adds .fb-live to the slot once the embed verifiably rendered:
   the card collapses to a one-line link (demoted, not removed). */
.fb-slot.fb-live .fb-card { padding: 0; border: none; background: none; }
.fb-slot.fb-live .fb-card .fb-icon,
.fb-slot.fb-live .fb-card p { display: none; }
.fb-slot.fb-live .fb-card .btn {
	background: none;
	color: var(--blue-deep);
	text-decoration: underline;
	padding: 0.25rem;
	font-weight: 600;
}

/* ---------- Board ---------- */
.board-card { text-align: center; }
.board-photo,
.board-avatar {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	object-fit: cover; /* volunteers never need to crop headshots */
	margin: 0 auto;
}
.board-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tint);
	border: 3px solid var(--blue);
	color: var(--blue-deep);
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}
.board-name { margin: 0.9rem 0 0.1rem; font-size: 1.1rem; }
.board-role { margin: 0; color: var(--blue-deep); font-weight: 600; }
.board-email {
	font-size: 0.9rem;
	overflow-wrap: anywhere;
}

/* ---------- Join ---------- */
.section-blue p {
	max-width: 36rem;
	margin-left: auto;
	margin-right: auto;
}
.join-lead {
	font-size: 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.cta-row {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 2rem;
}
.section-blue a:not(.btn) { color: #fff; }
.join-extras {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	font-size: 0.98rem;
}
.join-extras li { margin-top: 0.5rem; }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--ink);
	color: #fff;
	text-align: center;
	padding: 2.5rem 1rem;
	font-size: 0.95rem;
}
.site-footer a { color: #9BD8F5; } /* AA on #1A2B3C */
.footer-name { font-weight: 700; margin: 0 0 0.75rem; }
.footer-links {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	flex-wrap: wrap;
}
.footer-meta { margin: 0; opacity: 0.85; }

/* ---------- Focus visibility (SPEC §8) ---------- */
a:focus-visible,
.btn:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 2px;
}
.section-blue a:focus-visible,
.hero a:focus-visible,
.site-footer a:focus-visible {
	outline-color: #fff;
}