/* Shared top-nav + hamburger (bingi). Relies on each page's :root tokens.
   Desktop and mobile both show: wordmark · Savings calculator · Join CTA · hamburger.
   The hamburger panel holds the full page directory (incl. secondary pages). */

nav .links { display: flex; align-items: center; gap: 22px; }

/* Lock header link styling — no default underline / link-blue / visited states.
   The logo in particular must always render as the branded wordmark. */
nav a { text-decoration: none; }
nav .wordmark, nav a.wordmark:visited {
  color: var(--text); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em;
}
nav .wordmark span { color: var(--accent); }
nav .links a.plain, nav .links a.plain:visited {
  color: var(--text-dim); font-size: .92rem; font-weight: 600;
}
nav .links a.plain:hover { color: var(--text); }

.nav-burger {
  display: inline-flex; align-items: center;
  background: none; border: 0; color: var(--text);
  cursor: pointer; padding: 6px; margin: -6px -6px -6px 0; line-height: 0;
}
.nav-burger .i-close { display: none; }
.nav-burger[aria-expanded="true"] .i-open { display: none; }
.nav-burger[aria-expanded="true"] .i-close { display: block; }

/* Responsive labels: short variants hidden on desktop */
.cta-mini .lbl-sm, .plain .lbl-sm { display: none; }

/* Dropdown panel */
.nav-panel { border-top: 1px solid var(--border); background: var(--bg-card); }
.nav-panel-inner { max-width: 1080px; margin: 0 auto; padding: 4px 24px 10px; }
.nav-panel a {
  display: block; padding: 15px 2px; color: var(--text); text-decoration: none;
  font-weight: 600; font-size: 1.02rem; border-bottom: 1px solid var(--border);
}
.nav-panel a:last-child { border-bottom: 0; }
.nav-panel a:hover { color: var(--accent); }

@media (max-width: 720px) {
  nav .links { gap: 14px; }
  .cta-mini .lbl-lg, .plain .lbl-lg { display: none; }
  .cta-mini .lbl-sm, .plain .lbl-sm { display: inline; }
  nav a.cta-mini { padding: 8px 14px; font-size: .85rem; }
}