/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────
   THE SHARED HEADER STYLESHEET (W2 798b ①): the ONE source of the header's look for directmyloan.com AND the
   calculator (debtconsolidationcalculator.directmyloan.com), which links this file from https://directmyloan.com.
   Self-contained: every value is resolved here (no site CSS variables), scoped under header.site, with its own
   resets so each app's base CSS (the site's global.css, the calculator's Tailwind preflight) can't change it.
   Markup (both apps): header.site > .wrap > a.brand > img + input#menu-toggle.menu-toggle + label.menu-button
   + nav.nav > (details.dropdown > summary + ul > li > a) | a | a.ext
   ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
header.site {
  position: sticky; top: 0; z-index: 20;
  background: #06111F; border: 0; margin: 0; color: #E8ECF2;
  font-family: "Source Sans 3 Variable", "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.6; font-weight: 400; letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}
header.site *, header.site *::before, header.site *::after { box-sizing: border-box; }
header.site .wrap {
  max-width: 72rem; margin: 0 auto; padding: 12px 16px; min-height: 64px;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
header.site .brand { display: block; margin-right: auto; text-decoration: none; }
header.site .brand img { display: block; height: 40px; width: auto; max-width: none; }
header.site .nav { display: flex; align-items: center; gap: .25rem 1.1rem; flex-wrap: wrap; font-size: .95rem; margin: 0; padding: 0; }
header.site .nav > a, header.site .dropdown > summary { text-decoration: none; color: #E8ECF2; cursor: pointer; font: inherit; }
header.site .nav > a:hover, header.site .dropdown > summary:hover { color: #C6A76B; }
header.site .nav > a.ext { font-size: .88rem; color: #9FB0C3; }
header.site .dropdown { position: relative; margin: 0; padding: 0; }
header.site .dropdown > summary { display: list-item; list-style: none; }
header.site .dropdown > summary::-webkit-details-marker { display: none; }
header.site .dropdown > summary::after { content: " \25BE"; font-size: .8em; }
header.site .dropdown ul {
  position: absolute; left: 0; top: 1.9rem; margin: 0; padding: .4rem 0; list-style: none;
  background: #0E1B2C; border: 1px solid #22344A; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.45);
  min-width: 14rem; z-index: 30;
}
header.site .dropdown li { margin: 0; padding: 0; }
header.site .dropdown ul a { display: block; padding: .45rem 1rem; text-decoration: none; color: #E8ECF2; }
header.site .dropdown ul a:hover { background: #13233A; color: #C6A76B; }
header.site .menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
header.site .menu-button { display: none; cursor: pointer; font-weight: 600; color: #E8ECF2; border: 1px solid #33465A; border-radius: 8px; padding: .35rem .75rem; }
@media (min-width: 900px) {
  header.site .nav > a:not(.ext) + a.ext { margin-left: .6rem; padding-left: 1.1rem; border-left: 1px solid rgba(255,255,255,.14); }
}
@media (max-width: 760px) {
  header.site .menu-button { display: inline-block; }
  header.site .nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: .25rem; padding-top: .5rem; }
  header.site .menu-toggle:checked ~ .nav { display: flex; }
  header.site .nav > a, header.site .dropdown > summary { padding: .5rem 0; }
  header.site .dropdown ul { position: static; box-shadow: none; border: 0; padding-left: .75rem; }
}
/* The site's home page: transparent at the very top over the hero, solid once scrolled (a data-top attribute). */
header.site[data-top] { background: transparent; }
header.site[data-top]:has(.menu-toggle:checked) { background: rgba(6,17,31,.96); }
@media print { header.site { display: none !important; } }