/* The menu bar of the home and solution pages. Loaded after site.css (and before the page's own CSS) by the pages that use it,
   so its rules win over the older menu styles still in site.css. */

/* a full width bar, a soft dark fade behind it so the logo always reads,
   and a blur that fades the same way, its content in the page's column: the logo on the left, then on the solution pages the solution's name and its section links; Solutions, Contact Sales and EN/ES on the right */
.nav {
    top: 0 !important;
    padding: calc(2px + env(safe-area-inset-top, 0px)) 0 2px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 19%, rgba(0, 0, 0, 0) 86%) !important;
    /* Contact Sales is plain text; set a translucent fill here, like rgba(255, 255, 255, 0.14), to make it stand out */
    --cta-bg: transparent;
}
/* the progressive blur: strong at the top, fading out toward the bottom */
.nav::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.9) 70%, transparent 100%);
}
.nav .wrap {
    display: flex !important;
    width: min(var(--col), 100% - 2 * var(--gutter)) !important;
    max-width: none !important;
    height: 56px !important;
    padding: 0 !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none;
}
/* the bar lets clicks through, except on what is in it */
.nav .logoname,
.nav .links > *,
.nav .lt,
.nav .burger {
    pointer-events: auto;
}
/* the logo: the solution's own logo on the solution pages, the plain one on the home page */
.nav .logoname {
    display: flex;
    align-items: baseline;
    gap: 0px; /* between the logo and the solution's name */
}
.nav .brand img {
    position: relative;
    top: 1px;
}
[data-world="home"] .nav .brand img {
    height: 32px;
}
@media (min-width: 861px) {
    /* one row: the logo and name, the links (section links, then Solutions and Contact Sales pushed right), and EN/ES.
       Everything sits on one text baseline, and the row is centred in the bar */
    .nav .wrap {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        align-items: baseline;
        align-content: center;
    }
    .nav .logoname {
        margin-right: 18px; /* space before the first link */
    }
    /* an image sits on the baseline by its bottom edge, which is the bottom of the "p" in the solution's name;
       moved down so "ambar" sits on the links' baseline */
    body:not([data-world="home"]) .nav .brand img {
        top: 5px;
    }
    .nav .links {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .nav .dd {
        margin-left: auto;
    }
    /* the section links, white at 60% */
    .nav .links > a:not(.btn) {
        color: rgba(255, 255, 255, 0.4);
    }
    .nav .links > a:not(.btn):hover {
        color: #fff;
    }
    /* the section links, closer together */
    .nav .links > a:not(.btn) {
        padding: 0 10px !important;
    }
    /* the Solutions dropdown: tighter corners and a quieter border */
    .nav .dd .menu {
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.14);
    }
    .nav .dd .menu a {
        border-radius: 8px !important;
    }
    /* the hover fill of the menu items: lower and less rounded, like the EN/ES switch */
    .nav .links > a:not(.btn),
    .nav .dd summary {
        height: 32px !important;
        min-height: 32px !important;
        border-radius: 8px !important;
    }
    /* Contact Sales: plain text like Solutions, and it does not lift on hover */
    .nav .links .btn.pri {
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 15px !important;
        margin: 0 !important;
        border-radius: 8px;
        background: var(--cta-bg) !important;
        box-shadow: none !important;
        font-weight: 500 !important;
    }
    .nav .links .btn.pri:hover {
        background: rgba(255, 255, 255, 0.16) !important;
        transform: none !important;
    }
}
@media (max-width: 860px) {
    .nav .wrap {
        height: 60px !important;
    }
    /* the menu panel itself takes clicks */
    .nav .links {
        pointer-events: auto;
    }
}
/* the Solutions menu opens on hover: this strip covers the gap between the label and the menu, so it stays open on the way down */
.nav .dd .menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 14px;
}
/* the EN/ES switch, quieter: lower, less rounded, see-through */
.nav .lt {
    height: 32px !important;
    padding: 2px;
    border-radius: 8px;
    background: rgba(16, 16, 26, 0.25) !important;
    box-shadow: none !important;
}
@media (min-width: 861px) {
    .nav .lt {
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
}
.nav .lt a {
    height: 28px !important;
    min-width: 32px !important;
    border-radius: 6px;
}
.nav .lt a.on {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
/* the menu button on phones, matching the EN/ES switch */
.nav .burger {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    margin-right: 0;
    background: rgba(16, 16, 26, 0.25);
}