/* =========================================================================
   PAGINE A PANNELLI — "Pianifica la tua visita" (v0.6.0)
   Indice a sinistra + sezioni a scambio. Logica: inc/visita.php + assets/panes.js.
   I pannelli sono visibili di default: si nascondono SOLO quando il JS è attivo
   (html.ca-panes-on), così senza JavaScript e in stampa la pagina resta completa.
   ========================================================================= */
.ca-visita{padding:clamp(36px,5vw,64px) 0 clamp(56px,7vw,96px)}
.ca-visita__intro{margin-bottom:clamp(28px,4vw,44px)}
.ca-visita__cta{margin-top:clamp(40px,5vw,64px)}
.ca-visita__grid{display:grid;grid-template-columns:236px 1fr;gap:clamp(32px,5vw,64px);align-items:start}

/* Indice elegante */
.ca-idx{position:sticky;top:126px}
/* Da loggati la admin bar (fissa da 783px) alza l'header: sposta anche l'indice */
@media screen and (min-width:901px){.admin-bar .ca-idx{top:158px}}
.ca-idx__lab{font-family:var(--ca-font-ui);font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--ca-oro-deep);font-weight:700;margin:0 0 14px}
.ca-idx__nav{display:flex;flex-direction:column;border-left:1px solid var(--ca-line)}
.ca-idx__a{position:relative;display:block;padding:11px 0 11px 18px;text-decoration:none;color:var(--ca-muted);
  font-family:var(--ca-font-ui);font-size:14px;font-weight:500;line-height:1.35;transition:.18s}
.ca-idx__a::before{content:"";position:absolute;left:-1px;top:50%;transform:translateY(-50%) scaleY(0);
  width:2px;height:70%;background:var(--ca-amaranto);transition:transform .2s}
.ca-idx__a:hover{color:var(--ca-amaranto)}
.ca-idx__a.is-on{color:var(--ca-amaranto);font-weight:600}
.ca-idx__a.is-on::before{transform:translateY(-50%) scaleY(1)}
.ca-idx__box{margin-top:26px;background:#fff;border:1px solid var(--ca-border);border-left:3px solid var(--ca-oro);
  border-radius:12px;padding:16px 18px;box-shadow:var(--ca-shadow-sm)}
.ca-idx__box b{display:block;font-family:var(--ca-font-head);font-size:19px;color:var(--ca-amaranto);font-weight:300;margin-bottom:4px}
.ca-idx__box span{font-size:13px;line-height:1.5;color:var(--ca-muted)}

/* Pannelli */
.ca-panes-on .ca-pane{display:none}
.ca-panes-on .ca-pane.is-on{display:block;animation:ca-pane-in .28s ease both}
@keyframes ca-pane-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .ca-panes-on .ca-pane.is-on{animation:none} }
.ca-pane + .ca-pane{margin-top:56px}
.ca-panes-on .ca-pane + .ca-pane{margin-top:0}
.ca-pane__k{font-family:var(--ca-font-ui);font-size:11px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--ca-oro-deep);font-weight:700;margin:0 0 8px}
.ca-pane__h{font-family:var(--ca-font-head);font-weight:200;font-size:clamp(30px,4vw,42px);line-height:1.12;
  color:var(--ca-amaranto);margin:0 0 16px}
/* Il titolo del pannello E' un <button> (v. inc/visita.php): su desktop deve sembrare solo un
   titolo, quindi si spoglia di tutto cio' che un bottone porta con se'. Il cursore resta la
   freccia: qui non c'e' niente da cliccare, la sezione si sceglie dall'indice a lato.
   GLI STATI VANNO SPOGLIATI TUTTI, non solo quello a riposo: Kadence veste i <button> anche su
   :hover, :focus e :active, e bastava un click perche' il titolo diventasse un blocco amaranto
   con il testo in bianco — un "evidenziatore" addosso alla scritta (segnalato dal cliente,
   corretto nella 0.7.57). Stessa famiglia di interferenze del CF5. */
.ca-pane__toggle,
.ca-pane__toggle:hover,
.ca-pane__toggle:focus,
.ca-pane__toggle:active{display:block;width:100%;margin:0;padding:0;border:0;background:none;
  box-shadow:none;font:inherit;color:inherit;text-align:left;cursor:default}
/* Chi naviga da tastiera deve pero' vedere dov'e': :focus-visible esclude il click del mouse,
   quindi il contorno compare solo quando serve davvero. */
.ca-pane__toggle:focus-visible{outline:2px solid var(--ca-amaranto);outline-offset:3px;border-radius:6px}
.ca-pane__chev{display:none}
.ca-pane h3{font-family:var(--ca-font-head);font-weight:300;font-size:21px;color:var(--ca-amaranto);margin:0 0 8px}
.ca-pane p{font-size:16.5px;line-height:1.72;color:var(--ca-ink);margin:0 0 16px;max-width:760px}
.ca-pane hr,.ca-pane .wp-block-separator{border:none;height:1px;background:var(--ca-line);margin:34px 0}

/* Navigazione avanti / indietro */
.ca-pnav{display:flex;justify-content:space-between;gap:16px;margin-top:38px;padding-top:22px;
  border-top:1px solid var(--ca-line);font-family:var(--ca-font-ui);font-size:14px}
.ca-pnav a{text-decoration:none;color:var(--ca-amaranto);font-weight:600;display:inline-flex;flex-direction:column;gap:2px}
.ca-pnav a span{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--ca-muted);font-weight:600}
.ca-pnav a.next{text-align:right;margin-left:auto}

/* Info rapide (fascia dati sotto l'hero) */
.ca-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.ca-facts > *{background:#fff;border:1px solid var(--ca-border);border-radius:12px;padding:16px 18px;
  box-shadow:var(--ca-shadow-sm);font-size:15px;line-height:1.5;margin:0}
.ca-facts strong{display:block;font-family:var(--ca-font-ui);font-size:10.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--ca-oro-deep);font-weight:700;margin-bottom:4px}

/* Card in griglia */
.ca-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}
.ca-card{background:#fff;border:1px solid var(--ca-border);border-radius:14px;padding:20px 22px;box-shadow:var(--ca-shadow-sm)}
.ca-card h4,.ca-card h3{font-family:var(--ca-font-head);font-size:18px;font-weight:300;color:var(--ca-amaranto);margin:0 0 6px}
.ca-card p{font-size:14.5px;line-height:1.6;color:var(--ca-muted);margin:0}
.ca-card__k{font-family:var(--ca-font-ui);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ca-oro-deep);font-weight:700;margin:0 0 8px}

/* Passi numerati */
.ca-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.ca-step{background:#fff;border:1px solid var(--ca-border);border-radius:14px;padding:20px 22px;box-shadow:var(--ca-shadow-sm)}
.ca-step__n{font-family:var(--ca-font-head);font-size:34px;color:var(--ca-oro);line-height:1;margin:0 0 8px;font-weight:300}
.ca-step h4,.ca-step h3{font-family:var(--ca-font-head);font-size:17px;font-weight:400;color:var(--ca-amaranto);margin:0 0 6px}
.ca-step p{font-size:14.5px;color:var(--ca-muted);line-height:1.6;margin:0}

/* Elenco puntato "ricco" */
.ca-list{list-style:none;padding:0;margin:0 0 18px;max-width:760px}
.ca-list li{position:relative;padding:12px 0 12px 26px;border-bottom:1px dashed var(--ca-line);font-size:15.5px;line-height:1.6}
.ca-list li:last-child{border-bottom:none}
.ca-list li::before{content:"";position:absolute;left:2px;top:20px;width:8px;height:8px;border-radius:50%;background:var(--ca-oro)}
.ca-list b,.ca-list strong{color:var(--ca-amaranto)}

/* Planimetria + legenda. Dalla 0.9.31 la legenda sta SOTTO l'immagine e non piu' a fianco:
   affiancata si portava via un terzo della larghezza, e una vista aerea vive di dettaglio —
   larga il doppio, i campi e le scuderie si leggono senza aprire il lightbox. */
.ca-plan{display:grid;grid-template-columns:1fr;gap:20px}
.ca-plan .wp-block-image{margin:0}
.ca-plan img{border-radius:16px;border:1px solid var(--ca-border);box-shadow:var(--ca-shadow);width:100%}
.ca-legend{list-style:none;padding:0;margin:0;counter-reset:ca-legend}
.ca-legend li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--ca-line);font-size:14.5px;line-height:1.5;counter-increment:ca-legend}
.ca-legend li:last-child{border-bottom:none}
/* Sotto l'immagine la legenda va in colonne: in fila unica sarebbe una lista di sei righe
   che allunga la pagina. Niente righe di separazione — con le colonne il filo orizzontale
   taglierebbe fra voci di colonne diverse, che non c'entrano una con l'altra. */
.ca-plan .ca-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 30px}
.ca-plan .ca-legend li{border-bottom:none;padding:7px 0}
.ca-legend li::before{content:counter(ca-legend);flex:0 0 24px;height:24px;border-radius:50%;background:var(--ca-amaranto);
  color:#fff;font-family:var(--ca-font-ui);font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ca-legend b,.ca-legend strong{color:var(--ca-amaranto)}

/* Mappa del campo con i pallini numerati sulla foto (shortcode [ca_mappa_campo]).
   Il bordo bianco e l'ombra sotto il pallino non sono decorazione: sopra una foto aerea
   l'amaranto pieno finisce sia su prato chiaro sia su bosco scuro, e senza stacco su uno
   dei due sparirebbe. */
.ca-fmap{margin:0}
.ca-fmap__wrap{position:relative;line-height:0}
.ca-fmap__wrap img{width:100%;height:auto;border-radius:16px;border:1px solid var(--ca-border);box-shadow:var(--ca-shadow)}
.ca-fmap__pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:50%;background:var(--ca-amaranto);color:#fff;
  border:2px solid rgba(255,255,255,.92);box-shadow:0 1px 5px rgba(0,0,0,.5);
  font-family:var(--ca-font-ui);font-size:11px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center}
.ca-fmap__cap{margin-top:18px}
/* `columns` e non grid: le colonne CSS impaginano in verticale (1-6 | 7-12 | 13-18), la griglia
   avrebbe messo 1-2-3 sulla prima riga e una legenda numerata cosi' si segue peggio. */
.ca-fmap__leg{columns:210px 3;column-gap:30px;margin:0;padding:0}
.ca-fmap__leg li{border-bottom:none;padding:6px 8px;margin-left:-8px;border-radius:8px;break-inside:avoid;cursor:default}

/* Evidenziazione incrociata: dal pallino alla voce e viceversa (panes.js).
   Il pallino acceso cresce e prende un anello d'oro invece di cambiare colore: su una foto
   aerea un riempimento diverso si confonderebbe col terreno sotto, l'anello no. z-index
   perche' i pallini vicini (7 e 8) altrimenti si coprirebbero a vicenda una volta ingranditi. */
.ca-fmap__pin{transition:transform .18s ease,box-shadow .18s ease}
.ca-fmap__pin.is-on{transform:translate(-50%,-50%) scale(1.4);z-index:3;
  box-shadow:0 0 0 3px var(--ca-oro),0 2px 9px rgba(0,0,0,.55)}
/* La voce accesa va in SABBIA e non in paper-2: paper-2 (#F1EBDF) sul fondo paper (#FAF6EF) e'
   uno scarto di due punti di luminosita', praticamente invisibile. Sabbia si stacca davvero.
   Testo in amaranto (7,6:1 sul nuovo fondo) e numero con lo stesso anello d'oro del pallino
   sulla foto, cosi' le due estremita' dell'abbinamento si somigliano.
   Niente cambio di font-weight: in colonne da 210px il grassetto manderebbe le voci lunghe a
   capo, e la legenda si riordinerebbe sotto il mouse. */
.ca-fmap__leg li{transition:background-color .18s ease,color .18s ease}
.ca-fmap__leg li::before{transition:transform .18s ease,box-shadow .18s ease}
.ca-fmap__leg li.is-on{background:var(--ca-sabbia);color:var(--ca-amaranto)}
.ca-fmap__leg li.is-on::before{box-shadow:0 0 0 2px var(--ca-oro-deep);transform:scale(1.12)}
@media(prefers-reduced-motion:reduce){
  .ca-fmap__pin,.ca-fmap__leg li{transition:none}
}

/* La fascia di evidenza (.ca-hilite) è passata in components.css: da 0.9.11 la usa anche la
   pagina Contatti per l'invito verso Partner, e un componente di due pagine non può stare nel
   foglio di una sola — lì fuori sarebbe rimasto senza stile. */

/* FAQ (accordion dal CPT ca_faq_visitatore) */
.ca-faq{max-width:820px}
.ca-faq details{background:#fff;border:1px solid var(--ca-border);border-radius:12px;margin-bottom:10px;
  box-shadow:var(--ca-shadow-sm);overflow:hidden}
.ca-faq summary{cursor:pointer;list-style:none;padding:16px 20px;font-family:var(--ca-font-ui);font-weight:600;
  font-size:15.5px;color:var(--ca-amaranto);display:flex;justify-content:space-between;gap:16px;align-items:center}
.ca-faq summary::-webkit-details-marker{display:none}
.ca-faq summary::after{content:"+";font-size:20px;color:var(--ca-oro-deep);font-weight:400;line-height:1}
.ca-faq details[open] summary::after{content:"–"}
.ca-faq__a{padding:0 20px 18px}
.ca-faq__a p{margin:0 0 10px;font-size:15.5px;line-height:1.68;color:var(--ca-ink);max-width:none}
.ca-faq__a p:last-child{margin-bottom:0}

/* Responsive: l'indice diventa una barra di chip appiccicata */
@media(max-width:900px){
  /* minmax(0,1fr) e non 1fr: "1fr" vale "minmax(auto,1fr)", e quell'auto prende la larghezza
     MINIMA DEL CONTENUTO. Con l'indice a pill (white-space:nowrap) il minimo era 1066px, quindi
     la colonna si allargava dentro una finestra da 375 e portava fuori schermo meta' pagina:
     le tabelle risultavano tagliate e quattro voci dell'indice su sei erano irraggiungibili,
     perche' l'overflow-x:auto non poteva agire su un contenitore che si era gia' allargato.
     Lo zero rimette il minimo a zero e obbliga il contenuto a stare dentro. */
  .ca-visita__grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .ca-idx,.ca-panes{min-width:0}

  /* FISARMONICA (0.7.54). L'indice a barra sparisce: le testate delle sezioni sono gia' un
     indice, con il vantaggio di stare in colonna e non richiedere scorrimento laterale. */
  .ca-idx{display:none}
  .ca-panes-on .ca-pane{display:block;animation:none}   /* tutte presenti: chiuse, non nascoste */
  .ca-pane,.ca-panes-on .ca-pane + .ca-pane{margin-top:0}
  .ca-pane{border-bottom:1px solid var(--ca-line)}
  .ca-pane:first-child{border-top:1px solid var(--ca-line)}

  .ca-pane__h{margin:0;font-size:20px;line-height:1.25}
  .ca-pane__toggle,
  .ca-pane__toggle:hover,
  .ca-pane__toggle:focus,
  .ca-pane__toggle:active{display:flex;align-items:center;justify-content:space-between;gap:14px;
    min-height:56px;padding:14px 2px;cursor:pointer;background:none;box-shadow:none;color:inherit;
    /* Qui il titolo e' un comando che si preme: la pressione prolungata non deve selezionare
       il testo come fosse un paragrafo. Su desktop resta selezionabile e copiabile. */
    -webkit-user-select:none;user-select:none;
    -webkit-tap-highlight-color:transparent}
  .ca-pane__t{flex:1 1 auto;min-width:0}
  .ca-pane__chev{display:block;flex:0 0 auto;color:var(--ca-oro-deep);transition:transform .22s}
  .ca-pane.is-on .ca-pane__chev{transform:rotate(180deg)}

  .ca-pane__body{display:none}
  .ca-pane.is-on .ca-pane__body{display:block;padding-bottom:28px;animation:ca-pane-in .24s ease both}

  /* La chiave "01 · ORARI" sopra il titolo, in fisarmonica, raddoppierebbe la testata. */
  .ca-pane__k{display:none}
  /* Avanti/indietro: in fisarmonica la sezione successiva e' gia' li' sotto, a un dito. */
  .ca-pnav{display:none}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .ca-pane.is-on .ca-pane__body{animation:none}
  .ca-pane__chev{transition:none}
}
@media(max-width:600px){
  .ca-pnav{flex-direction:column;gap:12px}
  .ca-pnav a.next{text-align:left;margin-left:0}
  /* Su 340px di foto i pallini da 22px si toccherebbero: 7 e 8 distano meno di 20px. */
  .ca-fmap__pin{width:16px;height:16px;font-size:8.5px;border-width:1.5px}
}

/* Stampa: tutto aperto, niente indice */
@media print{
  .ca-panes-on .ca-pane{display:block!important;animation:none}
  .ca-idx,.ca-pnav,.ca-visita__cta{display:none}
  .ca-visita__grid{display:block}
  .ca-faq details{break-inside:avoid}
}

/* Blocco Tabella core usato come .ca-detail (il blocco avvolge in <figure>) */
figure.wp-block-table.ca-detail{margin:0 0 18px;background:#fff;border:1px solid var(--ca-border);
  border-radius:14px;overflow:hidden;box-shadow:var(--ca-shadow-sm);max-width:820px}
figure.wp-block-table.ca-detail table{width:100%;border-collapse:collapse;background:transparent}
figure.wp-block-table.ca-detail td,figure.wp-block-table.ca-detail th{border:none;
  border-bottom:1px solid var(--ca-line);padding:13px 18px;font-size:15px;text-align:left}
figure.wp-block-table.ca-detail tr:last-child td,figure.wp-block-table.ca-detail tr:last-child th{border-bottom:none}
figure.wp-block-table.ca-detail td:first-child{font-family:var(--ca-font-ui);font-size:12px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ca-oro-deep);font-weight:700;width:210px;vertical-align:middle}
figure.wp-block-table.ca-detail strong{color:var(--ca-amaranto)}