/* ==========================================================================
   coldcaked auth nav - sign-in / sign-up / user-button
   Owned by Agent 3. Linked from each LP HTML page after main.css.
   Re-uses tokens from main.css (--ink, --bg, --pink, --muted).
   ========================================================================== */

/* Container that hugs the right edge of the existing .links row.
   We slot it next to the existing nav links so the page nav reads as
   "site links … | sign-in | sign-up | avatar". */
.auth-nav {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Sign-in: ghost button (text + underline-on-hover, no fill). */
.auth-nav .auth-btn-sign-in {
  background: transparent;
  border: 0;
  padding: 6px 4px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}
.auth-nav .auth-btn-sign-in:hover {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--pink);
}

/* Sign-up: filled pill, matches the .cta-mini visual language. */
.auth-nav .auth-btn-sign-up {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  padding: 8px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  transform: rotate(-1.5deg);
  box-shadow: 3px 3px 0 var(--pink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.auth-nav .auth-btn-sign-up:hover {
  transform: rotate(-1.5deg) translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--pink);
}

/* Bakery shortcut: ghost outline, sits next to the primary "cake someone"
   CTA so it reads as the secondary action for partner bakeries. */
.auth-nav .auth-btn-bakery {
  display: inline-block;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 6px 12px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
  transform: rotate(-1deg);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.auth-nav .auth-btn-bakery:hover {
  transform: rotate(-1deg) translate(-1px, -1px);
  background: var(--ink);
  color: var(--bg);
}

/* The mount div for Clerk's <UserButton/>. Clerk renders into this; we just
   guarantee it has the right size and won't blow up the nav baseline. */
.auth-nav #user-button-mount {
  display: inline-flex;
  align-items: center;
  min-width: 32px;
  min-height: 32px;
}

/* When signed-in, hide the sign-in/sign-up buttons; when signed-out, hide the
   user-button mount. Body classes are toggled by scripts/auth.js. */
body.clerk-signed-in .auth-nav .auth-btn-sign-in,
body.clerk-signed-in .auth-nav .auth-btn-sign-up {
  display: none;
}
body.clerk-signed-out .auth-nav #user-button-mount {
  display: none;
}

/* Default (pre-init): hide the user-button slot so we don't show an empty
   square before clerk-js boots. The button reappears once Clerk reports
   a signed-in user via the body-class toggle. */
body:not(.clerk-signed-in) .auth-nav #user-button-mount {
  display: none;
}

/* Tighten on narrow viewports so the nav doesn't wrap awkwardly. */
@media (max-width: 720px) {
  .auth-nav { gap: 8px; margin-left: 4px; }
  .auth-nav .auth-btn-sign-in { font-size: 13px; padding: 6px 2px; }
  .auth-nav .auth-btn-sign-up { font-size: 13px; padding: 6px 10px; }
}

/* On the legal pages (terms.html, privacy.html) the nav is a much simpler
   bar (just wordmark + "back" link). The .auth-nav block sits flush right
   via flex auto-margin in those pages - see the inline tweak there. */
nav > .auth-nav.auth-nav--legal {
  margin-left: auto;
}