/* ============================================================
   bf-calculators — front-end styles
   Self-contained: works whether or not the Brown & Ferguson V14
   theme is active. Colours/fonts mirror the V14 CI tokens so the
   calculators match the theme (slate results, blue accent, Inter/Roboto).
   The ported calculator markup carries its own inline styles; the rules
   here supply the few classes that markup references (.btn) plus fonts,
   focus states and responsive behaviour.
   ============================================================ */

.bf-calc {
  /* Local copy of the V14 CI tokens (used by .bf-calc-* helpers below). */
  --bf-slate-900: #0B1520;
  --bf-slate-700: #1E293B;
  --bf-slate-600: #2A3744;
  --bf-slate-500: #5C6A79;
  --bf-slate-400: #8B97A5;
  --bf-slate-200: #E1E6EB;
  --bf-blue-700: #004D69;
  --bf-blue-500: #00769E;
  --bf-blue-300: #4C9DBA;
  --ff-head: "Inter", "Helvetica Neue", Arial, sans-serif;
  --ff-body: "Roboto", Arial, sans-serif;

  font-family: var(--ff-body);
  color: var(--bf-slate-700);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  max-width: 980px;
}
.bf-calc *,
.bf-calc *::before,
.bf-calc *::after { box-sizing: border-box; }

.bf-calc h3,
.bf-calc h4 {
  font-family: var(--ff-head);
  color: var(--bf-slate-900);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 12px;
}
/* Dark result panels keep light headings. */
.bf-calc [style*="#0B1520"] h3,
.bf-calc [style*="#0B1520"] h4 { color: #fff; }

.bf-calc p { margin: 0 0 1em; }
.bf-calc label { font-family: var(--ff-head); }

/* Inputs / selects — hairline, blue focus (matches theme .bf-calc-field) */
.bf-calc input[type="text"],
.bf-calc input[type="number"],
.bf-calc select {
  font-family: var(--ff-body);
  color: var(--bf-slate-700);
  background: #fff;
}
.bf-calc input:focus,
.bf-calc select:focus {
  outline: none;
  border-color: var(--bf-blue-500) !important;
  box-shadow: 0 0 0 3px rgba(0, 118, 158, 0.12);
}
.bf-calc input[type="radio"],
.bf-calc input[type="checkbox"] { accent-color: var(--bf-blue-500); }

/* Buttons — replicates the wireframe .btn / .btn-primary */
.bf-calc .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 6px;
  font-family: var(--ff-head);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  text-decoration: none;
  border: none;
}
.bf-calc .btn-primary { background: var(--bf-blue-500); color: #fff; }
.bf-calc .btn-primary:hover,
.bf-calc .btn-primary:focus-visible { background: var(--bf-blue-700); color: #fff; }
.bf-calc .btn:focus-visible { outline: 2px solid var(--bf-slate-900); outline-offset: 2px; }

/* Tabler icons fallback: if the webfont is unavailable, hide empty glyph boxes. */
.bf-calc .ti:not([class*=" ti-"]):empty { display: none; }

/* ---- Theme bf-calc-* helpers (available for parity / future markup) ---- */
.bf-calc .bf-calc-form { background: #fff; border: 1px solid var(--bf-slate-200); padding: 28px; border-radius: 12px; }
.bf-calc .bf-calc-field { margin-bottom: 16px; }
.bf-calc .bf-calc-field label { display: block; font-size: 12px; font-weight: 600; color: var(--bf-slate-700); margin-bottom: 6px; }
.bf-calc .bf-calc-field input,
.bf-calc .bf-calc-field select { width: 100%; padding: 12px 14px; border: 1px solid var(--bf-slate-200); font-size: 15px; border-radius: 6px; }
.bf-calc .bf-calc-result { background: var(--bf-slate-900); border: 1px solid var(--bf-slate-600); padding: 28px; min-height: 200px; color: #C7D0D8; border-radius: 12px; }
.bf-calc .bf-result-big { font-family: var(--ff-head); font-weight: 800; font-size: 38px; color: var(--bf-blue-300); text-align: center; letter-spacing: -0.02em; }
.bf-calc .bf-result-row { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--bf-slate-600); font-size: 14px; }

/* ---- Responsive: stack the two-column form/result grid on narrow screens ---- */
@media (max-width: 720px) {
  .bf-calc > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Calculator suite — tabbed Tools page ([bf_calculators])
   ============================================================ */
.bf-calc-suite { font-family: "Roboto", Arial, sans-serif; max-width: 1080px; margin: 0 auto; }
.bf-calc-suite__tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 32px; }
.bf-calc-suite__tab {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: .9px; text-transform: uppercase;
  padding: 10px 16px; background: #fff; border: 1px solid var(--bf-slate-200, #E1E6EB);
  color: var(--bf-slate-500, #5C6A79); cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.bf-calc-suite__tab:hover { background: var(--bf-slate-050, #F7F9FB); color: var(--bf-slate-900, #0B1520); border-color: var(--bf-slate-500, #5C6A79); }
.bf-calc-suite__tab.is-active { background: var(--bf-slate-900, #0B1520); color: #fff; border-color: var(--bf-slate-900, #0B1520); box-shadow: inset 0 -3px 0 var(--bf-blue-500, #00769E); }
.bf-calc-suite__tab:focus-visible { outline: 2px solid var(--bf-blue-500, #00769E); outline-offset: 2px; }
.bf-calc-suite__panel { display: none; }
.bf-calc-suite__panel.is-active { display: block; }
.bf-calc-suite__panel .bf-calc { max-width: none; }