/* ═══════════════════════════════════════════════
   PetPort — Shared Header (ALL public pages)
   Fixed: 60px height, ALWAYS visible at top
   Import this in every public page
   ═══════════════════════════════════════════════ */
.nav{
  position:fixed!important;top:0!important;left:0!important;right:0!important;
  z-index:1000!important;
  height:60px!important;min-height:60px!important;max-height:60px!important;
  background:var(--surf, rgba(15,23,42,.60))!important;
  backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;
  border-bottom:1px solid var(--bd, rgba(148,163,184,.06))!important;
  transition:box-shadow .3s!important;
  transform:none!important;
}
.nav.sc{box-shadow:0 4px 30px rgba(0,0,0,.12)}
/* Pages with content directly below nav add this div: <div class="nav-spacer"></div> */
.nav-spacer{height:60px}

.nav-in{
  max-width:1200px;margin:0 auto;padding:0 24px;
  height:60px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-logo{
  display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;
}
.nav-logo img{width:36px;height:36px;border-radius:10px}
.nav-logo span{
  font-family:'Arial Rounded MT Bold','Nunito',sans-serif;
  font-weight:800;font-size:20px;color:var(--teal, #0D9488);
}
.nav-r,.nav-links{
  display:flex;align-items:center;gap:20px;
}
.nav-r a,.nav-links a{
  color:var(--t2, #94A3B8);font-size:14px;font-weight:500;
  text-decoration:none;transition:color .2s;white-space:nowrap;
}
.nav-r a:hover,.nav-links a:hover{color:var(--teal, #0D9488)}
.nav-r a.active,.nav-links a.active{color:var(--teal, #0D9488);font-weight:700}
.nav-badge{
  font-size:10px;font-weight:800;color:var(--tl, #14B8A6);
  padding:2px 10px;border:1px solid rgba(13,148,136,.2);border-radius:99px;
  text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;
}
.nav-cta{
  background:var(--teal, #0D9488)!important;color:#fff!important;
  padding:9px 20px!important;border-radius:10px!important;
  font-weight:600!important;font-size:13px!important;
  transition:all .2s!important;white-space:nowrap;
}
.nav-cta:hover{background:var(--td, #0F766E)!important;transform:translateY(-1px)}
.nav-th{
  background:none;border:1px solid var(--bd, rgba(148,163,184,.08));
  width:36px;height:36px;border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  transition:all .2s;flex-shrink:0;color:var(--t2, #94A3B8);
}
.nav-th:hover{background:rgba(13,148,136,.06);border-color:rgba(13,148,136,.15)}

/* Mobile: hide text links, keep CTA + theme toggle */
@media(max-width:640px){
  .nav-in{padding:0 14px}
  .nav-r a:not(.nav-cta):not(.nav-th-wrap),.nav-links a:not(.nav-cta):not(.nav-th-wrap){display:none}
  .nav-badge{display:none}
  .nav-cta{padding:8px 16px!important;font-size:12px!important}
}