/* ============================================================
   DIDHub canonical site header CSS
   Single source of truth — edit ONLY this file.
   Linked from every HTML page after their inline <style> block,
   so these rules override the inline duplicates.
   ============================================================ */

.site-header{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(12px);
}

.site-header .nav{
  display:flex;
  align-items:center;
  padding:.85rem clamp(1rem,3vw,2rem);
  max-width:1240px;
  margin:0 auto;
  gap:1.4rem;
  flex-wrap:wrap;
}

.site-header .brand{
  display:flex;align-items:center;gap:.65rem;
  font-weight:700;color:var(--navy);
  font-size:1.15rem;letter-spacing:-.02em;
  text-decoration:none;
}
.site-header .brand svg{flex-shrink:0}

.site-header .nav-links{
  display:flex;
  flex:1;
  gap:1.6rem;
  align-items:center;
  flex-wrap:wrap;
}
.site-header .nav-links a{
  color:var(--text-muted);
  font-weight:500;
  font-size:.94rem;
  text-decoration:none;
}
.site-header .nav-links a:hover{color:var(--navy)}

/* Sign in + the CTA after it pin to the right edge with a clear gap
   from the rest of the nav (Contact ends, then ~3rem before Sign in). */
.site-header .nav-links a[aria-label="Sign in to DIDHub"]{
  margin-left:auto;
  padding-left:1.5rem;
}

.site-header .nav-cta,
.site-header .btn-primary{
  background:var(--emerald);
  color:#fff!important;
  padding:.6rem 1.15rem;
  border-radius:8px;
  font-weight:600;
  font-size:.94rem;
  border:1.5px solid transparent;
  text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  transition:all .15s;
}
.site-header .nav-cta:hover,
.site-header .btn-primary:hover{
  background:var(--emerald-dark);
  transform:translateY(-1px);
}

.site-header .menu-toggle{
  display:none;
  background:none;border:none;
  color:var(--navy);font-size:1.5rem;
  cursor:pointer;padding:.4rem;
}

@media (max-width:820px){
  .site-header .nav-links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:var(--surface);
    flex-direction:column;
    padding:1rem 1.5rem;gap:.9rem;
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow);
  }
  .site-header .nav-links.open{display:flex}
  .site-header .nav-links a,
  .site-header .nav-links .btn{width:100%;text-align:left}
  .site-header .nav-links a[aria-label="Sign in to DIDHub"]{margin-left:0}
  .site-header .menu-toggle{display:block}
}