/* ==========================================================================
   sections/navbar.css · owner: navbar-agent
   Scope: #nav, .nav*, #overlay, .get-app*   (DESIGN_SPEC §3, motion.md §2 + §9)

   State lives on .nav (written by sections/navbar.js):
     data-nav-collapsed = "true" | "false"   scrollY > 5
     data-nav-theme     = "light" | "dark"   element under y = 1px (§0.1)
     data-nav-menu      = "open" | "closed"  mobile panel (≤839px)
   ========================================================================== */

/* ---------- Fixed layer ---------- */
#nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  pointer-events: none;            /* the 171px block overlays the hero; only real UI takes clicks */
}

.nav {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-56); /* 39 + 20 + 56 + 56 = 171 */
}

/* ---------- Announcement banner ---------- */
.nav__banner {
  position: relative;
  height: var(--announcement-h);
  background: var(--grad-announcement);
  color: var(--color-text-inverse);
  pointer-events: auto;
}

.nav__banner-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  width: 100%;
  height: 100%;
  color: var(--color-text-inverse);
}

.nav__banner-icon {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-6);
  box-shadow: var(--shadow-soft-03);
  overflow: hidden;
}

.nav__banner-icon img {
  width: 100%;
  height: 100%;
}

.nav__banner-glyph {
  position: absolute;
  inset: var(--space-4);
  background: var(--color-text-inverse);
  -webkit-mask: url(../assets/placeholders/icons/shield.svg) center / contain no-repeat;
  mask: url(../assets/placeholders/icons/shield.svg) center / contain no-repeat;
}

.nav__banner-text {
  white-space: nowrap;
}

.nav__banner-sep {
  flex: none;
  width: 1px;
  height: 16px;
  background: var(--color-divider-vert);
}

.nav__banner-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  white-space: nowrap;
}

.nav__banner-arrow {
  flex: none;
  width: 16px;
  height: 15px;
}

.nav__banner-close {
  position: absolute;
  top: 50%;
  right: var(--space-12);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  color: var(--color-text-inverse);
  cursor: pointer;
}

.nav__banner-close svg {
  width: 14px;
  height: 14px;
}

.nav__spacer {
  flex: none;
  height: var(--space-20);
}

/* ---------- Row + pill container ---------- */
.nav__row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: var(--nav-row-h);
}

.nav__pill {
  display: flex;
  flex-direction: column;
  flex: none;
  width: var(--container);                 /* 1000 expanded */
  height: var(--nav-row-h);                /* 56 */
  padding: 0 var(--gutter);
  overflow: hidden;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  pointer-events: auto;
  transition:
    width var(--t-nav),
    height var(--t-nav),
    background-color var(--t-nav),
    border-radius var(--t-nav),
    box-shadow var(--t-nav),
    -webkit-backdrop-filter var(--t-spring),
    backdrop-filter var(--t-spring);
}

.nav[data-nav-collapsed="true"] .nav__pill {
  width: min(var(--nav-pill-collapsed-w), var(--container));   /* 718 */
  background-color: var(--color-bg);
  border-radius: var(--radius-50);
  box-shadow: var(--shadow-ring-02);
}

.nav[data-nav-theme="dark"] .nav__pill {
  background-color: var(--color-nav-dark);
  -webkit-backdrop-filter: blur(var(--blur-nav-dark));
  backdrop-filter: blur(var(--blur-nav-dark));
  box-shadow: var(--shadow-soft-02);
}

.nav__inner {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  margin-block: 3px;                      /* 3 + 50 + 3 = 56 */
}

/* ---------- Logo + wordmark ---------- */
.nav__brand {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-10) 0;
  color: var(--color-text);
  transition: color var(--t-spring);
}

.nav__logo {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-logo);
}

.nav__wordmark-clip {
  display: block;
  max-width: 150px;
  overflow: hidden;
  transition: max-width var(--t-nav);
}

.nav__wordmark {
  display: block;
  white-space: nowrap;
  transition: opacity var(--t-nav);
}

.nav__divider {
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 16px;
  margin-top: -8px;
  background: var(--color-border);
  opacity: 0;
  transition: opacity var(--t-nav), background-color var(--t-spring);
}

/* Collapsed: wordmark folds away (block 101 → 48: logo 30 + gap 10 + 8), divider appears */
.nav[data-nav-collapsed="true"] .nav__wordmark-clip { max-width: 8px; }
.nav[data-nav-collapsed="true"] .nav__wordmark      { opacity: 0; }
.nav[data-nav-collapsed="true"] .nav__divider       { opacity: 1; }

.nav[data-nav-theme="dark"] .nav__brand   { color: var(--color-text-inverse); }
.nav[data-nav-theme="dark"] .nav__divider { background: var(--color-divider-vert); }

/* ---------- Desktop links ---------- */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  height: 30px;
}

.nav__link {
  display: block;
  white-space: nowrap;
  color: var(--color-text-70);
  transition: color var(--t-spring);
}

.nav__link:hover { color: var(--color-text-50); }

.nav[data-nav-theme="dark"] .nav__link       { color: var(--color-text-inverse-80); }
.nav[data-nav-theme="dark"] .nav__link:hover { color: var(--color-text-inverse-50); }

/* ---------- Actions: CTA (+ mobile menu button) ---------- */
.nav__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-12);
}

.nav__cta {
  isolation: isolate;
  height: 32px;
  padding: 0 9px 0 var(--space-12);
  gap: var(--space-4);
  color: var(--color-text);
  transition: color var(--t-spring);
}

/* Two fill layers crossfade (gradients cannot interpolate) */
.nav__cta::before,
.nav__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--t-spring);
}

.nav__cta::before { background: var(--grad-btn-dark); }
.nav__cta::after  { background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border-strong); }

.nav__cta-icon {
  position: relative;
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
}

.nav__cta-icon-state {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  transition: opacity var(--t-spring);
}

.nav__cta-icon-state--dark  { color: var(--color-text); }
.nav__cta-icon-state--light { color: var(--color-text-inverse); opacity: 0; }

/* Light, collapsed: dark gradient pill, white label */
.nav[data-nav-collapsed="true"][data-nav-theme="light"] .nav__cta                       { color: var(--color-text-inverse); }
.nav[data-nav-collapsed="true"][data-nav-theme="light"] .nav__cta::before               { opacity: 1; }
.nav[data-nav-collapsed="true"][data-nav-theme="light"] .nav__cta-icon-state--dark      { opacity: 0; }
.nav[data-nav-collapsed="true"][data-nav-theme="light"] .nav__cta-icon-state--light     { opacity: 1; }

/* Dark: white pill, black label */
.nav[data-nav-theme="dark"] .nav__cta         { color: var(--color-text); }
.nav[data-nav-theme="dark"] .nav__cta::after  { opacity: 1; }

.nav__menu-btn {
  display: none;
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--color-text);
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.nav__menu-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  transition: opacity var(--t-spring), transform var(--t-nav);
}

.nav__menu-icon--close { opacity: 0; transform: rotate(-45deg); }
.nav[data-nav-menu="open"] .nav__menu-icon--bars  { opacity: 0; transform: rotate(45deg); }
.nav[data-nav-menu="open"] .nav__menu-icon--close { opacity: 1; transform: none; }

/* ---------- Mobile drop panel (never shown on desktop) ---------- */
.nav__menu {
  display: none;
}

/* ==========================================================================
   Mobile nav (≤839px)
   ========================================================================== */
@media (max-width: 839.98px) {
  .nav { padding-bottom: var(--space-12); }            /* 39 + 12 + 56 + 12 = 119 */
  .nav__spacer { height: var(--space-12); }

  .nav__pill,
  .nav[data-nav-collapsed="true"] .nav__pill {
    width: 100%;                                        /* full width, no max */
  }

  .nav__links { display: none; }

  .nav__brand { gap: var(--space-8); }
  .nav__logo {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-7);
  }

  /* Only the pill styling changes on mobile: the wordmark stays */
  .nav[data-nav-collapsed="true"] .nav__wordmark-clip { max-width: 150px; }
  .nav[data-nav-collapsed="true"] .nav__wordmark      { opacity: 1; }
  .nav[data-nav-collapsed="true"] .nav__divider       { opacity: 0; }

  .nav__cta { padding: 0 var(--space-12); }
  .nav__cta-icon { display: none; }
  .nav__cta::after { opacity: 1; }                      /* white on light-expanded */
  .nav[data-nav-collapsed="true"][data-nav-theme="light"] .nav__cta::after { opacity: 0; }

  .nav__menu-btn { display: inline-flex; }

  .nav__menu {
    display: block;
    flex: none;
    padding: var(--space-12) 0 var(--space-20);
  }

  .nav__menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);                               /* cells 378 @820, 163 @390 */
  }

  .nav__menu-link {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    height: 30px;
    white-space: nowrap;
    color: var(--color-text-70);
    transition: color var(--t-spring);
  }

  .nav__menu-link:hover { color: var(--color-text-50); }
  .nav[data-nav-theme="dark"] .nav__menu-link       { color: var(--color-text-inverse-80); }
  .nav[data-nav-theme="dark"] .nav__menu-link:hover { color: var(--color-text-inverse-50); }

  /* Open: 56 → 210 (3 + 50 + 3 + 12 + 3×30 + 2×16 + 20) */
  .nav[data-nav-menu="open"] .nav__pill {
    height: 210px;
    border-radius: var(--radius-50);
  }

  .nav[data-nav-menu="open"][data-nav-theme="light"] .nav__pill {
    background-color: var(--color-bg);
    box-shadow: var(--shadow-ring-02);
  }
}

.nav__menu-glyph {
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--nav-glyph) center / contain no-repeat;
  mask: var(--nav-glyph) center / contain no-repeat;
}

.nav__menu-glyph--star   { --nav-glyph: url(../assets/placeholders/icons/star.svg); }
.nav__menu-glyph--ribbon { --nav-glyph: url(../assets/placeholders/icons/ribbon.svg); }
.nav__menu-glyph--bell   { --nav-glyph: url(../assets/placeholders/icons/bell.svg); }
.nav__menu-glyph--user   { --nav-glyph: url(../assets/placeholders/icons/user.svg); }
.nav__menu-glyph--screen { --nav-glyph: url(../assets/placeholders/icons/screen.svg); }
.nav__menu-glyph--globe  { --nav-glyph: url(../assets/placeholders/icons/globe.svg); }

/* ==========================================================================
   Get-app modal (#overlay) · motion.md §9
   ========================================================================== */
.get-app {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--dur-fast);      /* stay visible while fading out */
}

.get-app[data-open="true"] {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.get-app__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-modal-overlay);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out-soft);   /* close */
}

.get-app__layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  opacity: 0;
  transition: opacity var(--t-fast);
}

.get-app[data-open="true"] .get-app__scrim {
  opacity: 1;
  transition: opacity var(--t-fast);                          /* open: 200ms ease-inout */
}

.get-app[data-open="true"] .get-app__layer { opacity: 1; }

.get-app__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: min(560px, 100%);
  padding: var(--space-48) var(--space-40) var(--space-40);
  background: var(--color-bg);
  border-radius: var(--radius-20);
  box-shadow: var(--shadow-ring-04);
  text-align: center;
  transition: transform var(--t-bounce);
}

.get-app__card:focus { outline: none; }
.get-app__card:hover  { transform: scale(1.01); }
.get-app__card:active { transform: scale(0.99); }

.get-app__qr {
  width: 200px;
  height: 200px;
  margin-bottom: var(--space-8);
  border-radius: var(--radius-12);
}

.get-app__title {
  color: var(--color-text);
  text-wrap: balance;
}

.get-app__body {
  max-width: 400px;
  color: var(--color-text-60);
  text-wrap: balance;
}

.get-app__close {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  width: 32px;
  height: 32px;
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border);
  transition: background-color var(--t-spring);
}

.get-app__close:hover { background: var(--color-btn-light-hover); }

@media (max-width: 789.98px) {
  .get-app__card {
    padding: var(--space-48) var(--space-24) var(--space-32);
  }
}

/* =========================================================
   Store badge pair (content pass): replaces the single get-app pill.
   Generic dark pills with a line icon and two-line label; no store artwork.
   ========================================================= */
.get-app__store-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.get-app__store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px 0 14px;
  border-radius: var(--radius-pill);
  background: var(--color-btn-dark);
  color: var(--color-text-inverse);
  text-decoration: none;
  transition: background-color var(--t-spring);
}

.get-app__store-badge:hover { background: var(--color-btn-dark-hover); }
.get-app__store-badge:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.get-app__store-badge-icon { flex: none; width: 20px; height: 20px; }

.get-app__store-badge-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  white-space: nowrap;
}

.get-app__store-badge-small { font-size: 10px; line-height: 12px; font-weight: var(--fw-medium); opacity: 0.75; }
.get-app__store-badge-big { font-size: 15px; line-height: 18px; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }

@media (max-width: 789.98px) {
  .get-app__store-badge { height: 42px; padding: 0 16px 0 12px; }
}