/* Main site navbar (templates/components/header.html).
   theme.min.css + theme.min.js already open .navbar-nav dropdowns on hover at
   >=992px and force them permanently expanded inside the mobile menu. These
   rules give the primary links one consistent treatment and style the richer
   Resources / Career Tools menus. Brand: navy #042C53, amber #F59E0B. */

/* Current section. .text-dark on the links is !important, so these states
   must be too. */
.site-nav .nav-link.active {
    color: #9a4b00 !important;
}

/* Menu item: icon tile + title + one-line description. */
.nav-menu-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    white-space: normal;
}

.nav-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    background-color: #eef3f8;
    color: #042C53;
    font-size: .95rem;
    transition: background-color .15s ease, color .15s ease;
}

.nav-menu-title {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.3;
    color: #042C53;
}

.nav-menu-desc {
    display: block;
    font-size: .8rem;
    line-height: 1.35;
    color: #6b7280;
}

@media (min-width: 992px) {
    .site-nav {
        align-items: center;
        gap: .15rem;
    }

    #mainNav .nav-link,
    #mainNav .btn {
        white-space: nowrap;
    }

    /* All primary links share one treatment so dropdowns do not look like a
       separate component. */
    .site-nav .nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
        padding: .6rem .8rem !important;
        line-height: 1.3;
        color: #042C53 !important;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: 10px;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    }

    .site-nav .nav-link.active {
        color: #9a4b00 !important;
        background-color: #fff7ed;
        border-color: #F59E0B;
    }

    .site-nav .nav-link:hover,
    .site-nav .nav-link:focus-visible,
    .site-nav .dropdown:hover > .nav-link,
    .site-nav .nav-link[aria-expanded="true"] {
        color: #0d4b2b !important;
        background-color: #f3f6f4;
        border-color: transparent;
        box-shadow: none;
    }

    /* The theme's caret is a grey SVG baked into `content`; draw a chevron in
       currentColor instead so it follows the link state and can rotate. */
    .site-nav .dropdown-toggle::after {
        content: "" !important;
        width: .42rem;
        height: .42rem;
        margin: -3px 0 0 .05rem;
        border: solid currentColor !important;
        border-width: 0 1.5px 1.5px 0 !important;
        transform: rotate(45deg);
        transition: transform .2s ease, margin .2s ease;
    }

    .site-nav .dropdown:hover > .dropdown-toggle::after,
    .site-nav .dropdown-toggle[aria-expanded="true"]::after {
        margin-top: 3px;
        transform: rotate(-135deg);
    }

    /* Menu panel. */
    .site-nav-menu {
        min-width: 17rem;
        padding: .5rem;
        margin-top: .6rem !important;
        border: 1px solid #e5e7eb;
        border-top: 3px solid #F59E0B;
        border-radius: 12px;
        box-shadow: 0 1rem 2.5rem rgba(4, 44, 83, .12);
    }

    /* Invisible bridge over the gap above the panel, so moving the mouse from
       the trigger to the menu doesn't fire the theme's mouseleave-to-close. */
    .site-nav-menu::before {
        content: "";
        position: absolute;
        top: calc(-.6rem - 3px);
        left: 0;
        right: 0;
        height: calc(.6rem + 3px);
    }

    /* Theme pulls items out by -1.75rem to cancel its own menu padding. */
    .site-nav-menu .nav-menu-item {
        margin: 0;
        padding: .55rem .75rem;
        border-radius: 8px;
        line-height: 1.3;
    }

    .site-nav-menu .nav-menu-item:hover,
    .site-nav-menu .nav-menu-item:focus {
        background-color: #f5f8fb;
    }

    .site-nav-menu .nav-menu-item:hover .nav-menu-icon,
    .site-nav-menu .nav-menu-item:focus .nav-menu-icon {
        color: #fff;
        background-color: #042C53;
    }

    /* Long first names would otherwise push the CTA off the row. */
    .nav-user-name {
        display: inline-block;
        max-width: 10rem;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }
}

/* 992-1199px: the lg container is only 960px wide, so tighten links and CTAs
   to keep logo + 5 links + account menu + CTA on one row (the widest case is
   a logged-in trial user). */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .site-nav {
        margin-left: .25rem !important;
    }

    .site-nav .nav-link {
        padding-left: .6rem !important;
        padding-right: .6rem !important;
        font-size: .9375rem;
    }

    #mainNav .btn {
        padding-left: .875rem !important;
        padding-right: .875rem !important;
        font-size: .875rem;
    }

    .nav-user-name {
        max-width: 8rem;
    }

    #mainNav .nav-item.me-lg-3 {
        margin-right: .5rem !important;
    }
}

/* Mobile menu: dropdown triggers are section headings (theme makes them
   non-clickable and keeps their lists expanded); list the items as icon rows. */
@media (max-width: 991.98px) {
    .site-nav .dropdown > .dropdown-toggle {
        margin-bottom: .75rem;
        font-size: .8rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #6b7280 !important;
    }

    .site-nav-menu .nav-menu-item {
        padding: .45rem 0;
    }

    .site-nav-menu .nav-menu-icon {
        width: 2rem;
        height: 2rem;
        font-size: .85rem;
    }
}