/* ==========================================================================
   HVACHUB design system
   Industrial technical-reference identity: deep navy + restrained cyan accent,
   high-contrast neutrals, dense-but-scannable spec tables (NN/g + Baymard
   guidance — see scratchpad ux-research for sources).
   ========================================================================== */

:root {
  --hh-navy: #0f2e4a;          /* brand navy — navbar, footer, group headers */
  --hh-navy-800: #14395b;
  --hh-blue: #14507f;          /* primary action */
  --hh-blue-hover: #0f4066;
  --hh-cyan: #22b8cf;          /* accent — links on dark, highlights, focus  */
  --hh-cyan-700: #1098ad;
  --hh-ink: #1b2a3a;           /* body text */
  --hh-muted: #5b6b7b;
  --hh-bg: #f5f7fa;            /* page background */
  --hh-surface: #ffffff;
  --hh-border: #dde3ea;
  --hh-row-alt: #f2f6f9;
  --hh-row-hover: #e7f4f8;
  --hh-radius: 0.5rem;
  --hh-shadow: 0 1px 2px rgba(15, 46, 74, 0.06), 0 2px 8px rgba(15, 46, 74, 0.06);
}

html { font-size: 15px; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  background: var(--hh-bg);
  color: var(--hh-ink);
  font-family: "Segoe UI", Inter, system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
}

h1, h2, h3, h4, h5, h6 { color: var(--hh-navy); font-weight: 700; }

a { color: var(--hh-blue); }
a:hover { color: var(--hh-blue-hover); }

/* ----- Bootstrap token overrides (only the classes the markup uses) ----- */

.bg-primary, .navbar.bg-primary { background-color: var(--hh-navy) !important; }
.text-primary { color: var(--hh-navy) !important; }

.btn-primary {
  --bs-btn-bg: var(--hh-blue);
  --bs-btn-border-color: var(--hh-blue);
  --bs-btn-hover-bg: var(--hh-blue-hover);
  --bs-btn-hover-border-color: var(--hh-blue-hover);
  --bs-btn-active-bg: var(--hh-navy);
  --bs-btn-active-border-color: var(--hh-navy);
}
.btn-outline-primary {
  --bs-btn-color: var(--hh-blue);
  --bs-btn-border-color: var(--hh-blue);
  --bs-btn-hover-bg: var(--hh-blue);
  --bs-btn-hover-border-color: var(--hh-blue);
  --bs-btn-active-bg: var(--hh-blue);
  --bs-btn-active-border-color: var(--hh-blue);
}
.btn-warning, .btn-warning:hover {
  --bs-btn-bg: var(--hh-cyan);
  --bs-btn-border-color: var(--hh-cyan);
  --bs-btn-hover-bg: var(--hh-cyan-700);
  --bs-btn-hover-border-color: var(--hh-cyan-700);
  --bs-btn-color: #06222e;
  --bs-btn-hover-color: #ffffff;
}
.badge.text-bg-primary { background-color: var(--hh-navy-800) !important; }
.badge.text-bg-info { background-color: var(--hh-cyan-700) !important; color: #fff !important; }
.badge.text-bg-warning { background-color: var(--hh-cyan) !important; color: #06222e !important; }

.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--hh-cyan);
  box-shadow: 0 0 0 0.2rem rgba(34, 184, 207, 0.35);
}

/* ----- Header / navigation ----- */

.navbar { box-shadow: 0 2px 10px rgba(6, 24, 40, 0.25); }
.navbar-brand img { height: 34px; width: auto; display: block; }
.navbar .nav-link { color: rgba(255, 255, 255, 0.85); font-weight: 500; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--hh-cyan); }

.breadcrumb { font-size: 0.875rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--hh-muted); }

/* ----- Cards ----- */

.card {
  border-color: var(--hh-border);
  border-radius: var(--hh-radius);
  box-shadow: var(--hh-shadow);
}
.card:has(a.stretched-link):hover {
  border-color: var(--hh-cyan-700);
  box-shadow: 0 4px 14px rgba(15, 46, 74, 0.14);
}
.card .badge.text-bg-light { border-color: var(--hh-border) !important; color: var(--hh-ink); }

/* ----- Spec tables: zebra striping, hover, navy group bands ----- */

.spec-table { background: var(--hh-surface); font-variant-numeric: tabular-nums; }
.spec-table > tbody > tr.table-primary > th {
  background: var(--hh-navy);
  color: #fff;
  letter-spacing: 0.02em;
  border-color: var(--hh-navy);
}
.spec-table > tbody > tr:nth-child(even):not(.table-primary) > * { background: var(--hh-row-alt); }
.spec-table > tbody > tr:not(.table-primary):hover > * { background: var(--hh-row-hover); }
.spec-table td { font-weight: 600; color: var(--hh-navy-800); }

/* stack label over value on small screens — no horizontal scrolling for single models */
@media (max-width: 575.98px) {
  .spec-table > tbody > tr:not(.table-primary) { display: block; border-bottom: 1px solid var(--hh-border); }
  .spec-table > tbody > tr:not(.table-primary) > th,
  .spec-table > tbody > tr:not(.table-primary) > td {
    display: block;
    width: 100% !important;
    border: 0;
    padding: 0.35rem 0.75rem;
  }
  .spec-table > tbody > tr:not(.table-primary) > th { padding-bottom: 0; font-size: 0.85rem; }
  .spec-table > tbody > tr.table-primary > th { display: block; }
}

/* ----- Hero band on spec pages ----- */

.hero-chips .badge {
  font-weight: 500;
  padding: 0.5em 0.75em;
}

/* ----- Compare table + tray ----- */

.compare-table .compare-sticky {
  position: sticky;
  left: 0;
  background: var(--hh-surface);
  z-index: 1;
}
.compare-table tr.table-primary .compare-sticky { background: var(--hh-navy); color: #fff; }
.compare-table tr.compare-diff > td { background: var(--hh-row-hover); font-weight: 600; }
.compare-table thead th { vertical-align: top; }

#hvac-compare-tray {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--hh-navy);
  color: #fff;
  box-shadow: 0 -2px 12px rgba(6, 24, 40, 0.35);
  z-index: 1040;
}
#hvac-compare-tray .badge { font-weight: 500; }

/* ----- Footer ----- */

footer.footer { background: var(--hh-navy) !important; color: rgba(255, 255, 255, 0.75) !important; }
footer.footer a { color: var(--hh-cyan); text-decoration: none; }
footer.footer a:hover { text-decoration: underline; }
footer.footer strong { color: #fff; }

/* ----- Print: spec pages print as clean datasheets ----- */

@media print {
  header, footer, .breadcrumb, .btn, form, #link-widget { display: none !important; }
  body { background: #fff; }
  .spec-table > tbody > tr.table-primary > th { background: #eee !important; color: #000 !important; }
}