.site-header #primary-navigation {
    gap: 6px;
}

.site-header .nav-link {
    position: relative;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 6px 9px;
    overflow: hidden;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.site-header .nav-link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--blue), var(--blue2));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}

.site-header .nav-link__icon {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #756b72;
    background: #f2f4f8;
    transition: color .28s ease, background-color .28s ease, transform .34s cubic-bezier(.2, .75, .3, 1.4), box-shadow .28s ease;
}

.site-header .nav-link__icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus-visible,
.site-header .nav-item:focus-within > .nav-link {
    color: var(--blue);
    border-color: #fff8fa;
    background: #fff8fa;
    box-shadow: 0 8px 20px rgba(139,30,90, .08);
    transform: translateY(-2px);
}

.site-header .nav-link:hover::after,
.site-header .nav-link:focus-visible::after,
.site-header .nav-link.is-active::after,
.site-header .nav-item:focus-within > .nav-link::after {
    transform: scaleX(1);
}

.site-header .nav-link:hover .nav-link__icon,
.site-header .nav-link:focus-visible .nav-link__icon,
.site-header .nav-link.is-active .nav-link__icon,
.site-header .nav-item:focus-within > .nav-link .nav-link__icon {
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    transform: translateY(-2px) rotate(-5deg) scale(1.08);
    box-shadow: 0 7px 16px rgba(139,30,90, .25);
}

.site-header .nav-link--priority,
.site-header .nav-link.is-active {
    color: #8b1e5a;
    border-color: #fff8fa;
    background: #fff8fa;
}

.site-header .nav-link--highlight .nav-link__icon {
    color: #7a284f;
    background: var(--lime);
}

.site-header .nav-chevron {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s ease;
}

.site-header .nav-item:hover > .nav-link .nav-chevron,
.site-header .nav-item:focus-within > .nav-link .nav-chevron,
.site-header .nav-item.mobile-expanded > .nav-link .nav-chevron {
    transform: rotate(180deg);
}

@media (max-width: 1180px) and (min-width: 1021px) {
    .site-header .nav-link__icon { display: none; }
    .site-header .nav-link { padding-inline: 7px; }
}

@media (max-width: 1020px) {
    .site-header #primary-navigation { gap: 0; }
    .site-header .nav-link {
        width: 100%;
        min-height: 53px;
        justify-content: flex-start !important;
        border-width: 0 0 1px !important;
        border-radius: 0;
        padding: 10px 2px !important;
        overflow: visible;
    }
    .site-header .nav-link .nav-chevron { margin-left: auto; }
    .site-header .nav-link::after { left: 0; right: auto; bottom: -1px; width: 54px; }
    .site-header .nav-link:hover,
    .site-header .nav-link:focus-visible { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .nav-link,
    .site-header .nav-link::after,
    .site-header .nav-link__icon,
    .site-header .nav-chevron { transition: none; }
}

/* Keep desktop dropdowns above page sections and preserve the pointer path. */
@media (min-width: 1021px) {
    .site-header {
        z-index: 1000 !important;
        overflow: visible !important;
    }

    .site-header #primary-navigation,
    .site-header .nav-item {
        overflow: visible !important;
    }

    .site-header .nav-panel {
        top: calc(100% - 1px) !important;
        z-index: 1100 !important;
        max-height: calc(100vh - 96px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        pointer-events: auto;
    }

    .site-header .nav-item.menu-expanded > .nav-panel,
    .site-header .nav-item:hover > .nav-panel,
    .site-header .nav-item:focus-within > .nav-panel {
        visibility: visible;
        pointer-events: auto;
    }
}