/* ──────────────────────────────────────────────────────────────
   Hairmony shared top bar (site-nav)
   Single source of truth for the nav + mobile slide-in menu.
   Markup is injected by /assets/js/site-nav.js into #site-nav-root.
   Token fallbacks are baked in so the bar styles correctly even on
   pages that don't define every design token (e.g. legal pages).
   ────────────────────────────────────────────────────────────── */

nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.3s, backdrop-filter 0.3s, box-shadow 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
nav.site-nav .nav-inner {
  max-width: var(--container, 1140px);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px;
}
nav.site-nav.scrolled {
  background: rgba(225,233,239,0.85);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--divider, #E5EAEE);
}

.nav-brand { display: flex; align-items: center; gap: 11px; }
/* Rounded-square app icon — defined here (not per-page) so every page gets it. */
.nav-brand img { width: 38px; height: 38px; border-radius: 22%; }
.nav-brand span {
  font-family: var(--font-head, 'Sour Gummy', cursive);
  font-weight: 500; font-size: 1.4rem;
  color: var(--primary, #7B5191);
}

.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-link {
  font-size: 0.92rem; font-weight: 600;
  color: var(--med, #5A739E);
  transition: color 0.2s;
}
.nav-link:hover, .nav-link.active { color: var(--dark, #2D4264); }

.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary, #7B5191);
  color: var(--white, #FFFFFF);
  font-weight: 700; font-size: 0.92rem;
  padding: 10px 20px; border-radius: 50px;
  box-shadow: 0 4px 14px rgba(123,81,145,0.25);
  transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s;
}
.nav-cta:hover {
  background: var(--primary-dark, #6A4480);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(123,81,145,0.32);
}

/* ── Mobile hamburger + slide-in menu ── */
.nav-burger {
  display: none; /* shown ≤960 */
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin: -6px 0 -6px -10px;
  border: none; background: transparent;
  color: var(--dark, #2D4264); cursor: pointer;
  border-radius: 12px;
  transition: background 0.2s;
}
.nav-burger:hover { background: rgba(45,66,100,0.06); }
.nav-burger svg { width: 26px; height: 26px; display: block; }

.mobile-menu { position: fixed; inset: 0; z-index: 200; }
.mobile-menu[hidden] { display: none; }
.mobile-menu-backdrop {
  position: absolute; inset: 0;
  background: rgba(45,66,100,0.42);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.3s ease;
}
.mobile-menu-panel {
  position: absolute; top: 0; left: 0;
  width: min(84vw, 360px); height: 100%;
  background: var(--bg, #E1E9EF);
  box-shadow: 16px 0 44px rgba(45,66,100,0.20);
  display: flex; flex-direction: column;
  padding: 16px 24px calc(26px + env(safe-area-inset-bottom));
  transform: translateX(-100%);
  transition: transform 0.34s cubic-bezier(0.22,1,0.36,1);
  overflow-y: auto;
}
.mobile-menu.open .mobile-menu-backdrop { opacity: 1; }
.mobile-menu.open .mobile-menu-panel { transform: translateX(0); }

.mobile-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0 4px;
}
.mobile-menu-head span {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-head, 'Sour Gummy', cursive);
  font-weight: 500; font-size: 1.15rem;
  color: var(--primary, #7B5191);
}
.mobile-menu-head span img { width: 28px; height: 28px; border-radius: 22%; }
.mobile-menu-close {
  width: 40px; height: 40px; margin-right: -8px;
  border: none; background: transparent;
  color: var(--dark, #2D4264); cursor: pointer; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.mobile-menu-close:hover { background: rgba(45,66,100,0.06); }
.mobile-menu-close:focus, .mobile-menu-close:focus-visible { outline: none; }
.mobile-menu-close svg { width: 24px; height: 24px; display: block; }

.mobile-menu-cta {
  display: block; text-align: center;
  background: var(--primary, #7B5191);
  color: var(--white, #FFFFFF);
  font-weight: 700; font-size: 1rem;
  padding: 14px 20px; border-radius: 50px;
  margin: 14px 0 4px;
  box-shadow: 0 4px 14px rgba(123,81,145,0.25);
  transition: transform 0.18s ease, background 0.2s;
}
.mobile-menu-cta:hover { background: var(--primary-dark, #6A4480); transform: translateY(-1px); }

.mobile-menu-links { display: flex; flex-direction: column; margin-top: 6px; }
.mobile-menu-links a {
  font-size: 1.08rem; font-weight: 600;
  color: var(--dark, #2D4264);
  padding: 15px 2px;
  border-bottom: 1px solid var(--divider, #E5EAEE);
  transition: color 0.2s;
}
.mobile-menu-links a:hover { color: var(--primary, #7B5191); }

.mobile-menu-stores {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 28px;
}
/* Self-contained badge styling so the menu renders correctly even on
   pages that don't otherwise define .store-badge. */
.mobile-menu-stores .store-badge { display: block; transition: transform 0.18s ease; }
.mobile-menu-stores .store-badge:hover { transform: translateY(-2px); }
.mobile-menu-stores .store-badge img { height: 52px; width: auto; display: block; }

@media (max-width: 960px) {
  /* burger left · brand beside it · CTA pill alone on the right edge */
  nav.site-nav .nav-inner { padding: 12px 20px; gap: 10px; }
  nav.site-nav .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-brand { margin-right: auto; }
}
@media (max-width: 600px) {
  nav.site-nav .nav-inner { padding: 12px 18px; }
  .nav-brand { gap: 8px; }
  .nav-brand img { width: 33px; height: 33px; }
  .nav-brand span { font-size: 1.22rem; }
  nav.site-nav .nav-cta { padding: 9px 15px; font-size: 0.82rem; }
}
@media (max-width: 374px) {
  .nav-brand span { display: none; } /* logo mark only — the CTA pill stays */
}