/* ============================================================
   fooba.studio — Off-Canvas Block
   ============================================================ */

/* ── Botão wrapper ─────────────────────────────────────────── */
.fooba-oc-trigger-wrap {
    display     : inline-block;
    line-height : 1;
}

/* ── Botão trigger ─────────────────────────────────────────── */
.fooba-oc-trigger {
    display     : inline-flex;
    align-items : center;
    gap         : 8px;
    cursor      : pointer;
    background  : transparent;
    border      : none;
    padding     : 0;
    line-height : 1;
    transition  : opacity 0.15s ease;
    /* cores/padding via inline style do render PHP */
}
.fooba-oc-trigger:hover  { opacity: 0.8; }
.fooba-oc-trigger:focus  { outline: 2px solid currentColor; outline-offset: 3px; }
.fooba-oc-trigger svg    { display: block; flex-shrink: 0; }

/* ── Overlay ────────────────────────────────────────────────── */
.fooba-oc-overlay {
    position   : fixed;
    inset      : 0;
    z-index    : 9998;
    opacity    : 0;
    visibility : hidden;
    transition : opacity 0.3s ease, visibility 0.3s ease;
    /* background via JS (attrs.overlayBg) */
}
.fooba-oc-overlay.fooba-oc-open {
    opacity    : 1;
    visibility : visible;
}

/* ── Painel ─────────────────────────────────────────────────── */
.fooba-oc-panel {
    position   : fixed;
    z-index    : 9999;
    overflow-y : auto;
    overflow-x : hidden;
    transition : transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    /* dimensões e background via JS (applyPanelStyles) */
}

/* Lateral esquerda */
.fooba-oc-panel--left {
    top       : 0;
    left      : 0;
    height    : 100%;
    transform : translateX(-100%);
}
.fooba-oc-panel--left.fooba-oc-open {
    transform : translateX(0);
}

/* Lateral direita */
.fooba-oc-panel--right {
    top       : 0;
    right     : 0;
    height    : 100%;
    transform : translateX(100%);
}
.fooba-oc-panel--right.fooba-oc-open {
    transform : translateX(0);
}

/* Topo */
.fooba-oc-panel--top {
    top       : 0;
    left      : 0;
    width     : 100%;
    transform : translateY(-100%);
}
.fooba-oc-panel--top.fooba-oc-open {
    transform : translateY(0);
}

/* Base */
.fooba-oc-panel--bottom {
    bottom    : 0;
    left      : 0;
    width     : 100%;
    transform : translateY(100%);
}
.fooba-oc-panel--bottom.fooba-oc-open {
    transform : translateY(0);
}

/* ── Cabeçalho do painel ────────────────────────────────────── */
.fooba-oc-panel__header {
    display         : flex;
    justify-content : flex-end;
    align-items     : center;
    padding         : 16px 20px;
    border-bottom   : 1px solid rgba(255,255,255,0.08);
    position        : sticky;
    top             : 0;
    background      : inherit;
    z-index         : 1;
}

.fooba-oc-panel__close {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 36px;
    height          : 36px;
    background      : rgba(255,255,255,0.1);
    border          : none;
    border-radius   : 50%;
    color           : var(--fooba-oc-link-color, #fff);
    font-size       : 18px;
    cursor          : pointer;
    padding         : 0;
    transition      : background 0.2s ease;
    line-height     : 1;
}
.fooba-oc-panel__close:hover { background: rgba(255,255,255,0.2); }
.fooba-oc-panel__close:focus { outline: 2px solid currentColor; outline-offset: 2px; }

/* ── Corpo do painel — nav ──────────────────────────────────── */
.fooba-oc-panel__body {
    padding : 16px 0 32px;
}

/* Menu UL nativo do WP */
.fooba-oc-panel__body ul {
    list-style : none;
    margin     : 0;
    padding    : 0;
}
.fooba-oc-panel__body ul ul {
    padding-left : 16px;
    border-left  : 2px solid rgba(255,255,255,0.08);
    margin-left  : 20px;
}
.fooba-oc-panel__body li {
    margin : 0;
}
.fooba-oc-panel__body a {
    display         : flex;
    align-items     : center;
    padding         : 12px 24px;
    color           : var(--fooba-oc-link-color, #fff) !important;
    font-size       : var(--fooba-oc-font-size, 16px);
    text-decoration : none !important;
    transition      : background 0.15s ease, padding-left 0.15s ease;
    border-bottom   : 1px solid rgba(255,255,255,0.04);
}
.fooba-oc-panel__body a:hover {
    background   : rgba(255,255,255,0.07);
    padding-left : 30px;
}
.fooba-oc-panel__body .current-menu-item > a,
.fooba-oc-panel__body .current-page-ancestor > a {
    background : rgba(255,255,255,0.1);
    font-weight: bold;
}

/* ── Estados utilitários ────────────────────────────────────── */
.fooba-oc-loading,
.fooba-oc-error {
    padding   : 24px;
    color     : var(--fooba-oc-link-color, #fff);
    opacity   : 0.6;
    font-size : 14px;
}

/* Trava scroll do body quando painel aberto */
.fooba-oc-body-lock {
    overflow : hidden;
}