/* ==========================================================================
   Tell Equipment — New England Section Compatibility Layer
   File: css/ne-section-compat-20260915.css   |  2026-09-15
   --------------------------------------------------------------------------
   WHY THIS EXISTS
   The New England hub, state and city pages were generated with a section
   class vocabulary (.sec-kicker / .sec-h / .sec-p / .cta-row / .faq-q) that
   does not exist in any Tell stylesheet. 3,801 elements across 76 pages were
   therefore rendering as unstyled browser-default text.

   This layer maps that vocabulary onto the EXISTING 8K design tokens
   (--t-display, --ink, --red, --steel, --line, --paper) so the New England
   pages inherit the identical look as the main site. No new design language
   is introduced and no existing selector is overridden.

   Load AFTER tellequipment-8k.css and tellequipment-v3-layer.css.
   ========================================================================== */

/* ── Section kicker  (mirrors the main site's small eyebrow label) ───────── */
.sec-kicker{
  font-family:var(--t-mono,ui-monospace,"JetBrains Mono",monospace);
  font-size:11px;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--red,#af1314);
  display:block;
  margin:0 0 14px;
}

/* ── Section heading  (mirrors `.sec h2` exactly) ───────────────────────── */
.sec-h{
  font-family:var(--t-display,"Barlow Condensed",sans-serif);
  font-size:clamp(30px,3.6vw,46px);
  font-weight:800;
  text-transform:uppercase;
  line-height:1.02;
  letter-spacing:-.005em;
  color:var(--ink,#0d1520);
  margin:0 0 18px;
}
.sec-h em{font-style:normal;color:var(--red,#af1314);}

/* Heading underline rule — same treatment as .sec-head-rule */
.sec-h::after{
  content:"";
  display:block;
  height:3px;
  width:64px;
  background:var(--red,#af1314);
  margin-top:18px;
}

/* ── Body paragraph  (mirrors `.sec .lede`) ─────────────────────────────── */
.sec-p{
  color:var(--steel,#5a6b7d);
  font-size:16.5px;
  line-height:1.72;
  max-width:70ch;
  margin:0 0 18px;
}
.sec-p:last-child{margin-bottom:0;}

/* ── CTA row  (button group) ────────────────────────────────────────────── */
.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  margin-top:28px;
}

/* ── FAQ question  (.faq-item already exists; this styles its heading) ──── */
.faq-q{
  font-family:var(--t-display,"Barlow Condensed",sans-serif);
  font-size:19px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.25;
  color:var(--ink,#0d1520);
  margin:0 0 10px;
}

/* ══════════════════════════════════════════════════════════════════════════
   COLOR DIVIDE (Nisso rule, 2026-09-09) — SALES = #0f3fa8 · REPAIRS = #af1314
   Preserved on the compat classes so division colour survives this fix.
   ═════════════════════════════════════════════════════════════════════════ */
/* NOTE: .chip-sales / .chip-repair are already defined in
   tellequipment-responsive-20260909.css as FILLED badges
   (coloured background + white text, !important). Do not override them here —
   the divide colour is already correct. We only colour bare .sec-kicker
   elements that carry no chip class, plus the heading rule. */
.div-sales  .sec-kicker:not([class*="chip-"]){color:#0f3fa8;}
.div-sales  .sec-h::after{background:#0f3fa8;}

.div-repair .sec-kicker:not([class*="chip-"]){color:#af1314;}
.div-repair .sec-h::after{background:#af1314;}

/* ── Dark section variants (match .bg-dark / .bg-navy behaviour) ────────── */
.bg-dark .sec-h,
.bg-navy .sec-h,
.bg-dark .faq-q,
.bg-navy .faq-q{color:#fff;}
.bg-dark .sec-p,
.bg-navy .sec-p{color:#9db0c2;}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:760px){
  .sec-h{font-size:clamp(25px,7vw,33px);}
  .sec-p{font-size:15.5px;line-height:1.68;}
  .sec-kicker{font-size:10px;letter-spacing:.28em;}
  .cta-row{gap:10px;}
  .cta-row .btn,
  .cta-row .btn-line,
  .cta-row .btn-red{width:100%;justify-content:center;text-align:center;}
}

/* ===== QUOTE-DARK 2026-09-28 — #quote was light bg with white-text buttons/links (invisible) ===== */
#quote{background:#0a1524 !important}
#quote .sec-kicker{color:#ff6a5e !important}
#quote .sec-h{color:#eaf1fa !important}
#quote .sec-p{color:#c3d1e2 !important}
#quote .sec-p a{color:#ff8a76 !important}
#quote .sec-p a:hover{color:#ffb3a8 !important}
#quote .btn-line{border-color:rgba(255,255,255,.45) !important}