/* ── Sync Inc site chrome ─────────────────────────────────────────────────
   Single source of truth for the nav bar and the footer that appear on
   every page of the site. The markup is injected by site-chrome.js; this
   file styles it. Change either one here and every page changes with it.

   Every rule is scoped under #site-nav / #site-footer deliberately. The
   Flopify page carries its own generic `nav {}` and `footer {}` rules, and
   legal.css has a `footer {}` of its own, so the shared chrome has to
   out-specify those rather than politely sit alongside them. If you add a
   property here, keep it inside one of those two ID scopes.

   Tokens are --sc-* prefixed for the same reason: index.html and legal.css
   both define --muted, with different values. The chrome must look the
   same on both, so it brings its own. */
:root {
  --sc-bg:        #080808;
  --sc-text:      #ffffff;
  --sc-muted:     #ffffff;
  --sc-dim:       #ffffff;
  --sc-border:    #1a1a1a;
  --sc-accent:    #41d6cb;
  --sc-accent-hi: #36c2b8;
  --sc-nav-h:     56px;
  /* Pages set this to their own content width so the footer lines up with
     the column above it. */
  --sc-footer-max: 720px;
  --sc-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ── Nav ─────────────────────────────────────────────────────────────── */
#site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: var(--sc-nav-h);
  margin: 0;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--sc-font);
  line-height: 1.6;
  /* Transparent at rest so the home page hero reads through it; the tint
     arrives on scroll (see .is-scrolled) once there is content underneath
     that would otherwise show through the bar. */
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  transition: background 0.2s ease, backdrop-filter 0.2s ease;
}

#site-nav.is-scrolled {
  background: rgba(8, 8, 8, 0.6);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

#site-nav .nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-text);
  text-decoration: none;
  white-space: nowrap;
}

#site-nav .nav-logo img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

#site-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#site-nav .nav-links li { margin: 0; }

#site-nav .nav-links a {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sc-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

#site-nav .nav-links a:hover { color: var(--sc-text); }

/* The CTA of the bar. Matches the house button style used by the gravity
   control on the home page, so the site only has one "primary action" look. */
#site-nav .nav-links a.nav-cta {
  padding: 9px 18px;
  border-radius: 20px;
  background: var(--sc-accent);
  border: 1px solid var(--sc-accent);
  color: #000000;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}

#site-nav .nav-links a.nav-cta:hover {
  background: var(--sc-accent-hi);
  border-color: var(--sc-accent-hi);
  color: #000000;
}

#site-nav .nav-links a:focus-visible,
#site-nav .nav-logo:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Opt out of the see-through bar entirely: an opaque nav from the first
   pixel of scroll, no tint fading in. The home page uses this. */
body.site-nav-solid #site-nav {
  background: var(--sc-bg);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* Pages whose content starts at the top of the document need to clear the
   fixed bar. The home page does not — its hero already reserves the space. */
body.site-nav-offset { padding-top: var(--sc-nav-h); }

/* ── Footer ──────────────────────────────────────────────────────────── */
#site-footer {
  margin: 0;
  padding: 40px 0;
  background: var(--sc-bg);
  border-top: 1px solid var(--sc-border);
  font-family: var(--sc-font);
  line-height: 1.6;
  text-align: left;
}

#site-footer .footer-inner {
  max-width: var(--sc-footer-max);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 32px;
}

#site-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

#site-footer .footer-brand img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

#site-footer .footer-copy {
  font-size: 12px;
  color: var(--sc-dim);
  letter-spacing: 0.02em;
}

#site-footer .footer-cols {
  display: flex;
  gap: 56px;
}

#site-footer .footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#site-footer .footer-col a {
  font-size: 12px;
  color: var(--sc-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.15s;
}

#site-footer .footer-col a:hover { color: var(--sc-text); }

#site-footer .footer-col a:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #site-nav {
    padding: 0 20px;
    background: rgba(8, 8, 8, 0.6);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
  }

  #site-nav .nav-links { gap: 18px; }
  #site-nav .nav-links a.nav-cta { padding: 8px 14px; }

  #site-footer .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 20px;
    gap: 28px;
  }

  #site-footer .footer-cols { gap: 48px; }
}

/* Phone widths: tighten everything before dropping anything. Measured at
   390px (iPhone 14/15), where the wordmark plus three links only fit once
   the padding and gaps come down. */
@media (max-width: 430px) {
  #site-nav { padding: 0 16px; }
  #site-nav .nav-links { gap: 14px; }
  #site-nav .nav-links a { font-size: 11px; }
  #site-nav .nav-links a.nav-cta { padding: 7px 12px; }
  #site-footer .footer-inner { padding: 0 16px; }
  #site-footer .footer-cols { gap: 36px; }
}

@media (max-width: 360px) {
  /* Past the point where tightening helps. The CTA is the one that survives. */
  #site-nav .nav-links li:not(.nav-cta-item) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #site-nav { transition: none; }
}