/*
 * NeuroNest deep-dive page floating nav pill.
 *
 * Shared by sleep-page.html, focus-page.html, calm-page.html,
 * adhd-page.html. learn-more.html intentionally uses its own nav
 * (theme-toggle padding, light-mode glassmorphism).
 *
 * Each consuming page needs to:
 *   1. <link rel="stylesheet" href="assets/site-nav.css"> after tokens.css
 *   2. Declare its own .site-nav a.active { color: var(--accent); } in its
 *      local <style> so the active link picks up the page's brand colour.
 *   3. Optionally override .site-nav { background: …; } if its mood needs
 *      a different tint (only adhd-page does this today).
 */

.site-nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(8, 10, 15, 0.85);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 20px;
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  white-space: nowrap;
  box-shadow:
    0 0 0 1px rgba(244, 63, 68, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.45);
}

.site-nav::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  padding: 1px;
  background: linear-gradient(90deg, #f43f5e, #a855f7, #6366f1, #06b6d4, #f43f5e);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: navBorderShift 6s linear infinite;
  pointer-events: none;
  opacity: 0.6;
}

@keyframes navBorderShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.site-nav .brand {
  font-family: var(--b-font);
  font-size: 1.275rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(155deg, #ffffff 0%, #f4f1ec 45%, #cbc7bf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-right: 24px;
  text-decoration: none;
}

/* Marble lockup: both lines share the white gradient (premium, low-colour);
   AUSTRALIA is stretched to NEURONEST's width (letter-justified) so the two
   lines align edge-to-edge. */
.site-nav .brand span { -webkit-text-fill-color: transparent !important; color: transparent !important; }
.site-nav .brand span:last-child {
  display: block;
  align-self: stretch;
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-character;
}

.site-nav a {
  color: var(--text-1);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 18px;
  transition: color 0.22s;
}

.site-nav a:hover { color: var(--text-0); }

@media (max-width: 900px) {
  /* Let the pill wrap its links and stay inside the viewport. The brand is
     hidden here — note consuming pages set an inline `display:flex` on .brand,
     so `display:none` MUST be !important to win over the inline style. */
  .site-nav {
    width: calc(100% - 20px);
    max-width: calc(100vw - 20px);
    border-radius: 14px;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2px;
    padding: 8px 12px;
    box-sizing: border-box;
  }
  .site-nav .brand { display: none !important; margin-right: 0; }
  .site-nav a { margin-left: 0; padding: 5px 9px; font-size: 11px; }
}

/* ── Shared mobile layout safety net (deep-dive pages link this file) ──
   These pages lay out content with inline-style grids of varied spacing
   (1fr 400px, repeat(4,1fr), 1fr 360px …) that their own media queries
   don't catch. Collapse ANY inline grid in <main> to a single column on
   mobile so a fixed-px column can't crush its 1fr sibling to min-content. */
@media (max-width: 820px) {
  main [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    align-items: stretch !important;
  }
  main section { scroll-margin-top: 70px; }
}
@media (max-width: 560px) {
  main [style*="grid-template-columns"] { gap: 16px !important; }
}