/* ==========================================================================
   Calcuvelo — Universal Header component
   --------------------------------------------------------------------------
   Pure CSS. Theme is driven by a `.dark` class on <html> (toggled in
   assets/header.js and pre-applied by a tiny inline <head> script).
   Load this AFTER Tailwind and after assets/site.css.
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.dark .site-header { border-color: #1e293b; background: rgba(2, 6, 23, 0.8); }

.site-brand { font-size: 0.875rem; font-weight: 600; color: #0f172a; }
.dark .site-brand { color: #f1f5f9; }

/* ---------- "Calculators" dropdown ---------- */
.site-nav { position: relative; }

.site-nav-trigger {
  display: inline-flex; align-items: center; gap: 0.2rem;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  border-radius: 0.5rem; padding: 0.4rem 0.5rem;
  font-size: 0.875rem; font-weight: 500; color: #475569;
  transition: background 0.12s, color 0.12s;
}
.site-nav-trigger:hover { background: #f1f5f9; color: #0f172a; }
.site-nav-trigger:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.dark .site-nav-trigger { color: #cbd5e1; }
.dark .site-nav-trigger:hover { background: #1e293b; color: #ffffff; }

.site-nav-caret { height: 1rem; width: 1rem; }  /* rotation set inline by header.js */

.site-nav-menu {
  position: absolute; left: 0; top: calc(100% + 0.4rem); z-index: 50;
  width: min(92vw, 32rem);
  border: 1px solid #e2e8f0; border-radius: 0.75rem; background: #ffffff;
  padding: 0.5rem;
  box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.02);
  /* closed by default — header.js flips opacity / visibility / pointer-events inline
     (no CSS transition: the Tailwind Play CDN's live re-injection stalls transitioned
     inline properties, so we snap instead) */
  opacity: 0; visibility: hidden; pointer-events: none;
}
.dark .site-nav-menu { border-color: #1e293b; background: #0f172a; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.55); }

.site-nav-cols { display: grid; grid-template-columns: 1fr; gap: 0.25rem; }
@media (min-width: 480px) { .site-nav-cols { grid-template-columns: 1fr 1fr; gap: 0.75rem; } }

.site-nav-heading {
  padding: 0.5rem 0.5rem 0.25rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #94a3b8;
}
.dark .site-nav-heading { color: #64748b; }

.site-nav-link {
  display: block; border-radius: 0.5rem; padding: 0.45rem 0.5rem;
  font-size: 0.875rem; color: #475569; text-decoration: none; white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.site-nav-link:hover { background: #f1f5f9; color: #0f172a; }
.site-nav-link.is-active { background: #eef2ff; color: #4338ca; font-weight: 600; }
.dark .site-nav-link { color: #cbd5e1; }
.dark .site-nav-link:hover { background: #1e293b; color: #ffffff; }
.dark .site-nav-link.is-active { background: rgba(79, 70, 229, 0.22); color: #c7d2fe; }

.site-nav-all {
  display: block; margin-top: 0.25rem; border-top: 1px solid #f1f5f9;
  padding: 0.55rem 0.5rem 0.35rem; font-size: 0.8125rem; font-weight: 600;
  color: #4f46e5; text-decoration: none;
}
.site-nav-all:hover { color: #4338ca; }
.dark .site-nav-all { border-color: #1e293b; color: #a5b4fc; }

/* ---------- Flexible right-side badge slot ---------- */
.site-badge-text { font-size: 0.75rem; font-weight: 500; color: #94a3b8; white-space: nowrap; }
.dark .site-badge-text { color: #64748b; }
@media (max-width: 639px) { .site-badge-text { display: none; } }

.site-badge-pill {
  display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap;
  border: 1px solid #a7f3d0; border-radius: 9999px; background: #ecfdf5;
  padding: 0.2rem 0.6rem; font-size: 0.6875rem; font-weight: 500; color: #047857;
}
.site-badge-pill > i { height: 0.375rem; width: 0.375rem; border-radius: 9999px; background: #10b981; }
.dark .site-badge-pill { border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.12); color: #6ee7b7; }
.dark .site-badge-pill > i { background: #34d399; }
@media (max-width: 400px) { .site-badge-pill { display: none; } }

/* ---------- Light / dark toggle switch ---------- */
.theme-toggle {
  position: relative; display: inline-flex; align-items: center; flex: none;
  height: 1.75rem; width: 3rem; padding: 0.125rem;
  border: 1px solid #cbd5e1; border-radius: 9999px; background: #f1f5f9;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.theme-toggle:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.dark .theme-toggle { border-color: #334155; background: #1e293b; }

.theme-toggle-knob {
  display: flex; align-items: center; justify-content: center;
  height: 1.25rem; width: 1.25rem; border-radius: 9999px;
  background: #ffffff; color: #64748b;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
  margin-left: 0;                       /* position set inline by header.js */
  transition: margin-left 0.18s ease;
}
.dark .theme-toggle-knob { background: #020617; color: #cbd5e1; }
.theme-toggle-knob svg { height: 0.875rem; width: 0.875rem; }
.theme-ico-moon { display: none; }
.dark .theme-ico-sun { display: none; }
.dark .theme-ico-moon { display: block; }

/* ---------- Print ---------- */
@media print {
  .site-header { position: static; background: transparent; border: 0; }
  .site-nav, .theme-toggle, .site-badge-text, .site-badge-pill { display: none !important; }
}