/* ════════════════════════════════════════════════════════════════════════════
   SITE NAV  —  the public bar (src/components/SiteNav.astro)
   Worn by the pages a signed-out visitor sees: the landing page, pricing,
   login and register. Deliberately NOT the app's own chrome — those pages run
   with showNav={false} and the sidebar belongs to the campaign, not the shop.

   Self-contained on purpose: landing.css resets base.css's global <section>
   rule, which would wreck any page that lays its content out in sections, so
   the bar could not simply travel with that file.

   It floats OVER each page's artwork rather than pushing it down — every page
   that wears it leaves room at the top itself, using --sitenav-h.
   ════════════════════════════════════════════════════════════════════════════ */

:root { --sitenav-h: 64px; }

.sitenav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--sitenav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background var(--duration-normal) var(--easing-default),
              border-color var(--duration-normal) var(--easing-default),
              backdrop-filter var(--duration-normal) var(--easing-default);
}
/* Glass once there is content behind it — a pane above the scenery, not a
   strip laid on top of it. */
.sitenav.is-stuck {
  background: rgba(var(--glass-tint), var(--glass-alpha));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom-color: rgba(var(--bronze-rgb), 0.14);
}

/* Full bleed, three tracks: mark hard left, links optically centred, the way
   in hard right. The outer tracks are equal, so the links stay centred on the
   PAGE rather than drifting with the width of the brand or the button. */
.sitenav-inner {
  width: 100%;
  padding-inline: clamp(18px, 3.5vw, 44px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
}

.sitenav-brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.sitenav-brand:hover { color: var(--text); }
.sitenav-brand img { width: 30px; height: 30px; object-fit: contain; }
.sitenav-brand span {
  font-family: var(--title);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--logo-gold);
}

/* base.css dresses every bare <nav> as the app's old top bar — gradient fill,
   bottom border, drop shadow, padding, sticky, z-index 100. This one is a
   plain link group, so undo the lot in one place. */
.sitenav nav {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  position: static;
  z-index: auto;
}

.sitenav-links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(2px, 1vw, 14px);
}
.sitenav-links a {
  padding: 8px 14px;
  border-radius: var(--rounded-md);
  font-size: var(--font-size-sm);
  color: var(--smoke);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast), background var(--duration-fast);
}
.sitenav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.sitenav-links a[aria-current="page"] { color: var(--accent); }

/* The one thing the bar is really for. */
.sitenav-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  min-height: 40px;
  border-radius: var(--rounded-md);
  border: 1px solid rgba(var(--bronze-rgb), 0.42);
  background: rgba(var(--bronze-rgb), 0.13);
  color: var(--accent);
  font-size: var(--font-size-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.sitenav-cta:hover {
  background: rgba(var(--bronze-rgb), 0.24);
  border-color: rgba(var(--bronze-rgb), 0.75);
  color: var(--accent);
}

/* Below tablet the section links go: the pages they point at are all reachable
   by scrolling, and the brand and the way in are what matter on a phone. The
   grid collapses to two tracks so both stay pinned to their own edge. */
@media (max-width: 820px) {
  .sitenav-links { display: none; }
  .sitenav-inner { grid-template-columns: 1fr auto; }
}

/* ── Site footer (src/components/SiteFooter.astro) ──────────────────────────
   Travels with the bar, for the same reason: the legal pages had a lone "Back"
   link to /pricing and nothing else, which made them a cul-de-sac. Lives in
   this file rather than landing.css so a page can take the chrome without
   taking that file's global <section> reset. */
.sitefoot {
  border-top: 1px solid rgba(var(--bronze-rgb), 0.14);
  padding-block: var(--space-xl);
  font-size: var(--font-size-sm);
  color: var(--deep-smoke);
}
.sitefoot-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: clamp(18px, 3.5vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
}
.sitefoot-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  color: var(--smoke);
}
.sitefoot-brand img { width: 22px; height: 22px; object-fit: contain; opacity: 0.85; }
/* base.css dresses every bare <nav> as the app's old top bar; undo it here too. */
.sitefoot nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  position: static;
  z-index: auto;
}
.sitefoot a { color: var(--smoke); text-decoration: none; }
.sitefoot a:hover { color: var(--accent); }
.sitefoot a[aria-current="page"] { color: var(--accent); }

/* On a phone the eight links wrapped into a ragged block beside a brand that
   was still trying to push them right. Stack it instead: the mark on its own
   line, then the links as an even two-column list with hairlines, which is
   legible at a glance and gives every link a real tap target. */
@media (max-width: 700px) {
  .sitefoot { padding-block: var(--space-lg) var(--space-xl); }
  .sitefoot-inner {
    display: block;
    padding-inline: 18px;
  }
  .sitefoot-brand {
    display: flex;
    justify-content: center;
    margin: 0 0 var(--space-md);
    font-family: var(--title);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    color: var(--logo-gold);
  }
  .sitefoot-brand img { width: 24px; height: 24px; opacity: 1; }
  .sitefoot nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid rgba(var(--bronze-rgb), 0.14);
  }
  .sitefoot nav a {
    padding: 13px 4px;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(var(--bronze-rgb), 0.14);
    font-size: var(--font-size-sm);
  }
  /* Hairline between the two columns, drawn on the left-hand cells only. */
  .sitefoot nav a:nth-child(2n) { padding-left: 16px; border-left: 1px solid rgba(var(--bronze-rgb), 0.14); }
}