/* BG GRUPPO SERVICES — ritocchi comuni delle pagine zona (caldaie-como/, idraulico-como/, servizi/ ...).
 * Caricato da tutte le pagine zona dopo il loro foglio di stile, con ?v=AAAAMMGG per aggiornare la cache.
 * 0) stessi colori della homepage, leggibili (contrasto testo/sfondo ≥ 4,5:1);
 * 1) blocco "Crea preventivo subito online", con gli stessi colori, raggi e ombre della homepage;
 * 2) menu mobile leggibile (prima: testo scuro su pannello scuro).
 */

/* ===== 0) Colori come la homepage ===== */
/* blu #0068d6 (bianco su blu 5,3:1) al posto di #0087ff (3,5:1); verde WhatsApp scuro (5:1) al posto di #25D366 (2:1) */
:root { --accent: #0068d6; --accent-soft: rgba(0, 104, 214, 0.12); --accent-strong: #0068d6; }
.btn-primary { box-shadow: 0 10px 24px rgba(0, 104, 214, 0.22); }
.btn-primary:hover, .btn-primary:focus-visible { box-shadow: 0 14px 30px rgba(0, 104, 214, 0.3); }
.btn-wa { background: #15803d !important; border-color: #15803d !important; color: #fff !important; }
.btn-wa:hover, .btn-wa:focus-visible { background: #166534 !important; border-color: #166534 !important; }
.hero-tag { color: #9ccfff; }          /* etichetta scura sulla foto: qui serve un azzurro chiaro */
.footer-bottom { color: #5b6b80; }

/* ===== 1) Blocco preventivo online ===== */
.bg-cta-preventivo { padding: 0 0 8px; }
.bg-cta-preventivo-box {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px;
  background: linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
  border: 1px solid rgba(0, 135, 255, 0.18); border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
  padding: 28px 32px;
}
.bg-cta-preventivo-testo { flex: 1 1 360px; min-width: 0; }
.bg-cta-preventivo-testo h2 { margin: 0 0 6px; font-size: 1.35rem; line-height: 1.25; color: #0f172a; }
.bg-cta-preventivo-testo p { margin: 0; max-width: 620px; font-size: 0.98rem; line-height: 1.6; color: #475569; }
.bg-cta-preventivo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 1 auto;
  padding: 18px 28px; border-radius: 999px; background: #0068d6; color: #fff;
  font-family: inherit; font-size: 1.05rem; font-weight: 800; line-height: 1.3; letter-spacing: 0.02em;
  text-align: center; text-decoration: none; text-transform: uppercase;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
  transition: background-color .2s ease, transform .12s ease;
}
.bg-cta-preventivo-btn:hover, .bg-cta-preventivo-btn:focus-visible { background: #0057b3; color: #fff; text-decoration: none; }
.bg-cta-preventivo-btn:focus-visible { outline: 3px solid rgba(0, 135, 255, 0.45); outline-offset: 3px; }
.bg-cta-preventivo-btn:active { transform: scale(0.99); }

@media (max-width: 640px) {
  .bg-cta-preventivo-box { padding: 22px 18px; border-radius: 20px; }
  .bg-cta-preventivo-testo { flex-basis: 100%; }
  .bg-cta-preventivo-btn { width: 100%; padding: 16px 20px; font-size: 1rem; }
}

/* ===== 2) Intestazione e menu mobile ===== */
/* con il menu lungo (servizi, pronto intervento, caldaie e scaldabagni) il numero accanto a "Chiama ora" non ci sta
   e il menu andava a capo: resta il pulsante. Sui tablet vale per tutte le pagine zona. */
@media (min-width: 769px) {
  .nav-main:has(.nav-links li:nth-child(4)) .header-phone { display: none; }
}
@media (min-width: 769px) and (max-width: 999px) {
  .site-header .header-phone { display: none; }
}
@media (max-width: 768px) {
  .site-header .nav-main {
    background: #ffffff; border-bottom: 1px solid #e2e8f0; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  }
  .site-header .nav-links { width: 100%; gap: 2px; }
  .site-header .nav-links li { width: 100%; }
  .site-header .nav-links a { display: block; padding: 12px 4px; font-size: 1rem; font-weight: 700; color: #0f172a; }
  .site-header .nav-links a::after { display: none; }
  .site-header .header-cta { border-top: 1px solid #e2e8f0; padding-top: 12px; }
  .site-header .header-phone { color: #475569; }
  .site-header .header-phone strong { color: #0068d6; }
}