/* =========================================================================
   FAISAL PREMIUM 2026 — Responsive + Mobile Navigation
   Contains the FIXED mobile submenu toggle behaviour.
   ========================================================================= */

/* The JS-injected mobile close (×) button must NEVER show on desktop
   (it was appearing as a stray "X" next to the first menu item). */
.nav-close{display:none}

/* ===================== TABLET / MOBILE BREAKPOINT ===================== */
@media (max-width: 1024px){

  /* The hamburger must always sit ABOVE the drawer so it stays clickable. */
  .menu-toggle{display:inline-flex;position:relative;z-index:1301}

  /*
   * Off-canvas drawer.
   * IMPORTANT: when CLOSED it is visibility:hidden + pointer-events:none so it
   * can never cover the page or intercept the hamburger tap, and translated
   * fully off-screen. The body has overflow-x:hidden (in enhancements.css) so
   * the off-screen drawer never adds document width (fixes the white split).
   */
  .nav{
    display:block;position:fixed;top:0;bottom:0;inset-inline-end:0;
    width:min(86vw,360px);max-width:100vw;height:100dvh;background:#fff;z-index:100000;
    box-shadow:-12px 0 40px rgba(6,20,16,.18);
    transform:translateX(100%);transition:transform .32s cubic-bezier(0.4,0,0.2,1),visibility .32s;
    overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:1rem 0 3rem;
    visibility:hidden;pointer-events:none;will-change:transform;
  }
  [dir="ltr"] .nav{inset-inline-end:auto;inset-inline-start:0;transform:translateX(-100%);box-shadow:12px 0 40px rgba(6,20,16,.18)}
  .nav.open{transform:translateX(0);visibility:visible;pointer-events:auto}

  /* Header row label for the drawer — centered title (RTL-safe) */
  .nav::before{
    content:"القائمة";display:block;padding:.25rem 3rem 1rem;margin-bottom:.5rem;
    border-bottom:1px solid var(--border-light);color:var(--primary);font-weight:800;font-size:1.05rem;
    text-align:center;
  }

  /* Dedicated close (×) button (injected by JS) */
  .nav-close{
    position:absolute;top:.5rem;inset-inline-start:.5rem;z-index:2;
    width:40px;height:40px;border:none;background:var(--bg-alt,#F7F4EF);color:var(--primary,#006837);
    border-radius:10px;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  }
  .nav-close:hover{background:var(--primary,#006837);color:#fff}

  .nav>ul{display:block}
  .nav li{position:static;border-bottom:1px solid var(--border-light)}
  .nav li:last-child{border-bottom:none}

  .menu-item-wrap{display:flex;align-items:stretch;justify-content:space-between}
  .menu-link{
    flex:1;padding:1rem 1.25rem;border-radius:0;font-size:1rem;min-height:54px; /* good touch target */
    justify-content:flex-start;
  }
  .nav>ul>li>.menu-item-wrap>.menu-link::after{display:none}

  /* ----- The arrow toggle button (large 54px touch target) ----- */
  .menu-arrow{
    display:inline-flex!important;width:54px;min-height:54px;height:auto;font-size:.85rem;
    border-radius:0;border:none;border-inline-start:1px solid var(--border-light);
    background:none;color:var(--text-muted);flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;
  }
  .menu-arrow i{transition:transform .3s cubic-bezier(0.4,0,0.2,1)}

  /* ----- Submenu: collapsed by default, slide open via .is-open on the <li> ----- */
  .nav-sub{
    position:static;inset:auto;min-width:0;width:100%;max-width:100%;background:var(--bg-alt);
    box-shadow:none;border:none;border-radius:0;padding:0;margin:0;
    opacity:1;visibility:visible;transform:none;          /* reset desktop transitions */
    max-height:0;overflow:hidden;
    transition:max-height .35s cubic-bezier(0.4,0,0.2,1);
  }
  .nav-sub .nav-sub{margin:0;background:#fff}

  /* Open state: arrow rotates 180°, submenu slides down */
  .nav li.is-open>.menu-item-wrap>.menu-arrow i{transform:rotate(180deg);color:var(--primary)}
  .nav li.is-open>.menu-item-wrap>.menu-arrow{color:var(--primary)}
  .nav li.is-open>.nav-sub{max-height:5000px}

  /* Indent nested levels */
  .nav-sub .menu-link{padding-inline-start:2rem;font-size:.95rem;background:transparent}
  .nav-sub .nav-sub .menu-link{padding-inline-start:3rem}
  .nav-sub .menu-link::after{display:none}

  /* IMPORTANT: on touch/mobile, hover must NOT open submenus (prevents the
     "won't close" feeling). Only the .is-open class controls visibility. */
  .nav li:hover>.nav-sub,.nav li:focus-within>.nav-sub{max-height:0}
  .nav li.is-open:hover>.nav-sub,.nav li.is-open>.nav-sub{max-height:5000px}

  /* Show the header CTA buttons also inside the drawer footer area */
  .header-actions .btn-outline{display:inline-flex}

  /* Backdrop — controlled purely by the .show class (no [hidden] needed). */
  .nav-backdrop{
    position:fixed;inset:0;background:rgba(6,20,16,.5);z-index:99990;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease;
  }
  .nav-backdrop.show{opacity:1;visibility:visible;pointer-events:auto}

  body.nav-locked{overflow:hidden}
}

/* (Header CTA visibility on mobile is handled authoritatively in enhancements.css
   where BOTH buttons remain visible per spec.) */

/* ===================== GENERAL RESPONSIVE TWEAKS ===================== */
@media (max-width: 900px){
  .layout{gap:2rem}
  .hero-trust{gap:1rem}
}
@media (max-width: 560px){
  .container{padding-inline:1rem}
  .btn{width:100%;justify-content:center}
  .hero-cta-row{flex-direction:column}
  .hero-cta-row .btn{width:100%}
  .header-actions .btn-sm{padding:.55rem .9rem}
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}