/* =========================================================================
   Nova United JFC — single stylesheet
   tokens → base → components → layouts → print
   ========================================================================= */

/* ---- Fonts (self-hosted, no third-party requests) ---- */
@font-face {
	font-family: 'Nunito';
	src: url('../fonts/nunito.woff2') format('woff2');
	font-weight: 200 1000;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: 'Nunito Sans';
	src: url('../fonts/nunito-sans.woff2') format('woff2');
	font-weight: 200 1000;
	font-display: swap;
	font-style: normal;
}

/* ---- Design tokens ---- */
:root {
	--pitch-950: #0d2415;
	--pitch-900: #123722;
	--pitch-800: #1c5233;
	--pitch-600: #31824a;   /* brand primary */
	--pitch-500: #3f9c5c;
	--pitch-100: #ddefe3;
	--pitch-50:  #eff6f0;
	--kit-gold:      #c9a558;
	--kit-gold-deep: #a8843c;
	--alert:    #c60303;
	--alert-bg: #fdeeee;

	--paper:      #fbfaf7;
	--card:       #ffffff;
	--ink:        #1c2620;
	--ink-soft:   #46544b;
	--line:       #e3e8e2;

	--shadow: 0 2px 8px rgb(18 55 34 / .08), 0 10px 28px rgb(18 55 34 / .07);
	--radius: 14px;
	--radius-pill: 999px;

	--font-display: 'Nunito', system-ui, -apple-system, sans-serif;
	--font-body: 'Nunito Sans', system-ui, -apple-system, sans-serif;

	--text-sm:  0.9375rem;
	--text-base: clamp(1rem, .95rem + .25vw, 1.125rem);
	--text-lg:  clamp(1.125rem, 1rem + .5vw, 1.375rem);
	--text-2xl: clamp(1.7rem, 1.4rem + 1.5vw, 2.4rem);
	--text-3xl: clamp(2.6rem, 1.9rem + 3vw, 4.4rem);

	--sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-6: 1.5rem;
	--sp-8: 2rem; --sp-12: 3rem;
	--section-pad: clamp(3rem, 2rem + 4vw, 5rem);
	--content: 72rem;
	--prose: 42rem;

	--focus: var(--kit-gold);
}

@media (prefers-color-scheme: dark) {
	:root {
		--paper: #0f1912; --card: #16241a; --ink: #eef4ee; --ink-soft: #a8b8ac;
		--line: #24352a; --pitch-50: #152119; --pitch-100: #1c2f22; --alert-bg: #301315;
		--shadow: 0 2px 8px rgb(0 0 0 / .4), 0 10px 28px rgb(0 0 0 / .35);
	}
}
:root[data-theme="dark"] {
	--paper: #0f1912; --card: #16241a; --ink: #eef4ee; --ink-soft: #a8b8ac;
	--line: #24352a; --pitch-50: #152119; --pitch-100: #1c2f22; --alert-bg: #301315;
	--shadow: 0 2px 8px rgb(0 0 0 / .4), 0 10px 28px rgb(0 0 0 / .35);
}
:root[data-theme="light"] {
	--paper: #fbfaf7; --card: #ffffff; --ink: #1c2620; --ink-soft: #46544b;
	--line: #e3e8e2; --pitch-50: #eff6f0; --pitch-100: #ddefe3; --alert-bg: #fdeeee;
	--shadow: 0 2px 8px rgb(18 55 34 / .08), 0 10px 28px rgb(18 55 34 / .07);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
body.nav-locked { overflow: hidden; }
img, svg { max-width: 100%; display: block; height: auto; }
a { color: var(--pitch-600); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; text-wrap: balance; }

.wrap { max-width: var(--content); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--pitch-900); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 8px 0;
	font-family: var(--font-display); font-weight: 800;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

.eyebrow {
	font-family: var(--font-body); font-weight: 800; font-size: .78rem;
	letter-spacing: .14em; text-transform: uppercase; color: var(--kit-gold-deep);
}
.on-green .eyebrow { color: var(--kit-gold); }

.nu-icon { display: inline-block; vertical-align: middle; }

/* ---- Buttons ---- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 48px; padding: .65rem 1.6rem; border-radius: var(--radius-pill);
	font-family: var(--font-display); font-weight: 800; font-size: 1.02rem;
	text-decoration: none; cursor: pointer; border: 0; text-align: center;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.nav-join { white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: var(--pitch-600); color: #fff; box-shadow: 0 4px 14px rgb(49 130 74 / .35); }
.btn--white { background: #fff; color: var(--pitch-900); }
.btn--outline { background: transparent; color: var(--pitch-700, var(--pitch-600)); border: 2px solid currentColor; }
.on-green .btn--outline { color: #fff; border-color: rgb(255 255 255 / .55); }
.on-green .btn--outline:hover { border-color: #fff; }

/* ---- Notice banner ---- */
.notice { background: var(--alert-bg); border-bottom: 1px solid var(--line); }
.notice .wrap { display: flex; gap: .7rem; align-items: center; padding-block: .55rem; font-size: var(--text-sm); font-weight: 600; }
.notice__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--alert); }
.notice__text a { color: inherit; font-weight: 800; }

/* ---- Header ---- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--card); border-bottom: 1px solid var(--line); transition: box-shadow .2s ease; }
.site-header.is-stuck { box-shadow: 0 2px 16px rgb(18 55 34 / .1); }
.site-header__bar { display: flex; align-items: center; gap: .85rem; padding-block: .6rem; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.brand__crest { width: 46px; height: 46px; flex: none; }
.brand__text { line-height: 1.05; }
.brand__text b { font-family: var(--font-display); font-weight: 900; font-size: 1.18rem; display: block; letter-spacing: -.01em; }
.brand__text span { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }

.nav-primary { margin-left: auto; }
.nav-primary__list { list-style: none; display: flex; gap: clamp(1rem, 1.6vw, 1.6rem); align-items: center; padding: 0; }
.nav-primary__list a { font-family: var(--font-body); font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--ink-soft); white-space: nowrap; }
.nav-primary__list a:hover, .nav-primary__list .current-menu-item a { color: var(--pitch-600); }
.nav-join { margin-left: clamp(1rem, 1.6vw, 1.6rem); }
.brand__text b { white-space: nowrap; }
.brand__text span { white-space: nowrap; }

.nav-toggle { display: none; margin-left: auto; background: none; border: 0; padding: .5rem; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 3px; border-radius: 2px; background: var(--ink); margin: 5px 0; transition: transform .2s ease, opacity .2s ease; }

@media (max-width: 920px) {
	.nav-primary { position: fixed; inset: 0 0 0 auto; width: min(320px, 82vw); background: var(--pitch-900); padding: 5rem 2rem 2rem; transform: translateX(100%); transition: transform .25s ease; margin: 0; }
	.nav-primary.is-open { transform: translateX(0); box-shadow: -8px 0 30px rgb(0 0 0 / .3); }
	.nav-primary__list { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
	.nav-primary__list a { color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
	.nav-join { margin-left: auto; min-height: 42px; padding: .45rem 1.1rem; font-size: .95rem; }
	.nav-toggle { display: block; order: 3; margin-left: 0; position: relative; z-index: 60; }
}

/* ---- Hero ---- */
.hero { position: relative; background: var(--pitch-900); color: #fff; overflow: hidden; }
.hero__lines { position: absolute; inset: 0; color: rgb(255 255 255 / .13); pointer-events: none; }
.hero__lines svg { width: 100%; height: 100%; }
.hero__inner { position: relative; display: grid; gap: 1.3rem; max-width: 46rem; padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.4rem, 5vw, 4rem); }
.hero--band .hero__inner { padding-block: clamp(2.4rem, 4vw, 3.6rem); }
.hero__title { font-size: var(--text-3xl); font-weight: 1000; letter-spacing: -.015em; }
.hero--band .hero__title { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.hero__title em { font-style: normal; color: var(--kit-gold); }
.hero__intro { font-size: var(--text-lg); max-width: 38rem; color: rgb(255 255 255 / .88); }
.hero__ctas { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .3rem; }
.hero__figure { position: relative; }
.hero__image { width: 100%; height: clamp(200px, 30vw, 360px); object-fit: cover; }

/* ---- Section rhythm ---- */
.section { padding-block: var(--section-pad); }
.section--tint { background: var(--pitch-50); }
.section__head { display: grid; gap: .3rem; margin-bottom: 1.6rem; }
.section h2 { font-size: var(--text-2xl); font-weight: 900; letter-spacing: -.01em; }

/* ---- Prose ---- */
.prose { max-width: var(--prose); display: grid; gap: 1rem; }
.prose--wide { max-width: 60rem; }
.prose h2 { font-size: var(--text-2xl); font-weight: 900; margin-top: .5rem; }
.prose h3 { font-size: var(--text-lg); font-weight: 800; margin-top: .4rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: .4rem; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Cards ---- */
.cards { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; text-decoration: none; color: var(--ink); }
a.card { transition: transform .15s ease; }
a.card:hover { transform: translateY(-3px); }
.card__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--pitch-100); display: grid; place-items: center; color: var(--pitch-600); margin-bottom: .3rem; }
.card h3 { font-size: 1.22rem; font-weight: 900; }
.card p { font-size: var(--text-sm); color: var(--ink-soft); }
.card__go { margin-top: auto; padding-top: .6rem; font-family: var(--font-display); font-weight: 800; font-size: .92rem; color: var(--pitch-600); display: inline-flex; gap: .4rem; align-items: center; }
.card__contact { display: grid; gap: .5rem; margin-top: .4rem; }
.card__contact .btn { min-height: 44px; font-size: .95rem; width: 100%; }

/* ---- Image + text ---- */
.image-text { display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 820px) { .image-text { grid-template-columns: 1fr 1fr; } .image-text--right .image-text__media { order: 2; } }
.image-text__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.image-text__media img { width: 100%; height: 100%; object-fit: cover; }
.image-text__body { display: grid; gap: 1rem; }
.image-text__body p { color: var(--ink-soft); }

/* ---- Stats (used inside image-text bodies) ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1rem; margin-top: .4rem; padding-top: 1.3rem; border-top: 2px solid var(--line); }
.stat b { font-family: var(--font-display); font-weight: 1000; font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem); color: var(--pitch-600); display: block; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

/* ---- Image stack (parking / pitch guides) ---- */
.image-stack { display: grid; gap: 1.4rem; }
.image-stack__grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.image-stack figure { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.image-stack img { width: 100%; }
.image-stack figcaption { padding: .8rem 1rem; font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); }

/* ---- Accordion (native details) ---- */
.accordion { display: grid; gap: .7rem; max-width: 52rem; }
.accordion__group-title { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); margin-bottom: .3rem; }
.accordion details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.accordion summary { cursor: pointer; padding: 1rem 1.2rem; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2.5px solid var(--pitch-600); border-bottom: 2.5px solid var(--pitch-600); transform: rotate(45deg); transition: transform .2s ease; margin-top: -4px; }
.accordion details[open] summary::after { transform: rotate(225deg); margin-top: 2px; }
.accordion .accordion__body { padding: 0 1.2rem 1.1rem; color: var(--ink-soft); display: grid; gap: .7rem; }

/* ---- People grid (committee) ---- */
.people { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.person { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem; display: grid; gap: .2rem; }
.person__name { font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; }
.person__role { font-size: var(--text-sm); color: var(--ink-soft); font-weight: 600; }
.person__email { font-size: var(--text-sm); margin-top: .3rem; }

/* ---- CTA band ---- */
.cta-band { position: relative; background: linear-gradient(120deg, var(--pitch-800), var(--pitch-950)); color: #fff; overflow: hidden; }
.cta-band--white { background: var(--pitch-50); color: var(--ink); }
.cta-band__lines { position: absolute; inset: 0; color: rgb(255 255 255 / .1); pointer-events: none; }
.cta-band__inner { position: relative; display: grid; gap: 1rem; justify-items: center; text-align: center; padding-block: clamp(2.8rem, 5vw, 4.4rem); }
.cta-band h2 { font-size: clamp(1.9rem, 1.5rem + 2vw, 2.8rem); font-weight: 1000; max-width: 26ch; }
.cta-band p { color: rgb(255 255 255 / .85); max-width: 44rem; }
.cta-band--white p { color: var(--ink-soft); }

/* ---- Directions ---- */
.directions { display: grid; gap: 1.4rem; }
.directions__body { display: grid; gap: 1rem; max-width: 46rem; }
.directions__address { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.directions__note { color: var(--ink-soft); display: grid; gap: .6rem; }
.directions__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .3rem; }

/* ---- Logo row ---- */
.logo-row { padding-block: var(--section-pad); border-top: 1px solid var(--line); }
.logo-row__label { text-align: center; display: block; margin-bottom: 1.4rem; }
.logo-row__row { display: flex; flex-wrap: wrap; gap: 1rem 2.6rem; justify-content: center; align-items: center; }
.logo-row__name { font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; color: var(--ink-soft); opacity: .78; }
.logo-row a:hover .logo-row__name { opacity: 1; color: var(--pitch-600); }

/* ---- Form ---- */
.form-block { max-width: 44rem; display: grid; gap: 1rem; }
.form-block__intro { color: var(--ink-soft); }

/* ---- Footer ---- */
.site-footer { background: var(--pitch-950); color: rgb(255 255 255 / .85); }
.trust-strip { border-bottom: 1px solid rgb(255 255 255 / .12); }
.trust-strip__row { display: flex; flex-wrap: wrap; gap: .8rem 1rem; justify-content: center; padding-block: 1.2rem; }
.trust-strip__badge { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgb(255 255 255 / .25); border-radius: var(--radius-pill); padding: .35rem .95rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: rgb(255 255 255 / .9); text-decoration: none; }
.trust-strip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kit-gold); }
.trust-strip__img { height: 34px; width: auto; }
.site-footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-block: 2.6rem; }
.site-footer__brand { display: flex; gap: .9rem; align-items: center; }
.site-footer__crest { width: 56px; height: 56px; }
.site-footer__brand b { font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; color: #fff; display: block; line-height: 1.1; }
.site-footer__brand span { font-size: .85rem; color: var(--kit-gold); font-weight: 700; }
.site-footer__col h2 { font-size: 1rem; font-weight: 900; color: #fff; margin-bottom: .7rem; }
.site-footer__col p, .site-footer__menu a { font-size: var(--text-sm); color: rgb(255 255 255 / .78); line-height: 1.9; }
.site-footer__menu { list-style: none; padding: 0; }
.site-footer__menu a { text-decoration: none; }
.site-footer__menu a:hover { color: #fff; }
.social-links { display: flex; gap: .6rem; margin: .5rem 0; }
.social-links__link { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgb(255 255 255 / .08); color: #fff; }
.social-links__link:hover { background: var(--pitch-600); }

.sponsor-strip { border-top: 1px solid rgb(255 255 255 / .12); padding-block: 1.8rem; }
.sponsor-strip__label { text-align: center; display: block; margin-bottom: 1.1rem; color: var(--kit-gold); }
.sponsor-strip__row { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; justify-content: center; align-items: center; }
.sponsor-strip__name { font-family: var(--font-display); font-weight: 900; color: rgb(255 255 255 / .8); }
.sponsor-strip__logo { height: 40px; width: auto; filter: grayscale(1) brightness(2); opacity: .8; transition: opacity .2s ease, filter .2s ease; }
.sponsor-strip__item:hover .sponsor-strip__logo { filter: none; opacity: 1; }

.partner-band { border-top: 1px solid rgb(255 255 255 / .12); }
.partner-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.8rem; padding-block: 1.7rem; }
.partner-band__logo img { height: 30px; width: auto; }
.partner-band p { font-size: .92rem; color: rgb(255 255 255 / .72); max-width: 52ch; text-align: center; }
.partner-band p, .partner-band a { color: rgb(255 255 255 / .72); }
.partner-band a { font-weight: 700; color: #fff; }

.legal { border-top: 1px solid rgb(255 255 255 / .12); }
.legal .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; padding-block: 1.1rem; font-size: .82rem; color: rgb(255 255 255 / .55); }
.legal a { color: rgb(255 255 255 / .7); }

/* ---- 404 ---- */
.error-404 { max-width: 40rem; display: grid; gap: 1rem; text-align: center; margin-inline: auto; }
.error-404 h1 { font-size: var(--text-2xl); }
.error-404__actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: .5rem; }

/* ---- Motion & print ---- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
	html { scroll-behavior: auto; }
}

@media print {
	.site-header, .notice, .nav-toggle, .nav-join, .cta-band, .site-footer, .hero__lines, .hero__ctas { display: none !important; }
	body { background: #fff; color: #000; font-size: 12pt; }
	.hero { background: #fff; color: #000; }
	.hero__title { color: #000; }
	.section { padding-block: 1rem; }
	.image-stack__grid { grid-template-columns: 1fr; }
	.accordion details { border: 1px solid #999; break-inside: avoid; }
	.directions__actions a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; word-break: break-all; }
	a { color: #000; text-decoration: underline; }
}