/* Shared top nav for the pre-login pages (frontend/marketing/*). One source of
 * truth: markup is injected by scripts/marketing_nav.py, behaviour is in
 * frontend/js/fp-mkt-nav.js. Plain CSS (no Tailwind dependency) so it renders
 * the same on every page, including the shop, which does not load Tailwind. */
.fp-nav {
  --nav-h: 72px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--fp-dark, #0f172a) 72%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--fp-border, rgba(255,255,255,.06));
  transition: background-color .25s ease, box-shadow .25s ease;
  font-family: 'Inter', system-ui, sans-serif;
}
.fp-nav.is-scrolled, .fp-nav.is-open {
  background: color-mix(in srgb, var(--fp-dark, #0f172a) 92%, transparent);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.45);
}
.fp-nav__bar {
  max-width: 80rem; height: 100%; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 32px;
}
.fp-nav__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--fp-text, #f8fafc); white-space: nowrap; }
.fp-nav__brand svg { flex: none; filter: drop-shadow(0 0 6px rgba(59,130,246,.3)); transition: transform .3s ease; }
.fp-nav__brand:hover svg { transform: scale(1.08); }
.fp-nav__word { font: 700 17px/1 'Instrument Sans', 'Inter', sans-serif; letter-spacing: .18em; text-transform: uppercase; }

.fp-nav__links { display: flex; align-items: center; justify-content: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.fp-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px; border-radius: 8px;
  font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
  color: var(--fp-text-muted, #94a3b8); text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
a.fp-nav__link:hover { color: var(--fp-text, #f8fafc); background: color-mix(in srgb, var(--fp-text, #f8fafc) 6%, transparent); }
.fp-nav__link[aria-current="page"] { color: var(--fp-text, #f8fafc); }
.fp-nav__link[aria-current="page"]::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--fp-gradient, linear-gradient(135deg,#3b82f6,#06d6a0));
}
.fp-nav__link[aria-disabled="true"] { cursor: default; opacity: .75; }
.fp-nav__soon {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fbbf24; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.28);
}
html:not(.dark) .fp-nav__soon { color: #b45309; background: rgba(245,158,11,.12); border-color: rgba(180,83,9,.3); }

.fp-nav__actions { display: flex; align-items: center; gap: 8px; }
.fp-nav__icon-btn {
  width: 40px; height: 40px; border-radius: 8px; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fp-text-muted, #94a3b8); transition: color .2s ease, background-color .2s ease;
}
.fp-nav__icon-btn:hover { color: var(--fp-text, #f8fafc); background: color-mix(in srgb, var(--fp-text, #f8fafc) 6%, transparent); }
.fp-nav__theme .fa-sun { display: none; }
html:not(.dark) .fp-nav__theme .fa-moon { display: none; }
html:not(.dark) .fp-nav__theme .fa-sun { display: inline-block; }
.fp-nav__cta {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; margin-left: 4px;
  border-radius: 9px; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
  color: #fff; background: var(--fp-gradient, linear-gradient(135deg,#3b82f6,#06d6a0));
  box-shadow: 0 6px 18px -8px rgba(59,130,246,.7); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.fp-nav__cta:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 22px -8px rgba(59,130,246,.8); }
.fp-nav__cart {
  height: 40px; padding: 0 14px; border-radius: 9px; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
  color: var(--fp-text, #f8fafc); background: transparent; border: 1px solid var(--fp-border, rgba(255,255,255,.12));
}
.fp-nav__cart:hover { border-color: var(--fp-accent, #06d6a0); }

.fp-nav a:focus-visible, .fp-nav button:focus-visible { outline: 2px solid var(--fp-accent, #06d6a0); outline-offset: 2px; }

/* Menu toggle + drawer (below 960px) */
.fp-nav__menu-btn { display: none; }
.fp-nav__drawer { display: none; }

@media (max-width: 959px) {
  .fp-nav__bar { grid-template-columns: 1fr auto; padding: 0 16px; column-gap: 12px; }
  .fp-nav__links, .fp-nav__actions > .fp-nav__signin, .fp-nav__actions > .fp-nav__cta { display: none; }
  .fp-nav__menu-btn { display: inline-flex; }
  .fp-nav__menu-btn .fa-xmark { display: none; }
  .fp-nav.is-open .fp-nav__menu-btn .fa-bars { display: none; }
  .fp-nav.is-open .fp-nav__menu-btn .fa-xmark { display: inline-block; }
  .fp-nav__drawer {
    display: block;
    position: absolute; top: var(--nav-h); left: 0; right: 0; max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
    background: var(--fp-dark, #0f172a);
    border-bottom: 1px solid var(--fp-border, rgba(255,255,255,.08));
    padding: 8px 16px 20px; visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .fp-nav.is-open .fp-nav__drawer { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .fp-nav__drawer .fp-nav__link {
    display: flex; width: 100%; height: 52px; padding: 0 8px; border-radius: 0; font-size: 16px;
    border-bottom: 1px solid var(--fp-border, rgba(255,255,255,.06));
  }
  .fp-nav__drawer .fp-nav__link[aria-current="page"]::after { left: 8px; right: auto; width: 24px; bottom: 10px; }
  .fp-nav__drawer .fp-nav__cta { display: flex; width: 100%; height: 48px; margin: 20px 0 0; font-size: 15px; }
}
@media (max-width: 380px) { .fp-nav__word { font-size: 15px; letter-spacing: .14em; } }
@media (prefers-reduced-motion: reduce) { .fp-nav, .fp-nav__drawer, .fp-nav__cta, .fp-nav__brand svg { transition: none; } }

/* Skip link: first focusable thing on every page */
.fp-skip {
  position: absolute; left: 12px; top: -48px; z-index: 60; padding: 10px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 600; background: var(--fp-accent, #06d6a0); color: #04201a; text-decoration: none;
  transition: top .15s ease;
}
.fp-skip:focus { top: 12px; }