/* ============================================================================
   National Leadership Council (page-nlc.php). Scoped under .nsfnlc.
   Tokens mirror css/about.css (brand palette verbatim, no new colours).

   Theme traps (style.css loads AFTER this file, so ties lose):
   - h1-h6 carry `font-weight: 600 !important` and Oswald !important; weights
     here are set on child spans or with !important.
   - `.page-template h2` sets size/colour/line-height at (0,1,1); the only h2
     here is the visually hidden members heading (.nsfnlc .nsfnlc-sr).
   - `ul { list-style: none }` sitewide: fine, the roll uses its own marks.
   - `p a:not(.btn):not(.button):not(.trident-btn)` paints links #0075b0, which
     fails contrast on navy; the join link repeats the :not() chain to win.
   ============================================================================ */

.nsfnlc {
	--dark:  #0b2d49;
	--blue:  #003c69;
	--gold:  #f0ab00;
	--ocean: #a6bed5;
	--white: #ffffff;

	--font-display: 'Oswald', Arial, sans-serif;
	--font-body:    'Open Sans', Arial, Helvetica, sans-serif;

	/* Spacing scale; the breakpoints redefine it rather than chasing rules. */
	--pad-x:       24px;
	--section-y:   96px;
	--hero-top:    120px;
	--hero-bottom: 40px;
	--seal:        172px;
	--plaque-y:    64px;
	--plaque-top:  calc(var(--seal) / 2 + 40px); /* seal to first name */
	--plaque-x:    56px; /* with the 40px gap, the second-longest name fits one line at 1200px */
	--col-gap:     40px;

	font-family: var(--font-body);
	color: var(--white);
	background: var(--dark);
	overflow-x: hidden;
}

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

.nsfnlc h1,
.nsfnlc h2 {
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

.nsfnlc p { text-wrap: pretty; }

.nsfnlc-wrap {
	max-width: 1200px;
	margin: 0 auto;
}

/* ── Council stars (hero + join) ─────────────────────────────────────────── */

.nsfnlc-stars {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.nsfnlc-stars svg {
	display: block;
	width: 76px;
	height: auto;
	fill: var(--gold);
	flex: none;
}

.nsfnlc-stars-line {
	display: block;
	width: 120px;
	height: 1px;
	background: linear-gradient(90deg, rgba(240, 171, 0, 0), var(--gold));
}

.nsfnlc-stars-line:last-child {
	background: linear-gradient(270deg, rgba(240, 171, 0, 0), var(--gold));
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.nsfnlc-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Low enough that the padding, not leftover centring space, sets the gap
	   between the intro and the seal below. */
	min-height: clamp(420px, 32vw, 480px);
	padding: var(--hero-top) var(--pad-x) var(--hero-bottom);
	text-align: center;
	background: var(--dark);
	overflow: hidden;
}

.nsfnlc-hero-media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-color: var(--dark);
	background-size: cover;
	background-position: center;
}

.nsfnlc-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 900ms ease;
}

.nsfnlc-hero-video.is-playing { opacity: 1; }

/* Navy wash over the flag, deepening to solid navy at the bottom edge so the
   hero runs straight into the member roll with no seam. 0.7 is the floor: over
   a white stripe it still gives the intro copy 4.9:1. The radial darkens only
   behind the text block (gold year ~4.6:1 over white, worst case) and leaves the
   flag bright at the edges. */
.nsfnlc-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 55% at 50% 45%, rgba(11, 45, 73, 0.45), rgba(11, 45, 73, 0) 100%),
		linear-gradient(180deg, rgba(11, 45, 73, 0.76) 0%, rgba(11, 45, 73, 0.7) 40%, rgba(11, 45, 73, 0.84) 78%, var(--dark) 100%);
}

.nsfnlc-hero-inner {
	width: min(100%, 1000px);
	margin: 0 auto;
}

.nsfnlc .nsfnlc-h1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	color: var(--white);
	font-size: inherit;
	line-height: 1;
	text-shadow: 0 2px 24px rgba(4, 16, 30, 0.45);
}

.nsfnlc-year {
	display: block;
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.42em;
	/* letter-spacing trails the last glyph; pad the left to re-centre it */
	padding-left: 0.42em;
	color: var(--gold);
}

.nsfnlc-title {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(38px, 5.2vw, 64px);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: 0.05em;
}

.nsfnlc-hero .nsfnlc-stars { margin: 32px 0 30px; }

.nsfnlc .nsfnlc-intro {
	max-width: 900px;
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.92);
}

/* ── Member roll ─────────────────────────────────────────────────────────── */

.nsfnlc-roll {
	position: relative;
	/* Top padding clears the half of the seal that rides above the plaque. */
	padding: calc(var(--seal) / 2 + 8px) var(--pad-x) var(--section-y);
	/* Glow sits behind the plaque, not at the top edge, so the hero's solid
	   navy bottom meets the roll without a seam. */
	background:
		radial-gradient(ellipse 55% 50% at 50% 55%, rgba(0, 60, 105, 0.5), rgba(0, 60, 105, 0) 100%),
		var(--dark);
}

/* Members heading: visually hidden (the seal introduces the list), kept for
   screen readers and the page outline. */
.nsfnlc .nsfnlc-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.nsfnlc-plaque {
	position: relative;
	padding: var(--plaque-top) var(--plaque-x) var(--plaque-y);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
}

/* Frame: the site's border.png stroke (bright at the corners, fading toward
   the middle of each side) rebuilt as 1px gradients, because stretching the
   350px PNG to this size would blur and thicken the line. A fainter inner
   rule 10px in makes it a double frame. */
.nsfnlc-plaque::before,
.nsfnlc-plaque::after {
	content: '';
	position: absolute;
	pointer-events: none;
}

.nsfnlc-plaque::before {
	inset: 0;
	background:
		linear-gradient(90deg, rgba(255,255,255,.42), rgba(255,255,255,.1) 50%, rgba(255,255,255,.42)) top / 100% 1px no-repeat,
		linear-gradient(90deg, rgba(255,255,255,.42), rgba(255,255,255,.1) 50%, rgba(255,255,255,.42)) bottom / 100% 1px no-repeat,
		linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.1) 50%, rgba(255,255,255,.42)) left / 1px 100% no-repeat,
		linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.1) 50%, rgba(255,255,255,.42)) right / 1px 100% no-repeat;
}

.nsfnlc-plaque::after {
	inset: 10px;
	border: 1px solid rgba(255, 255, 255, 0.07);
}

/* Seal: the NLC logo (images/nlc/nlc-seal.svg) straddling the frame's top
   edge. The navy halo breaks the frame line around it. Its size (--seal) also
   drives the space above and inside the plaque, so the ring text never
   crowds the heading or the first row of names. */
.nsfnlc-seal {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	display: block;
	width: var(--seal);
	height: var(--seal);
	border-radius: 50%;
	background: var(--dark);
	box-shadow: 0 0 0 10px var(--dark), 0 18px 40px -12px rgba(0, 0, 0, 0.55);
	transform: translate(-50%, -50%);
}

.nsfnlc-seal img {
	display: block;
	width: 100%;
	height: 100%;
}

.nsfnlc .nsfnlc-names {
	position: relative;
	z-index: 1;
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(var(--rows-3), auto);
	column-gap: var(--col-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nsfnlc .nsfnlc-names li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 15px 0 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--white);
}

/* Interior dividers only: no rule above the first name in each column. The
   template marks those items per layout (3, 2 and 1 columns). */
.nsfnlc .nsfnlc-names li.is-top-3 { border-top-color: transparent; }

/* Static trident (css/trident-mark.svg, the finished state of the animated
   mark custom.js injects), coloured by the mask background. */
.nsfnlc-mark {
	flex: none;
	width: 16px;
	height: 12px;
	/* centred on the first line, so it stays put when a long name wraps */
	margin-top: calc((1.35em - 12px) / 2);
	background: var(--gold);
	-webkit-mask: url("trident-mark.svg") no-repeat center / contain;
	mask: url("trident-mark.svg") no-repeat center / contain;
}

.nsfnlc-name { min-width: 0; }

/* ── How to join ─────────────────────────────────────────────────────────── */

.nsfnlc-join {
	padding: 0 var(--pad-x) var(--section-y);
	text-align: center;
	background: var(--dark);
}

.nsfnlc-join-copy {
	max-width: 660px;
	margin: 28px auto 0;
}

.nsfnlc .nsfnlc-join-copy p {
	margin: 0 0 1em;
	font-size: 18px;
	line-height: 1.75;
	color: var(--white);
}

.nsfnlc .nsfnlc-join-copy p:last-child { margin-bottom: 0; }

.nsfnlc .nsfnlc-join-copy p a:not(.btn):not(.button):not(.trident-btn) {
	color: var(--gold);
	font-weight: 600;
	text-decoration-line: underline;
	text-decoration-color: rgba(255, 255, 255, 0.55);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	overflow-wrap: anywhere;
}

.nsfnlc .nsfnlc-join-copy p a:not(.btn):not(.button):not(.trident-btn):hover,
.nsfnlc .nsfnlc-join-copy p a:not(.btn):not(.button):not(.trident-btn):focus-visible {
	color: var(--white);
	text-decoration-color: var(--gold);
}

.nsfnlc .nsfnlc-join-copy a:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */

@media (max-width: 1199px) {
	.nsfnlc {
		--section-y:   80px;
		--hero-top:    104px;
		--hero-bottom: 36px;
		--seal:        148px;
		--plaque-y:    52px;
		--plaque-top:  calc(var(--seal) / 2 + 36px);
		--plaque-x:    44px;
		--col-gap:     36px;
	}
	.nsfnlc .nsfnlc-names li { font-size: 16px; }

	/* Two columns: at three, the longer names wrap below ~1200px. */
	.nsfnlc .nsfnlc-names {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(var(--rows-2), auto);
	}
	.nsfnlc .nsfnlc-names li.is-top-3 { border-top-color: rgba(255, 255, 255, 0.1); }
	.nsfnlc .nsfnlc-names li.is-top-2 { border-top-color: transparent; }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.nsfnlc {
		--pad-x:       20px;
		--section-y:   64px;
		--hero-top:    80px;
		--hero-bottom: 28px;
		--seal:        128px;
		--plaque-y:    36px;
		--plaque-top:  calc(var(--seal) / 2 + 28px);
		--plaque-x:    24px;
	}
	.nsfnlc-hero { min-height: 0; }
	.nsfnlc-year { font-size: 16px; }
	.nsfnlc .nsfnlc-h1 { gap: 12px; }
	.nsfnlc-hero .nsfnlc-stars { margin: 24px 0 22px; }
	.nsfnlc-stars { gap: 14px; }
	.nsfnlc-stars svg { width: 64px; }
	.nsfnlc-stars-line { width: 64px; }
	.nsfnlc .nsfnlc-intro,
	.nsfnlc .nsfnlc-join-copy p { font-size: 16px; line-height: 1.7; }

	.nsfnlc .nsfnlc-names {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: repeat(var(--rows-1), auto);
	}
	.nsfnlc .nsfnlc-names li.is-top-2 { border-top-color: rgba(255, 255, 255, 0.1); }
	.nsfnlc .nsfnlc-names li:first-child { border-top-color: transparent; }
	.nsfnlc .nsfnlc-names li { font-size: 15px; padding: 12px 0 11px; gap: 12px; }
	.nsfnlc-plaque::after { inset: 6px; }
	.nsfnlc-seal { box-shadow: 0 0 0 7px var(--dark), 0 14px 30px -10px rgba(0, 0, 0, 0.55); }
	.nsfnlc-mark { width: 14px; height: 10.5px; margin-top: calc((1.35em - 10.5px) / 2); }
	.nsfnlc-join-copy { margin-top: 22px; }
}

/* Small phones (320px class): tighter gutters and type keep surnames on the
   same line as the rest of the name. */
@media (max-width: 359px) {
	.nsfnlc {
		--pad-x:    16px;
		--plaque-x: 16px;
	}
	.nsfnlc .nsfnlc-names li { font-size: 14px; letter-spacing: 0.035em; gap: 10px; }
	.nsfnlc-title { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
	.nsfnlc-hero-video { display: none; }
}