/* ============================================================
   Reattivita' touch mobile (webview / PWA / app container)
   ------------------------------------------------------------
   Obiettivo: dare feedback visivo istantaneo al tap e
   rimuovere il delay 300ms che il browser aggiunge per il
   doppio-tap zoom. Risultato: tap percepito come nativo.

   Scoped a dispositivi touch-only (no mouse) tramite
   @media (hover: none) and (pointer: coarse), quindi su
   desktop e' un no-op.
   ============================================================ */

/* Disattiva il riquadro grigio/blu del tap-highlight di default
   (sostituito dal nostro scale animato sotto). */
html, body { -webkit-tap-highlight-color: transparent; }

/* iOS PWA / Capacitor / webview app container:
   con viewport-fit=cover la webview si estende fino al bordo dello schermo,
   quindi la zona della safe-area-top mostra qualunque sfondo abbia html/body.
   Impostiamo bianco esplicito per evitare che resti scuro/nero (alcuni
   container nativi mostrano sfondo scuro di default dietro la webview). */
html { background: #ffffff; }

/* Mitiga il rubber-band iOS a fondo pagina: senza questa regola la bottom
   nav fissa "saltava" su rivelando spazio sotto quando si scrollava oltre
   la fine, e l'header fisso "saltava" giu' rivelando spazio sopra.
   overscroll-behavior: none blocca il bounce alle estremita' senza alterare
   lo scroll normale. Supportato Safari 16+, Chrome, Firefox; sui browser
   piu' vecchi e' un no-op. */
html, body { overscroll-behavior: none; }

/* touch-action: manipulation rimuove il delay 300ms per
   il double-tap zoom su tutti gli elementi cliccabili.
   Vale anche su desktop senza effetti collaterali. */
button,
a,
[role="button"],
input[type="submit"],
input[type="button"],
label,
select,
summary { touch-action: manipulation; }

/* Feedback visivo istantaneo al press, solo su touch device.
   Animazione molto veloce (60ms) per non rallentare il flow. */
@media (hover: none) and (pointer: coarse) {
    button:not([disabled]):not([aria-disabled="true"]):active,
    [role="button"]:not([disabled]):not([aria-disabled="true"]):active,
    input[type="submit"]:not([disabled]):active,
    input[type="button"]:not([disabled]):active,
    [class*="btn-"]:not([disabled]):not([aria-disabled="true"]):active,
    .chat-consumi-btn:active,
    .qc-story:active,
    a.btn:active,
    a[class*="btn-"]:not([disabled]):not([aria-disabled="true"]):active {
        transform: scale(.97);
        transition: transform .06s ease-out;
    }
}

/* ============================================================
   FIX 27/05 — Stili pagine legal (privacy.php, termini.php, cookie.php).
   Prima il CSS era mancante, le pagine apparivano nude (testo senza
   formattazione, niente header, niente container). Stile coerente
   con la palette del brand QuantoConsumi.it (#2C64ED blu, #0f172a
   testo scuro, font Inter caricato in head).
   ============================================================ */

/* Body base typography (override solo se la pagina non ha gia' un
   reset proprio — privacy.php carica solo includes/header.php che
   non setta font sul body). */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #0f172a;
    background: #f8fafc;
    line-height: 1.6;
    margin: 0;
}

/* Container responsive — usato in tutte le pagine legal. */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Hero header in cima alla pagina (Privacy Policy / Termini, ecc.) */
.page-header {
    background: linear-gradient(135deg, #2C64ED 0%, #1d4ed8 100%);
    color: #ffffff;
    padding: 80px 0 60px;
    text-align: center;
}
.page-header h1 {
    font-size: 42px;
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}
.page-header p {
    font-size: 16px;
    opacity: 0.85;
    margin: 0;
    font-weight: 500;
}
@media (max-width: 640px) {
    .page-header { padding: 56px 0 40px; }
    .page-header h1 { font-size: 32px; }
    .page-header p { font-size: 14px; }
}
/* Pagine legali (privacy / termini / cookie): la fascia blu è più alta del testo
   e l'header del sito è position:fixed (~72px) e ne copre la parte alta, perciò
   il titolo finiva incollato sotto la navbar invece che centrato. Qui centriamo
   verticalmente "titolo + Ultimo aggiornamento" nell'area blu VISIBILE (sotto la
   navbar): padding-top = altezza navbar, padding-bottom 0 e justify-content:center
   danno spazio uguale sopra e sotto. Flex (non padding fisso) così resta centrato
   anche quando il titolo va su due righe (es. "Condizioni Generali di Utilizzo").
   Scoped a .page-header--legal: NON tocca le altre ~15 pagine che usano .page-header. */
.page-header--legal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    min-height: 250px;
    padding-top: 72px;
    padding-bottom: 0;
}
@media (max-width: 640px) {
    .page-header--legal { min-height: 240px; padding-top: 72px; padding-bottom: 0; }
}

/* Sezione contenuto pagina (sotto al page-header). */
.page-content {
    padding: 48px 0 80px;
}
.page-content.legal-content {
    background: #f8fafc;
}

/* White card wrapper per gli articoli legali, max-width
   leggibilita' tipografica (~70-80ch). */
.legal-wrapper {
    max-width: 860px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 48px 56px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
@media (max-width: 640px) {
    .legal-wrapper {
        padding: 28px 22px;
        border-radius: 14px;
    }
}

/* Article — typography readable per testi legali lunghi. */
.legal-article h2 {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin: 36px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
    letter-spacing: -0.2px;
}
.legal-article h2:first-child {
    margin-top: 0;
}
.legal-article h3 {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    margin: 28px 0 12px;
}
.legal-article p {
    font-size: 15px;
    color: #475569;
    line-height: 1.75;
    margin: 0 0 16px;
}
.legal-article ul,
.legal-article ol {
    margin: 0 0 20px;
    padding-left: 24px;
}
.legal-article li {
    font-size: 15px;
    color: #475569;
    line-height: 1.75;
    margin-bottom: 8px;
}
.legal-article li strong {
    color: #0f172a;
    font-weight: 600;
}
.legal-article strong {
    color: #0f172a;
    font-weight: 600;
}
.legal-article a {
    color: #2C64ED;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid rgba(44, 100, 237, 0.25);
    transition: border-color 0.15s;
}
.legal-article a:hover {
    border-bottom-color: #2C64ED;
}