/* ============================================================================
   nav.css — shared header + primary navigation styles (single source of truth)

   Two deliberate header variants, nothing page-specific:
     * Marketing header  <header class="lp-header">   index, about, pricing,
       privacy, terms, solo-hiking-safety, sms-opt-in. One 64px row at every
       width; collapses to the menu button at <= 900px.
     * App header        <header class="abb-header">  app, profile. Keeps the
       ABB tagline on desktop; collapses at <= 768px.
   Plus the nav ITEMS for both: typography, spacing, hover, keyboard focus,
   active page/section, CTA treatment, desktop and inside the open menu.

   Pages must not restyle these (public/nav.test.ts enforces it). Link this
   file LAST in <head> so it also wins over styles.css's global `button`,
   `h1`, `.lead`, `.abb-header` and `.abb-logo` rules.

   Each nav declares its variant's breakpoint as data-nav-breakpoint
   (900 = marketing, 768 = app); the open-menu rules below are keyed by it.
   ============================================================================ */

:root {
  --lp-header-h: 64px; /* marketing header height; pages offset content by it */
}

.lp-nav {
  --nav-text: #e2e8f0;
  --nav-accent: #3b82f6;
  --nav-surface: #0b1a2b;
  --nav-cta-bg: #10b981;
  --nav-cta-bg-hover: #0ea572;
  --nav-cta-text: #06251e;
  --nav-pro: #10b981;
}

:where(.lp-nav) {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---- Header shell shared by both variants -------------------------------- */
.lp-header,
.abb-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(11, 18, 32, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  /* Own text context, so nothing a page sets on <body> leaks in. */
  color: #e2e8f0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
}

.lp-header *,
.abb-header * {
  box-sizing: border-box;
}

/* ---- Marketing header ---------------------------------------------------- */
.lp-header {
  height: var(--lp-header-h);
  padding: 0 18px;
}

.lp-header-left {
  display: flex;
  align-items: center;
  min-width: 0;
}

.lp-brand,
.lp-brand:visited {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #e2e8f0;
  text-decoration: none;
}

.lp-brand img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lp-brand span {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Static, so the open menu anchors to the full-width header. */
.lp-header-right {
  position: static;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ---- App header ---------------------------------------------------------- */
.abb-header {
  padding: 10px 18px;
}

.abb-header-left,
.abb-header-left:visited {
  color: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  cursor: pointer;
}

.abb-header .abb-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}

.abb-header-text {
  min-width: 0;
  overflow: hidden;
}

.abb-header-text h1 {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* One line, so the header keeps one height whatever the nav holds. */
.abb-header-text .lead {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #9fb2c5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Menu button (hidden on desktop) -------------------------------------
   Also neutralises styles.css's global `button` rule (margin-top, padding,
   transition, hover lift) so the button sits centred in the header. */
.lp-burger,
.abb-burger {
  display: none;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #1f2937;
  border-radius: 999px;
  background: #020617;
  color: #e2e8f0;
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition: none;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.lp-burger:hover,
.abb-burger:hover {
  box-shadow: none;
  transform: none;
}

.lp-burger:focus-visible,
.abb-burger:focus-visible {
  outline: 2px solid var(--nav-accent, #3b82f6);
  outline-offset: 2px;
}

.lp-burger span,
.abb-burger span {
  display: block;
  width: 20px;
  height: 3px;
  margin: 2px 0;
  border-radius: 999px;
  background: #f1f5f9;
}

/* The app header keeps the menu button at the far right, after the pill. */
.abb-header .abb-burger {
  margin-left: auto;
}

/* ---- Items: links and the Log out button ---------------------------------
   The button reset also neutralises styles.css's global `button` / `.btn`
   rules (padding, margin-top, transition, hover lift) on pages that load it. */
.lp-nav > a,
.lp-nav > a:visited,
.lp-nav > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--nav-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition: none;
  -webkit-appearance: none;
  appearance: none;
}

.lp-nav > a:hover,
.lp-nav > button:hover {
  border-color: var(--nav-accent);
  background: var(--nav-surface);
  color: var(--nav-text);
  box-shadow: none;
  transform: none;
}

.lp-nav > a:focus-visible,
.lp-nav > button:focus-visible {
  outline: 2px solid var(--nav-accent);
  outline-offset: 2px;
}

/* ---- Active: the current page, or the home-page section in view ---------- */
.lp-nav > a[aria-current="page"],
.lp-nav > a[aria-current="location"] {
  border-color: var(--nav-accent);
  background: var(--nav-surface);
  font-weight: 700;
}

/* ---- Beacon Pro (shown only to free-tier users) -------------------------- */
.lp-nav > a.nav-go-pro,
.lp-nav > a.nav-go-pro:visited,
.lp-nav > a.nav-go-pro:hover {
  color: var(--nav-pro);
  font-weight: 600;
}

/* ---- CTA: Sign up / My Adventures ---------------------------------------- */
.lp-nav > a.nav-cta,
.lp-nav > a.nav-cta:visited {
  padding: 8px 16px;
  border-color: var(--nav-cta-bg);
  background: var(--nav-cta-bg);
  color: var(--nav-cta-text);
  font-weight: 700;
}

.lp-nav > a.nav-cta:hover {
  border-color: var(--nav-cta-bg-hover);
  background: var(--nav-cta-bg-hover);
  color: var(--nav-cta-text);
}

/* ---- Collapsed header: menu button + drop-down panel ----------------------
   Same panel for both variants; only the breakpoint differs. */
@media (max-width: 900px) {
  .lp-header { padding: 0 14px; }
  .lp-header .lp-burger { display: inline-flex; }
}

@media (max-width: 768px) {
  .abb-header { padding: 10px 14px; }
  .abb-header-text .lead { display: none; }
  .abb-header .abb-burger { display: inline-flex; }
}

@media (max-width: 900px) {
  .lp-nav[data-nav-breakpoint="900"] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin: 6px 0 0;
    padding: 8px 16px 12px;
    background: #020617;
    border-bottom: 1px solid #1f2933;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45);
  }
  .lp-nav[data-nav-breakpoint="900"].open { display: flex; }
  .lp-nav[data-nav-breakpoint="900"].open > a,
  .lp-nav[data-nav-breakpoint="900"].open > button {
    width: 100%;
    justify-content: flex-start;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 15px;
    text-align: left;
  }
}

@media (max-width: 768px) {
  .lp-nav[data-nav-breakpoint="768"] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin: 6px 0 0;
    padding: 8px 16px 12px;
    background: #020617;
    border-bottom: 1px solid #1f2933;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45);
  }
  .lp-nav[data-nav-breakpoint="768"].open { display: flex; }
  .lp-nav[data-nav-breakpoint="768"].open > a,
  .lp-nav[data-nav-breakpoint="768"].open > button {
    width: 100%;
    justify-content: flex-start;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 15px;
    text-align: left;
  }
}