/*
 * style-casa-spa.css — ADL 360 srl
 * Stili supplementari non-critici per l'articolo sostituzione-caldaia-casa-spa
 * Caricato in modo non-blocking (preload + onload)
 * Non duplicare stili già nel <style> inline del <head>
 */

/* ============================================================
   SMOOTH SCROLL — raffinamento
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ============================================================
   SELEZIONE TESTO
   ============================================================ */
::selection {
  background: rgba(232, 66, 10, 0.15);
  color: #1A1A2E;
}

/* ============================================================
   FOCUS ACCESSIBILE
   ============================================================ */
:focus-visible {
  outline: 3px solid #E8420A;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   ARTICLE BODY — link generici
   ============================================================ */
.articolo-body a:not(.link-interno):not(.btn-tel):not(.btn-wa) {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.articolo-body a:not(.link-interno):not(.btn-tel):not(.btn-wa):hover {
  color: #1d4ed8;
}

/* ============================================================
   STEP LIST — animazione fade-in progressiva
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .step-item {
    animation: fadeUp 0.4s ease both;
  }
  .step-item:nth-child(1) { animation-delay: 0.05s; }
  .step-item:nth-child(2) { animation-delay: 0.10s; }
  .step-item:nth-child(3) { animation-delay: 0.15s; }
  .step-item:nth-child(4) { animation-delay: 0.20s; }
  .step-item:nth-child(5) { animation-delay: 0.25s; }
  .step-item:nth-child(6) { animation-delay: 0.30s; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ============================================================
   FAQ — transizione animata pannello
   ============================================================ */
.faq-a {
  transition: none; /* gestito da JS con display block/none */
}
@media (prefers-reduced-motion: no-preference) {
  .faq-a.aperta {
    animation: faqOpen 0.25s ease both;
  }
  @keyframes faqOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ============================================================
   CALLOUT — hover
   ============================================================ */
.callout {
  transition: box-shadow 0.2s;
}
.callout:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* ============================================================
   ERRORE CARD — hover lift
   ============================================================ */
.errore-card {
  transition: box-shadow 0.2s, transform 0.2s;
}
.errore-card:hover {
  box-shadow: 0 6px 18px rgba(232, 66, 10, 0.1);
  transform: translateY(-2px);
}

/* ============================================================
   DOC LIST — highlight on hover
   ============================================================ */
.doc-item {
  transition: background 0.2s, border-color 0.2s;
}
.doc-item:hover {
  background: #e8f0ff;
  border-color: #2563eb;
}

/* ============================================================
   COSTI TABLE — row hover
   ============================================================ */
.costi-table tbody tr {
  transition: background 0.15s;
}
.costi-table tbody tr:hover td {
  background: #fff3ef;
}

/* ============================================================
   CTA ARTICOLO — btn pulse
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .btn-tel {
    animation: btnPulse 3s ease-in-out infinite;
  }
  @keyframes btnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232, 66, 10, 0); }
    50%       { box-shadow: 0 0 0 8px rgba(232, 66, 10, 0); }
  }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .site-header,
  .barra-cta-mobile,
  .hamburger,
  .nav-mobile,
  .cta-articolo,
  .site-footer {
    display: none !important;
  }

  body {
    font-size: 11pt;
    color: #000;
    background: #fff;
  }

  .articolo-wrapper {
    padding: 0;
    max-width: 100%;
  }

  .hero-articolo {
    background: #fff !important;
    color: #000 !important;
    padding: 24px 0;
  }

  .hero-articolo h1 {
    color: #000 !important;
    font-size: 18pt;
  }

  .hero-intro {
    color: #333 !important;
  }

  .img-cover {
    display: none;
  }

  .articolo-body h2 {
    color: #000;
    break-before: avoid;
    page-break-before: avoid;
  }

  .callout,
  .callout-info,
  .callout-warning {
    border: 1px solid #ccc;
    background: #f9f9f9 !important;
  }

  .costi-table {
    page-break-inside: avoid;
  }

  .faq-a {
    display: block !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
  }

  a.link-interno[href]::after,
  .nav-dropdown-menu a[href]::after {
    content: none;
  }
}
