/* ============================================================
   USAFinCalc — Navbar (scoped design tokens, self-contained)
   Vanilla CSS. No Tailwind / Bootstrap / external deps.
   ============================================================ */

/* Default tokens are LIGHT: USAFinCalc now defaults to a light,
   finance-authority theme sitewide, matching the page content. The
   [data-nb-theme="dark"] block below is the override, applied by
   navbar.js when the person explicitly picks dark via the toggle. */
:root {
  --nb-blue:        #0F766E;
  --nb-blue-dark:   #115E59;
  --nb-blue-tint:   rgba(15, 118, 110, 0.10);
  --nb-purple:      #0F3D5E;
  --nb-purple-tint: rgba(15, 61, 94, 0.08);
  --nb-purple-solid: #0F3D5E;

  --nb-bg:          #FFFFFF;
  --nb-border:      #E2E8F0;
  --nb-text:        #0F3D5E;
  --nb-text-muted:  #475569;
  --nb-text-faint:  #64748B;

  --nb-radius:      10px;
  --nb-radius-sm:   8px;
  --nb-height:      72px;

  --nb-font:        'Sora', system-ui, -apple-system, sans-serif;
  --nb-shadow:      0 4px 20px -4px rgba(15, 23, 42, 0.08);
  --nb-focus:       0 0 0 3px rgba(15, 118, 110, 0.35);

  --nb-t-fast:      120ms ease;
  --nb-t-med:       200ms ease;
}

/* Dark theme — explicit opt-in only (see navbar.js initTheme) */
html[data-nb-theme="dark"] {
  --nb-blue:        #2DD4BF;
  --nb-blue-dark:   #5EEAD4;
  --nb-blue-tint:   rgba(45, 212, 191, 0.14);
  --nb-purple:      #A78BFA;
  --nb-purple-tint: rgba(167, 139, 250, 0.16);
  --nb-purple-solid: #6D28D9;

  --nb-bg:          #0B1220;
  --nb-border:      rgba(255,255,255,0.1);
  --nb-text:        #F1F5F9;
  --nb-text-muted:  #94A3B8;
  --nb-text-faint:  #7B90AA;

  --nb-shadow:      0 4px 20px -4px rgba(0, 0, 0, 0.5);
  --nb-focus:       0 0 0 3px rgba(45, 212, 191, 0.4);
}

/* The mobile drawer (.nb-drawer below) is position:fixed and sits off-screen
   via transform when closed. Fixed-position elements can escape a parent's
   overflow:hidden clipping and still expand the document's scrollWidth,
   which was producing a small horizontal-scroll overflow on mobile even
   though the drawer was never visibly on-screen. Clipping at the html
   level (in addition to the existing body{overflow-x:hidden}) closes that
   gap without changing how the drawer looks or animates. */
html { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nb, .nb *, .nb-drawer, .nb-drawer *, .nb-overlay {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Bar ─────────────────────────────────────────────────────── */
.nb {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nb-height);
  background: var(--nb-bg);
  border-bottom: 1px solid var(--nb-border);
  font-family: var(--nb-font);
  transition: background var(--nb-t-med), box-shadow var(--nb-t-med), backdrop-filter var(--nb-t-med);
}

.nb.is-scrolled {
  background: color-mix(in srgb, var(--nb-bg) 85%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: var(--nb-shadow);
}

.nb-inner {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ── Logo ────────────────────────────────────────────────────── */
.nb-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  border-radius: var(--nb-radius-sm);
}
.nb-logo:focus-visible { box-shadow: var(--nb-focus); outline: none; }
.nb-logo-mark { flex-shrink: 0; }
.nb-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.nb-logo-title { font-size: 18px; font-weight: 700; color: var(--nb-text); letter-spacing: -0.3px; }
.nb-logo-accent { color: var(--nb-blue); }
.nb-logo-sub { font-size: 10.5px; font-weight: 500; color: var(--nb-text-faint); letter-spacing: 0.2px; }

/* ── Center links ────────────────────────────────────────────── */
.nb-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}

.nb-item { position: relative; }

.nb-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 12px;
  border: none;
  background: transparent;
  color: var(--nb-text-muted);
  text-decoration: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--nb-radius);
  cursor: pointer;
  position: relative;
  transition: background var(--nb-t-fast), color var(--nb-t-fast);
}

.nb-link:hover { background: var(--nb-blue-tint); color: var(--nb-blue-dark); border-radius: var(--nb-radius); }
.nb-link:focus-visible { outline: none; box-shadow: var(--nb-focus); }

/* Active-state underline (apply .is-active via server/template or JS on current route) */
.nb-link.is-active { color: var(--nb-blue); }
.nb-link.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  background: var(--nb-blue);
  border-radius: 2px;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--nb-t-fast);
}

.nb-caret { transition: transform var(--nb-t-fast); flex-shrink: 0; }
.nb-dd-trigger[aria-expanded="true"] .nb-caret { transform: rotate(180deg); }

/* Dropdown panel — markup ready, only shown on hover/focus/expanded */
.nb-dd {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--nb-bg);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius);
  box-shadow: var(--nb-shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--nb-t-fast), transform var(--nb-t-fast), visibility var(--nb-t-fast);
  z-index: 210;
}

.nb-has-dd:hover .nb-dd,
.nb-has-dd:focus-within .nb-dd,
.nb-dd-trigger[aria-expanded="true"] + .nb-dd {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nb-dd-link {
  display: block;
  padding: 8px 10px;
  border-radius: var(--nb-radius-sm);
  color: var(--nb-text-muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: background var(--nb-t-fast), color var(--nb-t-fast);
}
.nb-dd-link:hover { background: var(--nb-blue-tint); color: var(--nb-blue-dark); }
.nb-dd-link:focus-visible { outline: none; box-shadow: var(--nb-focus); }

/* ── Right actions ───────────────────────────────────────────── */
.nb-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nb-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 240px;
  height: 40px;
  padding: 0 12px;
  background: var(--nb-blue-tint);
  border: 1px solid transparent;
  border-radius: 20px;
  color: var(--nb-text-faint);
  transition: border-color var(--nb-t-fast), box-shadow var(--nb-t-fast);
}
.nb-search:focus-within {
  border-color: var(--nb-blue);
  box-shadow: var(--nb-focus);
  background: var(--nb-bg);
}
.nb-search-icon { flex-shrink: 0; color: var(--nb-text-faint); }
.nb-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--nb-text);
  outline: none;
}
.nb-search-input::placeholder { color: var(--nb-text-faint); }
.nb-search-kbd {
  flex-shrink: 0;
  min-width: 18px;
  padding: 1px 5px;
  border: 1px solid var(--nb-border);
  border-radius: 5px;
  background: var(--nb-bg);
  color: var(--nb-text-faint);
  font-family: var(--nb-font);
  font-size: 11px;
  text-align: center;
}

.nb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--nb-border);
  border-radius: 50%;
  background: var(--nb-bg);
  color: var(--nb-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--nb-t-fast), border-color var(--nb-t-fast), color var(--nb-t-fast);
}
.nb-icon-btn:hover { background: var(--nb-blue-tint); border-color: var(--nb-blue); color: var(--nb-blue-dark); }
.nb-icon-btn:focus-visible { outline: none; box-shadow: var(--nb-focus); }

.nb-icon-sun { display: none; }
html[data-nb-theme="light"] .nb-icon-sun { display: block; }
html[data-nb-theme="light"] .nb-icon-moon { display: none; }

.nb-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--nb-purple);
  border-radius: var(--nb-radius);
  background: var(--nb-purple-tint);
  color: var(--nb-purple);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--nb-t-fast), transform var(--nb-t-fast);
}
.nb-ai-btn:hover { background: var(--nb-purple-solid, #6d28d9); color: #fff; }
.nb-ai-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35); }

/* .nb-badge uses a dedicated solid purple (not --nb-purple, which is
   tuned to be light/legible as foreground text/border, not as a
   background under white text — using it directly here failed WCAG
   contrast at 2.72:1 against white). */
.nb-badge {
  padding: 2px 6px;
  border-radius: 20px;
  background: var(--nb-purple-solid, #6d28d9);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.nb-ai-btn:hover .nb-badge { background: #fff; color: var(--nb-purple-solid, #6d28d9); }

.nb-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-sm);
  background: var(--nb-bg);
  cursor: pointer;
  flex-shrink: 0;
}
.nb-hamburger span {
  width: 18px;
  height: 2px;
  background: var(--nb-text);
  border-radius: 2px;
  transition: transform var(--nb-t-fast), opacity var(--nb-t-fast);
}
.nb-hamburger:focus-visible { outline: none; box-shadow: var(--nb-focus); }
.nb-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nb-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nb-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Mobile drawer ───────────────────────────────────────────── */
.nb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 220;
  opacity: 0;
  transition: opacity var(--nb-t-med);
}
.nb-overlay.is-visible { opacity: 1; }

.nb-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 360px);
  background: var(--nb-bg);
  border-left: 1px solid var(--nb-border);
  z-index: 230;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--nb-t-med);
  overflow-y: auto;
  font-family: var(--nb-font);
}
.nb-drawer.is-open { transform: translateX(0); }

.nb-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 16px;
  border-bottom: 1px solid var(--nb-border);
  flex-shrink: 0;
}

.nb-search-drawer { width: 100%; margin: 12px 16px; }

.nb-drawer-nav { padding: 4px 8px 16px; }
.nb-drawer-nav ul { list-style: none; margin: 0; padding: 0; }

.nb-drawer-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  color: var(--nb-text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--nb-radius);
}
.nb-drawer-link:hover, .nb-drawer-link:focus-visible { background: var(--nb-blue-tint); outline: none; }

.nb-drawer-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: none;
  background: transparent;
  color: var(--nb-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--nb-radius);
  cursor: pointer;
}
.nb-drawer-trigger:hover, .nb-drawer-trigger:focus-visible { background: var(--nb-blue-tint); outline: none; }
.nb-drawer-trigger[aria-expanded="true"] .nb-caret { transform: rotate(180deg); }

.nb-drawer-sub {
  list-style: none;
  margin: 0;
  padding: 0 0 4px 12px;
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--nb-t-med);
}
.nb-drawer-sub > * { overflow: hidden; }
.nb-drawer-group.is-open .nb-drawer-sub { grid-template-rows: 1fr; }

.nb-drawer-sub li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--nb-text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--nb-radius-sm);
}
.nb-drawer-sub li a:hover, .nb-drawer-sub li a:focus-visible { background: var(--nb-blue-tint); color: var(--nb-blue-dark); outline: none; }

.nb-drawer-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid var(--nb-border);
  flex-shrink: 0;
}
.nb-drawer-foot .nb-icon-btn {
  width: auto;
  border-radius: var(--nb-radius);
  padding: 0 14px;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
}
.nb-ai-btn-drawer { flex: 1; justify-content: center; }

body.nb-scroll-lock { overflow: hidden; }

/* ── Responsive ──────────────────────────────────────────────── */
/* Measured empirically: the full nav (logo + 7 links with dropdown
   carets + 240px search box + theme toggle + AI Assistant button) needs
   ~1680px of viewport to lay out without overflowing. Below that —
   including very common laptop widths like 1366px and 1440px — the old
   1024px breakpoint left links/search/AI-button visible but too wide for
   the row, pushing the AI Assistant button (and its "Coming Soon" badge)
   off the right edge of the screen. Switching to the hamburger menu at
   1700px instead of 1024px avoids ever rendering that broken in-between
   state. Re-verify this number if nav items, search width, or button
   labels change. */
@media (max-width: 1700px) {
  .nb-links { display: none; }
  .nb-search { display: none; }
  .nb-hamburger { display: flex; }
}

@media (min-width: 1701px) {
  .nb-drawer, .nb-overlay { display: none; }
}

/* Extra safety margin in case future content (more nav items, a wider
   search box, longer button labels) pushes the natural width up again —
   the AI button degrades gracefully instead of overflowing silently. */
@media (max-width: 1360px) {
  .nb-badge { display: none; }
}

@media (max-width: 1180px) {
  .nb-ai-label { display: none; }
}

@media (max-width: 480px) {
  .nb-inner { padding: 0 16px; gap: 12px; }
  .nb-logo-sub { display: none; }
  .nb-ai-btn { padding: 0 10px; }
  .nb-ai-label { display: none; }
}

/* ==========================================================================
   Shared utility classes
   Extracted from previously-repeated inline style="" attributes to cut
   duplicate bytes across pages (same computed styles, moved to shared CSS).
   ========================================================================== */
.fc-u-badge-link { display:inline-block;padding:8px 14px;background:rgba(37,45,56,0.05);border:1px solid rgba(37,45,56,0.1);border-radius:8px;color:var(--accent,#10B981);text-decoration:none;font-size:13px;font-weight:500 }
.fc-u-copy { text-align:center;font-size:11px;color:var(--text3,#7B90AA);padding:8px 0; }
.fc-u-avatar { width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#10B981,#18D89B);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex-shrink:0 }
.fc-u-notice-row { margin:32px 0;padding:16px 20px;background:rgba(37,45,56,0.03);border:1px solid rgba(37,45,56,0.08);border-radius:12px;display:flex;align-items:center;gap:14px }
@media(max-width:660px){.fc-u-notice-row{margin:14px 0;padding:10px 14px;gap:10px}.fc-u-avatar{width:34px;height:34px;font-size:14px}}
.fc-u-section-title { font-size:18px;font-weight:700;margin-bottom:14px;max-width:980px;margin-left:auto;margin-right:auto;padding:0 24px;box-sizing:border-box }
.fc-u-muted-link { color:#94A3B8;text-decoration:none }
.fc-u-flex-text { font-size:13px;color:var(--text2);line-height:1.6;flex:1 }
.fc-u-callout-red { border-left:3px solid var(--red,#f87171);padding:12px 16px;margin-bottom:12px;background:rgba(248,113,113,0.04);border-radius:0 8px 8px 0; }
.fc-u-strong-text { font-size:15px;font-weight:700;color:var(--text) }
.fc-u-cyan-link { color:var(--cyan);text-decoration:none; }
.fc-u-bordered-box { border:1px solid var(--border,rgba(37,45,56,0.07));border-radius:10px;padding:16px 20px;margin-bottom:12px; }
.fc-u-bold-sm { font-weight:600;font-size:14px }
.fc-u-block-title { font-size:18px;font-weight:600;margin-bottom:16px;color:var(--text,#F1F5F9) }
.fc-u-muted-sm { font-size:12px;color:#94A3B8 }
.fc-u-wide-pad { max-width:980px;margin:0 auto;padding:0 24px 20px }
.fc-u-list-flex { list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0 }