/* ==========================================================================
   Heating Pro — UX additions (layered on top of styles.css)
   Loaded AFTER styles.css so these rules win where they overlap.
   Contains: hero credibility panel + above-fold rating chip,
             sticky mobile action bar (Call · WhatsApp · Quote).
   Brand tokens (--brand-red etc.) are inherited from styles.css :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Above-the-fold rating chip (all viewports) — instant social proof in hero
   -------------------------------------------------------------------------- */
.hero-trustchip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg);
  font-size: 13px;
  color: var(--fg-muted);
}
.hero-trustchip:hover { opacity: 1; }
.hero-trustchip .stars { display: inline-flex; gap: 1px; color: #f5a623; }
.hero-trustchip .stars svg { width: 15px; height: 15px; fill: currentColor; }
.hero-trustchip strong { color: var(--fg); font-weight: 600; }

/* --------------------------------------------------------------------------
   Hero two-column layout (desktop only) — text left, credibility card right.
   On mobile the card is hidden (the trust-strip below already covers it) and
   the hero falls back to the original single column automatically.
   -------------------------------------------------------------------------- */
.hero-credibility { display: none; }

@media (min-width: 901px) {
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.95fr);
    gap: 56px;
    align-items: center;
  }
  .hero-grid .hero-inner { max-width: none; }

  .hero-credibility {
    display: block;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 26px 26px 24px;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.22);
  }
}

.hero-cred-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.hero-cred-rating .stars { display: inline-flex; gap: 2px; color: #f5a623; }
.hero-cred-rating .stars svg { width: 18px; height: 18px; fill: currentColor; }
.hero-cred-rating .num { font-weight: 700; font-size: 16px; color: var(--fg); }
.hero-cred-rating .meta { font-size: 12.5px; color: var(--fg-muted); line-height: 1.3; }

/* Gas Safe credential — evokes the official yellow/black mark (swap in the
   licensed artwork later by replacing this block with an <img>). */
.hero-gassafe {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: var(--radius);
  background: #ffcf00;
  color: #111;
  margin-bottom: 18px;
}
.hero-gassafe .gs-mark {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-transform: uppercase;
}
.hero-gassafe .gs-no { font-size: 12.5px; font-weight: 600; margin-left: auto; }

.hero-cred-facts { display: flex; flex-direction: column; gap: 13px; margin-bottom: 22px; }
.hero-cred-fact { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--fg-muted); }
.hero-cred-fact strong { color: var(--fg); font-weight: 600; }
.hero-cred-fact svg {
  width: 18px; height: 18px;
  stroke: var(--brand-blue); fill: none; stroke-width: 1.6;
  flex-shrink: 0; margin-top: 1px;
}
.hero-credibility .btn { width: 100%; }

/* --------------------------------------------------------------------------
   FAQ page — clean readable Q&A cards (faq.php)
   -------------------------------------------------------------------------- */
.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px 18px;
}
.faq-item .faq-q {
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.faq-item .faq-a { color: var(--fg-muted); font-size: 15px; line-height: 1.65; }
.faq-item .faq-a p { margin: 0 0 10px; }
.faq-item .faq-a p:last-child { margin-bottom: 0; }
.faq-item .faq-a a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   Sticky mobile action bar — Call · WhatsApp · Quote, on every screen.
   Replaces the floating WhatsApp bubble on phones (consolidated here) so the
   two don't collide. Desktop keeps the WhatsApp FAB and hides this bar.
   One red primary (mirrors the header "Call Now"), two quiet outlined pills —
   a single accent colour keeps it in the site's design language.
   -------------------------------------------------------------------------- */
.mobile-action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: none;
  gap: 8px;
  padding: 8px 10px;
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 16px -10px rgba(0, 0, 0, 0.12);
}
.mobile-action-bar a {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.mobile-action-bar a:hover { opacity: 1; }
.mobile-action-bar svg { width: 17px; height: 17px; flex-shrink: 0; }
.mab-call  { background: var(--brand-red); color: #fff; }
.mab-call svg { fill: #fff; }
.mab-wa    { background: #fff; color: var(--fg); border: 1px solid var(--border-strong); }
.mab-wa svg { fill: var(--whatsapp); }
.mab-quote { background: #fff; color: var(--fg); border: 1px solid var(--border-strong); }
.mab-quote svg { fill: none; stroke: var(--fg-muted); stroke-width: 1.7; }

@media (max-width: 768px) {
  .mobile-action-bar { display: flex; }
  /* Leave room so the fixed bar never hides the footer's last rows. */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  /* WhatsApp is now in the bar — retire the floating bubble on phones. */
  .whatsapp-fab { display: none !important; }
}