/* NNRJ section styles. Single concatenated stylesheet: one render-blocking
   request instead of ten. Built from the per-mission files (m02..m07) that
   existed so parallel design missions never contended on one stylesheet;
   the design phase is over, so their cascade order (alphabetical, matching
   the old glob enqueue) is preserved here. Staff intranet styles live in
   staff.css, enqueued only inside the /staff/ tree. */

/* ============ m02.css ============ */
/**
 * Mission M02 — Homepage
 * Hero slider, persona quick access, announcement hub, quick facts band.
 * Tokens only (var(--wp--preset--color--*)). Builds on the registered block
 * styles (is-style-nnrj-card, is-style-nnrj-band-dark) and the global focus
 * rings in custom.css. Civic site, WCAG 2.1 AA.
 *
 * Palette mapping from the design's old seal-blue tokens:
 *   #001890 -> primary,  #000f5c -> primary-dark,
 *   #a9c2ff -> primary-200,  #dbe3ff/#dbe6ff -> primary-100,
 *   #e8ebf7 -> primary-50,  gold -> accent / accent-strong.
 */

/* Shared visually-hidden helper (hero aria-live region) */
.nnrj-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ─── Hero slider (nnrj/home-hero) ──────────────────────────────────────── */
.nnrj-hero {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--primary-dark);
}
/* All slides stack in one grid cell from first paint. The track must occupy
   its final height BEFORE JS runs: when the pre-enhancement state was three
   covers stacked in normal flow (~1500px), enhancement collapsed them into
   one cell and everything below the hero jumped up -- that single collapse
   was the homepage's entire layout-shift budget. Non-active slides hide with
   visibility (not display:none) so images stay decoded and the track sizes
   to the tallest slide immediately. No-JS users get slide 1 as a static
   hero; the other slides' destinations remain reachable through the nav. */
.nnrj-hero__track { position: relative; display: grid; }
.nnrj-hero__slide.wp-block-cover {
	grid-area: 1 / 1;
	width: 100%;
}
.nnrj-hero__slide:not(.is-active) {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.nnrj-hero__slide[hidden] { display: none; }

/* Controls are hidden until JS enhances the hero (then they become
   functional). The padding that reserves room for the absolutely-positioned
   control bar applies from first paint for the same reason as the grid above:
   adding it only when enhanced shifted the slide's height post-load.
   !important is required: the Cover block carries an inline padding-bottom,
   and without it the control bar overlaps the CTAs on short viewports. */
.nnrj-hero__controls { display: none; }
.nnrj-hero--enhanced .nnrj-hero__controls { display: block; }
.nnrj-hero__slide.wp-block-cover {
	padding-bottom: calc(var(--wp--preset--spacing--70) + 1.5rem) !important;
}

/* Enhanced (JS on): crossfade between the stacked slides. */
.nnrj-hero--enhanced .nnrj-hero__slide.wp-block-cover {
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.nnrj-hero--enhanced .nnrj-hero__slide.is-active {
	transition: opacity 0.6s ease;
}

.nnrj-hero__slide .wp-block-cover__inner-container {
	width: 100%;
	margin-left: 0;
	margin-right: auto;
}
/* The left-to-right legibility scrim is baked INTO each photo (identical
   gradient on all three slides, so slide-to-slide contrast is uniform). The
   runtime dim used to be a FLAT 30% navy across the whole cover, which muted the
   photography just as much on the right as under the copy. It is now a horizontal
   gradient: a touch heavier than before over the text column (so contrast on the
   copy is preserved, not reduced) and easing to fully clear on the right, so the
   photo resolves softly instead of sitting behind an even wash.
   Verified: all three slides still clear 7:1 (WCAG AAA). */
.nnrj-hero__slide .wp-block-cover__background.has-background-dim {
	opacity: 1;
	background-image: linear-gradient(
		90deg,
		rgba(20, 39, 92, 0.42) 0%,
		rgba(20, 39, 92, 0.38) 34%,
		rgba(20, 39, 92, 0.24) 56%,
		rgba(20, 39, 92, 0.10) 76%,
		rgba(20, 39, 92, 0) 100%
	);
}
.nnrj-hero__slide .wp-block-cover__image-background {
	object-fit: cover;
}
/* Small screens: object-fit crops to the image center, which can drop the
   baked left scrim off-screen while text overlays the brightest area. Raise
   the runtime dim so the copy keeps AA contrast. Contrast at both dims is
   validated when the hero images are generated (scripts in repo history). */
@media (max-width: 781px) {
	/* Flat, not the horizontal gradient above: the copy spans the full width here,
	   so an easing-to-clear right edge would leave text over bare photo. */
	.nnrj-hero__slide .wp-block-cover__background.has-background-dim {
		opacity: 1;
		background-image: linear-gradient(
			90deg,
			rgba(20, 39, 92, 0.52) 0%,
			rgba(20, 39, 92, 0.52) 100%
		);
	}
}

/* ── Slide background photography ──────────────────────────────────────────
   Each slide carries a Cover background photo (assets/images/hero-*.jpg):
   real Northern Neck photography with a navy legibility gradient baked in,
   opaque over the left text column and fading to reveal the photo on the
   right. The runtime overlay is the Cover's own primary-dark dim (30%, 50%
   on small screens), which core always renders BELOW the content. White +
   primary-100 text clears WCAG AA over the text zone on every slide. */

.nnrj-hero__content { color: var(--wp--preset--color--base); }
.nnrj-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 0.75rem;
	font-family: ui-monospace, "JetBrains Mono", monospace;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-200);
}
.nnrj-hero__rule {
	width: 26px;
	height: 3px;
	flex: none;
	background: var(--wp--preset--color--accent);
	display: inline-block;
}
.nnrj-hero__title { margin: 0 0 1rem; max-width: 16ch; }
.nnrj-hero__lede { margin: 0; max-width: 48ch; line-height: 1.55; }

/* CTAs */
.nnrj-hero__ctas { align-items: center; }
.nnrj-hero__cta .wp-block-button__link {
	border-radius: 2px;
	padding: 0.9375rem 1.625rem;
}
/* Gold CTA label: near-black, overriding the block's primary-dark text colour.
   The accent gold (#D89000) is light enough that navy (#14275C) tops out at
   5.36:1 -- fine for AA, short of the 7:1 WCAG AAA bar. No usable navy clears it;
   black on the same gold is 7.9:1, so the brand gold is kept and only the label
   darkens. The brightness() hover lightens the gold, which only raises contrast.
   !important is required: WP emits preset colour classes (.has-primary-dark-color)
   with !important, so a plain rule loses to the block's own attribute. */
.nnrj-hero__cta--primary .wp-block-button__link {
	color: #000 !important;
}
.nnrj-hero__cta--primary .wp-block-button__link:hover,
.nnrj-hero__cta--primary .wp-block-button__link:focus-visible {
	filter: brightness(1.06);
}
.nnrj-hero__cta--ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--base);
	border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.nnrj-hero__cta--ghost .wp-block-button__link:hover,
.nnrj-hero__cta--ghost .wp-block-button__link:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

/* Carousel controls */
.nnrj-hero__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2; /* above the slide cover content (inner-container is z-index:1) */
}
.nnrj-hero__controls-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2.5rem) 1.375rem;
	display: flex;
	align-items: center;
	gap: 0.875rem;
	flex-wrap: wrap;
}
.nnrj-hero__buttons { display: flex; align-items: center; gap: 0.5rem; }
.nnrj-hero__btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 2px;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	transition: background 0.12s ease;
}
.nnrj-hero__btn:hover { background: rgba(255, 255, 255, 0.22); }
.nnrj-hero__dots { display: flex; align-items: center; gap: 0.5rem; margin-left: 0.375rem; }
.nnrj-hero__dot {
	height: 12px;
	width: 12px;
	min-width: 12px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition: width 0.15s ease, background 0.15s ease;
}
.nnrj-hero__dot[aria-current="true"] {
	width: 28px;
	background: var(--wp--preset--color--accent);
}

@media (prefers-reduced-motion: reduce) {
	.nnrj-hero__btn,
	.nnrj-hero__dot,
	.nnrj-hero__cta .wp-block-button__link { transition: none; }
	/* Instant slide swap, no crossfade. JS also disables autoplay here. */
	.nnrj-hero--enhanced .nnrj-hero__slide.wp-block-cover { transition: none; }
}

/* ─── Quick access (nnrj/home-quick-access) ─────────────────────────────── */
.nnrj-qa__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-family: ui-monospace, "JetBrains Mono", monospace;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-text);
}
.nnrj-qa__rule {
	width: 22px;
	height: 3px;
	flex: none;
	background: var(--wp--preset--color--accent);
	display: inline-block;
}
.nnrj-qa__title { margin: 0; }

/* Prominent Find an inmate banner */
.nnrj-qa__banner-link {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	border-radius: 2px;
	padding: 1.375rem 1.625rem;
	border-left: 5px solid var(--wp--preset--color--accent);
	transition: background 0.12s ease;
}
/* primary-dark on hover: primary is now #1E40AF (AAA), so the old royal-blue-hover
   value is identical to it and would read as no hover change at all. */
.nnrj-qa__banner-link:hover,
.nnrj-qa__banner-link:focus-visible {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}
.nnrj-qa__banner-icon {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	display: flex;
	align-items: center;
	justify-content: center;
}
.nnrj-qa__banner-body { flex: 1; min-width: 0; }
.nnrj-qa__banner-title {
	display: block;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}
/* base (white), not primary-100: primary-100 on the primary fill was 5.35:1
   (AA only). White on primary is ~8.7:1 and clears 7:1 for WCAG AAA. */
.nnrj-qa__banner-sub {
	display: block;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--base);
	margin-top: 2px;
}
.nnrj-qa__banner-arrow {
	flex: none;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary-dark);
}

/* Persona tiles. Equal-height columns, no wrap collapse on tablet. */
.nnrj-qa__grid.wp-block-columns { flex-wrap: wrap; }
.nnrj-qa__grid .wp-block-column { flex-basis: 0; min-width: 16rem; }
.nnrj-qa__tile { height: 100%; }
.nnrj-qa__tile:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 8px 22px rgba(20, 39, 92, 0.1);
}
.nnrj-qa__tile-icon {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--wp--preset--color--gold-tint);
	color: var(--wp--preset--color--gold-text);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}
.nnrj-qa__tile-title { margin: 0 0 0.75rem; line-height: 1.2; }
.nnrj-qa__tile-title a {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}
.nnrj-qa__tile-title a:hover,
.nnrj-qa__tile-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.nnrj-qa__links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nnrj-qa__links li { margin: 0; }
.nnrj-qa__links a {
	display: block;
	padding: 0.5rem 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.nnrj-qa__links a:hover,
.nnrj-qa__links a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.nnrj-qa__banner-link,
	.nnrj-qa__tile { transition: none; }
}

/* ─── Announcement hub (nnrj/home-announcement-hub) ─────────────────────── */
.nnrj-news__eyebrow {
	margin: 0;
	font-family: ui-monospace, "JetBrains Mono", monospace;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-text);
}
.nnrj-news__title { margin: 0; }
.nnrj-news__all { margin: 0; }
.nnrj-news__all a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.nnrj-news__all a::after {
	content: "→";
	font-weight: 700;
}
.nnrj-news__all a:hover,
.nnrj-news__all a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Cards */
.nnrj-news__card { height: 100%; }
.nnrj-news__card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 8px 22px rgba(20, 39, 92, 0.07);
}
.nnrj-news__meta { margin-bottom: 0.75rem; }
.nnrj-news__date {
	font-family: ui-monospace, "JetBrains Mono", monospace;
	letter-spacing: 0.02em;
}
.nnrj-news__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.1875rem 0.625rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-50);
}
.nnrj-news__badge a { text-decoration: none; color: var(--wp--preset--color--primary-dark); }
.nnrj-news__badge a:hover { text-decoration: underline; }
.nnrj-news__card-title { margin: 0 0 0.5rem; }
.nnrj-news__card-title a {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}
.nnrj-news__card-title a:hover,
.nnrj-news__card-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.nnrj-news__excerpt { margin: 0; line-height: 1.55; }
.nnrj-news__more {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.nnrj-news__more::after { content: "→"; font-weight: 700; }
.nnrj-news__more:hover,
.nnrj-news__more:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.nnrj-news__empty { margin: 0; }
@media (prefers-reduced-motion: reduce) {
	.nnrj-news__card { transition: none; }
}

/* ─── Quick facts band (nnrj/home-quick-facts) ──────────────────────────── */
/* is-style-nnrj-band-dark already supplies navy bg, gold top edge, white text. */
.nnrj-facts__title { margin: 0 0 0.375rem; }
.nnrj-facts__lede { margin: 0 0 var(--wp--preset--spacing--40); max-width: 60ch; }
.nnrj-facts__grid.wp-block-columns { flex-wrap: wrap; }
.nnrj-facts__grid .wp-block-column { flex-basis: 0; min-width: 15rem; }
.nnrj-facts__card {
	height: 100%;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 2px;
	padding: 1.375rem;
}
.nnrj-facts__icon {
	display: inline-flex;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--wp--preset--color--gold-tint);
	color: var(--wp--preset--color--gold-text);
	align-items: center;
	justify-content: center;
	margin-bottom: 0.875rem;
}
.nnrj-facts__label {
	margin: 0 0 0.375rem;
	font-family: ui-monospace, "JetBrains Mono", monospace;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray-300);
}
.nnrj-facts__value { margin: 0; font-weight: 600; line-height: 1.5; }
.nnrj-facts__note { margin: 0.375rem 0 0; }
.nnrj-facts__directions { margin: 0.625rem 0 0; }
.nnrj-facts__directions a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--wp--preset--color--primary-200);
	font-weight: 700;
	text-decoration: none;
}
.nnrj-facts__directions a::after { content: "→"; }
.nnrj-facts__directions a:hover,
.nnrj-facts__directions a:focus-visible {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Phone CTA button (gold on navy, accessible) */
.nnrj-facts__phone-btn .wp-block-button__link { border-radius: 2px; }

/* Mailing addresses: visually distinct admin vs inmate lines */
.nnrj-facts__mail {
	padding: 0.625rem 0.75rem;
	border-radius: 2px;
	margin-top: 0.625rem;
}
.nnrj-facts__mail--admin {
	background: rgba(255, 255, 255, 0.05);
	border-left: 3px solid var(--wp--preset--color--gray-300);
}
.nnrj-facts__mail--inmate {
	background: rgba(216, 144, 0, 0.16);
	border-left: 3px solid var(--wp--preset--color--accent);
}
.nnrj-facts__mail-label {
	margin: 0 0 0.125rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
}
.nnrj-facts__mail-value { margin: 0; }
.nnrj-facts__mail-place { margin: 0.5rem 0 0; }

/* ============ m03.css ============ */
/* ==========================================================================
   Mission M03 - Announcement system
   Index (list + grid), single post, category badges, filter chips,
   pagination, previous/next. Tokens only. WCAG 2.1 AA.
   Auto-enqueued via functions.php glob of assets/css/missions/*.css.
   ========================================================================== */

/* --- Shared wrapper -------------------------------------------------------- */
.nnrj-announcements {
    --nnrj-announce-max: 820px;
}

/* --- Category filter chips (server-side, plain links) ---------------------- */
.nnrj-filter {
    align-items: center;
}
/* Archive filter block (nnrj/announcement-filter) renders <nav><ul>; supply the
   flex row here so it matches the pattern-based chips on the index page. */
.nnrj-filter__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}
.nnrj-filter__chip {
    margin: 0;
}
.nnrj-filter__chip a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--wp--preset--color--gray-300);
    border-radius: 999px;
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--gray-700);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: border-color 120ms, background 120ms, color 120ms;
}
.nnrj-filter__chip a:hover,
.nnrj-filter__chip a:focus-visible {
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary-dark);
    background: var(--wp--preset--color--gray-50);
}
/* Active chip: WP adds .current-menu-item only on nav menus, so we mark the
   active category through aria-current when the archive title matches. Editors
   may also add the .is-current class to the active chip manually. */
/* primary-dark fill, not primary: white on primary was 6.7:1 (AA only), while
   white on primary-dark is ~14.2:1 -- clears 7:1 for WCAG AAA. Also matches the
   navy archive eyebrow and card titles. */
.nnrj-filter__chip a[aria-current="page"],
.nnrj-filter__chip.is-current a {
    border-color: var(--wp--preset--color--primary-dark);
    background: var(--wp--preset--color--primary-dark);
    color: var(--wp--preset--color--base);
}

/* --- LIST layout ----------------------------------------------------------- */
.nnrj-announce-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.nnrj-announce-row {
    max-width: var(--nnrj-announce-max);
}
.nnrj-announce-row .nnrj-announce-excerpt {
    max-width: 74ch;
    line-height: 1.6;
}

/* --- GRID layout ----------------------------------------------------------- */
/* Falls back to a fluid auto-fill grid even where the editor grid layout does
   not emit one; core's grid layout supplies the primary rule. */
.nnrj-announce-grid.is-layout-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 1.125rem;
}
.nnrj-announce-card {
    height: 100%;
    transition: border-color 120ms, box-shadow 120ms;
}
.nnrj-announce-card:hover,
.nnrj-announce-card:focus-within {
    border-color: var(--wp--preset--color--primary) !important;
    box-shadow: 0 8px 22px rgba(20, 39, 92, 0.08);
}
.nnrj-announce-card .nnrj-announce-excerpt {
    line-height: 1.55;
}

/* --- Date + meta typography ------------------------------------------------ */
.nnrj-announce-meta {
    row-gap: 0.5rem;
}
.nnrj-announce-date {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    font-weight: 600;
}

/* --- Linked titles --------------------------------------------------------- */
.nnrj-announce-row .wp-block-post-title a,
.nnrj-announce-card .wp-block-post-title a {
    color: inherit;
    text-decoration: none;
}
.nnrj-announce-row .wp-block-post-title a:hover,
.nnrj-announce-row .wp-block-post-title a:focus-visible,
.nnrj-announce-card .wp-block-post-title a:hover,
.nnrj-announce-card .wp-block-post-title a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Category badges ------------------------------------------------------- */
/* core/post-terms renders: <div class="wp-block-post-terms nnrj-badge"><a>…</a></div>
   We style the link as a pill. Per-term colour is driven by the term archive
   href (robust, no extra markup). Editors can also force a colour by adding one
   of .nnrj-badge--rfp / --employee / --general to the post-terms block. */
.nnrj-badge {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
}
.nnrj-badge a {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    /* Neutral default: gray badge, AA on gray-700 text. */
    background: var(--wp--preset--color--gray-100);
    color: var(--wp--preset--color--gray-700);
    transition: filter 120ms;
}
.nnrj-badge a:hover,
.nnrj-badge a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* RFPs and Proposals: primary-50 background / primary-dark text.
   Contrast: primary-dark on primary-50 ~12.0:1 (AA pass). */
.nnrj-badge a[href*="/category/rfp"],
.nnrj-badge--rfp a {
    background: var(--wp--preset--color--primary-50);
    color: var(--wp--preset--color--primary-dark);
}

/* Employee of the Quarter: gold-tint background / gold-text.
   Contrast: gold-text on gold-tint ~8.7:1 (AA pass). */
.nnrj-badge a[href*="/category/employee"],
.nnrj-badge--employee a {
    background: var(--wp--preset--color--gold-tint);
    color: var(--wp--preset--color--gold-text);
}

/* General Updates: gray.
   Contrast: gray-700 on gray-100 ~9.5:1 (AA pass). */
.nnrj-badge a[href*="/category/general"],
.nnrj-badge--general a {
    background: var(--wp--preset--color--gray-100);
    color: var(--wp--preset--color--gray-700);
}

/* Single-post badge sits a touch larger. */
.nnrj-badge--single a {
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
}

/* --- Pagination ------------------------------------------------------------ */
.nnrj-announce-pagination {
    align-items: center;
    row-gap: 0.75rem;
}
.nnrj-announce-pagination .wp-block-query-pagination-numbers {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.nnrj-announce-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 0.75rem;
    border: 1px solid var(--wp--preset--color--gray-300);
    border-radius: 2px;
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--primary-dark);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 120ms, background 120ms;
}
.nnrj-announce-pagination .page-numbers:hover,
.nnrj-announce-pagination .page-numbers:focus-visible {
    border-color: var(--wp--preset--color--primary);
    background: var(--wp--preset--color--gray-50);
}
.nnrj-announce-pagination .page-numbers.current {
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
}
.nnrj-announce-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    color: var(--wp--preset--color--gray-500);
    min-width: 0;
    padding: 0 0.25rem;
}
.nnrj-announce-pagination .wp-block-query-pagination-previous,
.nnrj-announce-pagination .wp-block-query-pagination-next {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--wp--preset--color--gray-300);
    border-radius: 2px;
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--primary-dark);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 120ms, background 120ms;
}
.nnrj-announce-pagination .wp-block-query-pagination-previous:hover,
.nnrj-announce-pagination .wp-block-query-pagination-previous:focus-visible,
.nnrj-announce-pagination .wp-block-query-pagination-next:hover,
.nnrj-announce-pagination .wp-block-query-pagination-next:focus-visible {
    border-color: var(--wp--preset--color--primary);
    background: var(--wp--preset--color--gray-50);
}

/* --- Single post ----------------------------------------------------------- */
.nnrj-announce-single {
    margin-inline: auto;
}
.nnrj-announce-single .nnrj-breadcrumb {
    margin-bottom: 1.5rem;
}
.nnrj-announce-postmeta {
    row-gap: 0.5rem;
}
.nnrj-announce-postmeta__icon {
    display: inline-flex;
    color: var(--wp--preset--color--gray-400);
}
.nnrj-announce-postmeta__label {
    color: var(--wp--preset--color--gray-700);
}
.nnrj-announce-postmeta__date {
    font-variant-numeric: tabular-nums;
}

/* Attached document area inherits the shared doc-download styles from
   custom.css; no overrides needed here. */

.nnrj-announce-back__link a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}
.nnrj-announce-back__link a:hover,
.nnrj-announce-back__link a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Previous / next ------------------------------------------------------- */
.nnrj-announce-adjacent .wp-block-columns {
    margin-bottom: 0;
}
.nnrj-announce-adjacent__col {
    display: flex;
}
/* When there is no previous/next post (newest/oldest), core renders nothing in
   the column; hide the empty cell so it does not leave a hollow box. */
.nnrj-announce-adjacent__col:empty {
    display: none;
}
.nnrj-announce-adjacent .wp-block-post-navigation-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    padding: 1rem 1.125rem;
    border: 1px solid var(--wp--preset--color--gray-200);
    border-radius: 2px;
    background: var(--wp--preset--color--gray-50);
    font-size: 0.9375rem;
    transition: border-color 120ms, background 120ms;
}
.nnrj-announce-adjacent .wp-block-post-navigation-link:hover,
.nnrj-announce-adjacent .wp-block-post-navigation-link:focus-within {
    border-color: var(--wp--preset--color--primary);
    background: var(--wp--preset--color--base);
}
.nnrj-announce-adjacent .wp-block-post-navigation-link a {
    color: var(--wp--preset--color--primary-dark);
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}
.nnrj-announce-adjacent .wp-block-post-navigation-link a:hover,
.nnrj-announce-adjacent .wp-block-post-navigation-link a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.nnrj-announce-adjacent .wp-block-post-navigation-link .post-navigation-link-arrow {
    font-weight: 700;
    color: var(--wp--preset--color--gray-500);
}
.nnrj-announce-adjacent__next .wp-block-post-navigation-link,
.nnrj-announce-adjacent__next {
    text-align: right;
}

/* --- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .nnrj-filter__chip a,
    .nnrj-announce-card,
    .nnrj-announce-pagination .page-numbers,
    .nnrj-announce-pagination .wp-block-query-pagination-previous,
    .nnrj-announce-pagination .wp-block-query-pagination-next,
    .nnrj-announce-adjacent .wp-block-post-navigation-link {
        transition-duration: 0.01ms;
    }
}

/* ============ m04-about.css ============ */
/* ─── M04 About: "More about us" card grid ──────────────────────────────────
   Section-specific styling for the About landing page child-page cards.
   The shared kit (.is-style-nnrj-card) supplies the card surface; this file adds
   the icon badge, heading-link treatment, and hover/focus affordance only.
   Tokens only. WCAG 2.1 AA. */

/* Equal-height cards; let columns stack on narrow screens (core default). */
.nnrj-about-cards .wp-block-column {
	display: flex;
}
.nnrj-about-cards .nnrj-about-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.625rem;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Decorative icon badge (gold tint surface, primary-colored glyph for AA). */
.nnrj-about-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin-bottom: 0.25rem;
	border-radius: 2px;
	background: var(--wp--preset--color--accent-tint, var(--wp--preset--color--gray-50));
	color: var(--wp--preset--color--primary);
}

/* Heading link: fills the card so the whole card reads as one target. */
.nnrj-about-card h3 {
	margin: 0;
}
.nnrj-about-card h3 a {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}
.nnrj-about-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.nnrj-about-card {
	position: relative;
}
.nnrj-about-card h3 a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Hover affordance on the surrounding card. */
.nnrj-about-card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
}

/* Visible focus ring driven by the covering link, never removed. */
.nnrj-about-card:has(h3 a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.nnrj-about-card h3 a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Description sits below; keep it muted but AA-legible. */
.nnrj-about-card p {
	margin: 0;
}

/* ============ m04-compliance.css ============ */
/* ==========================================================================
   Mission M04 - Compliance & Records
   Section hub card grid, FOIA flagship 2-column-with-sidebar interior,
   related-links + key-contact sidebar cards. Tokens only. WCAG 2.1 AA.
   Auto-enqueued via functions.php glob of assets/css/missions/*.css.
   Shared classes (.nnrj-breadcrumb, .nnrj-page-header__lede, .nnrj-keyfacts,
   .nnrj-doc-list/.nnrj-doc-row, .is-style-nnrj-card, callouts) live in
   custom.css; this file only adds M04-specific layout.
   ========================================================================== */

/* --- Section hub: card grid ------------------------------------------------ */
/* Three equal columns on desktop; core/columns stacks to a single column on
   mobile by default. Cards are full-height so the grid reads as a clean row. */
.nnrj-hub-grid {
    align-items: stretch;
}
.nnrj-hub-grid > .wp-block-column {
    display: flex;
}
.nnrj-hub-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.nnrj-hub-card:hover,
.nnrj-hub-card:focus-within {
    border-color: var(--wp--preset--color--primary) !important;
    box-shadow: 0 8px 22px rgba(20, 39, 92, 0.10);
}
.nnrj-hub-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    border-radius: 4px;
    background: var(--wp--preset--color--primary-50);
    color: var(--wp--preset--color--primary-dark);
}
.nnrj-hub-card__title {
    margin: 0;
    line-height: 1.25;
}
.nnrj-hub-card__title a {
    color: var(--wp--preset--color--primary-dark);
    text-decoration: none;
}
.nnrj-hub-card__title a:hover,
.nnrj-hub-card__title a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* The whole card is clickable via the title link; keep its focus ring tidy. */
.nnrj-hub-card__desc {
    line-height: 1.55;
}

/* --- Interior 2-column layout (FOIA flagship) ------------------------------ */
/* Main (64%) + sidebar (36%). core/columns supplies the flex track and stacks
   to one column on mobile, so we only refine alignment and prose width here. */
.nnrj-interior-layout {
    align-items: flex-start;
}
.nnrj-interior-layout > .wp-block-column {
    min-width: 0; /* let long words/URLs wrap instead of forcing overflow */
}
/* FOIA flagship is fully template-driven (no wp:post-content): the structured
   prose + components live in templates/page-foia.html. Typography + the new
   component kit (on-this-page, key-facts grid, doc links, contact card) are
   defined in the "FOIA page" block below. */

/* Sidebar: sticky on wide screens only (where the column is side-by-side). */
.nnrj-interior-aside {
    position: static;
}
@media (min-width: 782px) {
    .nnrj-interior-aside {
        position: sticky;
        top: 1.5rem;
    }
}

/* --- Sidebar: related links card ------------------------------------------ */
.nnrj-related {
    padding: 1.5rem;
}
.nnrj-related__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--gray-500);
    font-weight: 700;
}
.nnrj-related__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.nnrj-related__list li + li {
    border-top: 1px solid var(--wp--preset--color--gray-100);
}
.nnrj-related__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0;
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.3;
}
.nnrj-related__list a::before {
    content: "›";
    margin-right: 0.5rem;
    color: var(--wp--preset--color--gray-400);
    font-weight: 700;
}
.nnrj-related__list a:hover,
.nnrj-related__list a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Sidebar: key-contact mini-card --------------------------------------- */
.nnrj-keycontact {
    padding: 1.25rem 1.5rem;
    background: var(--wp--preset--color--gray-50);
    border-top: 3px solid var(--wp--preset--color--primary);
    border-radius: 0 0 2px 2px;
}
.nnrj-keycontact__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.nnrj-keycontact__role {
    color: var(--wp--preset--color--gray-900);
    line-height: 1.35;
}
.nnrj-keycontact__phone {
    font-weight: 700;
    color: var(--wp--preset--color--primary-dark);
    font-variant-numeric: tabular-nums;
}

/* --- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .nnrj-hub-card,
    .nnrj-doclinks a {
        transition-duration: 0.01ms;
    }
}

/* ==========================================================================
   FOIA page (flagship interior) — second pass to match locked design.
   Template-driven: templates/page-foia.html. Tokens only. WCAG 2.1 AA.
   Eyebrow system is monospace 11px uppercase, mirroring the design.
   ========================================================================== */

/* --- Header: cap the lede measure (left-aligned, ~62ch) ------------------- */
.nnrj-foia-header .nnrj-page-header__lede {
    max-width: 62ch;
}

/* --- Main prose column ----------------------------------------------------- */
/* Native heading/paragraph/list blocks render as direct children of the column,
   so direct-child selectors target the prose without touching the component
   cards (which are nested inside their own wrappers). */
.nnrj-foia-body > p,
.nnrj-foia-body > ul,
.nnrj-foia-body > ol {
    max-width: 70ch;
    font-size: 1.0625rem;   /* 17px */
    line-height: 1.7;
    color: var(--wp--preset--color--gray-700);
    margin: 0 0 1.125rem;
}
.nnrj-foia-body > ul,
.nnrj-foia-body > ol {
    padding-left: 1.375rem;
}
.nnrj-foia-body > ul li,
.nnrj-foia-body > ol li {
    margin-bottom: 0.5rem;
}
.nnrj-foia-body > ul li:last-child,
.nnrj-foia-body > ol li:last-child {
    margin-bottom: 0;
}
.nnrj-foia-body a {
    color: var(--wp--preset--color--primary);
    text-underline-offset: 3px;
}

/* Section headings (no border; royal-blue, generous top rhythm) */
.nnrj-foia__h2 {
    margin: 2.5rem 0 0.75rem;
    font-size: 1.625rem;    /* 26px */
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--primary-dark);
    scroll-margin-top: 90px; /* clear of any sticky chrome on anchor jump */
}
.nnrj-foia__h3 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1.1875rem;   /* 19px */
    line-height: 1.3;
    font-weight: 700;
    color: var(--wp--preset--color--gray-900);
}
/* First section heading sits right under the key-facts card */
.nnrj-keyfacts-card + .nnrj-foia__h2 {
    margin-top: 0;
}
.nnrj-foia-body .nnrj-callout--icon p {
    font-size: 0.9375rem;   /* 15px */
    line-height: 1.55;
}

/* --- On this page (jump-link TOC) ------------------------------------------ */
.nnrj-onthispage {
    background: var(--wp--preset--color--gray-50);
    border: 1px solid var(--wp--preset--color--gray-200);
    border-left: 3px solid var(--wp--preset--color--primary);
    border-radius: 2px;
    padding: 1.125rem 1.375rem;
    margin-bottom: 1.75rem;
}
.nnrj-onthispage__label {
    margin: 0 0 0.75rem;
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 0.6875rem;   /* 11px */
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--gray-500);
    font-weight: 700;
}
.nnrj-onthispage__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 24px;
}
.nnrj-onthispage__list a {
    display: block;
    padding: 0.5rem 0;
    min-height: 44px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}
.nnrj-onthispage__list a:hover,
.nnrj-onthispage__list a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Key facts card ("What you need to know") ----------------------------- */
/* Builds on is-style-nnrj-callout-info (gold top edge + shadow); add the
   full hairline border + tighter radius the design shows. */
.nnrj-keyfacts-card {
    border: 1px solid var(--wp--preset--color--gray-200);
    border-top: 3px solid var(--wp--preset--color--accent);
    border-radius: 2px;
    margin-bottom: 2.25rem;
}
.nnrj-keyfacts__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.125rem;
}
.nnrj-keyfacts__icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--wp--preset--color--gold-tint);
    color: var(--wp--preset--color--gold-text);
    display: flex;
    align-items: center;
    justify-content: center;
}
.nnrj-keyfacts__title {
    margin: 0;
    font-size: 1.125rem;    /* 18px */
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--primary-dark);
}
.nnrj-keyfacts-grid {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.75rem;
}
.nnrj-keyfacts-grid__cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-top: 1px solid var(--wp--preset--color--gray-100);
    padding-top: 0.8125rem;
}
.nnrj-keyfacts-grid dt {
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wp--preset--color--gray-500);
    font-weight: 700;
}
.nnrj-keyfacts-grid dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wp--preset--color--gray-900);
    line-height: 1.4;
}

/* --- Virginia FOIA Advisory Council box ----------------------------------- */
.nnrj-council {
    background: var(--wp--preset--color--gray-50);
    border: 1px solid var(--wp--preset--color--gray-200);
    border-radius: 2px;
    padding: 1.125rem 1.375rem;
    max-width: 680px;
}
.nnrj-council__label {
    margin: 0 0 0.625rem;
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--gray-500);
    font-weight: 700;
}
.nnrj-council__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
}
.nnrj-council__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    word-break: break-word;
}
.nnrj-council__link svg {
    flex: none;
    color: var(--wp--preset--color--gray-400);
}
.nnrj-council__link:hover,
.nnrj-council__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Forms and guides (download links) ------------------------------------ */
.nnrj-doclinks {
    background: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--gray-200);
    border-radius: 2px;
    padding: 0.375rem 1.375rem;
}
.nnrj-doclinks ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.nnrj-doclinks li {
    border-top: 1px solid var(--wp--preset--color--gray-100);
}
.nnrj-doclinks a,
.nnrj-doclinks .nnrj-doclink {
    display: flex;
    align-items: center;
    gap: 0.9375rem;
    padding: 0.9375rem 0.375rem;
    min-height: 44px;
    text-decoration: none;
    border-radius: 2px;
    transition: background 120ms ease;
}
.nnrj-doclinks a:hover,
.nnrj-doclinks a:focus-visible {
    background: var(--wp--preset--color--gray-50);
}
/* Pending docs (not yet uploaded): not interactive, muted title, no download cue */
.nnrj-doclink--pending .nnrj-doclink__title {
    color: var(--wp--preset--color--gray-900);
}
.nnrj-doclink__icon {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 2px;
    background: var(--wp--preset--color--gold-tint);
    color: var(--wp--preset--color--gold-text);
    display: flex;
    align-items: center;
    justify-content: center;
}
.nnrj-doclink__body {
    flex: 1;
    min-width: 0;
}
.nnrj-doclink__title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--wp--preset--color--primary);
}
.nnrj-doclink__meta {
    font-weight: 600;
    color: var(--wp--preset--color--gray-500);
}
.nnrj-doclink__desc {
    display: block;
    font-size: 0.875rem;
    color: var(--wp--preset--color--gray-500);
    margin-top: 2px;
}
.nnrj-doclink__dl {
    flex: none;
    color: var(--wp--preset--color--gray-400);
    display: inline-flex;
}

/* --- FOIA Officer contact card -------------------------------------------- */
.nnrj-contact-card {
    background: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--gray-200);
    border-left: 4px solid var(--wp--preset--color--primary);
    border-radius: 2px;
    padding: 1.5rem 1.625rem;
    margin-top: 2.25rem;
}
.nnrj-contact-card__eyebrow {
    margin: 0 0 0.25rem;
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--gray-500);
    font-weight: 700;
}
.nnrj-contact-card__name {
    margin: 0 0 1.125rem;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--primary-dark);
}
.nnrj-contact-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.75rem;
}
.nnrj-contact-card__item {
    display: flex;
    gap: 0.6875rem;
    align-items: flex-start;
}
.nnrj-contact-card__item-body {
    min-width: 0;
}
.nnrj-contact-card__ico {
    flex: none;
    color: var(--wp--preset--color--gray-400);
    margin-top: 2px;
    display: inline-flex;
}
.nnrj-contact-card__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wp--preset--color--gray-500);
}
.nnrj-contact-card__value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}
.nnrj-contact-card__value:hover,
.nnrj-contact-card__value:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.nnrj-contact-card__value--break {
    word-break: break-word;
}
.nnrj-contact-card__value-plain {
    font-size: 1rem;
    color: var(--wp--preset--color--gray-900);
    line-height: 1.5;
}
.nnrj-contact-card__addr {
    font-style: normal;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--wp--preset--color--gray-900);
}

/* --- Sidebar: Related (icon variant) -------------------------------------- */
/* Suppress the shared CSS chevron (::before) so the inline SVG icons stand in;
   other pages using .nnrj-related keep their default chevron. */
.nnrj-related__eyebrow {
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    margin: 0 0 0.75rem;
}
.nnrj-related--icons .nnrj-related__list a::before {
    content: none;
}
.nnrj-related--icons .nnrj-related__list a {
    gap: 0.5rem;
}
.nnrj-related__chev,
.nnrj-related__ext {
    flex: none;
    color: var(--wp--preset--color--gray-400);
}

/* --- Sidebar: Key contact (named) ----------------------------------------- */
.nnrj-keycontact {
    border: 1px solid var(--wp--preset--color--gray-200);
    border-radius: 2px;
    border-top: 3px solid var(--wp--preset--color--primary);
}
.nnrj-keycontact__eyebrow {
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    margin: 0 0 0.625rem;
}
.nnrj-keycontact__name {
    margin: 0 0 2px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--wp--preset--color--primary-dark);
}
.nnrj-keycontact__role {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--wp--preset--color--gray-700);
    line-height: 1.35;
}
.nnrj-keycontact__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.nnrj-keycontact__phone svg {
    flex: none;
    color: var(--wp--preset--color--gray-400);
}
.nnrj-keycontact__phone:hover,
.nnrj-keycontact__phone:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- FOIA responsive: stack the 2-col inner grids on narrow screens -------- */
@media (max-width: 680px) {
    .nnrj-onthispage__list,
    .nnrj-keyfacts-grid,
    .nnrj-contact-card__grid {
        grid-template-columns: 1fr;
    }
    .nnrj-council__links {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ============ m04-employment.css ============ */
/* ─── M04 Employment ────────────────────────────────────────────────────────
   Employment hub card grid + external hiring-system CTA. Tokens only, AA.
   The Volunteers leaf page reuses shared interior styles (page header, contact
   callout) from custom.css, so it needs no rules here. */

/* Hub card grid: equal-height, wrapping columns */
.nnrj-emp-hub__grid.wp-block-columns { flex-wrap: wrap; }
.nnrj-emp-hub__grid .wp-block-column { flex-basis: 0; min-width: 16rem; }

/* Card: full-height so the two tiles align */
.nnrj-emp-card {
	height: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nnrj-emp-card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 8px 22px rgba(20, 39, 92, 0.1);
}

/* Icon chip: gold-tint fill + gold-text glyph (icon + label, never color alone) */
.nnrj-emp-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--wp--preset--color--gold-tint);
	color: var(--wp--preset--color--gold-text);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}

/* Card heading + link */
.nnrj-emp-card__title { margin: 0 0 0.5rem; line-height: 1.2; }
.nnrj-emp-card__title a {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}
.nnrj-emp-card__title a:hover,
.nnrj-emp-card__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* External hiring-system CTA button: royal-blue fill, white text (AA) */
.nnrj-emp-apply__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.625rem 1.25rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	text-decoration: none;
	border-radius: 2px;
	transition: background-color 0.15s ease;
}
.nnrj-emp-apply__btn:hover {
	background: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}
.nnrj-emp-apply__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.nnrj-emp-card,
	.nnrj-emp-apply__btn { transition: none; }
}

/* ============ m04-inmate-information.css ============ */
/**
 * M04 — Inmate Information section
 * Section hub card grid + the long 2-col-with-sidebar leaf layout
 * (Professional & Attorney Visitation). Single-column leaves (Vendor
 * Services) need no extra CSS beyond the shared interior kit in custom.css.
 *
 * Tokens only (var(--wp--preset--color--*)); no naked hex.
 * WCAG 2.1 AA: 44px targets, visible focus, no color-only meaning.
 */

/* ─── Section hub: intro + card grid ────────────────────────────────────── */
.nnrj-hub__intro { max-width: 66ch; }

/* !important matches core, which sets `flex-wrap:nowrap!important` on every
   .wp-block-columns above 782px. Without it this rule never applied, so three
   columns at a 16rem floor could not wrap and overflowed the viewport between
   about 782px and 1024px. */
.nnrj-hub__grid.wp-block-columns { flex-wrap: wrap !important; }
.nnrj-hub__grid .wp-block-column { flex-basis: 0; min-width: 16rem; }

/* Each card is a links-in-a-card tile; stretch to equal height per row. */
.nnrj-hub__card.wp-block-group {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nnrj-hub__card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 8px 22px rgba(20, 39, 92, 0.1);
}
.nnrj-hub__card-icon {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--wp--preset--color--gold-tint);
	color: var(--wp--preset--color--gold-text);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}
.nnrj-hub__card-title { margin: 0 0 0.5rem; line-height: 1.2; }
.nnrj-hub__card-title a {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}
.nnrj-hub__card-title a:hover,
.nnrj-hub__card-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.nnrj-hub__card-desc {
	margin: 0;
	color: var(--wp--preset--color--gray-700);
}
@media (prefers-reduced-motion: reduce) {
	.nnrj-hub__card.wp-block-group { transition: none; }
}

/* ─── Leaf: 2-col with sticky sidebar (Professional & Attorney Visitation) ─ */
.nnrj-leaf__cols.wp-block-columns {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--50);
}
/* Sticky sidebar on wide screens; static when stacked. */
@media (min-width: 782px) {
	.nnrj-leaf__sidebar {
		position: sticky;
		top: 1.5rem;
	}
}

/* Key-contact aside: gray surface, royal-blue top edge */
.nnrj-aside-contact.wp-block-group {
	background: var(--wp--preset--color--gray-50);
	border: 1px solid var(--wp--preset--color--gray-200);
	border-top: 3px solid var(--wp--preset--color--primary);
	border-radius: 0 0 2px 2px;
	padding: 1.25rem 1.25rem 1.375rem;
}
.nnrj-aside__eyebrow {
	font-family: ui-monospace, "JetBrains Mono", monospace;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray-500);
	margin: 0 0 0.5rem;
}
.nnrj-aside__phone { font-weight: 700; }
.nnrj-aside__phone a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.nnrj-aside__phone a:hover,
.nnrj-aside__phone a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Related-links nav (sidebar) */
.nnrj-related.wp-block-group {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--gray-200);
	border-radius: 2px;
	padding: 1.125rem 1.25rem;
}
.nnrj-related__list { list-style: none; margin: 0; padding: 0; }
.nnrj-related__list li { margin: 0; border-top: 1px solid var(--wp--preset--color--gray-100); }
.nnrj-related__list li:first-child { border-top: 0; }
.nnrj-related__list a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.nnrj-related__list a:hover,
.nnrj-related__list a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.nnrj-related__list a::before {
	content: "›";
	flex: none;
	color: var(--wp--preset--color--gray-400);
	font-weight: 700;
}

/* ============ m04-programs.css ============ */
/**
 * M04 — Programs & Services section
 * Section hub (intro + card grid) and the two leaf layouts:
 *   - PreTrial Services: 2-col with a sticky key-contact + related sidebar.
 *   - Offender Re-Entry (ORTS): single column (no extra layout CSS needed
 *     beyond the shared interior kit in custom.css).
 *
 * Shared treatments (is-style-nnrj-card, is-style-nnrj-callout-contact,
 * .nnrj-contact__row, .nnrj-related, .nnrj-breadcrumb, .nnrj-page-header)
 * live in custom.css and are reused here. This file only adds the
 * programs-specific layout, the card chrome, and the small text helpers.
 *
 * Tokens only (var(--wp--preset--color--*)); no naked hex.
 * WCAG 2.1 AA: 44px targets, visible focus, no color-only meaning.
 */

/* ─── Section hub: intro + card grid ────────────────────────────────────── */
.nnrj-prog-hub__intro { max-width: 66ch; }

/* See the .nnrj-hub__grid note above: core's nowrap is !important. */
.nnrj-prog-hub__grid.wp-block-columns { flex-wrap: wrap !important; }
.nnrj-prog-hub__grid .wp-block-column { flex-basis: 0; min-width: 18rem; }

/* Each card is a links-in-a-card tile; stretch to equal height per row. */
.nnrj-prog-hub__card.wp-block-group {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nnrj-prog-hub__card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 8px 22px rgba(20, 39, 92, 0.1);
}
.nnrj-prog-hub__card-icon {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--wp--preset--color--gold-tint);
	color: var(--wp--preset--color--gold-text);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}
.nnrj-prog-hub__card-title { margin: 0 0 0.5rem; line-height: 1.2; }
.nnrj-prog-hub__card-title a {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}
.nnrj-prog-hub__card-title a:hover,
.nnrj-prog-hub__card-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.nnrj-prog-hub__card-desc {
	margin: 0;
	color: var(--wp--preset--color--gray-700);
}
@media (prefers-reduced-motion: reduce) {
	.nnrj-prog-hub__card.wp-block-group { transition: none; }
}

/* ─── Leaf: 2-col with sticky sidebar (PreTrial Services) ────────────────── */
.nnrj-prog-leaf__cols.wp-block-columns {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--60);
}
/* Sticky sidebar on wide screens; static when the columns stack on mobile. */
@media (min-width: 782px) {
	.nnrj-prog-leaf__sidebar {
		position: sticky;
		top: 1.5rem;
	}
}

/* ─── Shared text helpers (eyebrow + pending note) ──────────────────────── */
.nnrj-prog-eyebrow {
	font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray-500);
}

/* "Pending client confirmation" notes; mono so they read as provisional. */
.nnrj-prog-pending {
	font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--gray-500);
}

/* ============ m05.css ============ */
/* ============================================================================
   Mission M05 - People and Listings
   Jail Board grid, Board meetings callout, Command staff table,
   Current Openings list, How to apply, Organizational chart.
   Tokens only. WCAG 2.1 AA. Built on the shared interior component kit.
   Patterns: nnrj/board-grid, nnrj/board-meetings, nnrj/command-staff,
             nnrj/jobs-list, nnrj/jobs-how-to-apply, nnrj/orgchart.
   ========================================================================== */

/* Visually-hidden helper (mirrors core .screen-reader-text contract) used by
   external-link affordances inside patterns. Core ships this class on the front
   end, but we guarantee it here in case a context strips it. */
.nnrj-board .screen-reader-text,
.nnrj-jobs .screen-reader-text,
.nnrj-how-to-apply .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Mono "pending confirmation" notes, shared across the mission. */
.nnrj-pending-note {
	font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
	letter-spacing: 0.01em;
}

/* ── Fact grid (board meetings callout) ─────────────────────────────────── */
.nnrj-board-meetings .nnrj-factgrid {
	gap: 1rem 1.75rem;
	margin-top: 1.25rem;
}
.nnrj-board-meetings .nnrj-fact {
	border-top: 1px solid var(--wp--preset--color--gray-100);
	padding-top: 0.8125rem;
	gap: 0.1875rem;
}
.nnrj-board-meetings .nnrj-fact__label {
	font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 700;
}
.nnrj-board-meetings .nnrj-fact__value {
	color: var(--wp--preset--color--gray-900);
	line-height: 1.4;
}

/* ── Board roster, grouped by jurisdiction (nnrj/board-roster) ───────────── */
/* Each locality is a labelled band: a rule-and-heading row naming the locality
   and its seat count, then that locality's members. The heading carries the
   locality name so the cards no longer repeat it twelve times, and a locality
   holding a single seat reads as a complete group rather than an orphan card. */
.nnrj-board-roster {
	margin-top: 1.5rem;
}
.nnrj-board-group + .nnrj-board-group {
	margin-top: 2rem;
}
.nnrj-board-group__title {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0 0 0.875rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary-dark);
}
/* Seat count is secondary to the locality; push it to the far end of the rule. */
.nnrj-board-group__count {
	margin-left: auto;
	font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray-500);
}
/* Three fixed tracks, matching the three seats a county holds (administrator,
   supervisor, sheriff). An auto-fit/auto-fill track list looked right for the
   three-seat groups but sized the Town of Warsaw's single seat differently from
   every other card -- auto-fill stranded it in a five-column row, auto-fit
   stretched it across the rail. A fixed track keeps every member card identical
   whatever the seat count, and a locality with more than three seats simply
   wraps to a second row. */
.nnrj-board-group__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.125rem;
}
@media (max-width: 900px) {
	.nnrj-board-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.nnrj-board-group__grid { grid-template-columns: 1fr; }
}
.nnrj-board-group__item { margin: 0; }
/* Card surface is set here rather than inherited from the is-style-nnrj-card
   variation: that variation is scoped to .wp-block-group, and these cards are
   server-rendered <article>s, so they were picking up its padding rule only and
   rendering as unbordered text columns. */
.nnrj-board-group__item .nnrj-board__card {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 1.125rem 1.25rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--gray-200);
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.nnrj-board__name {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary-dark);
}
/* Role pill sits at the card foot so it lines up across a row whatever the
   name wraps to. */
.nnrj-board-group__item .nnrj-role-pill {
	margin: auto 0 0;
}

/* ── Board member grid (legacy flat Query Loop; kept for the older pattern) ── */
.nnrj-board__grid {
	gap: 1.125rem;
	margin-top: 1.375rem;
	margin-bottom: 1rem;
}
/* Cards stretch to equal height within each grid row. */
.nnrj-board__card {
	height: 100%;
	padding: 1.25rem 1.375rem;
}
.nnrj-board__card .wp-block-post-title {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.nnrj-board__jurisdiction {
	font-weight: 600;
}
.nnrj-board__link {
	margin-top: auto;
}
.nnrj-board__link a {
	font-weight: 600;
	text-decoration: none;
}
.nnrj-board__link a:hover,
.nnrj-board__link a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Role pill. Default (members): neutral outline. */
.nnrj-role-pill {
	display: inline-block;
	align-self: flex-start;
	width: auto;
	font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.25rem 0.5625rem;
	border-radius: 999px;
	color: var(--wp--preset--color--gray-700);
	background: var(--wp--preset--color--gray-100);
	border: 1px solid var(--wp--preset--color--gray-200);
}
/* No chair treatment. This used to give the FIRST card a royal top edge and a
   filled pill "per design", on the assumption that menu_order 0 is the chair.
   The board is ordered by jurisdiction, not seniority, and no member carries
   the role "Chair" -- so the highlight was designating a chair who does not
   exist (it landed on the Northumberland County Administrator). If a chair is
   designated later, style it from the role value, never from card position. */

/* Jurisdiction sits at the foot of the card, so it lines up across a grid row
   even when a neighbouring card's role pill wraps to two lines. Paired with
   name-before-role in the pattern, this keeps the card's fixed points (name at
   the top, jurisdiction at the bottom) aligned and lets only the pill vary.
   Selector carries the card class deliberately: WP's flex layout emits
   `:root :where(.is-layout-flex) > * { margin: 0 }` at the same specificity as a
   bare class and prints after this stylesheet, so `.nnrj-board__jurisdiction`
   alone loses the margin. */
.nnrj-board__card .nnrj-board__jurisdiction {
	margin-top: auto;
	padding-top: 0.25rem;
}

/* ── Command staff table ────────────────────────────────────────────────── */
.nnrj-command__table {
	margin-top: 1.375rem;
	width: 100%;
}
.nnrj-command__table table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--wp--preset--color--gray-200);
	border-radius: 2px;
	overflow: hidden;
	font-size: 1rem;
}
.nnrj-command__table caption {
	text-align: left;
}
.nnrj-command__table thead th {
	text-align: left;
	background: var(--wp--preset--color--gray-50);
	color: var(--wp--preset--color--gray-500);
	font-size: 0.7188rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 0.875rem 1.375rem;
	border-bottom: 1px solid var(--wp--preset--color--gray-200);
}
.nnrj-command__table tbody th[scope="row"] {
	text-align: left;
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}
.nnrj-command__table tbody th,
.nnrj-command__table tbody td {
	padding: 1rem 1.375rem;
	border-bottom: 1px solid var(--wp--preset--color--gray-100);
	vertical-align: top;
}
.nnrj-command__table tbody tr:last-child th,
.nnrj-command__table tbody tr:last-child td {
	border-bottom: 0;
}
.nnrj-command__table tbody td a {
	font-weight: 600;
	text-decoration: none;
	word-break: break-word;
}
.nnrj-command__table tbody td a:hover,
.nnrj-command__table tbody td a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Current openings list ──────────────────────────────────────────────── */
.nnrj-jobs__head {
	gap: 1rem;
	margin-bottom: 1.25rem;
}
.nnrj-jobs__list {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Query Loop renders post-template items as <li>; strip list affordances. */
.nnrj-jobs__list > li {
	margin: 0;
}
.nnrj-job {
	border-left: 3px solid var(--wp--preset--color--primary);
	padding: 1.375rem 1.5rem;
}
.nnrj-job .wp-block-post-title {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.nnrj-job__meta {
	gap: 0.5rem 1rem;
	align-items: center;
}
.nnrj-job__salary {
	gap: 0.4375rem;
	align-items: baseline;
}
.nnrj-job__salary-label {
	font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
}
.nnrj-job__salary-value {
	color: var(--wp--preset--color--gray-900);
}

/* Generic pill (employment type). */
.nnrj-pill {
	display: inline-block;
	width: auto;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--gray-700);
	background: var(--wp--preset--color--gray-100);
	border: 1px solid var(--wp--preset--color--gray-200);
	padding: 0.1875rem 0.625rem;
	border-radius: 999px;
}

/* "Full description" expander: native details, zero JS, one per card. */
.nnrj-job__more {
	margin-bottom: 0;
	border-top: 1px solid var(--wp--preset--color--gray-200);
	padding-top: 0.75rem;
}
.nnrj-job__more > summary {
	display: inline-block;
	cursor: pointer;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.nnrj-job__more > summary:hover {
	color: var(--wp--preset--color--primary-dark);
}
.nnrj-job__more > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}
.nnrj-job__more[open] > summary {
	margin-bottom: 0.625rem;
}

.nnrj-job__actions {
	margin-top: 0.875rem;
}
.nnrj-job__apply .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 700;
}

/* ── How to apply callout ───────────────────────────────────────────────── */
.nnrj-apply-steps {
	max-width: 64ch;
	line-height: 1.7;
	margin-top: 0.75rem;
}
.nnrj-apply-steps li {
	margin-bottom: 0.5rem;
}
.nnrj-apply-steps li:last-child {
	margin-bottom: 0;
}
.nnrj-apply-links {
	gap: 0.625rem 1.75rem;
	margin-top: 1rem;
}
.nnrj-apply-links a {
	font-weight: 700;
	text-decoration: none;
	word-break: break-word;
}
.nnrj-apply-links a:hover,
.nnrj-apply-links a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Organizational chart ───────────────────────────────────────────────── */
.nnrj-orgchart__image img {
	display: block;
	width: 100%;
	height: auto;
}
.nnrj-orgchart__image figcaption {
	margin-top: 0.625rem;
	color: var(--wp--preset--color--gray-500);
	font-size: 0.875rem;
	line-height: 1.55;
}
.nnrj-orgtree__eyebrow {
	font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}
/* Reporting structure. A semantic nested list is the right markup for a
   reporting tree (and the right thing for a screen reader), so the hierarchy is
   drawn with connector rails rather than by flattening it into boxes: each
   level indents under a vertical rail, and each node hangs off it on an elbow.
   The rail stops at the last child's elbow instead of running to the bottom of
   the list, which is what makes it read as a chart rather than a blockquote. */
.nnrj-orgtree__list {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1.6;
}
.nnrj-orgtree__list ul {
	list-style: none;
	margin: 0;
	padding-left: 1.875rem;
	position: relative;
}
/* Vertical rail for a level. Inset the bottom so it terminates at the final
   elbow rather than dangling past the last node. */
.nnrj-orgtree__list ul::before {
	content: "";
	position: absolute;
	left: 0.5rem;
	top: 0;
	bottom: 0;
	border-left: 2px solid var(--wp--preset--color--gray-300);
}
.nnrj-orgtree__list ul > li:last-child::after {
	content: "";
	position: absolute;
	left: -1.375rem;
	top: 1.0625rem;
	bottom: 0;
	width: 2px;
	background: var(--wp--preset--color--base);
}
.nnrj-orgtree__list li {
	position: relative;
	margin: 0;
	padding: 0.4375rem 0;
}
/* Elbow from the rail into each node. */
.nnrj-orgtree__list ul > li::before {
	content: "";
	position: absolute;
	left: -1.375rem;
	top: 1.0625rem;
	width: 0.9375rem;
	border-top: 2px solid var(--wp--preset--color--gray-300);
}
/* Role label leads each node; the people and remit follow in body colour. */
.nnrj-orgtree__list strong {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 700;
}
/* The two governing levels carry more weight than the divisions beneath them. */
.nnrj-orgtree__list > li > strong,
.nnrj-orgtree__list > li > ul > li > strong {
	font-size: 1.0625rem;
}

/* ── Responsive: collapse grids and stack the command table ─────────────── */
@media (max-width: 600px) {
	.nnrj-command__table table,
	.nnrj-command__table thead,
	.nnrj-command__table tbody,
	.nnrj-command__table tr {
		display: block;
		width: 100%;
	}
	/* Keep the header row available to assistive tech but visually hidden. */
	.nnrj-command__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
	.nnrj-command__table tbody tr {
		border-bottom: 1px solid var(--wp--preset--color--gray-200);
		padding: 0.5rem 0;
	}
	.nnrj-command__table tbody tr:last-child {
		border-bottom: 0;
	}
	.nnrj-command__table tbody th,
	.nnrj-command__table tbody td {
		display: block;
		width: 100%;
		border-bottom: 0;
		padding: 0.125rem 1.375rem;
	}
	.nnrj-command__table tbody th[scope="row"] {
		padding-top: 0.75rem;
		font-size: 1.0625rem;
	}
	.nnrj-command__table tbody td:last-child {
		padding-bottom: 0.75rem;
	}
}

/* ── Command staff photo cards (client-review mockup) ───────────────────── */
.nnrj-command-cards__grid {
	margin-top: 1.25rem;
	gap: 1rem;
}
.nnrj-command-card {
	padding: 1.5rem 1.5rem 1.25rem;
	text-align: center;
}
/* Lead card (Superintendent): spans the grid and runs horizontally, so the person
   the rest of the staff reports to reads first rather than as one of five peers.
   It also absorbs what was a single orphaned card on the second row. */
.nnrj-command-card--lead {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	text-align: left;
	border-top: 3px solid var(--wp--preset--color--primary);
}
.nnrj-command-card--lead .nnrj-command-card__avatar {
	margin: 0;
	flex: none;
}
.nnrj-command-card--lead .nnrj-command-card__name { margin: 0; }
.nnrj-command-card--lead .nnrj-command-card__title { margin: 0.125rem 0 0; }
@media (max-width: 600px) {
	.nnrj-command-card--lead {
		flex-direction: column;
		text-align: center;
	}
}
/* Initials placeholder; swap for a real portrait image block when photos arrive. */
.nnrj-command-card__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6.5rem;
	height: 6.5rem;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--gray-100);
	border: 1px solid var(--wp--preset--color--gray-200);
	color: var(--wp--preset--color--primary-dark);
	font-weight: 800;
	font-size: 1.75rem;
	letter-spacing: 0.04em;
}
.nnrj-command-card__name {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--primary-dark);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.nnrj-command-card__title {
	margin: 0 0 0.625rem;
}
.nnrj-command-card__contact {
	margin: 0;
}
.nnrj-command-card__contact a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}
.nnrj-command-cards__note {
	margin-top: 1rem;
}

/* ============ m06.css ============ */
/* ============================================================================
   Mission M06 — Family & Inmate Services accordion
   Styles the native core/details (<details>/<summary>) disclosure list used by
   the nnrj/family-inmate-services-tabs pattern. Zero JS, WCAG 2.1 AA.
   Tokens only — no raw hex. Civic, clean, no tab chrome.
   ========================================================================== */

/* --- Accordion container --------------------------------------------------- */
.nnrj-fis-accordion {
	border-top: 1px solid var(--wp--preset--color--gray-200);
}

/* --- Each disclosure item -------------------------------------------------- */
.nnrj-fis-accordion .nnrj-fis-item.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--gray-200);
	margin: 0;
}

/* --- Summary: the tappable header row -------------------------------------- */
.nnrj-fis-accordion .nnrj-fis-item > summary {
	/* 44px+ target: line-height + vertical padding clear the minimum */
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 44px;
	padding: 0.875rem 0.5rem 0.875rem 0.75rem;
	cursor: pointer;
	list-style: none; /* remove default disclosure triangle */
	font-family: var(--wp--preset--font-family--public-sans, inherit);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--primary-dark);
	border-left: 4px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Strip the native marker across engines */
.nnrj-fis-accordion .nnrj-fis-item > summary::-webkit-details-marker {
	display: none;
}
.nnrj-fis-accordion .nnrj-fis-item > summary::marker {
	content: "";
}

/* --- Custom chevron icon (royal-blue) -------------------------------------- */
.nnrj-fis-accordion .nnrj-fis-item > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.75rem;
	height: 0.75rem;
	margin-left: auto;
	border-right: 2.5px solid var(--wp--preset--color--primary);
	border-bottom: 2.5px solid var(--wp--preset--color--primary);
	transform: rotate(45deg); /* points down when closed */
	transition: transform 0.2s ease;
}

/* Open state: rotate chevron up, tint the row, show accent rail */
.nnrj-fis-accordion .nnrj-fis-item[open] > summary {
	color: var(--wp--preset--color--primary);
	border-left-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--gray-50);
}
.nnrj-fis-accordion .nnrj-fis-item[open] > summary::after {
	transform: rotate(225deg); /* points up when open */
}

/* Hover / focus affordance on the closed row */
.nnrj-fis-accordion .nnrj-fis-item > summary:hover {
	background-color: var(--wp--preset--color--gray-50);
	border-left-color: var(--wp--preset--color--primary);
}

/* Keyboard focus — visible, high-contrast, never removed */
.nnrj-fis-accordion .nnrj-fis-item > summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-strong, var(--wp--preset--color--accent));
	outline-offset: -3px;
	background-color: var(--wp--preset--color--gray-50);
}

/* --- Panel body ------------------------------------------------------------ */
.nnrj-fis-accordion .nnrj-fis-item > :not(summary) {
	margin-left: 0.75rem;
	margin-right: 0.5rem;
}
.nnrj-fis-accordion .nnrj-fis-item > summary + * {
	margin-top: 1rem;
}
.nnrj-fis-accordion .nnrj-fis-item[open] {
	padding-bottom: 1.5rem;
}

/* Tighten heading rhythm inside a panel */
.nnrj-fis-accordion .nnrj-fis-item h3 {
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}
.nnrj-fis-accordion .nnrj-fis-item h3:first-of-type {
	margin-top: 1rem;
}

/* --- Mail address block (monospace-free, civic) ---------------------------- */
.nnrj-fis-address .nnrj-fis-address__line {
	margin: 0;
	line-height: 1.5;
}
.nnrj-fis-address .nnrj-fis-address__line:first-of-type {
	font-weight: 700;
}

/* --- Refund form file row --------------------------------------------------- */
.nnrj-fis-file .wp-block-file__button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* --- Deep-link scroll offset (so anchored topics clear sticky chrome) ------- */
.nnrj-fis-accordion .nnrj-fis-item {
	scroll-margin-top: 1.5rem;
}

/* --- Respect reduced-motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.nnrj-fis-accordion .nnrj-fis-item > summary,
	.nnrj-fis-accordion .nnrj-fis-item > summary::after {
		transition: none;
	}
}

/* ============ m07.css ============ */
/* ==========================================================================
   Mission M07 - Embeds & Forms
   Inmate roster embed, contact Google Form embed, PREA document archive.
   Builds on the minimal embed-shell / callout / doc-list rules in custom.css.
   Tokens only (var(--wp--preset--*)). WCAG 2.1 AA. No raw hex.
   Auto-enqueued via functions.php glob of assets/css/missions/*.css.
   ========================================================================== */

/* --- Visually hidden helper (external-link suffixes, etc.) ----------------- */
.nnrj-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Embed shell (source bar + titled iframe + always-on fallback)
   ========================================================================== */

/* The card itself (border / radius / overflow live in custom.css). Add the
   soft government-card shadow and let the bar/iframe sit flush. */
.nnrj-embed {
    background: var(--wp--preset--color--base);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10);
}

/* Source bar: lock icon + monospace source domain + right-aligned pill. */
.nnrj-embed__bar {
    color: var(--wp--preset--color--gray-700);
}
.nnrj-embed__lock {
    flex: none;
    color: var(--wp--preset--color--gray-400);
}
.nnrj-embed__source {
    font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    color: var(--wp--preset--color--gray-700);
    overflow-wrap: anywhere;
}
.nnrj-embed__chip {
    margin-left: auto;
    flex: none;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--wp--preset--color--gray-300);
    border-radius: 999px;
    font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--gray-500);
    white-space: nowrap;
}

/* Iframe area. Min-height keeps the region usable before the provider paints;
   roster runs taller than the form. */
.nnrj-embed__frame {
    background: var(--wp--preset--color--base);
}
.nnrj-embed__iframe {
    display: block;
    width: 100%;
    min-height: 560px;
    border: 0;
}
.nnrj-embed--form .nnrj-embed__iframe {
    min-height: 520px;
}

/* Fallback callout: royal-blue left border + info icon + actions.
   .is-style-nnrj-callout-contact (custom.css) supplies bg + left border.
   It always renders, separate from the iframe, so a blocked embed never
   blocks the task. */
.nnrj-embed__fallback {
    margin-top: 0;
    gap: 0.75rem;
    align-items: flex-start;
}
.nnrj-callout__icon--info {
    flex: none;
    margin-top: 2px;
    color: var(--wp--preset--color--primary);
}
.nnrj-embed__fallback-body {
    flex: 1;
    min-width: 0;
}

/* Action buttons (open external / call / email). Real <a> links, 44px target. */
.nnrj-embed__actions {
    gap: 0.5rem 0.625rem;
}
.nnrj-embed__action .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* ==========================================================================
   PREA archive (live PDF rows + pending year rows)
   ========================================================================== */

.nnrj-prea-archive {
    padding: 0.375rem 1.375rem;
}
.nnrj-prea-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Row: icon tile + body + right-side status/download. 44px min target. */
.nnrj-prea-row {
    display: flex;
    align-items: center;
    gap: 0.9375rem;
    min-height: 44px;
    padding: 0.9375rem 0.375rem;
    border-top: 1px solid var(--wp--preset--color--gray-100);
}
.nnrj-prea-list > .nnrj-prea-row:first-child {
    border-top: 0;
}

/* The whole live row is a single link target. */
.nnrj-prea-row__link {
    display: flex;
    align-items: center;
    gap: 0.9375rem;
    width: 100%;
    padding: 0;
    text-decoration: none;
    color: inherit;
    border-radius: 2px;
}
.nnrj-prea-row--live .nnrj-prea-row__link:hover,
.nnrj-prea-row--live .nnrj-prea-row__link:focus-visible {
    background: var(--wp--preset--color--gray-50);
}

/* Icon tiles: gold for live documents, gray for pending. */
.nnrj-prea-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 2px;
}
.nnrj-prea-row__icon--doc {
    background: var(--wp--preset--color--gold-tint);
    color: var(--wp--preset--color--gold-text);
}
.nnrj-prea-row__icon--pending {
    background: var(--wp--preset--color--gray-100);
    color: var(--wp--preset--color--gray-400);
}

.nnrj-prea-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.nnrj-prea-row__title {
    font-weight: 700;
    line-height: 1.35;
    color: var(--wp--preset--color--primary);
}
.nnrj-prea-row__meta {
    font-weight: 600;
    color: var(--wp--preset--color--gray-500);
}
.nnrj-prea-row__desc {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--wp--preset--color--gray-500);
}
.nnrj-prea-row__link:hover .nnrj-prea-row__title,
.nnrj-prea-row__link:focus-visible .nnrj-prea-row__title {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Right-side download icon (live) / Pending label. */
.nnrj-prea-row__action {
    flex: none;
    display: inline-flex;
    color: var(--wp--preset--color--gray-400);
}
.nnrj-prea-row__status {
    flex: none;
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--gray-500);
}

/* Pending rows: gray, non-interactive. */
.nnrj-prea-row--pending .nnrj-prea-row__title,
.nnrj-prea-row--pending .nnrj-prea-row__desc {
    color: var(--wp--preset--color--gray-500);
}
.nnrj-prea-row--pending .nnrj-prea-row__desc {
    font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

/* Reporting callout: eyebrow + phone emphasis. */
.nnrj-prea-report__eyebrow {
    font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
/* Margin lives here rather than as a block style attribute: the line is now
   server-rendered (nnrj/site-contact variant "prea") so its own number stays
   editable from wp-admin. */
.nnrj-prea-report__phone {
    margin-top: 0;
    margin-bottom: var(--wp--preset--spacing--10, 0.5rem);
}
.nnrj-prea-report__phone a {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}
.nnrj-prea-report__phone a:hover,
.nnrj-prea-report__phone a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   Contact page (form + contact aside)
   ========================================================================== */

/* Two-column layout: form left, 360px-ish aside right; stacks on small. */
.nnrj-contact-layout {
    align-items: flex-start;
}

.nnrj-contact-aside {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.nnrj-contact-aside__eyebrow {
    font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Each contact row: leading icon + stacked label/value field. */
.nnrj-contact-aside__row {
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.625rem 0;
}
.nnrj-contact-aside__row--divided {
    margin-top: 0.25rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--wp--preset--color--gray-200);
}
.nnrj-contact-aside__icon {
    flex: none;
    margin-top: 2px;
    color: var(--wp--preset--color--gray-400);
}
.nnrj-contact-aside__field {
    flex: 1;
    min-width: 0;
    gap: 0.125rem;
}
.nnrj-contact-aside__label {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}
.nnrj-contact-aside__value {
    color: var(--wp--preset--color--gray-900);
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.nnrj-contact-aside__value--mono {
    font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

/* Burgundy "two boxes" warning sits below the contact card. */
.nnrj-contact-aside__warning {
    margin-top: 1rem;
}

@media (max-width: 781px) {
    .nnrj-contact-aside {
        margin-top: 1.5rem;
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .nnrj-prea-row__link,
    .nnrj-embed__action .wp-block-button__link {
        transition-duration: 0.01ms;
    }
}