/* Ported from the prototype's nav.css — kept in the 'legacy' cascade layer so Tailwind utilities can override it. */
@layer legacy {
/* =========================================================
   الأترجة — site navbar (markup comes from nav.js)
   A floating cream pill: thin border, very soft shadow, a
   light blur. It stays put while the page scrolls.

   The header sits first in <body>, outside every section, so
   no section's stacking context can cover it. It takes no
   height; the section after it makes room for the bar.
   ========================================================= */

.site-nav{
  --snav-h:62px;
  position:relative;
  z-index:80;
  height:0;
}
/* Nuxt: the page renders inside its own root element, so the hero is a child of the navbar's sibling */
.site-nav ~ .hero, .site-nav ~ * > .hero:first-child,
.site-nav ~ .lh, .site-nav ~ * > .lh:first-child{ padding-top:90px; }

.snav{
  position:fixed;
  top:14px; left:50%;
  width:min(1240px, calc(100% - 32px));
  height:var(--snav-h);
  transform:translateX(-50%);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:22px;   /* logo · links centred · actions */
  padding-inline:8px;                /* even, so the middle column sits on the true centre */
  border-radius:99px;
  color:var(--u-forest);
  background:rgba(250,246,237,.78);
  border:1px solid rgba(18,60,53,.09);
  box-shadow:0 12px 30px -22px rgba(18,60,53,.45);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
          backdrop-filter:blur(16px) saturate(1.15);
  font-family:"IBM Plex Sans Arabic", system-ui, sans-serif;
  transition:top .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
  animation:snav-in .8s var(--ease) both;
}
.snav.is-scrolled{
  top:10px;
  background:rgba(250,246,237,.92);
  box-shadow:0 16px 34px -22px rgba(18,60,53,.55);
}
@keyframes snav-in{ from{ opacity:0; transform:translate(-50%, -12px); } }

.snav-brand{ flex:none; gap:10px; justify-self:start; margin-inline-start:10px; }
.snav-brand .brand-mark{ width:36px; height:36px; border-radius:11px; box-shadow:0 6px 16px -10px rgba(176,143,62,.9); }
.snav-brand .brand-mark svg{ width:21px; height:21px; }
.snav-brand .brand-text{ font-size:20px; color:var(--u-forest); }
.snav-brand .brand-logo{ height:42px; }

/* ---- links ---- */
.snav-links{ display:flex; align-items:center; gap:2px; }
.snav-links > a,
.snav-drop-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:40px; padding:0 14px;
  border:0; border-radius:99px;
  background:none;
  font:inherit; font-size:15px; font-weight:500;
  color:#4A5B54;
  cursor:pointer;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.snav-links > a:hover,
.snav-drop-btn:hover,
.snav-drop.is-open .snav-drop-btn{ color:var(--u-forest); background:rgba(18,60,53,.06); }
.snav-links > a.is-active,
.snav-drop-btn.is-active{ color:var(--u-forest); background:rgba(212,175,90,.18); font-weight:600; }
.snav-links > .snav-login-m{ display:none; }
.snav-drop-btn svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.snav-drop.is-open .snav-drop-btn svg{ transform:rotate(180deg); }

/* ---- the explore dropdown ---- */
.snav-drop{ position:relative; }
.snav-menu{
  position:absolute;
  top:calc(100% + 14px); right:-8px;
  width:330px;
  padding:8px;
  border-radius:22px;
  background:#FBF8F1;
  border:1px solid rgba(18,60,53,.09);
  box-shadow:0 26px 50px -28px rgba(18,60,53,.5);
  opacity:0; visibility:hidden;
  transform:translateY(-6px) scale(.985);
  transform-origin:top right;
  transition:opacity .25s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
/* a bridge across the gap so the pointer can travel to the menu */
.snav-menu::before{ content:""; position:absolute; inset:-16px 0 auto; height:16px; }
.snav-drop.is-open .snav-menu{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .25s var(--ease), transform .3s var(--ease), visibility 0s;
}
.snav-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  border-radius:14px;
  transition:background .2s var(--ease);
}
.snav-item:hover, .snav-item:focus-visible{ background:rgba(18,60,53,.05); outline:none; }
.snav-item.is-active{ background:rgba(212,175,90,.16); }
.snav-item.is-active .snav-item-ico{ background:#EBDDB5; }
.snav-item-ico{
  width:38px; height:38px; flex:none;
  border-radius:11px;
  display:grid; place-items:center;
  color:var(--u-forest);
  background:var(--atmo-halaqat);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.snav-item:hover .snav-item-ico{ color:var(--u-forest); background:#EBDDB5; }
.snav-item-ico svg{ width:19px; height:19px; }
.snav-item b{ display:block; font-size:15px; font-weight:600; color:var(--u-forest); }
.snav-item small{ display:block; font-size:12.5px; color:#7B8983; margin-top:1px; }

/* ---- actions ---- */
.snav-actions{ display:flex; align-items:center; gap:6px; justify-self:end; }
.snav-login{
  height:40px; padding:0 14px;
  display:inline-flex; align-items:center;
  border-radius:99px;
  font-size:15px; font-weight:500;
  color:#4A5B54;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.snav-login:hover{ color:var(--u-forest); background:rgba(18,60,53,.06); }
.snav-cta{
  height:46px; padding:0 22px;
  display:inline-flex; align-items:center;
  border-radius:99px;
  font-size:15px; font-weight:600;
  color:var(--u-ivory);
  background:var(--u-forest);
  box-shadow:0 10px 22px -14px rgba(18,60,53,.9);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.snav-cta:hover{ background:#0E322C; transform:translateY(-1px); }

.snav a:focus-visible, .snav button:focus-visible{ outline:2px solid var(--u-gold); outline-offset:2px; }

.snav-toggle{
  display:none;
  width:44px; height:44px; padding:0;
  border:0; border-radius:50%;
  background:rgba(18,60,53,.07);
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.snav-toggle span{ display:block; width:17px; height:1.8px; border-radius:2px; background:var(--u-forest); transition:transform .3s var(--ease); }
.snav.is-menu .snav-toggle span:first-child{ transform:translateY(3.4px) rotate(45deg); }
.snav.is-menu .snav-toggle span:last-child{ transform:translateY(-3.4px) rotate(-45deg); }

/* ---- compact: links fold into a panel ---- */
@media (max-width:940px){
  .site-nav{ --snav-h:58px; }
  .site-nav ~ .hero, .site-nav ~ * > .hero:first-child,
  .site-nav ~ .lh, .site-nav ~ * > .lh:first-child{ padding-top:84px; }
  .snav{ display:flex; gap:10px; padding-inline:12px 7px; }
  .snav-brand{ margin-inline-start:0; }
  .snav-actions{ margin-inline-start:auto; }
  .snav-toggle{ display:flex; }
  .snav-login{ display:none; }
  .snav-cta{ height:44px; padding:0 18px; }

  .snav-links{
    position:absolute;
    top:calc(100% + 10px); right:0; left:0;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:10px;
    border-radius:24px;
    background:#FBF8F1;
    border:1px solid rgba(18,60,53,.09);
    box-shadow:0 26px 50px -28px rgba(18,60,53,.5);
    opacity:0; visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .25s var(--ease), transform .3s var(--ease), visibility 0s .3s;
    max-height:calc(100svh - 110px);
    overflow-y:auto;
  }
  .snav.is-menu .snav-links{ opacity:1; visibility:visible; transform:none; transition:opacity .25s var(--ease), transform .3s var(--ease), visibility 0s; }
  .snav-links > a, .snav-drop-btn{ width:100%; height:48px; justify-content:space-between; font-size:16px; }
  .snav-links > a{ order:1; }
  .snav-drop{ order:2; }
  /* Nuxt: the routes, not the prototype file names */
  .snav-links > a[href="/how"]{ order:3; }
  .snav-links > a[href="/contact"]{ order:4; }
  .snav-links > .snav-login-m{ display:flex; order:5; margin-top:6px; border-top:1px solid rgba(18,60,53,.08); border-radius:0 0 14px 14px; color:var(--u-forest); font-weight:600; }
  .snav-menu{
    position:static; width:auto;
    padding:0 4px;
    border:0; box-shadow:none; background:none;
    opacity:1; visibility:visible; transform:none;
    display:none;
  }
  .snav-drop.is-open .snav-menu{ display:block; }
  .snav-menu::before{ display:none; }
}

@media (max-width:420px){
  .snav-brand .brand-text{ font-size:18px; }
  .snav-brand .brand-logo{ height:36px; }
  .snav-cta{ padding:0 14px; font-size:14px; }
}

@media (prefers-reduced-motion:reduce){
  .snav, .snav-menu, .snav-links{ animation:none; transition:none; }
}

}