/* Somatro public-site shared navigation — canonical destinations: Home, Activate,
   Manage playlists, Support, Download. Loaded by every customer-facing page
   (Homepage, Activate, Support, Download, Playlists). Not used by Admin. */

.sa-nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); font: var(--weight-medium) 14px/1 var(--font-ui); white-space: nowrap; }
.sa-nav-links a, .sa-nav-links .sa-nav-current { display: inline-flex; align-items: center; height: 44px; color: var(--text-secondary); }
.sa-nav-links a:hover { color: var(--text-strong); }
.sa-nav-links .sa-nav-current { color: var(--sa-cyan-300); }
.sa-nav-links a.sa-nav-cta, .sa-nav-mobile-panel a.sa-nav-cta, .sa-nav-cta { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 12px; background: var(--accent-primary); color: var(--text-on-accent); font-weight: var(--weight-semibold); }
.sa-nav-links a.sa-nav-cta:hover, .sa-nav-mobile-panel a.sa-nav-cta:hover, .sa-nav-cta:hover { color: var(--text-on-accent); filter: brightness(1.06); }
.sa-nav-links a.sa-nav-cta.sa-nav-current, .sa-nav-cta.sa-nav-current { background: var(--surface-selected); color: var(--sa-cyan-300); border: 1px solid var(--accent-focus); height: 36px; }

.sa-nav-mobile { position: relative; display: none; }
.sa-nav-mobile > summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; cursor: pointer; color: var(--text-secondary); }
.sa-nav-mobile > summary::-webkit-details-marker { display: none; }
.sa-nav-mobile > summary::marker { content: ""; }
.sa-nav-mobile[open] > summary { color: var(--sa-cyan-300); background: var(--surface-selected); }
.sa-nav-mobile-panel { display: flex; flex-direction: column; gap: 2px; position: absolute; top: calc(100% + 10px); right: 0; min-width: 220px; padding: 10px; border-radius: 14px; background: rgba(8,10,18,.97); backdrop-filter: blur(var(--blur-panel)); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-dialog); z-index: 80; }
.sa-nav-mobile-panel a, .sa-nav-mobile-panel .sa-nav-current-item { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; font: var(--weight-medium) 15px/1 var(--font-ui); color: var(--text-secondary); }
.sa-nav-mobile-panel a:hover { background: var(--surface-2); color: var(--text-strong); }
.sa-nav-mobile-panel .sa-nav-current-item { color: var(--sa-cyan-300); }

@media (max-width: 860px) {
  .sa-nav-links { display: none; }
  .sa-nav-mobile { display: block; }
}