/* ═══════════════════════════════════════════════════════════
   RetireVibes — shared nav styles
   Handles: active state, mobile hamburger menu
   ═══════════════════════════════════════════════════════════ */

/* ─── Active nav link ──────────────────────────────────────── */
.nav-links a.nav-active {
  color: var(--terracotta, #C97B5A) !important;
}

/* ─── Hamburger button (hidden on desktop) ─────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 6px;
  transition: background 0.2s ease;
}
.hamburger:hover { background: rgba(27,58,75,0.06); }
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--teal, #1B3A4B);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Mobile nav ────────────────────────────────────────────── */
/* Breakpoint matches existing inline styles on destination pages */
@media (max-width: 980px) {

  /* Show hamburger */
  .hamburger { display: flex; }

  .nav {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 16px 24px;
    flex-wrap: wrap;
  }

  /* Hide the link row; .open reveals it */
  .nav-links {
    display: none !important;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding: 8px 0 16px;
    order: 3;
  }

  .nav-links.open {
    display: flex !important;
  }

  /* Override any existing "hide individual links" rules from inline styles */
  .nav-links.open a,
  .nav-links.open a:not(.nav-cta) {
    display: block !important;
    padding: 13px 4px;
    font-size: 16px;
    border-bottom: 1px solid rgba(27,58,75,0.07);
    border-radius: 0;
  }

  .nav-links.open a:last-child {
    border-bottom: none;
  }

  /* CTA pill on mobile */
  .nav-links.open a.nav-cta {
    margin-top: 10px;
    text-align: center;
    border-radius: 999px !important;
    padding: 13px 20px !important;
    background: var(--teal, #1B3A4B);
    color: #fff !important;
    border-bottom: none !important;
  }
}

@media (max-width: 480px) {
  .nav { padding: 14px 20px; }
}

/* ─── Screen-reader only utility ────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── Focus-visible (global) ────────────────────────────────── */
/* Gold ring — passes WCAG 1.4.11 non-text contrast on all site backgrounds */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold, #C8A064);
  outline-offset: 3px;
  border-radius: inherit;
}

/* ─── Prefers-reduced-motion (global) ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}