/*
 * landing-nav.css
 * ─────────────────
 * Shared nav-bar overrides for the BetterSelf marketing site.
 * Linked from every top-level landing page so the fixed header
 * stays readable on iPhone-class viewports.
 *
 * Why: the nav lockup is logo (height:38px ≈ 199px wide) + a CTA
 * pill. With the longer 'Reserve my spot' CTA label the two
 * collide on viewports ≤ ~400px. This file shrinks the logo and
 * tightens the button on narrow screens so they breathe.
 *
 * Scope: only #main-nav. Everything else inherits each page's
 * existing inline <style> block and tailwind.css.
 */

/* Tablet + below (≤ 640px) ─────────────────────────────────── */
@media (max-width: 640px) {
  #main-nav img {
    /* Override the inline style="height:38px" without !important
       by being more specific. Inline styles win against external
       CSS so we use !important here -- it's the cleanest path
       given 15 pages already ship the inline style attribute. */
    height: 30px !important;
  }
  #main-nav .btn-primary {
    padding: 8px 14px !important;
    font-size: 13px !important;
    gap: 6px;
    white-space: nowrap;
  }
  #main-nav .btn-primary svg {
    width: 12px;
    height: 12px;
  }
  /* Minimum breathing room between logo and button */
  #main-nav > div {
    gap: 12px;
  }
}

/* Small phones (≤ 380px) ────────────────────────────────────── */
@media (max-width: 380px) {
  #main-nav img {
    height: 26px !important;
  }
  #main-nav .btn-primary {
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
}

/* Very narrow (≤ 340px, e.g. iPhone SE 1st gen, fold phones) ── */
@media (max-width: 340px) {
  #main-nav img {
    height: 24px !important;
  }
  #main-nav .btn-primary {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
  #main-nav .btn-primary svg {
    display: none;
  }
  /* Reduce side padding so we keep room for content */
  #main-nav > div {
    padding-left: 16px;
    padding-right: 16px;
  }
}