/* ═══ EEINA · Mobile Navigation · _nav.css ═══
   Phase 1 pilot: hamburger + slide-in drawer + a11y.
   Pairs with content/_nav.js. Token names match content/_category.css (--olive, --cream, ...).
   See: docs/superpowers/specs/2026-05-25-mobile-nav-fix-design.md
*/

/* Menu button (drawer trigger) lives in .nav-actions — styled in
   _landing.css (.nav-menu-btn), shown below the 920px desktop break. */

/* Visually-hidden utility (for drawer title) */
.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* Body scroll-lock when drawer open */
html.nav-drawer-open{ overflow:hidden; }

/* Drawer wrapper — hidden by default. Toggled via .is-open class (more reliable than [aria-hidden] in some browsers) */
.nav-drawer{
  position:fixed;
  inset:0;
  z-index:1000;
  visibility:hidden;
  pointer-events:none;
  /* Clip the off-screen panel (left:-360px). As a position:fixed element the
     drawer escapes html{overflow-x:clip}, so without this its off-screen panel
     extends the document's scroll width and causes phantom horizontal scroll on
     every page. Clipping here is safe: when open the panel sits at left:0 fully
     inside the viewport, and the slide-in still shows (entering part is x≥0). */
  overflow:hidden;
}
.nav-drawer.is-open{
  visibility:visible;
  pointer-events:auto;
}

/* Scrim (backdrop) */
.nav-drawer-scrim{
  position:absolute;
  inset:0;
  background:rgba(28,28,30,0);
  transition:background 240ms cubic-bezier(0.32,0.72,0,1);
}
/* Open-state visual changes (background fade · panel slide) applied inline via _nav.js.
   We keep this rule as documentation; JS overrides take precedence regardless. */
.nav-drawer.is-open .nav-drawer-scrim{
  background:rgba(28,28,30,0.4);
}

/* Drawer panel — slides in from the logical START side.
   Uses logical `inset-inline-start` for positioning and sliding.
*/
.nav-drawer-panel{
  position:absolute;
  top:0;
  bottom:0;
  inset-inline-start:-360px;
  inset-inline-end:auto;
  width:min(88vw,360px);
  height:100vh;
  background:var(--white);
  box-shadow:4px 0 24px rgba(28,28,30,0.08);
  display:flex;
  flex-direction:column;
  transition:inset-inline-start 240ms cubic-bezier(0.32,0.72,0,1);
}
.nav-drawer.is-open .nav-drawer-panel{
  inset-inline-start:0;
}

/* Drawer header */
.nav-drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-block-end:1px solid var(--border);
  gap:16px;
}
.nav-drawer-close{
  width:44px; height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  border-radius:8px;
  color:var(--text);
  cursor:pointer;
  transition:background 150ms var(--ease);
}
.nav-drawer-close:hover,
.nav-drawer-close:focus-visible{ background:var(--bg-soft); outline:none; }
.nav-drawer-close:focus-visible{ box-shadow:0 0 0 2px var(--olive); }
.nav-drawer-close svg{ width:22px; height:22px; }
.nav-drawer-logo img{ height:32px; width:auto; display:block; }

/* Drawer nav links */
.nav-drawer-nav{
  flex:1;
  overflow-y:auto;
  padding:16px 22px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.nav-drawer-nav > a,
.nav-drawer-nav summary{
  display:block;
  padding:14px 8px;
  color:var(--text);
  font-family:'IBM Plex Sans Arabic',sans-serif;
  font-size:17px;
  line-height:1.8;
  font-weight:500;
  text-decoration:none;
  border-radius:8px;
  cursor:pointer;
  list-style:none;
  transition:color 140ms var(--ease), background 140ms var(--ease);
}
.nav-drawer-nav summary::-webkit-details-marker{ display:none; }
.nav-drawer-nav > a:hover,
.nav-drawer-nav summary:hover,
.nav-drawer-nav > a:focus-visible,
.nav-drawer-nav summary:focus-visible{
  color:var(--olive-darker);
  background:var(--olive-tint);
  outline:none;
}

/* Recipes sub-menu (details/summary accordion) */
.nav-drawer-recipes summary{
  position:relative;
  padding-inline-end:32px;
}
.nav-drawer-recipes summary::after{
  content:'';
  position:absolute;
  inset-inline-end:14px;
  top:50%;
  width:7px;
  height:7px;
  border-inline-end:2px solid currentColor;
  border-block-end:2px solid currentColor;
  transform:translateY(-65%) rotate(45deg);
  transition:transform 220ms var(--ease);
}
.nav-drawer-recipes[open] summary::after{
  transform:translateY(-20%) rotate(-135deg);
}
.nav-drawer-recipes ul{
  list-style:none;
  margin:0;
  padding:4px 0 8px 0;
}
.nav-drawer-recipes li a{
  display:block;
  padding:10px 8px 10px 24px;
  color:var(--text-soft);
  font-family:'IBM Plex Sans Arabic',sans-serif;
  font-size:15px;
  line-height:1.7;
  text-decoration:none;
  border-radius:6px;
  transition:color 140ms var(--ease), background 140ms var(--ease);
}
.nav-drawer-recipes li a:hover,
.nav-drawer-recipes li a:focus-visible{
  color:var(--olive-darker);
  background:var(--olive-tint);
  outline:none;
}

/* Drawer CTA */
.nav-drawer-cta{
  display:block;
  margin:8px 22px 22px;
  padding:14px 20px;
  background:var(--olive-dark);
  color:var(--white);
  text-align:center;
  font-family:'IBM Plex Sans Arabic',sans-serif;
  font-size:15.5px;
  font-weight:600;
  text-decoration:none;
  border-radius:10px;
  transition:background 180ms var(--ease);
}
.nav-drawer-cta:hover,
.nav-drawer-cta:focus-visible{
  background:var(--olive-darker);
  outline:none;
}

/* === Mobile breakpoint === */
@media (max-width: 768px){
  .nav-inner{ padding:10px 16px; }
}

/* On desktop the full nav-links show (≥920px) and the drawer is never
   needed, so keep it fully hidden. Below 920px the menu button is the
   single navigation entry point and the drawer must stay available. */
@media (min-width: 920px){
  .nav-drawer{ display:none !important; }
}