/* Supra A70 Archive visual theme */
:root {
  --supra-red: #bf1f28;
  --supra-red-dark: #9e1821;
  --supra-ink: #090b0e;
  --supra-ink-2: #11161c;
  --supra-muted: #667085;
  --supra-bg: #f3f4f6;
  --supra-line: #d8dee6;
  --supra-card: #ffffff;
}

html { background: var(--supra-bg); }
body {
  background: linear-gradient(180deg, #f7f8fa 0%, #eef1f5 100%);
  color: #111827;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Header / logo */
.site-masthead {
  background: #000 !important;
  color: white;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.masthead-inner {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 1.1rem 0;
  position: relative;
}

.site-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(1040px, 96vw);
}

.site-logo {
  display: block;
  width: min(1040px, 96vw);
  max-height: 185px;
  object-fit: contain;
}

.masthead-meta { display: none !important; }

.supra-nav {
  background: rgba(8, 10, 13, .99) !important;
  border-bottom: 3px solid var(--supra-red);
  box-shadow: 0 6px 16px rgba(0,0,0,.20);
}

.supra-nav .container-xxl { min-height: 56px; }

.supra-nav .nav-link {
  color: rgba(255,255,255,.82) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: .86rem;
  padding: .95rem .95rem;
  border-bottom: 2px solid transparent;
}

.supra-nav .nav-link:hover,
.supra-nav .nav-link.active {
  color: #fff !important;
  border-bottom-color: var(--supra-red);
}

.btn-danger,
.btn-danger-soft {
  background: var(--supra-red) !important;
  border-color: var(--supra-red) !important;
  color: #fff !important;
}
.btn-danger:hover,
.btn-danger-soft:hover {
  background: var(--supra-red-dark) !important;
  border-color: var(--supra-red-dark) !important;
}

/* Homepage */
.home-hero {
  background:
    radial-gradient(circle at top right, rgba(191,31,40,.08), transparent 32%),
    linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 1.35rem;
  padding: clamp(1.35rem, 3vw, 2.4rem);
  box-shadow: 0 10px 35px rgba(12,18,28,.07);
  overflow: hidden;
}

.eyebrow {
  color: var(--supra-red);
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: .65rem;
}

.hero-copy {
  color: #334155;
  max-width: 45rem;
}

.hero-car-wrap {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-car-image {
  width: min(620px, 100%);
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 24px rgba(0,0,0,.18));
}

.home-panel,
.card,
.list-group,
.table {
  box-shadow: 0 10px 30px rgba(12,18,28,.06), 0 2px 8px rgba(12,18,28,.04);
}

.home-panel {
  background: var(--supra-card);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 1.15rem;
  padding: 1.25rem;
}

.panel-head {
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid #edf1f5;
}

.panel-title {
  font-size: 1.1rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .025em;
  position: relative;
}

.panel-title::after {
  content: "";
  display: block;
  width: 2.2rem;
  height: 3px;
  background: var(--supra-red);
  border-radius: 2px;
  margin-top: .5rem;
}

.quick-card {
  min-height: 100%;
  background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 1rem;
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.quick-card-icon {
  width: 3rem;
  height: 3rem;
  border-radius: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(191,31,40,.09);
  color: var(--supra-red);
  font-size: 1.45rem;
  margin-bottom: .95rem;
}

.quick-card-title {
  font-size: 1.05rem;
  font-weight: 850;
  margin-bottom: .45rem;
}

.quick-card-text {
  color: #475467;
  font-size: .94rem;
}

.recent-list { display: flex; flex-direction: column; gap: .72rem; }

.recent-item {
  display: flex;
  gap: .85rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: .9rem;
  padding: .75rem;
  background: #fff;
  transition: .15s ease;
}
.recent-item:hover {
  border-color: rgba(191,31,40,.35);
  transform: translateY(-1px);
}

.recent-icon {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: 0 0 auto;
}

.recent-icon.type-tsrm { background: #2d79c7; }
.recent-icon.type-ncf { background: #46a758; }
.recent-icon.type-equipment { background: #46a758; }
.recent-icon.type-part { background: #e17819; }
.recent-icon.type-manual { background: #7b4ec8; }
.recent-icon.type-guide { background: #d84d62; }

.recent-type {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
  color: #6b7280;
}

.recent-title { font-weight: 750; line-height: 1.25; }
.recent-subtitle { color: #667085; font-size: .88rem; }

.tiny-link {
  color: var(--supra-red);
  font-size: .9rem;
  text-decoration: none;
  font-weight: 800;
}

.feature-card { display: flex; flex-direction: column; }

.feature-map {
  min-height: 125px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #fafbfd 0%, #f1f5f9 100%);
  border: 1px dashed #d5dde7;
  color: var(--supra-red);
  font-size: 3.1rem;
}

.feature-title {
  font-size: 1.14rem;
  font-weight: 850;
  margin-bottom: .5rem;
}
.feature-text { color: #475467; }
.did-you-know .quote-mark {
  font-size: 4rem;
  line-height: 1;
  color: rgba(191,31,40,.18);
  font-weight: 900;
}

.stats-list { display: flex; flex-direction: column; gap: .75rem; }
.stat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid #edf1f5;
}
.stat-item:last-child { padding-bottom: 0; border-bottom: 0; }
.stat-label-wrap { display: flex; align-items: center; gap: .65rem; }
.stat-icon {
  width: 2.05rem;
  height: 2.05rem;
  border-radius: .65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.stat-icon.tsrm { background: #2d79c7; }
.stat-icon.eq { background: #46a758; }
.stat-icon.mk { background: #7b4ec8; }
.stat-icon.parts { background: #e17819; }
.stat-icon.manuals { background: #4453d4; }
.stat-icon.guides { background: #d84d62; }
.stat-label { color: #344054; font-weight: 650; }
.stat-value { font-size: 1.35rem; font-weight: 900; }

/* Inner pages */
h1, .h1 { font-weight: 850; letter-spacing: .01em; }
main > h1:first-child,
main > .d-flex:first-child h1 {
  border-left: 5px solid var(--supra-red);
  padding-left: .85rem;
}

.card {
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 1rem;
}

.table {
  border-color: #b8c0cc !important;
  background: #fff;
}
.table th,
.table td {
  border: 1px solid #b8c0cc !important;
}
.table thead th {
  background: #151b22 !important;
  color: #fff !important;
  border-color: #2b333d !important;
}

/* EQUIPMENT MATRIX HEADERS
   Keep these headers light. Do not turn them dark again unless explicitly requested.
   The light fill keeps the multi-level engine/trim/header cell lines visible. */
.equipment-matrix-table,
.equipment-table {
  border-collapse: collapse !important;
  border: 2px solid #1f2937 !important;
}

.equipment-matrix-table th,
.equipment-matrix-table td,
.equipment-table th,
.equipment-table td {
  border: 1px solid #1f2937 !important;
}

.equipment-matrix-table thead th,
.equipment-table thead th,
.table.equipment-matrix-table thead th,
.table.equipment-table thead th {
  background: #f4f6f8 !important;
  color: #111827 !important;
  border: 1px solid #1f2937 !important;
}

.equipment-matrix-table thead tr:first-child th,
.equipment-table thead tr:first-child th {
  background: #e7ebf0 !important;
  color: #111827 !important;
  border-top: 2px solid #1f2937 !important;
}

.equipment-matrix-table thead tr:nth-child(2) th,
.equipment-table thead tr:nth-child(2) th {
  background: #eef1f5 !important;
  color: #111827 !important;
}

.equipment-matrix-table thead tr:nth-child(3) th,
.equipment-table thead tr:nth-child(3) th {
  background: #f8fafc !important;
  color: #111827 !important;
  font-weight: 700;
}

.equipment-matrix-table .sticky-column,
.equipment-table .sticky-column {
  background: #f8fafc !important;
}

.form-control,
.form-select {
  border-color: #c9d1dc;
  border-radius: .55rem;
}
.btn { border-radius: .55rem; font-weight: 650; }
.btn-dark { background: #151b22; border-color: #151b22; }
.btn-outline-dark:hover { background: #151b22; border-color: #151b22; }

/* TSRM image safety */
.tsrm-scan,
.tsrm-page-image,
.manual-page-image,
.card img,
main img {
  max-width: 100%;
}
.tsrm-page-view img,
.manual-viewer img {
  height: auto;
}

/* Footer */
.site-footer {
  background: linear-gradient(180deg, #141920 0%, #0e1318 100%);
  color: #eef2f7;
  padding: 2rem 0;
  border-top: 3px solid var(--supra-red);
}
.footer-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-title { font-weight: 850; font-size: 1.1rem; margin-bottom: .4rem; }
.footer-text { color: #c7d0db; max-width: 40rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; }
.footer-links a { color: #fff; text-decoration: none; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  font-size: .95rem;
  color: #d5dde7;
}

/* Existing compatibility */
.hero { background: linear-gradient(135deg, #171717, #3a3a3a); color: white; border-radius: 1rem; padding: 3rem 2rem; }
.debug-panel { position: fixed; left: 0; right: 0; bottom: 0; max-height: 45vh; overflow: auto; background: #111; color: #0f0; font: 12px/1.4 monospace; padding: 12px; z-index: 9999; border-top: 3px solid #0f0; }
.debug-panel pre { color: #baffba; white-space: pre-wrap; }
.debug-title { font-weight: bold; margin-bottom: 6px; }
.equipment-mobile-card { display: none; }

@media (max-width: 1199.98px) {
  .site-logo { max-height: 135px; }
  .masthead-inner { min-height: 160px; }
}

@media (max-width: 991.98px) {
  .site-logo { max-height: 105px; }
  .masthead-inner { min-height: 130px; }
  .home-hero { padding: 1.35rem; }
  .hero-car-wrap { min-height: 180px; }
}

@media (max-width: 768px) {
  .equipment-table { display: none; }
  .equipment-mobile-card { display: block; }
  .footer-grid, .footer-bottom { flex-direction: column; }
}


/* FINAL OVERRIDE: equipment matrix headers must stay light.
   Do not remove or change to dark without explicit permission.
   This is intentionally placed at the very end of the CSS to beat global table styles. */
body main .equipment-matrix-wrap table.equipment-matrix > thead > tr > th,
body main .equipment-matrix-wrap table.equipment-matrix thead th,
body main table.equipment-matrix > thead > tr > th,
body main table.equipment-matrix thead th,
body main table.equipment-table > thead > tr > th,
body main table.equipment-table thead th,
body main table.equipment-matrix-table > thead > tr > th,
body main table.equipment-matrix-table thead th {
  background-color: #f4f6f8 !important;
  background-image: none !important;
  color: #111827 !important;
  border: 1px solid #1f2937 !important;
}

body main .equipment-matrix-wrap table.equipment-matrix > thead > tr:first-child > th,
body main table.equipment-matrix > thead > tr:first-child > th,
body main table.equipment-table > thead > tr:first-child > th,
body main table.equipment-matrix-table > thead > tr:first-child > th {
  background-color: #e4e8ee !important;
  color: #111827 !important;
  border-top: 2px solid #1f2937 !important;
  border-bottom: 1px solid #1f2937 !important;
}

body main .equipment-matrix-wrap table.equipment-matrix > thead > tr:nth-child(2) > th,
body main table.equipment-matrix > thead > tr:nth-child(2) > th,
body main table.equipment-table > thead > tr:nth-child(2) > th,
body main table.equipment-matrix-table > thead > tr:nth-child(2) > th {
  background-color: #edf1f5 !important;
  color: #111827 !important;
}

body main .equipment-matrix-wrap table.equipment-matrix > thead > tr:nth-child(3) > th,
body main table.equipment-matrix > thead > tr:nth-child(3) > th,
body main table.equipment-table > thead > tr:nth-child(3) > th,
body main table.equipment-matrix-table > thead > tr:nth-child(3) > th {
  background-color: #fafbfc !important;
  color: #111827 !important;
}

body main .equipment-matrix-wrap table.equipment-matrix th,
body main .equipment-matrix-wrap table.equipment-matrix td,
body main table.equipment-matrix th,
body main table.equipment-matrix td,
body main table.equipment-table th,
body main table.equipment-table td,
body main table.equipment-matrix-table th,
body main table.equipment-matrix-table td {
  border: 1px solid #1f2937 !important;
}

body main .equipment-matrix-wrap {
  border: 2px solid #1f2937 !important;
}