/* ===========================================================================
   Site header / nav — matches the bonsai.io Webflow nav (.container-nav,
   .link-nav, .btn.nav, .nav-eyebrow). Markup: templates/partials/nav.html.
   JS hooks (keep): dropdown.js toggles `.w--open` on `.w-dropdown-list` via
   the toggle's aria-controls; mobile-nav.js moves `nav.nav-menu` into
   `#w-nav-overlay-0` and toggles `.menu-btn.w--open` + `body.mobile-nav-open`.
   Collapse to the hamburger happens at <=1279px (the header search box needs
   the room); bonsai.io's container insets are applied at 991/767/479px.
=========================================================================== */

/* --- Bar ----------------------------------------------------------------- */

/* In-page anchors land below the sticky header */
html {
    scroll-padding-top: var(--navbar-height);
}

/* Sticky bar: white with a green logo at the top of the page; sticky-nav.js
   adds `.is-scrolled` once the page scrolls, flipping to bonsai.io's
   dark-green bar with light-green logo and text. The mobile menu keeps the light bar while it is open. */
.nav-bg {
    position: sticky;
    top: 0;
    z-index: 990;
    transition: background-color .2s ease-in-out;
}

.nav-bg,
.nav-bg > center-l {
    background-color: var(--bz-white);
}

.nav-bg > center-l {
    transition: background-color .2s ease-in-out;
}

body:not(.mobile-nav-open) .nav-bg.is-scrolled,
body:not(.mobile-nav-open) .nav-bg.is-scrolled > center-l {
    background-color: var(--bz-dark-green);
}

body:not(.mobile-nav-open) .nav-bg.is-scrolled .container-nav :is(.brand, .logo-embed, .link-nav, .link-nav:hover, .link-nav.w--current, .link-nav.dd[aria-expanded="true"]) {
    color: var(--bz-light-green);
}

body:not(.mobile-nav-open) .nav-bg.is-scrolled .search-box .bonsai-searchbar {
    border-color: transparent;
}

body:not(.mobile-nav-open) .nav-bg.is-scrolled .menu-btn :is(.menu-top-line-light, .menu-mid-line-light, .menu-bot-line-light) {
    background-color: var(--bz-light-green);
}

.navbar {
    z-index: 990;
    width: 100%;
    position: relative;
}

.navbar > nav.container-nav {
    z-index: 993;
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 20px var(--site-gutter);
    font-family: var(--font-ui);
    font-weight: 500;
}

/* --- Logo ---------------------------------------------------------------- */

.navbar .brand {
    flex: none;
    display: flex;
    align-items: center;
    color: var(--bz-green);
    text-decoration: none;
    position: relative;
}

.navbar .logo-embed {
    display: flex;
    align-items: center;
    color: var(--bz-green);
    transition: color .2s ease-in-out;
}

/* Wordmark is 100px wide in the bonsai.io nav (svg carries height="21") */
.navbar .logo-embed svg {
    width: 100px;
    height: auto;
}

.navbar .descriptive-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- Desktop menu -------------------------------------------------------- */

.navbar .nav-menu {
    position: relative;
    display: flex;
    align-items: center;
}

nav.nav-menu .nav-menu-wrapper {
    display: flex;
    align-items: center;
}

.nav-link-wrap {
    position: relative;
    margin-left: 30px;
}

/* Text links: Products / Resources / Pricing / About / Log in */
nav .link-nav {
    display: block;
    color: var(--bz-dark-blue);
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    padding: 10px 0 9px;
    border-bottom: var(--bz-border-nav) solid transparent;
    transition: var(--bz-transition);
}

nav .link-nav:hover,
nav .link-nav.w--current,
nav .link-nav[aria-current="page"],
nav .link-nav.dd[aria-expanded="true"] {
    color: var(--bz-dark-blue);
    border-bottom-color: var(--bz-medium-green);
    text-decoration: none;
}

/* Dropdown toggles: label + chevron */
nav .link-nav.dd {
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
}

nav .dd-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    transition: transform .2s ease-in-out;
}

nav .link-nav.dd[aria-expanded="true"] .dd-icon {
    transform: rotate(180deg);
}

/* --- Dropdown panels ----------------------------------------------------- */

nav .w-dropdown {
    position: relative;
    display: block;
    text-align: left;
    z-index: 900;
}

nav .w-dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
}

nav .w-dropdown-list.w--open {
    display: block;
}

nav .nav-dropdown {
    min-width: 240px;
    margin-top: 12px;
    padding: 12px;
    background-color: var(--bz-white);
    border: var(--bz-border-hairline) solid var(--bz-gray-light);
    border-radius: var(--bz-radius-xl);
    box-shadow: var(--bz-shadow-raised);
}

/* Two-column mega panels (Products, Resources).
   NOTE: display must stay tied to .w--open, else this rule's specificity
   overrides `.w-dropdown-list { display:none }` and the panel shows on load. */
nav .nav-dropdown.mega {
    padding: 24px;
    gap: 40px;
}

nav .nav-dropdown.mega.w--open {
    display: flex;
}

nav .nav-dd-col {
    display: flex;
    flex-direction: column;
    min-width: 240px;
}

nav .nav-dd-col + .nav-dd-col {
    border-left: var(--bz-border-hairline) solid var(--bz-gray-light);
    padding-left: 40px;
}

/* Column headers (Solutions / Hosting Options / ...) — bonsai.io .nav-eyebrow */
nav .nav-eyebrow {
    color: var(--bz-dark-blue);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: .2px;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0 0 8px;
    margin: 0 0 12px;
    border-bottom: var(--bz-border-nav) solid var(--bz-dark-blue);
}

nav .dd-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0;
    padding: 10px 12px;
    color: var(--bz-dark-blue);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    text-decoration: none;
    border-radius: var(--bz-radius-md);
    cursor: pointer;
    transition: var(--bz-transition);
}

nav .dd-link:hover,
nav .dd-link.w--current {
    background-color: var(--bz-light-green);
    color: var(--bz-dark-green);
    text-decoration: none;
}

/* Leading item icon (Vector Search, Managed Search, ...) */
nav .dd-link .dd-ico {
    flex: none;
    width: 24px;
    height: 24px;
}

/* Right-aligned brand logo (GCP / AWS) */
nav .dd-link .dd-logo {
    flex: none;
    width: auto;
    height: 18px;
    margin-left: auto;
    padding-left: 10px;
}

/* Indented BYOC sub-items with a leading arrow */
nav .dd-link.dd-sub {
    margin-left: 20px;
}

nav .dd-link.dd-sub::before {
    content: "\2192";
    color: var(--bz-green);
    font-weight: 600;
}

/* --- Header search (Bloom searchbar, injected at runtime) --------------- */

.search-box {
    margin-left: 40px;
}

.search-box .bonsai-searchform #bonsai_q,
.search-box .bonsai-searchbar {
    box-sizing: border-box;
    width: 190px;
    height: 40px;
    margin: 0;
    padding: 8px 36px 8px 12px;
    color: var(--bz-dark-blue);
    background-color: var(--bz-white);
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 400;
    border: var(--bz-border-hairline) solid var(--bz-gray-light);
    border-radius: var(--bz-radius-md);
    transition: var(--bz-transition);
}

.search-box .bonsai-searchbar::placeholder {
    color: var(--bz-muted-ink);
}

.search-box .bonsai-searchbar:focus {
    outline: none;
    border-color: var(--bz-green);
}

.search-box .bonsai-searchbutton {
    right: 0.5rem;
}

/* --- Sign up (primary button) ------------------------------------------- */

.navbar .btn.nav {
    display: inline-block;
    margin-left: -14px; /* 30px wrap margin -> 16px, as on bonsai.io */
    padding: 11px 18px 12px;
    color: var(--bz-dark-green);
    background-color: var(--bz-medium-green);
    border: var(--bz-border-control) solid var(--bz-medium-green);
    border-radius: var(--bz-radius-md);
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: var(--bz-transition);
}

.navbar .btn.nav:hover {
    color: var(--bz-dark-green);
    background-color: var(--bz-dark-med-green);
    border-color: var(--bz-dark-med-green);
    text-decoration: none;
}

/* --- Hamburger ----------------------------------------------------------- */

.navbar .menu-btn {
    display: none;
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.navbar .menu-lines {
    position: relative;
    width: 40px;
    height: 40px;
}

.navbar .menu-top-line-light,
.navbar .menu-mid-line-light,
.navbar .menu-bot-line-light {
    position: absolute;
    left: 6px;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--bz-dark-blue);
    transition: transform .3s ease-in-out, opacity .2s ease-in-out;
}

.navbar .menu-top-line-light { top: 12px; }
.navbar .menu-mid-line-light { top: 19px; }
.navbar .menu-bot-line-light { top: 26px; }

.navbar .menu-btn.w--open .menu-top-line-light {
    transform: translateY(7px) rotate(45deg);
}

.navbar .menu-btn.w--open .menu-mid-line-light {
    opacity: 0;
}

.navbar .menu-btn.w--open .menu-bot-line-light {
    transform: translateY(-7px) rotate(-45deg);
}

/* Overlay container mobile-nav.js animates (display/height set inline) */
.navbar .w-nav-overlay {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    display: none;
    overflow: hidden;
}

/* --- Collapsed (hamburger) layout --------------------------------------- */

@media screen and (max-width: 1279px) {
    .navbar.w-nav[data-collapse="medium"] .w-nav-menu {
        display: none;
    }

    .navbar.w-nav[data-collapse="medium"] .w-nav-button {
        display: block;
    }

    /* Mobile menu: light full-height panel, as on bonsai.io.
       Overlay-scoped because mobile-nav.js relocates nav.nav-menu there. */
    .navbar .w-nav-overlay > nav.nav-menu {
        box-sizing: border-box;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        width: 100%;
        min-height: 100%;
        padding: 12px var(--site-gutter) 64px;
        background-color: var(--bz-light-grey);
        border-top: var(--bz-border-hairline) solid var(--bz-gray-light);
    }

    .navbar .w-nav-overlay .nav-menu-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar .w-nav-overlay .nav-link-wrap {
        margin: 0;
        width: 100%;
    }

    .navbar .w-nav-overlay .link-nav {
        margin-top: 10px;
    }

    .navbar .w-nav-overlay .link-nav.dd {
        display: inline-flex;
    }

    /* No underline in the stacked menu; state is shown with green text */
    .navbar .w-nav-overlay .link-nav,
    .navbar .w-nav-overlay .link-nav:hover,
    .navbar .w-nav-overlay .link-nav.w--current,
    .navbar .w-nav-overlay .link-nav.dd[aria-expanded="true"] {
        border-bottom-color: transparent;
    }

    .navbar .w-nav-overlay .link-nav:hover,
    .navbar .w-nav-overlay .link-nav.w--current,
    .navbar .w-nav-overlay .link-nav.dd[aria-expanded="true"] {
        color: var(--bz-green);
    }

    /* Submenus expand inline (accordion), not as floating panels */
    .navbar .w-nav-overlay .nav-dropdown,
    .navbar .w-nav-overlay .nav-dropdown.mega {
        position: static;
        display: none;
        min-width: 0;
        margin: 4px 0 8px;
        padding: 0 0 0 16px;
        background-color: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        gap: 0;
    }

    .navbar .w-nav-overlay .nav-dropdown.w--open,
    .navbar .w-nav-overlay .nav-dropdown.mega.w--open {
        display: block;
    }

    .navbar .w-nav-overlay .nav-dd-col {
        min-width: 0;
    }

    .navbar .w-nav-overlay .nav-dd-col + .nav-dd-col {
        border-left: none;
        padding-left: 0;
    }

    .navbar .w-nav-overlay .nav-eyebrow {
        margin: 16px 0 4px;
    }

    .navbar .w-nav-overlay .dd-link {
        padding: 10px 12px 10px 0;
        white-space: normal;
    }

    .navbar .w-nav-overlay .dd-link:hover,
    .navbar .w-nav-overlay .dd-link.w--current {
        background-color: transparent;
        color: var(--bz-green);
    }

    .navbar .w-nav-overlay .search-box {
        margin: 16px 0 6px;
    }

    .navbar .w-nav-overlay .search-box .bonsai-searchbar {
        width: 100%;
        max-width: 360px;
    }

    .navbar .w-nav-overlay .search-box .flex,
    .navbar .w-nav-overlay .search-box .bonsai-searchform,
    .navbar .w-nav-overlay .search-box .bonsai-searchbar-wrapper {
        width: 100%;
    }

    .navbar .w-nav-overlay .btn.nav {
        margin: 16px 0 0;
    }
}

/* --- bonsai.io container insets -----------------------------------------
   Side padding comes from --site-gutter (80/64/40/24px at 991/767/479px),
   defined in settings.css and shared with .site-container. */