/* The v2 nav bar and footer for the pages that still use styles.css (legal,
   support, account deletion). Classes are prefixed with lf- so they cannot
   collide with styles.css. These pages are dark unless data-theme="light",
   matching styles.css; the head script sets it from the saved choice or the
   system setting. */

.lf-nav,
.lf-footer {
  --lf-bg: #07111b;
  --lf-line: rgba(244, 239, 228, 0.09);
  --lf-line-strong: rgba(244, 239, 228, 0.16);
  --lf-text: #f4efe4;
  --lf-muted: rgba(244, 239, 228, 0.68);
  --lf-faint: rgba(244, 239, 228, 0.46);
  --lf-gold: #e8a838;
  --lf-ink: #111820;
  font-family: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
}

[data-theme="light"] .lf-nav,
[data-theme="light"] .lf-footer {
  --lf-bg: #f6f0e3;
  --lf-line: rgba(30, 24, 10, 0.1);
  --lf-line-strong: rgba(30, 24, 10, 0.18);
  --lf-text: #16202b;
  --lf-muted: #5b5a54;
  --lf-faint: #86827a;
}

.lf-wrap { width: min(1180px, 100% - clamp(16px, 5vw, 56px) * 2); margin-inline: auto; }
.lf-i { width: 1em; height: 1em; flex: none; }
.lf-sprite { display: none; }

/* Nav */
.lf-nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--lf-bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lf-line);
}
.lf-nav__inner { display: flex; align-items: center; gap: 24px; height: 64px; }
.lf-brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--lf-text);
  font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 22px;
}
.lf-brand img { width: 34px; height: 34px; object-fit: contain; }
.lf-nav__links { display: none; gap: 26px; margin-left: 10px; }
.lf-nav__links a { text-decoration: none; color: var(--lf-muted); font-size: 15px; font-weight: 500; }
.lf-nav__links a:hover { color: var(--lf-text); }
@media (min-width: 900px) { .lf-nav__links { display: flex; } }
.lf-nav__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.lf-theme {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--lf-line-strong);
  background: transparent; color: var(--lf-text); display: grid; place-items: center; cursor: pointer; font-size: 18px; padding: 0;
}
.lf-theme .lf-i-sun { display: none; }
[data-theme="light"] .lf-theme .lf-i-sun { display: block; }
[data-theme="light"] .lf-theme .lf-i-moon { display: none; }

.lf-btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 10px 18px; border-radius: 999px; background: var(--lf-gold); color: var(--lf-ink);
}
.lf-btn:hover { filter: brightness(1.06); }

.lf-nav :focus-visible,
.lf-footer :focus-visible { outline: 2px solid var(--lf-gold); outline-offset: 3px; border-radius: 6px; }

/* styles.css pads the body and page to clear its old fixed nav; the sticky nav
   takes its own space instead. */
body.lf-page { padding-top: 0; }
.lf-nav ~ .legal-page { padding-top: 56px; }

/* Footer */
.lf-footer { border-top: 1px solid var(--lf-line); padding: 40px 0 48px; font-size: 14px; color: var(--lf-muted); margin-top: 24px; }
.lf-footer__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.lf-footer__links { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.lf-footer__links a { text-decoration: none; color: var(--lf-muted); }
.lf-footer__links a:hover { color: var(--lf-text); }
.lf-footer__links .lf-i { vertical-align: -2px; margin-right: 5px; }
.lf-footer__legal { margin: 22px 0 0; font-size: 12.5px; color: var(--lf-faint); line-height: 1.6; }