/**
 * NNRJ Custom Styles
 * Brand overrides + M01 site chrome on top of voyager-block-theme.
 * Tokens only (var(--wp--preset--color--*)); no naked hex except icon strokes.
 */

/* ─── Skip link ─────────────────────────────────────────────────────────── */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
.screen-reader-text:focus {
    background: var(--wp--preset--color--primary);
    clip: auto;
    clip-path: none;
    color: var(--wp--preset--color--base);
    display: block;
    font-size: 1rem;
    font-weight: 600;
    height: auto;
    left: 1rem;
    outline: 3px solid var(--wp--preset--color--base);
    outline-offset: 2px;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    top: 1rem;
    width: auto;
    z-index: 9999;
}

/* ─── Focus indicator (royal-blue on light, white on dark; WCAG 2.4.7 / 1.4.11) ─── */
:focus-visible {
    outline: 3px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
    border-radius: 2px;
}
[data-surface="dark"] :focus-visible {
    outline-color: var(--wp--preset--color--base);
}

/* ─── Brand lockup (nnrj/site-brand) ────────────────────────────────────── */
.nnrj-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
}
.nnrj-brand__seal { width: 54px; height: 54px; flex: none; }
.nnrj-brand__text { display: flex; flex-direction: column; line-height: 1.08; }
.nnrj-brand__name {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--primary-dark);
    white-space: nowrap;
}
.nnrj-brand__eyebrow {
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    /* gray-700 (not gray-500): at 11px this must clear 7:1 for WCAG AAA.
       gray-700 on white ~10.4:1; gray-500 was 4.75:1 (AA only). */
    color: var(--wp--preset--color--gray-700);
    margin-top: 3px;
}

/* ─── Announcement bar (nnrj/announcement-bar) ──────────────────────────── */
.nnrj-alert { background: var(--wp--preset--color--burgundy); color: var(--wp--preset--color--base); }
.nnrj-alert--royal { background: var(--wp--preset--color--primary); }
.nnrj-alert[hidden] { display: none; }
.nnrj-alert__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 11px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.nnrj-alert__msg { display: flex; align-items: center; gap: 0.625rem; margin: 0; font-size: 0.9375rem; font-weight: 500; }
.nnrj-alert__icon { flex: none; }
.nnrj-alert__link { color: var(--wp--preset--color--base); text-decoration: underline; font-weight: 600; }
.nnrj-alert__dismiss {
    flex: none;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 2px;
    color: var(--wp--preset--color--base);
    cursor: pointer;
}
.nnrj-alert__dismiss:hover { background: rgba(255, 255, 255, 0.12); }

/* ─── Utility bar (desktop only) ────────────────────────────────────────── */
.nnrj-utilitybar__inner {
    max-width: 1280px;
    margin: 0 auto;
    min-height: 42px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.84375rem;
    font-weight: 600;
}
.nnrj-utilitybar__phone { display: inline-flex; align-items: center; gap: 7px; color: var(--wp--preset--color--base); text-decoration: none; }
.nnrj-utilitybar__phone:hover { text-decoration: underline; }
.nnrj-utilitybar__links { display: flex; align-items: center; }
.nnrj-utilitybar__links a {
    color: var(--wp--preset--color--gray-300);
    text-decoration: none;
    padding: 0 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    line-height: 1.2;
}
.nnrj-utilitybar__links a:first-child { border-left: 0; padding-left: 0; }
.nnrj-utilitybar__links a:hover { color: var(--wp--preset--color--base); text-decoration: underline; }
/* Matches the primary-nav hamburger breakpoint below. When these disagreed, the
   1025-1140px band showed the desktop utility bar above a collapsed nav. */
@media (max-width: 1140px) { .nnrj-utilitybar { display: none; } }

/* ─── Header main bar ───────────────────────────────────────────────────── */
/* Header owns a stacking context above page content so its nav dropdowns are
   not painted behind the homepage hero (the hero is position:relative; without
   this, hovering a menu opens the submenu *under* the hero). */
.nnrj-header { position: relative; z-index: 100; }
.nnrj-header__main { border-bottom: 1px solid var(--wp--preset--color--gray-200); }
.nnrj-header__bar { max-width: 1280px; margin: 0 auto; min-height: 78px; padding: 0.5rem 24px; }
.nnrj-header__actions { gap: 0.5rem; }
/* Flush the three header bands (kill default blockGap slivers) */
.nnrj-header > * { margin-block: 0 !important; }
/* Top-level bands butt together. The root flow layout applies blockGap between
   the header part, <main> and the footer part, which put a 16px sliver under the
   header on EVERY page (most visible as a white strip above the home hero).
   These three are full-bleed bands that own their internal padding. */
.wp-site-blocks > * { margin-block: 0 !important; }

/* Same reasoning inside the home page: each section pattern is a full-bleed band
   with its own vertical padding, so blockGap would only add slivers between them. */
.nnrj-home-main > * { margin-block: 0 !important; }

/* Primary nav spacing. NOTE: core nests the item list inside
   .wp-block-navigation__responsive-container(-content), so it is NOT a direct
   child of the nav -- the previous "> .wp-block-navigation__container" selector
   never matched, leaving gap:normal and killing the top-level hover rule below. */
.nnrj-primary-nav .wp-block-navigation__container { gap: 0.125rem; }
/* Collapse primary nav to the hamburger below this width. Raised from 1024px: the
   roomier item padding needs more room to hold one row (measured, see nav audit). */
@media (max-width: 1140px) {
    .nnrj-primary-nav .wp-block-navigation__responsive-container-open { display: flex !important; }
    .nnrj-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}

/* ─── Primary nav (light main bar; click dropdowns; white panel) ────────── */
.nnrj-primary-nav { font-size: 14px; font-weight: 600; }
.nnrj-primary-nav .wp-block-navigation-item__content,
.nnrj-primary-nav .wp-block-navigation-item__content:visited {
    color: var(--wp--preset--color--gray-900);
    padding: 0.5rem 0.75rem;
    border-radius: 2px;
}
/* Descendant, not child: see the container-nesting note above. As a "> " chain
   this never matched, so top-level items had no hover state at all. */
.nnrj-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.nnrj-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
    color: var(--wp--preset--color--primary);
    background: var(--wp--preset--color--gray-50);
}
/* Dropdown panel */
.nnrj-primary-nav .wp-block-navigation__submenu-container {
    background: var(--wp--preset--color--base) !important;
    border: 1px solid var(--wp--preset--color--gray-200);
    border-top: 3px solid var(--wp--preset--color--primary);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    min-width: 268px;
    padding: 6px 0;
}
.nnrj-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: var(--wp--preset--color--gray-700) !important;
    padding: 0.5625rem 1.125rem;
    font-size: 14.5px;
    font-weight: 500;
    border-radius: 0;
}
.nnrj-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.nnrj-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
    color: var(--wp--preset--color--primary) !important;
    background: var(--wp--preset--color--gray-50);
    box-shadow: inset 3px 0 0 var(--wp--preset--color--primary);
}
.nnrj-primary-nav .wp-block-navigation__submenu-icon { opacity: 0.7; }
/* ─── Mobile overlay menu (<=1024px): left-aligned, full-width rows, clear hierarchy ─── */
.nnrj-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--primary-dark) !important;
    padding: 1.5rem 0 4rem;
}
/* Stack left, full width, no inherited right-justify from the desktop nav */
.nnrj-primary-nav .is-menu-open .wp-block-navigation__container {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    padding: 0 1.5rem;
}
.nnrj-primary-nav .is-menu-open .wp-block-navigation-item { width: 100%; }
.nnrj-primary-nav .is-menu-open .wp-block-navigation-item__content {
    display: block;
    width: 100%;
    text-align: left;
    color: var(--wp--preset--color--base) !important;
    font-size: 1.0625rem;
    font-weight: 600;
    padding: 0.75rem 0;
    min-height: 44px;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0;
}
/* Top-level sections separated by hairlines */
.nnrj-primary-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.nnrj-primary-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:first-child {
    border-top: 0;
}
/* Children: flat (no panel), indented, lighter, and LEFT-aligned (kill desktop right-justify) */
.nnrj-primary-nav .is-menu-open .wp-block-navigation__submenu-container {
    position: static !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 0 0.5rem !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    text-align: left !important;
}
.nnrj-primary-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item,
.nnrj-primary-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    width: 100% !important;
    text-align: left !important;
    justify-content: flex-start !important;
}
.nnrj-primary-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    color: var(--wp--preset--color--gray-300) !important;
    padding: 0.5rem 0 0.5rem 1rem !important;
    min-height: 40px;
}
.nnrj-primary-nav .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--gray-900); width: 44px; height: 44px; }
.nnrj-primary-nav .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--base); }

/* ─── Search toggle + panel ─────────────────────────────────────────────── */
.nnrj-search-toggle {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--wp--preset--color--gray-200);
    border-radius: 2px;
    color: var(--wp--preset--color--gray-700);
    cursor: pointer;
    flex: none;
}
.nnrj-search-toggle:hover {
    color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    background: var(--wp--preset--color--gray-50);
}
.nnrj-header__search { display: none; border-bottom: 1px solid var(--wp--preset--color--gray-200); padding-top: 1rem; padding-bottom: 1rem; }
.nnrj-header__search.is-open { display: block; }

/* Search field layout. The form itself picked up a 1px border from core/theme
   styles while the inner wrapper carried a second one, so an empty 1280px box
   framed a 640px field jammed against its left edge. Border belongs on the inner
   wrapper only; the form is just the 1280px alignment rail, padded to line the
   field up with the logo and nav above it. */
.nnrj-header__search .wp-block-search {
    border: 0;
    padding-inline: 24px;
}
.nnrj-header__search .wp-block-search__inside-wrapper {
    max-width: 560px;
    padding: 4px;
    border: 1px solid var(--wp--preset--color--gray-300);
    border-radius: 2px;
    background: var(--wp--preset--color--base);
}
/* Focus ring on the whole field rather than the bare input. */
.nnrj-header__search .wp-block-search__inside-wrapper:focus-within {
    border-color: var(--wp--preset--color--primary);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.18);
}
.nnrj-header__search .wp-block-search__input { padding: 0 0.5rem; background: transparent; }
.nnrj-header__search .wp-block-search__input:focus { outline: none; }
/* The submit button inherited a gold border over its royal fill. */
.nnrj-header__search .wp-block-search__button { border: 0; margin-left: 6px; }

/* ─── Quick-access button bar ───────────────────────────────────────────── */
.wp-block-buttons .wp-block-button__link {
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.wp-block-buttons .wp-block-button__link:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
@media (prefers-reduced-motion: reduce) {
    .wp-block-buttons .wp-block-button__link { transition: none; }
}

/* Outline button variation: parent theme renders a red bg that fails contrast.
   Force an accessible royal-blue-on-white outline with a royal-blue-fill hover. */
.wp-block-button.is-style-outline > .wp-block-button__link {
    background-color: transparent;
    color: var(--wp--preset--color--primary);
    border: 2px solid var(--wp--preset--color--primary);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
}

/* ─── Announcements feed ────────────────────────────────────────────────── */
.wp-block-post-terms a { text-decoration: none; }
.wp-block-post-terms a:hover { text-decoration: underline; }

/* ─── Interior content pages ─────────────────────────────────────────────
   Interior pages share ONE 1280px rail with the site chrome (utility bar,
   header bar, footer), so the breadcrumb, H1, lede, prose, and any section
   band below all start on the same left edge. Before this, a page ran three
   different left edges (header 80px / prose 330px / cards 220px at 1440),
   which is what made interior pages read as unrelated slabs.

   Heading scale, weight, and colour come from theme.json
   (styles.elements.h1-h4) so the editor previews them correctly. Vertical
   rhythm is re-stated here because WP's layout CSS emits its own
   margin-block-start on every flow child at the same specificity as
   theme.json's :root :where(h2) and lands later in the cascade -- setting
   rhythm in theme.json alone silently loses inside post-content. */

/* Display weight for the two heading levels that carry a page. theme.json
   sets these on styles.elements.h1/h2, but WP emits element styles with a
   bare `h1` selector (0,0,1) while the parent theme's heading block style
   lands as `:root :where(.wp-block-heading)` (0,1,0) -- so the element rule
   never applies to a core Heading block. The child theme.json already
   raises that block rule from the parent's 500 to 700; these two lines take
   the display levels the rest of the way. */
:root :where(h1.wp-block-heading),
:root :where(h2.wp-block-heading) { font-weight: 800; }

/* Interior body band. The band itself runs the full 1280 rail so cards, grids
   and column layouts can use all of it; running text is capped to a readable
   measure instead. Capping only text-level children is what lets one rule
   serve both a prose page and a card-grid page.

   This works because the band's inner group is FLOW layout: flow does not add
   auto margins, so a capped child stays on the left edge. Under the previous
   constrained bands the same cap would have re-centred every paragraph.

   Applied at any depth, not just to direct children: components that own the
   full rail (accordion panels, job rows, callouts) hold running text too, and
   before this they set ~130-character lines. Inside a column, grid cell or card
   the element is already narrower than the measure, so the cap is a no-op
   there and those layouts are untouched.

   The element class is carried in the selector purely for specificity. The
   parent theme has `.alignwide:not(.is-layout-constrained) > *` (0,2,0) setting
   max-width to var(--wp--custom--layout--wide), a token this child's theme.json
   does not define -- so the declaration is invalid at computed-value time,
   resolves to `none`, and still outranks a single-class cap. Matching its
   specificity is what makes the measure hold inside alignwide sections.
   `:is()` rather than `:where()` deliberately: :where() contributes nothing, so
   the two rules tied at (0,2,0) and the parent's sheet won on source order.
   :is() adds its argument's element specificity, taking this to (0,2,1). */
.wp-block-group.nnrj-interior__flow :is(p, li, dd, dt, blockquote),
.wp-block-column.nnrj-interior__body :is(p, li, dd, dt, blockquote) {
    max-width: 72ch;
}

/* That same parent-theme rule also sets margin-left/right:auto, so anything it
   caps gets centred as well -- which put the PREA intro paragraph 200px inside
   a heading sitting on the rail. Left-align the children of an alignwide or
   alignfull flow section inside the interior band. Specificity (0,3,0) clears
   the parent's (0,2,0); it carries no !important, so no escalation is needed. */
.nnrj-interior__flow :is(.alignwide, .alignfull):not(.is-layout-constrained) > * {
    margin-left: 0;
    margin-right: auto;
}
/* Headings are short enough to need no cap, but keep them on the same measure
   so a long one wraps in step with the paragraph beneath it. */
.nnrj-interior__flow > :where(h2, h3, h4, h5, h6),
.nnrj-interior__flow > .wp-block-post-content > :where(h2, h3, h4, h5, h6) {
    max-width: 72ch;
}

/* Some pages wrap their body in a group that carries its own contentSize
   (860px) saved in the post content, so the wrapper spans the rail while its
   children cap and re-centre inside it -- a 210px inset that no selector can
   undo, because the layout rule's auto margins are !important. That content is
   the client's to edit, not ours, so cap the WRAPPER to the measure instead:
   its children then fill it exactly and the auto margins resolve to zero. */
.nnrj-interior__flow > .wp-block-post-content > .wp-block-group.is-layout-constrained,
.nnrj-interior__body > .wp-block-post-content > .wp-block-group.is-layout-constrained {
    max-width: 72ch;
}

/* Two-column interior: prose + sidebar. core/columns supplies the track and
   the mobile stack, so this only refines alignment and stickiness. */
.nnrj-interior { align-items: flex-start; }
.nnrj-interior > .wp-block-column { min-width: 0; }
@media (min-width: 782px) {
    .nnrj-interior__aside { position: sticky; top: 1.5rem; }
}

/* Prose rhythm. Headings earn their separation from space and weight rather
   than the old full-width grey hairline, which read as a default editor
   style and fought the brand rules used everywhere else. */
.wp-block-post-content :where(h2) { margin-top: var(--wp--preset--spacing--40); margin-bottom: 0.625rem; }
.wp-block-post-content :where(h3) { margin-top: 1.875rem; margin-bottom: 0.5rem; }
.wp-block-post-content :where(h4) { margin-top: 1.5rem; margin-bottom: 0.375rem; }
.wp-block-post-content :where(p, ul, ol) { margin-bottom: 1.125rem; }

/* Nothing pushes the column open at its top edge. */
.wp-block-post-content > :first-child,
.wp-block-post-content > :first-child > :first-child { margin-top: 0; }

/* Lists: theme.json cannot reach ::marker or per-item spacing. */
.wp-block-post-content :where(ul, ol) { padding-left: 1.375rem; }
.wp-block-post-content :where(ul, ol) li { margin-bottom: 0.5rem; }
.wp-block-post-content :where(ul, ol) li:last-child { margin-bottom: 0; }
.wp-block-post-content :where(ul, ol) li::marker {
    color: var(--wp--preset--color--primary);
    font-weight: 700;
}

/* Sidebar card stack: the About-style child-page cards read as a vertical
   list beside the prose instead of a two-up grid stranded below the fold. */
.nnrj-interior__aside .nnrj-about-card + .nnrj-about-card { margin-top: 0.875rem; }
.nnrj-interior__aside .nnrj-about-card__icon { width: 36px; height: 36px; }

/* ─── Footer ────────────────────────────────────────────────────────────── */
.nnrj-footer {
    border-top: 4px solid var(--wp--preset--color--burgundy);
    padding: 3rem 24px 1.5rem;
}
.nnrj-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2.5rem;
    align-items: start;
}
.nnrj-footer .nnrj-brand__name { color: var(--wp--preset--color--base); }
.nnrj-footer .nnrj-brand__eyebrow { color: var(--wp--preset--color--gray-300); }
.nnrj-footer .nnrj-brand__seal {
    width: 50px; height: 50px; padding: 3px;
    background: var(--wp--preset--color--base);
    border-radius: 999px;
}
.nnrj-footer__desc { color: var(--wp--preset--color--gray-300); font-size: 0.9375rem; margin-top: 0.75rem; max-width: 30ch; }
/* Footer muted text sits on primary-dark. gray-300 clears 7:1 (WCAG AAA) on that
   fill (~9.6:1); gray-400 was 5.55:1 (AA only). Matches the gray-300 already used
   for the footer nav, contact, and description. */
.nnrj-footer__label {
    font-family: ui-monospace, "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--gray-300);
    margin: 0 0 0.75rem;
}
.nnrj-footer__nav .wp-block-navigation__container { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.nnrj-footer__nav .wp-block-navigation-item__content { color: var(--wp--preset--color--gray-300); font-size: 0.9375rem; padding: 0.125rem 0; }
.nnrj-footer__nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--base); text-decoration: underline; }
.nnrj-footer__contact { font-style: normal; color: var(--wp--preset--color--gray-300); font-size: 0.9375rem; line-height: 1.7; }
.nnrj-footer__contact a { color: var(--wp--preset--color--base); }
.nnrj-footer__mail { display: flex; flex-direction: column; gap: 0.75rem; }
.nnrj-footer__card {
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid var(--wp--preset--color--gray-400);
    padding: 0.625rem 0.875rem;
    border-radius: 0 2px 2px 0;
}
.nnrj-footer__card--inmate { background: rgba(139, 41, 66, 0.28); border-left-color: var(--wp--preset--color--burgundy); }
.nnrj-footer__card-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wp--preset--color--gray-300); font-weight: 700; margin-bottom: 0.25rem; }
.nnrj-footer__card p { margin: 0; color: var(--wp--preset--color--base); font-size: 0.9375rem; }
.nnrj-footer__card-note { color: var(--wp--preset--color--gray-300) !important; font-size: 0.8125rem !important; margin-top: 0.375rem !important; }
.nnrj-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    gap: 1rem;
}
.nnrj-footer__copyright, .nnrj-footer__by { margin: 0; color: var(--wp--preset--color--gray-300); }
.nnrj-footer__by a { color: var(--wp--preset--color--gray-300); }
.nnrj-footer__bottom-right { gap: 1.25rem; }
.nnrj-footer__compliance .wp-block-navigation__container { gap: 1.125rem; }
.nnrj-footer__compliance .wp-block-navigation-item__content { color: var(--wp--preset--color--gray-300); font-size: 0.875rem; }
.nnrj-footer__compliance .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--base); text-decoration: underline; }

/* ─── ARIA Tabs (Family and Inmate Services; M06) ───────────────────────── */
.nnrj-tabs { container-type: inline-size; }
.nnrj-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 2px solid var(--wp--preset--color--border);
    margin: 0;
    padding: 0;
    list-style: none;
}
.nnrj-tabs__tab {
    background: none;
    border: 2px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    color: var(--wp--preset--color--primary);
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0.625rem 1.125rem;
    position: relative;
    bottom: -2px;
    transition: background 0.12s ease, color 0.12s ease;
}
.nnrj-tabs__tab:hover { background: var(--wp--preset--color--base-2); }
.nnrj-tabs__tab[aria-selected="true"] {
    background: var(--wp--preset--color--base);
    border-color: var(--wp--preset--color--border);
    border-bottom-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    font-weight: 600;
}
.nnrj-tabs__panel { padding: 1.5rem 0; }
.nnrj-tabs__panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
    .nnrj-tabs__tab { transition: none; }
}

/* ─── Block style variations (registered in functions.php) ──────────────────
   Recurring section/card treatments shared across missions M02-M07. Apply via
   the Group block's Styles panel, or className "is-style-nnrj-*". Tokens only. */

/* Card: white surface, hairline border, soft shadow */
.wp-block-group.is-style-nnrj-card {
    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);
    padding: clamp(1.25rem, 3vw, 2rem);
}

/* Info callout: gold top edge ("What you need to know") */
.wp-block-group.is-style-nnrj-callout-info {
    background: var(--wp--preset--color--base);
    border-top: 3px solid var(--wp--preset--color--accent);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    padding: clamp(1.25rem, 3vw, 2rem);
}

/* Warning callout: burgundy left border + tint (do-not / urgent notices) */
.wp-block-group.is-style-nnrj-callout-warning {
    background: var(--wp--preset--color--burgundy-tint);
    border: 1px solid var(--wp--preset--color--burgundy-border);
    border-left: 4px solid var(--wp--preset--color--burgundy);
    border-radius: 0 2px 2px 0;
    color: var(--wp--preset--color--burgundy-text);
    padding: clamp(1rem, 2.5vw, 1.5rem);
}
.wp-block-group.is-style-nnrj-callout-warning :where(h1, h2, h3, h4) {
    color: var(--wp--preset--color--burgundy-text);
}

/* Contact callout: royal-blue left border (dept/person/phone/mail blocks) */
.wp-block-group.is-style-nnrj-callout-contact {
    background: var(--wp--preset--color--gray-50);
    border-left: 4px solid var(--wp--preset--color--primary);
    border-radius: 0 2px 2px 0;
    padding: clamp(1.25rem, 3vw, 2rem);
}

/* Dark band: deep-navy full-bleed section with gold top edge (quick facts) */
.wp-block-group.is-style-nnrj-band-dark {
    background: var(--wp--preset--color--primary-dark);
    border-top: 3px solid var(--wp--preset--color--accent);
    color: var(--wp--preset--color--base);
}
.wp-block-group.is-style-nnrj-band-dark :where(h1, h2, h3, h4, p, li, a) {
    color: var(--wp--preset--color--base);
}
.wp-block-group.is-style-nnrj-band-dark :focus-visible {
    outline-color: var(--wp--preset--color--base);
}

/* ─── Interior component kit (shared patterns M04-M07) ──────────────────────
   Breadcrumb, page header, key facts, contact rows, document list, embed shell.
   Tokens only. */

/* Breadcrumb */
.nnrj-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--wp--preset--color--gray-500);
}
.nnrj-breadcrumb li { display: flex; align-items: center; gap: 0.5rem; }
.nnrj-breadcrumb li + li::before { content: "›"; color: var(--wp--preset--color--gray-400); }
.nnrj-breadcrumb a { color: var(--wp--preset--color--primary); text-decoration: none; }
.nnrj-breadcrumb a:hover { text-decoration: underline; }
.nnrj-breadcrumb [aria-current="page"] { color: var(--wp--preset--color--gray-700); }
/* Lede sits flush-left under the H1, capped to a readable measure. The header
   band runs the full 1280px rail, so an uncapped lede sets ~150-character
   lines. Capping alone is not enough: WP's constrained layout gives every
   child `margin-inline: auto`, so a narrower child re-centres itself in the
   band (this is why the FOIA lede was floating mid-page). Pinning the inline
   start margin to 0 holds it on the rail's left edge. Physical longhands, not
   `margin-inline`: the layout rule uses margin-left/right, and logical and
   physical longhands only resolve against each other by document order, so a
   logical override loses to it no matter how specific the selector is. */
.nnrj-page-header .nnrj-page-header__lede {
	margin-top: 0.5rem;
	max-width: 68ch;
	margin-left: 0;
	margin-right: auto;
}

/* Eyebrow / kicker above an archive H1 (announcement category archives).
   Deep navy (not royal) so it never reads as a link; uppercase + tracked so it
   reads as a section label. Contrast: primary-dark on white ~13:1 (WCAG AAA). */
.nnrj-page-header__eyebrow {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--primary-dark);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ── Interior page-header imagery (opt-in) ─────────────────────────────────
   A muted open-license Northern Neck photograph anchored to the right of the
   header band, faded under a left-to-right white scrim so the breadcrumb, H1,
   and lede always sit on near-solid white — text contrast is unchanged from the
   plain header (the band stays >=82% white everywhere text can land). The photo
   reads as a quiet regional wash, never a literal picture competing with copy.

   Opt in per template by adding two classes to the header's class list:
     has-photo  +  one of  has-photo--refuge | has-photo--river | has-photo--wheat
   The photo is purely decorative (a CSS background), so it needs no alt text.
   Sources + licenses: assets/images/CREDITS.md. Tokens only. WCAG 2.1 AA. */
.nnrj-page-header.has-photo {
	position: relative;
	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
}
.nnrj-page-header.has-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--base) 0%,
		var(--wp--preset--color--base) 46%,
		rgba(255, 255, 255, 0.90) 64%,
		rgba(255, 255, 255, 0.82) 100%
	);
}
/* Keep the breadcrumb, H1, and lede above the scrim. */
.nnrj-page-header.has-photo > * { position: relative; z-index: 1; }

/* Region modifiers — each maps to one Northern Neck photograph. */
.nnrj-page-header.has-photo--refuge { background-image: url("../images/region-refuge.jpg"); }
.nnrj-page-header.has-photo--river  { background-image: url("../images/region-river.jpg"); }
.nnrj-page-header.has-photo--wheat  { background-image: url("../images/region-wheat.jpg"); }

/* On narrow screens the text spans the full band; drop the photo so nothing
   ever sits behind the words where the scrim cannot fully cover them. */
@media (max-width: 600px) {
	.nnrj-page-header.has-photo { background-image: none; }
	.nnrj-page-header.has-photo::before { display: none; }
}
/* Honor an explicit request for more contrast: remove the wash entirely. */
@media (prefers-contrast: more) {
	.nnrj-page-header.has-photo { background-image: none; }
	.nnrj-page-header.has-photo::before { display: none; }
}

/* Key facts list (info callout) */
.nnrj-keyfacts { padding-left: 0; list-style: none; }
.nnrj-keyfacts li { padding: 0.375rem 0; border-bottom: 1px solid var(--wp--preset--color--gray-100); }
.nnrj-keyfacts li:last-child { border-bottom: 0; }

/* Callout with leading icon (warning) */
.nnrj-callout--icon { gap: 0.75rem; align-items: flex-start; }
.nnrj-callout__icon { flex: none; margin-top: 2px; color: var(--wp--preset--color--burgundy); }

/* Contact callout rows */
.nnrj-contact__row { margin: 0.25rem 0; }
.nnrj-contact__row a { font-weight: 600; }

/* Document download list. Design-locked rows: the file icon and the "(PDF)" tag
   are rendered here (::before / ::after), not as editable blocks, so content-only
   rows expose only the title/link and description in the editor. */
.nnrj-doc-list { display: flex; flex-direction: column; gap: 0; }
.nnrj-doc-row {
    gap: 0.875rem;
    align-items: flex-start;
    min-height: 44px;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--wp--preset--color--gray-200);
}
.nnrj-doc-row:last-child { border-bottom: 0; }
.nnrj-doc-row::before {
    content: "";
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    background-color: var(--wp--preset--color--primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z'/%3E%3Cpath%20d='M14%202v5h5'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z'/%3E%3Cpath%20d='M14%202v5h5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.nnrj-doc-row__body { flex: 1; }
.nnrj-doc-row__title a { font-weight: 600; text-decoration: none; }
.nnrj-doc-row__title a:hover { text-decoration: underline; }
.nnrj-doc-row__title::after {
    content: " (PDF)";
    color: var(--wp--preset--color--gray-500);
    font-weight: 400;
    font-size: 0.875rem;
}
/* Editor: make the locked, content-only rows read clearly as an editable list. */
.nnrj-doc-row__title a { pointer-events: auto; }

/* Embed shell (M07) */
.nnrj-embed { border: 1px solid var(--wp--preset--color--gray-200); border-radius: 2px; overflow: hidden; }
.nnrj-embed__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--wp--preset--color--gray-50);
    border-bottom: 1px solid var(--wp--preset--color--gray-200);
    color: var(--wp--preset--color--gray-700);
}
.nnrj-embed__chip {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.nnrj-embed__frame { background: var(--wp--preset--color--base); }
.nnrj-embed__frame iframe { display: block; width: 100%; min-height: 640px; border: 0; }
.nnrj-embed__fallback { margin: 0; border-radius: 0; border-left: 0; border-top: 1px solid var(--wp--preset--color--gray-200); }

/* ─── Print ─────────────────────────────────────────────────────────────── */
@media print {
    .nnrj-alert,
    .nnrj-utilitybar,
    header.wp-block-group,
    footer.wp-block-group,
    .wp-block-navigation { display: none; }
    main { margin: 0; padding: 0; }
}
/* ---------------------------------------------------------------------------
   Home: member jurisdictions band
   Replaces the dark "Visit, call, or write to us" facts band. The supplied
   seals are not a coherent set -- two square county seals (1:1) next to two
   wide wordmarks (up to 3.7:1) -- so cells are fixed-height and the logo is
   object-fit contained rather than stretched to a common width.
   --------------------------------------------------------------------------- */
.nnrj-counties__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
	gap: 1.25rem;
	align-items: stretch;
}
.nnrj-counties__item { margin: 0; }
.nnrj-counties__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	height: 100%;
	min-height: 7.5rem;
	padding: 0.75rem;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nnrj-counties__link:hover,
.nnrj-counties__link:focus-visible {
	border-color: var(--wp--preset--color--gray-200);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.nnrj-counties__logo {
	max-height: 4.25rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
.nnrj-counties__name {
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	color: var(--wp--preset--color--secondary);
}
/* Town of Warsaw holds a board seat but has no seal in the supplied set. Keep
   the tile full height so the row stays even, and lean on the name. */
.nnrj-counties__item--textonly .nnrj-counties__name {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--primary);
}

/* Visit facts (hours + directions) above the jurisdictions row. These are the
   two facts the footer does not carry, so they survive the band swap. */
.nnrj-visit__row {
	gap: 2rem;
	margin-bottom: 2rem;
	align-items: stretch;
}
.nnrj-visit__card {
	flex: 1 1 16rem;
	max-width: 22rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--gray-200);
	border-radius: 4px;
	padding: 1rem 1.125rem;
}
.nnrj-visit__icon { color: var(--wp--preset--color--primary); display: block; margin-bottom: 0.375rem; }
.nnrj-visit__label {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	color: var(--wp--preset--color--secondary);
}
.nnrj-visit__value { font-weight: 600; }
.nnrj-counties__rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--gray-200);
	margin: 0 auto 2rem;
	max-width: 46rem;
}

/* ── Policy manual (staff/policies) ──────────────────────────────────────────
   ~190 documents across 19 sections. The page is align:full to escape the shared
   staff-section body cap (880px) and post-content cap (780px); this rule sets the
   real width to match the 1280px page-header band above it, so the two line up.
   On wide screens the section list rides alongside the content; it stacks on top
   on narrow ones. TOC markup is server-rendered by nnrj/policy-toc; filtering is
   layered on in assets/js/custom.js. */
/* The shared staff-section template nests this inside a body group capped at
   880px (and post-content at 780px), while the page-header band above runs to
   1280px. align:full only escapes to the 880px group, so break out the rest of
   the way here: centre a 1280px box on the viewport regardless of the offset,
   capped to leave a gutter so it never triggers horizontal scroll. Because the
   parent group is itself centred, left:50% lands on the viewport centre and the
   translate re-centres the wider box on it. */
.nnrj-policy-manual {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(1280px, 100vw - 2rem);
    padding-inline: var(--wp--preset--spacing--40);
}
/* The filter hides rows with the [hidden] attribute, but [hidden] carries only the
   UA stylesheet's display:none, which ANY author display rule outranks. Doc rows
   are flex containers (block layout support emits display:flex), so without this
   they stay on screen while the result count claims they are gone. */
.nnrj-policy-manual [hidden] { display: none !important; }

.nnrj-policy-section + .nnrj-policy-section { margin-top: 2.75rem; }
.nnrj-policy-section__title {
    /* Down from the theme's default h2. This is a 19-section lookup index, not a
       marketing page: display-sized headings just add scrolling between someone
       and the policy they came for. */
    margin: 0 0 0.75rem;
    font-size: var(--wp--preset--font-size--lg);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--wp--preset--color--primary);
    /* Section names come from the client's manual and include unbroken tokens like
       "Management/Regulations", which has no wrap opportunity and pushes the page
       into horizontal scroll on a phone. */
    overflow-wrap: break-word;
    /* Anchored headings clear the sticky page header instead of hiding under it. */
    scroll-margin-top: 5rem;
}
.nnrj-policy-section__note { margin: 0 0 0.5rem; }

.nnrj-policy-toc__heading { margin: 0 0 0.75rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; }
.nnrj-policy-toc__list { margin: 0; padding: 0; list-style: none; }
.nnrj-policy-toc__item + .nnrj-policy-toc__item { border-top: 1px solid var(--wp--preset--color--gray-200); }
.nnrj-policy-toc__link {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.4375rem 0;
    line-height: 1.3;
    text-decoration: none;
}
.nnrj-policy-toc__link:hover .nnrj-policy-toc__label { text-decoration: underline; }
/* min-width:0 lets the flex child shrink past its min-content width so long names
   can wrap in the narrow column instead of forcing overflow. */
.nnrj-policy-toc__label { min-width: 0; overflow-wrap: break-word; }
.nnrj-policy-toc__count { flex: none; color: var(--wp--preset--color--gray-500); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.nnrj-policy-toc__total { margin: 0.75rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--wp--preset--color--gray-200); color: var(--wp--preset--color--gray-500); font-size: 0.8125rem; }

.nnrj-policy-toc__filter { margin-bottom: 0.875rem; }
.nnrj-policy-toc__filter-label { display: block; margin-bottom: 0.25rem; font-size: 0.8125rem; font-weight: 600; }
.nnrj-policy-toc__input {
    width: 100%;
    min-height: 40px;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--wp--preset--color--gray-300, #cbd5e1);
    border-radius: 2px;
}
.nnrj-policy-toc__status { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--wp--preset--color--gray-500); }
.nnrj-policy-toc__status:empty { margin: 0; }

@media (min-width: 1024px) {
    /* Two children only -- sections wrapper + TOC -- so this is a plain two-column
       grid with no per-section rows. That is what keeps every section's left edge
       identical and prevents the stretched gaps the old row-spanning layout had. */
    .nnrj-policy-manual {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 16rem;
        gap: var(--wp--preset--spacing--40);
        align-items: start;
        /* Force items to fill their tracks. The theme's layout CSS leaves
           justify-items at a non-stretch value, so the sections column would
           otherwise shrink-wrap its content -- narrowing (and shifting the doc
           rows) whenever the filter hides most rows. */
        justify-items: stretch;
    }
    /* The TOC block comes first in the DOM but belongs in the right-hand column;
       place both explicitly so document order does not decide the columns. The
       explicit width holds the section column at its full track regardless of how
       few rows the filter leaves visible. */
    .nnrj-policy-sections { grid-column: 1; grid-row: 1; width: 100%; min-width: 0; }
    .nnrj-policy-toc {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 1.5rem;
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
        padding: 1.125rem 1.25rem;
        border: 1px solid var(--wp--preset--color--gray-200);
        border-radius: 3px;
        background: var(--wp--preset--color--base);
    }
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ─── Link affordance + minimum tap targets ─────────────────────────────── */
/* Content links are underlined globally via theme.json elements.link (WCAG
   1.4.1: color alone cannot distinguish a link). That rule is zero-specificity
   (:where), so component links (cards, doc rows, navs, breadcrumbs) keep their
   own explicit text-decoration rules. Navigation menus are identified by
   context and opt out here, gaining an underline only on hover/focus. */
.wp-block-navigation a { text-decoration: none; }
.wp-block-navigation a:hover,
.wp-block-navigation a:focus { text-decoration: underline; }

/* Compact chrome links need >=24px pointer targets (WCAG 2.5.8). */
.nnrj-alert__link,
.nnrj-footer__contact a,
.nnrj-footer__by a { display: inline-block; padding-block: 4px; }
.nnrj-breadcrumb a { display: inline-block; padding-block: 2px; }
.nnrj-footer__nav .wp-block-navigation-item__content,
.nnrj-footer__compliance .wp-block-navigation-item__content { display: inline-block; padding-block: 2px; }