/* =========================================================================
   Banner di consenso ai cookie
   =========================================================================
   Caricato soltanto quando in amministrazione e' stato inserito un codice di
   misurazione. Senza statistiche il sito usa solo cookie tecnici e il banner
   non serve, quindi non viene nemmeno stampato.

   Le linee guida del Garante di giugno 2021 chiedono che rifiutare sia
   facile quanto accettare: i due pulsanti hanno percio' la stessa dimensione
   e lo stesso peso visivo, e la X in alto equivale a un rifiuto, non a un
   consenso.
   ========================================================================= */

.ck-banner{
  position:fixed;
  left:16px; right:16px; bottom:16px;
  z-index:9000;
  max-width:560px;
  margin-inline:auto;
  background:var(--paper, #F4EFE6);
  color:var(--ink, #23211C);
  border:1px solid var(--rule, #D8CFBC);
  border-radius:4px;
  box-shadow:0 18px 50px rgba(35,33,28,.22);
  padding:26px 26px 22px;
  font-family:"Spline Sans", system-ui, -apple-system, sans-serif;
  animation:ck-entra .32s cubic-bezier(.22,.8,.3,1) both;
}
@keyframes ck-entra{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .ck-banner{ animation:none; } }

.ck-banner[hidden]{ display:none; }

.ck-occhiello{
  display:block;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bronze-deep, #8A7647);
  margin-bottom:8px;
}

.ck-banner h2{
  font-family:Fraunces, Georgia, serif;
  font-weight:600;
  font-size:1.32rem;
  line-height:1.2;
  margin:0 0 10px;
}

.ck-banner p{
  font-size:.94rem;
  line-height:1.6;
  color:var(--ink-soft, #4A463C);
  margin:0 0 18px;
  max-width:54ch;
}

.ck-banner a{ color:var(--bronze-deep, #8A7647); text-underline-offset:3px; }
.ck-banner a:hover{ color:var(--terracotta, #B05A3C); }

.ck-azioni{ display:flex; flex-wrap:wrap; gap:10px; }

.ck-btn{
  flex:1 1 auto;
  min-width:140px;
  font:inherit;
  font-weight:500;
  font-size:.92rem;
  padding:12px 18px;
  border-radius:3px;
  border:1px solid var(--bronze-deep, #8A7647);
  cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
/* Accettare e rifiutare hanno lo stesso identico aspetto: un pulsante pieno
   e uno solo contornato sarebbero una spinta verso il si', che il Garante
   considera un modo scorretto di raccogliere il consenso. */
.ck-accetta,
.ck-rifiuta{ background:var(--bronze-deep, #8A7647); color:var(--paper, #F4EFE6); }
.ck-accetta:hover,
.ck-rifiuta:hover{ background:var(--ink, #23211C); border-color:var(--ink, #23211C); }

/* Personalizza e Salva sono azioni di contorno: contornate, piu' discrete. */
.ck-secondario{ background:transparent; color:var(--bronze-deep, #8A7647); flex-basis:100%; }
.ck-secondario:hover{ background:var(--paper-2, #EBE3D4); }
.ck-btn[hidden]{ display:none; }

.ck-btn:focus-visible{ outline:2px solid var(--terracotta, #B05A3C); outline-offset:2px; }

/* La X equivale a un rifiuto: sta in alto a destra e non e' piu' evidente
   dei due pulsanti, per non spingere verso una scelta. */
.ck-chiudi{
  position:absolute; top:10px; right:10px;
  width:32px; height:32px; line-height:1;
  background:none; border:0; cursor:pointer;
  color:var(--ink-soft, #4A463C);
  font-size:1.1rem;
  border-radius:3px;
}
.ck-chiudi:hover{ background:var(--paper-2, #EBE3D4); }
.ck-chiudi:focus-visible{ outline:2px solid var(--terracotta, #B05A3C); outline-offset:2px; }

/* Il link nel footer per tornare sulla scelta */
.ck-riapri{ background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.ck-riapri:hover{ color:var(--bronze, #A6925E); }

@media (max-width:560px){
  .ck-banner{ left:8px; right:8px; bottom:8px; padding:22px 20px 18px; }
  .ck-azioni .ck-btn{ flex:1 1 100%; }
}

/* =========================================================================
   Contenuti ospitati da terzi (video YouTube, mappe Google)
   =========================================================================
   Al posto dell'iframe compare un riquadro con lo stesso ingombro, cosi' il
   contenuto che arrivera' non fa saltare la pagina quando viene caricato. */

.ck-esterno{
  position:relative;
  width:100%;
  height:100%;
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper-2, #EBE3D4);
  border:1px solid var(--rule, #D8CFBC);
  overflow:hidden;
}
/* Nel riquadro video del modulo l'altezza la detta il contenitore. */
.mr-frame .ck-esterno{ position:absolute; inset:0; min-height:0; }
.map-embed .ck-esterno{ min-height:320px; }

.ck-esterno-avviso{
  text-align:center;
  padding:28px 24px;
  max-width:42ch;
}

.ck-esterno-genere{
  display:block;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bronze-deep, #8A7647);
  margin-bottom:8px;
}

.ck-esterno-titolo{
  font-family:Fraunces, Georgia, serif;
  font-weight:600;
  font-size:1.06rem;
  line-height:1.25;
  margin:0 0 8px;
  color:var(--ink, #23211C);
}

.ck-esterno-testo{
  font-size:.88rem;
  line-height:1.55;
  color:var(--ink-soft, #4A463C);
  margin:0 0 16px;
}

.ck-esterno .ck-esterno-carica{ min-width:0; flex:0 0 auto; }

.ck-esterno-nota{ margin:12px 0 0; font-size:.78rem; }
.ck-esterno-nota a{ color:var(--bronze-deep, #8A7647); text-underline-offset:3px; }
.ck-esterno-nota a:hover{ color:var(--terracotta, #B05A3C); }

/* Una volta caricato, l'iframe prende tutto il posto del riquadro. */
.ck-esterno.ck-caricato{ background:none; border:0; padding:0; display:block; }
.ck-esterno.ck-caricato iframe{ display:block; width:100%; height:100%; min-height:inherit; border:0; }
.map-embed .ck-esterno.ck-caricato iframe{ min-height:320px; }


/* =========================================================================
   Scelta per categorie
   ========================================================================= */

.ck-banner{ max-height:calc(100vh - 32px); overflow-y:auto; }

.ck-dettaglio{ margin:0 0 18px; }
.ck-dettaglio[hidden]{ display:none; }

.ck-categorie{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule, #D8CFBC); }
.ck-categoria{ padding:14px 0; border-bottom:1px solid var(--rule, #D8CFBC); }

.ck-voce{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
}
.ck-voce input{ position:absolute; opacity:0; width:1px; height:1px; }

/* Interruttore disegnato: la casella vera resta sotto, per tastiera e
   lettori di schermo. */
.ck-interruttore{
  position:relative;
  flex:0 0 auto;
  width:38px; height:22px;
  border-radius:11px;
  background:var(--rule, #D8CFBC);
  transition:background .18s ease;
}
.ck-interruttore::after{
  content:"";
  position:absolute; top:3px; left:3px;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--paper, #F4EFE6);
  box-shadow:0 1px 2px rgba(35,33,28,.25);
  transition:transform .18s ease;
}
.ck-voce input:checked + .ck-interruttore{ background:var(--bronze-deep, #8A7647); }
.ck-voce input:checked + .ck-interruttore::after{ transform:translateX(16px); }
.ck-voce input:focus-visible + .ck-interruttore{ outline:2px solid var(--terracotta, #B05A3C); outline-offset:2px; }
.ck-voce input:disabled + .ck-interruttore{ opacity:.6; }
.ck-voce:has(input:disabled){ cursor:default; }
@media (prefers-reduced-motion: reduce){ .ck-interruttore, .ck-interruttore::after{ transition:none; } }

.ck-nome{ font-weight:600; font-size:.94rem; color:var(--ink, #23211C); }
.ck-sempre{ margin-left:auto; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft, #4A463C); }

.ck-banner .ck-spiega{ margin:6px 0 0 50px; font-size:.86rem; line-height:1.5; max-width:none; }