/*
 * bootstrap-nav-depth3.css
 * Companion stylesheet for bootstrap_5_wp_nav_menu_walker (depth-3 support).
 *
 * Desktop (≥ 992px): depth-3 opens as a flyout to the right on hover.
 * Mobile  (< 992px): depth-3 slides in as a fixed overlay; back button closes it.
 */

/* ============================================================================
   DESKTOP (≥ 992px)
   ============================================================================ */
@media (min-width: 992px) {

    /* Position context for the flyout */
    .dropdown-submenu {
        position: relative;
    }

    /* Depth-3 <ul>: hidden flyout, revealed on hover */
    .dropdown-submenu > .dropdown-menu {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        margin-top: 0;
        margin-left: 0.125rem;
        opacity: 0;
        transform: translateX(-6px);
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .dropdown-submenu:hover > .dropdown-menu,
    .dropdown-submenu:focus-within > .dropdown-menu {
        display: block;
        opacity: 1;
        transform: translateX(0);
    }

    /* Hide both toggle buttons on desktop */
    .dropdown-submenu-toggle,
    .dropdown-nav-toggle {
        display: none !important;
    }

    /* fa-chevron-down inside the depth-0 nav-link — rotates when open */
    .nav-item.dropdown > .nav-link .dropdown-nav-arrow {
        font-size: 0.65em;
        margin-left: 0.4rem;
        vertical-align: middle;
        transition: transform 0.2s ease;
    }

    .nav-item.dropdown.show > .nav-link .dropdown-nav-arrow {
        transform: rotate(180deg);
    }

    /* Right-pointing chevron indicator on parent link */
    .dropdown-submenu > .dropdown-item::after {
        content: "";
        display: inline-block;
        margin-left: 0.5rem;
        vertical-align: middle;
        border-top: 0.3em solid transparent;
        border-bottom: 0.3em solid transparent;
        border-left: 0.3em solid currentColor;
    }
}

/* ============================================================================
   MOBILE (< 992px)
   ============================================================================ */
@media (max-width: 991.98px) {

    /* ── depth-1 <li>: flex row ──────────────────────────────────────────── */
    .dropdown-submenu {
        position: static !important;
        display: flex !important;
        align-items: stretch;
    }

    .dropdown-submenu > .dropdown-item {
        flex: 1 1 auto;
    }

    /* Hide the chevron icon inside the nav-link on mobile — the separate button has its own icon */
    .nav-item.dropdown > .nav-link .dropdown-nav-arrow {
        display: none;
    }

    /* ── Depth-0 split dropdown button (level 1 → level 2) ─────────────── */
    /*
     * The nav-item.dropdown <li> becomes a flex row so the nav-link and the
     * toggle button sit side by side. Bootstrap's dropdown plugin targets the
     * button's data-bs-toggle, leaving the <a> fully clickable.
     */
    .nav-item.dropdown {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .nav-item.dropdown > .nav-link {
        flex: 1 1 auto;
    }

    /* Dropdown menu always takes full width below the flex row */
    .nav-item.dropdown > .dropdown-menu {
        flex: 0 0 100%;
    }

    .nav-item.dropdown > .dropdown-nav-toggle {
        flex: 0 0 auto;
        display: flex !important;
        align-items: center;
        padding: 0 1.5rem !important;
        background: none;
        border: none;
        border-left: 1px solid rgba(0, 0, 0, .05) !important;
        cursor: pointer;
        color: inherit;
        line-height: 1;
    }

    .nav-item.dropdown > .dropdown-nav-toggle:focus-visible {
        outline: 2px solid var(--bs-primary, #0d6efd);
        outline-offset: -2px;
    }

    .nav-item.dropdown > .dropdown-nav-toggle .dropdown-nav-arrow {
        font-size: 0.75em;
        color: var(--surfcamp-grid-text);
        /* Rotate to point up when dropdown is open */
        transition: transform 0.2s ease;
    }

    .nav-item.dropdown.show > .dropdown-nav-toggle .dropdown-nav-arrow {
        transform: rotate(180deg);
    }

    /* ── Chevron toggle button ───────────────────────────────────────────── */
    .dropdown-submenu-toggle {
        flex: 0 0 auto;
        display: flex !important; /* override any theme display:none */
        align-items: center;
        padding: 0 1rem;
        background: none;
        border: none;
        border-left: 1px solid rgba(0, 0, 0, .05) !important;
        padding: 1rem 1.5rem !important;
        cursor: pointer;
        color: inherit;
        line-height: 1;
    }

    .dropdown-submenu-toggle:focus-visible {
        outline: 2px solid var(--bs-primary, #0d6efd);
        outline-offset: -2px;
    }

    /* Font Awesome handles the arrow icon — size and color */
    .dropdown-submenu-arrow {
        font-size: 0.75em;
        color: var(--surfcamp-grid-text);
    }

    /* ── Depth-3 slide-over panel ────────────────────────────────────────── */
    /*
     * Kept invisible (visibility:hidden) until JS has positioned it AND
     * the user opens it. This prevents the unpositioned panel from rendering
     * as a white box on the page before any interaction.
     *
     * JS flow:
     *   1. User taps chevron
     *   2. positionPanel() sets inline top/left/width/height
     *   3. JS adds data-positioned attribute  →  visibility:visible kicks in
     *   4. JS adds .is-open  →  slides in from translateX(100%)
     */
    .dropdown-submenu > .dropdown-menu {
        /* Take fully out of normal flow — no effect on ancestor height */
        position: fixed !important;
        /* Dimensions set by JS inline styles */
        margin: 0 !important;
        padding-top: 0;
        border: none !important;
        border-radius: 0;
        box-shadow: none !important;

        /* Always in DOM so transition fires, but invisible until positioned */
        display: block !important;
        visibility: hidden;
        pointer-events: none;

        /* Start off-screen right; slide in to translateX(0) on .is-open */
        transform: translateX(100%) !important;
        transition: transform 0.25s ease !important;

        background: var(--bs-dropdown-bg, #fff);
        z-index: 1055;
        overflow-y: auto;
    }

    /* JS adds [data-positioned] after setting coordinates → reveal the panel */
    .dropdown-submenu > .dropdown-menu[data-positioned] {
        visibility: visible;
    }

    /* Slide in */
    .dropdown-submenu > .dropdown-menu.is-open {
        transform: translateX(0) !important;
        pointer-events: auto;
    }

    /* ── Back button header row (injected by JS at top of panel) ───────── */
    .dropdown-submenu-back {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        width: 100%;
        padding: 0.875rem 1rem;
        background: var(--bs-dropdown-bg, #fff);
        border: none;
        border-bottom: 2px solid var(--bs-dropdown-divider-bg, rgba(0,0,0,.08));
        cursor: pointer;
        font-weight: 600;
        font-size: 1rem;
        color: var(--bs-dropdown-link-color, #212529);
        text-align: left;
        box-sizing: border-box;
        /* Sticky so it stays visible when the panel scrolls */
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .dropdown-submenu-back:hover {
        background: var(--bs-dropdown-link-hover-bg, #f8f9fa);
    }

    .dropdown-submenu-back:focus-visible {
        outline: 2px solid var(--bs-primary, #0d6efd);
        outline-offset: -2px;
    }

    /* Left-pointing chevron (←) via Font Awesome equivalent using borders */
    .dropdown-submenu-back-arrow {
        display: inline-block;
        width: 0.45em;
        height: 0.45em;
        border-left: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        flex-shrink: 0;
        margin-right: 0.5rem;
    }
}

/* ============================================================================
   RTL support
   ============================================================================ */
@media (min-width: 992px) {
    [dir="rtl"] .dropdown-submenu > .dropdown-menu {
        left: auto;
        right: 100%;
        margin-left: 0;
        margin-right: 0.5rem;
        transform: translateX(6px);
    }

    [dir="rtl"] .dropdown-submenu:hover > .dropdown-menu,
    [dir="rtl"] .dropdown-submenu:focus-within > .dropdown-menu {
        transform: translateX(0);
    }

    [dir="rtl"] .dropdown-submenu > .dropdown-item::after {
        border-left: none;
        border-right: 0.3em solid currentColor;
        margin-left: 0;
        margin-right: 0.5em;
    }
}

@media (max-width: 991.98px) {
    [dir="rtl"] .dropdown-submenu > .dropdown-menu {
        transform: translateX(-100%) !important;
    }

    [dir="rtl"] .dropdown-submenu > .dropdown-menu.is-open {
        transform: translateX(0) !important;
    }

    [dir="rtl"] .dropdown-submenu-back-arrow {
        transform: rotate(-135deg);
    }
}