/* =============================================================
   Shared site header — one implementation for every public page.
   Replaces the homepage's bespoke fixed nav, the service pages'
   .topbar, and Nova's .page-top.

   Everything is namespaced under .snav so it cannot collide with
   the per-page styles that already exist (index.html defines a
   bare `nav{}` rule, for instance).
   ============================================================= */

:root{--snav-h:60px}
@media(max-width:900px){:root{--snav-h:54px}}

.snav{
  position:sticky; top:0; z-index:300;
  background:rgba(4,4,10,.72);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(0,245,195,.12);
}
.snav-inner{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; gap:1.5rem;
  padding:.95rem 2rem;
  /* Fixed height so pages can reserve space with var(--snav-h). */
  min-height:calc(var(--snav-h) - 1px); box-sizing:border-box;
}

/* ---- Logo -------------------------------------------------- */
.snav-logo{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.12rem;
  color:#eeeef5; text-decoration:none; letter-spacing:-.02em; white-space:nowrap;
}
.snav-logo em{color:#00f5c3; font-style:normal}

/* ---- Menu -------------------------------------------------- */
.snav-menu{margin-left:auto; display:flex; align-items:center; gap:2rem}
.snav-list{display:flex; align-items:center; gap:1.9rem; list-style:none; margin:0; padding:0}
.snav-list > li{position:relative}
.snav-list > li > a{
  color:#8a8aa3; text-decoration:none;
  font-size:.78rem; letter-spacing:.09em; text-transform:uppercase;
  transition:color .2s; white-space:nowrap;
}
.snav-list > li > a:hover,
.snav-list > li > a[aria-current="page"]{color:#00f5c3}
.snav-here > a{color:#00f5c3}

/* ---- Services submenu -------------------------------------- */
.snav-caret{
  background:none; border:none; color:inherit; font-size:.7rem;
  padding:0 0 0 .3rem; line-height:1; cursor:pointer;
}
.snav-sub{
  display:none; position:absolute; top:calc(100% + .75rem); left:0;
  min-width:210px; list-style:none; margin:0; padding:.4rem 0;
  background:#0a0a14; border:1px solid rgba(0,245,195,.18);
  border-radius:4px; box-shadow:0 12px 40px rgba(0,0,0,.55);
}
/* A hover bridge, so moving the pointer into the submenu does not close it. */
.snav-has-sub::after{content:''; position:absolute; top:100%; left:0; right:0; height:.75rem}
.snav-has-sub:hover .snav-sub, .snav-sub:hover, .snav-has-sub.open .snav-sub{display:block}
.snav-sub a{
  display:block; padding:.6rem 1.1rem; color:#8a8aa3; text-decoration:none;
  font-size:.8rem; letter-spacing:.02em; white-space:nowrap; transition:background .15s,color .15s;
}
.snav-sub a:hover, .snav-sub a[aria-current="page"]{background:rgba(0,245,195,.08); color:#00f5c3}

/* ---- Language toggle --------------------------------------- */
.snav-lang{
  display:flex; gap:.2rem; background:rgba(255,255,255,.04);
  border:1px solid rgba(0,245,195,.15); border-radius:100px; padding:.2rem;
}
.snav-lang-btn{
  background:transparent; border:none; color:#8a8aa3;
  padding:.3rem .8rem; border-radius:100px; cursor:pointer;
  font-family:inherit; font-size:.75rem; font-weight:600; transition:all .2s;
}
.snav-lang-btn.active{background:#00f5c3; color:#04040a}

/* ---- Hamburger --------------------------------------------- */
.snav-burger{
  display:none; margin-left:auto;
  background:none; border:1px solid rgba(0,245,195,.2); border-radius:4px;
  padding:.55rem .6rem; cursor:pointer;
}
.snav-burger span{
  display:block; width:19px; height:2px; background:#00f5c3; border-radius:2px;
  transition:transform .25s, opacity .2s;
}
.snav-burger span + span{margin-top:4px}
.snav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.snav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.snav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---- RTL --------------------------------------------------- */
[dir=rtl] .snav-menu{margin-left:0; margin-right:auto}
[dir=rtl] .snav-sub{left:auto; right:0; text-align:right}
[dir=rtl] .snav-burger{margin-left:0; margin-right:auto}
[dir=rtl] .snav-caret{padding:0 .3rem 0 0}

/* =============================================================
   Mobile — below 900px the desktop nav previously just vanished
   (.nav-links{display:none}) with nothing replacing it, leaving
   phones with no navigation at all. This is the replacement.
   ============================================================= */
@media(max-width:900px){
  .snav-inner{padding:.8rem 1.2rem; gap:1rem}
  .snav-burger{display:block}

  .snav-menu{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#06060e; border-bottom:1px solid rgba(0,245,195,.15);
    padding:.5rem 1.2rem 1.2rem; max-height:calc(100vh - 60px); overflow-y:auto;
  }
  .snav-menu.open{display:flex}

  .snav-list{flex-direction:column; align-items:stretch; gap:0}
  .snav-list > li{border-bottom:1px solid rgba(255,255,255,.06)}
  .snav-list > li > a{display:block; padding:.95rem .2rem; font-size:.85rem}

  /* Submenu expands inline rather than floating. */
  .snav-has-sub{display:grid; grid-template-columns:1fr auto}
  .snav-has-sub > a{grid-column:1}
  .snav-caret{
    grid-column:2; align-self:center; padding:.6rem .5rem;
    font-size:.9rem; transition:transform .2s;
  }
  .snav-has-sub.open .snav-caret{transform:rotate(180deg)}
  .snav-has-sub::after{content:none}
  .snav-sub{
    display:none; position:static; grid-column:1 / -1;
    border:none; box-shadow:none; background:transparent;
    padding:0 0 .6rem .8rem;
  }
  [dir=rtl] .snav-sub{padding:0 .8rem .6rem 0}
  .snav-has-sub.open .snav-sub{display:block}
  .snav-sub a{padding:.6rem .3rem; font-size:.82rem}

  .snav-lang{align-self:flex-start; margin-top:1rem}
  [dir=rtl] .snav-lang{align-self:flex-end}
}

/* Respect a reduced-motion preference for the burger animation. */
@media(prefers-reduced-motion:reduce){
  .snav-burger span, .snav-caret{transition:none}
}