/* ============================================================================
   FOGLIO DI STILE DEL SITO — ASD Paintball Franciacorta
   ============================================================================

   Si chiamava `v2-light.css` fino al 03/09/2026, e il nome raccontava com'era
   nato: il sito v2 era tutto scuro, questo foglio lo ribaltava in chiaro. Era
   una toppa, e come tutte le toppe si era stratificata — le card prezzi hanno
   avuto quattro fondi diversi scritti uno sotto l'altro (arancio chiaro, oro,
   verde), `.mode span` tre versioni, `.plan.hot` quattro. Il browser leggeva
   solo l'ultima riga di ogni serie: le altre erano peso morto che chiunque
   aprisse il file doveva scavalcare per capire quale valesse.

   Ora la palette sta QUI e basta: le pagine non dichiarano piu' il proprio
   `:root` scuro. È la correzione della causa vera di un difetto ricorrente —
   un campo nuovo (l'ultimo: la textarea della dedica su /regala/, aggiunta il
   21/08/2026) nasceva col fondo nero del tema vecchio finche' qualcuno non si
   ricordava di ribaltarlo anche qui, e nel frattempo il cliente scriveva nero
   su nero senza vedere quello che scriveva.

   ⚠️ Questo foglio si carica DOPO gli stili inline delle pagine: qui si vince.
   Le pagine tengono nel proprio `<style>` solo cio' che è loro (la foto
   dell'hero, le griglie, i pezzi unici); tutto cio' che è di tutti sta qui.
   ============================================================================ */

/* ---------------------------------------------------------------- PALETTE --
   Unica dichiarazione dei colori del sito. I nomi sono in italiano come il
   resto della repo; `--paint` è rimasto in inglese perche' è citato da 400
   punti nelle pagine e rinominarlo non varrebbe il diff.

   Giallo e oro NON sono lo stesso ruolo: il GIALLO è il testo sui blocchi
   verdi (viene dalle locandine storiche), l'ORO è il riempimento di bottoni e
   badge (viene dal vecchio sito, ed è lo stesso oro delle stelle Trustindex).
   Su fondo chiaro il giallo non si legge: lì gli accenti testuali sono verdi. */
:root{
  /* marchio */
  --paint:#fce803;        /* giallo storico */
  --verde:#5f7050;        /* verde militare delle locandine */
  --verde-scuro:#3f4c33;
  --oro:#f6bb06;          /* riempimenti: bottoni, badge, bandierine */
  --ambra:#d97706;        /* prezzi e momenti caldi */
  --wa:#25d366;           /* verde WhatsApp, solo per i bottoni WhatsApp */
  --ok:#8fc93a;           /* spunta degli elenchi */

  /* superfici e testo */
  --ink:#f3f6ec;          /* fondo pagina: verde chiarissimo (salvia) */
  --panel:#e9eedd;
  --panel-2:#e9eedd;
  --line:#d5deca;
  --text:#212121;
  --dim:#4c5560;

  /* forme e caratteri */
  --radius:16px;
  --display:'Montserrat',Impact,sans-serif;
  --cond:'Montserrat','Open Sans',sans-serif;
}

body{background:var(--ink);color:var(--text)}
/* Le ancore non finiscono piu' sotto l'header sticky */
html{scroll-padding-top:96px}

/* --------------------------------------------------------- BASE COMUNE --
   Le regole che erano scritte identiche, parola per parola, in quindici o
   diciassette pagine. Stanno prima delle correzioni qui sotto perche' sono la
   base: quello che viene dopo, in questo file, le sovrascrive di proposito.
   Chi ha bisogno di una variante propria la scrive nella sua pagina — ma la
   pagina si carica PRIMA di questo foglio, quindi una variante inline non
   vince: se serve davvero, va scritta qui con un selettore piu' preciso. */
*{margin:0;padding:0;box-sizing:border-box}
img{max-width:100%;height:auto;display:block}

.nav-logo{display:flex;align-items:center;gap:.6rem;font-family:var(--display);
          font-size:.95rem;color:var(--paint);line-height:1.05}
.nav-logo img{height:40px;width:auto}

/* Il watermark decorativo dietro le pagine dedicate */
.wm{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}

.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin:2.4rem 0}
.feat div{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem}
.feat p{color:var(--dim);font-size:.95rem}
@media(max-width:760px){.feat{grid-template-columns:1fr}}

.socials{display:flex;justify-content:center;gap:1.6rem;margin-bottom:1.4rem}
.socials a{display:flex;flex-direction:column;align-items:center;gap:.45rem;font-family:var(--cond);
           font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.08em;color:var(--text)}
.socials svg{width:46px;height:46px;padding:10px;box-sizing:border-box;fill:var(--paint);
             background:var(--panel);border:1px solid var(--line);border-radius:50%;
             transition:transform .15s,background .15s,fill .15s}
.socials a:hover svg{transform:translateY(-3px);background:var(--paint);fill:#141410}
footer small{color:var(--dim);font-size:.78rem}

/* ------------------------------------------------------- TESTI E ACCENTI --
   Tutti gli accenti testuali su fondo chiaro sono verdi. Il giallo qui non si
   legge, e su bianco fallisce qualunque soglia di contrasto. */
a{color:var(--verde)}
summary{color:var(--verde)}
.nav-logo,.nav-links a:hover,.sec h2,.eyebrow,.feat h3,.rev-cta,.rev-cta .go,
.price-list li span:last-child,.included .t,.course h2,.club h3,
.soon .more,.swipe-hint,.gift-box label,.tb-form label,.tb-form h2,
.book-form label,.book-side .direct h3,.book-side .lastmin h3,
.map-load b,.map-load:hover b,.step::before,.faq summary::after{color:var(--verde)}

/* La tabella degli extra e le voci a scomparsa: il !important resta perche'
   dentro `.extras` c'e' una regola inline piu' specifica che le rifarebbe
   gialle. */
.extras-in,.extras-in td{color:#28303a}
.extras summary,.extras-in summary{color:var(--verde) !important}

/* Titoletti nati col bianco cablato per il tema scuro */
.step h3,.plan h3,.soon h3,.fcard h3{color:var(--text)}
.map-load{color:var(--text)}
.fcard .fnote{color:#2f3a26}
.fcard .fnote::before{color:var(--verde)}
.fcard .fsize{background:var(--oro)}

/* Stelle delle recensioni: l'oro pieno su pannello chiaro sta sotto la soglia
   AA, questo ambra scuro la supera di mezzo punto. */
.stars,a.stars,.rev .stars,.rev-cta .stars{color:#8a5306}

/* Watermark decorativo: tenue, verde, sotto al contenuto */
.wm span{color:rgba(99,119,84,.10);border-color:rgba(99,119,84,.16)}

/* Bottoni */
.btn.ghost{color:var(--verde-scuro);border-color:var(--verde)}
.btn.nav-cta{background:var(--oro);color:#141410;box-shadow:0 4px 14px rgba(246,187,6,.4)}
.btn.wa-alt{color:#0b7a3e;border-color:#0b7a3e}
.flag,.badge{background:var(--oro)}
.book-side .lastmin{border-color:var(--oro)}
/* Tag 'Attivo' (beach volley/teqball): verde della palette, non quello di WhatsApp */
.soon.live .tag{background:var(--verde);color:#ffffff}

/* ------------------------------------------------ PANNELLI, CARD, PREZZI --
   Cornice verde in testa, stile locandina. */
.feat div,.plan,.gift-box,.tb-form{border-color:#d7ddcb;border-top:3px solid var(--verde)}

/* Le card prezzi hanno provato, in quest'ordine, l'arancio chiaro, il dorato
   delle stelle e il verde chiaro: è rimasto il verde, che stacca dal fondo
   salvia senza litigare col giallo dei prezzi. */
.plan{background:#e2ebcf;border-color:#c6d4ab}
.plan.hot{background:#d5e2b9;border:2px solid var(--oro);box-shadow:0 8px 26px rgba(217,119,6,.14)}
.plan.hot .btn{background:var(--oro);color:#141410;box-shadow:0 6px 20px rgba(246,187,6,.35)}
/* Prezzi come le locandine storiche: cifra gialla su blocco verde */
.amount-tag,.plan .amount,.plan.hot .amount{color:var(--paint);background:var(--verde);
  display:inline-block;padding:.12em .45em;border-radius:9px;line-height:1.15}

/* Barra dei numeri: blocco verde con cifre gialle, come le locandine.
   Le etichette sotto le cifre sono piccole: in bianco si leggono, in giallo no. */
.trust{background:var(--verde)}
.trust,.trust *{color:var(--paint)}
.trust span{color:#ffffff}

/* ------------------------------------------------------- FORM E CAMPI IN --
   Un campo si dichiara per CONTENITORE (.gift-box, .tb-form), non uno per uno:
   così un campo aggiunto domani nasce già chiaro. È la regola che il tema
   scuro cablato nelle pagine rendeva impossibile da rispettare. */
.gift-box select,.gift-box input,.gift-box textarea,
.tb-form select,.tb-form input,.tb-form textarea{background:#ffffff;border-color:#c9d1de;color:var(--text)}
.gift-box select:focus,.gift-box input:focus,.gift-box textarea:focus,
.tb-form select:focus,.tb-form input:focus,.tb-form textarea:focus{border-color:var(--verde)}
/* I date input hanno una larghezza minima intrinseca e sbordavano dalla colonna */
.book-form select,.book-form input,.book-form .row>div{min-width:0}
.book-form .row{align-items:end}

/* ------------------------------------------------------------------- NAV --
   Fino al 14/08/2026 il menu stava solo sulla home: dalle pagine dedicate si
   poteva solo "tornare al sito", e da lì ricominciare. Ora il menu è su tutte,
   quindi il tasto indietro non deve più spiegare niente ed è tornato a essere
   una freccia. Le bandierine italiano/inglese stanno DENTRO il menu, come
   ultima voce: aprendolo si sceglie anche la lingua.

   La tendina vale sempre sulle pagine dedicate (`nav.menu-tendina`) e sulla
   home sotto i 1420px; sopra, la home ha la barra distesa — sotto quella
   soglia le sue voci non ci stavano, e "Prenota" finiva fuori schermo. */
nav{background:rgba(246,248,240,.96);border-bottom:1px solid var(--line);
    box-shadow:0 1px 10px rgba(15,19,31,.06)}
.nav-in{display:flex;align-items:center;gap:1rem}
/* Respiro fra logo e prima voce di menu */
.nav-logo{margin-right:1.4rem;flex-shrink:0}
.nav-logo span{white-space:nowrap}
/* Montserrat è più largo del condensed originale: le voci vanno compattate */
.nav-links{list-style:none;font-family:var(--cond);font-weight:600;font-size:.88rem;
           text-transform:uppercase;letter-spacing:.05em;margin-left:auto;display:flex;gap:.8rem}
.nav-links a{color:#0f131f;font-size:.75rem;letter-spacing:.02em;white-space:nowrap}
.nav-cta{white-space:nowrap;font-size:.88rem;padding:.5rem 1.05rem}
#menu-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--verde);
             font-size:1.9rem;line-height:1;padding:0 .2rem;margin-left:auto}
/* Il "torna al sito" ridotto al suo segno: la freccia. Il nome resta per chi
   usa uno screen reader e nel tooltip. */
.back{font-family:var(--cond);font-weight:700;font-size:1.5rem;line-height:1;
      padding:.05rem .55rem;border-radius:9px;color:var(--verde);margin-left:.2rem}
.back:hover{background:rgba(95,112,80,.14)}
.back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

nav.menu-tendina .nav-links{display:none;position:absolute;top:100%;left:0;right:0;margin:0;
  background:#ffffff;flex-direction:column;padding:1.1rem 1.5rem;gap:1rem;
  border-bottom:3px solid var(--verde);box-shadow:0 14px 28px rgba(15,19,31,.14)}
nav.menu-tendina .nav-links.open{display:flex}
nav.menu-tendina #menu-toggle{display:block}
nav.menu-tendina .nav-cta{display:none}
@media(max-width:1420px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;margin:0;
    background:#ffffff;flex-direction:column;padding:1.1rem 1.5rem;gap:1rem;
    border-bottom:3px solid var(--verde);box-shadow:0 14px 28px rgba(15,19,31,.14)}
  .nav-links.open{display:flex}
  #menu-toggle{display:block}
  .nav-cta{display:none}
}
@media(min-width:1421px){
  .nav-in{max-width:1460px}
}

/* Le bandierine: ultima voce del menu, in tutte e due le lingue. Nella tendina
   c'è spazio per il nome della lingua, nella barra distesa no. */
.lang{display:inline-flex;align-items:center;gap:1rem}
.lang a{display:inline-flex;align-items:center;gap:.45rem;padding:.2rem;border-radius:8px;line-height:1.2;
        opacity:.5;filter:grayscale(.7);transition:opacity .15s,filter .15s,background .15s}
.lang a:hover{opacity:.95;filter:none}
.lang a.on{opacity:1;filter:none;background:rgba(95,112,80,.16);box-shadow:inset 0 0 0 2px var(--verde)}
.lang svg{width:26px;height:17px;display:block;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.28)}
.lang a span{font-family:var(--cond);font-weight:600;font-size:.95rem}
nav:not(.menu-tendina) .lang{gap:.3rem}
@media(min-width:1421px){
  nav:not(.menu-tendina) .lang a{padding:.15rem;gap:0}
  nav:not(.menu-tendina) .lang a span{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  nav:not(.menu-tendina) .lang svg{width:22px;height:14px}
}

/* ------------------------------------------------- TESTI SOPRA LE FOTO --
   Le foto restano velate di scuro, quindi il testo lì sopra è chiaro: sono le
   uniche zone del sito dove il tema scuro è una scelta e non un residuo.
   Le foto sono più luminose di quando il sito era nero (allora le filtrava a
   .45-.55): la leggibilità la garantiscono i gradienti nella zona del testo. */
.hero-in,.hero-in h1,.hero-in p,.hero-in .eyebrow{color:#ffffff}
.hero-in h1,.hero-in p,.hero-in .eyebrow{text-shadow:0 2px 12px rgba(0,0,0,.5)}
.hero-in .eyebrow{color:var(--paint)}
.hero-in .btn.ghost{color:#fff;border-color:#f0f0f0}
.hero .bg{filter:saturate(.95) brightness(.75)}
.hero-bg{filter:brightness(1.25) saturate(1.05)}
.hero-bg::after{background:linear-gradient(180deg,rgba(13,13,11,.18) 0%,rgba(13,13,11,.06) 40%,rgba(13,13,11,.90) 92%)}

.hero-in h1 .paint,.occ-body h3,.photo-band .quote .paint,.night h2 .paint,
.night p b{color:var(--paint)}

.occ::after{background:linear-gradient(180deg,rgba(13,13,11,.10) 0%,rgba(13,13,11,.38) 50%,rgba(13,13,11,.96) 100%)}
.occ-body,.occ-body *{color:#ffffff;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.occ-body .eyebrow{color:var(--paint)}
.occ-body p,.occ p{color:#efece0}

.photo-band::after{background:linear-gradient(90deg,rgba(13,13,11,.94) 0%,rgba(13,13,11,.78) 50%,rgba(13,13,11,.28) 100%)}
.photo-band .in,.photo-band .in *{text-shadow:0 1px 8px rgba(0,0,0,.6)}
.photo-band .who{color:#ffffff}

.field-band h2{color:#ffffff}
.field-band p{color:#f1eee2;text-shadow:0 1px 10px rgba(0,0,0,.85)}

/* Etichette delle modalità di gioco: fascia piena scura sotto il testo, niente
   trasparenze — e testo giallo, perche' la fascia è scura. */
.mode img{filter:brightness(1.28) saturate(1.08)}
.mode span{background:rgba(13,13,11,.93);padding:.7rem .8rem;text-shadow:none;color:var(--paint)}

/* Banner del buono regalo: il fondo voucher è scuro per scelta */
.gift-banner .in{color:#eeeadd;border-color:var(--oro)}
.gift-banner h2{color:#ffffff}
.gift-banner p{color:#c9c4b2}
.gift-banner .eyebrow{color:var(--paint)}
/* Montserrat largo + flex-shrink:0 = il bottone sbordava dal voucher su mobile */
@media(max-width:640px){
  .gift-banner .btn{margin:0 auto;flex-shrink:1;max-width:100%;white-space:normal;
    text-align:center;font-size:.95rem;letter-spacing:.04em}
}

/* --------------------------------------------------------- LA NOTTURNA --
   Sezione scura PER DESIGN. Ridefinisce le variabili localmente, così il testo
   interno resta chiaro qualunque cosa cambi nella palette generale. */
.night{--text:#eeeadd;--dim:#bab6a7;--panel:#15151d;--panel-2:#1c1c24;--line:#32323d}
.night h2{color:#ffffff}
.night .eyebrow{color:var(--paint)}
.night .price-tag .big{color:var(--paint)}
/* Montserrat è più largo del condensed originale: il box prezzo e il bottone
   nowrap sbordavano a destra trascinando tutta la sezione */
.night .sec>*{min-width:0}
@media(max-width:600px){
  .night .price-tag{display:block;text-align:center;padding:1.2rem 1.2rem 1.4rem}
  .night .price-tag .big{font-size:2.1rem}
  .night .price-tag .btn{margin-top:.9rem;white-space:normal;justify-content:center;font-size:.9rem;width:100%}
}

/* ------------------------------------------------------ FOOTER E SOCIAL --
   Verde militare scuro: chiude la pagina come i footer del vecchio tema.
   Il verde del marchio non si legge sul verde scuro, quindi i link sono chiari
   e sottolineati. */
footer{background:var(--verde-scuro);border-top:none}
footer,footer small{color:#cfd8c3}
footer a{color:#e9edda;text-decoration:underline;text-underline-offset:2px}
.socials a{color:#e8ecdf}
.socials svg{background:#4a5a3d;border-color:#5d6f4e;fill:var(--paint)}
.socials a:hover svg{background:var(--paint);fill:var(--verde-scuro)}

/* ------------------------------------------------- CHATBOT "LA RECLUTA" --
   Attivo. Gli stili inline della home sono nati per il tema scuro: qui il
   pannello diventa chiaro, con la testata nel verde del marchio. */
.chat-fab{background:var(--oro);color:#141410;box-shadow:0 6px 18px rgba(15,19,31,.28)}
.chat-fab svg{fill:#141410}
.chat-panel{background:#ffffff;border:2px solid var(--verde-scuro);box-shadow:0 20px 60px rgba(15,19,31,.28)}
.chat-head{background:var(--verde-scuro);color:#ffffff}
.chat-head b{color:var(--paint)}
.chat-head small{color:#e9edda}
.chat-head button{color:#ffffff}
.chat-log{background:var(--ink)}
.chat-msg.bot{background:#ffffff;border-color:var(--line);color:var(--text)}
.chat-msg.bot a{color:#4c5a40}
.chat-msg.user{background:var(--oro);color:#141410}
.chat-msg.typing{background:#ffffff;color:var(--dim)}
.chat-choice button{background:#ffffff;border-color:var(--verde-scuro);color:var(--verde-scuro)}
.chat-choice button.yes{background:var(--oro);border-color:var(--oro);color:#141410}
.chat-in{background:#ffffff;border-top-color:var(--line)}
.chat-in input{background:#ffffff;border-color:#c6d4ab;color:var(--text)}
.chat-in input:focus{border-color:var(--verde)}
.chat-in button{background:var(--oro)}
.chat-in button svg{fill:#141410}