/* =========================================================================
   Long Beach Pride — site chrome in WordPress
   Element defaults for the chrome components and the structural glue
   between WordPress markup and the generated chrome styles.
   (c) HAUS XXIV, LLC · Licensed to Long Beach Pride
   ========================================================================= */

/* Element defaults (zero specificity, so component rules always win) ----- */

:where(.nav, .sheet, .foot, #subscribe, .hero, .fm, .form-aside, .fm-done, [class*="wp-block-lbp-"], .pt, .skip) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(.nav, .sheet, .foot, #subscribe, .hero, .fm, .form-aside, .fm-done, [class*="wp-block-lbp-"]) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
:where(.nav, .sheet, .foot, #subscribe, .hero, .fm, .form-aside, .fm-done, [class*="wp-block-lbp-"]) :where(ul, ol) { padding: 0; list-style: none; }
:where(.nav, .sheet, .foot, #subscribe, .hero, .fm, .form-aside, .fm-done, [class*="wp-block-lbp-"], .skip) :where(a) { color: inherit; text-decoration: none; }
:where(.nav, .sheet, .foot, #subscribe, .hero, .fm, .form-aside, .fm-done, [class*="wp-block-lbp-"]) :where(img, video, svg) { display: block; max-width: 100%; }
:where(.nav, .sheet, .foot, #subscribe, .hero, .fm, .form-aside, .fm-done, [class*="wp-block-lbp-"]) :where(img) { height: auto; }
:where(.nav, .sheet, .foot, #subscribe, .hero, .fm, .form-aside, .fm-done, [class*="wp-block-lbp-"], .skip) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.nav, .sheet, .foot, #subscribe, .hero, .fm, .form-aside, .fm-done, [class*="wp-block-lbp-"], .skip) :where(button) { cursor: pointer; }

[hidden] { display: none !important; }


/* Template parts --------------------------------------------------------
   The part wrappers generate no box, so the header, menu sheet and footer
   sit directly in the page flow, as in the approved build. This keeps the
   footer's sticky reveal working. */

.lbp-part { display: contents; }

.wp-site-blocks > main,
.wp-site-blocks > .lbp-part + * { margin-block-start: 0; }


/* Footer locked to the bottom ------------------------------------------
   The page column always fills the screen, so on short pages the footer
   rests on the bottom edge. The reveal (body.reveal) still applies. */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.admin-bar .wp-site-blocks {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main { flex: 1 0 auto; }

/* The page always ends on rounded corners before the footer. Clip so a
   full-width last section (photo band, split panel) follows the curve.
   overflow: clip keeps position: sticky working inside the page. */
.wp-site-blocks > main {
	position: relative;
	z-index: 2;
	background: #fff;
	border-radius: 0 0 clamp(28px, 3vw, 56px) clamp(28px, 3vw, 56px);
	overflow: clip;
}
.wp-site-blocks .foot { flex: none; }


/* Space for the fixed bar on pages that do not open on a hero ------------ */

body:not(:has(.hero, #opening, [data-nav-over])) #main { padding-top: var(--nav-h); }


/* Logged-in admin bar ---------------------------------------------------- */

.admin-bar .nav,
.admin-bar .sheet { top: var(--wp-admin--admin-bar--height, 0px); }

@media (max-width: 600px) {
	.admin-bar .nav,
	.admin-bar .sheet { top: 0; }
}


/* Footer notices: compact ------------------------------------------------ */

.foot-legal summary {
	padding-block: 14px;
	font-size: 10.5px;
	letter-spacing: .12em;
	line-height: 1.4;
}

.foot-legal-in {
	font-size: 11.5px;
	line-height: 1.5;
}

.foot-legal-in p + p { margin-top: 8px; }


/* Footer: contact details live under the logo ------------------------------ */

.foot-top { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, .8fr)); }

.foot-reach { margin-top: 24px; }
.foot-reach .foot-ico { gap: 4px; }
.foot-reach .foot-ico li { align-items: center; }
.foot-reach address { font-style: normal; }
.foot-reach address a {
	display: block;
	padding-block: 2px;
	font-size: var(--t-sm);
	line-height: 1.45;
	color: rgba(255, 255, 255, .88);
	overflow-wrap: anywhere;
}
.foot-brand .foot-social { margin-top: 24px; }

@media (max-width: 1100px) {
	.foot-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.foot-top { grid-template-columns: 1fr 1fr; }
}


/* Footer reveal: smooth page shadow ---------------------------------------
   Layered shadows with progressively larger blur and lower opacity, so the
   page edge fades into the footer without a visible band. */

@media (min-width: 900px) {
	body.reveal main {
		box-shadow:
			0 1px 1px rgba(0, 0, 0, .06),
			0 3px 6px rgba(0, 0, 0, .08),
			0 8px 18px rgba(0, 0, 0, .10),
			0 18px 40px rgba(0, 0, 0, .12),
			0 36px 80px rgba(0, 0, 0, .14);
	}
}


/* Footer: no rainbow rule along the bottom edge ---------------------------- */

.foot::after { display: none; }


/* Overscroll: no rubber-band past the page edges --------------------------
   The canvas behind the page matches the footer, so browsers that still
   bounce show the footer color instead of white. */

html {
	overscroll-behavior-y: none;
	background-color: #120E28; /* footer base, so any bounce matches it */
}

body {
	overscroll-behavior-y: none;
	background-color: #fff;
}


/* Footer: one clean gradient -------------------------------------------- */

.foot {
	background: linear-gradient(180deg, #1D1236 0%, #120E28 100%) !important;
}

.foot::before { display: none; }


/* Footer: tighter link rhythm --------------------------------------------- */

.foot-col li { padding-block: 3px; }
.foot-col .foot-h { margin-bottom: 10px; }


/* Page content rhythm ------------------------------------------------------
   Full-width sections sit flush against the hero, each other and the
   subscribe band. Ordinary text content gets section spacing above and
   below, so plain pages still breathe. */

#main > *,
.wp-block-post-content > .alignfull,
.wp-block-post-content > .alignfull + * { margin-block-start: 0; }

.wp-block-post-content.lbp-home { display: contents; } /* home sections sit directly in main */
.wp-block-post-content > :first-child:not(.alignfull) { margin-block-start: var(--wp--preset--spacing--section-s); }
.wp-block-post-content > :last-child:not(.alignfull) { margin-block-end: var(--wp--preset--spacing--section-s); }
.wp-block-post-content.lbp-home > :is(:first-child, :last-child, *) { margin-block: 0; }
.lbp-home .stack3 > * { margin-block: 0; } /* stacked home sections: no block gap between panels */


/* Breadcrumbs: under the hero, right-aligned, hidden on phones ------------
   Sticks directly under the header. --lbp-sticky-top is the header's
   measured bottom edge (it moves with the admin bar); --crumbs-h is the
   trail's height, for components that stick below it. */

.crumbs {
	position: sticky;
	top: var(--lbp-sticky-top, var(--nav-h));
	z-index: 40;
	padding: 14px var(--gut);
	background: #fff;
	border-bottom: 1px solid var(--hair);
	font-size: var(--t-xs);
	line-height: 1.4;
}

.crumbs ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 4px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.crumbs li {
	display: inline-flex;
	align-items: center;
	color: var(--ink-3);
}

.crumbs li + li::before {
	content: "";
	width: 6px;
	height: 6px;
	margin: 0 12px 0 10px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .5;
}

.crumbs a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ink-2);
	text-decoration: none;
	transition: color .2s;
}

.crumbs a:hover {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.crumbs-home {
	width: 15px;
	height: 15px;
	flex: none;
	margin-top: -1px;
}

.crumbs [aria-current="page"] {
	color: var(--ink);
	font-weight: 600;
}

@media (max-width: 700px) {
	.crumbs { display: none; }
}


/* Page transition flags ----------------------------------------------------
   Each flag is one SVG (assets/js/pride-flags.js). Stripes wipe in from the
   left one after another, the emblem settles in after them, and the whole
   flag wipes away on arrival. Stripes overlap by a pixel, so no seams. */

.pt { position: fixed; inset: 0; z-index: 400; pointer-events: none; visibility: hidden; }
.pt.on, .pt.go { visibility: visible; pointer-events: auto; }
.pt svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.pt .r { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); }
.pt .r.v { transform-origin: 50% 0; transform: scaleY(0); }
.pt .e { opacity: 0; }

.pt.go .r { animation: lbpFlagIn .55s cubic-bezier(.76, 0, .24, 1) forwards; animation-delay: calc(var(--i) * 32ms); }
.pt.go .r.v { animation-name: lbpFlagInV; }
.pt.go .e { animation: lbpFlagEmblem .4s cubic-bezier(.2, .7, .1, 1) forwards; animation-delay: calc(var(--n) * 32ms + 260ms); }

.pt.on .r { transform: none; }
.pt.on .e { opacity: 1; }

.pt.out .r { transform-origin: 100% 50%; animation: lbpFlagOut .6s cubic-bezier(.76, 0, .24, 1) forwards; animation-delay: calc(var(--i) * 32ms + 120ms); }
.pt.out .r.v { transform-origin: 50% 100%; animation-name: lbpFlagOutV; }
.pt.out .e { animation: lbpFlagEmblemOut .25s ease forwards; }

@keyframes lbpFlagIn { to { transform: none; } }
@keyframes lbpFlagInV { to { transform: none; } }
@keyframes lbpFlagOut { from { transform: none; } to { transform: scaleX(0); } }
@keyframes lbpFlagOutV { from { transform: none; } to { transform: scaleY(0); } }
@keyframes lbpFlagEmblem { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes lbpFlagEmblemOut { from { opacity: 1; } to { opacity: 0; } }

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

/* -------------------------------------------------------------------------
   Section rhythm
   About a quarter tighter than the approved build's spacing, site-wide.
   ------------------------------------------------------------------------- */

:root {
	--sec: clamp(72px, 8vw, 148px);
	--sec-s: clamp(52px, 5.4vw, 100px);
}


/* -------------------------------------------------------------------------
   Footer legal links
   ------------------------------------------------------------------------- */

.foot-links ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.foot-links a {
	color: rgba(255, 255, 255, .72);
	font-size: 13px;
	text-decoration: none;
	transition: color .25s;
}
.foot-links a:hover,
.foot-links a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------------------
   Page and post copy
   Reading styles for text written in the editor (policies, stories,
   standard pages). Direct children only, so components keep their own.
   ------------------------------------------------------------------------- */

.wp-block-post-content > :where(p, ul, ol) { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.65; }
.wp-block-post-content > :where(h2) {
	margin-block: clamp(36px, 3.4vw, 56px) 14px;
	font-size: clamp(24px, 2.1vw, 34px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.02em;
}
.wp-block-post-content > :where(h3, h4) {
	margin-block: clamp(26px, 2.4vw, 36px) 10px;
	font-size: clamp(19px, 1.45vw, 23px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
}
.wp-block-post-content > :where(p + p, p + ul, p + ol, ul + p, ol + p) { margin-block-start: 1em; }
.wp-block-post-content > :where(ul, ol) { padding-inline-start: 1.25em; }
.wp-block-post-content > :where(ul, ol) > li + li { margin-block-start: .45em; }
.wp-block-post-content > :where(ul) > li::marker { color: var(--accent-ink, #5B2DD8); }
.wp-block-post-content > :where(p, ul, ol, h2, h3, h4) a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wp-block-post-content > :where(p, ul, ol, h2, h3, h4) a:hover { text-decoration-thickness: 2px; }
.wp-block-post-content > :where(p, ul, ol) code { padding: .1em .35em; border-radius: 6px; background: var(--bone, #F3F3F3); font-size: .88em; }
.wp-block-post-content > .wp-block-separator { margin-block: clamp(32px, 3vw, 48px); border: 0; border-top: 1px solid rgba(12, 12, 14, .14); }
.wp-block-post-content > .wp-block-image img { border-radius: var(--r-lg, 24px); }

/* -------------------------------------------------------------------------
   Header utility links
   A small row above the main menu, ending over its last item so it never
   crowds the header button. It takes no height of its own, so the main
   links stay centered on the logo and button.
   ------------------------------------------------------------------------- */

.nav-main { min-width: 0; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; }
.nav-util { height: 0; margin-right: clamp(8px, 1.4vw, 20px); } /* same inset as the main links */
.nav-util ul { display: flex; gap: clamp(14px, 1.3vw, 22px); margin: 0; padding: 0; list-style: none; line-height: 1; transform: translateY(-100%); }
.nav-util a {
	display: inline-block;
	padding-block: 6px; /* 24px tall: the minimum touch target */
	font-size: 12px;
	line-height: 1;
	font-weight: 500;
	letter-spacing: .02em;
	white-space: nowrap;
	opacity: .7;
	transition: opacity .25s;
}
.nav-util a:hover,
.nav-util a:focus-visible,
.nav-util a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
/* Desktop: a little more header height so the utility row and the main
   links each keep full-size, non-overlapping touch targets. */
@media (min-width: 1161px) {
	:root { --nav-h: clamp(80px, 6.4vw, 92px); }
	.nav-main .nav-links .nl { padding-block: 2px; }
	/* Center the utility row and menu as one group: the menu sits a hair
	   below the button's midline, the utility row gets room above. */
	.nav-main:has(.nav-util) { margin-top: 8px; }
}

/* The longer menu needs the menu button a little sooner than the build's 1100px. */
@media (max-width: 1160px) {
	.nav-main { display: none; }
	.menu-btn { display: inline-flex; }
	.nav-cta .btn.line { display: none; }
}


/* -------------------------------------------------------------------------
   Mega menu
   The preview image runs full bleed to the panel's right, top and bottom
   edges and follows whichever link is hovered (menu image, or the linked
   page's featured image). Long columns, like Applications, split in two.
   ------------------------------------------------------------------------- */

.mp-in,
.mp-in:has(.mp-c1) { padding: 0 0 0 var(--gut); align-items: stretch; }
.mp-cols { padding-block: clamp(24px, 2.6vw, 40px) clamp(28px, 3vw, 44px); align-content: start; }
.mp-fig { min-height: 340px; height: 100%; border-radius: 0; }
.mp-col ul:has(> li:nth-child(9)) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(14px, 1.6vw, 28px); }
.mp-cols ul { gap: 0; }
.mp-cols a { padding-block: 8px; }
.mp-cols a span { line-height: 1.35; }
.mp-col ul:has(> li:nth-child(9)) a:not(:has(span:not(:empty))) { padding-block: 6px; } /* compact only when there are no descriptions */
/* Items classed mp-col2 (Appearance › Menus › CSS Classes) form a second column. */
.mp-col ul:has(> li.mp-col2) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; column-gap: clamp(14px, 1.6vw, 28px); }
.mp-col ul:has(> li.mp-col2) > li { grid-column: 1; }
.mp-col ul:has(> li.mp-col2) > li.mp-col2 { grid-column: 2; }

/* Utility row dividers: a short hairline between links */
.nav-util ul { gap: 0; }
.nav-util li { display: flex; align-items: center; }
.nav-util li + li::before {
	content: "";
	width: 1px;
	height: 11px;
	margin-inline: clamp(10px, 1vw, 14px);
	background: currentColor;
	opacity: .3;
}

/* Mega menu columns: more air between columns, and a wider Applications
   column (it holds two lists) beside a narrower Take Part column. */
.mp-in,
.mp-in:has(.mp-c1) { grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); }
.mp-cols { column-gap: clamp(28px, 3vw, 52px); }
.mp-cols:has(.mp-col2) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); }
.mp-col ul:has(> li.mp-col2) {
	display: block;
	columns: 2;
	column-gap: clamp(20px, 2.2vw, 36px);
}
.mp-col ul:has(> li.mp-col2) > li { break-inside: avoid; }
.mp-col ul:has(> li.mp-col2) { column-fill: balance; } /* festival list first, then Long Beach Pride's own, split evenly across two columns */
.mp-cols a b,
.mp-cols a span { white-space: normal; overflow-wrap: anywhere; }
.mp-cols a { padding-inline: 12px; }
.mp-col ul:has(> li.mp-col2) a span { font-size: 12.5px; line-height: 1.35; } /* lighter descriptions in the Applications lists */

/* -------------------------------------------------------------------------
   Phones
   Built for one hand: full-width actions, 44px touch targets, readable
   small print, a shorter page-hero photo and a footer that folds away.
   ------------------------------------------------------------------------- */

@media (max-width: 860px) {
	/* Page hero: the headline leads, the photo supports it */
	.hero.hero-split,
	.hero.hero-split.short { grid-template-rows: auto clamp(190px, 28svh, 260px); }
}

@media (max-width: 700px) {
	/* Small print floor on phones */
	.bn-tag,
	.bn-dt small,
	.nw-meta span,
	.so-follow,
	.pd-credit-l { font-size: 12px !important; }

	/* Text links that stand alone get a full touch target */
	a.link { display: inline-flex; align-items: center; min-height: 44px; }

	/* Body copy wraps naturally in a narrow column; headings stay balanced */
	p, li, .lead, blockquote, figcaption { text-wrap-style: auto !important; }

	/* Type floor for small labels and print */
	.kicker,
	.mm-gh { font-size: 12px; letter-spacing: .14em; }
	.sb-consent,
	.sb-consent a { font-size: 12.5px; line-height: 1.55; }

	/* Forms: 16px fields so iOS never zooms on focus */
	input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
	select,
	textarea { font-size: 16px !important; }

	/* Footer: contact rows and links sized for the thumb */
	.foot { padding-top: 48px; }
	.foot-top { grid-template-columns: 1fr !important; gap: 0; }
	.foot-top > :first-child { margin-bottom: 18px; }
	.foot-ico li { min-height: 44px; display: flex; align-items: center; gap: 12px; }
	#contact .ul-w { display: flex; align-items: center; }
	#contact .ul-w > a.ul { display: inline-flex !important; align-items: center; min-height: 44px; font-size: 15px; }
	.foot .foot-brand > a { display: inline-flex; align-items: center; min-height: 44px; }
	.foot-social { margin-top: 10px; gap: 12px; }
	.foot-social a { width: 48px; height: 48px; }

	.foot-col { border-top: 1px solid rgba(255, 255, 255, .12); }
	.foot-col:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, .12); }
	.foot-col details > summary.foot-h {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 56px;
		margin: 0;
		cursor: pointer;
		list-style: none;
	}
	.foot-col summary::-webkit-details-marker { display: none; }
	.foot-col summary svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
	.foot-col details[open] summary svg { transform: rotate(45deg); }
	.foot-col ul { padding-bottom: 12px; }
	.foot-col li a.ul { display: flex; align-items: center; min-height: 44px; font-size: 16px; }

	.foot-legal summary { min-height: 56px; }
	.foot-legal-in,
	.foot-legal-in p,
	.foot-legal-in a { font-size: 13px; line-height: 1.6; }

	.foot-bar { gap: 14px; }
	.foot-bar > p:first-child { font-size: 12.5px; }
	.foot-links ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
	.foot-links li:nth-child(4) { grid-column: 1 / -1; }
	.foot-links a { display: flex; align-items: center; min-height: 44px; font-size: 14px; }
	.foot-bar .haus,
	.foot-bar .haus a { font-size: 11px; line-height: 1.6; }

	/* Desktop never folds: the summary is just a heading there */
}

@media (min-width: 701px) {
	.foot-col summary.foot-h { pointer-events: none; list-style: none; }
	.foot-col summary::-webkit-details-marker { display: none; }
	.foot-col summary svg { display: none; }
}

@media (max-width: 560px) {
	/* Actions: full-width buttons, primary first */
	.btns { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
	.btns > .btn { width: 100%; justify-content: center; }
	.btns > .btn span { white-space: normal; }
}

/* Editor previews: scroll reveals never fire there, so show content as placed */
.editor-styles-wrapper .rv,
.editor-styles-wrapper .wipe { opacity: 1 !important; transform: none !important; clip-path: none !important; }

/* -------------------------------------------------------------------------
   Eyebrow and headline rhythm (site-wide)
   Eyebrows sit 20px above section and page headlines and 10px above
   headlines in cards; headlines sit close to their body text (8–14px).
   Eyebrows are block-level so no inline line box adds stray space.
   ------------------------------------------------------------------------- */

.kicker,
.pd-k { display: flex; width: fit-content; max-width: 100%; margin-bottom: 0 !important; }
:is(.sb-copy, .since .statement, [style*="text-align:center"]) > .kicker { margin-inline: auto; }

/* Section and page headlines */
:is(.kicker, .pd-k) + :is(h1, h2, .d-hero, .d-1, .d-2, .d-3, .cv-h, .gvp-name) { margin-top: 20px !important; }

/* Card headlines */
:is(.ym-k, .evc-host, .bn-tag, .fdr-mem, .gvp-k, .nw-meta) + :is(h3, h4, .ym-t, .fdr-name, .gvp-name),
:is(.gi-panel, .card, .evc, .bn, .nw-row, .nw-lead) .kicker + :is(h3, h4) { margin-top: 10px !important; }
:is(.ym-k, .evc-host, .bn-tag, .fdr-mem, .gvp-k, .nw-meta) { margin-bottom: 0 !important; }

/* Headline to body */
:is(h1, h2, .d-hero, .d-1, .d-2, .gvp-name) + :is(p.lead, p.body, p.gvp-lead, p:not([class])) { margin-top: 12px !important; }
:is(.gi-panel, .evc-body, .bn-body, .fdr-body, .pledges li, .pd-copy, .cv-copy, .nw-lead) :is(h3, h4) + p { margin-top: 8px !important; }

/* Rhythm, part two: layouts with their own gap or more specific rules */
.hero .hero-row .kicker + :is(h1, .d-hero) { margin-top: 20px !important; }
html body section .ym-b .ym-k + .ym-t,
html body section .gi-panel .kicker + h3 { margin-top: 10px !important; }

/* Flex columns: the gap becomes margins so the rhythm is exact */
:is(.bd-head, .so-panel, .bn-body, .nw-lead) { row-gap: 0 !important; }
:is(.bd-head, .so-panel, .bn-body, .nw-lead) > * + * { margin-top: 22px; }
.bn-body > * + *,
.nw-lead > * + * { margin-top: 10px; }
.nw-lead > .ph + * { margin-top: 16px; }
html body section :is(.bd-head, .so-panel) .kicker + h2 { margin-top: 20px !important; }
html body section :is(.bd-head, .so-panel) h2 + p { margin-top: 12px !important; }
.nw-lead h3 + p { margin-top: 8px !important; }
html body section :is(.bd-head, .so-panel) .kicker { margin-bottom: 0 !important; }
html body section :is(.bn-body .bn-tag + h4, .bd-glass .bn-tag + h3, .nw-row .nw-meta + h4) { margin-top: 10px !important; }
html body section :is(.bn-tag, .nw-meta) { margin-bottom: 0 !important; }
html body section .bd-glass { row-gap: 0 !important; }
html body section .bd-glass > * + * { margin-top: 14px; }
html body #news .nw-row .nw-meta + h4 { margin-top: 10px !important; }
html body #news .nw-row .nw-meta { margin-bottom: 10px !important; } /* the headline is inline (hover underline), so space it from the label */

/* Scroll cue: the running line keeps the track's rounded ends */
#opening .cue::after,
.hero .cue::after { border-radius: inherit; }

/* Skip link: fully off-canvas until focused, so nothing (the fixed header
   included) ever overlaps it as a tiny, half-hidden target */
.skip:not(:focus):not(:focus-visible) {
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
}

/* Landing pages (no footer) end square: the page is the whole window */
body.reveal main.lbp-landing,
.wp-site-blocks > main.lbp-landing { border-radius: 0 !important; box-shadow: none !important; }

/* Two-line logo (2026): sized by height in the bar, a touch smaller in the footer */
.foot-brand img.foot-logo-h { width: clamp(170px, 15vw, 240px) !important; }

/* Header balance: the utility links ride above the main links, so the pair
   drops 8px to center on the logo and the button */
@media (min-width: 1161px) {
	html body .nav .nav-main { margin-top: 24px !important; }
}

/* Mega menu: 8px between list rows (grid lists and the two-column list) */
.mp-cols ul { row-gap: 8px; }
.mp-col ul:has(> li.mp-col2) > li { padding-bottom: 8px; }

/* Tablets keep the desktop two-line logo; only phones switch to stacked */
@media (min-width: 701px) and (max-width: 1100px) {
	.nav .logo { width: clamp(150px, 19vw, 200px); height: calc(var(--nav-h) - 26px); }
	.nav .logo .lh { display: block; }
	.nav .logo .ls { display: none; }
}


/* ==========================================================================
   Prism wash scrolls with the page. The generated sheets pin it to the
   window (background-attachment: fixed) on desktop, which makes Chrome
   repaint every tinted section on each scroll frame while the header,
   breadcrumbs and footer move on their own layers, so sections tear and
   flicker against them. Same wash, sized to each section instead.
   ========================================================================== */

html body :is(.sec.bone, .sec-s.bone, .so, #subscribe) {
	background-attachment: scroll !important;
	background-size: 100% 100% !important;
}


/* ==========================================================================
   Reveals never hide content on their own. The generated sheets start every
   .rv at opacity 0 until chrome.js runs, so on a cold load (hard refresh,
   new browser) whole sections sat blank for seconds. Now .rv is visible
   until chrome.js adds .rv-on to <html>, and it only hides blocks that are
   still below the fold at that moment. .rv-init stops the hide from
   animating.
   ========================================================================== */

html:not(.rv-on) .rv { opacity: 1; transform: none; }
html.rv-init .rv { transition: none !important; }


/* ==========================================================================
   Mega menu lists read down, not across. A plain list stays in one column
   on the left; only a long one (8+ links) spills into a second column, and
   it fills the left column first, top to bottom, before the right.
   ========================================================================== */

.mp-cols.mp-c1 ul { grid-template-columns: minmax(0, 1fr); }
.mp-col ul:has(> li:nth-child(8)):not(:has(> li.mp-col2)) {
	display: block;
	columns: 2;
	column-gap: clamp(20px, 2.2vw, 36px);
	column-fill: balance;
}
.mp-col ul:has(> li:nth-child(8)) > li { break-inside: avoid; padding-bottom: 8px; }

/* Get Involved mega panel (the one with the Member Applications sub-list):
   titles only, tighter rhythm, so the panel is about half as tall. */
.mp:has(.mp-h-more) .mp-cols { padding-block: 22px 26px; }
.mp:has(.mp-h-more) .mp-cols a span { display: none; }
.mp:has(.mp-h-more) .mp-cols ul, .mp .mp-col .mp-h.mp-h-more + ul { gap: 0 !important; } /* beats the inline header rule for the sub-list */
.mp:has(.mp-h-more) .mp-col ul > li { padding-bottom: 0; }
.mp:has(.mp-h-more) .mp-cols a { padding-block: 6px; }
.mp:has(.mp-h-more) .mp-h { margin-bottom: 4px; }
.mp:has(.mp-h-more) .mp-h-more { margin-top: 18px; }
.mp:has(.mp-h-more) .mp-fig { min-height: 0; }

/* Mega menu links: no gray chip on hover/focus/current page; the title and
   arrow turn purple instead (#6D28D9, 7:1 on white). */
.mp-cols a:hover,
.mp-cols a:focus-visible,
.mp-cols a[aria-current="page"] { background: none; }
.mp-cols a:hover b,
.mp-cols a:focus-visible b,
.mp-cols a[aria-current="page"] b,
.mp-cols a:hover svg,
.mp-cols a:focus-visible svg { color: #6D28D9; }

/* ==========================================================================
   Styled dropdown, site wide (assets/js/lbp-select.js)
   ========================================================================== */
.lbp-sel { position: relative; display: inline-flex; }
.lbp-sel.is-styled > .lbp-sel-l,
.lbp-sel.is-styled > select { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; pointer-events: none; }
.lbp-dd { position: relative; }
.lbp-dd-btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; max-width: 100%; padding: 0 16px 0 18px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 1px 0 rgba(12, 12, 14, .04), inset 0 0 0 1px rgba(12, 12, 14, .08); font: inherit; color: var(--ink); cursor: pointer; transition: box-shadow .2s; }
.lbp-dd-btn:hover { box-shadow: 0 1px 0 rgba(12, 12, 14, .04), inset 0 0 0 1px rgba(12, 12, 14, .18); }
.lbp-dd-btn:focus-visible { outline: 2px solid var(--focus, #004DFF); outline-offset: 2px; }
.lbp-dd-l { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.lbp-dd-i, .lbp-dd-oi { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; color: var(--c, var(--accent-ink, #6D28D9)); }
.lbp-dd-i[hidden] { display: none; }
.lbp-dd-i svg, .lbp-dd-oi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lbp-dd-v { overflow: hidden; font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.lbp-dd-chev { width: 7px; height: 7px; margin: -3px 2px 0 4px; flex: none; border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s; }
.lbp-dd.is-open .lbp-dd-chev { margin-top: 3px; transform: rotate(-135deg); }
.lbp-dd-list { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; min-width: 100%; width: max-content; max-width: min(420px, 86vw); max-height: 380px; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; list-style: none; border-radius: 16px; background: #fff; box-shadow: 0 24px 60px -18px rgba(28, 16, 52, .32), 0 0 0 1px rgba(12, 12, 14, .07); outline: none; }
.lbp-dd-list[hidden] { display: none; }
.lbp-dd-list li { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 36px 10px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--ink-2); cursor: pointer; font-variant-numeric: tabular-nums; }
.lbp-dd-ot { flex: 1; }
.lbp-dd-oc { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.lbp-dd-list li.is-active { background: var(--bone); color: var(--ink); }
.lbp-dd-list li[aria-selected="true"] { font-weight: 600; color: var(--accent-ink, #6D28D9); }
.lbp-dd-list li[aria-selected="true"]::after { content: ""; position: absolute; right: 16px; top: 50%; width: 5px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-65%) rotate(45deg); }
@media (max-width: 760px) {
	.lbp-sel.is-styled, .lbp-sel .lbp-dd, .lbp-sel .lbp-dd-btn { width: 100%; }
	.lbp-dd-chev { margin-left: auto; }
	.lbp-dd-list { width: 100%; max-width: none; }
}

/* ==========================================================================
   Subpage heroes (owner, Nov 2026): the text panel on the left is a solid
   dark purple gradient, not frosted glass over a blurred copy of the photo.
   ========================================================================== */
html body .hero.hero-split .hero-in,
html body .p365-hero .hero-in {
	background: linear-gradient(160deg, #3B0F7A 0%, #24094F 55%, #150530 100%) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}