/* ============================================================
   OpiDev Skin — Navigation (DDRMenu template styling)
   Desktop: horizontal bar with dropdowns.
   Mobile : off-canvas drawer (same DDRMenu markup, no Superfish).
   ============================================================ */

/* ---------- Desktop bar ---------- */
.opi-desktop-menu { display: flex; }

.opi-menu, .opi-menu ul { list-style: none; margin: 0; padding: 0; }
.opi-menu { display: flex; gap: var(--opi-space-1); align-items: center; }

.opi-menu li { position: relative; }

.opi-menu a {
    display: block;
    padding: var(--opi-space-3) var(--opi-space-4);
    color: var(--opi-text);
    font-weight: 600;
    border-radius: var(--opi-radius-sm);
    white-space: nowrap;
    transition: background var(--opi-dur) var(--opi-ease),
                color var(--opi-dur) var(--opi-ease);
}
.opi-menu a:hover,
.opi-menu li.opi-active > a {
    background: var(--opi-surface-alt);
    color: var(--opi-brand);
    text-decoration: none;
}

/* dropdown submenus */
.opi-menu ul {
    position: absolute; top: 100%; left: 0;
    min-width: 220px;
    background: var(--opi-surface);
    border: 1px solid var(--opi-border);
    border-radius: var(--opi-radius);
    box-shadow: var(--opi-shadow-lg);
    padding: var(--opi-space-2);
    opacity: 0; visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--opi-dur) var(--opi-ease),
                transform var(--opi-dur) var(--opi-ease),
                visibility var(--opi-dur);
    z-index: 1100;
}
.opi-menu li:hover > ul,
.opi-menu li:focus-within > ul {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.opi-menu ul a { font-weight: 500; }

/* third level flyout */
.opi-menu ul ul { top: 0; left: 100%; transform: translateX(8px); }
.opi-menu ul li:hover > ul { transform: translateX(0); }

/* caret on parents */
.opi-menu li.opi-has-children > a::after {
    content: "";
    display: inline-block;
    width: .5em; height: .5em;
    margin-left: .45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: .6;
}
.opi-menu ul li.opi-has-children > a::after { transform: rotate(-45deg); float: right; }

/* ============================================================
   OFF-CANVAS DRAWER (mobile)
   ============================================================ */
.opi-drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(8, 14, 24, .5);
    opacity: 0; visibility: hidden;
    transition: opacity var(--opi-dur) var(--opi-ease), visibility var(--opi-dur);
    z-index: 1190;
}
body.opi-nav-open .opi-drawer-overlay { opacity: 1; visibility: visible; }

.opi-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(84vw, 340px);
    background: var(--opi-surface);
    border-left: 1px solid var(--opi-border);
    box-shadow: var(--opi-shadow-lg);
    transform: translateX(100%);
    transition: transform var(--opi-dur) var(--opi-ease);
    z-index: 1200;
    display: flex; flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
body.opi-nav-open .opi-drawer { transform: translateX(0); }

.opi-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--opi-space-4) var(--opi-space-5);
    border-bottom: 1px solid var(--opi-border);
}
.opi-drawer-close {
    width: 40px; height: 40px; border: none; background: transparent;
    color: var(--opi-text); font-size: 1.5rem; cursor: pointer;
    border-radius: var(--opi-radius-sm);
}
.opi-drawer-close:hover { background: var(--opi-surface-alt); }

/* drawer menu list — accordion behaviour driven by JS toggling .opi-open */
.opi-drawer .opi-menu { flex-direction: column; align-items: stretch; gap: 0; padding: var(--opi-space-3); }
.opi-drawer .opi-menu li { width: 100%; }
.opi-drawer .opi-menu a { padding: var(--opi-space-3) var(--opi-space-4); border-radius: var(--opi-radius-sm); }

.opi-drawer .opi-menu ul {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; background: transparent;
    padding: 0 0 0 var(--opi-space-4);
    max-height: 0; overflow: hidden;
    transition: max-height var(--opi-dur) var(--opi-ease);
}
.opi-drawer .opi-menu li.opi-open > ul { max-height: 1500px; }

.opi-drawer .opi-menu li.opi-has-children > a::after {
    float: right; transition: transform var(--opi-dur) var(--opi-ease);
}
.opi-drawer .opi-menu li.opi-open.opi-has-children > a::after { transform: rotate(-135deg); }