/* FILE_VERSION = 1.0.0
 * VOGO Mobile Menu Style - meniul principal din antet (Elementor 3253, nav-menu 42bf6a3) sub 1025px, unde Elementor
 * il arata ca lista derulanta (elementor-nav-menu--dropdown-tablet). Aceleasi valori ca restul stilului VOGO:
 * albastru #0F6CBD, text #1c2b3a, contur #d5dbe3, separatori #e6eaf0, gri deschis #f4f6f9, colturi 5px.
 */

/* =========================================================================
 * SECTIUNI:
 *   1. Variabile locale
 *   2. Butonul meniului (hamburger / X)
 *   3. Lista: card pe toata latimea, sub antet
 *   4. Randurile din primul nivel, cu sageata albastra la dreapta
 *   5. Submeniurile
 * ========================================================================= */

@media (max-width: 1024px) {

    /* 1. Variabile locale, numai pe widgetul meniului */
    .elementor-element-42bf6a3 {
        --vmm-blue: #0F6CBD;
        --vmm-blue-soft: rgba(15, 108, 189, 0.14);
        --vmm-surface: #ffffff;
        --vmm-hover: #f5f9fd;
        --vmm-sub: #f4f6f9;
        --vmm-border: #d5dbe3;
        --vmm-divider: #e6eaf0;
        --vmm-text: #1c2b3a;
        --vmm-muted: #5f6b7a;
        --vmm-radius: 5px;
    }

    /* 2. Butonul: alb, cu contur subtire si iconita albastra, in loc de patratul gri cu chenar negru */
    .elementor-element-42bf6a3 .elementor-menu-toggle {
        width: 40px;
        height: 40px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--vmm-surface) !important;
        border: 1px solid var(--vmm-border) !important;
        border-radius: var(--vmm-radius) !important;
        box-shadow: none;
        transition: border-color 0.15s ease, background-color 0.15s ease;
    }

    .elementor-element-42bf6a3 .elementor-menu-toggle:hover,
    .elementor-element-42bf6a3 .elementor-menu-toggle.elementor-active {
        border-color: var(--vmm-blue) !important;
        background: var(--vmm-hover) !important;
    }

    .elementor-element-42bf6a3 .elementor-menu-toggle:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--vmm-blue-soft);
    }

    .elementor-element-42bf6a3 .elementor-menu-toggle svg {
        width: 22px;
        height: 22px;
        fill: var(--vmm-blue) !important;
    }

    /* 3. Lista: card alb cu umbra discreta, separat de antet printr-o linie */
    .elementor-element-42bf6a3 nav.elementor-nav-menu--dropdown {
        background: var(--vmm-surface) !important;
        border-top: 1px solid var(--vmm-divider);
        border-radius: 0 0 var(--vmm-radius) var(--vmm-radius);
        box-shadow: 0 14px 30px rgba(28, 43, 58, 0.14);
        overflow: hidden;
    }

    .elementor-element-42bf6a3 nav.elementor-nav-menu--dropdown > ul {
        padding: 4px 0;
    }

    /* 4. Randurile: tinte de atins de 52px, text la stanga, sageata la dreapta, separator intre ele */
    .elementor-element-42bf6a3 nav.elementor-nav-menu--dropdown > ul > li + li {
        border-top: 1px solid var(--vmm-divider);
    }

    .elementor-element-42bf6a3 nav.elementor-nav-menu--dropdown a.elementor-item {
        display: flex !important;
        align-items: center;
        justify-content: space-between !important;
        min-height: 52px;
        box-sizing: border-box;
        padding: 0 20px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: var(--vmm-text) !important;
        background: transparent !important;
        border: 0 !important;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .elementor-element-42bf6a3 nav.elementor-nav-menu--dropdown a.elementor-item:hover,
    .elementor-element-42bf6a3 nav.elementor-nav-menu--dropdown a.elementor-item.highlighted,
    .elementor-element-42bf6a3 nav.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
        background: var(--vmm-hover) !important;
        color: var(--vmm-blue) !important;
    }

    /* Sageata: albastra, intr-o zona de 32px usor de atins, se intoarce cand submeniul e deschis */
    .elementor-element-42bf6a3 nav.elementor-nav-menu--dropdown .sub-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin: 0 -8px 0 12px !important;
        padding: 0 !important;
        transition: transform 0.2s ease;
    }

    .elementor-element-42bf6a3 nav.elementor-nav-menu--dropdown .sub-arrow svg {
        width: 10px;
        height: 16px;
        fill: var(--vmm-blue) !important;
    }

    .elementor-element-42bf6a3 nav.elementor-nav-menu--dropdown a.highlighted > .sub-arrow {
        transform: rotate(180deg);
    }

    /* 5. Submeniurile: pe gri deschis, cu text mai mic si retras fata de primul nivel */
    .elementor-element-42bf6a3 nav.elementor-nav-menu--dropdown ul.sub-menu {
        background: var(--vmm-sub) !important;
        border-top: 1px solid var(--vmm-divider);
        padding: 4px 0;
    }

    .elementor-element-42bf6a3 nav.elementor-nav-menu--dropdown ul.sub-menu a {
        display: flex !important;
        align-items: center;
        justify-content: space-between !important;
        min-height: 44px;
        box-sizing: border-box;
        padding: 0 20px 0 36px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--vmm-text) !important;
        background: transparent !important;
        border: 0 !important;
    }

    .elementor-element-42bf6a3 nav.elementor-nav-menu--dropdown ul.sub-menu a:hover,
    .elementor-element-42bf6a3 nav.elementor-nav-menu--dropdown ul.sub-menu a.elementor-sub-item-active {
        background: var(--vmm-hover) !important;
        color: var(--vmm-blue) !important;
    }

    .elementor-element-42bf6a3 nav.elementor-nav-menu--dropdown ul.sub-menu ul.sub-menu a {
        padding-left: 52px !important;
    }
}