/**
 * NAVIGATION BAR — the fixed bar at the top of index.html and
 * partner-program.html (logo, About/Services/Clients/Partner links,
 * "Get a Quote" button, and the hamburger menu on mobile). Requires
 * base.css (tokens, .brand-icon) to be linked first.
 *
 * EDIT THIS FILE WHEN YOU WANT TO:
 *   - change the navbar's background, height, or the "scrolled" look
 *     (.nav / .nav.stuck);
 *   - change the logo size in the nav (.nav-logo .brand-icon);
 *   - change nav link spacing/color/hover effect (.nav-links);
 *   - change the "Get a Quote" button style (.nav-cta);
 *   - change the mobile hamburger menu (.ham, .mob-menu) — see the
 *     @media block at the bottom of this file for what only applies on
 *     phone-width screens.
 *
 * The mobile menu's OPEN/CLOSE behavior (not its look) is handled in
 * public/js/marketing/nav.js.
 */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 18px 0; border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), padding .3s var(--ease);
  /* Full-width box, but the content leaves the center empty for the
     lamp (see .nav-right below) — click-through so the lamp underneath
     stays clickable; re-enabled on the actual interactive pieces. */
  pointer-events: none;
}
.nav-logo, .nav-links, .nav-cta, .ham {
  pointer-events: auto;
}
/* The "stuck" look — a solid, blurred background that appears once the
   visitor scrolls down (JavaScript in nav.js adds/removes this class
   based on scroll position). Before scrolling, the nav is transparent
   so it blends into the hero section. */
.nav.stuck {
  background: rgba(10,10,10,.88);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom-color: var(--border);
  padding: 13px 0;
}
[data-theme="light"] .nav.stuck { background: rgba(247,245,242,.88); }
.nav-row { display: flex; align-items: center; justify-content: space-between; }

.nav-logo { display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 0; }
/* Nav gets its own (bigger) icon size, independent of the footer/
   partner-page one, since they've been asked to move in opposite
   directions before. Change 48px here to resize just the nav logo. */
.nav-logo .brand-icon { width: 48px; height: 48px; flex-basis: 48px; }
.nav-logo .brand-icon img { max-width: 44px; max-height: 44px; }

/* The logo has a dark-mode and light-mode version (two <img> tags in the
   HTML); these rules show only the one matching the current theme. */
.nav-logo-mark-light { display: none; }
[data-theme="light"] .nav-logo-mark-dark  { display: none; }
[data-theme="light"] .nav-logo-mark-light { display: block; }
.nav-logo-word { font-family: var(--display); font-size: .82rem; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.nav-logo-word em { font-style: normal; color: var(--accent); }

/* Links + CTA grouped on the right, center stays clear for lamp */
.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a { font-size: .85rem; color: var(--text-3); font-weight: 500; transition: color .22s, text-shadow .22s; }
.nav-links a:hover { color: var(--accent-lt); text-shadow: 0 0 16px rgba(0,255,140,.5); }

/* The green "Get a Quote" pill button in the nav. */
.nav-cta {
  background: var(--accent); color: #fff; padding: 8px 17px; border-radius: 8px;
  font-family: var(--body); font-size: .82rem; font-weight: 700;
  border: none; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s;
}
.nav-cta:hover { background: var(--accent-lt); transform: translateY(-1px); box-shadow: 0 0 18px rgba(0,255,140,.4); }

/* The hamburger icon (3 lines) — hidden on desktop by default, shown
   only on mobile widths (see the @media block below). */
.ham { display: none; flex-direction: column; gap: 4.5px; cursor: pointer; padding: 4px; }
.ham span { display: block; width: 21px; height: 1.5px; background: var(--text-2); border-radius: 2px; }

/* The full-screen menu that slides/fades in when the hamburger is
   tapped. Its open/closed state (the .open class) is toggled by
   JavaScript in nav.js, not by CSS alone. */
.mob-menu {
  display: none; position: fixed; inset: 0;
  background: rgba(10,10,10,.97); backdrop-filter: blur(20px);
  z-index: 201; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
}
[data-theme="light"] .mob-menu { background: rgba(247,245,242,.97); }
.mob-menu.open { display: flex; }
.mob-menu a { font-family: var(--display); font-size: 2rem; font-weight: 700; color: var(--text-2); transition: color .2s; }
.mob-menu a:hover { color: var(--accent); }
.mob-close { position: absolute; top: 20px; right: 28px; font-size: 1.5rem; color: var(--text-3); background: none; border: none; cursor: pointer; }

/* ══════════════════════════════════════════════════
   MOBILE NAVIGATION
   Only applies at 640px window width or narrower. This is what hides
   the normal desktop nav links and shows the hamburger icon instead.
══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .nav-right { display: none; }
  .ham { display: flex; padding: 8px; margin-right: -8px; }
}