.cp-primary-nav {
    --cp-nav-bg: rgb(0, 0, 41);
    --cp-nav-line: rgba(255, 255, 255, 0.16);
    --cp-nav-text: #f2f2f5;
    --cp-nav-text-muted: #b9b9c6;
    --cp-nav-accent: #c9a24b;
    --cp-nav-current: #ffffff;
    --cp-nav-focus: #ffffff;
    --cp-nav-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --cp-nav-font-size: 13px;
    width: 100%;
    background: var(--cp-nav-bg);
    border-top: 1px solid var(--cp-nav-line);
    border-bottom: 1px solid var(--cp-nav-line);
    box-sizing: border-box;
    font-family: var(--cp-nav-font-family);
}

.cp-primary-nav,
.cp-primary-nav *,
.cp-primary-nav *::before,
.cp-primary-nav *::after {
    box-sizing: border-box;
}

.cp-primary-nav-inner {
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: 0 64px;
    display: flex;
    align-items: center;
    /* Lets .cp-primary-nav-menu actually shrink below its un-shrunk
       content width instead of forcing this row to overflow - a flex
       item's default min-width is "auto" (its content's natural width),
       which is what was silently defeating flex-wrap: nowrap below. */
    min-width: 0;
}

.cp-primary-nav-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid var(--cp-nav-line);
    border-radius: 3px;
    color: var(--cp-nav-text);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.cp-primary-nav-toggle-bars {
    position: relative;
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
}

.cp-primary-nav-toggle-bars::before,
.cp-primary-nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
}

.cp-primary-nav-toggle-bars::before {
    top: -6px;
}

.cp-primary-nav-toggle-bars::after {
    top: 6px;
}

.cp-primary-nav-menu {
    list-style: none;
    display: flex;
    align-items: stretch;
    /*
     * Desktop/tablet: never wrap - see the max-width: 782px override below,
     * which is the ONLY width at which this switches to the true mobile
     * drawer layout (flex-direction: column). Between full desktop size
     * and that breakpoint, the @media tiers further down progressively
     * shrink padding/font/letter-spacing (never the item count) to keep
     * exactly 7 categories + About Us on one row.
     */
    flex-wrap: nowrap;
    gap: 2px;
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 0;
}

.cp-primary-nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

.cp-primary-nav-item > a {
    display: inline-flex;
    align-items: center;
    padding: 18px 16px;
    color: var(--cp-nav-text);
    font-size: var(--cp-nav-font-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border: none;
    cursor: pointer;
    box-shadow: inset 0 -3px 0 0 transparent;
    transition: color 140ms ease, box-shadow 140ms ease;
}

.cp-primary-nav-item > a:hover {
    color: var(--cp-nav-accent);
}

.cp-primary-nav-item.is-current > a {
    color: var(--cp-nav-current);
    box-shadow: inset 0 -3px 0 0 var(--cp-nav-current);
}

.cp-primary-nav *:focus-visible {
    outline: 2px solid var(--cp-nav-focus);
    outline-offset: -2px;
}

.cp-primary-nav-about {
    margin-left: auto;
    position: relative;
    display: flex;
    align-items: stretch;
}

.cp-primary-nav-about-link {
    display: inline-flex;
    align-items: center;
    padding: 18px 8px 18px 16px;
    color: var(--cp-nav-text);
    font-size: var(--cp-nav-font-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 -3px 0 0 transparent;
    transition: color 140ms ease, box-shadow 140ms ease;
}

.cp-primary-nav-about-link:hover {
    color: var(--cp-nav-accent);
}

.cp-primary-nav-about.is-current .cp-primary-nav-about-link {
    color: var(--cp-nav-current);
    box-shadow: inset 0 -3px 0 0 var(--cp-nav-current);
}

.cp-primary-nav-about-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 18px 16px 18px 4px;
    background: transparent;
    border: none;
    color: var(--cp-nav-text);
    cursor: pointer;
}

.cp-primary-nav-about-toggle:hover {
    color: var(--cp-nav-accent);
}

.cp-primary-nav-about-toggle span {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

.cp-primary-nav-about-toggle[aria-expanded="true"] span {
    transform: scaleY(-1);
}

/*
 * Indicates one of the overflow dropdown's own categories is the current
 * page, without ever implying About Us itself is current - that state
 * (is-current on .cp-primary-nav-about, aria-current on the About Us link)
 * is only ever set when the About Us page itself is being viewed. This is
 * a distinct, subtler dot rather than the white underline used for an
 * actually-current item, so the two states can never be visually confused.
 */
.cp-primary-nav-about-toggle.has-active-child::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cp-nav-current);
}

.cp-primary-nav-about-menu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;
    background: var(--cp-nav-bg);
    border: 1px solid var(--cp-nav-line);
    z-index: 40;
}

.cp-primary-nav-about-menu[hidden] {
    display: none;
}

/*
 * Managed Pages (Staff, Join the Publication, ...) and overflow Categories
 * (position 8+) are kept as visually distinct groups inside the dropdown -
 * per CLAUDE.md 12.3, the two must never look or be sourced as one
 * ambiguous flat list, even though both render inside the same
 * .cp-primary-nav-about-menu container.
 */
.cp-primary-nav-about-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cp-primary-nav-about-group + .cp-primary-nav-about-group {
    border-top: 1px solid var(--cp-nav-line);
    margin-top: 6px;
    padding-top: 6px;
}

.cp-primary-nav-about-group-label {
    display: block;
    padding: 6px 18px 2px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cp-nav-text-muted);
}

@media (min-width: 783px) {
    .cp-primary-nav-about:hover .cp-primary-nav-about-menu[hidden],
    .cp-primary-nav-about:focus-within .cp-primary-nav-about-menu[hidden] {
        display: block;
    }
}

.cp-primary-nav-about-menu li a {
    display: block;
    padding: 10px 18px;
    color: var(--cp-nav-text);
    font-size: var(--cp-nav-font-size);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: inset 3px 0 0 0 transparent;
}

.cp-primary-nav-about-menu li a:hover {
    color: var(--cp-nav-accent);
}

.cp-primary-nav-about-menu li.is-current a {
    color: var(--cp-nav-current);
    box-shadow: inset 3px 0 0 0 var(--cp-nav-current);
}

/*
 * Compact tiers, desktop -> tablet: reduce gap/padding/letter-spacing (and,
 * only at the tightest tier, font-size) so all 7 categories + About Us
 * keep fitting on one row as the available width narrows - the item COUNT
 * never changes and nothing is ever hidden here. flex-wrap stays nowrap
 * (set unconditionally above) all the way down to the true mobile
 * breakpoint at max-width: 782px, where the layout switches to the
 * hamburger-driven drawer instead of continuing to compact further.
 * var(--cp-nav-font-size) is the administrator's own saved Menu Editor
 * preference (includes/nav-menu.php) - reduced here only as a rendered/
 * visual scale-down via calc(), never overwritten at the source, so the
 * stored preference is unchanged and returns at wider widths.
 */
@media (max-width: 1366px) {
    .cp-primary-nav-item > a,
    .cp-primary-nav-about-link {
        padding-left: 12px;
        padding-right: 12px;
    }

    .cp-primary-nav-about-link {
        padding-right: 6px;
    }
}

@media (max-width: 1200px) {
    .cp-primary-nav-menu {
        gap: 0;
    }

    .cp-primary-nav-item > a {
        padding-left: 9px;
        padding-right: 9px;
        letter-spacing: 0.05em;
    }

    .cp-primary-nav-about-link {
        padding-left: 9px;
        padding-right: 4px;
        letter-spacing: 0.05em;
    }

    .cp-primary-nav-about-toggle {
        padding-left: 3px;
        padding-right: 10px;
    }
}

@media (max-width: 1024px) {
    .cp-primary-nav-inner {
        padding: 0 32px;
    }

    .cp-primary-nav-item > a,
    .cp-primary-nav-about-link {
        padding-left: 7px;
        padding-right: 7px;
        font-size: max(11px, calc(var(--cp-nav-font-size) - 1px));
        letter-spacing: 0.03em;
    }

    .cp-primary-nav-about-link {
        padding-right: 3px;
    }

    .cp-primary-nav-about-toggle {
        padding-left: 2px;
        padding-right: 7px;
    }
}

@media (max-width: 900px) {
    .cp-primary-nav-item > a,
    .cp-primary-nav-about-link {
        padding-left: 6px;
        padding-right: 6px;
        font-size: max(11px, calc(var(--cp-nav-font-size) - 2px));
        letter-spacing: 0.02em;
    }

    .cp-primary-nav-about-link {
        padding-right: 2px;
    }
}

@media (max-width: 782px) {
    .cp-primary-nav-inner {
        flex-wrap: wrap;
        padding: 0 20px;
    }

    .cp-primary-nav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-bottom: 12px;
    }

    /* Collapsed-by-default behavior is progressive enhancement: it only
       applies once JS has confirmed it can run the toggle, so the menu
       stays fully visible and usable if JavaScript is unavailable. */
    .cp-primary-nav.is-collapsible .cp-primary-nav-toggle {
        display: inline-flex;
    }

    .cp-primary-nav.is-collapsible .cp-primary-nav-menu {
        display: none;
    }

    .cp-primary-nav.is-collapsible .cp-primary-nav-menu.is-open {
        display: flex;
    }

    .cp-primary-nav-item {
        width: 100%;
        border-top: 1px solid var(--cp-nav-line);
    }

    .cp-primary-nav-item > a {
        width: 100%;
        padding: 14px 4px;
        /* Full-width stacked rows have no horizontal-fit pressure anymore,
           so the desktop compact tiers' shrunk font-size/letter-spacing
           are reset back to the administrator's actual saved preference. */
        font-size: var(--cp-nav-font-size);
        letter-spacing: 0.08em;
    }

    .cp-primary-nav-about {
        margin-left: 0;
        flex-wrap: wrap;
    }

    .cp-primary-nav-about-link {
        flex: 1 1 auto;
        padding: 14px 4px;
        font-size: var(--cp-nav-font-size);
        letter-spacing: 0.08em;
    }

    .cp-primary-nav-about-toggle {
        flex: 0 0 auto;
        padding: 14px 8px;
    }

    .cp-primary-nav-about-menu {
        position: static;
        width: 100%;
        border: none;
        border-top: 1px solid var(--cp-nav-line);
        padding: 0;
        min-width: 0;
    }

    .cp-primary-nav-about-menu li a {
        padding: 12px 4px 12px 20px;
    }
}

/*
 * Whenever this nav renders inside Astra's own native mobile-menu slot
 * (.ast-builder-menu-mobile - see cp_replace_primary_wp_nav_menu(),
 * includes/frontend-navigation.php), Astra ALREADY provides its own
 * complete, working open/close system for that slot (the visible
 * hamburger is Astra's own #masthead .main-header-menu-toggle button, a
 * separate element outside this nav entirely, driving Astra's own
 * .toggled/.ast-mobile-header-active state via wp-content/themes/astra/
 * assets/js/frontend.js). This plugin's OWN internal collapse toggle
 * (.cp-primary-nav-toggle / .is-collapsible / .is-open, further down in
 * this file) was therefore invisible dead weight at best inside this
 * slot - unreachable until Astra's own toggle already revealed the
 * container - and at worst a second, confusing hamburger with its own
 * "closed by default" state that nothing ever opened, since the visible
 * button the visitor actually taps is Astra's, not this one. Scoped by
 * ancestor (not by viewport width, since Astra's own mobile breakpoint -
 * 921px on this theme, customizer-configurable - is wider than this
 * file's own 782px hamburger tier and is the one that actually decides
 * when .ast-builder-menu-mobile is shown at all) so this instance is
 * simply always a plain, fully visible vertical list once Astra reveals
 * the slot - no second toggle, no hidden-until-clicked state.
 *
 * Both the toggle-hiding and menu-showing rules are duplicated with
 * ".cp-primary-nav.is-collapsible" folded into the selector, at a higher
 * specificity than the ".cp-primary-nav.is-collapsible .cp-primary-nav-toggle"
 * / "...-menu" rules inside the max-width: 782px tier further down this
 * file (3 class-selectors each) - assets/js/frontend-navigation.js
 * already skips adding .is-collapsible to this instance at all, which is
 * the actual, authoritative fix (those gated rules then never match
 * regardless of specificity), but a real phone viewport is always
 * <=782px, exactly where that 3-class tier lives, so this second,
 * higher-specificity layer stays in place as a defensive guarantee
 * against exactly the kind of regression that shipped once already: an
 * earlier version of this ancestor-scoped block used only 2 class
 * selectors, which lost the specificity comparison to that 3-class tier
 * on real phones and silently reintroduced the second-tap "MENU" button
 * bug this fixes.
 */
.ast-builder-menu-mobile .cp-primary-nav-toggle,
.ast-builder-menu-mobile .cp-primary-nav.is-collapsible .cp-primary-nav-toggle {
    display: none;
}

.ast-builder-menu-mobile .cp-primary-nav-inner {
    flex-wrap: wrap;
    padding: 0;
}

.ast-builder-menu-mobile .cp-primary-nav-menu,
.ast-builder-menu-mobile .cp-primary-nav.is-collapsible .cp-primary-nav-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.ast-builder-menu-mobile .cp-primary-nav-item {
    width: 100%;
    border-top: 1px solid var(--cp-nav-line);
}

.ast-builder-menu-mobile .cp-primary-nav-item > a {
    width: 100%;
    padding: 14px 4px;
    font-size: var(--cp-nav-font-size);
    letter-spacing: 0.08em;
}

.ast-builder-menu-mobile .cp-primary-nav-about {
    margin-left: 0;
    flex-wrap: wrap;
    width: 100%;
    border-top: 1px solid var(--cp-nav-line);
}

.ast-builder-menu-mobile .cp-primary-nav-about-link {
    flex: 1 1 auto;
    padding: 14px 4px;
    font-size: var(--cp-nav-font-size);
    letter-spacing: 0.08em;
}

.ast-builder-menu-mobile .cp-primary-nav-about-toggle {
    flex: 0 0 auto;
    padding: 14px 8px;
}

.ast-builder-menu-mobile .cp-primary-nav-about-menu {
    position: static;
    width: 100%;
    border: none;
    border-top: 1px solid var(--cp-nav-line);
    padding: 0;
    min-width: 0;
}

.ast-builder-menu-mobile .cp-primary-nav-about-menu li a {
    padding: 12px 4px 12px 20px;
}

/*
 * Astra's OWN native mobile-menu trigger (#masthead .main-header-menu-toggle,
 * outside this plugin's nav markup entirely) renders its hamburger/close
 * icon with fill: var(--ast-global-color-0) by default - this site's
 * Global Color 0 is Astra's default blue (#0170B9), which is exactly the
 * "blue/default-looking" icon reported live, unrelated to any of this
 * plugin's own --cp-nav-* colors. #masthead .ast-primary-header-bar's own
 * background is already the correct Enterprise navy - only the icon color
 * was wrong. Overridden here with higher selector specificity (an ID
 * ancestor) so it wins without !important, scoped to this exact header
 * trigger's icon only - never a global anchor/icon color change.
 */
#masthead .mobile-menu-toggle-icon .ast-mobile-svg,
#masthead .ast-button-wrap .mobile-menu-wrap .mobile-menu {
    fill: #ffffff;
    color: #ffffff;
}

.cp-footer-nav {
    --cp-nav-current: #ffffff;
    font-family: var(--cp-nav-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
    font-size: var(--cp-nav-font-size, 13px);
    width: 100%;
}

.cp-footer-nav-menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 24px;
    margin: 0;
    padding: 0;
}

.cp-footer-nav-item > a {
    display: inline-block;
    padding: 4px 0;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: inset 0 -2px 0 0 transparent;
    transition: box-shadow 140ms ease, opacity 140ms ease;
}

/*
 * #cp-footer-navigation (an ID, on the <nav> wrapper - see
 * cp_render_footer_navigation_markup()) rather than relying on the class
 * selector alone: the theme's own footer-area link color is otherwise free
 * to win the cascade against a same-specificity class rule, which is
 * exactly what was making these links render gray instead of white. Scoped
 * to this plugin's own footer nav only - no other footer link on the site
 * is touched.
 */
#cp-footer-navigation .cp-footer-nav-item > a,
#cp-footer-navigation .cp-footer-nav-item > a:visited {
    color: #ffffff;
}

.cp-footer-nav-item > a:hover,
.cp-footer-nav-item > a:focus-visible {
    color: #ffffff;
    opacity: 0.75;
}

.cp-footer-nav-item.is-current > a {
    box-shadow: inset 0 -2px 0 0 currentColor;
}

.cp-footer-nav *:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}