/*
 * USCNL microsite color/header/footer overrides.
 * Loaded ONLY when is_page_template('tmpl-uscnl.php') is true (see functions.php).
 * Everything here is scoped under body.uscnl-site so it can never affect default ICNL pages.
 * Fonts intentionally untouched (Montserrat/Lato, inherited from style-icnl.css) per USCNL request.
 */

body.uscnl-site {
	--uscnl-navy: #12336b;
	--uscnl-sage: #5b7a78;
	--uscnl-brick: #8a1e1b;
	--uscnl-cream: #f7f5f2;
	/* Deepened/WCAG-AA variant of --uscnl-cream, used for the "Status:
	   Pending" badge (see the State/Reset button section further down) -
	   given its own token for consistency with the other named colors. */
	--uscnl-cream-dark: #6f6044;
}

/* ---------- Full-bleed content blocks ---------- */

/* .main (the container the_content() renders into) has a hard
   max-width:1100px + margin:auto in the theme's own CSS. Full-bleed hero
   sections like the ACF "Group with Bkgd" block (app-block-group-background)
   don't use Gutenberg's wide/full alignment, so they just inherit that cap
   instead of spanning the viewport. This is the standard "break out of a
   centered container" technique: size to the viewport width and pull back
   out to the edges with negative margins.
   Important: the scrollbar-safety clip must NOT go on .main itself -
   overflow set there clips relative to .main's OWN (narrower) box, which
   cuts the hero's escape right back down to 1100px, defeating the whole
   trick. body has no max-width, so clipping there only catches the ~1px
   100vw-includes-the-scrollbar quirk without clipping anything escaping
   a narrower ancestor. */
body.uscnl-site {
	overflow-x: clip;
}

body.uscnl-site .main .app-block-group-background {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* USCNL equivalent of the theme's own ".keyresources" interstitial pattern
   (see resources/scss/_main.scss - "Key Resources Interstitial Style"),
   used to wrap content like the "U.S. Program Resources" [pt_view] listing.
   Same full-bleed technique and structure as the original, just swapping
   its ICNL-teal Publications-pattern background for the USCNL-recolored
   triangle grid pattern. Apply by adding "uscnl-keyresources" as an
   Additional CSS Class on the wrapping Group block in the editor. */
body.uscnl-site .uscnl-keyresources {
	background-color: var(--uscnl-cream);
	width: 100vw;
	margin: auto;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding-top: 2rem;
	padding-bottom: 2rem;
	padding-left: 16px;
	padding-right: 16px;
}

body.uscnl-site .uscnl-keyresources .shell {
	padding-bottom: 0;
}

/* Was flatly zeroed, which affected both the "Highlights" and "Key
   Resources" h2 (both live inside .uscnl-keyresources .shell), leaving a
   literal 0px gap before the slider/cards below - restored to a real gap. */
body.uscnl-site .uscnl-keyresources .shell h2 {
	margin-bottom: 1rem;
}

/* ---------- Header ---------- */

body.uscnl-site .uscnl-header {
	background: var(--uscnl-navy);
}

body.uscnl-site .uscnl-header .uscnl-logo img {
	height: 48px;
	width: auto;
	display: block;
}

/* .desktop-header's flex row stretches its columns full-height, and the nav
   column centers itself via its own .uscnl-nav-list align-items:center, but
   the logo column has no equivalent rule, so the logo sits flush at the top
   instead of centered. */
body.uscnl-site .uscnl-header .uscnl-logo {
	display: flex;
	align-items: center;
}

/* The theme's own .header2 rule forces "nav" elements inside .mobile-header
   to min-height:400px + overflow:hidden (built for its bespoke sliding-panel
   mobile menu). Our accordion-style mobile menu needs to grow/shrink freely. */
body.uscnl-site .uscnl-header .mobile-header nav {
	min-height: 0;
	overflow: visible;
}

/* .mobile-header's shared "padding: 28px 0px 0px" (asymmetric, top-only)
   pushes the logo+toggle row toward the bottom of the header bar instead of
   letting its own align-items:center vertically center it. Symmetric
   vertical padding here (unlike the old asymmetric one) still centers
   correctly while giving the navy header some breathing room around the
   logo, per Jeff's feedback. */
body.uscnl-site .mobile-header {
	padding: 14px 0 !important;
}

/* ---------- Nav list (wp_nav_menu output: ul.uscnl-nav-list > li > a, nested ul.sub-menu) ---------- */

body.uscnl-site .uscnl-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

/* Explicit margin reset: the US Protest Law Tracker's own stylesheet
   (usprotestlawtracker/assets/css/icnl-v1.6.css) has an unscoped
   "ul > li { margin: 10px; }" rule that loads sitewide on any post/page
   embedding the [getBubblesData] shortcode (e.g. the "Analysis of US
   Anti-Protest Bills" post) and otherwise bleeds into this nav, adding
   10px margin-left to every item and pushing "Donate" onto its own line. */
body.uscnl-site .uscnl-nav-list li {
	position: relative;
	margin: 0;
}

/* "About" (first nav item) sits ~10px lower than the rest: the shared
   global stylesheet's ".header2 .desktop-header nav ul li + li" rule zeroes
   top margin on every li except the first (li+li requires a preceding
   sibling), while a legacy base rule still gives "About" a 10px top margin
   it never loses. */
body.uscnl-site .uscnl-header .uscnl-nav-list > li:first-child {
	margin-top: 0 !important;
}

body.uscnl-site .uscnl-nav-list > li > a {
	display: block;
	padding: 10px 14px;
	color: var(--uscnl-cream);
	font-family: Montserrat, sans-serif;
	/* Matches icnl.org's own main nav font-size (12px) - this was
	   previously 14px, which is why the USCNL nav read larger even
	   though the rest of the font styling matched. */
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: none;
}

/* Active/current-page state intentionally does NOT get the hover underline
   treatment - icnl.org's own main nav doesn't mark the current page this
   way either, so we only apply it on actual hover/open interaction. */
body.uscnl-site .uscnl-nav-list > li:hover > a,
body.uscnl-site .uscnl-nav-list > li.uscnl-open > a {
	color: var(--uscnl-cream);
	box-shadow: inset 0 -2px 0 var(--uscnl-brick);
}

/* Top-level main nav hover background: teal → sage (WCAG AA verified: white
   text on sage = ~4.67:1). Overrides the shared style-icnl.css rule
   ".header2 .desktop-header nav ul li a:hover { background: #348b9f; }".
   Restricted to direct children only (nav > ul > li > a) - the original
   descendant selector (nav ul li a:hover) also matched secondary/tertiary
   submenu links, and since this rule carries !important while the submenu's
   own cream/brick hover rule below doesn't, sage was winning there too
   regardless of the submenu selector's specificity. */
body.uscnl-site .header2 .desktop-header nav > ul > li > a:hover {
	background: var(--uscnl-sage) !important;
}

/* Chevron indicators on items with children, matching the down/right-arrow
   convention the main ICNL nav uses. Drawn with plain CSS borders rather
   than an icon font: the theme's compiled style-icnl.css only bundles a
   hand-picked subset of FontAwesome glyphs (fa-angle-right,
   fa-chevron-circle-down, fa-plus-circle, fa-share) and doesn't include
   fa-chevron-down/fa-chevron-right, so an <i class="fa fa-chevron-...">
   would render as an invisible empty box. */
body.uscnl-site .uscnl-nav-list > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	margin-bottom: 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	vertical-align: middle;
}

body.uscnl-site .uscnl-nav-list .sub-menu li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	vertical-align: middle;
}

/* Donate: styled as a solid button, same pattern as ICNL's own "Donate to ICNL"
   pill in the header nav, in USCNL colors. Assumes Donate stays the last
   top-level item (matches the intended menu tree). */
body.uscnl-site .uscnl-nav-list > li:last-child > a {
	background: var(--uscnl-brick);
	color: #ffffff;
	border-radius: 999px;
	padding: 8px 20px;
	box-shadow: none;
}

body.uscnl-site .uscnl-nav-list > li:last-child:hover > a,
body.uscnl-site .uscnl-nav-list > li:last-child.uscnl-open > a {
	/* background here is actually overridden by the higher-priority
	   ".header2 .desktop-header nav > ul > li > a:hover { background:
	   var(--uscnl-sage) !important; }" rule elsewhere in this file - this
	   declaration is dead but left as documentation of the intended
	   fallback if that rule ever changes. */
	background: var(--uscnl-sage);
	color: #ffffff;
	box-shadow: none;
}

/* Sub-menus: hidden by default, revealed on hover (desktop, via JS-added
   .uscnl-open class which also drives the mobile accordion below).
   !important is required here: the theme's own
   ".header2 .desktop-header nav ul ul { display: flex !important; }"
   (style-icnl.css, built for its own hover-only nav) otherwise always wins
   over our display:none regardless of selector specificity. */
body.uscnl-site .uscnl-nav-list .sub-menu {
	display: none !important;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.uscnl-site .uscnl-nav-list li.uscnl-open > .sub-menu {
	display: block !important;
}

/* Force full-width explicitly rather than rely on default block behavior:
   the theme's own list/nav CSS elsewhere constrains <li>/<a> to content
   width (float or inline-block), which was leaving the hover background
   wrapping only the text instead of the full dropdown row. */
body.uscnl-site .uscnl-nav-list .sub-menu li {
	display: block;
	width: 100%;
	float: none;
	/* A legacy "margin: 10px 0 10px 10px" (left margin, no right margin) was
	   pushing this 240px-wide, width:100% li 10px to the right within its
	   240px-wide parent .sub-menu, with nothing on the right to compensate -
	   so its right edge stuck out 10px past the dropdown's own boundary.
	   Margin isn't part of the box that overflow:hidden on the <a> can
	   clip, so this needed its own explicit reset. Same root cause as the
	   header/footer nav margin fixes elsewhere in this file. */
	margin: 0 !important;
}

body.uscnl-site .uscnl-nav-list .sub-menu a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 16px;
	color: var(--uscnl-navy);
	font-family: Montserrat, sans-serif;
	/* Matches icnl.org's own submenu font-size (12px); was 13px. */
	font-size: 12px;
	text-decoration: none;
	white-space: nowrap;
	/* The hover background was rendering ~16px (exactly the side padding)
	   past the link's own right edge - clipped here rather than on .sub-menu
	   or .sub-menu li, since those also contain nested flyout submenus
	   (positioned left:100%, intentionally outside their parent's box) that
	   overflow:hidden at that level would have broken. */
	overflow: hidden;
}

body.uscnl-site .uscnl-nav-list .sub-menu a:hover {
	background: var(--uscnl-cream);
	color: var(--uscnl-brick);
}

/* Desktop (matches the theme's own >768px breakpoint): flyout dropdowns */
@media (min-width: 769px) {
	body.uscnl-site .uscnl-nav-list > li:hover > .sub-menu {
		display: block !important;
	}

	/* Tertiary (3rd level) items: the rule above only handles hovering a
	   TOP-level li revealing its direct child - hovering a 2nd-level li
	   (e.g. "National Security Laws", "Trackers") never revealed ITS OWN
	   child sub-menu. This is what was missing. */
	body.uscnl-site .uscnl-nav-list .sub-menu li:hover > .sub-menu {
		display: block !important;
	}

	body.uscnl-site .uscnl-nav-list .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 240px;
		background: #ffffff;
		border-top: 3px solid var(--uscnl-brick);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
		z-index: 50;
	}

	body.uscnl-site .uscnl-nav-list .sub-menu .sub-menu {
		top: 0;
		left: 100%;
		border-top: none;
		border-left: 3px solid var(--uscnl-brick);
	}
}

/* Mobile: plain accordion, indented per level, no flyout positioning */
@media (max-width: 768px) {
	body.uscnl-site .uscnl-nav-list {
		display: block;
	}

	body.uscnl-site .uscnl-nav-list .sub-menu a {
		padding-left: 32px;
		color: var(--uscnl-cream);
	}

	body.uscnl-site .uscnl-nav-list .sub-menu .sub-menu a {
		padding-left: 48px;
	}

	/* The Donate pill is display:block on mobile (full-width bar, not the
	   desktop pill shape), so it was sitting flush against the very bottom
	   edge of the slide-down panel with no breathing room before the white
	   page content beneath it. */
	body.uscnl-site .mobile-navigation {
		padding-bottom: 24px;
	}

	/* The Donate <a> has no explicit width, so as a block-level element it
	   naturally spans edge-to-edge (0 to the full viewport width) since
	   there's no horizontal margin to shrink it - the colored background
	   fills that whole box regardless of padding (padding only moves the
	   text, not the fill). The huge desktop border-radius:999px was
	   partially masking this by rounding the box's fill away near the
	   corners; a smaller radius alone just made the full-bleed span more
	   visible rather than fixing it. Real fix: give it side margin so it's
	   a proper inset button like the rest of the menu, then restore the
	   pill shape now that it has room to show its curve. */
	body.uscnl-site .uscnl-nav-list > li:last-child > a {
		margin: 4px 16px;
		border-radius: 999px;
	}
}

/* Structural rules for the mobile hamburger button. This button
   deliberately does NOT use the theme's own .da-bugah class (see the JS
   comment in header-uscnl.php for why - its sitewide click handler was
   fighting with ours), so it also can't inherit .da-bugah's own CSS
   (including the teal background-color:#016e87!important it hardcodes).
   These rules recreate the same hamburger box/bars, values matched to
   .da-bugah's compiled CSS, but with a transparent background and cream
   bars instead. */
body.uscnl-site .uscnl-header .uscnl-toggle-menu {
	display: block;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0 !important;
	width: 38px;
	height: 38px;
	font-size: 0;
	text-indent: -9999px;
	appearance: none;
	box-shadow: none;
	border: none;
	border-radius: 0;
	cursor: pointer;
	background: transparent;
}

body.uscnl-site .uscnl-header .uscnl-toggle-menu span {
	display: block;
	position: absolute;
	top: 18px;
	left: 6px;
	right: 6px;
	height: 2px;
	background: var(--uscnl-cream);
}

body.uscnl-site .uscnl-header .uscnl-toggle-menu span::before,
body.uscnl-site .uscnl-header .uscnl-toggle-menu span::after {
	position: absolute;
	display: block;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--uscnl-cream);
	content: "";
	transition: top 0.1s, transform 0.1s, bottom 0.1s;
}

body.uscnl-site .uscnl-header .uscnl-toggle-menu span::before {
	top: -6px;
}

body.uscnl-site .uscnl-header .uscnl-toggle-menu span::after {
	bottom: -6px;
}

body.uscnl-site .uscnl-header .uscnl-toggle-menu.is-active span {
	background: none;
}

body.uscnl-site .uscnl-header .uscnl-toggle-menu.is-active span::before {
	top: 0;
	transform: rotate(45deg);
}

body.uscnl-site .uscnl-header .uscnl-toggle-menu.is-active span::after {
	bottom: 0;
	transform: rotate(-45deg);
}

body.uscnl-site .uscnl-header .faux-label {
	color: var(--uscnl-cream);
}

/* Mobile: the toggle button sits position:absolute;top:0;right:0 inside the
   same flex cell as the logo (theme's own .header2 .mobile-header .cell
   layout), so it doesn't push the logo over - it just overlaps whatever
   renders under it. ICNL's own (narrower/shorter) mobile logo never reached
   that corner; USCNL's wider horizontal lockup does. Reserve clearance and
   shrink the mobile logo slightly so it stops short of the button. */
@media (max-width: 768px) {
	body.uscnl-site .uscnl-header .mobile-header .uscnl-logo {
		padding-right: 56px;
		box-sizing: border-box;
	}

	body.uscnl-site .uscnl-header .mobile-header .uscnl-logo img {
		/* ~25% smaller than the earlier 36px, per Jeff's feedback */
		height: 27px;
		max-width: 100%;
	}
}

/* Mobile panel background follows the header color for continuity */
body.uscnl-site .uscnl-header .mobile-navigation,
body.uscnl-site .uscnl-header .panel {
	background: var(--uscnl-navy);
}

body.uscnl-site .uscnl-header .mobile-navigation a {
	color: var(--uscnl-cream);
}

/* ---------- Content wrapper (mobile margins, global fix) ----------
   tmpl-uscnl.php echoes the_content() with no wrapping element at all, so
   whether a page gets left/right breathing room on mobile depends entirely
   on individual blocks happening to carry the ".shell" class themselves.
   Adding ".shell" per-block (as tried manually) works but double-pads any
   block that already provides its own spacing, producing inconsistent
   margins - so instead this pads the single wrapper tmpl-uscnl.php now
   emits around all page content, and zeroes any real ".shell" nested
   inside it (same "nested .shell" convention style-icnl.css already uses
   sitewide at ".shell .shell") so nothing doubles up. */
@media (max-width: 1024px) {
	body.uscnl-site .uscnl-content-wrap {
		padding-left: 16px;
		padding-right: 16px;
	}

	body.uscnl-site .uscnl-content-wrap .shell {
		padding-left: 0;
		padding-right: 0;
	}

	/* Exception: a full-bleed ".app-block-group-background" hero (see
	   "Full-bleed content blocks" above) escapes .uscnl-content-wrap's
	   padding entirely via its own 100vw/negative-margin trick - it has
	   zero padding of its own by design, so its inner .shell is the ONLY
	   thing insetting the actual title/text from the screen edge and must
	   keep its padding rather than being zeroed like a normal nested
	   .shell would be. Higher specificity (3 classes) wins over the
	   zeroing rule just above. */
	body.uscnl-site .uscnl-content-wrap .app-block-group-background .shell {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ---------- Masthead (title + breadcrumbs, optional banner image) ---------- */

/* H1 spacing (client feedback): title sat too close under the header and
   had too much dead space below it. Above: masthead's own top padding
   bumped up for clearer separation from the header. Below: the sitewide
   "main, .main { padding-top: 40px; }" rule (dist/css/style-icnl.css) was
   stacking on top of the masthead's own bottom padding + the h1's margin-
   bottom, adding up to ~72px before content started - USCNL's masthead
   already provides its own spacing, so that rule is zeroed out here,
   leaving a consistent ~32px gap. Applies to both the plain and
   banner-image (#mastheadimg) masthead variants, since both sit in front
   of the same <main>. */
body.uscnl-site .uscnl-masthead {
	padding-top: 2rem;
	padding-bottom: 1rem;
}

/* Mobile: on the standalone tracker (usprotestlawtracker/inc-theme-header-
   uscnl.php), .uscnl-masthead sits inside a Foundation ".grid-x.grid-
   margin-x" row, which applies a negative left/right margin expecting its
   children to be Foundation ".cell" elements with matching compensating
   padding. The masthead has no such padding (it's the WP theme's own
   ".shell" component, not a Foundation cell), so that negative margin was
   just bleeding through and eating into ".shell"'s own 16px mobile
   padding, leaving only ~6px before the title. Desktop is unaffected
   (".shell" centers itself via margin:auto there, which self-corrects for
   a symmetric parent-width change) - zeroing the row's margin outright is
   simplest and safe at any breakpoint. Scoped with :has() so only the row
   actually wrapping the masthead is affected, not every Foundation grid
   row on the tracker's other pages (e.g. the mobile nav row in the same
   header). tmpl-uscnl.php's masthead (the regular WP page template) has no
   such wrapping row at all, so this rule never matches there. */
body.uscnl-site .grid-x.grid-margin-x:has(> .uscnl-masthead) {
	margin-left: 0;
	margin-right: 0;
}

body.uscnl-site main,
body.uscnl-site .main {
	padding-top: 0;
}

body.uscnl-site .uscnl-masthead h1 {
	color: var(--uscnl-navy);
	margin-top: 0;
	/* Normalize to a single consistent size/weight across pages - some
	   headline instances were rendering larger than others despite
	   sharing this same rule (content-level inline/legacy styles). */
	font-size: 42px;
	font-weight: 700;
}

/* Intro/lead paragraph directly under the masthead - matches the same
   .intro/p.intro convention already established site-wide on icnl.org
   (see resources/scss/_main.scss), which is what
   icnl.org/about-us/our-organization uses for its own lead paragraph.
   Applied here explicitly so it stays the same size across every USCNL
   page instead of drifting depending on whatever a given block defaults to. */
body.uscnl-site .uscnl-masthead p,
body.uscnl-site .main .intro,
body.uscnl-site .main p.intro {
	font-family: Lato, sans-serif;
	font-weight: 500;
	font-size: 21px;
	letter-spacing: 0;
}

/* US Protest Law Tracker (page-id-7674) specifically: the enlarged intro
   size felt too heavy on a page that's already dense (map, stats, filters,
   hundreds of entries) and doesn't work well on mobile's narrow column -
   reverted to standard body text size here only, other USCNL pages keep
   the 21px lead-paragraph treatment. */
body.page-id-7674.uscnl-site .uscnl-masthead p {
	font-family: Lato, sans-serif;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: normal;
}

/* Breadcrumbs are a <p> inside .uscnl-masthead, so they were unintentionally
   picking up the 21px intro-paragraph size above. Reset to match icnl.org's
   16px breadcrumb sizing (which comes from icnl.org's generic "main p" rule,
   since icnl.org has no font-size override specific to breadcrumbs either).
   Targeted by ID so it only affects the breadcrumb, not any other paragraph
   in the masthead that's legitimately meant to be the larger intro size. */
body.uscnl-site .uscnl-masthead #breadcrumbs {
	font-size: 16px;
	margin-top: 0;
}

/* ---------- Theme Button block (acf/app-theme-button) - USCNL variants ---------- */
/* Mirrors the ICNL theme's own 4 button styles (style1-4, see
   dist/css/style-icnl.css), recolored navy/brick instead of teal/mango.
   These choices (style5-8) are added sitewide via the acf/load_field filter
   in functions.php; scoped here to body.uscnl-site so picking one on a
   non-USCNL page renders as a plain unstyled link instead of a visual bug. */

/* style5: "USCNL Link with +" - analog of style1 (plain link, base .btn
   color/hover swapped from ICNL teal/aqua to USCNL navy/brick). UNCONFIRMED -
   inferred from the base .btn pattern, not explicitly specified. */
body.uscnl-site .btn.style5 {
	color: var(--uscnl-navy) !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
body.uscnl-site .btn.style5 i {
	color: var(--uscnl-navy);
}
body.uscnl-site .btn.style5:hover {
	color: var(--uscnl-brick) !important;
	background: transparent !important;
}
body.uscnl-site .btn.style5:hover i {
	color: var(--uscnl-brick);
}

/* style6: "USCNL Only +" - analog of style2 (icon-only, text hidden via
   text-indent). Needs its own color override too since style2 doesn't carry
   one itself, it just inherits from base .btn. UNCONFIRMED. */
body.uscnl-site .btn.style6 {
	text-indent: -110vw;
	color: var(--uscnl-navy) !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
body.uscnl-site .btn.style6 i {
	text-indent: 0vw;
	color: var(--uscnl-navy);
}

/* Links on .dark background blocks (e.g. the maroon masthead hero) need
   white text - .btn.style5's own navy-text rule was winning over the
   theme's white-on-dark convention there. */
body.uscnl-site .dark a,
body.uscnl-site .dark .btn.style5,
body.uscnl-site .dark .btn.style5 i {
	color: #ffffff !important;
}

body.uscnl-site .dark a:hover,
body.uscnl-site .dark .btn.style5:hover,
body.uscnl-site .dark .btn.style5:hover i {
	color: var(--uscnl-cream) !important;
}

body.uscnl-site .btn.style6:hover {
	color: var(--uscnl-brick) !important;
	background: transparent !important;
}
body.uscnl-site .btn.style6:hover i {
	color: var(--uscnl-brick);
}

/* style7: "USCNL Download Link - Brick Chevron Down" - analog of style3.
   CONFIRMED: brick text, no background, chevron-down icon, navy on hover. */
body.uscnl-site .btn.style7 {
	color: var(--uscnl-brick) !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
body.uscnl-site .btn.style7 .fa.fa-angle-right:before,
body.uscnl-site .btn.style7 .fa.fa-plus-circle:before {
	content: "\f078" !important;
}
body.uscnl-site .btn.style7 i {
	color: var(--uscnl-brick);
}
body.uscnl-site .btn.style7:hover {
	color: var(--uscnl-navy) !important;
	background: transparent !important;
}
body.uscnl-site .btn.style7:hover i {
	color: var(--uscnl-navy);
}

/* style8: "USCNL Alt Download Link - Brick Background" - analog of style4
   (solid background variant of style7/style3). UNCONFIRMED - inferred by
   mirroring style3/style4's own relationship (same icon/hover pattern, just
   filled instead of text-only). */
body.uscnl-site .btn.style8 {
	background-color: var(--uscnl-brick) !important;
	color: #ffffff !important;
	padding: 1em;
}
body.uscnl-site .btn.style8 .fa.fa-angle-right:before,
body.uscnl-site .btn.style8 .fa.fa-plus-circle:before {
	content: "\f078" !important;
}
body.uscnl-site .btn.style8 i {
	color: #ffffff !important;
}
body.uscnl-site .btn.style8:hover {
	background-color: var(--uscnl-navy) !important;
}

/* Featured-image banner variant (editor sets the "headerimage" field to 1) */
body.uscnl-site .uscnl-masthead#mastheadimg {
	padding: 3rem 2rem;
	position: relative;
}

body.uscnl-site .uscnl-masthead#mastheadimg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(18, 51, 107, 0.72); /* var(--uscnl-navy) at 72% */
	z-index: 0;
}

body.uscnl-site .uscnl-masthead#mastheadimg h1,
body.uscnl-site .uscnl-masthead#mastheadimg #breadcrumbs,
body.uscnl-site .uscnl-masthead#mastheadimg #breadcrumbs a {
	position: relative;
	z-index: 1;
	color: var(--uscnl-cream);
}

/* Standalone apps (e.g. usprotestlawtracker) that were retrofitted with this
   USCNL masthead still load their old assets/css/icnl-v1.6.css, which pulls
   #main up with "margin-top: -47px !important" (max-width:1030px) - built
   for that page's original, pre-USCNL header height. With the new masthead,
   that stale pull instead drags the page content up over the breadcrumb
   whenever it wraps to a second line. Neutralized here rather than in the
   app's own CSS since this stylesheet loads after it on every such page. */
body.uscnl-site #main {
	margin-top: 0 !important;
}

/* ---------- Buttons / links / accents on USCNL content ---------- */

body.uscnl-site .btn,
body.uscnl-site a.btn {
	background: var(--uscnl-brick);
	border-color: var(--uscnl-brick);
	color: #ffffff;
}

body.uscnl-site .btn:hover,
body.uscnl-site a.btn:hover {
	background: var(--uscnl-navy);
	border-color: var(--uscnl-navy);
}

/* Native Gutenberg button blocks (wp-block-button__link) - these carry their
   own inline background-color style (e.g. style="background-color:#016f87",
   ICNL teal) set per-button in the block editor, which beats any normal CSS
   rule regardless of selector specificity. !important is required here to
   win against that inline style and bring existing page content using this
   block onto USCNL colors instead of leftover ICNL teal/etc, but only on
   pages using the USCNL template (never site-wide). */
body.uscnl-site .wp-block-button__link {
	background-color: var(--uscnl-navy) !important;
	color: var(--uscnl-cream) !important;
}

body.uscnl-site .wp-block-button__link:hover {
	background-color: var(--uscnl-brick) !important;
	color: #ffffff !important;
}

/* Content Views Pro (pt-cv-*/cvp-*) powers the tracker/database resource
   listings (e.g. /our-work/us-program/us-resources - the same view type is
   reused across the Trackers and Databases pages). Its title-link color is
   injected via a per-view-instance inline <style> block in the page <head>
   using a #pt-cv-view-{dynamic-id} selector that's different on every page,
   so !important on the stable class names is the only reliable way to
   override it everywhere rather than one page at a time. */
body.uscnl-site .pt-cv-title a {
	color: var(--uscnl-navy) !important;
}

body.uscnl-site .pt-cv-title a:hover {
	color: var(--uscnl-brick) !important;
}

/* Read More + Reset buttons both currently render in ICNL teal because of a
   pre-existing cascade quirk in style-icnl.css itself (a more-specific-
   looking .cvp-live-button .btn-danger{background:#5C1140} rule is present
   but loses to the shared .btn-success,.btn-danger rule due to source
   order) - not something to fix generally, just override consistently here. */
body.uscnl-site .cvp-live-button .btn-success,
body.uscnl-site .cvp-live-button .btn-danger,
body.uscnl-site .pt-cv-readmore {
	background-color: var(--uscnl-navy) !important;
	border-color: var(--uscnl-navy) !important;
	color: #ffffff !important;
}

body.uscnl-site .cvp-live-button .btn-success:hover,
body.uscnl-site .cvp-live-button .btn-danger:hover,
body.uscnl-site .pt-cv-readmore:hover {
	background-color: var(--uscnl-brick) !important;
	border-color: var(--uscnl-brick) !important;
}

/* Text-link variant of Read More (pt-cv-textlink pt-cv-readmore, used in the
   Highlights section on /our-work/us-program) - not a button look like the
   generic .pt-cv-readmore rule above, which stays untouched since it's also
   used for genuine buttons elsewhere (e.g. /us-resources' btn btn-success). */
body.uscnl-site .pt-cv-textlink.pt-cv-readmore {
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--uscnl-brick) !important;
}

body.uscnl-site .pt-cv-textlink.pt-cv-readmore:hover {
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--uscnl-navy) !important;
}

/* Read More variant on /our-work/us-program/assembly (Content Views Pro
   shortcode output, classes pt-cv-readmore pt-cv-textlink cvplbd - not page
   content, can't be edited directly). The extra cvplbd class makes this
   3-class selector outrank the 2-class .pt-cv-textlink.pt-cv-readmore rule
   above, so this page gets navy text/brick hover instead of that rule's
   brick/navy. */
body.uscnl-site .pt-cv-readmore.pt-cv-textlink.cvplbd {
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--uscnl-navy) !important;
}

body.uscnl-site .pt-cv-readmore.pt-cv-textlink.cvplbd:hover {
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--uscnl-brick) !important;
}

body.uscnl-site a {
	color: var(--uscnl-navy);
}

body.uscnl-site a:hover {
	color: var(--uscnl-brick);
}

/* icnl-v1.6.css (shared across multiple USCNL standalone app pages) has its
   own "#main a:hover { color: #016e87; }" rule, which beats the plain
   "a:hover" rule above on any page that loads it (an ID selector always
   outranks a class-based one regardless of source order). Re-declared here
   at matching/higher specificity so brick wins everywhere consistently. */
body.uscnl-site #main a:hover {
	color: var(--uscnl-brick) !important;
}

/* One canonical size/weight per heading level, applied site-wide so no
   individual block/page can drift from it - only color was previously
   guaranteed consistent, font-size/weight were left to whatever a given
   block happened to default to. */
body.uscnl-site h1,
body.uscnl-site h2,
body.uscnl-site h3 {
	color: var(--uscnl-navy);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
}

body.uscnl-site h1 {
	font-size: 42px;
}

body.uscnl-site h2 {
	font-size: 32px;
}

body.uscnl-site h3 {
	/* 24px felt too big against designs built around the old 18px
	   assumption (H3 should still read bigger than H4, just not by this
	   much) - 22px per Jeff's compromise. */
	font-size: 22px;
}

/* H4 per Jeff's instruction sheet: brick (not navy, unlike h1-h3), 18px,
   not uppercase - overrides an earlier navy decision for h4 made before
   this spec was available. */
body.uscnl-site h4 {
	color: var(--uscnl-brick);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 18px;
	text-transform: none !important;
}

/* Match icnl.org's own H1 treatment (weight/line-height/letter-spacing/
   margin) while keeping USCNL's navy instead of icnl.org's #1f497d - no
   color set here on purpose, so the existing var(--uscnl-navy) rules above
   (both the general h1 rule and the masthead-specific one) keep applying.
   Placed after both of those so it wins on the properties it does set. */
body.uscnl-site h1,
body.uscnl-site .uscnl-masthead h1 {
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.5px;
	margin-bottom: 1rem !important;
}

/* "Crushed berry" heading color: no distinct token for this name found in
   the supplied USCNL palette (coolors.co/12336b-5b7a78-8a1e1b-f7f5f2) -
   using brick (#8a1e1b) since it's the closest match (a dark berry-red).
   Worth confirming with Zaida/Jeff whether "crushed berry" is meant to be a
   genuinely distinct swatch not yet supplied. */
body.uscnl-site .main h6 {
	color: var(--uscnl-brick);
}

body.uscnl-site .main h5 {
	color: var(--uscnl-brick);
}

/* ---------- Footer ---------- */

body.uscnl-site .uscnl-footer {
	background: var(--uscnl-navy);
	color: var(--uscnl-cream);
}

body.uscnl-site .uscnl-footer a {
	color: var(--uscnl-cream);
}

body.uscnl-site .uscnl-footer a:hover {
	/* Cream rather than sage: sage (#5b7a78) on the navy background falls
	   short of WCAG contrast for hover text; cream keeps it accessible. */
	color: var(--uscnl-cream);
	text-decoration: underline;
}

/* icnl-v1.6.css's "body { text-align: center; }" (on the standalone tracker
   pages) inherits straight down to this inline-block <img> with nothing to
   stop it - .uscnl-footer-links avoids this via its own "display: flex",
   but the logo has no equivalent rule at all. Explicit left-align here. */
body.uscnl-site .uscnl-footer .uscnl-footer-logo {
	text-align: left;
}

body.uscnl-site .uscnl-footer .uscnl-footer-logo img {
	height: 32px;
	width: auto;
	margin-bottom: 1rem;
}

/* Links and social icons share a single row, icons on the far right -
   matches the way ICNL's own footer keeps its logo and social icons on
   one line. */
body.uscnl-site .uscnl-footer .uscnl-footer-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

body.uscnl-site .uscnl-footer .uscnl-footer-links {
	display: flex;
	/* nowrap here (the outer .uscnl-footer-row wraps as a whole unit instead):
	   with flex-wrap:wrap on both this and the parent row, the 1100px .shell
	   max-width was just tight enough that this list broke after its first
	   item ("About") rather than the whole row wrapping cleanly. */
	flex-wrap: nowrap;
	/* align-items:center (theme default is stretch) + zeroing the margin below
	   counter the theme's global "li + li { margin-top: 1rem }" list-spacing
	   rule, which is meant for vertically-stacked lists elsewhere on the site
	   and was pushing every item but "About" down within this flex row. */
	align-items: center;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Reset margin on EVERY item, not just non-first (via li+li) or first-child.
   Spacing is handled entirely by "gap" on the flex container above. Zeroing
   margin only on some items while others keep the legacy assets/css/icnl-
   v1.6.css "ul > li { margin: 10px; }" rule (bottom/left/right, not just
   top) breaks align-items:center - flexbox centers on the full margin box,
   so a shorter margin box gets vertically offset ~5px relative to siblings
   still carrying the legacy margin. */
body.uscnl-site .uscnl-footer .uscnl-footer-links li {
	margin: 0 !important;
}

body.uscnl-site .uscnl-footer .uscnl-footer-links a {
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Newsletter signup link, styled as a button (same cream/navy pill treatment
   as the header's Donate button) - add class="uscnl-footer-signup-btn" to
   this specific <a> in the "USCNL Footer - Links" widget's Custom HTML. */
body.uscnl-site .uscnl-footer .uscnl-footer-signup-btn {
	background: var(--uscnl-cream);
	color: var(--uscnl-navy) !important;
	border-radius: 999px;
	padding: 8px 20px;
}

body.uscnl-site .uscnl-footer .uscnl-footer-signup-btn:hover {
	background: var(--uscnl-brick);
	color: #ffffff !important;
	text-decoration: none;
}

/* Mobile: the cramped single-row layout (especially the Get Updates pill)
   was breaking down at narrow widths - stack the nav links vertically and
   put the social icon row beneath them instead of forcing everything to
   share one line. */
@media (max-width: 768px) {
	body.uscnl-site .uscnl-footer .uscnl-footer-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}

	body.uscnl-site .uscnl-footer .uscnl-footer-links {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 0.85rem;
	}
}

body.uscnl-site .uscnl-footer .uscnl-footer-social {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
	/* Forces a consistent size so Font Awesome glyphs (Twitter/LinkedIn),
	   which scale with inherited font-size, render at the same 16px as the
	   hardcoded Bluesky SVG - the frozen Tracker page's own legacy
	   assets/css/icnl-v1.6.css sets "ul { font-size: 18px; }", which this
	   page doesn't otherwise inherit. */
	font-size: 16px !important;
}

/* Same fix as .uscnl-footer-links above: reset margin on every item, not
   just first-child, since a partial reset breaks align-items:center. */
body.uscnl-site .uscnl-footer .uscnl-footer-social li {
	margin: 0 !important;
}

body.uscnl-site .uscnl-footer .uscnl-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--uscnl-cream);
	border-radius: 50%;
}

/* Icons: since the glyph color is already cream by default, an underline
   (from the general footer a:hover rule above) isn't a meaningful hover
   cue on an icon - invert the circle instead, still built around cream. */
body.uscnl-site .uscnl-footer .uscnl-footer-social a:hover {
	background: var(--uscnl-cream);
	color: var(--uscnl-navy);
	text-decoration: none;
}

/* Bluesky icon is an inline SVG (see footer widget), not a Font Awesome
   glyph like the others - sized to match the ~16px the FA icons render at
   inside this circle. */
body.uscnl-site .uscnl-footer .uscnl-footer-social svg {
	width: 16px;
	height: 16px;
}

body.uscnl-site .uscnl-footer .uscnl-footer-tieback {
	/* icnl-v1.6.css's generic "p { margin: 15px 25px; }" (unique to the
	   standalone tracker pages) insets this 25px on each side relative to
	   .shell, making it - and its border-top "hr" line - visibly narrower
	   than the logo/nav/social row above, which has no such inherited margin. */
	margin-left: 0;
	margin-right: 0;
	border-top: 1px solid var(--uscnl-sage);
	padding-top: 1rem;
	font-size: 16px;
	opacity: 0.9;
}

body.uscnl-site .uscnl-footer .uscnl-footer-tieback a {
	font-weight: 700;
	text-decoration: underline;
}

/* ---------- Back to top button ---------- */

/* The icon is a flat-color SVG (fill baked in, not currentColor), so
   recoloring means swapping the file rather than a CSS color property -
   duplicated from dist/scss/images/backtotop-icon.svg (original teal
   #007994) rather than edited in place, since that file is shared with
   the rest of the site. Brick by default, navy on hover. */
body.uscnl-site .backtotop a {
	background-image: url("../images/backtotop-icon-uscnl-brick.svg");
}

body.uscnl-site .backtotop a:hover {
	background-image: url("../images/backtotop-icon-uscnl-navy.svg");
}

/* ---------- Breadcrumbs ---------- */

/* Theme's own breadcrumb output bolds the current/last page name by default
   (span.breadcrumb_last > strong). Per USCNL request this shouldn't be bold. */
body.uscnl-site #breadcrumbs .breadcrumb_last strong {
	font-weight: normal;
}

/* ---------- Anti-Riot/Anti-Protest database table (app-block-one-grid) ---------- */

/* FacetWP reset button - renders as a solid teal-filled pill (background,
   not just text), white label text. */
body.uscnl-site .facetwp-reset {
	background-color: var(--uscnl-navy) !important;
	border-color: var(--uscnl-navy) !important;
	color: #ffffff !important;
}

/* Per-row content labels ("Riot:", "Incitement to Riot:", "Penalty:") -
   selectors matched exactly to dist/css/style-icnl.css's own rules for
   .incitement_text strong / strong.dark. */
body.uscnl-site .app-block-one-grid .articles.rows.provision .article .wp-block-details .content .incitement_text strong {
	color: var(--uscnl-brick);
}

body.uscnl-site .app-block-one-grid .articles.rows.provision .article .wp-block-details .content .incitement_text strong.dark {
	color: var(--uscnl-navy);
}

/* Table header sort-order chevron: a shared image asset hardcoded to
   icnl.org's own uploads (https://www.icnl.org/wp-content/uploads/{up,down}_arrow.png),
   not something in this theme's files, so it can't be recolored directly
   without affecting icnl.org itself. It also has no CSS class/state that
   distinguishes "up" vs "down" beyond swapping the image file, so a drawn
   CSS-only replacement (e.g. a border-triangle like the nav chevrons
   elsewhere in this file) can't preserve that toggle behavior either.
   A CSS filter is therefore the only option that stays purely local to this
   stylesheet - values computed from the teal source color (#016e87) to the
   USCNL navy target (#12336b) in HSL space (~27deg hue-rotate, ~72% of
   original saturation, ~93% of original brightness). This is an
   approximation, not an exact color match - check it against the live
   #12336b swatch and nudge these values if it reads off. */
body.uscnl-site .app-block-one-grid img.sort_icon {
	filter: hue-rotate(27deg) saturate(0.72) brightness(0.93);
}

/* Row accordion chevron ("+"/"-" toggle on each provision row). Selectors
   below use the shared "rows.provision" base class (not "rows.mask" or
   "rows.terrorismlaw" specifically), so this also covers Anti-Mask Laws and
   State Domestic Terrorism Law - every USCNL-relevant post type this block
   renders - without touching the non-USCNL row types (ACHPR Guideline,
   Foreign Funding, etc.) that use different classes entirely. */
body.uscnl-site .app-block-one-grid .articles.rows.provision .article .wp-block-details summary::after {
	color: var(--uscnl-navy) !important;
}

/* Provision title link + heading - both render teal/aqua by default. */
body.uscnl-site .app-block-one-grid .articles.rows.provision .article .wp-block-details a {
	color: var(--uscnl-navy) !important;
}

body.uscnl-site .app-block-one-grid .articles.rows.provision .article .wp-block-details summary .article__title {
	color: var(--uscnl-navy) !important;
}

/* "Yes"/"no" checkmark on the offense indicator. Both states carry the
   shared "offense" class (markup is "li-field offense yes"/"li-field
   offense no"), so targeting ".offense::before" alone - as a first pass did -
   caught both and turned "no" sage too, since this scoped rule's extra
   specificity + !important beat the theme's own plain ".no::before" grey
   override. Targeting ".yes" specifically avoids that, and ".no" is pinned
   to grey explicitly here rather than relying on cascade order. */
body.uscnl-site .app-block-one-grid .articles.rows.provision .article .wp-block-details summary .li-field.offense.yes::before {
	background-color: var(--uscnl-sage) !important;
}

body.uscnl-site .app-block-one-grid .articles.rows.provision .article .wp-block-details summary .li-field.offense.no::before {
	background-color: var(--uscnl-brick) !important;
}

/* "Expand/Collapse All" link (#accordion_openall) - a plain .vc_btn3 text
   link (transparent bg, no border), teal by default. Scoped to this specific
   button's ID rather than .vc_btn3 generally, since that's a generic
   WPBakery button class that could appear elsewhere in USCNL page content
   too and shouldn't be recolored wholesale. */
body.uscnl-site #accordion_openall {
	color: var(--uscnl-navy) !important;
}

/* ---------- Congressional Investigations table (app-block-one-grid) ---------- */

/* Results count ("182 RESULTS") */
body.uscnl-site .app-block-one-grid .resultsqty .kicker {
	color: var(--uscnl-brick) !important;
}

/* Row divider lines (header row + each result row) */
body.uscnl-site .app-block-one-grid .articles.rows.congressional .tableheader,
body.uscnl-site .app-block-one-grid .articles.rows.congressional .article {
	border-bottom-color: var(--uscnl-navy) !important;
}

/* Column labels (Date/Investigation Name/Committee/Type of Action) */
body.uscnl-site .app-block-one-grid .articles.rows.congressional .guideline-header .li-field {
	color: var(--uscnl-navy) !important;
}

/* ---------- State Domestic Terrorism Laws table (app-block-one-grid) ---------- */

/* "Reset" link: orange -> brick */
body.uscnl-site .app-block-one-grid .resultsqty.terrorismlaw .kicker a,
body.uscnl-site .app-block-one-grid .selectionswrapper .facetwp-selections ul.terrorismlaw .kicker a {
	color: var(--uscnl-brick) !important;
}

/* "NN results" counter on this page specifically: overrides the generic
   .resultsqty .kicker brick rule above (Congressional Investigations) with
   navy, via the extra .terrorismlaw class for higher specificity. */
body.uscnl-site .app-block-one-grid .resultsqty.terrorismlaw .kicker {
	color: var(--uscnl-navy) !important;
}

/* h5 heading ("Domestic Terrorism Offense" inside each state box) - the
   sitewide h5 rule below (line ~770) is brick; !important here wins over it
   despite lower selector specificity ("main" as an element vs ".main" as a
   class), overriding to navy for this page's h5s specifically. */
body.uscnl-site main h5 {
	color: var(--uscnl-navy) !important;
}

/* Map (template-parts/us-map.php, included only by ogtrta_terrorismlaw.php -
   confirmed not shared with any other tracker page, so no extra scope hook
   is needed here; the ".app_terrorismlaw" class given in the original brief
   doesn't actually exist - the wrapping <section>'s class is built by
   directly concatenating "app-posts" with the post type string with no
   separator, e.g. "app-postsapp_terrorismlaw" as one fused token, never a
   standalone ".app_terrorismlaw" class - so that selector would never have
   matched anything). Overrides this template's own inline <style> block. */
body.uscnl-site .usstate.active .st0 {
	fill: var(--uscnl-brick) !important;
}

body.uscnl-site .usstate.active:hover .st0 {
	fill: var(--uscnl-sage) !important;
}

/* Legend circle next to "STATES WITH THE OFFENSE OF TERRORISM" - also only
   ever rendered on this page (confirmed: ".fa-circle.plum" appears nowhere
   else in the theme). */
body.uscnl-site .fa-circle.plum {
	color: var(--uscnl-brick) !important;
}

/* ---------- US Protest Law Tracker (usprotestlawtracker/) ---------- */
/* This standalone app's own stylesheet is assets/css/icnl-v1.6.css, loaded
   before this one (see inc-header.php) - not shared with icnl.org, but kept
   as overrides here rather than edited directly, consistent with how the
   rest of this file works. Selectors matched exactly to icnl-v1.6.css. */

/* "Filter by:" label and filter buttons ("Locations", "Status", "Issues", "Date") */
body.uscnl-site div.filter {
	color: var(--uscnl-navy) !important;
}

body.uscnl-site div.filtertitle {
	color: var(--uscnl-sage) !important;
	border-color: var(--uscnl-sage) !important;
	/* Legacy rule bakes in opacity:0.5 (looks like a muted/inactive button
	   style), which was washing out the sage color to a pale grey-green
	   rather than the intended full-strength tone. */
	opacity: 1 !important;
}

/* Filter modal (.filtercontainer > .filterbox): centered on screen instead
   of the legacy "position:fixed; margin:5px" (no top/left), which left it
   pinned near the top-left of the viewport rather than truly centered.
   "position: fixed !important" is required here, not just top/left/transform:
   showFilter() in assets/js/icnl-v1.5.js sets box.style.position='absolute'
   (plain inline, no importance) every time the modal opens, which silently
   won over the original CSS's non-!important "position:fixed". Once
   position became absolute, top/left started resolving against
   .filtercontainer - which that same JS stretches to the full page's
   scrollHeight - instead of the viewport, so the "centered" box ended up
   centered on the whole (very long) page. Forcing fixed back with
   !important beats the plain inline JS assignment and makes the viewport
   the containing block again, regardless of .filtercontainer's height. */
body.uscnl-site div.filterbox {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	margin: 0 !important;
}

/* Apply/Clear filter buttons: teal -> navy. Apply keeps its filled look,
   Clear keeps its outlined look (".alt") - only the color changes. */
body.uscnl-site div.filterboxcontrol button {
	background-color: var(--uscnl-navy) !important;
	border-color: var(--uscnl-navy) !important;
	color: #ffffff !important;
}

body.uscnl-site div.filterboxcontrol button.alt {
	background-color: #ffffff !important;
	color: var(--uscnl-navy) !important;
}

/* Filter checkboxes: sage when checked, darker sage on hover. accent-color
   is the only way to recolor a native checkbox's checked-state fill without
   rebuilding it as a custom appearance:none control. */
body.uscnl-site div.filtersection input[type="checkbox"] {
	accent-color: var(--uscnl-sage);
}

body.uscnl-site div.filtersection input[type="checkbox"]:hover {
	accent-color: #445c5a;
}

/* State/federal entry headings ("US Federal", "Alabama", etc.) - text +
   the border-bottom rule beneath it. */
body.uscnl-site div.entrypretitle {
	color: var(--uscnl-navy) !important;
	border-bottom-color: var(--uscnl-navy) !important;
}

/* "Return to Map" link */
body.uscnl-site a.return {
	color: var(--uscnl-navy) !important;
}

/* Status: Enacted -> brick (counter box + inline tags + the ".nb" number badge) */
body.uscnl-site span.enacted,
body.uscnl-site span.enacted a,
body.uscnl-site span.enacted a:visited {
	color: var(--uscnl-brick) !important;
}

body.uscnl-site span.enacted span.nb {
	background-color: var(--uscnl-brick) !important;
}

/* Status: Enacted with improvements -> brick too, consistent with plain "Enacted" */
body.uscnl-site span.enacted_with_improvements,
body.uscnl-site span.enacted_with_improvements a,
body.uscnl-site span.enacted_with_improvements a:visited {
	color: var(--uscnl-brick) !important;
}

body.uscnl-site span.enacted_with_improvements span.nb {
	background-color: var(--uscnl-brick) !important;
}

/* Map legend swatches: same 3-category structure as icnl-v1.6.css's
   originals (grey/none, light-blue "ongoing" combining pending + defeated +
   enacted_with_improvements, aqua "enacted"), just recolored to USCNL blue
   shades - see assets/js/icnl-v1.5.js's style() function for the matching
   per-state fill-color logic. Note this map's "Enacted" is navy, distinct
   from the brick used for the enacted status tags/badges above - two
   different UI elements that both happen to say "enacted." */
body.uscnl-site div.legend.enacted span {
	background-color: var(--uscnl-navy) !important;
}

body.uscnl-site div.legend.ongoing span {
	background-color: #a3b8dc !important;
}

/* Facebook/Twitter share icons (icon font, not an image) */
body.uscnl-site a.share {
	color: var(--uscnl-navy) !important;
}

/* ---------- FARA Related Legislation page: teal → navy fixes ---------- */

/* HR separators with baked-in inline teal (background-color:#13b1d3;color:#13b1d3) */
body.uscnl-site .wp-block-separator[style*="13b1d3"] {
	background-color: var(--uscnl-navy) !important;
	color: var(--uscnl-navy) !important;
}

/* HR separators with no color explicitly chosen in the editor: fall back to
   sage (the current sitewide default) instead of the shared theme default
   in style-icnl.css (.main .wp-block-separator { border-color: #17b1d3; }).
   Deliberately no !important here (unlike the FARA-specific rule above) -
   this used to be a blanket "!important" lock, which also overrode any
   color an editor picked from the block's own color swatches. */
body.uscnl-site .wp-block-separator {
	border-color: var(--uscnl-sage);
}

/* Picking a color in the editor applies it as a "text color" - the block
   gets "has-text-color has-{slug}-color" (WP core sets the `color`
   property from that class), not an inline style and not `border-color`
   directly. This theme draws the visible line via `border-color`, which
   doesn't read `color` on its own, so a chosen color was reaching the
   element (confirmed via the "color" class rendering, e.g. as its
   otherwise-unused background-color) without ever changing what's
   actually visible. Pointing border-color at currentColor makes it follow
   whatever color the editor's class set, for any swatch. Higher
   specificity (3 classes) than the plain default above, so this only
   applies once a color has actually been chosen. */
body.uscnl-site .wp-block-separator.has-text-color {
	border-color: currentColor;
}

/* Heading text with baked-in inline teal (color:#016f87) - covers both the
   h4 legislation titles (e.g. "S 1488 (Blumenthal)") and the h6 contact line.
   Excludes elements whose inline style sets background-color:#016f87 instead
   (e.g. the "U.S. Resources Page" button) - "background-color:#016f87" also
   contains the substring "color:#016f87", so the attribute selector alone
   was matching that button too and making its navy text invisible against
   its own navy background. */
body.uscnl-site [style*="color:#016f87"]:not([style*="background-color:#016f87"]) {
	color: var(--uscnl-navy) !important;
}

/* Accordion headers (Gutenberg Details block) - a third teal shade
   (#007994), not inline this time but from style-icnl.css's own
   ".wp-block-details summary" rule, which is why the two fixes above missed it. */
body.uscnl-site .wp-block-details summary {
	color: var(--uscnl-navy) !important;
}

/* ---------- State Racketeering Laws page (page-id-79677) ---------- */
/* Scoped to just this page, not sitewide, since other tracker/list pages
   with the same teal stripes/text are left untouched per request. */

/* Table row stripes: teal -> cream (overrides style-icnl.css's sitewide
   "table tbody tr:nth-child(2n+1)" rule) */
body.page-id-79677 table tbody tr:nth-child(2n+1) {
	background-color: var(--uscnl-cream) !important;
}

/* "Published" date label: overrides the inline style="color:#016e87" baked
   into this specific paragraph block */
body.page-id-79677 p.wp-elements-cf3241fec96382c71edbd4233e9eb98f,
body.page-id-79677 p[style*="016e87"] {
	color: var(--uscnl-navy) !important;
}

/* ---------- BugHerd #18: extra whitespace below footer on frozen tracker pages ---------- */
/* These pages' hardcoded <footer> kept the legacy "footer" class alongside
   "uscnl-footer" (class="footer uscnl-footer"), so they still inherit
   style-icnl.css's legacy ".footer { margin-bottom: 30px; }" rule meant for
   the old ICNL footer design. Normal WP-rendered USCNL pages only output
   "uscnl-footer" (no legacy class), so they never see this margin. Scoped
   to match only elements carrying both classes together. */
body.uscnl-site .uscnl-footer.footer {
	margin-bottom: 0 !important;
}

/* ---------- BH #23, #30, #36, #37: white gap between header and full-bleed hero ---------- */
/* style-icnl.css's global "main, .main { padding-top: 40px; }" rule creates
   an unwanted white gap when the first block in <main> is a full-bleed dark
   hero Group block (app-block-group-background), which is meant to sit
   flush against the header instead. Confirmed on: /our-work/us-program,
   /our-work/us-program/foreign-agents-registration-act/,
   /our-work/us-program/us-trackers, /our-work/us-program/tax-exemptions-
   nonprofits. Only pulls up the hero itself when it's the first child, so
   the shared padding-top is untouched for any other page/content relying
   on it. */
body.uscnl-site main.main > .app-block-group-background:first-child {
	margin-top: -40px !important;
}

/* Mobile: style-icnl.css's own "main, .main { padding-top: 40px; }" reduces
   to "padding: 16px 0;" at this same 768px breakpoint (confirmed in
   dist/css/style-icnl.css), but the -40px pull above stayed fixed - so at
   mobile the hero was getting pulled 24px too far up (40 - 16), overlapping
   the bottom of the header. Matching the negative margin to the actual
   reduced padding here fixes it. */
@media (max-width: 768px) {
	body.uscnl-site main.main > .app-block-group-background:first-child {
		margin-top: -16px !important;
	}
}

/* Posts (single-post/CPT views) never wrap their content in a .shell div the
   way page-builder content does, so main.main's own padding-left/right - 0
   at mobile via style-icnl.css's "padding: 16px 0" shorthand, which zeroes
   the sides while adding top/bottom - leaves text/images running flush to
   the screen edge. Scoped to .single so page-template content (which
   already handles its own .shell-wrapped spacing) isn't double-padded. */
@media (max-width: 768px) {
	body.uscnl-site.single main.main {
		padding-left: 16px;
		padding-right: 16px;
	}
}