/*
 * IXZIS public navigation v2.
 * Isolated late-loading layer: fixes overflow without changing page content,
 * admin-controlled colors or the navigation JavaScript contract.
 */

#kng-header,
.dashboard-public-header {
    padding-inline: clamp(14px, 2vw, 40px) !important;
}

#kng-header .kng-header__inner,
#kng-header.public-header-design .kng-header__inner,
.dashboard-public-header .kng-header__inner {
    width: calc(100vw - clamp(28px, 4vw, 80px)) !important;
    max-width: none !important;
    min-width: 0 !important;
    gap: clamp(10px, 1vw, 20px) !important;
    padding-inline: clamp(14px, 1.35vw, 26px) !important;
}

#kng-header .kng-logo,
.dashboard-public-header .kng-logo {
    position: relative !important;
    z-index: 4 !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: clamp(112px, 10vw, 180px) !important;
    margin-right: clamp(4px, .5vw, 10px) !important;
    overflow: hidden !important;
}

#kng-header .kng-logo > span,
.dashboard-public-header .kng-logo > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Wide desktop: one controlled line with enough horizontal room. */
@media (min-width: 1801px) {
    #kng-header .kng-burger,
    .dashboard-public-header .kng-burger {
        display: none !important;
    }

    #kng-header .kng-nav,
    .dashboard-public-header .kng-nav {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(2px, .34vw, 9px) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 0 0 auto !important;
        position: relative !important;
        left: clamp(-72px, -3.4vw, -52px) !important;
        overflow: visible !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;
        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 {
        min-height: 40px !important;
        padding-inline: clamp(7px, .46vw, 12px) !important;
        gap: clamp(5px, .34vw, 8px) !important;
        font-size: clamp(11px, .68vw, 14px) !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    #kng-header .kng-nav__emoji,
    .dashboard-public-header .kng-nav__emoji {
        flex: 0 0 19px !important;
        width: 19px !important;
        height: 19px !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;
        min-width: 104px !important;
        margin: 0 !important;
    }
}

/*
 * Laptop/tablet/menu mode. The switch happens before labels can collide.
 * The opened panel spans the complete safe header width and uses a grid.
 */
@media (max-width: 1800px) {
    #kng-header,
    .dashboard-public-header {
        padding: 10px clamp(12px, 2vw, 28px) !important;
    }

    #kng-header .kng-header__inner,
    #kng-header.public-header-design .kng-header__inner,
    .dashboard-public-header .kng-header__inner {
        width: calc(100vw - clamp(24px, 4vw, 56px)) !important;
        min-height: 68px !important;
        height: 68px !important;
        max-height: 68px !important;
        padding: 9px clamp(12px, 1.8vw, 22px) !important;
        overflow: visible !important;
    }

    #kng-header .kng-logo,
    .dashboard-public-header .kng-logo {
        max-width: min(48vw, 220px) !important;
        margin-right: 8px !important;
    }

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

    #kng-header.public-header-label--label .kng-burger {
        display: inline-grid !important;
        width: auto !important;
        min-width: 104px !important;
    }

    #kng-header.public-header-burger-position--left .kng-burger {
        order: -1 !important;
        margin: 0 10px 0 0 !important;
    }

    #kng-header.public-header-burger-position--right .kng-burger,
    .dashboard-public-header .kng-burger {
        order: initial !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: 20 !important;
        top: calc(100% + clamp(8px, 1vw, 14px)) !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: 10px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        max-height: min(76vh, 660px) !important;
        height: auto !important;
        margin: 0 !important;
        padding: clamp(14px, 2vw, 22px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 1px solid rgba(var(--public-burger-accent-rgb, 95, 242, 255), .2) !important;
        border-radius: clamp(20px, 2vw, 28px) !important;
        background:
            radial-gradient(circle at 8% 0, rgba(var(--public-burger-accent-rgb, 95, 242, 255), .14), transparent 28rem),
            radial-gradient(circle at 94% 8%, rgba(113, 91, 255, .13), transparent 24rem),
            linear-gradient(145deg, rgba(22, 39, 61, .98), rgba(7, 16, 32, .98)) !important;
        box-shadow:
            inset 0 1px rgba(255, 255, 255, .09),
            0 32px 90px rgba(0, 0, 0, .46) !important;
        backdrop-filter: blur(var(--public-burger-mobile-blur, 26px)) saturate(1.12) !important;
        -webkit-backdrop-filter: blur(var(--public-burger-mobile-blur, 26px)) saturate(1.12) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-10px) scale(.99) !important;
        transform-origin: top center !important;
        transition: opacity .2s ease, visibility .2s ease, transform .22s ease !important;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--public-burger-accent-rgb, 95, 242, 255), .42) rgba(255, 255, 255, .05);
    }

    #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: 11px !important;
        min-height: 58px !important;
        padding: 11px 15px !important;
        border: 1px solid rgba(151, 205, 235, .22) !important;
        border-radius: 18px !important;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .035)) !important;
        box-shadow:
            inset 0 1px rgba(255, 255, 255, .1),
            0 10px 24px rgba(0, 0, 0, .13) !important;
        color: rgba(244, 249, 255, .9) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: .01em !important;
        line-height: 1.25 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: hidden !important;
        transform: translateY(0) !important;
        transition:
            transform .18s ease,
            border-color .18s ease,
            background .18s ease,
            box-shadow .18s ease !important;
    }

    #kng-header .kng-nav > a > span:not(.kng-nav__emoji),
    #kng-header .kng-nav > .kng-nav-group > .kng-nav-group__button > span:not(.kng-nav__emoji),
    .dashboard-public-header .kng-nav > a > span:not(.kng-nav__emoji),
    .dashboard-public-header .kng-nav > .kng-nav-group > .kng-nav-group__button > span:not(.kng-nav__emoji) {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
        word-break: normal !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,
    .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 {
        border-color: rgba(var(--public-burger-accent-rgb, 95, 242, 255), .48) !important;
        background: linear-gradient(135deg, rgba(var(--public-burger-accent-rgb, 95, 242, 255), .19), rgba(112, 91, 255, .14)) !important;
        box-shadow:
            inset 0 1px rgba(255, 255, 255, .14),
            0 14px 30px rgba(0, 0, 0, .2),
            0 0 0 1px rgba(var(--public-burger-accent-rgb, 95, 242, 255), .06) !important;
        color: #fff !important;
        transform: translateY(-2px) !important;
    }

    #kng-header .kng-nav__emoji,
    .dashboard-public-header .kng-nav__emoji {
        flex: 0 0 28px !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 9px !important;
        border: 1px solid rgba(157, 212, 240, .14) !important;
        background: linear-gradient(145deg, rgba(131, 211, 239, .14), rgba(111, 91, 255, .08)) !important;
        box-shadow: inset 0 1px rgba(255, 255, 255, .09) !important;
        font-size: 13px !important;
    }

    #kng-header .kng-nav-group,
    .dashboard-public-header .kng-nav-group {
        position: relative !important;
        display: block !important;
    }

    #kng-header .kng-nav-group > .kng-nav-group__button,
    .dashboard-public-header .kng-nav-group > .kng-nav-group__button {
        width: 100% !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__menu,
    .dashboard-public-header .kng-nav-group__menu {
        position: static !important;
        inset: auto !important;
        display: none !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 8px 0 0 !important;
        padding: 8px !important;
        border: 1px solid rgba(144, 191, 223, .11) !important;
        border-radius: 15px !important;
        background: rgba(2, 10, 24, .4) !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !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:not(.is-open) > .kng-nav-group__menu,
    #kng-header .kng-nav-group:not(.is-open):hover > .kng-nav-group__menu,
    #kng-header .kng-nav-group:not(.is-open):focus-within > .kng-nav-group__menu,
    .dashboard-public-header .kng-nav-group:not(.is-open) > .kng-nav-group__menu,
    .dashboard-public-header .kng-nav-group:not(.is-open):hover > .kng-nav-group__menu,
    .dashboard-public-header .kng-nav-group:not(.is-open):focus-within > .kng-nav-group__menu {
        display: none !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: 44px !important;
        padding: 9px 11px !important;
        border-radius: 12px !important;
        white-space: normal !important;
    }

    #kng-header .kng-nav .theme-orb-toggle--nav,
    .dashboard-public-header .kng-nav .theme-orb-toggle--nav {
        justify-content: space-between !important;
    }

    body.menu-open::before {
        content: "";
        position: fixed;
        z-index: 99990;
        inset: 0;
        background: rgba(1, 5, 14, .48);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        pointer-events: none;
    }

    body.menu-open #kng-header,
    body.menu-open .dashboard-public-header {
        z-index: 99999 !important;
    }
}

@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;
    }
}

@media (max-width: 760px) {
    #kng-header,
    .dashboard-public-header {
        padding-inline: 12px !important;
    }

    #kng-header .kng-header__inner,
    #kng-header.public-header-design .kng-header__inner,
    .dashboard-public-header .kng-header__inner {
        width: calc(100vw - 24px) !important;
        min-height: 64px !important;
        height: 64px !important;
        max-height: 64px !important;
        padding-inline: 11px !important;
        border-radius: min(var(--public-header-radius, 24px), 24px) !important;
    }

    #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;
        gap: 8px !important;
        max-height: calc(100vh - 94px) !important;
        padding: 12px !important;
        border-radius: 20px !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: 54px !important;
        padding: 10px 12px !important;
        font-size: 12px !important;
    }

    #kng-header .kng-logo,
    .dashboard-public-header .kng-logo {
        max-width: calc(100vw - 106px) !important;
        font-size: 16px !important;
    }

    #kng-header .kng-logo__mark,
    .dashboard-public-header .kng-logo__mark {
        width: 36px !important;
        height: 36px !important;
    }
}

@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;
        width: 100% !important;
        max-width: none !important;
    }

    #kng-header.public-header-label--label .kng-burger__label {
        display: none !important;
    }

    #kng-header.public-header-label--label .kng-burger {
        display: inline-flex !important;
        width: 46px !important;
        min-width: 46px !important;
        padding: 0 !important;
    }
}

/* Light theme receives the same layout with a high-contrast surface. */
@media (max-width: 1800px) {
    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(22, 104, 128, .2) !important;
        background:
            radial-gradient(circle at 8% 0, rgba(34, 182, 202, .13), transparent 28rem),
            radial-gradient(circle at 94% 8%, rgba(113, 91, 255, .09), transparent 24rem),
            linear-gradient(145deg, rgba(255, 255, 255, .985), rgba(226, 241, 247, .98)) !important;
        box-shadow: inset 0 1px #fff, 0 28px 75px rgba(31, 76, 104, .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(28, 88, 116, .2) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(239, 248, 251, .68)) !important;
        box-shadow: inset 0 1px #fff, 0 10px 24px rgba(37, 80, 106, .11) !important;
        color: #17304a !important;
        -webkit-text-fill-color: #17304a !important;
        text-shadow: none !important;
    }

    html[data-public-theme="light"] #kng-header .kng-nav > a:hover,
    html[data-public-theme="light"] #kng-header .kng-nav > a:focus-visible,
    html[data-public-theme="light"] #kng-header .kng-nav > a.is-current,
    html[data-public-theme="light"] #kng-header .kng-nav > .kng-nav-group.is-open > .kng-nav-group__button,
    html[data-public-theme="light"] .dashboard-public-header .kng-nav > a:hover,
    html[data-public-theme="light"] .dashboard-public-header .kng-nav > a:focus-visible,
    html[data-public-theme="light"] .dashboard-public-header .kng-nav > a.is-current,
    html[data-public-theme="light"] .dashboard-public-header .kng-nav > .kng-nav-group.is-open > .kng-nav-group__button {
        border-color: rgba(0, 139, 165, .42) !important;
        background: linear-gradient(135deg, rgba(41, 196, 210, .22), rgba(113, 91, 255, .13)) !important;
        box-shadow: inset 0 1px #fff, 0 14px 30px rgba(37, 80, 106, .16) !important;
        color: #09283d !important;
        -webkit-text-fill-color: #09283d !important;
    }

    html[data-public-theme="light"] #kng-header .kng-nav-group__menu,
    html[data-public-theme="light"] .dashboard-public-header .kng-nav-group__menu {
        border-color: rgba(28, 88, 116, .13) !important;
        background: rgba(218, 237, 244, .76) !important;
    }

    html[data-public-theme="light"] body.menu-open::before {
        background: rgba(31, 56, 74, .2);
    }
}

@media (prefers-reduced-motion: reduce) {
    #kng-header .kng-nav,
    .dashboard-public-header .kng-nav {
        transition: none !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 {
        transition: none !important;
        transform: none !important;
    }
}