/* WM Nav Menu Widget */

.wm-nav-menu {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.wm-nav-menu__main {
    width: 100%;
}

/* ── Desktop list ─────────────────────────────────────────────────────────── */
.wm-nav-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

.wm-nav-layout-vertical .wm-nav-menu__list {
    flex-direction: column;
    width: 100%;
}

.wm-nav-menu__list li {
    position: relative;
}

.wm-nav-menu__list > li > a {
    display: block;
    text-decoration: none;
    white-space: nowrap;
    padding: 10px 15px;
    transition: color .2s ease, background-color .2s ease;
}

/* ── Dropdown ─────────────────────────────────────────────────────────────── */
.wm-nav-menu__list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 9999;
}

.wm-nav-menu__list li:hover > .sub-menu,
.wm-nav-menu__list li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.wm-nav-menu__list .sub-menu a {
    display: block;
    padding: 8px 18px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.wm-nav-menu__list .sub-menu a:hover {
    background: rgba(0,0,0,.05);
}

/* nested sub-menus open to the right */
.wm-nav-menu__list .sub-menu .sub-menu {
    top: -8px;
    left: 100%;
}

/* ── Toggle button ────────────────────────────────────────────────────────── */
.wm-nav-menu__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    transition: color .2s ease, background-color .2s ease;
}

.wm-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/*
 * Icon visibility fix — Elementor's Icons_Manager may render as an inline SVG
 * that has no intrinsic width/height attributes.  Without these rules it renders
 * at 0×0 and is invisible even though the button element is fully clickable.
 * font-size on the parent button → 1em here sizes the icon correctly.
 * fill:currentColor ensures SVG icons respect the colour set via Elementor controls.
 */
.wm-toggle-icon i,
.wm-toggle-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* ── Mobile panel (shared base) ───────────────────────────────────────────── */
.wm-nav-menu__mobile-panel {
    background: #fff;
    z-index: 9999;
}

/* ── Dropdown mode (default) ─────────────────────────────────────────────── */
.wm-nav-menu__mobile-panel:not(.wm-nav-menu__mobile-panel--fullscreen) {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.wm-nav-menu__mobile-panel:not(.wm-nav-menu__mobile-panel--fullscreen).is-open {
    max-height: 100vh;
    overflow-y: auto;
}

/* ── Full-screen overlay mode ────────────────────────────────────────────── */
.wm-nav-menu__mobile-panel--fullscreen {
    position: fixed;
    inset: 0;               /* top/right/bottom/left: 0 */
    width: 100%;
    height: 100%;
    z-index: 99999;
    overflow-y: auto;
    /* open/close via opacity + visibility instead of max-height */
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    /* flex column so justify-content controls vertical alignment of the list */
    display: flex;
    flex-direction: column;
    justify-content: center;   /* overridden by Elementor Vertical Alignment control */
    align-items: stretch;
}

.wm-nav-menu__mobile-panel--fullscreen.is-open {
    opacity: 1;
    visibility: visible;
}

/* Prevent body scroll while fullscreen menu is open */
body.wm-mobile-menu-open {
    overflow: hidden;
}

/* ── Close button (shown only in fullscreen mode) ─────────────────────────── */
.wm-nav-menu__mobile-close {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 24px;
    line-height: 1;
    padding: 8px;
    transition: opacity .2s ease;
    z-index: 1;
}

.wm-nav-menu__mobile-panel--fullscreen .wm-nav-menu__mobile-close {
    display: flex;
}

.wm-nav-menu__mobile-close i,
.wm-nav-menu__mobile-close svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.wm-nav-menu__mobile-close:hover {
    opacity: .7;
}

.wm-nav-menu__mobile-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── Mobile list ─────────────────────────────────────────────────────────── */
.wm-nav-menu__mobile-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wm-nav-menu__mobile-list a {
    display: block;
    padding: 12px 18px;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,.06);
    transition: background-color .15s ease;
}

.wm-nav-menu__mobile-list a:hover {
    background: rgba(0,0,0,.04);
}

.wm-nav-menu__mobile-list .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: rgba(0,0,0,.02);
}

.wm-nav-menu__mobile-list .sub-menu a           { padding-left: 34px; }
.wm-nav-menu__mobile-list .sub-menu .sub-menu a { padding-left: 52px; }