/*
 * Shared dropdown rhythm for the KivTools shell.
 *
 * The legacy navigation accumulated several unrelated row sizes: 28px in
 * single-column menus, 36px in tool grids, and taller wrapped rows in the
 * Web Ops panel.  Keep the information architecture, but give every desktop
 * shell menu the same compact 32px reading rhythm. Utility popovers use the
 * related 30px token; collapsed navigation keeps a 40px touch target.
 */

:root {
    --kiv-menu-row: 32px;
    --kiv-menu-popover-row: 30px;
    --kiv-menu-touch-row: 40px;
    --kiv-menu-pad-x: 12px;
    --kiv-menu-panel-pad: 4px;
}

/* Responsive type scale for the primary developer-workflow navigation.
 * Category glyphs act as fast visual anchors; labels remain the source of
 * meaning and never disappear on mobile. */
.navbar #top_menu > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 540;
    white-space: nowrap;
}

.navbar #top_menu > li > a .kiv-nav-primary-icon {
    position: static;
    flex: 0 0 auto;
    width: 14px;
    color: #82a99a;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    transition: color .16s ease;
}

.navbar #top_menu > li > a:hover .kiv-nav-primary-icon,
.navbar #top_menu > li > a:focus .kiv-nav-primary-icon,
.navbar #top_menu > li.open > a .kiv-nav-primary-icon {
    color: #fff;
}

.navbar #top_menu > li > a .caret {
    margin-left: 0;
}

@media (min-width: 1440px) {
    .navbar #top_menu > li > a {
        padding-right: 11px;
        padding-left: 11px;
        font-size: 13.5px;
    }

    .navbar #top_menu > li > a .kiv-nav-primary-icon {
        font-size: 13px;
    }

    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li > a {
        padding-right: 8px;
        padding-left: 8px;
        font-size: 13px;
    }
}

@media (min-width: 1320px) and (max-width: 1439px) {
    .navbar #top_menu > li > a {
        padding-right: 8px;
        padding-left: 8px;
        font-size: 13px;
    }

    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li > a {
        padding-right: 6px;
        padding-left: 6px;
        font-size: 12.5px;
    }
}

@media (min-width: 1200px) and (max-width: 1319px) {
    .navbar #top_menu > li > a {
        gap: 4px;
        padding-right: 5px;
        padding-left: 5px;
        font-size: 12.25px;
    }

    .navbar #top_menu > li > a .kiv-nav-primary-icon {
        width: 12px;
        font-size: 11px;
    }

    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li > a {
        padding-right: 3px;
        padding-left: 3px;
        font-size: 11.75px;
    }
}

/* The navigation collapses at 1199px, while the locale/account/theme
 * controls historically moved aside only below 768px.  On tablets that put
 * the account button directly over the hamburger, making the menu appear
 * broken.  Keep the same right-side utility order across the whole collapsed
 * range: hamburger, locale, account, theme. */
@media (min-width: 768px) and (max-width: 1199px) {
    .kiv-locale-launch,
    .kiv-locale-menu,
    .kiv-account-menu {
        right: 79px;
    }

    .kiv-account-launch {
        right: 118px;
    }

    .kiv-theme-launch {
        right: 157px;
    }
}

.navbar #top_menu > li.kiv-nav-desktop > a {
    display: flex;
    align-items: center;
    gap: 6px;
}

.navbar #top_menu > li.kiv-nav-desktop > a .glyphicon {
    top: 0;
    font-size: 12px;
}

.navbar #top_menu > li.kiv-nav-desktop > a .kiv-nav-desktop-compact {
    display: none;
}

body.kiv-downloads-page .navbar #top_menu > li.kiv-nav-desktop > a {
    background: rgba(76, 202, 109, .11);
    box-shadow: inset 0 -2px 0 #4aca6d;
    color: #e7f6eb;
}

@media (min-width: 1200px) and (max-width: 1319px) {
    .navbar #top_menu > li.kiv-nav-desktop > a .kiv-nav-desktop-label {
        display: none;
    }

    .navbar #top_menu > li.kiv-nav-desktop > a .kiv-nav-desktop-compact {
        display: inline;
    }
}

@media (min-width: 1200px) {
    /* All first-level category panels share one outer inset. */
    .navbar #top_menu > li > .dropdown-menu:not(.kiv-webops-menu) {
        padding: var(--kiv-menu-panel-pad);
    }

    .navbar #top_menu > li > .dropdown-menu:not(.kiv-webops-menu) > li {
        height: auto;
        min-height: 0;
        margin: 0;
    }

    .navbar #top_menu > li > .dropdown-menu:not(.kiv-webops-menu) > li:not(.divider):not(.kiv-menu-heading) > a {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        min-height: var(--kiv-menu-row);
        height: auto;
        padding: 5px var(--kiv-menu-pad-x);
        font-size: 13px;
        line-height: 18px;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
    }

    .navbar #top_menu > li > .dropdown-menu > li.divider {
        height: 1px;
        min-height: 0;
        margin: 4px;
    }

    /* Two-column catalogues need enough measure for technical names to stay
     * on one line in normal desktop widths. */
    .navbar #top_menu > li:not(.kiv-nav-webops):not(.kiv-nav-more) > .dropdown-menu.ul-list,
    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li:not(.kiv-nav-webops):not(.kiv-nav-more) > .dropdown-menu.ul-list {
        width: min(760px, calc(100vw - 30px));
        gap: 0;
    }

    .navbar #top_menu > li > .dropdown-menu.kiv-network-menu,
    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li > .dropdown-menu.kiv-network-menu {
        width: min(720px, calc(100vw - 30px));
    }

    .navbar #top_menu > li.kiv-nav-more > .dropdown-menu.ul-list {
        width: min(680px, calc(100vw - 30px));
    }

    /* Network is the only remaining first-level single-column catalogue.
     * Give it a real reading measure; allowing Bootstrap's 160px minimum to
     * decide the width turns nearly every label into a multi-line row. */
    .navbar #top_menu > li > .dropdown-menu:not(.ul-list):not(.kiv-webops-menu) {
        width: min(360px, calc(100vw - 30px));
    }

    .navbar #top_menu > li.kiv-nav-more > .dropdown-menu.ul-list > li.kiv-menu-heading {
        min-height: 0;
        padding: 8px 14px 4px;
        line-height: 16px;
    }

    .navbar #top_menu > li.kiv-nav-more > .dropdown-menu.ul-list > li.kiv-menu-heading:first-child {
        padding-top: 6px;
    }

    /* Web Ops is a semantic mega menu. The automation column gets slightly
     * more measure because its real tool names are longer, keeping row height
     * stable without truncating labels. */
    .navbar #top_menu > li.kiv-nav-webops > .dropdown-menu.kiv-webops-menu,
    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li.kiv-nav-webops > .dropdown-menu.kiv-webops-menu {
        width: min(1240px, calc(100vw - 30px));
        padding: var(--kiv-menu-panel-pad);
    }

    .navbar #top_menu > li.kiv-nav-webops > .dropdown-menu.kiv-webops-menu > li.kiv-webops-column {
        padding: 7px 0 9px;
    }

    .navbar #top_menu > li.kiv-nav-webops > .dropdown-menu.kiv-webops-menu > li.kiv-webops-column:nth-child(1) {
        flex-grow: 1.02;
    }

    .navbar #top_menu > li.kiv-nav-webops > .dropdown-menu.kiv-webops-menu > li.kiv-webops-column:nth-child(2) {
        flex-grow: 1.2;
    }

    .navbar #top_menu > li.kiv-nav-webops > .dropdown-menu.kiv-webops-menu > li.kiv-webops-column:nth-child(3) {
        flex-grow: 1;
    }

    .navbar #top_menu > li.kiv-nav-webops > .dropdown-menu.kiv-webops-menu > li.kiv-webops-column:nth-child(4) {
        flex-grow: 1.08;
    }

    .navbar #top_menu > li.kiv-nav-webops .kiv-webops-heading {
        margin: 0 12px 5px;
        padding: 4px 2px 7px;
        line-height: 12px;
    }

    .navbar #top_menu > li.kiv-nav-webops .kiv-webops-column > ul > li > a {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        min-height: var(--kiv-menu-row);
        height: auto;
        padding: 5px 12px;
        font-size: 13px;
        line-height: 18px;
        overflow-wrap: normal;
        word-break: normal;
    }
}

/* The language chooser and tool-level More tools panel are smaller utility
 * popovers. They use the same internal alignment at a compact 32px row. */
.kiv-locale-menu {
    padding: var(--kiv-menu-panel-pad) 0;
}

.kiv-locale-menu > li > a {
    box-sizing: border-box;
    min-height: var(--kiv-menu-popover-row);
    padding: 6px 10px;
    line-height: 18px;
}

body.kiv-detail-page .kiv-detail-nav .dropdown-menu > li > a,
body.kiv-contextual-nav-page .kiv-contextual-nav-root .nav.nav-tabs.hbflag .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--kiv-menu-popover-row);
    padding: 6px 10px;
    line-height: 18px;
}

@media (max-width: 1199px) {
    /* First-open stability: these visual rules are present before Bootstrap
     * adds `.open`. The closed menu still uses Bootstrap's display:none; only
     * its geometry and skin are precomputed, preventing a legacy-style frame
     * on the first tap after a cold load or service-worker update. */
    html.kiv-mobile-nav-ready .navbar #top_menu > li > .dropdown-menu,
    html.kiv-mobile-nav-ready .navbar #top_menu > li > .dropdown-menu.ul-list,
    html.kiv-mobile-nav-ready[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li > .dropdown-menu.ul-list {
        position: static;
        float: none;
        box-sizing: border-box;
        width: calc(100% - 12px);
        min-width: 0;
        max-width: none;
        max-height: none;
        margin: 2px 6px 7px;
        padding: 4px;
        overflow: visible;
        border: 0;
        border-radius: 5px;
        background: #24333e;
        box-shadow: none;
    }

    html.kiv-mobile-nav-ready .navbar #top_menu > li > .dropdown-menu > li {
        float: none;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
    }

    html.kiv-mobile-nav-ready .navbar #top_menu > li > .dropdown-menu > li > a,
    html.kiv-mobile-nav-ready .navbar #top_menu > li.kiv-nav-webops .kiv-webops-column > ul > li > a {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        min-height: var(--kiv-menu-touch-row);
        height: auto;
        padding: 7px 10px;
        border-radius: 4px;
        background: transparent;
        color: #dbe5eb;
        font-size: 13px;
        line-height: 18px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    html.kiv-mobile-nav-ready .navbar #top_menu > li > a {
        min-height: 44px;
        padding: 11px 15px;
        font-size: 14.5px;
        line-height: 22px;
    }

    html.kiv-mobile-nav-ready .navbar #top_menu > li > a .kiv-nav-primary-icon {
        width: 17px;
        color: #79b99f;
        font-size: 14px;
    }

    html.kiv-mobile-nav-ready .navbar #top_menu > li.kiv-nav-more > .dropdown-menu > li.kiv-menu-heading,
    html.kiv-mobile-nav-ready .navbar #top_menu > li.kiv-nav-webops .kiv-webops-heading {
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 9px 10px 4px;
        border: 0;
        color: #89a79a;
        font-size: 10px;
        font-weight: 750;
        letter-spacing: .075em;
        line-height: 14px;
        text-transform: uppercase;
    }

    html.kiv-mobile-nav-ready .navbar #top_menu > li.kiv-nav-webops > .kiv-webops-menu > li.kiv-webops-column {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 0 0 4px;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    html.kiv-mobile-nav-ready .navbar #top_menu > li.kiv-nav-webops .kiv-webops-column > ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    html.kiv-mobile-nav-ready .navbar #top_menu > li:not(.open):not(.kiv-mobile-opening) > .dropdown-menu {
        display: none !important;
    }

    html.kiv-mobile-nav-ready .navbar #top_menu > li.open > .dropdown-menu,
    html.kiv-mobile-nav-ready .navbar #top_menu > li.kiv-mobile-opening > .dropdown-menu {
        display: block !important;
    }

    /* Collapsed navigation is touch-first. Uniformity here means one safe
     * target size, not squeezing desktop density onto a phone. */
    .navbar #top_menu > li.open > .dropdown-menu.ul-list {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .navbar #top_menu > li .dropdown-menu > li > a,
    .navbar #top_menu > li.kiv-nav-webops .kiv-webops-column > ul > li > a {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        min-height: var(--kiv-menu-touch-row);
        height: auto;
        padding-top: 8px;
        padding-bottom: 8px;
        line-height: 20px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .kiv-locale-menu > li > a,
    body.kiv-detail-page .kiv-detail-nav .dropdown-menu > li > a,
    body.kiv-contextual-nav-page .kiv-contextual-nav-root .nav.nav-tabs.hbflag .dropdown-menu > li > a {
        min-height: var(--kiv-menu-touch-row);
        padding-top: 8px;
        padding-bottom: 8px;
        line-height: 20px;
    }
}

@media (max-width: 599px) {
    html.kiv-mobile-nav-ready .navbar #top_menu > li > a {
        min-height: 46px;
        padding: 12px 14px;
        font-size: 15px;
    }

    html.kiv-mobile-nav-ready .navbar #top_menu > li > .dropdown-menu > li > a,
    html.kiv-mobile-nav-ready .navbar #top_menu > li.kiv-nav-webops .kiv-webops-column > ul > li > a {
        min-height: 39px;
        font-size: 13.5px;
    }
}

@media (max-width: 599px) {
    /* A two-column phone menu leaves too little measure for networking terms
     * such as certificate and trace-context tools. Use one clean list. */
    .navbar #top_menu > li.open > .dropdown-menu.kiv-network-menu > li {
        float: none;
        width: 100%;
    }
}

/* Collapsed shell navigation is a real tool drawer, not a 340px Bootstrap
 * scroller.  It overlays the page below the fixed header, keeps one scroll
 * container, and uses the open category as the only strong visual state. */
@media (max-width: 1199px) {
    .navbar.navbar-fixed-top .navbar-collapse,
    .navbar.navbar-static-top .navbar-collapse {
        position: fixed;
        top: 50px;
        right: 0;
        left: auto;
        z-index: 1040;
        width: min(440px, 100vw);
        max-height: calc(100vh - 50px);
        max-height: calc(100dvh - 50px);
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, .08);
        background: #1c2832;
        box-shadow: -16px 22px 38px rgba(7, 15, 20, .28);
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #557363 transparent;
    }

    .navbar.navbar-fixed-top .navbar-collapse.collapsing,
    .navbar.navbar-static-top .navbar-collapse.collapsing {
        overflow-y: hidden;
    }

    .navbar #top_menu {
        float: none;
        width: 100%;
        margin: 0;
        padding: 6px 8px 14px;
    }

    .navbar #top_menu > li {
        float: none;
        width: 100%;
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .055);
    }

    .navbar #top_menu > li > a {
        position: relative;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        min-height: 42px;
        padding: 9px 12px;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: #c8d3d9;
        font-size: 14px;
        font-weight: 620;
        line-height: 20px;
    }

    body.kiv-downloads-page .navbar #top_menu > li.kiv-nav-desktop > a {
        box-shadow: inset 3px 0 0 #4aca6d;
    }

    .navbar #top_menu > li > a:hover,
    .navbar #top_menu > li > a:focus {
        background: rgba(255, 255, 255, .045);
        color: #f4f8f6;
        outline: 0;
    }

    .navbar #top_menu > li.open > a,
    .navbar #top_menu > li.open > a:hover,
    .navbar #top_menu > li.open > a:focus {
        background: rgba(76, 202, 109, .13);
        box-shadow: inset 3px 0 0 #4aca6d;
        color: #e7f6eb;
    }

    .navbar #top_menu > li > a .caret {
        margin-left: 6px;
        transition: transform .16s ease;
        transform-origin: 50% 42%;
    }

    .navbar #top_menu > li.open > a .caret {
        transform: rotate(180deg);
    }

    .navbar #top_menu > li.open > .dropdown-menu,
    .navbar #top_menu > li.open > .dropdown-menu.ul-list,
    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li.open > .dropdown-menu.ul-list {
        position: static;
        display: block;
        float: none;
        box-sizing: border-box;
        width: calc(100% - 12px);
        min-width: 0;
        max-width: none;
        max-height: none;
        margin: 2px 6px 7px;
        padding: 4px;
        overflow: visible;
        border: 0;
        border-radius: 5px;
        background: #24333e;
        box-shadow: none;
    }

    .navbar #top_menu > li.open > .dropdown-menu > li {
        float: none;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
    }

    .navbar #top_menu > li.open > .dropdown-menu > li > a,
    .navbar #top_menu > li.kiv-nav-webops.open .kiv-webops-column > ul > li > a {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        min-height: 40px;
        height: auto;
        padding: 7px 10px;
        border-radius: 4px;
        background: transparent;
        color: #dbe5eb;
        font-size: 13px;
        line-height: 18px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .navbar #top_menu > li.open > .dropdown-menu > li > a:hover,
    .navbar #top_menu > li.open > .dropdown-menu > li > a:focus,
    .navbar #top_menu > li.kiv-nav-webops.open .kiv-webops-column > ul > li > a:hover,
    .navbar #top_menu > li.kiv-nav-webops.open .kiv-webops-column > ul > li > a:focus {
        background: #294337;
        color: #c8efd1;
        outline: 0;
    }

    .navbar #top_menu > li.open > .dropdown-menu > li.divider {
        height: 1px;
        min-height: 0;
        margin: 4px 8px;
        background: rgba(255, 255, 255, .08);
    }

    .navbar #top_menu > li.kiv-nav-more.open > .dropdown-menu > li.kiv-menu-heading,
    .navbar #top_menu > li.kiv-nav-webops.open .kiv-webops-heading {
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 9px 10px 4px;
        border: 0;
        color: #89a79a;
        font-size: 10px;
        font-weight: 750;
        letter-spacing: .075em;
        line-height: 14px;
        text-transform: uppercase;
    }

    .navbar #top_menu > li.kiv-nav-webops.open > .kiv-webops-menu > li.kiv-webops-column {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 0 0 4px;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .navbar #top_menu > li.kiv-nav-webops.open > .kiv-webops-menu > li.kiv-webops-column:last-child {
        border-bottom: 0;
    }

    .navbar #top_menu > li.kiv-nav-webops.open .kiv-webops-column > ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
}

@media (max-width: 599px) {
    .navbar.navbar-fixed-top .navbar-collapse,
    .navbar.navbar-static-top .navbar-collapse {
        right: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 18px 34px rgba(7, 15, 20, .26);
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar #top_menu > li > a .caret {
        transition: none;
    }
}