/* =========================================
   ASMC GLOBAL HEADER
========================================= */


/* =========================================
   1. HEADER DESIGN TOKENS
========================================= */

:root {

    --header-height:
        74px;

    --header-logo-height:
        58px;

    --header-container-max:
        1320px;

    --header-nav-size:
        1rem;

    --header-nav-gap:
        clamp(
            1.8rem,
            2.6vw,
            3rem
        );

    --header-nav-right-space:
        clamp(
            1rem,
            3vw,
            3.5rem
        );
}



/* =========================================
   2. HEADER SHELL
========================================= */

.site-header {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    width:
        100%;

    background:
        transparent !important;

    border-bottom:
        1px solid
        transparent;

    box-shadow:
        none;

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;

    transition:

        background-color
        380ms
        var(--ease-standard),

        border-color
        380ms
        var(--ease-standard),

        box-shadow
        380ms
        var(--ease-standard),

        backdrop-filter
        380ms
        var(--ease-standard);
}



/* =========================================
   3. HEADER AFTER SCROLL
========================================= */

.site-header.is-scrolled {

    background:
        rgba(
            251,
            249,
            252,
            0.76
        ) !important;

    border-bottom-color:
        rgba(
            102,
            46,
            147,
            0.10
        );

    box-shadow:
        0 8px 30px
        rgba(
            33,
            22,
            39,
            0.06
        );

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}



/* =========================================
   4. HEADER CONTAINER
========================================= */

.site-header-container {

    width:
        min(
            calc(
                100% -
                (
                    var(--page-gutter) * 2
                )
            ),
            var(--header-container-max)
        );

    height:
        var(--header-height);

    margin-inline:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-lg);

    background:
        transparent;
}



/* =========================================
   5. SITE BRAND
========================================= */

.site-brand {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    color:
        var(--color-ink);

    text-decoration:
        none;

    background:
        transparent !important;

    box-shadow:
        none !important;
}



/* =========================================
   6. ASMC LOGO
========================================= */

.site-logo {

    display:
        block;

    width:
        auto;

    height:
        var(--header-logo-height);

    max-width:
        190px;

    object-fit:
        contain;

    background:
        transparent !important;

    box-shadow:
        none !important;
}



/* =========================================
   7. TEMPORARY LOGO FALLBACK
========================================= */

.site-brand-placeholder {

    width:
        50px;

    height:
        50px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        var(--gradient-brand);

    color:
        var(--color-white);

    font-family:
        var(--font-display);

    font-size:
        0.8rem;

    font-weight:
        var(--fw-bold);
}



/* =========================================
   8. DESKTOP NAVIGATION
========================================= */

.site-nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        var(--header-nav-gap);

    margin-left:
        auto;

    margin-right:
        var(--header-nav-right-space);

    background:
        transparent;
}



/* =========================================
   9. NAVIGATION LINKS
========================================= */

.nav-link {

    position:
        relative;

    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--color-ink);

    font-family:
        var(--font-display);

    font-size:
        var(--header-nav-size);

    font-weight:
        var(--fw-medium);

    line-height:
        1;

    text-decoration:
        none;

    transition:
        color
        var(--motion-fast)
        ease;
}



/* =========================================
   10. NAVIGATION UNDERLINE
========================================= */

.nav-link::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        auto;

    bottom:
        2px;

    width:
        100%;

    height:
        2px;

    border-radius:
        999px;

    background:
        var(--color-violet);

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform
        var(--motion-base)
        var(--ease-standard);
}


.nav-link:hover {

    color:
        var(--color-violet);
}


.nav-link:hover::after {

    transform:
        scaleX(1);

    transform-origin:
        left center;
}



/* =========================================
   11. ACTIVE PAGE
========================================= */

.nav-link.is-active {

    color:
        var(--color-violet);

    font-weight:
        var(--fw-semibold);
}


.nav-link.is-active::after {

    content:
        "" !important;

    position:
        absolute !important;

    left:
        0 !important;

    right:
        auto !important;

    bottom:
        2px !important;

    width:
        100% !important;

    height:
        2px !important;

    border-radius:
        999px !important;

    background:
        var(--color-violet) !important;

    transform:
        scaleX(1) !important;

    transform-origin:
        left center !important;
}



/* =========================================
   12. REGISTER MENU
========================================= */

.register-menu {

    position:
        relative;
}


.register-menu::after {

    content:
        "";

    position:
        absolute;

    top:
        100%;

    right:
        0;

    width:
        100%;

    height:
        16px;
}



/* =========================================
   13. REGISTER BUTTON
========================================= */

.header-register-button {

    position:
        relative;

    isolation:
        isolate;

    min-height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        0.8rem
        1.4rem;

    border:
        0;

    border-radius:
        var(--radius-pill);

    background:
        var(--color-orange);

    color:
        var(--color-ink);

    font-family:
        var(--font-display);

    font-size:
        0.95rem;

    font-weight:
        var(--fw-semibold);

    line-height:
        1;

    white-space:
        nowrap;

    cursor:
        pointer;

    box-shadow:
        0 7px 20px
        rgba(
            247,
            148,
            29,
            0.20
        );

    transition:

        transform
        var(--motion-base)
        var(--ease-standard),

        box-shadow
        var(--motion-base)
        var(--ease-standard),

        background
        var(--motion-base)
        ease;
}



/* =========================================
   14. REGISTER PULSE
========================================= */

.header-register-button::before {

    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    inset:
        -5px;

    border:
        2px solid
        rgba(
            247,
            148,
            29,
            0.50
        );

    border-radius:
        inherit;

    pointer-events:
        none;

    animation:
        register-pulse
        2.6s
        ease-out
        infinite;
}


@keyframes register-pulse {

    0% {

        transform:
            scale(0.96);

        opacity:
            0.75;
    }


    65% {

        transform:
            scale(1.14);

        opacity:
            0;
    }


    100% {

        transform:
            scale(1.14);

        opacity:
            0;
    }
}



/* =========================================
   15. REGISTER HOVER
========================================= */

.header-register-button:hover {

    transform:
        translateY(-2px);

    background:
        linear-gradient(
            135deg,
            var(--color-orange),
            #FFB547
        );

    box-shadow:
        0 12px 28px
        rgba(
            247,
            148,
            29,
            0.30
        );
}



/* =========================================
   16. REGISTER CHEVRON
========================================= */

.register-chevron {

    display:
        inline-block;

    font-size:
        0.85rem;

    transition:
        transform
        var(--motion-base)
        var(--ease-standard);
}


.register-menu:hover
.register-chevron,

.register-menu:focus-within
.register-chevron,

.register-menu.is-open
.register-chevron {

    transform:
        rotate(180deg);
}



/* =========================================
   17. REGISTER DROPDOWN
========================================= */

.register-dropdown {

    position:
        absolute;

    top:
        calc(
            100% + 14px
        );

    right:
        0;

    width:
        310px;

    padding:
        0.6rem;

    background:
        rgba(
            255,
            255,
            255,
            0.98
        );

    border:
        1px solid
        var(--color-border);

    border-radius:
        20px;

    box-shadow:
        var(--shadow-dropdown);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-8px);

    pointer-events:
        none;

    transition:

        opacity
        var(--motion-fast)
        ease,

        visibility
        var(--motion-fast)
        ease,

        transform
        var(--motion-base)
        var(--ease-standard);
}


.register-menu:hover
.register-dropdown,

.register-menu:focus-within
.register-dropdown,

.register-menu.is-open
.register-dropdown {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

    pointer-events:
        auto;
}



/* =========================================
   18. REGISTER OPTIONS
========================================= */

.register-option {

    display:
        grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        12px;

    min-height:
        70px;

    padding:
        0.75rem;

    border-radius:
        14px;

    color:
        var(--color-ink);

    text-decoration:
        none;

    transition:

        background-color
        var(--motion-fast)
        ease,

        transform
        var(--motion-base)
        var(--ease-standard);
}


.register-option:hover {

    background:
        var(--color-orange-soft);

    transform:
        translateX(3px);
}


.register-option-icon {

    width:
        42px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        var(--gradient-brand);

    color:
        var(--color-white);

    font-family:
        var(--font-display);

    font-size:
        0.85rem;

    font-weight:
        var(--fw-bold);
}


.register-option-content {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.register-option-title {

    font-family:
        var(--font-display);

    font-size:
        0.95rem;

    font-weight:
        var(--fw-semibold);
}


.register-option-description {

    font-family:
        var(--font-body);

    font-size:
        0.82rem;

    color:
        var(--color-text-secondary);
}


.register-option-arrow {

    color:
        var(--color-violet);

    font-size:
        1.1rem;

    transition:
        transform
        var(--motion-base)
        var(--ease-standard);
}


.register-option:hover
.register-option-arrow {

    transform:
        translateX(4px);
}



/* =========================================
   19. MOBILE MENU BUTTON
========================================= */

.mobile-menu-toggle {

    display:
        none;

    width:
        44px;

    height:
        44px;

    padding:
        0;

    border:
        1px solid
        var(--color-border);

    border-radius:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            0.82
        );

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        6px;

    cursor:
        pointer;
}


.menu-line {

    width:
        19px;

    height:
        2px;

    border-radius:
        var(--radius-pill);

    background:
        var(--color-ink);

    transition:

        transform
        var(--motion-base)
        var(--ease-standard),

        opacity
        var(--motion-fast)
        ease;
}


.mobile-menu-toggle.is-open
.menu-line:first-child {

    transform:
        translateY(4px)
        rotate(45deg);
}


.mobile-menu-toggle.is-open
.menu-line:last-child {

    transform:
        translateY(-4px)
        rotate(-45deg);
}



/* =========================================
   20. FOCUS STATES
========================================= */

.site-brand:focus-visible,
.nav-link:focus-visible,
.register-option:focus-visible,
.header-register-button:focus-visible {

    outline:
        3px solid
        rgba(
            102,
            46,
            147,
            0.22
        );

    outline-offset:
        4px;
}



/* =========================================
   21. MOBILE HEADER
========================================= */

@media (max-width: 768px) {

    :root {

        --header-height:
            64px;

        --header-logo-height:
            48px;
    }


    .site-header-container {

        height:
            var(--header-height);
    }


    .site-logo {

        height:
            var(--header-logo-height);

        max-width:
            155px;
    }


    .mobile-menu-toggle {

        display:
            inline-flex;
    }


    .site-nav {

        position:
            absolute;

        top:
            calc(
                100% + 1px
            );

        left:
            0;

        right:
            0;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0.35rem;

        margin:
            0;

        padding:
            1rem
            var(--page-gutter)
            1.25rem;

        background:
            rgba(
                251,
                249,
                252,
                0.96
            );

        backdrop-filter:
            blur(18px);

        -webkit-backdrop-filter:
            blur(18px);

        border-bottom:
            1px solid
            var(--color-border);

        box-shadow:
            var(--shadow-header);

        opacity:
            0;

        visibility:
            hidden;

        transform:
            translateY(-8px);

        pointer-events:
            none;

        transition:

            opacity
            var(--motion-fast)
            ease,

            visibility
            var(--motion-fast)
            ease,

            transform
            var(--motion-base)
            var(--ease-standard);
    }


    .site-nav.is-open {

        opacity:
            1;

        visibility:
            visible;

        transform:
            translateY(0);

        pointer-events:
            auto;
    }


    .nav-link {

        width:
            100%;

        min-height:
            52px;

        justify-content:
            flex-start;

        padding:
            0 0.5rem;

        border-bottom:
            1px solid
            var(--color-border);

        font-size:
            1rem;
    }


    .nav-link::after {

        left:
            0.5rem;

        right:
            auto;

        bottom:
            6px;

        width:
            42px;

        height:
            2px;

        border-radius:
            999px;

        transform:
            scaleX(0);

        transform-origin:
            left center;
    }


    .nav-link.is-active::after {

        left:
            0.5rem !important;

        right:
            auto !important;

        bottom:
            6px !important;

        width:
            42px !important;

        height:
            2px !important;

        border-radius:
            999px !important;

        transform:
            scaleX(1) !important;

        transform-origin:
            left center !important;
    }


    .register-menu {

        width:
            100%;

        margin-top:
            0.5rem;
    }


    .register-menu::after {

        display:
            none;
    }


    .header-register-button {

        width:
            100%;

        min-height:
            52px;

        justify-content:
            space-between;

        padding:
            0.9rem
            1.1rem;
    }


    .register-dropdown {

        position:
            static;

        width:
            100%;

        max-height:
            0;

        margin-top:
            0;

        padding:
            0;

        border:
            0;

        box-shadow:
            none;

        opacity:
            0;

        visibility:
            hidden;

        overflow:
            hidden;

        transform:
            none;

        pointer-events:
            none;

        transition:

            max-height
            var(--motion-slow)
            var(--ease-emphasized),

            opacity
            var(--motion-fast)
            ease,

            margin-top
            var(--motion-base)
            ease;
    }


    .register-menu.is-open
    .register-dropdown {

        max-height:
            220px;

        margin-top:
            0.6rem;

        padding:
            0.4rem;

        border:
            1px solid
            var(--color-border);

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;
    }


    .register-menu:hover
    .register-dropdown {

        max-height:
            0;

        margin-top:
            0;

        padding:
            0;

        border:
            0;

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;
    }


    .register-menu.is-open:hover
    .register-dropdown {

        max-height:
            220px;

        margin-top:
            0.6rem;

        padding:
            0.4rem;

        border:
            1px solid
            var(--color-border);

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;
    }

}



/* =========================================
   22. SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    :root {

        --header-logo-height:
            46px;
    }


    .site-logo {

        max-width:
            145px;
    }

}



/* =========================================
   23. REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .header-register-button::before {

        animation:
            none;
    }


    .site-header {

        transition:
            none;
    }

}