/*
Theme Name:   Eco Comfort HVAC — Child
Theme URI:    https://ecocomforthvac.ca
Description:  Child theme for Eco Comfort HVAC Inc. Design-system foundation: self-hosted Poppins, brand tokens, and the reusable component CSS (buttons, cards, sections, credibility band, emergency bar). All custom rules are namespaced under .ecc-* so nothing bleeds into Elementor. Parent theme assumed: Hello Elementor (change the Template: line below if the parent differs).
Author:       Eco Comfort HVAC
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  eco-comfort-child
*/

/* =========================================================================
   0. SELF-HOSTED POPPINS  (OFL — see fonts/Poppins-OFL-LICENSE.txt)
   Files are latin-subset woff2. url() is relative to THIS file (theme root),
   so it resolves correctly wherever the theme is installed.
   ========================================================================= */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-700.woff2") format("woff2");
}

/* =========================================================================
   1. TOKENS  — mirror these into Elementor Global Colors (see entry sheet).
   Neutrals use the approved v5 warmer values.
   ========================================================================= */
:root {
  /* Brand (→ Elementor Global Colors) */
  --ecc-indigo:      #2E3192; /* Primary  — headings, links, primary buttons */
  --ecc-green:       #43B649; /* Secondary — accent/leaf/decorative ONLY */
  --ecc-ink:         #1C2033; /* Text / dark sections */
  --ecc-ink-soft:    #3A3F5C; /* Muted text */
  --ecc-paper:       #FBFBFD; /* Page background (v5 warm) */
  --ecc-panel:       #F1F2F8; /* Alternating section bg (v5 warm) */
  --ecc-line:        #E1E3EE; /* Borders / rules (v5 warm) */
  --ecc-emergency:   #E8621F; /* No-heat CTA ONLY. Never decorative. */

  /* Derived shades — NOT Global Colors. Contrast + hover helpers. */
  --ecc-indigo-deep: #20226B; /* button hover, deepest sections */
  --ecc-green-deep:  #2F8F38; /* the only green that may carry white text / be a meaningful icon */
  --ecc-green-tint:  #EAF7EB; /* soft eco/indoor-air section bg */
  --ecc-emergency-deep: #C9500F; /* emergency button hover */
  --ecc-white:       #FFFFFF;

  /* Type */
  --ecc-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --ecc-step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --ecc-step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --ecc-step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --ecc-step-2:  clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --ecc-step-3:  clamp(1.95rem, 1.65rem + 1.5vw, 2.9rem);
  --ecc-step-4:  clamp(2.4rem, 1.85rem + 2.6vw, 4.2rem);

  /* Layout */
  --ecc-wrap: 1120px;
  --ecc-section: clamp(3.5rem, 8vw, 6.5rem);
  --ecc-section-tight: clamp(2.5rem, 5vw, 4rem);
  --ecc-gap: 1.5rem;
  --ecc-radius: 14px;
  --ecc-radius-sm: 8px;
  --ecc-shadow-sm: 0 1px 2px rgba(28,32,51,.06);
  --ecc-shadow-md: 0 6px 24px rgba(28,32,51,.08);
}

/* =========================================================================
   2. BASE  — the site font only. No global color/spacing overrides that
   could clobber Elementor. (Headings, colors, margins come from Elementor
   Global Fonts/Colors + per-widget, not from bare-element rules here.)
   ========================================================================= */
body { font-family: var(--ecc-font); }

/* Accessible focus ring — outline only, so it can't shift layout or color.
   Applies to real interactive elements' keyboard focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.ecc-btn:focus-visible {
  outline: 3px solid var(--ecc-indigo);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   3. LAYOUT HELPERS
   ========================================================================= */
.ecc-wrap { width: min(100% - 2.5rem, var(--ecc-wrap)); margin-inline: auto; }
.ecc-section { padding-block: var(--ecc-section); }
.ecc-section--tight { padding-block: var(--ecc-section-tight); }
.ecc-section--panel { background: var(--ecc-panel); }
.ecc-section--tint  { background: var(--ecc-green-tint); }
.ecc-section--dark  { background: var(--ecc-ink); color: var(--ecc-paper); } /* punctuation only */
.ecc-section--dark :where(h1,h2,h3,h4) { color: var(--ecc-white); }
.ecc-lede { font-size: var(--ecc-step-1); line-height: 1.45; color: var(--ecc-ink-soft); max-width: 60ch; }
.ecc-section--dark .ecc-lede { color: #C7CAE0; }

/* =========================================================================
   4. BUTTONS  — contrast-locked.
   Indigo carries white text at any size (10.7:1).
   Green (#43B649) FAILS with white text (2.6:1) -> green button uses
   green-deep #2F8F38 + WHITE, forced to LARGE-BOLD so 3:1 applies (4.1:1).
   Emergency #E8621F + white is 3.4:1 -> LARGE-BOLD only. Body-size orange
   text is never allowed.
   ========================================================================= */
.ecc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--ecc-font); font-weight: 600; font-size: 1.0625rem; line-height: 1;
  padding: .85em 1.4em; border-radius: var(--ecc-radius-sm);
  border: 2px solid transparent; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Primary — indigo, white text (safe at any size) */
.ecc-btn--primary { background: var(--ecc-indigo); color: var(--ecc-white); }
.ecc-btn--primary:hover { background: var(--ecc-indigo-deep); color: var(--ecc-white); }
/* Ghost — indigo text + border on light (indigo text = 10.7:1) */
.ecc-btn--ghost { background: transparent; color: var(--ecc-indigo); border-color: var(--ecc-indigo); }
.ecc-btn--ghost:hover { background: var(--ecc-indigo); color: var(--ecc-white); }
/* Green — MUST be large-bold; uses green-deep, never brand green */
.ecc-btn--green { background: var(--ecc-green-deep); color: var(--ecc-white); font-weight: 700; font-size: 1.1875rem; }
.ecc-btn--green:hover { background: #267A2E; color: var(--ecc-white); }
/* Emergency — MUST be large-bold; no-heat CTA only */
.ecc-btn--emergency { background: var(--ecc-emergency); color: var(--ecc-white); font-weight: 700; font-size: 1.1875rem; }
.ecc-btn--emergency:hover { background: var(--ecc-emergency-deep); color: var(--ecc-white); }
.ecc-btn--block { display: flex; width: 100%; }

/* Meaningful green checkmark (e.g. "included") — green-deep clears 3:1 */
.ecc-check { color: var(--ecc-green-deep); font-weight: 700; }
/* Purely decorative leaf/accent may use brand green */
.ecc-accent { color: var(--ecc-green); }

/* =========================================================================
   5. CREDIBILITY BAND  (dark, ink bg — punctuation). White text; green/orange
   never used as the text here.
   ========================================================================= */
.ecc-band { background: var(--ecc-ink); color: var(--ecc-white); }
.ecc-band__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem 1.5rem; padding-block: 1.15rem;
  font-size: var(--ecc-step--1); font-weight: 600; letter-spacing: .01em;
}
.ecc-band__item { display: inline-flex; align-items: center; gap: .5rem; }
.ecc-band__sep { color: #6C7196; } /* subtle divider dot/pipe */

/* =========================================================================
   6. EMERGENCY BAR  — BUILT, NOT LIVE.
   Left hidden until real overnight capacity exists. To enable later:
   remove `display:none` (or add class `ecc-emergency-bar--live`).
   ========================================================================= */
.ecc-emergency-bar { display: none; }
.ecc-emergency-bar--live {
  display: block; background: var(--ecc-emergency); color: var(--ecc-white);
}
.ecc-emergency-bar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem 1rem;
  padding-block: .7rem; font-weight: 700; font-size: 1.1875rem; text-align: center;
}
.ecc-emergency-bar a { color: var(--ecc-white); text-decoration: underline; }

/* =========================================================================
   7. CARDS + GRIDS
   ========================================================================= */
.ecc-card {
  background: var(--ecc-white); border: 1px solid var(--ecc-line);
  border-radius: var(--ecc-radius); box-shadow: var(--ecc-shadow-sm);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.ecc-card--lift { box-shadow: var(--ecc-shadow-md); }
.ecc-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.ecc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.ecc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }

.ecc-service-card { display: flex; flex-direction: column; gap: .6rem; }
.ecc-service-card h3 { font-size: var(--ecc-step-1); color: var(--ecc-indigo); margin: 0; }
.ecc-service-card p  { color: var(--ecc-ink-soft); margin: 0; }
.ecc-service-card a  { color: var(--ecc-indigo); font-weight: 600; text-decoration: none; }
.ecc-service-card a:hover { text-decoration: underline; }

/* Equipment model card */
.ecc-eqcard { display: flex; flex-direction: column; gap: .5rem; }
.ecc-eqcard__brand { font-size: var(--ecc-step--1); text-transform: uppercase; letter-spacing: .06em; color: var(--ecc-ink-soft); }
.ecc-eqcard__title { font-size: var(--ecc-step-1); color: var(--ecc-indigo); margin: 0; }
.ecc-eqcard__spec  { font-size: var(--ecc-step--1); color: var(--ecc-ink-soft); }

/* Image placeholder for un-sourced manufacturer photos */
.ecc-img-placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 4 / 3; background: var(--ecc-panel); border: 1px dashed var(--ecc-line);
  border-radius: var(--ecc-radius-sm); color: var(--ecc-ink-soft);
  font-size: var(--ecc-step--1); padding: 1rem;
}

/* =========================================================================
   8. PRICING — "Included vs may add cost" two-column + price table
   ========================================================================= */
.ecc-cols2 { display: grid; gap: clamp(1.25rem, 4vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.ecc-list-check, .ecc-list-plus { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ecc-list-check li, .ecc-list-plus li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .25rem; }
.ecc-list-check li::before { content: "✓"; color: var(--ecc-green-deep); font-weight: 700; }
.ecc-list-plus  li::before { content: "+"; color: var(--ecc-ink-soft);  font-weight: 700; }

.ecc-price-table { width: 100%; border-collapse: collapse; }
.ecc-price-table th, .ecc-price-table td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid var(--ecc-line); }
.ecc-price-table th { font-size: var(--ecc-step--1); text-transform: uppercase; letter-spacing: .05em; color: var(--ecc-ink-soft); }
.ecc-price-from { color: var(--ecc-indigo); font-weight: 700; white-space: nowrap; }

/* =========================================================================
   9. FAQ  — readers only (NO FAQPage schema). Native details/summary.
   ========================================================================= */
.ecc-faq { display: grid; gap: .75rem; }
.ecc-faq details { border: 1px solid var(--ecc-line); border-radius: var(--ecc-radius-sm); background: var(--ecc-white); }
.ecc-faq summary { cursor: pointer; padding: 1rem 1.15rem; font-weight: 600; color: var(--ecc-ink); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.ecc-faq summary::-webkit-details-marker { display: none; }
.ecc-faq summary::after { content: "+"; color: var(--ecc-indigo); font-weight: 700; }
.ecc-faq details[open] summary::after { content: "–"; }
.ecc-faq details > p { margin: 0; padding: 0 1.15rem 1.15rem; color: var(--ecc-ink-soft); }

/* =========================================================================
   10. FORMS
   ========================================================================= */
.ecc-field { display: grid; gap: .35rem; margin-bottom: 1rem; }
.ecc-field label { font-size: var(--ecc-step--1); font-weight: 600; color: var(--ecc-ink); }
.ecc-field input, .ecc-field textarea, .ecc-field select {
  font: inherit; font-size: var(--ecc-step-0); color: var(--ecc-ink);
  padding: .7rem .85rem; border: 1px solid var(--ecc-line); border-radius: var(--ecc-radius-sm);
  background: var(--ecc-white); width: 100%;
}
.ecc-field input:focus, .ecc-field textarea:focus, .ecc-field select:focus { border-color: var(--ecc-indigo); outline: none; }
.ecc-form__note { font-size: var(--ecc-step--1); color: var(--ecc-ink-soft); }

/* =========================================================================
   11. BREADCRUMBS
   ========================================================================= */
.ecc-breadcrumb { font-size: var(--ecc-step--1); color: var(--ecc-ink-soft); }
.ecc-breadcrumb a { color: var(--ecc-indigo); text-decoration: none; }
.ecc-breadcrumb a:hover { text-decoration: underline; }
.ecc-breadcrumb span[aria-current] { color: var(--ecc-ink); }

/* =========================================================================
   12. HEADER PHONE + MOBILE STICKY CALL BAR
   Phone stays visible in the header at all sizes; a sticky call bar appears
   on small screens so the number is always one tap away.
   ========================================================================= */
.ecc-header__phone { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--ecc-indigo); text-decoration: none; white-space: nowrap; }
.ecc-callbar { display: none; }
@media (max-width: 782px) {
  .ecc-callbar {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 999;
    background: var(--ecc-indigo); color: var(--ecc-white);
    align-items: center; justify-content: center; gap: .5rem;
    padding: .9rem 1rem; font-weight: 700; font-size: 1.1875rem; text-decoration: none;
    box-shadow: 0 -2px 12px rgba(28,32,51,.18);
  }
  .ecc-callbar, .ecc-callbar:hover { color: var(--ecc-white); }
  body { padding-bottom: 3.75rem; } /* room for the fixed bar */
}

/* =========================================================================
   13. FOOTER helpers (structure built in Elementor; these style the pieces)
   ========================================================================= */
.ecc-footer { background: var(--ecc-ink); color: #C7CAE0; }
.ecc-footer a { color: var(--ecc-white); text-decoration: none; }
.ecc-footer a:hover { text-decoration: underline; }
.ecc-footer__nap { font-style: normal; line-height: 1.7; }
.ecc-footer__sister { font-size: var(--ecc-step--1); }