/* =========================================================
   style-2026.css — nuovo aspetto di bonifiche-ambientali.com (novembre 2026)
   Blu notte + accento (ambra o oro), Poppins ospitato sul sito.
   Si carica DOPO style.css e style-microspie.css e cambia solo l'aspetto:
   contenuti, indirizzi delle pagine e struttura restano gli stessi.
   ========================================================= */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/poppins-700.woff2") format("woff2"); }

:root {
    --notte: #0F1B2D;
    --notte-2: #172A45;
    --notte-3: #0A1320;
    --accento: #E8A33D;          /* ambra; versione oro: #C9A24A */
    --accento-scuro: #B97A1F;    /* oro: #9C7A2C */
    --accento-chiaro: #FBF1DF;   /* oro: #F6EFDD */
    --carta: #F7F5F0;
    --bianco: #FFFFFF;
    --testo: #1C2430;
    --testo-tenue: #5A6676;
    --bordo: #E4E0D7;
    --verde-scuro: rgb(56, 118, 29);
    --verde-chiaro: rgb(147, 196, 125);
    --raggio: 14px;
    --ombra: 0 10px 30px -12px rgba(15, 27, 45, 0.25);
    --titoli: "Poppins", "Segoe UI", system-ui, sans-serif;
    --corpo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- base */
body { font-family: var(--corpo); color: var(--testo); background: var(--carta); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--titoli); color: var(--notte); letter-spacing: -0.01em; }
h1 { font-weight: 700; line-height: 1.15; }
h2 { font-weight: 700; line-height: 1.2; }
h3 { font-weight: 600; }
a { color: var(--notte-2); text-decoration-color: var(--accento); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--accento-scuro); }
.container { max-width: 1180px; padding: 0 24px; }
img { max-width: 100%; height: auto; }

/* ---------- intestazione */
.site-header { background: var(--notte); padding: 14px 0; position: sticky; top: 0; z-index: 900; box-shadow: 0 2px 18px rgba(0,0,0,0.25); }
.header-container { gap: 24px; }
.logo img { width: 210px; height: auto; display: block; }
.main-nav ul { gap: 4px 6px; }
.main-nav a { color: rgba(255,255,255,0.86); font-family: var(--titoli); font-weight: 500; font-size: 0.95rem; padding: 8px 12px; border-radius: 999px; text-decoration: none; }
.main-nav a:hover, .main-nav a:focus { background: rgba(255,255,255,0.08); color: #fff; }
.main-nav a[aria-current="page"] { color: var(--notte); background: var(--accento); }
.header-cta { gap: 14px; }
.header-phone { color: rgba(255,255,255,0.75); font-family: var(--titoli); font-weight: 500; font-size: 0.9rem; }
.menu-toggle { display: none; }

/* ---------- pulsanti */
.btn { font-family: var(--titoli); font-weight: 600; border-radius: 999px; padding: 13px 26px; border: 2px solid transparent; transition: transform .15s ease, background-color .15s ease; text-decoration: none; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accento); color: var(--notte); }
.btn-primary:hover, .btn-primary:focus { background: var(--accento-scuro); color: #fff; }
.btn-secondary { background: transparent; color: var(--notte); border-color: var(--notte); }
.btn-secondary:hover, .btn-secondary:focus { background: var(--notte); color: #fff; }
.btn-tertiary { background: var(--notte-2); color: #fff; }

/* ---------- percorso di navigazione */
.breadcrumb { font-size: 0.85rem; color: var(--testo-tenue); padding-top: 18px; padding-bottom: 6px; }
.breadcrumb a { color: var(--testo-tenue); }

/* ---------- apertura delle pagine (hero) */
.hero { background: var(--bianco); padding: 48px 0 56px; border-bottom: 1px solid var(--bordo); }
.hero-container { gap: 48px; align-items: center; }
.hero-text h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem); margin-bottom: 18px; }
.hero-text h1::after { content: ""; display: block; width: 72px; height: 6px; border-radius: 3px; background: var(--accento); margin-top: 18px; }
.hero-bullets { list-style: none; padding-left: 0; }
.hero-bullets li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.hero-bullets li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 14px; height: 14px; border-radius: 50%; background: var(--accento); box-shadow: 0 0 0 4px var(--accento-chiaro); }
ol.hero-bullets { counter-reset: passo; }
ol.hero-bullets li { counter-increment: passo; padding-left: 40px; }
ol.hero-bullets li::before { content: counter(passo); width: 26px; height: 26px; top: 0.1em; color: var(--notte); font: 700 0.85rem/26px var(--titoli); text-align: center; box-shadow: none; }
.hero-actions { gap: 12px; margin-top: 24px; }
.hero-image img { border-radius: var(--raggio); box-shadow: var(--ombra); }
.answer-box { background: var(--accento-chiaro); border-left: 5px solid var(--accento); border-radius: 0 var(--raggio) var(--raggio) 0; padding: 18px 22px; color: var(--testo); font-size: 1.05rem; }
.article-meta { color: var(--testo-tenue); font-size: 0.9rem; }

/* ---------- sezioni: alternanza bianco / carta, titoli con trattino */
.trust, .methodology, .sectors { background: var(--carta); padding: 64px 0; }
.services, .about { background: var(--bianco); padding: 64px 0; }
.faq { background: var(--bianco); padding: 64px 0; }
.trust-container h2, .services h2, .methodology-text h2, .about-text h2, .sectors h2, .faq h2, .contact-text h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin-bottom: 18px; }
.services > .container > h2::after, .trust-container > h2::after, .faq h2::after { content: ""; display: block; width: 56px; height: 5px; border-radius: 3px; background: var(--accento); margin-top: 14px; }
.section-intro { color: var(--testo-tenue); font-size: 1.02rem; }

/* ---------- schede */
.service-card, .sector-card, .trust-item, .faq-item, .key-facts > div {
    background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 24px; box-shadow: 0 1px 0 rgba(15,27,45,0.03);
    transition: box-shadow .2s ease, transform .2s ease;
}
.services .service-card, .about .sector-card { background: var(--carta); }
.service-card:hover, .sector-card:hover { box-shadow: var(--ombra); transform: translateY(-2px); }
.service-card h3, .sector-card h3, .trust-item h3 { font-size: 1.15rem; margin-bottom: 10px; }
.service-card h3 a, .sector-card h3 a { color: var(--notte); text-decoration: none; }
.service-card h3 a::after, .sector-card h3 a::after { content: " →"; color: var(--accento-scuro); }
.service-card h3 a:hover, .sector-card h3 a:hover { color: var(--accento-scuro); }
/* link dentro i testi: ben riconoscibili (sottolineatura ambra) */
main p a, main li a, main dd a { color: var(--notte-2); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accento); text-decoration-thickness: 2px; text-underline-offset: 3px; }
main p a:hover, main li a:hover { color: var(--accento-scuro); }
main .btn, main .barra-contatti a, .breadcrumb a { font-weight: inherit; }
.breadcrumb a { text-decoration: none; }
.services-grid, .trust-grid, .sectors-grid { gap: 20px; }
.faq-item { margin-bottom: 14px; max-width: 900px; }
.faq-item h3 { font-size: 1.08rem; }
.infografica img, .methodology-image img, .about-image img { border-radius: var(--raggio); box-shadow: var(--ombra); }
.check-list li::marker { color: var(--accento-scuro); }

/* ---------- tabelle (prezzi) */
.data-table, table { border-radius: var(--raggio); overflow: hidden; }
.data-table thead th, table thead th { background: var(--notte) !important; color: #fff; font-family: var(--titoli); }

/* ---------- chiamata finale e modulo contatti */
.contact-link { background: var(--carta); padding: 64px 0; }
.contact-container { background: var(--bianco); border-radius: 20px; border-left: 6px solid var(--accento); padding: 36px; box-shadow: var(--ombra); }
.form-group input, .form-group select, .form-group textarea { border: 1px solid var(--bordo); border-radius: 10px; padding: 12px 14px; font: inherit; width: 100%; background: #fff; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 3px solid var(--accento-chiaro); border-color: var(--accento); }

/* ---------- piè di pagina */
.site-footer { background: var(--notte-3); color: rgba(255,255,255,0.78); padding: 56px 0 24px; }
.footer-container { gap: 32px; }
.footer-left p, .footer-middle p, .footer-right p { font-size: 0.92rem; }
.site-footer a { color: #fff; text-decoration-color: var(--accento); }
.site-footer strong { color: #fff; font-family: var(--titoli); }
.footer-bottom { border-top-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.55); }

/* ---------- banner cookie */
.cookie-banner { background: var(--notte); border-top: 3px solid var(--accento); }
.cookie-banner a { color: var(--accento); }
.cookie-banner .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.6); }
.cookie-banner .btn-tertiary { background: transparent; color: var(--accento); border-color: var(--accento); }

/* ---------- barra "Chiama" fissa sul cellulare */
.barra-contatti { display: none; }

@media (max-width: 900px) {
    body { font-size: 16.5px; padding-bottom: 76px; }
    .header-container { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0; }
    .logo img { width: 150px; }
    .menu-toggle {
        display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.35);
        border-radius: 999px; padding: 8px 16px; font: 600 0.95rem var(--titoli); cursor: pointer;
    }
    .menu-toggle span { display: block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
    .main-nav { flex-basis: 100%; display: none; }
    .site-header.aperto .main-nav { display: block; padding: 12px 0 4px; }
    .main-nav ul { flex-direction: column; gap: 2px; }
    .main-nav a { display: block; padding: 12px 14px; border-radius: 10px; font-size: 1.02rem; }
    .header-cta { display: none; }
    /* in colonna la "base" delle colonne diventerebbe un'altezza fissa: la azzero per evitare spazi vuoti */
    .hero-container > *, .methodology-container > *, .about-container > *, .contact-container > * { flex: 0 0 auto; width: 100%; }
    .hero { padding: 28px 0 40px; }
    .hero-container { gap: 28px; }
    .hero-actions .btn { width: 100%; text-align: center; }
    .trust, .methodology, .sectors, .services, .about, .faq, .contact-link { padding: 44px 0; }
    .contact-container { padding: 24px; }
    .barra-contatti {
        display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(10, 19, 32, 0.96); backdrop-filter: blur(6px); box-shadow: 0 -6px 20px rgba(0,0,0,0.25);
    }
    .barra-contatti a { flex: 1; text-align: center; border-radius: 999px; padding: 12px 10px; font: 600 0.98rem var(--titoli); text-decoration: none; }
    .barra-contatti .chiama { background: var(--verde-scuro); color: #fff; }
    .barra-contatti .scrivi { background: var(--accento); color: var(--notte); }
    .cookie-banner { bottom: 76px; }
}