/* ============================================================
   Mobile Menu – Workmedia Blocos  |  v1.2.0
   ============================================================ */

/* ── Trigger wrap ─────────────────────────────────────────── */
.wmm-wrap {
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* ── Trigger button ───────────────────────────────────────── */
.wmm-trigger {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           44px;
    height:          44px;
    padding:         0;
    margin:          0;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    border-radius:   0;
    flex-shrink:     0;
    position:        relative;
    z-index:         1;
}
.wmm-trigger:focus-visible {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
}

/* ── Hambúrguer (3 linhas animadas) ───────────────────────── */
.wmm-bars {
    display:        flex;
    flex-direction: column;
    gap:            5px;
    width:          22px;
    flex-shrink:    0;
}
.wmm-bars span {
    display:          block;
    width:            22px;
    height:           2px;
    background:       #111827;
    border-radius:    2px;
    transform-origin: center;
    transition:       transform .28s ease, opacity .2s ease, width .28s ease;
}
.wmm-trigger[aria-expanded="true"] .wmm-bars span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.wmm-trigger[aria-expanded="true"] .wmm-bars span:nth-child(2) {
    opacity: 0; width: 0;
}
.wmm-trigger[aria-expanded="true"] .wmm-bars span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Ícone personalizado ──────────────────────────────────── */
.wmm-icon-open i, .wmm-icon-close i { font-size: inherit; color: inherit; }

/* ── Rótulo ───────────────────────────────────────────────── */
.wmm-label { font-size: 13px; font-weight: 600; white-space: nowrap; color: inherit; }

/* ══════════════════════════════════════════════════════════
   OVERLAY — position:fixed no body
   ══════════════════════════════════════════════════════════ */
.wmm-overlay {
    position:       fixed !important;
    inset:          0 !important;
    z-index:        99997 !important;
    background:     rgba(0,0,0,.55);
    opacity:        0;
    pointer-events: none;
    transition:     opacity .3s ease;
}
.wmm-overlay.wmm-overlay-active {
    opacity:        1;
    pointer-events: all;
}

/* ══════════════════════════════════════════════════════════
   PAINEL — position:fixed no body
   ══════════════════════════════════════════════════════════ */
.wmm-panel {
    position:       fixed !important;
    top:            0 !important;
    bottom:         0 !important;
    z-index:        99998 !important;
    width:          300px;
    max-width:      100vw;
    background:     #111827;
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    box-shadow:     4px 0 32px rgba(0,0,0,.5);
    transition:     transform .32s cubic-bezier(.4,0,.2,1);
    will-change:    transform;
}

.wmm-panel.wmm-pos-left  { left: 0 !important; right: auto !important; transform: translateX(-110%); }
.wmm-panel.wmm-pos-right { right: 0 !important; left: auto !important; transform: translateX(110%); }

.wmm-panel.wmm-open { transform: translateX(0) !important; }

/* ── Área de scroll ───────────────────────────────────────── */
.wmm-panel-inner {
    flex:       1;
    overflow-y: auto;
    overflow-x: hidden;
    padding:    24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) transparent;
}
.wmm-panel-inner::-webkit-scrollbar       { width: 4px; }
.wmm-panel-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

/* ── Header (botão ×) ─────────────────────────────────────── */
.wmm-panel-header {
    display:         flex;
    justify-content: flex-end;
    margin-bottom:   16px;
}
.wmm-close {
    background:  transparent;
    border:      none;
    cursor:      pointer;
    color:       #ffffff;
    font-size:   28px;
    line-height: 1;
    padding:     4px;
    display:     inline-flex;
    transition:  color .2s ease, transform .2s ease;
}
.wmm-close:hover { color: #0066ff; transform: rotate(90deg); }

/* ══════════════════════════════════════════════════════════
   MENU ITEMS
   ══════════════════════════════════════════════════════════ */
.wmm-nav-list,
.wmm-submenu {
    list-style: none;
    margin:     0;
    padding:    0;
}

.wmm-item {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
}

/* Link */
.wmm-link {
    flex:            1;
    display:         block;
    color:           #ffffff;
    text-decoration: none !important;
    font-size:       17px;
    font-weight:     500;
    line-height:     1.3;
    padding:         14px 0;
    transition:      color .2s ease;
}
.wmm-link:hover   { color: #0066ff; }

/* Seta de submenu */
.wmm-arrow {
    flex-shrink:     0;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    padding:         8px;
    color:           rgba(255,255,255,.4);
    font-size:       13px;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    transition:      transform .25s ease, color .2s ease;
    border-radius:   4px;
}
.wmm-arrow:hover                   { color: #fff; }
.wmm-arrow[aria-expanded="true"]   { transform: rotate(90deg); color: #fff; }

/* Submenu */
.wmm-submenu {
    width:      100%;
    flex-basis: 100%;
    overflow:   hidden;
    max-height: 0;
    transition: max-height .3s ease;
    background: rgba(0,0,0,.25);
    border-radius: 4px;
    margin-bottom: 2px;
}
.wmm-submenu.wmm-sub-open { max-height: 800px; }
.wmm-submenu .wmm-link    { font-size: 15px; padding-left: 16px; }

/* Separador */
.wmm-item.wmm-divider + .wmm-item.wmm-divider {
    border-top: 1px solid rgba(255,255,255,.12);
}

/* ── Blocos do plugin dentro do painel ────────────────────── */
.wmm-panel-inner .wbs-wrap,
.wmm-panel-inner .wdf-box,
.wmm-panel-inner .wm-wrapper {
    width:     100% !important;
    max-width: var(--wmm-panel-width, 300px) !important;
    min-width: 0 !important;
}
.wmm-panel-inner .wbs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* ── Footer de blocos ─────────────────────────────────────── */
.wmm-footer-blocks { margin-top: 24px; }

/* ── Foco visível ─────────────────────────────────────────── */
.wmm-link:focus-visible {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 2px;
}