@charset "UTF-8";
/* ==========================================================================
   NJP TEAM PAGE
   Lives in the plugin: njp-team-page/assets/njp-team-page.css
   Editable without FTP via Plugins → Plugin File Editor.
   Every selector is namespaced .njp-* so nothing can collide with Beaver
   Builder, the theme, or the Advanced Posts modules elsewhere on the site.

   FONTS are enqueued separately in njp-team-page.php (handle: njp-fonts).
   Deliberately not @import-ed here — @import serialises the request behind
   this stylesheet and defeats the preconnect hint. If you swap in a licensed
   brand face, change --njp-display / --njp-body below and drop the
   njp-fonts enqueue from the PHP.

   TWO WAYS IN
   1. Plugin-rendered markup. The shortcodes wrap everything in .njp-team,
      which supplies the resets and the JS hydration hooks.
   2. Markup rendered by a Beaver Themer module. Add "njp-scope" to the
      wrapper (or to each card) for the resets, and see section 14 for the
      differences that need handling — a background-image avatar instead of
      an <img>, and no .njp-ready gate on the bio.

   Tokens live on :root, so both routes get them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — rebrand by editing this block only
   -------------------------------------------------------------------------- */
:root {
	--njp-navy: #041e42;
	--njp-navy-2: #0a2d5c;
	--njp-gold: #ffb81c;
	--njp-gold-ink: #6b4a00;

	--njp-ink: #0b0f14;
	--njp-ink-2: #3a4451;
	--njp-ink-3: #5f6873;
	--njp-ink-4: #646e79;

	--njp-paper: #ffffff;
	--njp-paper-2: #f5f6f7;
	--njp-paper-3: #edeff1;

	--njp-line: #e1e4e8;
	--njp-line-2: #cbd1d8;

	--njp-pos-f: #b01b2e;
	--njp-pos-d: #0a5c8a;
	--njp-pos-g: #6b4a00;

	/* Hero watermark. --njp-watermark (the logo URL) is injected by PHP from
	   Teams → Team Page. Tint controls how loud it is — go paler, not louder;
	   it must never compete with the team name. Try --njp-paper-3 for more
	   presence, or rgba(4,30,66,.05) for a faint navy cast. */
	--njp-watermark-tint: var(--njp-paper-2);

	--njp-r: 4px;
	--njp-r-lg: 8px;

	--njp-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
	--njp-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	--njp-shadow-1: 0 1px 2px rgba(11, 15, 20, 0.06), 0 1px 3px rgba(11, 15, 20, 0.04);
	--njp-shadow-2: 0 8px 16px -6px rgba(11, 15, 20, 0.14), 0 2px 6px rgba(11, 15, 20, 0.06);
	--njp-shadow-3: 0 24px 48px -12px rgba(11, 15, 20, 0.28);

	--njp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--njp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	/* Height of the site's sticky header. Adjust so the tab bar sits under it. */
	--njp-hdr: 0px;
}

/* Typography and resets. .njp-team is the plugin wrapper; add .njp-scope to
   opt any other markup in. Both are safe to nest. */
.njp-team,
.njp-scope {
	font-family: var(--njp-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--njp-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.njp-team,
.njp-team *,
.njp-team *::before,
.njp-team *::after,
.njp-scope,
.njp-scope *,
.njp-scope *::before,
.njp-scope *::after {
	box-sizing: border-box;
}

.njp-team img,
.njp-scope img {
	display: block;
	max-width: 100%;
	height: auto;
}

.njp-team button,
.njp-scope button {
	font: inherit;
	color: inherit;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.njp-team :focus-visible,
.njp-scope :focus-visible {
	outline: 2px solid var(--njp-gold);
	outline-offset: 3px;
	border-radius: 2px;
}

.njp-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   2. HERO
   -------------------------------------------------------------------------- */
.njp-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(30px, 5vw, 64px) 0 clamp(24px, 3.5vw, 40px);
	border-bottom: 1px solid var(--njp-line);
}

/* Oversized watermark behind the team name.
   Two states:
   - .njp-hero__mark--logo  the real logo, stamped as a flat pale shape via
                            mask-image so its own colours never muddy the hero.
                            --njp-watermark is injected by PHP from the setting.
   - .njp-hero__mark        abstract rings, used when no logo is configured. */
.njp-hero__mark {
	position: absolute;
	top: 50%;
	right: -4%;
	width: min(44vw, 500px);
	aspect-ratio: 1;
	transform: translateY(-50%);
	border-radius: 50%;
	pointer-events: none;
	background:
		radial-gradient(circle at 50% 50%, transparent 0 33%, var(--njp-paper-2) 33% 41%, transparent 41%),
		radial-gradient(circle at 50% 50%, var(--njp-paper-2) 0 26%, transparent 26%);
}

.njp-hero__mark--logo {
	/* Wider box + contain, so a wordmark isn't squashed into a square. */
	width: min(52vw, 620px);
	aspect-ratio: auto;
	height: 118%;
	right: -3%;
	border-radius: 0;
	background: var(--njp-watermark-tint);
	-webkit-mask: var(--njp-watermark) no-repeat center right / contain;
	mask: var(--njp-watermark) no-repeat center right / contain;
}

/* Safari and older Chromium need the prefix; if masking is unsupported the
   element would become a solid block, so hide it rather than show a slab. */
@supports not ((mask: url("#")) or (-webkit-mask: url("#"))) {
	.njp-hero__mark--logo {
		display: none;
	}
}

.njp-hero__inner {
	position: relative;
}

.njp-eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0 0 clamp(12px, 2vw, 18px);
}

.njp-badge {
	padding: 7px 11px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	white-space: nowrap;
}

.njp-badge--tier {
	background: var(--njp-navy);
	color: #fff;
}

.njp-badge--gold {
	background: var(--njp-gold);
	color: var(--njp-gold-ink);
}

.njp-badge--ghost {
	color: var(--njp-ink-2);
	box-shadow: inset 0 0 0 1px var(--njp-line-2);
}

.njp-hero__title {
	max-width: 18ch;
	margin: 0 0 clamp(12px, 2vw, 18px);
	font-family: var(--njp-display);
	font-size: clamp(42px, 9vw, 104px);
	font-weight: 700;
	line-height: 0.88;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--njp-ink);
}

.njp-hero__rule {
	display: block;
	width: 96px;
	height: 5px;
	margin: 0 0 clamp(14px, 2vw, 22px);
	background: var(--njp-gold);
}

.njp-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

/* Split hero — title block left, team photo right.
   ---------------------------------------------------------------------------
   .njp-hero--split is added by PHP only when the team has a featured image,
   so a team without one falls back to the original full-width hero instead of
   rendering an empty second column.

   The photos have the team name and season burned into them as artwork, so
   the title sits BESIDE the image rather than over it. Overlaying would put
   the h1 next to the same words already printed in the photo.

   Single spaces inside clamp() on purpose: Beaver Builder's CSS minifier
   collapses a double space into invalid maths and silently drops the whole
   declaration. */
.njp-hero__grid {
	position: relative;
}

.njp-hero--split .njp-hero__grid {
	display: grid;
	/* minmax(0, …) on both tracks — without the 0 floor, a long team name or
	   a wide image sets the track's min-content width and pushes the other
	   column out of the hero. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

/* Watermark, moved to the text side.
   ---------------------------------------------------------------------------
   The base rule parks the mark at the right edge, which in split mode is where
   the photo now sits — behind a photo it only muddies the image, so 3.1.0
   hid it outright. Mirroring it to the left is the better answer: it fills the
   space the title block leaves below the button and never touches the photo.

   It paints behind the text without a z-index. .njp-hero__mark is absolute and
   .njp-hero__grid is relative, both auto z-index, so they stack in DOM order
   and the grid — which holds the title — wins.

   The tint is deliberately near-white. At --njp-paper-3 the title still sits
   at roughly 17:1 against it, so this cannot affect the heading's contrast;
   drop back to --njp-paper-2 if it reads too strong. */
.njp-hero--split .njp-hero__mark {
	right: auto;
	left: -5%;
	width: min(38vw, 440px);
	background:
		radial-gradient(circle at 50% 50%, transparent 0 33%, var(--njp-paper-3) 33% 41%, transparent 41%),
		radial-gradient(circle at 50% 50%, var(--njp-paper-3) 0 26%, transparent 26%);
}

/* Full colour, not a flat silhouette.
   ---------------------------------------------------------------------------
   The base rule stamps the logo as one flat tint using mask-image. Here the
   artwork is drawn as a real background image instead, so the navy and gold
   come through, and the mask is switched off — leaving it on would punch the
   image out of itself.

   OPACITY IS A CONTRAST BUDGET, NOT A TASTE SETTING. The logo now sits in
   colour behind the title and the badges, so its darkest colour (navy
   #041e42) becomes the effective background for that text. Measured against
   every text colour that overlaps it, composited over white:

     opacity   navy blend   title #0b0f14   ghost badge #3a4451   gold ink #6b4a00
     0.22      #c8ced5      12.12:1         6.23:1                5.09:1
     0.28      #b9c0ca      10.48:1          5.39:1                4.40:1  <- fails

   0.22 is the ceiling that keeps all three above 4.5:1. Raising it past that
   breaks the gold badge first, not the title, which is the one that looks
   safe and is not. */
.njp-hero--split .njp-hero__mark--logo {
	right: auto;
	left: -6%;
	width: min(44vw, 540px);
	height: 128%;
	background: var(--njp-watermark) no-repeat center left / contain;
	opacity: 0.22;
	-webkit-mask: none;
	mask: none;
	/* The @supports guard above hides this element where mask-image is
	   unsupported, because the flat-tint version would otherwise render as a
	   solid slab. This version does not use a mask at all, so that guard does
	   not apply and the element is shown again. The narrow-screen rule below
	   still hides it — it is later in the file at equal specificity. */
	display: block;
}

@media (max-width: 900px) {

	/* Stacked, the text column is full width and the mark would sit under the
	   badges and the button rather than beside them. */
	.njp-hero--split .njp-hero__mark {
		display: none;
	}
}

.njp-hero__photo {
	position: relative;
	margin: 0;
}

.njp-hero__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--njp-r-lg);
	/* Holds the slot's colour while the image decodes. */
	background: var(--njp-paper-2);
}

/* Gold corner bracket, the same accent used on the staff portrait. */
.njp-hero__photo::after {
	content: "";
	position: absolute;
	right: -10px;
	bottom: -10px;
	width: clamp(56px, 7vw, 92px);
	aspect-ratio: 1;
	border-right: 4px solid var(--njp-gold);
	border-bottom: 4px solid var(--njp-gold);
	border-radius: 0 0 var(--njp-r-lg) 0;
	pointer-events: none;
}

@media (max-width: 900px) {

	.njp-hero--split .njp-hero__grid {
		grid-template-columns: 1fr;
		gap: clamp(18px, 4vw, 28px);
	}

	/* Photo above the title on narrow screens, matching how the page read
	   when the image was its own module at the top. DOM order stays
	   text-first so the heading is still the first thing announced. */
	.njp-hero--split .njp-hero__photo {
		order: -1;
	}

	/* The bracket overhangs the frame; at full width that would sit under
	   the viewport edge. */
	.njp-hero__photo::after {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   3. BUTTONS
   -------------------------------------------------------------------------- */
.njp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 22px;
	border-radius: var(--njp-r);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 0.2s var(--njp-ease), background-color 0.2s, box-shadow 0.2s;
}

.njp-btn svg {
	flex: none;
	width: 15px;
	height: 15px;
}

.njp-btn:hover {
	transform: translateY(-2px);
	text-decoration: none;
}

.njp-btn:active {
	transform: translateY(0);
}

.njp-btn--pri {
	background: var(--njp-navy);
	color: #fff;
}

.njp-btn--pri:hover,
.njp-btn--pri:focus {
	background: var(--njp-navy-2);
	color: #fff;
	box-shadow: var(--njp-shadow-2);
}

.njp-btn--sec {
	color: var(--njp-ink);
	box-shadow: inset 0 0 0 1.5px var(--njp-line-2);
}

.njp-btn--sec:hover,
.njp-btn--sec:focus {
	color: var(--njp-ink);
	background: var(--njp-paper-2);
	box-shadow: inset 0 0 0 1.5px var(--njp-ink);
}

/* --------------------------------------------------------------------------
   4. STICKY TAB BAR
   -------------------------------------------------------------------------- */
.njp-tabwrap {
	position: sticky;
	top: var(--njp-hdr);
	z-index: 20;
	background: rgba(255, 255, 255, 0.94);
	border-bottom: 1px solid var(--njp-line);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	transition: box-shadow 0.3s var(--njp-ease);
}

.njp-tabwrap.is-stuck {
	box-shadow: 0 6px 18px -12px rgba(11, 15, 20, 0.3);
}

.njp-tabs {
	position: relative;
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.njp-tabs::-webkit-scrollbar {
	display: none;
}

.njp-tab {
	flex: none;
	padding: 19px 20px 17px;
	font-family: var(--njp-display);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--njp-ink-3);
	transition: color 0.22s var(--njp-ease);
}

.njp-tab:hover,
.njp-tab[aria-selected="true"] {
	color: var(--njp-ink);
}

.njp-tabink {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 3px;
	background: var(--njp-navy);
	pointer-events: none;
	transition: transform 0.38s var(--njp-ease-out), width 0.38s var(--njp-ease-out);
}

/* No-JS and pre-hydration fallback: underline the first tab. */
.njp-team:not(.njp-ready) .njp-tab[aria-selected="true"] {
	box-shadow: inset 0 -3px 0 var(--njp-navy);
}

.njp-panel {
	padding: clamp(28px, 4.5vw, 54px) 0 clamp(40px, 6vw, 80px);
}

.njp-panel[hidden] {
	display: none;
}

.njp-panel.is-entering {
	animation: njp-panel-in 0.42s var(--njp-ease-out) both;
}

@keyframes njp-panel-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   5. SECTION HEADS
   -------------------------------------------------------------------------- */

/* Passthrough wrapper. Width comes from the Beaver Builder row, so this only
   needs to establish a block context and separate stacked sections. */
.njp-section {
	display: block;
}

.njp-section + .njp-section {
	margin-top: clamp(34px, 5vw, 60px);
}

.njp-shd {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
	justify-content: space-between;
	margin: 0 0 clamp(18px, 2.5vw, 28px);
}

.njp-shd__title {
	margin: 0;
	font-family: var(--njp-display);
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--njp-ink);
}

.njp-shd__aside {
	margin: 0;
	font-size: 13px;
	color: var(--njp-ink-3);
}

.njp-grouphd {
	display: flex;
	gap: 14px;
	align-items: center;
	margin: clamp(24px, 3.5vw, 38px) 0 18px;
}

.njp-grouphd:first-of-type {
	margin-top: 0;
}

.njp-grouphd h3 {
	margin: 0;
	font-family: var(--njp-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--njp-ink-3);
}

.njp-grouphd span {
	flex: 1;
	height: 1px;
	background: var(--njp-line);
}

/* --------------------------------------------------------------------------
   6. ROSTER CONTROLS
   -------------------------------------------------------------------------- */
.njp-ctrls {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0 0 clamp(18px, 2.5vw, 26px);
	padding-bottom: 20px;
	border-bottom: 1px solid var(--njp-line);
}

.njp-chip {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	padding: 11px 16px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--njp-ink-2);
	box-shadow: inset 0 0 0 1px var(--njp-line-2);
	transition: color 0.2s, background-color 0.2s, box-shadow 0.2s, transform 0.18s var(--njp-ease);
}

.njp-chip:hover {
	color: var(--njp-ink);
	transform: translateY(-1px);
	box-shadow: inset 0 0 0 1px var(--njp-ink-3);
}

.njp-chip b {
	font-size: 11px;
	font-weight: 500;
	color: var(--njp-ink-4);
	transition: color 0.2s;
}

.njp-chip[aria-pressed="true"] {
	background: var(--njp-ink);
	color: #fff;
	box-shadow: none;
}

.njp-chip[aria-pressed="true"] b {
	color: var(--njp-gold);
}

.njp-search {
	position: relative;
	flex: 1 1 200px;
	min-width: 190px;
	max-width: 290px;
	margin-left: auto;
}

.njp-search svg {
	position: absolute;
	top: 50%;
	left: 13px;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--njp-ink-4);
}

.njp-search input {
	width: 100%;
	margin: 0;
	padding: 12px 14px 12px 38px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--njp-paper-2);
	font-family: var(--njp-body);
	font-size: 14px;
	line-height: 1;
	color: var(--njp-ink);
	transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
	-webkit-appearance: none;
	appearance: none;
}

.njp-search input::placeholder {
	color: var(--njp-ink-4);
}

.njp-search input:focus {
	outline: 0;
	border-color: var(--njp-ink-3);
	background: var(--njp-paper);
	box-shadow: 0 0 0 3px rgba(255, 184, 28, 0.32);
}

/* --------------------------------------------------------------------------
   7. PLAYER CARDS
   -------------------------------------------------------------------------- */
.njp-roster {
	display: grid;
	gap: clamp(12px, 1.6vw, 20px);
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.njp-pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--njp-r-lg);
	background: var(--njp-paper);
	box-shadow: inset 0 0 0 1px var(--njp-line);
	transition: transform 0.3s var(--njp-ease), box-shadow 0.3s var(--njp-ease);
}

.njp-pcard:hover {
	transform: translateY(-4px);
	box-shadow: inset 0 0 0 1px var(--njp-line), var(--njp-shadow-2);
}

.njp-pcard.is-out {
	animation: njp-card-out 0.22s var(--njp-ease) both;
}

.njp-pcard.is-in {
	animation: njp-card-in 0.34s var(--njp-ease-out) both;
}

@keyframes njp-card-out {
	to {
		opacity: 0;
		transform: scale(0.96);
	}
}

@keyframes njp-card-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.njp-pcard__shot {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--njp-paper-3);
}

.njp-pcard__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s var(--njp-ease-out);
}

.njp-pcard:hover .njp-pcard__shot img {
	transform: scale(1.05);
}

/* Fallback logo — contained, not cropped, on the brand navy. */
.njp-pcard__shot--fb {
	display: grid;
	place-items: center;
	padding: 18%;
	background: var(--njp-navy);
}

.njp-pcard__shot--fb img {
	width: 100%;
	height: auto;
	object-fit: contain;
	opacity: 0.9;
}

.njp-pcard:hover .njp-pcard__shot--fb img {
	transform: scale(1.06);
}

/* Last resort when no fallback image is configured at all. */
.njp-pcard__shot--empty {
	background: var(--njp-navy);
}

.njp-pcard__shot--empty::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, transparent 0 30%, rgba(255, 184, 28, 0.85) 30% 40%, transparent 40%);
}

.njp-pcard__num {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	min-width: 44px;
	padding: 8px 10px 7px;
	font-family: var(--njp-display);
	font-size: 21px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	background: var(--njp-navy);
	color: #fff;
	transition: background-color 0.28s var(--njp-ease), color 0.28s var(--njp-ease);
}

.njp-pcard:hover .njp-pcard__num {
	background: var(--njp-gold);
	color: var(--njp-gold-ink);
}

.njp-pcard__ep {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--njp-ink);
	box-shadow: var(--njp-shadow-1);
	opacity: 0;
	transform: translateY(-5px);
	transition: opacity 0.26s var(--njp-ease), transform 0.26s var(--njp-ease),
		background-color 0.2s, color 0.2s;
}

.njp-pcard__ep svg {
	width: 14px;
	height: 14px;
}

.njp-pcard:hover .njp-pcard__ep,
.njp-pcard__ep:focus-visible {
	opacity: 1;
	transform: none;
}

.njp-pcard__ep:hover {
	background: var(--njp-gold);
	color: var(--njp-gold-ink);
}

/* Touch devices have no hover, so keep the affordance visible. */
@media (hover: none) {
	.njp-pcard__ep {
		opacity: 1;
		transform: none;
	}
}

.njp-pcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 9px;
	padding: 14px 14px 15px;
}

.njp-pcard__name {
	margin: 0;
	font-family: var(--njp-display);
	font-size: clamp(19px, 1.5vw, 23px);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

.njp-pcard__name a {
	color: var(--njp-ink);
	text-decoration: none;
	background-image: linear-gradient(var(--njp-gold), var(--njp-gold));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 3px;
	transition: background-size 0.3s var(--njp-ease-out);
}

.njp-pcard:hover .njp-pcard__name a {
	background-size: 100% 3px;
}

.njp-pcard__pos {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	align-self: flex-start;
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--njp-ink-2);
}

.njp-pcard__pos::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.njp-pcard[data-njp-pos="Forward"] .njp-pcard__pos {
	color: var(--njp-pos-f);
}

.njp-pcard[data-njp-pos="Defense"] .njp-pcard__pos {
	color: var(--njp-pos-d);
}

.njp-pcard[data-njp-pos="Goalie"] .njp-pcard__pos {
	color: var(--njp-pos-g);
}

.njp-pcard__home {
	display: flex;
	gap: 5px;
	align-items: center;
	margin: 0;
	font-size: 12px;
	color: var(--njp-ink-3);
}

.njp-pcard__home svg {
	flex: none;
	width: 12px;
	height: 12px;
	color: var(--njp-ink-4);
}

.njp-pcard__vitals {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	margin: auto 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--njp-line);
	font-size: 12px;
	color: var(--njp-ink-2);
}

.njp-pcard__vitals span {
	display: inline-flex;
	align-items: center;
}

.njp-pcard__vitals span + span::before {
	content: "";
	width: 1px;
	height: 11px;
	margin: 0 9px;
	background: var(--njp-line-2);
}

.njp-empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 52px 20px;
	border: 1px dashed var(--njp-line-2);
	border-radius: var(--njp-r-lg);
	text-align: center;
}

.njp-empty[hidden] {
	display: none;
}

.njp-empty strong {
	display: block;
	margin-bottom: 4px;
	font-family: var(--njp-display);
	font-size: 22px;
	font-weight: 600;
	text-transform: uppercase;
}

.njp-empty span {
	font-size: 13px;
	color: var(--njp-ink-3);
}

/* --------------------------------------------------------------------------
   8. COACHES
   -------------------------------------------------------------------------- */
.njp-coaches {
	display: grid;
	gap: clamp(14px, 2vw, 24px);
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.njp-ccard {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	text-align: center;
}

.njp-ccard__av {
	position: relative;
	width: min(148px, 72%);
	aspect-ratio: 1;
	overflow: hidden;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--njp-paper-3);
	box-shadow: 0 0 0 1px var(--njp-line), 0 0 0 0 rgba(255, 184, 28, 0);
	transition: box-shadow 0.34s var(--njp-ease), transform 0.34s var(--njp-ease),
		background-size 0.55s var(--njp-ease-out);
}

.njp-ccard:hover .njp-ccard__av {
	transform: translateY(-3px);
	box-shadow: 0 0 0 1px var(--njp-line), 0 0 0 5px rgba(255, 184, 28, 0.34);
}

.njp-ccard__av img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s var(--njp-ease-out);
}

.njp-ccard:hover .njp-ccard__av img {
	transform: scale(1.06);
}

.njp-ccard__av--fb {
	display: grid;
	place-items: center;
	padding: 20%;
	background: var(--njp-navy);
}

.njp-ccard__av--fb img {
	height: auto;
	object-fit: contain;
	opacity: 0.9;
}

/* Module markup has no <img> child, so paint the logo as a background.
   --njp-watermark comes from the Fallback Headshot setting via PHP; without
   it this degrades to a plain navy circle. */
.njp-ccard__av--fb:empty {
	padding: 0;
	background-color: var(--njp-navy);
	background-image: var(--njp-watermark, none);
	background-size: 58%;
	background-position: center;
	background-repeat: no-repeat;
}

.njp-ccard__av--empty {
	background: var(--njp-navy);
}

.njp-ccard__av--empty::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 48%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, transparent 0 30%, rgba(255, 184, 28, 0.85) 30% 40%, transparent 40%);
}

.njp-ccard__name {
	margin: 0;
	font-family: var(--njp-display);
	font-size: clamp(19px, 1.5vw, 22px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.njp-ccard__name a {
	color: var(--njp-ink);
	text-decoration: none;
	transition: color 0.2s;
}

.njp-ccard__name a:hover {
	color: var(--njp-gold-ink);
}

.njp-ccard__role {
	margin: 0;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--njp-gold-ink);
}

.njp-ccard__acts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 10px 0 0;
}

/* .njp-mini is the plugin's pill; the __more / __link pair is the module's. */
.njp-mini,
.njp-ccard__more,
.njp-ccard__link {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 9px 13px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--njp-ink-2);
	box-shadow: inset 0 0 0 1px var(--njp-line-2);
	transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.njp-mini svg,
.njp-ccard__more svg,
.njp-ccard__link svg {
	width: 13px;
	height: 13px;
}

.njp-mini:hover,
.njp-ccard__more:hover,
.njp-ccard__link:hover {
	color: var(--njp-ink);
	background: var(--njp-paper-2);
	box-shadow: inset 0 0 0 1px var(--njp-ink-3);
}

.njp-bio,
.njp-ccard__bio {
	overflow: hidden;
	height: 0;
	opacity: 0;
	text-align: left;
	transition: height 0.38s var(--njp-ease-out), opacity 0.28s var(--njp-ease),
		margin-top 0.38s var(--njp-ease-out);
}

.njp-bio.is-open,
.njp-ccard__bio.is-open {
	opacity: 1;
	margin-top: 12px;
}

.njp-bio p,
.njp-ccard__bio p {
	margin: 0;
	padding: 13px 15px;
	border-left: 3px solid var(--njp-gold);
	border-radius: var(--njp-r);
	background: var(--njp-paper-2);
	font-size: 13.5px;
	line-height: 1.68;
	color: var(--njp-ink-2);
}

/* Before JS runs the bio is closed; without JS it must still be reachable. */
.njp-team:not(.njp-ready) .njp-bio {
	height: auto;
	opacity: 1;
	margin-top: 12px;
}

.njp-mgrs {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	margin-top: clamp(24px, 3.5vw, 38px);
}

.njp-mgr {
	display: flex;
	gap: 13px;
	align-items: center;
	padding: 14px 16px;
	border-radius: var(--njp-r-lg);
	box-shadow: inset 0 0 0 1px var(--njp-line);
	transition: transform 0.24s var(--njp-ease), box-shadow 0.24s;
}

.njp-mgr:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 1px var(--njp-line-2), var(--njp-shadow-1);
}

.njp-mgr__ini {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--njp-navy);
	font-family: var(--njp-display);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--njp-gold);
}

.njp-mgr__tx {
	min-width: 0;
}

.njp-mgr__tx strong {
	display: block;
	font-family: var(--njp-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.njp-mgr__tx a {
	display: block;
	overflow: hidden;
	font-size: 12.5px;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-decoration: none;
	color: var(--njp-ink-3);
	transition: color 0.2s;
}

.njp-mgr__tx a:hover {
	color: var(--njp-ink);
}

/* --------------------------------------------------------------------------
   9. SCHEDULE
   -------------------------------------------------------------------------- */
.njp-sched {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--njp-line);
}

.njp-ev {
	position: relative;
	display: grid;
	gap: clamp(14px, 2vw, 26px);
	grid-template-columns: 118px minmax(0, 1fr) 220px;
	align-items: center;
	padding: 20px 4px;
	border-bottom: 1px solid var(--njp-line);
	transition: background-color 0.26s var(--njp-ease), padding-left 0.26s var(--njp-ease);
}

.njp-ev::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: var(--njp-gold);
	transform: scaleY(0);
	transition: transform 0.3s var(--njp-ease-out);
}

.njp-ev:hover {
	background: var(--njp-paper-2);
	padding-left: 16px;
}

.njp-ev:hover::before {
	transform: scaleY(1);
}

.njp-ev__dt {
	font-family: var(--njp-display);
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--njp-ink);
}

/* Grid cell holding the event name and its type pill. */
.njp-ev__main {
	display: block;
	min-width: 0;
}

.njp-ev__name {
	display: block;
	font-family: var(--njp-display);
	font-size: clamp(19px, 1.9vw, 25px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

.njp-ev__type {
	display: inline-flex;
	margin-top: 7px;
	padding: 5px 9px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.njp-ev__type--showcase {
	background: #e7f0f7;
	color: #0a4a6e;
}

.njp-ev__type--game {
	background: #fbe9ec;
	color: #8c1626;
}

.njp-ev__type--tournament {
	background: #fff3d6;
	color: var(--njp-gold-ink);
}

.njp-ev__type--playoffs {
	background: var(--njp-navy);
	color: var(--njp-gold);
}

.njp-ev__loc {
	display: flex;
	gap: 7px;
	align-items: center;
	font-size: 14px;
	color: var(--njp-ink-2);
}

.njp-ev__loc svg {
	flex: none;
	width: 14px;
	height: 14px;
	color: var(--njp-ink-4);
}

.njp-sched__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: clamp(20px, 3vw, 30px) 0 0;
}

/* --------------------------------------------------------------------------
   10. MEDIA
   -------------------------------------------------------------------------- */
.njp-vidgrid {
	display: grid;
	gap: clamp(12px, 1.6vw, 18px);
	grid-template-columns: 2fr 1fr;
	margin-bottom: clamp(30px, 4.5vw, 50px);
}

/* A lone video should not sit in a half-width column. */
.njp-vidgrid:has(> .njp-vid:only-child) {
	grid-template-columns: 1fr;
}

.njp-vidgrid__stack {
	display: grid;
	gap: clamp(12px, 1.6vw, 18px);
	grid-auto-rows: 1fr;
}

.njp-vid {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	padding: 0;
	aspect-ratio: 16 / 9;
	border-radius: var(--njp-r-lg);
	background: var(--njp-navy);
	transition: transform 0.3s var(--njp-ease), box-shadow 0.3s var(--njp-ease);
}

.njp-vid:hover {
	transform: translateY(-3px);
	box-shadow: var(--njp-shadow-2);
}

.njp-vid__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--njp-ease-out), filter 0.4s;
}

.njp-vid:hover .njp-vid__thumb {
	transform: scale(1.045);
	filter: brightness(0.86);
}

.njp-vid::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(4, 30, 66, 0.86) 0%, rgba(4, 30, 66, 0.28) 46%, transparent 74%);
}

.njp-vid__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--njp-gold);
	color: var(--njp-navy);
	box-shadow: 0 0 0 0 rgba(255, 184, 28, 0.5);
	transition: transform 0.3s var(--njp-ease-out), box-shadow 0.4s var(--njp-ease);
}

.njp-vid__play svg {
	width: 22px;
	height: 22px;
	margin-left: 3px;
}

.njp-vid:hover .njp-vid__play {
	transform: translate(-50%, -50%) scale(1.11);
	box-shadow: 0 0 0 14px rgba(255, 184, 28, 0.16);
}

.njp-vid--sm .njp-vid__play {
	width: 44px;
	height: 44px;
}

.njp-vid--sm .njp-vid__play svg {
	width: 16px;
	height: 16px;
}

.njp-vid__cap {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: 16px 18px;
	text-align: left;
}

.njp-vid__title {
	display: block;
	font-family: var(--njp-display);
	font-size: clamp(17px, 1.7vw, 25px);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
}

.njp-vid__sub {
	display: block;
	margin-top: 5px;
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--njp-gold);
}

.njp-vid iframe {
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	border: 0;
}

.njp-vid.is-live::after,
.njp-vid.is-live .njp-vid__play,
.njp-vid.is-live .njp-vid__cap,
.njp-vid.is-live .njp-vid__thumb {
	display: none;
}

.njp-gal {
	display: grid;
	gap: clamp(6px, 1vw, 12px);
	grid-template-columns: repeat(6, 1fr);
}

.njp-gal > button {
	position: relative;
	overflow: hidden;
	padding: 0;
	aspect-ratio: 1;
	border-radius: var(--njp-r);
	background: var(--njp-paper-3);
	transition: transform 0.3s var(--njp-ease), box-shadow 0.3s var(--njp-ease);
}

.njp-gal > button[hidden] {
	display: none;
}

.njp-gal__w2 {
	grid-column: span 2;
	aspect-ratio: 2 / 1 !important;
}

.njp-gal > button img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--njp-ease-out);
}

.njp-gal > button::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--njp-navy);
	opacity: 0;
	transition: opacity 0.3s var(--njp-ease);
}

.njp-gal > button:hover {
	z-index: 2;
	transform: scale(1.03);
	box-shadow: var(--njp-shadow-2);
}

.njp-gal > button:hover img {
	transform: scale(1.09);
}

.njp-gal > button:hover::after {
	opacity: 0.14;
}

.njp-gal__more {
	display: grid;
	place-items: center;
	background: var(--njp-paper-2) !important;
	font-family: var(--njp-display);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--njp-ink-2);
	box-shadow: inset 0 0 0 1px var(--njp-line);
}

.njp-gal__more:hover {
	background: var(--njp-navy) !important;
	color: #fff;
	box-shadow: none;
}

.njp-gal__more::after {
	display: none !important;
}

/* --------------------------------------------------------------------------
   11. LIGHTBOX
   -------------------------------------------------------------------------- */
.njp-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 54px);
	background: rgba(4, 30, 66, 0.94);
	opacity: 0;
	transition: opacity 0.3s var(--njp-ease);
}

.njp-lb[hidden] {
	display: none;
}

.njp-lb.is-open {
	opacity: 1;
}

.njp-lb img {
	max-width: 100%;
	max-height: 78vh;
	border-radius: var(--njp-r);
	box-shadow: var(--njp-shadow-3);
	transform: scale(0.96);
	transition: transform 0.34s var(--njp-ease-out);
}

.njp-lb.is-open img {
	transform: scale(1);
}

.njp-lb__x,
.njp-lb__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	transition: background-color 0.2s, color 0.2s;
}

.njp-lb__x {
	top: clamp(14px, 3vw, 28px);
	right: clamp(14px, 3vw, 28px);
}

.njp-lb__nav--prev {
	top: 50%;
	left: clamp(10px, 2vw, 26px);
	transform: translateY(-50%);
}

.njp-lb__nav--next {
	top: 50%;
	right: clamp(10px, 2vw, 26px);
	transform: translateY(-50%);
}

.njp-lb__x:hover,
.njp-lb__nav:hover {
	background: var(--njp-gold);
	color: var(--njp-navy);
}

.njp-lb__x svg,
.njp-lb__nav svg {
	width: 20px;
	height: 20px;
}

.njp-lb__count {
	position: absolute;
	bottom: clamp(14px, 3vw, 28px);
	left: 50%;
	transform: translateX(-50%);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.njp-gal {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 900px) {
	.njp-ev {
		grid-template-columns: 96px minmax(0, 1fr);
		row-gap: 10px;
	}

	.njp-ev__loc {
		grid-column: 2;
	}

	.njp-vidgrid {
		grid-template-columns: 1fr;
	}

	.njp-vidgrid__stack {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: auto;
	}
}

@media (max-width: 680px) {
	.njp-roster {
		gap: 10px;
		grid-template-columns: repeat(2, 1fr);
	}

	.njp-pcard__body {
		gap: 7px;
		padding: 11px 11px 13px;
	}

	.njp-pcard__vitals {
		font-size: 11px;
	}

	.njp-pcard__vitals span + span::before {
		margin: 0 7px;
	}

	.njp-coaches {
		grid-template-columns: repeat(2, 1fr);
	}

	.njp-ccard__av {
		width: min(120px, 72%);
	}

	.njp-gal {
		grid-template-columns: repeat(3, 1fr);
	}

	.njp-search {
		order: 9;
		flex-basis: 100%;
		max-width: none;
		margin-left: 0;
	}

	.njp-tab {
		padding: 16px 14px 14px;
		font-size: 14px;
	}

	.njp-hero__mark {
		right: -22%;
		opacity: 0.6;
	}

	/* On phones the title needs the whole width, so push the logo further out
	   and lighten it rather than letting it sit behind the text. */
	.njp-hero__mark--logo {
		right: -18%;
		width: 78vw;
		height: 100%;
		opacity: 0.75;
	}

	.njp-hero__cta .njp-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}

@media (max-width: 420px) {
	.njp-vidgrid__stack {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.njp-team *,
	.njp-team *::before,
	.njp-team *::after,
	.njp-scope *,
	.njp-scope *::before,
	.njp-scope *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* --------------------------------------------------------------------------
   13. PRINT
   -------------------------------------------------------------------------- */
@media print {
	.njp-tabwrap,
	.njp-ctrls,
	.njp-hero__mark,
	.njp-hero__cta,
	.njp-sched__foot,
	.njp-lb,
	.njp-pcard__ep,
	.njp-ccard__acts {
		display: none !important;
	}

	.njp-panel[hidden] {
		display: block !important;
	}

	.njp-pcard,
	.njp-ccard,
	.njp-ev {
		break-inside: avoid;
	}
}

/* --------------------------------------------------------------------------
   14. MODULE-RENDERED COACH CARDS
   For .njp-ccard markup produced by a Beaver Themer Posts module rather than
   [njp_team_coaches]. Two differences drive everything here: the avatar is a
   background-image on an empty <span>, and there is no .njp-team ancestor,
   so the .njp-ready hydration gate never applies.
   -------------------------------------------------------------------------- */

/* The base .njp-ccard__av rule uses the background shorthand, which resets
   these longhands — so they must be declared after it. Position from the top,
   since headshots crop better that way than from the centre. */


.njp-ccard:hover .njp-ccard__av:not(.njp-ccard__av--fb) {
	background-size: 112%;
}
/* Open by default as the no-JS fallback; the script hides it and moves the
   content into the modal. */
.njp-ccard__bio {
	height: auto;
	opacity: 1;
}

.njp-ccard__bio[hidden],
.njp-bio[hidden] {
	display: none;
}

/* Level the Bio row across columns. Needs Equal Heights on the column group. */
.njp-ccard {
	height: 100%;
}

.njp-ccard__acts {
	margin-top: auto;
	padding-top: 10px;
}

/* These would otherwise inherit the theme's font, since the reset in
   section 1 only reaches them when .njp-scope is on the card or an
   ancestor — set them explicitly so either arrangement works. */
.njp-ccard__role,
.njp-ccard__more,
.njp-ccard__link {
	font-family: var(--njp-body);
}

.njp-ccard__name {
	color: var(--njp-ink);
}

/* OPTIONAL AUTO-FILL GRID
   Only needed if you want the cards to size themselves instead of using the
   module's own column setting. Put "njp-coach-grid" in the module's
   Advanced → CSS Class, and note that display:contents collapses Themer's
   per-post wrapper so the cards become the grid items.
   The !important beats Themer's inline per-node column CSS. */
.njp-coach-grid .fl-post-grid {
	display: grid !important;
	gap: clamp(14px, 2vw, 24px);
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.njp-coach-grid .fl-post-grid-post {
	display: contents;
}

@media (max-width: 680px) {
	.njp-coach-grid .fl-post-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --------------------------------------------------------------------------
   15. COACH BIO MODAL
   Built once by the JS and appended to <body>, so it escapes any theme
   wrapper with overflow:hidden or a transform that would break position:fixed.
   Content is cloned from the card on open.
   -------------------------------------------------------------------------- */
.njp-cmodal {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: grid;
	place-items: center;
	padding: clamp(14px, 4vw, 48px);
	background: rgba(4, 30, 66, 0.72);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.26s var(--njp-ease);
}

.njp-cmodal[hidden] {
	display: none;
}

.njp-cmodal.is-open {
	opacity: 1;
}

/* Flex column so the head and footer stay put and only the bio scrolls. */
.njp-cmodal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(520px, 100%);
	max-height: min(85vh, 720px);
	padding: clamp(22px, 4vw, 34px);
	border-radius: var(--njp-r-lg);
	background: var(--njp-paper);
	box-shadow: var(--njp-shadow-3);
	text-align: left;
	transform: translateY(10px) scale(0.985);
	transition: transform 0.32s var(--njp-ease-out);
}

.njp-cmodal.is-open .njp-cmodal__panel {
	transform: none;
}

/* Close button.
   ---------------------------------------------------------------------------
   It is the first child of the panel and absolutely positioned, which makes it
   the one control that lands on top of other content when anything goes wrong.
   Three things here are defensive rather than decorative:

   left: auto   nothing can flip it to the opposite corner. If `position` or
                `right` is ever lost it falls back to the top-LEFT of the
                panel, straight over the avatar, because it is first in source
                order. This pins the side explicitly.
   z-index      it must sit above the head, never behind the avatar.
   background   the shared `button` reset sets background:none, so until now it
                had no surface of its own: a bare icon floating over whatever
                was behind it, only becoming legible on hover.

   SELECTOR IS .njp-cmodal .njp-cmodal__x ON PURPOSE. The reset is
   `.njp-scope button` — one class plus one type, (0,1,1). A bare
   `.njp-cmodal__x` is (0,1,0) and LOSES to it, so `background` was silently
   dropped while every other declaration here applied. That is also why the
   old rule appeared to work on hover and nowhere else: `:hover` added a
   pseudo-class, making it (0,2,0), enough to win. Two classes fixes it for
   every state, not just hover. */
.njp-cmodal .njp-cmodal__x {
	position: absolute;
	top: 12px;
	right: 12px;
	left: auto;
	z-index: 2;
	display: grid;
	place-items: center;
	/* 40px, not 36 — this is the smallest comfortable touch target. */
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	background: var(--njp-paper-2);
	color: var(--njp-ink-2);
	transition: background-color 0.2s, color 0.2s;
}

.njp-cmodal .njp-cmodal__x svg {
	width: 18px;
	height: 18px;
}

.njp-cmodal .njp-cmodal__x:hover {
	background: var(--njp-navy);
	color: #fff;
}

/* Stated on the element rather than left to the inherited .njp-scope
   :focus-visible rule. A theme or builder focus style landing on this button
   shows up as the browser's default blue ring on a navy-and-gold site, which
   reads as broken. */
.njp-cmodal .njp-cmodal__x:focus-visible {
	outline: 2px solid var(--njp-gold);
	outline-offset: 2px;
}

.njp-cmodal__head {
	display: flex;
	gap: 16px;
	align-items: center;
	flex: none;
	/* 60px of clearance on the right, not 34. The close button spans 52px from
	   the panel edge (12px offset + 40px wide), so 34 left the coach's name
	   and role running underneath it on longer titles. */
	padding: 0 60px 18px 0;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--njp-line);
}

/* The cloned avatar keeps .njp-ccard__av, whose width is relative to the
   card — pin it to a fixed size here. */
.njp-cmodal .njp-ccard__av {
	width: 84px;
	flex: none;
	margin-bottom: 0;
}

.njp-cmodal__head [data-njp-cm-av] {
	display: flex;
	flex: none;
}

.njp-cmodal__id {
	min-width: 0;
}

.njp-cmodal__name {
	margin: 0;
	font-family: var(--njp-display);
	font-size: clamp(24px, 3vw, 31px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--njp-ink);
}

.njp-cmodal__role {
	margin: 6px 0 0;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--njp-gold-ink);
}

.njp-cmodal__role[hidden] {
	display: none;
}

.njp-cmodal__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.njp-cmodal__body p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.72;
	color: var(--njp-ink-2);
}

.njp-cmodal__body p:last-child {
	margin-bottom: 0;
}

.njp-cmodal__foot {
	flex: none;
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--njp-line);
}

.njp-cmodal__foot[hidden] {
	display: none;
}

@media (max-width: 520px) {
	.njp-cmodal__head {
		gap: 13px;
	}

	.njp-cmodal .njp-ccard__av {
		width: 62px;
	}

	.njp-cmodal__foot .njp-btn {
		display: flex;
		justify-content: center;
	}
}



/* ==========================================================================
   NJP MEGA MENU — Max Mega Menu restyle (dark header)
   Replaces the earlier light-header version. Paste into
   Appearance → Customize → Additional CSS.

   SPECIFICITY NOTE
   Max Mega Menu generates two-ID selectors, e.g.
     #mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item > a.mega-menu-link
   No class-only selector beats two IDs, whatever the source order — so every
   rule below carries the same prefix and wins on load order instead of
   !important. Applying this to another menu location means find-and-replacing
   both ids, which differ only by the "-wrap" suffix.

   HIERARCHY
   Column headings are bold condensed caps against Inter sub-items, with a
   gold hairline beneath. That is the whole point of the revision — on the
   live menu, "About" and "Alumni" are set identically, so the panel reads as
   one long list of twelve links rather than three groups of four.

   Gold marks state and nothing else: a bar that grows under the open
   top-level item, a bar beside a sub-item on hover, and gold type on the
   current page.
   ========================================================================== */

#mega-menu-wrap-max_mega_menu_3 {
	--njp-navy: #041e42;
	--njp-navy-2: #0a2d5c;
	--njp-gold: #ffb81c;

	--njp-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
	--njp-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	--njp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--njp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	/* Everything colour-related routes through these six. */
	--njp-mm-panel: #041e42;
	--njp-mm-link: rgba(255, 255, 255, 0.86);
	--njp-mm-link-on: #ffffff;
	--njp-mm-head: #ffffff;
	--njp-mm-sub: rgba(255, 255, 255, 0.78);
	--njp-mm-hair: rgba(255, 184, 28, 0.38);
}

/* --------------------------------------------------------------------------
   1. BAR
   -------------------------------------------------------------------------- */
#mega-menu-wrap-max_mega_menu_3 {
	background: none;
	border-radius: 0;
}

#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 {
	padding: 0;
}

/* --------------------------------------------------------------------------
   2. TOP-LEVEL ITEMS
   Hover lifts the type to full white and grows the bar. Open and current go
   gold, so "where I am" and "what I'm pointing at" stay distinguishable.
   -------------------------------------------------------------------------- */
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item > a.mega-menu-link {
	position: relative;
	height: auto;
	padding: 22px 16px;
	background: none;
	border: 0;
	border-radius: 0;
	font-family: var(--njp-display);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--njp-mm-link);
	transition: color 0.22s var(--njp-ease);
}

#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item > a.mega-menu-link::after {
	content: "";
	position: absolute;
	right: 16px;
	bottom: 12px;
	left: 16px;
	height: 3px;
	background: var(--njp-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.38s var(--njp-ease-out);
}

#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item > a.mega-menu-link:focus {
	background: none;
	color: var(--njp-mm-link-on);
}

#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-current_page_parent > a.mega-menu-link,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-current_page_ancestor > a.mega-menu-link {
	background: none;
	color: var(--njp-gold);
}

#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item > a.mega-menu-link:hover::after,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item > a.mega-menu-link:focus::after,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link::after,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-current-menu-item > a.mega-menu-link::after,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-current-menu-ancestor > a.mega-menu-link::after,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-current_page_parent > a.mega-menu-link::after,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-current_page_ancestor > a.mega-menu-link::after {
	transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   3. INDICATOR
   Drawn rather than a dashicon, so its weight matches the condensed caps and
   it can rotate when the panel opens.
   -------------------------------------------------------------------------- */
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
	width: 6px;
	height: 6px;
	margin: -3px 0 0 9px;
	padding: 0;
	border: 0;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	background: none;
	opacity: 0.75;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.28s var(--njp-ease), opacity 0.2s;
}

#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item > a.mega-menu-link > span.mega-indicator::after {
	display: none;
}

#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator {
	opacity: 1;
	transform: rotate(-135deg);
}

/* --------------------------------------------------------------------------
   4. PANELS
   Gold top edge echoes the rule under the hero title on the team pages.
   Transform is left alone — the plugin's fade_up effect animates it.
   -------------------------------------------------------------------------- */
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item > ul.mega-sub-menu {
	padding: 30px 28px 26px;
	border: 0;
	border-top: 3px solid var(--njp-gold);
	border-radius: 0 0 8px 8px;
	background: var(--njp-mm-panel);
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55);
}

#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-flyout > ul.mega-sub-menu {
	min-width: 258px;
	padding: 14px;
}

/* --------------------------------------------------------------------------
   5. COLUMN HEADINGS
   Bold condensed caps, one step up in size, with a gold hairline beneath.
   The second selector catches a column whose only entry has no children —
   the 8U Development Program column — which would otherwise fall through
   both this rule and the sub-item rule below and render unstyled.
   -------------------------------------------------------------------------- */
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item-has-children > a.mega-menu-link,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-has-children) > a.mega-menu-link {
	display: block;
	margin-bottom: 14px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--njp-mm-hair);
	background: none;
	font-family: var(--njp-display);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--njp-mm-head);
	transition: color 0.2s var(--njp-ease);
}

#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item-has-children > a.mega-menu-link:hover,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-has-children) > a.mega-menu-link:hover {
	background: none;
	color: var(--njp-gold);
}

/* Current section keeps the heading gold, so a parent knows which group they
   are inside without opening anything. */
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column > ul.mega-sub-menu > li.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column > ul.mega-sub-menu > li.mega-current-menu-parent > a.mega-menu-link,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column > ul.mega-sub-menu > li.mega-current-menu-item > a.mega-menu-link {
	color: var(--njp-gold);
}

/* The hairline already reads as a group label; a chevron on top is noise. */
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
	display: none;
}

/* --------------------------------------------------------------------------
   6. SUB-ITEMS
   Inter at normal weight, so the contrast against a 700 condensed heading
   does the grouping. Hover slides the label right against a growing gold
   bar — the same gesture as the schedule rows on the team pages.
   -------------------------------------------------------------------------- */
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
	position: relative;
	padding: 9px 10px;
	border: 0;
	border-radius: 4px;
	background: none;
	font-family: var(--njp-body);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	color: var(--njp-mm-sub);
	transition: color 0.2s var(--njp-ease), background-color 0.2s var(--njp-ease),
		padding-left 0.26s var(--njp-ease);
}

#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link::before,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link::before {
	content: "";
	position: absolute;
	top: 7px;
	bottom: 7px;
	left: 0;
	width: 3px;
	border-radius: 2px;
	background: var(--njp-gold);
	transform: scaleY(0);
	transition: transform 0.3s var(--njp-ease-out);
}

#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus {
	padding-left: 15px;
	background: rgba(255, 255, 255, 0.07);
	color: var(--njp-mm-link-on);
}

#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover::before,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus::before,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover::before,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus::before {
	transform: scaleY(1);
}

/* Current page — gold type, bar held open, slightly heavier. Distinct from
   hover, which the live menu does not currently distinguish. */
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 ul.mega-sub-menu ul.mega-sub-menu li.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 ul.mega-sub-menu a.mega-menu-link[aria-current="page"] {
	padding-left: 15px;
	background: none;
	font-weight: 500;
	color: var(--njp-gold);
}

#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 ul.mega-sub-menu ul.mega-sub-menu li.mega-current-menu-item > a.mega-menu-link::before,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 ul.mega-sub-menu a.mega-menu-link[aria-current="page"]::before {
	transform: scaleY(1);
}

/* The Teams panel runs seven deep in a column — keep rows tight. */
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column li.mega-menu-item ul.mega-sub-menu li.mega-menu-item {
	margin: 0;
}

/* --------------------------------------------------------------------------
   7. FOCUS
   -------------------------------------------------------------------------- */
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 a.mega-menu-link:focus-visible,
#mega-menu-wrap-max_mega_menu_3 .mega-menu-toggle button:focus-visible,
#mega-menu-wrap-max_mega_menu_3 button.mega-close:focus-visible {
	outline: 2px solid var(--njp-gold);
	outline-offset: -2px;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   8. MOBILE — the plugin switches over at its 1024px breakpoint
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	#mega-menu-wrap-max_mega_menu_3 .mega-menu-toggle {
		height: 60px;
		background: none;
	}

	#mega-menu-wrap-max_mega_menu_3 .mega-menu-toggle .mega-toggle-animated-inner,
	#mega-menu-wrap-max_mega_menu_3 .mega-menu-toggle .mega-toggle-animated-inner::before,
	#mega-menu-wrap-max_mega_menu_3 .mega-menu-toggle .mega-toggle-animated-inner::after {
		height: 2px;
		background-color: var(--njp-mm-link-on);
	}

	#mega-menu-wrap-max_mega_menu_3 .mega-menu-toggle.mega-menu-open .mega-toggle-animated-inner,
	#mega-menu-wrap-max_mega_menu_3 .mega-menu-toggle.mega-menu-open .mega-toggle-animated-inner::before,
	#mega-menu-wrap-max_mega_menu_3 .mega-menu-toggle.mega-menu-open .mega-toggle-animated-inner::after {
		background-color: var(--njp-gold);
	}

	#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 {
		padding: 6px 0 16px;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
		background: var(--njp-mm-panel);
	}

	/* Stacked, so the bar moves to the left edge — a full-width underline
	   would read as a divider between rows. */
	#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item > a.mega-menu-link {
		padding: 15px 18px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		font-size: 18px;
	}

	#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item > a.mega-menu-link::after {
		top: 10px;
		right: auto;
		bottom: 10px;
		left: 0;
		width: 3px;
		height: auto;
		transform: scaleY(0);
		transform-origin: center;
		transition: transform 0.3s var(--njp-ease-out);
	}

	#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item > a.mega-menu-link:hover::after,
	#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link::after,
	#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-current-menu-item > a.mega-menu-link::after,
	#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-current_page_parent > a.mega-menu-link::after {
		transform: scaleY(1);
	}

	/* Inline on mobile, so drop the card treatment. */
	#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item > ul.mega-sub-menu {
		padding: 12px 18px 18px;
		border-top: 0;
		border-radius: 0;
		background: var(--njp-navy-2);
		box-shadow: none;
	}

	#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item-has-children > a.mega-menu-link,
	#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-has-children) > a.mega-menu-link {
		margin-top: 16px;
		font-size: 17px;
	}

	/* Tapped rows need a bigger target than hovered ones. */
	#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link,
	#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
		padding: 12px 10px;
		font-size: 15.5px;
	}

	#mega-menu-wrap-max_mega_menu_3 button.mega-close {
		color: var(--njp-mm-link-on);
	}
}

/* --------------------------------------------------------------------------
   9. LIGHT HEADER — uncomment if the nav ever moves onto white
   -------------------------------------------------------------------------- */
/*
#mega-menu-wrap-max_mega_menu_3 {
	--njp-mm-panel: #ffffff;
	--njp-mm-link: #041e42;
	--njp-mm-link-on: #0b0f14;
	--njp-mm-head: #0b0f14;
	--njp-mm-sub: #3a4451;
	--njp-mm-hair: #e1e4e8;
}

#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-item > ul.mega-sub-menu {
	border-right: 1px solid #e1e4e8;
	border-bottom: 1px solid #e1e4e8;
	border-left: 1px solid #e1e4e8;
	box-shadow: 0 8px 16px -6px rgba(11, 15, 20, 0.14);
}

#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover {
	background: #f5f6f7;
	color: #0b0f14;
}

#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item-has-children > a.mega-menu-link:hover,
#mega-menu-wrap-max_mega_menu_3 #mega-menu-max_mega_menu_3 li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-has-children) > a.mega-menu-link:hover {
	color: #6b4a00;
}
*/