/* ==========================================================================
   SFRCalc header — nav, hero, category band
   Everything is prefixed .sfr-hd so it cannot collide with existing rules.
   Append to your existing stylesheet, or link this file separately.
   ========================================================================== */

.sfr-hd {
  /* ---- Tokens. Change these, not the rules below. ---- */
  --sfr-ink:        #12171D;
  --sfr-ink-2:      #3D4752;
  --sfr-ink-3:      #5A6672;
  --sfr-paper:      #FFFFFF;
  --sfr-surface:    #F4F6F8;
  --sfr-border:     #DCE1E6;
  --sfr-border-2:   #C3CBD3;
  --sfr-accent:     #15605A;  /* 7.4:1 on white */
  --sfr-accent-ink: #0C423E;
  --sfr-accent-lt:  #5EC8B8;  /* 9.1:1 on --sfr-dark */
  --sfr-hot:        #B4531A;  /* 5.0:1 on white */
  --sfr-dark:       #12171D;
  --sfr-dark-line:  #2B333C;
  --sfr-dark-mute:  #A9B3BD;
  --sfr-dark-mute2: #8E9AA5;

  /* System stack keeps the page fast — no webfont request.
     To use IBM Plex instead, add this to <head>:
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap">
     then put 'IBM Plex Sans' / 'IBM Plex Mono' at the front of these two. */
  --sfr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  --sfr-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  font-family: var(--sfr-font);
  color: var(--sfr-ink);
  -webkit-font-smoothing: antialiased;
}

.sfr-hd *,
.sfr-hd *::before,
.sfr-hd *::after { box-sizing: border-box; }

.sfr-hd__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ============================== NAV ============================== */

.sfr-hd__nav {
  position: relative;
  background: var(--sfr-paper);
  border-bottom: 1px solid var(--sfr-border);
}

.sfr-hd__bar {
  min-height: 68px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.sfr-hd__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--sfr-ink);
  padding: 14px 0;
}
.sfr-hd__brand svg { display: block; flex: none; }
.sfr-hd__wordmark {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sfr-hd__wordmark span { color: var(--sfr-ink-3); }

.sfr-hd__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.sfr-hd__link {
  font-size: 15px;
  font-weight: 500;
  color: var(--sfr-ink);
  text-decoration: none;
  border-radius: 8px;
  padding: 10px 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.sfr-hd__link:hover { background: var(--sfr-surface); color: var(--sfr-ink); }

/* ---- Calculators dropdown (native <details>, works without JS) ---- */

.sfr-hd__dd { position: static; }

.sfr-hd__ddbtn {
  font-size: 15px;
  font-weight: 500;
  color: var(--sfr-ink);
  background: var(--sfr-surface);
  border: 1px solid var(--sfr-border);
  border-radius: 8px;
  padding: 10px 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}
.sfr-hd__ddbtn::-webkit-details-marker { display: none; }
.sfr-hd__ddbtn::marker { content: ""; }
.sfr-hd__ddbtn svg { display: block; transition: transform 120ms ease; }
.sfr-hd__dd[open] .sfr-hd__ddbtn svg { transform: rotate(180deg); }
.sfr-hd__ddbtn:focus-visible,
.sfr-hd__link:focus-visible,
.sfr-hd__cta:focus-visible,
.sfr-hd__cta--ghost:focus-visible,
.sfr-hd__card:focus-visible {
  outline: 2px solid var(--sfr-accent);
  outline-offset: 2px;
}

.sfr-hd__ddpanel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 40;
  background: var(--sfr-paper);
  border-top: 1px solid var(--sfr-border);
  border-bottom: 1px solid var(--sfr-border);
  box-shadow: 0 10px 24px rgba(18, 23, 29, 0.08);
}
.sfr-hd__ddgrid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 32px 32px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.sfr-hd__ddcol { display: flex; flex-direction: column; gap: 10px; }
.sfr-hd__ddhead {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sfr-accent);
}
.sfr-hd__ddlink {
  font-size: 14px;
  color: var(--sfr-ink);
  text-decoration: none;
  padding: 2px 0;
}
.sfr-hd__ddlink:hover { color: var(--sfr-accent-ink); text-decoration: underline; }

/* ============================== HERO ============================== */

.sfr-hd__hero {
  background: var(--sfr-surface);
  border-bottom: 1px solid var(--sfr-border);
}
.sfr-hd__herogrid {
  padding: 72px 32px 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
}
.sfr-hd__herotext {
  flex: 999 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sfr-hd__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sfr-accent);
}
.sfr-hd__h1 {
  margin: 0;
  font-size: clamp(36px, 4.6vw, 58px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.sfr-hd__sub {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--sfr-ink-2);
  max-width: 34em;
}

.sfr-hd__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
}
.sfr-hd__cta,
.sfr-hd__cta--ghost {
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  padding: 15px 24px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sfr-hd__cta {
  color: #FFFFFF;
  background: var(--sfr-accent);
  border: 1px solid var(--sfr-accent);
}
.sfr-hd__cta:hover { background: var(--sfr-accent-ink); border-color: var(--sfr-accent-ink); color: #FFFFFF; }
.sfr-hd__cta svg { display: block; }
.sfr-hd__cta--ghost {
  color: var(--sfr-ink);
  background: var(--sfr-paper);
  border: 1px solid var(--sfr-border-2);
}
.sfr-hd__cta--ghost:hover { border-color: var(--sfr-ink-3); color: var(--sfr-ink); }

.sfr-hd__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--sfr-border);
}
.sfr-hd__stat { display: flex; align-items: baseline; gap: 7px; }
.sfr-hd__statnum {
  font-family: var(--sfr-mono);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sfr-hd__statlbl { font-size: 14px; color: var(--sfr-ink-2); }
.sfr-hd__sep { color: #A9B3BD; }

/* ---- Sample calculation card ---- */

.sfr-hd__card-sample {
  flex: 1 1 376px;
  min-width: 0;
  background: var(--sfr-dark);
  border-radius: 14px;
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sfr-hd__cardtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sfr-hd__cardtag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sfr-accent-lt);
}
.sfr-hd__cardnote { font-size: 11px; color: var(--sfr-dark-mute); }

.sfr-hd__pairs,
.sfr-hd__outs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sfr-hd__pairs { gap: 16px; }
.sfr-hd__outs  { gap: 18px 16px; }

.sfr-hd__field { display: flex; flex-direction: column; gap: 3px; }
.sfr-hd__flabel { font-size: 12px; color: var(--sfr-dark-mute); }
.sfr-hd__fvalue {
  font-family: var(--sfr-mono);
  font-size: 17px;
  font-weight: 500;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.sfr-hd__ovalue {
  font-family: var(--sfr-mono);
  font-size: 28px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.sfr-hd__rule { height: 1px; background: var(--sfr-dark-line); }
.sfr-hd__assume {
  font-size: 11px;
  line-height: 1.5;
  color: var(--sfr-dark-mute2);
  border-top: 1px solid var(--sfr-dark-line);
  padding-top: 12px;
}

/* ========================= CATEGORY BAND ========================= */

.sfr-hd__band { background: var(--sfr-paper); }
.sfr-hd__bandinner {
  padding: 56px 32px 64px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.sfr-hd__bandhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.sfr-hd__h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sfr-hd__bandsub { font-size: 15px; color: var(--sfr-ink-3); }

.sfr-hd__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.sfr-hd__card {
  text-decoration: none;
  color: inherit;
  background: var(--sfr-paper);
  border: 1px solid var(--sfr-border);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sfr-hd__card:hover {
  border-color: var(--sfr-border-2);
  box-shadow: 0 4px 14px rgba(18, 23, 29, 0.06);
  color: inherit;
}
.sfr-hd__card--alt { background: var(--sfr-surface); }
.sfr-hd__card svg { display: block; }
.sfr-hd__cardtitle { font-size: 16px; font-weight: 600; }
.sfr-hd__cardbody { font-size: 14px; line-height: 1.5; color: var(--sfr-ink-2); }
.sfr-hd__cardcount {
  font-size: 13px;
  font-weight: 600;
  color: var(--sfr-accent);
  margin-top: auto;
  padding-top: 6px;
}
.sfr-hd__cardcount--hot { color: var(--sfr-hot); }

/* ---- Category cards: each lists a link to every calculator in the category ---- */

.sfr-hd__cardtitle { margin: 0; }
.sfr-hd__cardlinks {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  border-top: 1px solid var(--sfr-border);
}
.sfr-hd__cardlinks li { border-bottom: 1px solid var(--sfr-border); }
.sfr-hd__cardlinks li:last-child { border-bottom: 0; }
.sfr-hd__cardlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--sfr-ink);
  text-decoration: none;
}
.sfr-hd__cardlink::after { content: "\2192"; color: var(--sfr-accent); }
.sfr-hd__cardlinks--hot .sfr-hd__cardlink::after { color: var(--sfr-hot); }
.sfr-hd__cardlink:hover { color: var(--sfr-accent-ink); text-decoration: underline; }
.sfr-hd__cardlink:focus-visible { outline: 2px solid var(--sfr-accent); outline-offset: 2px; }

/* ============================ RESPONSIVE ============================ */

@media (max-width: 1000px) {
  .sfr-hd__ddgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
  .sfr-hd__cards  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .sfr-hd__inner      { padding: 0 20px; }
  .sfr-hd__herogrid   { padding: 44px 20px 40px; gap: 36px; }
  .sfr-hd__bandinner  { padding: 40px 20px 48px; }
  .sfr-hd__ddgrid     { padding: 24px 20px 28px; }
  .sfr-hd__bar        { min-height: 60px; }
  .sfr-hd__sub        { font-size: 17px; }
  .sfr-hd__h2         { font-size: 23px; }

  /* Panel flows inline rather than overlaying, so it pushes the page down */
  .sfr-hd__ddpanel { position: static; box-shadow: none; }
}

@media (max-width: 560px) {
  .sfr-hd__links   { gap: 2px; }
  .sfr-hd__link,
  .sfr-hd__ddbtn   { font-size: 14px; padding: 10px 11px; }
  .sfr-hd__ddgrid  { grid-template-columns: minmax(0, 1fr); }
  .sfr-hd__cards   { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sfr-hd__card    { padding: 16px; }
  .sfr-hd__ctas    { flex-direction: column; align-items: stretch; }
  .sfr-hd__cta,
  .sfr-hd__cta--ghost { justify-content: center; }
  .sfr-hd__card-sample { flex-basis: 100%; padding: 20px; }
  .sfr-hd__ovalue  { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .sfr-hd__ddbtn svg { transition: none; }
}