/* ============================================================
   PUBLIC MARKETING NAV
   Separate from the founders-portal nav -- this is only used
   on the public home page, /investors, and /support. Relies on
   the theme variables defined in _layout.css, so this file must
   load after _layout.css.
   ============================================================ */

.bd-public-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(10, 20, 35, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bd-card-border);
}

:root[data-theme="light"] .bd-public-nav {
  background: rgba(255, 255, 255, 0.72);
}

.bd-public-nav-inner {
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
}

.bd-public-brand {
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  font-family: "Fraunces", serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--bd-heading-h1);
  white-space: nowrap;
}

.bd-public-brand .bd-dot {
  color: var(--bd-link);
  font-family: "Inter", sans-serif;
}

.bd-public-brand .bd-public-life {
  color: var(--bd-link);
}

.bd-public-brand .bd-public-brand-sub {
  font-family: "Inter", sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--bd-text-muted);
  margin-left: 6px;
}

.bd-public-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.bd-public-links a {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  color: var(--bd-text-p);
  text-decoration: none;
  white-space: nowrap;
}

.bd-public-links a:hover {
  color: var(--bd-link-hover);
}

.bd-public-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bd-lang-toggle,
.bd-theme-toggle {
  display: flex;
  align-items: center;
  border: 1px solid var(--bd-card-border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.bd-lang-btn,
.bd-theme-btn {
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bd-text-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 6px 8px;
  cursor: pointer;
}

.bd-lang-btn.active,
.bd-theme-btn.active {
  /* 2026-08-16: same fix as .bd-invite-btn -- this is a solid pill fill
     with white text on it, not inline link text, so it needs
     --bd-accent-solid (properly saturated in both themes), not
     --bd-link (whose dark-theme value is a pale tint meant for text). */
  background: var(--bd-accent-solid);
  color: #ffffff;
}

.bd-lang-btn:not(.active):hover,
.bd-theme-btn:not(.active):hover {
  color: var(--bd-text-body);
}

.bd-guide-link,
.bd-login-link {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bd-text-body);
  text-decoration: none;
  white-space: nowrap;
}

.bd-invite-btn {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--bd-accent-solid);
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: 999px;
}

.bd-invite-btn:hover {
  background: var(--bd-accent-solid-hover);
}

.bd-public-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--bd-card-border);
  border-radius: 10px;
  color: var(--bd-text-body);
  font-size: 1.25rem;
  padding: 6px 12px;
  cursor: pointer;
}

/* ============================================================
   TOOLBAR -> HAMBURGER BREAKPOINT (EN/ES i18n, UNIFIED)

   2026-08-15: previously English switched at 1270px and Spanish at
   1560px (Spanish nav labels run ~15-20% longer -- "Solicitar
   invitación", "Confianza y seguridad", "Inversionistas" -- and
   overflowed the toolbar by 136-231px at the tighter breakpoint).
   That split created a real, reproducible bug: any window width in
   the 1270-1560px gap showed the toolbar in English but the
   hamburger in Spanish -- the exact same page, same content, looking
   broken/inconsistent purely from a language toggle. A user resizing
   or switching languages inside that gap saw the toolbar vanish.

   Fixed by unifying BOTH languages to the single wider 1560px
   breakpoint (language-agnostic, no :root[lang=] condition at all)
   rather than trying to compress Spanish to fit 1270px -- the
   English toolbar is already at its legibility floor there, and
   forcing Spanish into the same tight space risks the original
   overflow bug returning. The tradeoff: English now defers to the
   hamburger slightly earlier (in the old 1270-1560px range) than it
   used to. That's deliberate -- guaranteed EN/ES consistency at
   every width, no exceptions, beats a slightly later toolbar cutoff
   in one language only.

   Keep in sync: if either language's nav labels change materially,
   re-measure the wider (Spanish) intrinsic width and adjust 1560px
   accordingly -- for both languages, since there is now only one
   breakpoint to keep correct.
   ============================================================ */
@media (max-width: 1560px) {
  .bd-public-links,
  .bd-public-controls {
    display: none;
  }

  .bd-public-menu-btn {
    display: block;
    margin-left: auto;
  }
}

/* ============================================================
   NARROW MOBILE: hide the brand subtitle ("How It Works" /
   "Cómo funciona") next to the wordmark.

   Found during ES page-body testing 2026-08-15: at 375px the
   hamburger button is ALREADY showing in both languages (well
   below the unified 1560px toolbar breakpoint both now share), and
   the English margin was only 5px (brand right edge 370px vs a
   375px viewport) before the Spanish subtitle ("Cómo funciona",
   marginally longer) pushed the hamburger button 7px past the
   viewport edge. The subtitle is purely decorative here -- the
   drawer already carries the real nav -- so it is dropped rather
   than compressed, matching the desktop breakpoint's "defer, don't
   compress below the legibility floor" approach. Language-agnostic
   on purpose: the underlying margin was fragile in English too.
   ============================================================ */
@media (max-width: 480px) {
  .bd-public-brand-sub {
    display: none;
  }
}