/* =========================================================
   Site menu for jome.gg (drawn by /shared/site-nav.js from SITE.nav in /site-data.js)
   Desktop: links top right. Phones (under 720px): a menu button top right that slides a panel in from the right.
   ========================================================= */
.snav { position: relative; z-index: 40; max-width: 1180px; margin: 0 auto; padding: 16px 18px 0;
  display: flex; align-items: center; gap: 12px; }
.snav.home { position: absolute; top: 0; left: 0; right: 0; justify-content: flex-end; pointer-events: none; }
.snav.home > * { pointer-events: auto; }

.snav-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); margin-right: auto; }
.snav-brand img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--sky);
  border: 3px solid var(--navy); box-shadow: 0 0 0 2px var(--white), 0 6px 14px -4px rgba(10,36,102,.35); }
.snav-brand span { font: 400 22px var(--font-display); letter-spacing: .3px; }

/* Desktop links: one chunky pill group */
.snav-links { display: flex; gap: 4px; padding: 4px; background: var(--white); border: var(--line) solid var(--navy); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--navy), 4px 7px 12px -4px rgba(10,36,102,.22); }
.snav-links a { text-decoration: none; color: var(--navy); font: 400 18px var(--font-display); letter-spacing: .3px;
  padding: 6px 16px; border-radius: 999px; transition: background .15s, color .15s; }
.snav-links a:hover { background: var(--sky); }
.snav-links a[aria-current="page"] { background: var(--navy); color: var(--white); }

.snav-social { display: flex; gap: 6px; }
.snav-social a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: var(--white);
  border: var(--line) solid var(--navy); box-shadow: 3px 3px 0 var(--navy); transition: transform .15s; }
.snav-social a:hover { transform: translateY(-2px); }
.snav-social svg { width: 16px; height: 16px; fill: var(--navy); }

/* Phone menu button */
.snav-burger { display: none; width: 46px; height: 46px; border-radius: 14px; background: var(--white); color: var(--navy); cursor: pointer;
  border: var(--line) solid var(--navy); box-shadow: 3px 3px 0 var(--navy), 4px 7px 12px -4px rgba(10,36,102,.22); place-items: center; padding: 0; }
.snav-burger svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 3; stroke-linecap: round; fill: none; }
.snav-burger:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--navy); }

@media (max-width: 719px) {
  .snav { padding: 14px 16px 0; }
  .snav-links, .snav-social { display: none; }
  .snav-burger { display: grid; margin-left: auto; }
  .snav-brand img { width: 36px; height: 36px; }
  .snav-brand span { font-size: 20px; }
}

/* Slide-in panel */
.snav-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(10,36,102,.35); opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility 0s .25s; }
.snav-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(86vw, 340px); background: var(--sky-soft);
  border-left: var(--line) solid var(--navy); box-shadow: -10px 0 40px rgba(10,36,102,.25); transform: translateX(105%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s; visibility: hidden;
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px max(20px, env(safe-area-inset-bottom)); }
html.snav-open .snav-scrim { opacity: 1; visibility: visible; transition: opacity .25s; }
html.snav-open .snav-drawer { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
html.snav-open, html.snav-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .snav-drawer, .snav-scrim { transition: none !important; } }

.snav-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.snav-head .snav-brand { margin-right: auto; }
.snav-close { width: 42px; height: 42px; border-radius: 12px; background: var(--white); border: var(--line) solid var(--navy); color: var(--navy);
  box-shadow: 3px 3px 0 var(--navy); cursor: pointer; display: grid; place-items: center; padding: 0; }
.snav-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }

.snav-eyebrow { font: 900 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 18px 4px 8px; }
.snav-list { display: grid; gap: 10px; }
.snav-item { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); background: var(--white);
  border: var(--line) solid var(--navy); border-radius: 16px; padding: 12px 14px; box-shadow: 3px 3px 0 var(--navy); }
.snav-item:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--navy); }
.snav-item b { font: 400 22px/1.05 var(--font-display); letter-spacing: .3px; display: block; }
.snav-item small { display: block; font: 800 12px var(--font-body); color: var(--muted); margin-top: 2px; }
.snav-item .txt { flex: 1; min-width: 0; }
.snav-item .chev { width: 18px; height: 18px; stroke: var(--navy); stroke-width: 3; fill: none; flex-shrink: 0; }
.snav-item[aria-current="page"] { background: var(--navy); color: var(--white); }
.snav-item[aria-current="page"] small { color: var(--sky); }
.snav-item[aria-current="page"] .chev { stroke: var(--white); }
.snav-dot { width: 9px; height: 9px; border-radius: 50%; background: #2DBE6C; box-shadow: 0 0 0 3px rgba(45,190,108,.25); flex-shrink: 0; }
.snav-subs { display: grid; gap: 2px; margin: -2px 0 2px 18px; padding-left: 12px; border-left: 3px solid var(--sky); }
.snav-subs a { text-decoration: none; color: var(--navy); font: 800 15px var(--font-body); padding: 8px 6px; border-radius: 10px; }
.snav-subs a:hover { background: var(--sky); }
.snav-soon { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-radius: 14px;
  border: 2px dashed rgba(10,36,102,.35); color: var(--muted); font: 400 19px var(--font-display); letter-spacing: .3px; }
.snav-soon span { font: 900 10px var(--font-body); letter-spacing: .08em; text-transform: uppercase; background: var(--sky); color: var(--navy);
  border-radius: 999px; padding: 3px 9px; }
.snav-foot { margin-top: auto; padding-top: 22px; display: grid; gap: 14px; }
.snav-merch { text-decoration: none; text-align: center; font: 400 19px var(--font-display); letter-spacing: .3px; color: var(--white);
  background: var(--navy); border: var(--line) solid var(--navy); border-radius: 14px; padding: 11px 14px; box-shadow: 0 0 0 2px var(--white), 3px 3px 0 2px var(--navy); }
.snav-foot .snav-social { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.snav :focus-visible, .snav-drawer :focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }