/*
 * IXZIS navigation V3.
 * A viewport-safe burger panel and compact desktop support mega-menu.
 */

.kng-nav-scroll-cue {
    display: none;
}

/* Normal desktop navigation starts at a practical laptop/desktop width. */
@media (min-width: 1281px) {
    #kng-header .kng-burger,
    #kng-header.public-header-design .kng-burger,
    .dashboard-public-header .kng-burger {
        display: none !important;
    }

    #kng-header .kng-nav,
    #kng-header.public-header-design .kng-nav,
    .dashboard-public-header .kng-nav {
        position: static !important;
        inset: auto !important;
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: clamp(2px, .38vw, 8px) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: none !important;
        height: auto !important;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    #kng-header .kng-nav > a,
    #kng-header .kng-nav > .kng-nav-group,
    #kng-header .kng-nav > .theme-orb-toggle--nav,
    .dashboard-public-header .kng-nav > a,
    .dashboard-public-header .kng-nav > .kng-nav-group,
    .dashboard-public-header .kng-nav > .theme-orb-toggle--nav {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    #kng-header .kng-nav > a,
    #kng-header .kng-nav > .kng-nav-group > .kng-nav-group__button,
    .dashboard-public-header .kng-nav > a,
    .dashboard-public-header .kng-nav > .kng-nav-group > .kng-nav-group__button {
        display: inline-flex !important;
        align-items: center !important;
        gap: clamp(4px, .34vw, 7px) !important;
        width: auto !important;
        min-height: 40px !important;
        padding: 7px clamp(7px, .48vw, 11px) !important;
        overflow: visible !important;
        border: 1px solid transparent !important;
        border-radius: 13px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: rgba(239, 245, 251, .84) !important;
        font-size: clamp(10px, .71vw, 13px) !important;
        font-weight: 760 !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        transform: none !important;
    }

    #kng-header .kng-nav > a:hover,
    #kng-header .kng-nav > a:focus-visible,
    #kng-header .kng-nav > a.is-current,
    #kng-header .kng-nav > .kng-nav-group.is-open > .kng-nav-group__button,
    #kng-header .kng-nav > .kng-nav-group.is-current > .kng-nav-group__button,
    .dashboard-public-header .kng-nav > a:hover,
    .dashboard-public-header .kng-nav > a:focus-visible,
    .dashboard-public-header .kng-nav > a.is-current,
    .dashboard-public-header .kng-nav > .kng-nav-group.is-open > .kng-nav-group__button,
    .dashboard-public-header .kng-nav > .kng-nav-group.is-current > .kng-nav-group__button {
        border-color: rgba(var(--public-burger-accent-rgb, 95, 242, 255), .24) !important;
        background: linear-gradient(135deg, rgba(var(--public-burger-accent-rgb, 95, 242, 255), .12), rgba(114, 91, 255, .09)) !important;
        color: #ffffff !important;
    }

    #kng-header .kng-nav__emoji,
    .dashboard-public-header .kng-nav__emoji {
        flex: 0 0 20px !important;
        width: 20px !important;
        height: 20px !important;
        border-radius: 7px !important;
        font-size: 11px !important;
    }

    #kng-header .kng-nav > .theme-orb-toggle--nav,
    .dashboard-public-header .kng-nav > .theme-orb-toggle--nav {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 92px !important;
        min-height: 40px !important;
        padding: 6px 9px !important;
    }

    /* Support opens as a horizontal mega-menu instead of a long column. */
    #kng-header .kng-nav-group > .kng-nav-group__menu,
    .dashboard-public-header .kng-nav-group > .kng-nav-group__menu,
    #kng-header .kng-nav-group:not(.is-open) > .kng-nav-group__menu,
    .dashboard-public-header .kng-nav-group:not(.is-open) > .kng-nav-group__menu {
        position: fixed !important;
        z-index: 100010 !important;
        top: 92px !important;
        left: 50% !important;
        right: auto !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 9px !important;
        width: min(1120px, calc(100vw - 40px)) !important;
        min-width: 0 !important;
        max-width: 1120px !important;
        max-height: min(60dvh, 430px) !important;
        margin: 0 !important;
        padding: 14px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 1px solid rgba(var(--public-burger-accent-rgb, 95, 242, 255), .22) !important;
        border-radius: 22px !important;
        background:
            radial-gradient(circle at 4% 0, rgba(var(--public-burger-accent-rgb, 95, 242, 255), .12), transparent 28rem),
            radial-gradient(circle at 96% 8%, rgba(116, 91, 255, .12), transparent 25rem),
            linear-gradient(145deg, rgba(23, 38, 57, .985), rgba(7, 15, 28, .99)) !important;
        box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 28px 80px rgba(0, 0, 0, .42) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
        backdrop-filter: blur(24px) saturate(1.12) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate(-50%, -8px) scale(.99) !important;
        transform-origin: top center !important;
        transition: opacity .18s ease, visibility .18s ease, transform .2s ease !important;
    }

    #kng-header .kng-nav-group.is-open > .kng-nav-group__menu,
    .dashboard-public-header .kng-nav-group.is-open > .kng-nav-group__menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate(-50%, 0) scale(1) !important;
    }

    #kng-header .kng-nav-group__menu > a,
    .dashboard-public-header .kng-nav-group__menu > a {
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 50px !important;
        padding: 10px 12px !important;
        border: 1px solid rgba(142, 190, 219, .16) !important;
        border-radius: 14px !important;
        color: #dbe6ef !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .025)) !important;
        font-size: 12px !important;
        font-weight: 760 !important;
        white-space: normal !important;
    }
}

/* Burger mode: only the panel scrolls; the page, header and close button stay put. */
@media (max-width: 1280px) {
    body.menu-open {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    body.menu-open #kng-header,
    body.menu-open #kng-header.hide,
    body.menu-open .dashboard-public-header,
    body.menu-open .dashboard-public-header.hide {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    #kng-header .kng-burger,
    #kng-header.public-header-design .kng-burger,
    .dashboard-public-header .kng-burger {
        position: relative !important;
        z-index: 100012 !important;
        display: inline-flex !important;
        flex: 0 0 48px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;
        margin: 0 0 0 auto !important;
    }

    #kng-header .kng-nav,
    #kng-header.public-header-design .kng-nav,
    .dashboard-public-header .kng-nav {
        position: absolute !important;
        z-index: 100010 !important;
        top: calc(100% + 10px) !important;
        left: 0 !important;
        right: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: start !important;
        justify-content: stretch !important;
        gap: 9px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        max-height: calc(100dvh - 112px) !important;
        margin: 0 !important;
        padding: 14px 14px 64px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
        border: 1px solid rgba(var(--public-burger-accent-rgb, 95, 242, 255), .22) !important;
        border-radius: 23px !important;
        background:
            radial-gradient(circle at 7% 0, rgba(var(--public-burger-accent-rgb, 95, 242, 255), .13), transparent 30rem),
            radial-gradient(circle at 94% 8%, rgba(113, 91, 255, .12), transparent 26rem),
            linear-gradient(145deg, rgba(22, 38, 58, .99), rgba(6, 14, 28, .99)) !important;
        box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 30px 86px rgba(0, 0, 0, .48) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
        backdrop-filter: blur(24px) saturate(1.12) !important;
        scrollbar-width: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-8px) scale(.99) !important;
        transform-origin: top center !important;
        transition: opacity .18s ease, visibility .18s ease, transform .2s ease !important;
    }

    #kng-header .kng-nav::-webkit-scrollbar,
    .dashboard-public-header .kng-nav::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    #kng-header .kng-nav.is-open,
    #kng-header.public-header-design .kng-nav.is-open,
    .dashboard-public-header .kng-nav.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }

    #kng-header .kng-nav > a,
    #kng-header .kng-nav > .kng-nav-group,
    #kng-header .kng-nav > .theme-orb-toggle--nav,
    .dashboard-public-header .kng-nav > a,
    .dashboard-public-header .kng-nav > .kng-nav-group,
    .dashboard-public-header .kng-nav > .theme-orb-toggle--nav {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    #kng-header .kng-nav > a,
    #kng-header .kng-nav > .kng-nav-group > .kng-nav-group__button,
    #kng-header .kng-nav > .theme-orb-toggle--nav,
    .dashboard-public-header .kng-nav > a,
    .dashboard-public-header .kng-nav > .kng-nav-group > .kng-nav-group__button,
    .dashboard-public-header .kng-nav > .theme-orb-toggle--nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 56px !important;
        padding: 10px 13px !important;
        overflow: hidden !important;
        border: 1px solid rgba(146, 198, 229, .20) !important;
        border-radius: 17px !important;
        color: rgba(239, 246, 252, .90) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03)) !important;
        box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 8px 20px rgba(0, 0, 0, .12) !important;
        font-size: 12px !important;
        font-weight: 760 !important;
        line-height: 1.2 !important;
        text-align: left !important;
        white-space: normal !important;
        transform: none !important;
    }

    #kng-header .kng-nav > a:hover,
    #kng-header .kng-nav > a:focus-visible,
    #kng-header .kng-nav > a.is-current,
    #kng-header .kng-nav > .kng-nav-group.is-open > .kng-nav-group__button,
    #kng-header .kng-nav > .kng-nav-group.is-current > .kng-nav-group__button,
    .dashboard-public-header .kng-nav > a:hover,
    .dashboard-public-header .kng-nav > a:focus-visible,
    .dashboard-public-header .kng-nav > a.is-current,
    .dashboard-public-header .kng-nav > .kng-nav-group.is-open > .kng-nav-group__button,
    .dashboard-public-header .kng-nav > .kng-nav-group.is-current > .kng-nav-group__button {
        border-color: rgba(var(--public-burger-accent-rgb, 95, 242, 255), .44) !important;
        color: #ffffff !important;
        background: linear-gradient(135deg, rgba(var(--public-burger-accent-rgb, 95, 242, 255), .18), rgba(112, 91, 255, .13)) !important;
    }

    #kng-header .kng-nav > .kng-nav-group.is-open,
    .dashboard-public-header .kng-nav > .kng-nav-group.is-open {
        grid-column: 1 / -1 !important;
    }

    #kng-header .kng-nav-group > .kng-nav-group__button::after,
    .dashboard-public-header .kng-nav-group > .kng-nav-group__button::after {
        margin-left: auto !important;
    }

    #kng-header .kng-nav-group > .kng-nav-group__menu,
    .dashboard-public-header .kng-nav-group > .kng-nav-group__menu,
    #kng-header .kng-nav-group:not(.is-open) > .kng-nav-group__menu,
    .dashboard-public-header .kng-nav-group:not(.is-open) > .kng-nav-group__menu {
        position: static !important;
        inset: auto !important;
        display: none !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 8px 0 0 !important;
        padding: 8px !important;
        overflow: visible !important;
        border: 1px solid rgba(144, 191, 223, .13) !important;
        border-radius: 15px !important;
        background: rgba(2, 10, 24, .42) !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    #kng-header .kng-nav-group.is-open > .kng-nav-group__menu,
    .dashboard-public-header .kng-nav-group.is-open > .kng-nav-group__menu {
        display: grid !important;
    }

    #kng-header .kng-nav-group__menu > a,
    .dashboard-public-header .kng-nav-group__menu > a {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        padding: 8px 10px !important;
        overflow-wrap: anywhere !important;
        border: 1px solid rgba(142, 190, 219, .12) !important;
        border-radius: 12px !important;
        color: #d7e3ec !important;
        background: rgba(255, 255, 255, .035) !important;
        font-size: 11px !important;
        font-weight: 720 !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    .kng-nav-scroll-cue {
        position: absolute;
        z-index: 100014;
        top: calc(100dvh - 62px);
        left: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 36px;
        padding: 8px 13px;
        border: 1px solid rgba(var(--public-burger-accent-rgb, 95, 242, 255), .24);
        border-radius: 999px;
        color: #d9f8ff;
        background: rgba(8, 19, 33, .92);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .34), 0 0 18px rgba(var(--public-burger-accent-rgb, 95, 242, 255), .08);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .04em;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 8px);
        transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
    }

    .kng-nav-scroll-cue svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    body.menu-open .kng-nav-scroll-cue.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }
}

@media (max-width: 1180px) {
    #kng-header .kng-nav,
    #kng-header.public-header-design .kng-nav,
    .dashboard-public-header .kng-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    #kng-header .kng-nav-group > .kng-nav-group__menu,
    .dashboard-public-header .kng-nav-group > .kng-nav-group__menu {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    #kng-header .kng-nav,
    #kng-header.public-header-design .kng-nav,
    .dashboard-public-header .kng-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-height: calc(100dvh - 188px) !important;
        padding: 11px 11px 58px !important;
    }

    #kng-header .kng-nav-group > .kng-nav-group__menu,
    .dashboard-public-header .kng-nav-group > .kng-nav-group__menu {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .kng-nav-scroll-cue {
        top: calc(100dvh - 154px);
    }
}

@media (max-width: 480px) {
    #kng-header .kng-nav,
    #kng-header.public-header-design .kng-nav,
    .dashboard-public-header .kng-nav {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    #kng-header .kng-nav > a,
    #kng-header .kng-nav > .kng-nav-group > .kng-nav-group__button,
    #kng-header .kng-nav > .theme-orb-toggle--nav,
    .dashboard-public-header .kng-nav > a,
    .dashboard-public-header .kng-nav > .kng-nav-group > .kng-nav-group__button,
    .dashboard-public-header .kng-nav > .theme-orb-toggle--nav {
        min-height: 50px !important;
    }

    /* The support children deliberately stay horizontal on narrow phones. */
    #kng-header .kng-nav-group > .kng-nav-group__menu,
    .dashboard-public-header .kng-nav-group > .kng-nav-group__menu {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1280px) {
    html[data-public-theme="light"] #kng-header .kng-nav,
    html[data-public-theme="light"] #kng-header.public-header-design .kng-nav,
    html[data-public-theme="light"] .dashboard-public-header .kng-nav {
        border-color: rgba(25, 103, 133, .20) !important;
        background:
            radial-gradient(circle at 7% 0, rgba(33, 183, 203, .12), transparent 30rem),
            radial-gradient(circle at 94% 8%, rgba(113, 91, 255, .08), transparent 26rem),
            linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(225, 240, 247, .99)) !important;
        box-shadow: inset 0 1px #ffffff, 0 28px 76px rgba(34, 70, 92, .22) !important;
    }

    html[data-public-theme="light"] #kng-header .kng-nav > a,
    html[data-public-theme="light"] #kng-header .kng-nav > .kng-nav-group > .kng-nav-group__button,
    html[data-public-theme="light"] #kng-header .kng-nav > .theme-orb-toggle--nav,
    html[data-public-theme="light"] .dashboard-public-header .kng-nav > a,
    html[data-public-theme="light"] .dashboard-public-header .kng-nav > .kng-nav-group > .kng-nav-group__button,
    html[data-public-theme="light"] .dashboard-public-header .kng-nav > .theme-orb-toggle--nav {
        border-color: rgba(35, 91, 119, .18) !important;
        color: #173149 !important;
        background: rgba(255, 255, 255, .68) !important;
    }

    html[data-public-theme="light"] .kng-nav-scroll-cue {
        border-color: rgba(22, 126, 151, .23);
        color: #13394d;
        background: rgba(246, 251, 253, .94);
    }
}

@media (prefers-reduced-motion: reduce) {
    #kng-header .kng-nav,
    .dashboard-public-header .kng-nav,
    .kng-nav-scroll-cue {
        transition: none !important;
    }
}