/* ──────────────────────────────────────────────────────────
   FictionX – moi-1  Mobile navigation drawer (`.new-nav`, ≤992px)
   The drawer markup is cloned from the desktop menu by script.js; this file
   restyles it (wider panel, slide-in, accordion look) and nav-drawer.js adds
   the header, backdrop, scroll lock and current-page highlighting.
   Loaded after top-bar.css so its z-index/position rules win.
   ────────────────────────────────────────────────────────── */

@media (max-width:992px){
    :root{
        --fx-drawer-w:min(86vw,400px);
        --fx-drawer-gold:#D4AF37;
        --fx-drawer-red:#a51313;
    }

    html.fx-nav-open,
    html.fx-nav-open body{overflow:hidden !important;}

    /* ===== Backdrop ===== */
    .fx-nav-backdrop{
        position:fixed;
        inset:0;
        z-index:1000000002;
        background:rgba(12,4,4,.55);
        -webkit-backdrop-filter:blur(3px);
        backdrop-filter:blur(3px);
        opacity:0;
        visibility:hidden;
        transition:opacity .35s ease, visibility 0s linear .35s;
    }
    .fx-nav-backdrop.is-on{
        opacity:1;
        visibility:visible;
        transition:opacity .35s ease;
    }

    /* ===== Panel ===== */
    .pageWrapper .new-nav{
        display:flex !important;
        flex-direction:column;
        position:fixed !important;
        top:0 !important;
        right:0 !important;
        left:auto !important;
        z-index:1000000003 !important;
        width:var(--fx-drawer-w) !important;
        height:100% !important;
        height:100dvh !important;
        overflow-x:hidden;
        overflow-y:auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        background:
            radial-gradient(420px 260px at 100% 0%, rgba(165,19,19,.38), transparent 70%),
            radial-gradient(360px 300px at 0% 100%, rgba(212,175,55,.10), transparent 70%),
            linear-gradient(170deg,#2a0a0a 0%,#1a0707 42%,#0f0404 100%) !important;
        border-inline-start:1px solid rgba(212,175,55,.22);
        transform:translateX(100%);
        visibility:hidden;
        transition:transform .42s cubic-bezier(.22,.61,.36,1), visibility 0s linear .42s;
    }
    .pageWrapper .new-nav.active{
        transform:none;
        visibility:visible;
        transition:transform .42s cubic-bezier(.22,.61,.36,1);
    }
    html[dir="ltr"] .pageWrapper .new-nav{
        right:auto !important;
        left:0 !important;
        transform:translateX(-100%);
    }
    html[dir="ltr"] .pageWrapper .new-nav.active{transform:none;}

    /* ===== Header (injected by nav-drawer.js) ===== */
    .fx-drawer__head{
        position:sticky;
        top:0;
        z-index:2;
        flex:0 0 auto;
        display:flex;
        align-items:center;
        gap:12px;
        min-height:74px;
        padding:14px 20px;
        padding-inline-end:68px;
        background:rgba(22,7,7,.92);
        -webkit-backdrop-filter:blur(8px);
        backdrop-filter:blur(8px);
    }
    .fx-drawer__head::after{
        content:"";
        position:absolute;
        inset-inline:0;
        bottom:0;
        height:2px;
        background:linear-gradient(90deg,transparent 0%,var(--fx-drawer-gold) 30%,var(--fx-drawer-red) 70%,transparent 100%);
        opacity:.85;
    }
    .fx-drawer__logo{
        display:block;
        height:44px;
        width:auto;
        filter:brightness(0) invert(1);
        opacity:.95;
    }
    .fx-drawer__title{
        display:flex;
        flex-direction:column;
        gap:2px;
        padding-inline-start:12px;
        border-inline-start:1px solid rgba(255,255,255,.14);
        line-height:1.35;
    }
    .fx-drawer__title b{
        color:var(--fx-drawer-gold);
        font-size:15px;
        font-weight:700;
        white-space:nowrap;
    }

    /* ===== Menu button → round close button inside the drawer header ===== */
    .navbtn{transition:right .42s cubic-bezier(.22,.61,.36,1), left .42s cubic-bezier(.22,.61,.36,1), top .3s ease, background-color .25s ease, border-radius .3s ease;}
    .navbtn.active{
        z-index:1000000004 !important;
        top:16px !important;
        right:16px !important;
        left:auto !important;
        width:42px !important;
        height:42px !important;
        line-height:42px !important;
        font-size:17px !important;
        border-radius:50%;
        background-color:rgba(255,255,255,.08) !important;
        border:1px solid rgba(255,255,255,.16);
        color:#fff !important;
    }
    .navbtn.active:hover,
    .navbtn.active:focus-visible{
        background-color:var(--fx-drawer-red) !important;
        border-color:var(--fx-drawer-red);
    }
    .fx-drawer-ready .navbtn.active{right:calc(var(--fx-drawer-w) - 58px) !important;}
    html[dir="ltr"].fx-drawer-ready .navbtn.active{
        right:auto !important;
        left:calc(var(--fx-drawer-w) - 58px) !important;
    }

    /* ===== Lists ===== */
    .pageWrapper .new-nav > ul{
        flex:1 0 auto;
        margin:0;
        padding:10px 0 18px;
        list-style:none;
    }
    .pageWrapper .new-nav ul{list-style:none;margin:0;padding:0;}
    .pageWrapper .new-nav li{position:relative;list-style:none;margin:0;}
    .pageWrapper .new-nav li::before{display:none;}

    /* Top level */
    .pageWrapper .new-nav > ul > li{
        margin:0 12px;
        border-bottom:1px solid rgba(255,255,255,.06);
    }
    .pageWrapper .new-nav > ul > li:last-child{border-bottom:0;}
    .pageWrapper .new-nav > ul > li > a,
    .pageWrapper .new-nav > ul > li.mega-menu h4{
        position:relative;
        display:flex;
        align-items:center;
        min-height:54px;
        padding:12px 14px;
        padding-inline-end:52px;
        border:0;
        border-radius:6px;
        color:#f3f3f3 !important;
        font-size:16px;
        font-weight:700;
        line-height:1.5;
        background:transparent;
        text-decoration:none;
        transition:background-color .25s ease, color .25s ease;
    }
    .pageWrapper .new-nav > ul > li > a:hover,
    .pageWrapper .new-nav > ul > li > a:focus-visible{
        background:rgba(255,255,255,.05);
        outline:none;
    }
    /* Gold accent bar on the start edge of the open / current section */
    .pageWrapper .new-nav > ul > li > a::before{
        content:"";
        position:absolute;
        inset-block:12px;
        inset-inline-start:0;
        width:3px;
        border-radius:3px;
        background:var(--fx-drawer-gold);
        transform:scaleY(0);
        transition:transform .3s ease;
    }
    .pageWrapper .new-nav > ul > li.active > a,
    .pageWrapper .new-nav > ul > li.fx-current-branch > a{
        background:linear-gradient(90deg,rgba(165,19,19,.0) 0%,rgba(165,19,19,.32) 100%);
        color:#fff !important;
    }
    html[dir="ltr"] .pageWrapper .new-nav > ul > li.active > a,
    html[dir="ltr"] .pageWrapper .new-nav > ul > li.fx-current-branch > a{
        background:linear-gradient(270deg,rgba(165,19,19,.0) 0%,rgba(165,19,19,.32) 100%);
    }
    .pageWrapper .new-nav > ul > li.active > a::before,
    .pageWrapper .new-nav > ul > li.fx-current-branch > a::before{transform:scaleY(1);}

    /* "two-lines" item (e.g. السلطان قابوس / طيب الله ثراه) */
    .pageWrapper .new-nav > ul > li.two-lines > a > span{display:block;}
    .pageWrapper .new-nav > ul > li.two-lines > a p{
        display:block;
        margin:2px 0 0 !important;
        color:rgba(212,175,55,.9) !important;
        font-size:12px !important;
        font-weight:600;
        line-height:1.4 !important;
        text-align:start !important;
    }

    /* Chevron toggle (replaces the theme's bare arrow) */
    .pageWrapper .new-nav li.hasChildren::after,
    .pageWrapper .new-nav > ul > li.mega-menu h4::after{
        content:"\f107";
        position:absolute;
        top:14px;
        right:auto;
        left:auto;
        inset-inline-end:12px;
        display:flex;
        align-items:center;
        justify-content:center;
        width:28px;
        height:28px;
        border-radius:50%;
        background:rgba(255,255,255,.07);
        border:1px solid rgba(255,255,255,.10);
        color:rgba(255,255,255,.75);
        font-family:FontAwesome;
        font-size:15px;
        line-height:1;
        pointer-events:none;
        transition:transform .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
    }
    .pageWrapper .new-nav li.hasChildren.active::after{
        transform:rotate(-180deg);
        background:var(--fx-drawer-gold);
        border-color:var(--fx-drawer-gold);
        color:#1a0707;
    }

    /* Second level */
    .pageWrapper .new-nav ul ul{
        position:relative;
        margin:2px 0 10px;
        padding:4px 0;
        background:rgba(0,0,0,.22) !important;
        border-radius:6px;
    }
    .pageWrapper .new-nav ul ul::before{
        content:"";
        position:absolute;
        inset-block:10px;
        inset-inline-start:22px;
        width:1px;
        background:linear-gradient(180deg,rgba(212,175,55,.45),rgba(212,175,55,.05));
    }
    .pageWrapper .new-nav ul ul li a{
        position:relative;
        display:block;
        padding:10px 14px;
        padding-inline-start:40px;
        padding-inline-end:48px;
        border:0 !important;
        color:#cfcfcf !important;
        font-size:14.5px;
        font-weight:500;
        line-height:1.6;
        background:transparent !important;
        text-decoration:none;
        transition:color .2s ease, background-color .2s ease;
    }
    .pageWrapper .new-nav ul ul li a::before{
        content:"";
        position:absolute;
        top:50%;
        inset-inline-start:19px;
        width:7px;
        height:7px;
        margin-top:-3.5px;
        border-radius:50%;
        background:#1a0707;
        border:1px solid rgba(212,175,55,.6);
        transition:background-color .2s ease, transform .2s ease;
    }
    .pageWrapper .new-nav ul ul li a:hover,
    .pageWrapper .new-nav ul ul li a:focus-visible{
        color:#fff !important;
        background:rgba(255,255,255,.04) !important;
        outline:none;
    }
    .pageWrapper .new-nav ul ul li a:hover::before{background:var(--fx-drawer-gold);}
    .pageWrapper .new-nav ul ul li.hasChildren::after{
        top:8px;
        width:24px;
        height:24px;
        font-size:13px;
    }
    .pageWrapper .new-nav ul ul li.hasChildren.active > a{color:#fff !important;}

    /* Third level and deeper */
    .pageWrapper .new-nav ul ul ul{
        margin:0 0 6px;
        margin-inline-start:30px;
        background:rgba(0,0,0,.18) !important;
    }
    .pageWrapper .new-nav ul ul ul::before{inset-inline-start:14px;}
    .pageWrapper .new-nav ul ul ul li a{
        padding-inline-start:32px;
        font-size:14px;
        color:#b9b9b9 !important;
    }
    .pageWrapper .new-nav ul ul ul li a::before{
        inset-inline-start:11px;
        width:5px;
        height:5px;
        margin-top:-2.5px;
    }

    /* Current page */
    .pageWrapper .new-nav a.fx-current{color:var(--fx-drawer-gold) !important;font-weight:700;}
    .pageWrapper .new-nav ul ul a.fx-current::before{
        background:var(--fx-drawer-gold);
        transform:scale(1.25);
    }
    .pageWrapper .new-nav ul ul li.selected > a{background:transparent !important;}

    /* ===== Footer (injected by nav-drawer.js) ===== */
    .fx-drawer__foot{
        flex:0 0 auto;
        padding:14px 20px 22px;
        border-top:1px solid rgba(255,255,255,.07);
        color:rgba(255,255,255,.45);
        font-size:11.5px;
        text-align:center;
        letter-spacing:.2px;
    }

    /* ===== Staggered entrance of top-level items ===== */
    .pageWrapper .new-nav > ul > li{
        opacity:0;
        transform:translateX(18px);
        transition:opacity .35s ease, transform .4s cubic-bezier(.22,.61,.36,1);
    }
    html[dir="ltr"] .pageWrapper .new-nav > ul > li{transform:translateX(-18px);}
    .pageWrapper .new-nav.active > ul > li,
    html[dir="ltr"] .pageWrapper .new-nav.active > ul > li{opacity:1;transform:none;}
    .pageWrapper .new-nav.active > ul > li:nth-child(1){transition-delay:.08s;}
    .pageWrapper .new-nav.active > ul > li:nth-child(2){transition-delay:.12s;}
    .pageWrapper .new-nav.active > ul > li:nth-child(3){transition-delay:.16s;}
    .pageWrapper .new-nav.active > ul > li:nth-child(4){transition-delay:.20s;}
    .pageWrapper .new-nav.active > ul > li:nth-child(5){transition-delay:.24s;}
    .pageWrapper .new-nav.active > ul > li:nth-child(6){transition-delay:.28s;}
    .pageWrapper .new-nav.active > ul > li:nth-child(7){transition-delay:.32s;}
    .pageWrapper .new-nav.active > ul > li:nth-child(n+8){transition-delay:.36s;}

    /* Scrollbar */
    .pageWrapper .new-nav{scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.35) transparent;}
    .pageWrapper .new-nav::-webkit-scrollbar{width:4px;}
    .pageWrapper .new-nav::-webkit-scrollbar-thumb{background:rgba(212,175,55,.35);border-radius:4px;}
}

@media (max-width:992px) and (prefers-reduced-motion:reduce){
    .pageWrapper .new-nav,
    .pageWrapper .new-nav > ul > li,
    .navbtn,
    .fx-nav-backdrop{transition:none !important;}
    .pageWrapper .new-nav > ul > li{opacity:1;transform:none;}
}