.skella-primary-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.skella-primary-menu li {
    margin: 0;
}

.skella-primary-menu a {
    position: relative;
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    border-radius: var(--sk-radius-pill);
    padding: .55rem .3rem;
    color: var(--sk-color-text);
    font-size: .93rem;
    font-weight: 680;
    text-decoration: none;
    transition:
        color var(--sk-transition-fast),
        background-color var(--sk-transition-fast),
        transform var(--sk-transition-fast);
}

.skella-primary-menu a::after {
    content: "";
    position: absolute;
    left: .32rem;
    right: .32rem;
    bottom: .28rem;
    height: 2px;
    border-radius: var(--sk-radius-pill);
    background: color-mix(in srgb, var(--sk-color-primary) 72%, transparent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--sk-transition-normal), opacity var(--sk-transition-fast);
    opacity: 0;
}

.skella-primary-menu a:hover,
.skella-primary-menu .current-menu-item > a,
.skella-primary-menu .current_page_item > a {
    background: transparent;
    color: var(--sk-color-secondary);
}

.skella-primary-menu a:hover::after,
.skella-primary-menu .current-menu-item > a::after,
.skella-primary-menu .current_page_item > a::after {
    transform: scaleX(1);
    opacity: 1;
}

.skella-primary-menu a:active {
    transform: scale(.98);
}

.skella-nav-toggle {
    width: 44px;
    height: 44px;
    padding: 11px;
    border: 1px solid color-mix(in srgb, var(--sk-color-border) 85%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--sk-color-background) 86%, transparent);
    color: var(--sk-color-secondary);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    box-shadow: none;
}

.skella-nav-toggle:hover {
    border-color: var(--sk-color-border-strong);
    background: var(--sk-color-surface);
    color: var(--sk-color-secondary);
    transform: none;
    box-shadow: none;
}

.skella-nav-toggle > span[aria-hidden="true"] {
    width: 18px;
    height: 2px;
    border-radius: var(--sk-radius-pill);
    background: currentColor;
    transform-origin: center;
    transition:
        transform var(--sk-transition-normal),
        opacity var(--sk-transition-fast);
}

.skella-nav-toggle[aria-expanded="true"] > span[aria-hidden="true"]:nth-of-type(2) {
    transform: translateY(3.5px) rotate(45deg);
}

.skella-nav-toggle[aria-expanded="true"] > span[aria-hidden="true"]:nth-of-type(3) {
    transform: translateY(-3.5px) rotate(-45deg);
}

@media (max-width: 820px) {
    body.skella-nav-open {
        overflow: hidden;
    }

    .skella-nav-toggle {
        display: inline-flex;
    }

    .skella-primary-nav {
        position: absolute;
        top: calc(100% + 10px);
        left: 14px;
        right: 14px;
        max-height: min(70vh, 560px);
        overflow-y: auto;
        border: 1px solid color-mix(in srgb, var(--sk-color-border) 95%, transparent);
        border-radius: var(--sk-radius-md);
        padding: 10px;
        background: color-mix(in srgb, var(--sk-color-background) 97%, transparent);
        box-shadow: var(--sk-shadow-md);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px) scale(.985);
        transform-origin: top center;
        pointer-events: none;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        transition:
            opacity var(--sk-transition-normal),
            transform var(--sk-transition-normal),
            visibility var(--sk-transition-normal);
    }

    .skella-primary-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .skella-primary-menu {
        align-items: stretch;
        flex-direction: column;
        gap: 2px;
    }

    .skella-primary-menu a {
        display: flex;
        min-height: 48px;
        padding: .75rem .85rem;
        border-radius: var(--sk-radius-sm);
        font-size: 1rem;
    }
}



@media (prefers-reduced-motion: reduce) {
    .skella-primary-nav,
    .skella-nav-toggle > span[aria-hidden="true"],
    .skella-primary-menu a {
        transition: none;
    }
}


.skella-header-cta {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-left: 18px;
    border: 1px solid color-mix(in srgb, var(--sk-color-primary) 22%, transparent);
    border-radius: var(--sk-radius-pill);
    padding: .62rem 1.12rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--sk-color-primary) 100%, #fff), color-mix(in srgb, var(--sk-color-primary-strong) 88%, var(--sk-color-primary)));
    color: var(--sk-color-on-primary);
    font-size: .92rem;
    font-weight: 780;
    text-decoration: none;
    box-shadow: var(--sk-shadow-xs);
    transition: transform var(--sk-transition-fast), background-color var(--sk-transition-fast), box-shadow var(--sk-transition-fast), border-color var(--sk-transition-fast);
}

.skella-header-cta:hover {
    background: var(--sk-color-primary-strong);
    color: var(--sk-color-on-primary);
    transform: translateY(-1px);
    box-shadow: var(--sk-shadow-sm);
}


@media (max-width: 820px) {
    .skella-header-cta {
        width: 100%;
        min-height: 48px;
        margin: 8px 0 0;
    }
}