/* =========================================================
   SITESA GLOBAL PUBLIC HEADER V7
   Final desktop/tablet/mobile navigation refinement
   ========================================================= */

:root {
    --header-bg: #181b20;
    --header-bg-soft: #20242a;
    --header-border: rgba(255,255,255,.075);

    --header-text: #e8eaed;
    --header-muted: #9299a3;

    --header-orange: #f47a00;
    --header-orange-light: #ff941f;

    --header-container: 1180px;
}


/* =========================================================
   HEADER SHELL
   ========================================================= */

.site-header,
.sitesa-public-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;

    width: 100% !important;

    border: 0 !important;
    border-bottom: 1px solid var(--header-border) !important;

    background:
        linear-gradient(
            105deg,
            #171a1f 0%,
            #1c2026 58%,
            #181b20 100%
        ) !important;

    box-shadow:
        0 8px 28px rgba(0,0,0,.16) !important;
}


/* orange accent tipis */
.site-header::before,
.sitesa-public-header::before {
    content: "" !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    height: 2px !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--header-orange) 20%,
            var(--header-orange) 80%,
            transparent 100%
        ) !important;

    opacity: .72 !important;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.site-header .container,
.sitesa-public-header .portal-page-container {
    width: min(
        var(--header-container),
        calc(100% - 40px)
    ) !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   NAVBAR LAYOUT
   ========================================================= */

.site-header .navbar,
.sitesa-public-navbar {
    min-height: 76px !important;
    height: 76px !important;

    display: grid !important;

    grid-template-columns:
        minmax(260px, .8fr)
        auto !important;

    align-items: center !important;

    gap: 34px !important;

    padding: 0 !important;
}


/* =========================================================
   BRAND
   ========================================================= */

.site-header .brand,
.sitesa-public-brand {
    display: inline-flex !important;
    align-items: center !important;

    width: max-content !important;

    gap: 12px !important;

    text-decoration: none !important;
}


.site-header .brand-mark,
.sitesa-public-brand-mark {
    width: 40px !important;
    height: 40px !important;

    flex: 0 0 40px !important;

    display: grid !important;
    place-items: center !important;

    margin: 0 !important;

    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 11px !important;

    background:
        linear-gradient(
            145deg,
            #d71920 0%,
            #f47a00 92%
        ) !important;

    color: #fff !important;

    font-size: 15px !important;
    font-weight: 900 !important;

    box-shadow:
        0 7px 22px rgba(244,122,0,.24) !important;
}


.site-header .brand-copy,
.sitesa-public-brand-copy {
    display: flex !important;
    flex-direction: column !important;

    justify-content: center !important;

    min-width: 0 !important;
}


.site-header .brand-copy strong,
.sitesa-public-brand-copy strong {
    display: block !important;

    margin: 0 !important;

    color: #fff !important;

    font-size: 18px !important;
    line-height: 19px !important;
    font-weight: 850 !important;

    letter-spacing: -.2px !important;
}


.site-header .brand-copy span,
.sitesa-public-brand-copy small {
    display: block !important;

    margin-top: 4px !important;

    color: var(--header-muted) !important;

    font-size: 9px !important;
    line-height: 11px !important;

    font-weight: 750 !important;

    letter-spacing: .75px !important;
    text-transform: uppercase !important;
}


/* =========================================================
   NAVIGATION GROUP
   ========================================================= */

.site-header .nav-links,
.sitesa-public-nav {
    display: flex !important;

    align-items: center !important;
    justify-content: flex-end !important;

    gap: 5px !important;

    min-width: 0 !important;

    margin: 0 !important;
}


/* =========================================================
   NORMAL MENU ITEMS
   ========================================================= */

.site-header .nav-links > a,
.sitesa-public-nav > a {
    position: relative !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 40px !important;

    padding:
        0
        12px !important;

    margin: 0 !important;

    border: 1px solid transparent !important;
    border-radius: 9px !important;

    background: transparent !important;

    color: var(--header-text) !important;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 13.5px !important;
    line-height: 20px !important;

    font-weight: 650 !important;

    letter-spacing: -.08px !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    box-shadow: none !important;

    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease !important;
}


/* underline indicator */
.site-header .nav-links > a:not(.nav-demo):not(.nav-login)::after,
.sitesa-public-nav > a:not(.sitesa-public-demo):not(.sitesa-public-login)::after {
    content: "" !important;

    position: absolute !important;

    left: 12px !important;
    right: 12px !important;

    bottom: 4px !important;

    height: 2px !important;

    border-radius: 4px !important;

    background: var(--header-orange) !important;

    transform: scaleX(0) !important;
    transform-origin: center !important;

    opacity: 0 !important;

    transition:
        transform .18s ease,
        opacity .18s ease !important;
}


/* hover */
.site-header .nav-links > a:not(.nav-demo):not(.nav-login):hover,
.sitesa-public-nav > a:not(.sitesa-public-demo):not(.sitesa-public-login):hover {
    color: #fff !important;

    background:
        rgba(255,255,255,.065) !important;

    border-color:
        rgba(255,255,255,.055) !important;
}


.site-header .nav-links > a:not(.nav-demo):not(.nav-login):hover::after,
.sitesa-public-nav > a:not(.sitesa-public-demo):not(.sitesa-public-login):hover::after {
    transform: scaleX(1) !important;
    opacity: 1 !important;
}


/* active */
.sitesa-public-nav > a.active:not(.sitesa-public-demo):not(.sitesa-public-login) {
    color: #ff9d3a !important;

    background:
        rgba(244,122,0,.09) !important;

    border-color:
        rgba(244,122,0,.17) !important;
}


.sitesa-public-nav > a.active:not(.sitesa-public-demo):not(.sitesa-public-login)::after {
    transform: scaleX(1) !important;
    opacity: 1 !important;
}


/* =========================================================
   LOGIN
   ========================================================= */

.site-header .nav-login,
.sitesa-public-login {
    min-width: 66px !important;

    margin-left: 7px !important;

    padding:
        0
        15px !important;

    border:
        1px solid rgba(255,255,255,.17) !important;

    background:
        rgba(255,255,255,.045) !important;

    color: #fff !important;

    font-weight: 700 !important;
}


.site-header .nav-login:hover,
.sitesa-public-login:hover,
.sitesa-public-login.active {
    border-color:
        rgba(244,122,0,.58) !important;

    background:
        rgba(244,122,0,.10) !important;

    color:
        #ff9b35 !important;
}


/* =========================================================
   DEMO CTA
   ========================================================= */

.site-header .nav-demo,
.sitesa-public-demo {
    min-width: 102px !important;
    min-height: 42px !important;

    margin-left: 3px !important;

    padding:
        0
        17px !important;

    border:
        1px solid var(--header-orange) !important;

    border-radius: 10px !important;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #f47a00 0%,
            #ff8c18 100%
        ) !important;

    font-weight: 750 !important;

    box-shadow:
        0 7px 22px rgba(244,122,0,.22) !important;
}


.site-header .nav-demo:hover,
.sitesa-public-demo:hover {
    transform:
        translateY(-1px) !important;

    border-color:
        #ff941f !important;

    background:
        linear-gradient(
            135deg,
            #ff8510 0%,
            #ff9b32 100%
        ) !important;

    box-shadow:
        0 10px 28px rgba(244,122,0,.32) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1120px) {

    .site-header .navbar,
    .sitesa-public-navbar {
        grid-template-columns:
            230px
            auto !important;

        gap: 18px !important;
    }


    .site-header .nav-links,
    .sitesa-public-nav {
        gap: 2px !important;
    }


    .site-header .nav-links > a,
    .sitesa-public-nav > a {
        padding-inline:
            8px !important;

        font-size:
            12.5px !important;
    }

}


/* =========================================================
   MOBILE NAV
   ========================================================= */

@media (max-width: 860px) {

    .site-header .navbar,
    .sitesa-public-navbar {
        display: flex !important;

        min-height: 64px !important;
        height: 64px !important;

        justify-content: space-between !important;

        gap: 14px !important;
    }


    .site-header .brand-copy span,
    .sitesa-public-brand-copy small {
        display: none !important;
    }


    .sitesa-public-menu-toggle,
    .site-header .menu-toggle {
        width: 42px !important;
        height: 42px !important;

        display: grid !important;
        place-items: center !important;

        margin-left: auto !important;

        border:
            1px solid rgba(255,255,255,.12) !important;

        border-radius: 10px !important;

        background:
            rgba(255,255,255,.055) !important;

        color: #fff !important;
    }


    .site-header .nav-links,
    .sitesa-public-nav {
        position: absolute !important;

        top: 64px !important;
        left: 0 !important;
        right: 0 !important;

        display: none !important;

        flex-direction: column !important;
        align-items: stretch !important;

        gap: 3px !important;

        padding:
            12px
            16px
            16px !important;

        border-top:
            1px solid rgba(255,255,255,.07) !important;

        background:
            #181b20 !important;

        box-shadow:
            0 18px 34px rgba(0,0,0,.25) !important;
    }


    .site-header .nav-links.open,
    .sitesa-public-nav.open {
        display: flex !important;
    }


    .site-header .nav-links > a,
    .sitesa-public-nav > a {
        width: 100% !important;

        min-height: 46px !important;

        justify-content:
            flex-start !important;

        padding:
            0
            14px !important;

        font-size:
            13.5px !important;
    }


    .site-header .nav-login,
    .sitesa-public-login {
        margin-left:
            0 !important;

        justify-content:
            center !important;
    }


    .site-header .nav-demo,
    .sitesa-public-demo {
        margin:
            4px 0 0 !important;

        justify-content:
            center !important;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.site-header a:focus-visible,
.sitesa-public-header a:focus-visible,
.site-header button:focus-visible,
.sitesa-public-header button:focus-visible {
    outline:
        3px solid rgba(244,122,0,.45) !important;

    outline-offset:
        2px !important;
}


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

    .site-header *,
    .sitesa-public-header * {
        transition:
            none !important;
    }

}