/* Site header: a light "glass rail" (design 3C, 2026-10-14). Loaded by
   layouts.app on every page.
   - Desktop (>= 992px): the main links sit in a recessed pale-blue pill;
     the current page's link is pressed in, and a gold bar glows under
     whichever link is hovered.
   - Everywhere: Create Account is a chunky gold key that presses down,
     and the Contact Us handset lifts off its cradle on hover.
   The site stylesheet colors every link #3D3B58 and gives nav links a
   sliding underline (::before); both are overridden here. */

.header.header-shadow {
    background: #fff;
    border-bottom: 1px solid var(--np-rail-line);
}

/* The old teal strip above the header isn't part of this design. */
.top-line {
    display: none;
}

/* ===== The rail (desktop) ===== */
@media (min-width: 992px) {
    .navbar-nav.np-rail {
        gap: 4px;
        margin: 0 18px 0 auto;
        padding: 6px;
        border: 1px solid var(--np-rail-border);
        border-radius: 999px;
        background: var(--np-rail-bg);
        box-shadow: inset 0 2px 5px rgba(8, 49, 63, .1);
    }

    /* main.css spaces nav items 28px apart; the rail's gap replaces that. */
    .navbar-nav.np-rail .nav-item {
        margin-left: 0;
    }

    .navbar-nav.np-rail .nav-item a {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        margin: 0 !important;
        padding: 10px 18px !important;
        border-radius: 999px;
        color: var(--np-heading-soft) !important;
        font-size: 15px;
        font-weight: 500;
        transition: background .2s ease-out, color .2s ease-out;
    }

    .navbar-nav.np-rail .nav-item a::before {
        display: none !important;
    }

    /* The gold glow bar under a hovered link. */
    .navbar-nav.np-rail .nav-item a::after {
        content: "";
        position: absolute;
        right: 18px;
        bottom: 5px;
        left: 18px;
        height: 3px;
        border-radius: 3px;
        background: var(--np-gold);
        box-shadow: 0 0 10px var(--np-gold);
        transform: scaleX(0);
        transition: transform .25s ease;
    }

    .navbar-nav.np-rail .nav-item a:hover,
    .navbar-nav.np-rail .nav-item a:focus-visible {
        color: var(--np-heading) !important;
        outline: none;
    }

    .navbar-nav.np-rail .nav-item a:hover::after,
    .navbar-nav.np-rail .nav-item a:focus-visible::after {
        transform: scaleX(1);
    }

    /* The page you're on: pressed into the rail. */
    .navbar-nav.np-rail .nav-item a.np-rail-current {
        background: var(--np-rail-pressed);
        color: var(--np-heading) !important;
        font-weight: 600;
        box-shadow: inset 0 3px 6px rgba(8, 49, 63, .22), 0 1px 0 #fff;
    }

    .navbar-nav.np-header-actions .nav-item a:not(.reg-btn) {
        color: var(--np-teal) !important;
    }
}

/* Small laptops: tighter links, so a logged-in admin's longer action list
   still fits on one line. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .navbar-nav.np-rail {
        margin-right: 12px;
    }

    .navbar-nav.np-rail .nav-item a {
        padding: 9px 13px !important;
        font-size: 14px !important;
    }

    .navbar-nav.np-rail .nav-item a::after {
        right: 13px;
        left: 13px;
    }

    .navbar-nav.np-header-actions .nav-item {
        margin-left: 16px;
    }

    .navbar-nav.np-header-actions .nav-item a {
        font-size: 14px !important;
    }

    .navbar-nav.np-header-actions .nav-item a.reg-btn {
        padding: 8px 14px !important;
    }
}

@media (min-width: 992px) and (max-width: 1099.98px) {
    .navbar-nav.np-rail {
        margin-right: 8px;
    }

    .navbar-nav.np-rail .nav-item a {
        padding: 8px 9px !important;
        font-size: 13px !important;
    }

    .navbar-nav.np-rail .nav-item a::after {
        right: 9px;
        left: 9px;
    }

    .navbar-nav.np-header-actions .nav-item {
        margin-left: 12px;
    }

    .navbar-nav.np-header-actions .nav-item a {
        font-size: 13px !important;
    }
}

/* ===== Create Account: a chunky gold key ===== */
.navbar-nav.np-header-actions .nav-item a.reg-btn {
    color: #3D3B58 !important;
    background: linear-gradient(to bottom, var(--np-gold-bright), var(--np-gold)) !important;
    border: 2px solid var(--np-gold-dark) !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    box-shadow: 0 5px 0 var(--np-gold-deeper), 0 9px 14px rgba(0, 0, 0, .18);
    transform: translateY(-2px);
    transition: transform .12s ease-out, box-shadow .12s ease-out, background .2s ease-out;
}

.navbar-nav.np-header-actions .nav-item a.reg-btn:hover,
.navbar-nav.np-header-actions .nav-item a.reg-btn:focus-visible {
    color: #3D3B58 !important;
    background: linear-gradient(to bottom, var(--np-gold-hover-top), var(--np-gold-hover)) !important;
    border-color: var(--np-gold-dark) !important;
    box-shadow: 0 6px 0 var(--np-gold-deeper), 0 11px 16px rgba(0, 0, 0, .2);
    transform: translateY(-3px);
}

.navbar-nav.np-header-actions .nav-item a.reg-btn:active {
    box-shadow: 0 1px 0 var(--np-gold-deeper), 0 2px 4px rgba(0, 0, 0, .18);
    transform: translateY(2px);
}

/* ===== Contact Us: the handset lifts off its cradle ===== */
.np-handset {
    width: 18px;
    height: 18px;
    flex: none;
    fill: currentColor;
    overflow: visible;
}

.np-handset-receiver {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition: transform .25s cubic-bezier(.3, 1.4, .5, 1);
}

.np-contact-link:hover .np-handset-receiver,
.np-contact-link:focus-visible .np-handset-receiver {
    transform: translateY(-4px) rotate(-14deg);
}

@media (prefers-reduced-motion: reduce) {
    .np-handset-receiver,
    .navbar-nav.np-rail .nav-item a::after {
        transition: none;
    }
}