/* ==========================================================================
   HEADER MENUS (Method / Uses / Resources), 2026-10-13
   Markup: core/templates/include/i_core_navbar_menu.html. Behaviour: navbar-menu.js.
   Desktop: three drop-downs next to the logo. Up to 1000px: a menu button on the left (before the logo)
   that opens one full-width panel, the three groups as an accordion.
   ========================================================================== */

.nm-burger {
    display: none;
}

.nm-menu {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    list-style: none;
    margin: 0 1rem 0 auto;   /* the menu sits at the right end of the left block, next to the language/sign-in/get-started group */
    padding: 0;
}

.nm-item {
    position: relative;
}

.nm-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.nm-trigger:hover,
.nm-item.open > .nm-trigger {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
.nm-trigger:focus-visible,
.nm-burger:focus-visible,
.nm-link:focus-visible {
    outline: 2px solid #caffff;
    outline-offset: 2px;
}

.nm-chevron {
    width: 10px;
    height: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}
.nm-item.open > .nm-trigger .nm-chevron {
    transform: rotate(180deg);
}

/* drop-down card (desktop) */
.nm-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1002;
    min-width: 310px;
    margin-top: 8px;
    padding: 8px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(26, 60, 71, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
/* invisible bridge so the pointer can cross the gap between the button and the card */
.nm-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}
.nm-item.open > .nm-dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.nm-dropdown-rich {
    min-width: 310px;
}

.nm-link {
    display: block;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    color: #1a3c47;
    text-decoration: none;
    transition: background 0.15s ease;
}
.nm-link:hover,
.nm-link:focus-visible {
    background: #e8f3f6;
    color: #1a3c47;
}
.nm-link-title {
    display: block;
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.3;
}
.nm-link-desc {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.35;
    color: #5b7480;
}

/* ---------- narrow screens: button on the left + one panel ---------- */
@media (max-width: 1000px) {
    /* the panel is positioned against the (sticky) navbar, not against the left block */
    .navbar .nav-left.nm-host {
        position: static;
        gap: 0.5rem;
    }
    .nm-burger {
        order: -1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 38px;
        height: 35px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 10px;
        background: transparent;
        color: rgba(255, 255, 255, 0.92);
        cursor: pointer;
        transition: background 0.2s ease;
    }
    .nm-burger:hover,
    .nm-burger[aria-expanded="true"] {
        background: rgba(255, 255, 255, 0.15);
    }
    .nm-burger .nm-burger-close,
    .nm-burger[aria-expanded="true"] .nm-burger-open {
        display: none;
    }
    .nm-burger[aria-expanded="true"] .nm-burger-close {
        display: block;
    }

    .nm-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1002;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 0.4rem 1rem 1rem;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        background: #fff;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
    }
    .nm-menu.open {
        display: flex;
    }

    .nm-item {
        border-bottom: 1px solid #e3edf0;
    }
    .nm-item:last-child {
        border-bottom: 0;
    }
    .nm-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 0.85rem 0.4rem;
        border-radius: 0;
        color: #1a3c47;
        font-size: 1.02rem;
    }
    .nm-trigger:hover,
    .nm-item.open > .nm-trigger {
        background: transparent;
        color: #1a3c47;
    }
    .nm-dropdown,
    .nm-dropdown-rich {
        position: static;
        display: none;
        min-width: 0;
        margin: 0 0 0.6rem;
        padding: 0 0 0 0.4rem;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
    .nm-dropdown::before {
        display: none;
    }
    .nm-item.open > .nm-dropdown {
        display: block;
    }
}

/* ---------- language selector on the pages with the menus (its look is in lang.css, shared by every page) ---------- */
.nm-on .language-dropdown {
    right: 0;   /* next to the menus the button is not at the window edge: aligned with the button */
}
@media (max-width: 1000px) {
    .nm-on .language-button {
        padding: 0.45rem 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nm-dropdown,
    .nm-chevron,
    .nm-trigger {
        transition: none;
    }
}