/* ============================================================================
 * Vertical header style — click-to-open drawer that overlays the page content.
 *
 * Loaded only when header_style = "vertical" (see Scripts_Manager). Every
 * selector is prefixed with `onward-vmenu-` and scoped to the drawer / header
 * row, so nothing here can affect the rest of the theme. The drawer no longer
 * behaves like a fixed sidebar and does not change the page container width.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * Header row (toggle + logo + icons)
 * ------------------------------------------------------------------------- */
.onward-vmenu-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.onward-vmenu-branding {
    margin-inline-end: auto;
}

/* The toggle intentionally does NOT use the generic `.menu-toggle` class, so
 * the theme's default menu-toggle handlers (navigation.js / onward-custom-js.js)
 * and the `.menu-toggle.active` icon-swap CSS never act on it. Scoping under
 * `.onward-vmenu-header` keeps specificity above any stray header button rule. */
.onward-vmenu-header .onward-vmenu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.onward-vmenu-toggle-icon {
    display: inline-flex;
}

.onward-vmenu-toggle-icon svg {
    display: block;
}

/* ---------------------------------------------------------------------------
 * Drawer shell (overlay + sliding panels container)
 * ------------------------------------------------------------------------- */
.onward-vmenu-drawer {
    --onward-vmenu-bg: #caff00;
    --onward-vmenu-fg: #080808;
    --onward-vmenu-border: #b7e601;
    --onward-vmenu-sidebar-width: 240px;
    --onward-vmenu-flyout-width: min(320px, 40vw);
    --onward-vmenu-panel-width: min(400px, 88vw);

    position: fixed;
    inset: 0;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
    /* Delay hiding until panel slide-out finishes (.45s). */
    transition: visibility 0s linear .45s;
}

.onward-vmenu-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s linear 0s;
}

.onward-vmenu-overlay {
    position: fixed;
    inset: 0;
    background: rgb(8 8 8 / 20%);
    opacity: 0;
    transition: opacity .35s ease;
}

.onward-vmenu-drawer.is-open .onward-vmenu-overlay {
    opacity: 1;
}

.onward-vmenu-panels {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--onward-vmenu-panel-width);
    height: 100vh;
    height: 100dvh;
    background: var(--onward-vmenu-bg);
    color: var(--onward-vmenu-fg);
    display: flex;
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform .45s cubic-bezier(.645, .045, .355, 1);
}

.onward-vmenu-drawer.is-open .onward-vmenu-panels {
    transform: translateX(0);
    will-change: transform;
}

/* Admin bar offset: keep panels below the WP toolbar when logged in */
body.admin-bar .onward-vmenu-panels {
    top: 32px;
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar .onward-vmenu-panels {
        top: 46px;
        height: calc(100vh - 46px);
        height: calc(100dvh - 46px);
    }
}

/* ---------------------------------------------------------------------------
 * Panels
 * ------------------------------------------------------------------------- */
.onward-vmenu-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--onward-vmenu-panel-width);
    height: 100%;
    background: var(--onward-vmenu-bg);
    overflow-y: auto;
    display: none;
    flex-direction: column;
}

.onward-vmenu-panel--main {
    position: relative;
    display: flex;
}

.onward-vmenu-panel:not(.onward-vmenu-panel--main).is-active {
    display: flex;
}

.onward-vmenu-panel-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
}

.onward-vmenu-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.onward-vmenu-title {
    font-family: inherit;
    font-size: 13px;
}

.onward-vmenu-close {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--onward-vmenu-fg);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Main panel list — content-section tier (not hero overlay)
 * ------------------------------------------------------------------------- */
.onward-vmenu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.onward-vmenu-list > li > a,
.onward-vmenu-list > li > .onward-vmenu-parent {
    display: block;
    width: 100%;
    text-align: start;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--onward-vmenu-fg);
    text-decoration: none;
    font-family: inherit;
    font-size: 28px;
    font-weight: inherit;
    line-height: 1.15;
    letter-spacing: -0.025em;
    transition: opacity .2s ease;
}

.onward-vmenu-list > li > a:hover,
.onward-vmenu-list > li > .onward-vmenu-parent:hover {
    opacity: .55;
}

/* Persian / RTL: negative tracking crowds joins — reset on top titles. */
[dir="rtl"] .onward-vmenu-list > li > a,
[dir="rtl"] .onward-vmenu-list > li > .onward-vmenu-parent,
:lang(fa) .onward-vmenu-list > li > a,
:lang(fa) .onward-vmenu-list > li > .onward-vmenu-parent {
    letter-spacing: normal;
}

/* ---------------------------------------------------------------------------
 * Sub-panel: back button + groups / accordion
 * ------------------------------------------------------------------------- */
.onward-vmenu-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--onward-vmenu-fg);
    font: inherit;
    font-size: 13px;
    margin-bottom: 24px;
}

.onward-vmenu-groups {
    display: flex;
    flex-direction: column;
}

.onward-vmenu-group {
    margin-bottom: 16px;
}

.onward-vmenu-group-toggle {
    position: relative;
    display: block;
    width: 100%;
    text-align: start;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--onward-vmenu-fg);
    opacity: .55;
    text-decoration: none;
    font: inherit;
    font-size: 14px;
    margin-bottom: 8px;
    transition: opacity .2s ease;
}

.onward-vmenu-group-toggle:hover,
.onward-vmenu-group-toggle[aria-expanded="true"] {
    opacity: 1;
    text-decoration: underline;
}

.onward-vmenu-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    flex-direction: column;
    gap: 8px;
}

.onward-vmenu-sublist.is-open {
    display: flex;
}

/* Nested depth (4+): inline accordion inside a flyout / mobile sublist */
.onward-vmenu-sublist--nested {
    padding-inline-start: 16px;
    margin-top: 8px;
}

/* ---------------------------------------------------------------------------
 * Links
 * ------------------------------------------------------------------------- */
.onward-vmenu-link {
    font-family: inherit;
    font-size: 16px;
    color: var(--onward-vmenu-fg);
    text-decoration: none;
}

.onward-vmenu-link:hover {
    text-decoration: underline;
}

.onward-vmenu-link--group {
    display: block;
}

/* Current page highlight (matches accordion active underline language) */
.onward-vmenu-list > li.current-menu-item > a,
.onward-vmenu-list > li.current-menu-ancestor > .onward-vmenu-parent,
a.onward-vmenu-link.current-menu-item,
.onward-vmenu-group-toggle.current-menu-item,
.onward-vmenu-group-toggle.current-menu-ancestor {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Desktop: cascading sidebar + flyout sub-panels
 * ------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
    .onward-vmenu-panels {
        width: var(--onward-vmenu-sidebar-width);
        overflow: visible;
    }

    .onward-vmenu-panel--main {
        width: var(--onward-vmenu-sidebar-width);
    }

    .onward-vmenu-back {
        display: none;
    }

    .onward-vmenu-panel:not(.onward-vmenu-panel--main) {
        top: 0;
        left: var(--onward-vmenu-sidebar-width);
        width: var(--onward-vmenu-flyout-width);
        height: 100%;
        border-inline-start: 1px solid var(--onward-vmenu-border);
        padding: 16px;
        transform: translateX(-100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .35s ease, opacity .35s ease, visibility 0s linear .35s;
        display: flex !important;
    }

    .onward-vmenu-panel:not(.onward-vmenu-panel--main).is-active {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: transform .35s ease, opacity .35s ease, visibility 0s linear 0s;
    }

    .onward-vmenu-panel-body {
        padding: 16px;
    }

    .onward-vmenu-sublist {
        position: absolute;
        top: 0;
        left: var(--onward-vmenu-sidebar-width);
        width: var(--onward-vmenu-flyout-width);
        height: 100%;
        background: var(--onward-vmenu-bg);
        padding: 16px;
        gap: 8px;
        overflow-y: auto;
        transform: translateX(-100%);
        opacity: 0;
        visibility: hidden;
        z-index: -1;
        transition: transform .35s ease, opacity .35s ease, visibility 0s linear .35s;
        display: flex !important;
    }

    .onward-vmenu-sublist.is-open {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        z-index: 5;
        pointer-events: auto;
        transition: transform .35s ease, opacity .35s ease, visibility 0s linear 0s;
    }

    /* Nested lists stay inline; do not become a second flyout column */
    .onward-vmenu-sublist.onward-vmenu-sublist--nested {
        position: static;
        left: auto;
        width: auto;
        height: auto;
        padding: 8px 0 0 16px;
        background: transparent;
        transform: none;
        opacity: 1;
        visibility: visible;
        z-index: auto;
        overflow: visible;
        pointer-events: auto;
        transition: none;
        display: none !important;
    }

    .onward-vmenu-sublist.onward-vmenu-sublist--nested.is-open {
        display: flex !important;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
 * Accessibility: lock page scroll while open, respect reduced motion
 * ------------------------------------------------------------------------- */
body.onward-vmenu-drawer-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .onward-vmenu-overlay,
    .onward-vmenu-panels,
    .onward-vmenu-panel,
    .onward-vmenu-sublist {
        transition-duration: 0s !important;
    }
}