/* ==========================================================================
   NARPO Site Header Block
   Fixed-position bar with logo + primary nav + CTA button.
   Typography is intentionally left undefined — handled by the site font CSS.
   ========================================================================== */

:root {
    /* --narpo-content-width lives in narpo-tokens.css; see hero-cover.css. */
    --narpo-header-height: 96px;
    --narpo-header-gutter: clamp(1rem, 3vw, 2.5rem);

    /* Manchester masthead: warm paper, slate ink, brass for state. The bar
       carries no shadow — a broadsheet double rule closes it instead. */
    --narpo-header-bg:           var(--mn-paper, #f9f6f1);
    --narpo-header-fg:           var(--mn-ink, #19222f);
    --narpo-header-muted:        var(--mn-ink-muted, #4e5661);
    --narpo-header-accent:       var(--mn-brass-ink, #8e4900);
    --narpo-header-accent-hover: var(--mn-brass-ink, #8e4900);
    --narpo-header-border:       var(--mn-rule, #d4cec5);
    --narpo-header-shadow:       none;

    --narpo-header-radius:       3px;
    --narpo-header-z:            1000;

    --narpo-header-dropdown-bg:  var(--mn-paper, #f9f6f1);
    --narpo-header-dropdown-shadow: 0 1px 2px oklch(20% 0.03 258 / 0.08),
                                    0 18px 36px -22px oklch(20% 0.03 258 / 0.45);

    /* Kept as an alias so the masthead never drifts from the system curve. */
    --narpo-header-ease:         var(--narpo-ease-state, cubic-bezier(0.4, 0, 0.2, 1));
}

html {
    scroll-padding-top: calc(var(--narpo-header-computed-height, var(--narpo-header-height)) + 1rem);
}

body {
    padding-top: var(--narpo-header-computed-height, var(--narpo-header-height));
}

/* ==========================================================================
   Wrapper (fixed)
   ========================================================================== */

.narpo-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--narpo-header-z);

    background: var(--narpo-header-bg);
    color: var(--narpo-header-fg);
    border-bottom: 1px solid var(--narpo-header-border);
    box-shadow: var(--narpo-header-shadow);

    min-height: var(--narpo-header-height);

    box-sizing: border-box;
    width: 100%;
}

.narpo-header.is-open {
    z-index: 1300;
}

.narpo-header * {
    box-sizing: border-box;
}

/* ==========================================================================
   WordPress admin bar compensation
   When the logged-in admin bar is present, push the fixed header down so it
   sits beneath it. Desktop admin bar = 32px, mobile admin bar = 46px.
   Also shifts the mobile slide-in panel and the backdrop by the same amount.
   ========================================================================== */

body.admin-bar .narpo-header {
    top: 32px;
}
body.admin-bar .narpo-header__backdrop {
    top: calc(var(--narpo-header-height) + 32px);
}
body.admin-bar .narpo-header__nav {
    /* only overrides mobile slide-in rule (it's position: fixed there) */
    top: calc(var(--narpo-header-height) + 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar .narpo-header          { top: 46px; }
    body.admin-bar .narpo-header__backdrop{ top: calc(var(--narpo-header-height) + 46px); }
    body.admin-bar .narpo-header__nav     { top: calc(var(--narpo-header-height) + 46px); }
}

.narpo-header__inner {
    position: relative;
    z-index: 3;
    max-width: var(--narpo-content-width);
    margin-inline: auto;
    padding-inline: var(--narpo-header-gutter);
    min-height: var(--narpo-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.narpo-header__utility {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.narpo-header--coming-soon .narpo-header__inner {
    max-width: var(--narpo-container, min(1200px, 92vw));
    justify-content: flex-start;
    gap: clamp(0.9rem, 2vw, 1.5rem);
}

.narpo-header--coming-soon .narpo-header__utility {
    margin-left: auto;
}

.narpo-header--coming-soon .narpo-header__cta {
    min-height: 40px;
    padding: 0.62rem 1.1rem;
}

/* ==========================================================================
   Logo
   ========================================================================== */

.narpo-header__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s var(--narpo-header-ease);
}
.narpo-header__logo:hover,
.narpo-header__logo:focus-visible {
    transform: translateY(-1px);
}

.narpo-header__logo img {
    display: block;
    height: calc(var(--narpo-header-height) - 20px);
    max-height: 72px;
    width: auto;
}

.narpo-header__logo-text {
    font-weight: 700;
    white-space: nowrap;
}

/* ==========================================================================
   Nav (desktop)
   ========================================================================== */

.narpo-header__nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 1;
    justify-content: space-between;
}

.narpo-header__menu,
.narpo-header__menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.narpo-header__menu {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 2rem);
    flex: 1;
    justify-content: center;
}

/* Each top-level <li> is a flex row so the link and arrow button sit side by side.
   flex-wrap allows the submenu to wrap below on mobile (static position). */
.narpo-header__menu > li {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* ...but on the desktop nav that wrap must NOT apply to the item's own parts.
   The submenu is absolutely positioned from 769px up, so the only things left
   to wrap are the label and its dropdown arrow — and when the row runs short
   of space, flex-wrap splits them onto two lines and the item falls apart
   ("Member services" on one line, a stray ▾ below it). Adding an eighth
   top-level link is what first made the row short enough to trigger it, at
   769–800px. Keep label and arrow welded together; let the MENU wrap instead
   (below), which is the graceful way to run out of room. */
@media (min-width: 769px) {
    .narpo-header__menu > li {
        flex-wrap: nowrap;
    }
}

/* Invisible hover bridge: extends the parent's hit area downward into the
   gap between the top-level link and its submenu, so moving the mouse
   toward the dropdown never leaves the hover area. */
.narpo-header__menu > li.menu-item-has-children::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0.9rem;
    pointer-events: auto;
}

/* Top-level links */
.narpo-header__menu > li > a {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.6rem 0.25rem;
    border-radius: 4px;
    color: var(--narpo-header-fg);
    text-decoration: none;
    position: relative;
    transition: color var(--narpo-dur-state) var(--narpo-ease-state);
    white-space: nowrap;
    flex: none;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.narpo-header__menu-link--members-only {
    position: relative;
    overflow: visible;
}

.narpo-header__menu-pill {
    position: absolute;
    left: 0;
    bottom: calc(100% - 0.15rem);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
    padding: 0.18rem 0.48rem;
    border-radius: 999px;
    background: var(--mn-brass, #d99e3f);
    color: var(--narpo-header-accent);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.narpo-header__menu-label {
    display: inline-block;
}

.narpo-header__menu > li > a::after {
    /* Animated underline */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.1rem;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s var(--narpo-header-ease);
    border-radius: 2px;
}

.narpo-header__menu > li > a:hover,
.narpo-header__menu > li > a:focus-visible {
    color: var(--narpo-header-accent);
}
.narpo-header__menu > li > a:hover::after,
.narpo-header__menu > li > a:focus-visible::after {
    transform: scaleX(1);
}

/* Active / current states (added by WordPress automatically) */
.narpo-header__menu > li.current-menu-item > a,
.narpo-header__menu > li.current-menu-ancestor > a,
.narpo-header__menu > li.current-menu-parent > a {
    color: var(--narpo-header-accent);
}
.narpo-header__menu > li.current-menu-item > a::after,
.narpo-header__menu > li.current-menu-ancestor > a::after,
.narpo-header__menu > li.current-menu-parent > a::after {
    transform: scaleX(1);
}

/* ==========================================================================
   Submenu toggle button (injected by JS after each parent <a>)
   ========================================================================== */

.narpo-header__submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 0.25rem;
    flex-shrink: 0;
    line-height: 1;
    transition: color var(--narpo-dur-state) var(--narpo-ease-state);
}
.narpo-header__submenu-toggle:hover {
    color: var(--narpo-header-accent);
}
.narpo-header__submenu-toggle:focus-visible {
    outline: 2px solid var(--narpo-header-accent);
    border-radius: 4px;
}

/* Chevron arrow (border-trick triangle) */
.narpo-header__chevron {
    display: inline-block;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: currentColor;
    transform: translateY(2px);
    transition: transform 0.25s var(--narpo-header-ease);
    pointer-events: none;
}

/* Rotate chevron when submenu is open — via hover, focus-within, or .is-open */
.narpo-header__menu > li:hover > .narpo-header__submenu-toggle .narpo-header__chevron,
.narpo-header__menu > li:focus-within > .narpo-header__submenu-toggle .narpo-header__chevron,
.narpo-header__menu > li.is-open > .narpo-header__submenu-toggle .narpo-header__chevron {
    transform: translateY(2px) rotate(-180deg);
}

/* ==========================================================================
   Submenus (dropdowns — desktop)
   ========================================================================== */

.narpo-header__menu .sub-menu {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 220px;
    padding: 0.5rem;
    background: var(--narpo-header-dropdown-bg);
    border: 1px solid var(--narpo-header-border);
    border-radius: 12px;
    box-shadow: var(--narpo-header-dropdown-shadow);

    display: flex;
    flex-direction: column;
    gap: 2px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--narpo-dur-state) var(--narpo-ease-state), transform 0.25s var(--narpo-header-ease), visibility 0s linear 0.25s;
}

/* Forgiving close delay: when the mouse leaves the parent (and no JS .is-open),
   the submenu waits 150 ms before fading out. Gives the user time to travel
   diagonally down into the dropdown. */
.narpo-header__menu > li:not(:hover):not(:focus-within):not(.is-open) > .sub-menu {
    transition: opacity var(--narpo-dur-state) var(--narpo-ease-state), transform 0.25s var(--narpo-header-ease) 0.15s, visibility 0s linear 0.4s;
}

/* Show dropdown on hover, keyboard focus, or JS-applied .is-open */
.narpo-header__menu > li:hover > .sub-menu,
.narpo-header__menu > li:focus-within > .sub-menu,
.narpo-header__menu > li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

/* Nested (3rd-level) submenus fly out to the right */
.narpo-header__menu .sub-menu .sub-menu {
    top: -0.5rem;
    left: calc(100% + 0.5rem);
    transform: translate(8px, 0);
}
.narpo-header__menu .sub-menu li:hover > .sub-menu,
.narpo-header__menu .sub-menu li:focus-within > .sub-menu,
.narpo-header__menu .sub-menu li.is-open > .sub-menu {
    transform: translate(0, 0);
}

.narpo-header__menu .sub-menu a {
    display: block;
    padding: 0.6rem 0.85rem;
    color: var(--narpo-header-fg);
    text-decoration: none;
    border-radius: 8px;
    white-space: nowrap;
    transition: background var(--narpo-dur-state) var(--narpo-ease-state), color var(--narpo-dur-state) var(--narpo-ease-state);
}
.narpo-header__menu .sub-menu a:hover,
.narpo-header__menu .sub-menu a:focus-visible {
    background: var(--mn-paper-2, #f1ede6);
    color: var(--narpo-header-accent);
}
.narpo-header__menu .sub-menu .current-menu-item > a {
    background: var(--mn-paper-3, #e6e0d8);
    color: var(--narpo-header-accent);
}

/* ==========================================================================
   CTA button
   ========================================================================== */

.narpo-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;             /* WCAG target size */
    padding: 0.65rem 1.25rem;
    background: var(--narpo-navy, #0c2a5c);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 5px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
    letter-spacing: 0.01em;

    transition: background var(--narpo-dur-state) var(--narpo-ease-state), transform 0.2s var(--narpo-header-ease), box-shadow var(--narpo-dur-state) var(--narpo-ease-state);
}
.narpo-header__cta:hover,
.narpo-header__cta:focus-visible {
    background: var(--narpo-accent, #4169e1);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -8px rgba(12, 26, 54, 0.4);
}
.narpo-header__cta:active {
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .narpo-header__cta:hover { transform: none; }
}

/* ==========================================================================
   Mobile toggle
   ========================================================================== */

.narpo-header__toggle {
    position: relative;
    z-index: 4;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--narpo-header-border);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    transition: background var(--narpo-dur-state) var(--narpo-ease-state), border-color var(--narpo-dur-state) var(--narpo-ease-state);
}
.narpo-header__toggle:hover {
    background: var(--mn-paper-2, #f1ede6);
    border-color: var(--mn-rule-strong, #beb6ab);
}
.narpo-header__toggle:focus-visible {
    border-color: var(--narpo-header-accent-hover);
}
.narpo-header__toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--narpo-header-fg);
    border-radius: 2px;
    transition: transform 0.25s var(--narpo-header-ease), opacity var(--narpo-dur-state) var(--narpo-ease-state);
}

/* "X" animation when open */
.narpo-header.is-open .narpo-header__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.narpo-header.is-open .narpo-header__toggle-bar:nth-child(2) {
    opacity: 0;
}
.narpo-header.is-open .narpo-header__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Screen reader helper */
.narpo-header .screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
}

/* ==========================================================================
   Backdrop (mobile only)
   ========================================================================== */

.narpo-header__backdrop {
    position: fixed;
    top: var(--narpo-header-height);
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--narpo-dur-state) var(--narpo-ease-state), visibility 0s linear 0.25s;
    /* Sit below the slide-in nav but still inside the header's stacking context */
    z-index: 1;
}
.narpo-header.is-open .narpo-header__backdrop {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* ==========================================================================
   Mobile (≤ 960px)
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --narpo-header-height: 72px;
    }

    .narpo-header__inner {
        justify-content: flex-start;
        gap: 0.7rem;
    }

    .narpo-header__toggle {
        display: inline-flex;
        order: 3;
        margin-left: auto;
    }

    .narpo-header__nav {
        position: fixed;
        top: var(--narpo-header-height);
        right: 0;
        bottom: 0;
        width: min(360px, 86vw);
        background: var(--narpo-header-bg);
        padding: 0 0 2rem;
        gap: 0;
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        align-content: flex-start;

        border-left: 1px solid var(--narpo-header-border);
        box-shadow: -16px 0 48px -24px rgba(12, 26, 54, 0.45);

        z-index: 2;

        transform: translateX(100%);
        transition: transform 0.3s var(--narpo-header-ease);
    }

    .narpo-header.is-open .narpo-header__nav {
        transform: translateX(0);
    }

    .narpo-header__menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        padding: 0.5rem 1.25rem 1rem;
    }

    .narpo-header__menu > li {
        border-bottom: 1px solid var(--narpo-header-border);
        align-items: stretch;
    }
    .narpo-header__menu > li:last-child {
        border-bottom: none;
    }

    /* Link grows to fill the row; button sits to the right */
    .narpo-header__menu > li > a {
        flex: 1;
        padding: 0.95rem 0.25rem;
        width: auto; /* override any width: 100% */
    }

    .narpo-header__menu-pill {
        bottom: calc(100% - 0.3rem);
    }
    .narpo-header__menu > li > a::after {
        display: none;
    }

    /* Mobile arrow button — taller touch target, right-aligned */
    .narpo-header__submenu-toggle {
        padding: 0 0.75rem;
        min-width: 44px;
        border-left: 1px solid var(--narpo-header-border);
        border-radius: 0;
    }

    /* Mobile: submenus are accordion panels.
       position: static so they participate in the flex flow and sit below
       the link+button row (because li is flex-wrap). */
    .narpo-header__menu .sub-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0 0 0.5rem 0.75rem;
        /* Takes its own full-width row below the link + button */
        flex-basis: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s var(--narpo-header-ease);
    }

    /* Open accordion via .is-open class (JS) OR :hover (mouse on narrow window).
       Also reset the desktop transform: translate(-50%, 0) that the shared show
       rule applies — without this the submenu slides into place off-screen. */
    .narpo-header__menu > li:hover > .sub-menu,
    .narpo-header__menu > li.is-open > .sub-menu,
    .narpo-header__menu .sub-menu li:hover > .sub-menu,
    .narpo-header__menu .sub-menu li.is-open > .sub-menu {
        max-height: 1000px;
        transform: none;
    }

    /* Chevron rotation on mobile open state */
    .narpo-header__menu > li:hover > .narpo-header__submenu-toggle .narpo-header__chevron,
    .narpo-header__menu > li.is-open > .narpo-header__submenu-toggle .narpo-header__chevron {
        transform: translateY(2px) rotate(-180deg);
    }

    .narpo-header__menu .sub-menu a {
        padding: 0.6rem 0.5rem;
        border-radius: 6px;
    }

    .narpo-header__cta {
        align-self: stretch;
        justify-content: center;
        margin: 0 1.25rem 0;
        padding: 0.9rem 1.25rem;
        font-size: 0.95rem;
    }

    .narpo-header__logo img {
        height: 50px;
        max-height: 50px;
    }

    .narpo-header__crest img {
        width: 54px;
    }

    .narpo-header--coming-soon .narpo-header__crest {
        display: inline-flex;
    }

    .narpo-header--coming-soon .narpo-header__cta {
        min-height: 36px;
        padding: 0.52rem 0.9rem;
        font-size: 0.82rem;
    }
}

/* Extra-small adjustments */
@media (max-width: 480px) {
    :root {
        --narpo-header-height: 64px;
    }
    .narpo-header__inner {
        padding-inline: 1rem;
    }

    .narpo-header--coming-soon .narpo-header__crest {
        display: none;
    }
}

/* ==========================================================================
   Editor preview — not fixed, full-width relative to canvas
   ========================================================================== */

.editor-styles-wrapper .narpo-header.narpo-header--is-preview,
.block-editor-block-preview__content .narpo-header {
    position: relative;
    box-shadow: none;
    border-bottom: 1px solid var(--narpo-header-border);
}
.editor-styles-wrapper .narpo-header__nav {
    position: static;
    transform: none;
    width: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
}
.editor-styles-wrapper .narpo-header__toggle,
.editor-styles-wrapper .narpo-header__backdrop {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Right-side crest (added v1.1)
   -------------------------------------------------------------------------- */
.narpo-header__crest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 0.75rem;
    border-radius: 50%;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s var(--narpo-header-ease);
}
.narpo-header__crest:hover,
.narpo-header__crest:focus-visible {
    transform: translateY(-1px);
}
.narpo-header__crest img {
    display: block;
    width: clamp(48px, 5.2vw, 68px);
    height: auto;
}
@media (max-width: 768px) {
    .narpo-header__crest {
        display: inline-flex;
        order: 2;
        margin-left: 0.6rem;
        visibility: visible;
        opacity: 1;
    }

    .narpo-header__toggle {
        margin-left: auto;
    }
}

/* --------------------------------------------------------------------------
   769–1380px — two-row header
   Top row:   logo  |  CTA  |  crest
   Bottom row: nav menu (centred, full width)

   `display: contents` on .narpo-header__nav lets us individually position the
   menu and the CTA (which are siblings inside the nav) onto separate grid
   areas without restructuring the markup (so the mobile drawer still works).
   -------------------------------------------------------------------------- */
/* 1381–1500px: the crest on the right was pushing past the viewport edge before
   the header had any reason to reflow. Dropping the left gutter buys the single
   row enough width to hold together down to the two-row breakpoint below. */
@media (max-width: 1500px) and (min-width: 1381px) {
    .narpo-header__inner { padding-left: 0; }
}

@media (max-width: 1380px) and (min-width: 769px) {

    :root { --narpo-header-height: 132px; }   /* taller — two rows */

    .narpo-header__inner {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "logo  spacer  cta   crest"
            "nav   nav     nav   nav";
        column-gap: 1.5rem;
        row-gap: 0.4rem;
        padding-block: 0.85rem;
        align-items: center;
    }

    .narpo-header__logo    { grid-area: logo; }
    .narpo-header__crest   { grid-area: crest; margin-left: 0; }

    /* Allow nav's children to participate in the outer grid */
    .narpo-header__nav { display: contents; }

    /* The menu owns a full-width row here, so it has the most room available —
       but eight top-level links need ~741px and the row is only ~708px at
       769px. Two things buy that back, in order:
         1. a tighter minimum column gap (7 gaps × ~5px ≈ 35px recovered), and
         2. permission to wrap onto a second centred line if it still does not
            fit — on another platform's font metrics, at a browser zoom, or the
            next time a link is added to the menu.
       Wrapping is safe precisely because this row is the menu's own; it pushes
       nothing else around. Without (2) the row would silently overflow, since
       the links are all `white-space: nowrap`. */
    .narpo-header__menu {
        grid-area: nav;
        justify-self: center;
        column-gap: clamp(0.9rem, 1.9vw, 2.5rem);
        row-gap: 0.15rem;
        flex-wrap: wrap;
        border-top: 1px solid var(--narpo-header-border);
        padding-top: 0.65rem;
        width: 100%;
        justify-content: center;
    }

    .narpo-header__cta { grid-area: cta; }

    /* Hide the mobile drawer infrastructure */
    .narpo-header__toggle,
    .narpo-header__backdrop { display: none; }
}

/* ==========================================================================
   MANCHESTER MASTHEAD  ·  N6
   The previous header was a white SaaS bar: shadow, pill CTA, a force
   crest and no branch name anywhere. This is a broadsheet masthead — warm
   paper, a double rule instead of a shadow, the branch device beside a
   wordmark set in Newsreader, and brass reserved for state.
   ========================================================================== */

.narpo-header {
    /* A broadsheet double rule closes the masthead. Two hairlines, one gap. */
    border-bottom: 0;
    box-shadow:
        0 1px 0 0 var(--mn-rule-strong, #beb6ab),
        0 4px 0 0 var(--mn-rule, #d4cec5);
}

/* --- Brand lockup ------------------------------------------------------- */

.narpo-header__logo {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.6rem, 1.2vw, 0.95rem);
    min-width: 0;
}
.narpo-header__logo:hover,
.narpo-header__logo:focus-visible {
    transform: none;   /* the wordmark reacts instead — see below */
}

.narpo-header__mark {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
    transition: transform var(--narpo-dur, 0.22s) var(--narpo-header-ease);
}
.narpo-header__logo:hover .narpo-header__mark,
.narpo-header__logo:focus-visible .narpo-header__mark {
    transform: translateY(-1px);
}

.narpo-header__mark img,
.narpo-header__logo img {
    display: block;
    height: clamp(52px, 5.2vw, 74px);
    max-height: 74px;
    width: auto;
}

/* --- The bee, kept in the masthead as an ornament ------------------------
   The crest is the mark now, so the bee stops being the identity and becomes
   a printer's device: a small brass ghost closing the brand lockup, the way a
   colophon sits after a masthead. Dropped below 900px, where the row is
   tight enough that a third element in the lockup only crowds it. */
.narpo-header__wordmark-branch::after {
    content: "";
    display: inline-block;
    vertical-align: -0.32em;
    width: 15px;
    height: 15px;
    margin-left: 0.62em;
    background-color: var(--mn-brass, #d99e3f);
    -webkit-mask: var(--mn-bee) center / contain no-repeat;
    mask: var(--mn-bee) center / contain no-repeat;
    opacity: 0.62;
    pointer-events: none;
    transition: opacity var(--narpo-dur-state, 0.22s) var(--narpo-ease-state, ease);
}
.narpo-header__logo:hover .narpo-header__wordmark-branch::after,
.narpo-header__logo:focus-visible .narpo-header__wordmark-branch::after { opacity: 0.85; }

@media (max-width: 900px) {
    .narpo-header__wordmark-branch::after { display: none; }
}

.narpo-header__wordmark {
    display: flex;
    flex-direction: column;
    gap: 0.16em;
    min-width: 0;
    line-height: 1;
}

/* The branch line: mono, tracked, quiet — a plate above the name. */
.narpo-header__wordmark-branch {
    font-family: var(--narpo-font-mono, ui-monospace, monospace);
    font-size: clamp(0.55rem, 0.42vw + 0.44rem, 0.68rem);
    font-weight: 500;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--mn-ink-muted, #4e5661);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.narpo-header__wordmark-name {
    font-family: var(--narpo-font-display, Georgia, serif);
    font-size: clamp(1.15rem, 1.1vw + 0.85rem, 1.7rem);
    font-weight: 700;
    letter-spacing: 0.005em;
    color: var(--mn-slate-deep, #0a1423);
    white-space: nowrap;
}

/* --- Navigation --------------------------------------------------------- */

.narpo-header__menu > li > a {
    font-family: var(--narpo-font-sans, system-ui, sans-serif);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--mn-ink, #19222f);
    border-radius: 0;
    padding-block: 0.7rem;
}

/* The underline is the state, and it is brass. */
.narpo-header__menu > li > a::after {
    background: var(--mn-brass, #d99e3f);
    height: 2px;
    bottom: 0.28rem;
    border-radius: 0;
    transition: transform var(--narpo-dur, 0.22s) var(--narpo-ease, ease);
}

.narpo-header__menu > li > a:hover,
.narpo-header__menu > li > a:focus-visible,
.narpo-header__menu > li.current-menu-item > a,
.narpo-header__menu > li.current-menu-ancestor > a,
.narpo-header__menu > li.current-menu-parent > a {
    color: var(--mn-slate-deep, #0a1423);
}

/* Members-only flag: a brass plate, not a blue chip. */
.narpo-header__menu-pill {
    border-radius: 2px;
    color: var(--mn-slate-deep, #0a1423);
    font-family: var(--narpo-font-mono, ui-monospace, monospace);
    font-weight: 500;
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    padding: 0.2rem 0.46rem;
}

/* --- Submenus ----------------------------------------------------------- */

.narpo-header__menu .sub-menu {
    border: 1px solid var(--mn-rule, #d4cec5);
    border-radius: var(--narpo-radius, 3px);
}
.narpo-header__menu .sub-menu a {
    border-radius: 0;
    font-size: 0.9rem;
}

/* --- Call to action ------------------------------------------------------
   A brass plate that presses. No lift, no glow — the fill does the work. */

.narpo-header__cta {
    background: var(--mn-slate-deep, #0a1423);
    color: var(--mn-on-slate, #f1eee9);
    border-radius: var(--narpo-radius, 3px);
    font-family: var(--narpo-font-sans, system-ui, sans-serif);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    box-shadow: none;
    transition: background var(--narpo-dur-state) var(--narpo-ease-state), color var(--narpo-dur-state) var(--narpo-ease-state), transform var(--narpo-dur-fast, 0.12s) var(--narpo-ease, ease);
}
.narpo-header__cta:hover,
.narpo-header__cta:focus-visible {
    background: var(--mn-brass, #d99e3f);
    color: var(--mn-slate-deep, #0a1423);
    transform: none;
    box-shadow: none;
}
.narpo-header__cta:active {
    transform: translateY(1px);
}

/* --- Mobile toggle ------------------------------------------------------- */

.narpo-header__toggle {
    border-radius: var(--narpo-radius, 3px);
    border-color: var(--mn-rule-strong, #beb6ab);
}
.narpo-header__toggle-bar {
    background: var(--mn-slate-deep, #0a1423);
    border-radius: 0;
}

/* --- The national crest sits quietly; it is not the branch's own mark. --- */
.narpo-header__crest img {
    opacity: 0.88;
    transition: opacity var(--narpo-dur-state) var(--narpo-ease-state);
}
.narpo-header__crest:hover img,
.narpo-header__crest:focus-visible img {
    opacity: 1;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1180px) {
    /* The national crest is the first thing to go — the branch mark stays. */
    .narpo-header__crest { display: none; }
}

@media (max-width: 520px) {
    .narpo-header__wordmark-branch {
        letter-spacing: 0.12em;
    }
}

@media (max-width: 380px) {
    .narpo-header__logo { gap: 0.5rem; }
    .narpo-header__mark img,
    .narpo-header__logo img { height: 44px; }
    .narpo-header__wordmark-branch { font-size: 0.5rem; letter-spacing: 0.08em; }
    .narpo-header__wordmark-name { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
    .narpo-header__mark,
    .narpo-header__cta { transition: none; }
}

/* The brand lockup is a link: give it a full-height target on phones, where
   the mark shrinks to 38px and the row would otherwise be under 44px. */
.narpo-header__logo {
    min-height: 44px;
}

/* --- Manchester: the Members dropdown ------------------------------------ *
   The navigation gained its first submenu with the Manchester content, which
   exposed two gaps in the masthead: the chevron button wrapped onto a second
   line under its label, and neither it nor the submenu rows cleared the 44px
   target the rest of the site holds to.                                     */

/* Keep label and chevron on one line at desktop. The <li> stays wrappable
   below 1024px, where the submenu is static and must sit under its parent. */
@media (min-width: 1024px) {
    .narpo-header__menu > li {
        flex-wrap: nowrap;
        flex: none;
    }
}

/* A 44px button holding an 8px chevron — the same shape the carousel dots
   use. The negative inset keeps the optical gap tight while the hit area
   stays full size. */
.narpo-header__submenu-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin-inline-start: -0.5rem;
}

/* Dropdown rows are controls like any other: 0.6rem of padding alone left
   them at 39px. */
.narpo-header__menu .sub-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
}

/* ==========================================================================
   MANCHESTER · The mobile panel
   ========================================================================== */

@media (max-width: 768px) {
    /* The menu list keeps the desktop's `justify-content: center`, which on a
       full-height drawer centred the seven links in the middle of the panel and
       left a 380px void under the masthead. A drawer reads top-down. */
    .narpo-header__menu {
        flex: 0 0 auto;
        justify-content: flex-start;
        padding-block: 0.25rem 1rem;
    }

    /* The drawer's own CTA is pinned to the foot of the panel rather than
       floating directly under the last link. */
    .narpo-header__nav {
        justify-content: flex-start;
        padding-bottom: 1.5rem;
    }
    .narpo-header__cta {
        margin-top: auto;
    }

    /* A collapsed accordion drew a 10px grey bar under "Member services": the
       Manchester layer restores a hairline on every `.sub-menu`, and
       `max-height: 0` clips the *content* box, so the border and the bottom
       padding still painted. Collapse the box itself. */
    .narpo-header__menu > li > .sub-menu,
    .narpo-header__menu .sub-menu .sub-menu {
        border: 0;
        padding-block: 0;
        transition:
            max-height 0.35s var(--narpo-header-ease),
            padding-block 0.35s var(--narpo-header-ease);
    }
    .narpo-header__menu > li:hover > .sub-menu,
    .narpo-header__menu > li.is-open > .sub-menu,
    .narpo-header__menu .sub-menu li:hover > .sub-menu,
    .narpo-header__menu .sub-menu li.is-open > .sub-menu {
        padding-block: 0.15rem 0.6rem;
    }
}