/* Storie e Nostalgia — stile pubblico
   Banner fisso (#banner-fisso) dietro; header, contenuti e footer scorrono sul layer #layer sovrapposto. */
:root{
  --rosso:#d30000; --rosso-s:#a80000; --testo:#5f5f5f; --titoli:#111; --fondo:#f7f9fa;
  --header-h:94px; --hero-h:clamp(220px,46vw,470px);
  --f-testo:"Lato",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --f-titoli:"Raleway","Lato",-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--testo);font:400 16px/22px var(--f-testo)}
img{max-width:100%;height:auto}
a{color:var(--rosso);text-decoration:none}
a:hover{color:var(--rosso-s);text-decoration:underline}
h1,h2,h3,h4,h5,h6{font-family:var(--f-titoli);font-weight:400;color:var(--titoli);line-height:1.25}

/* ── banner fisso + layer ── */
#banner-fisso{position:fixed;left:0;right:0;top:0;height:calc(var(--header-h) + var(--hero-h));z-index:0;
  background:#e8dcc8 linear-gradient(135deg,#e9d9bd,#d7b99a) center/cover no-repeat}
#layer{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
#testata-sito{background:#fff;height:var(--header-h);box-shadow:0 1px 4px rgba(0,0,0,.12);position:relative;z-index:5}
#finestra-banner{height:var(--hero-h);display:flex;align-items:flex-end;pointer-events:none}
#finestra-banner > *{pointer-events:auto}
#finestra-banner.finestra-vuota{align-items:center;justify-content:center}
.logo-grande{height:88%;width:auto;max-width:92%;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.25))}
#contenuto{background:var(--fondo);flex:1;padding:32px 0 48px}
#piede{background:#fff;border-top:1px solid #e3e6e8}

.wrap{max-width:1500px;margin:0 auto;padding:0 22px}
.wrap-top{max-width:1500px;margin:0 auto;padding:0 22px;height:100%;display:flex;align-items:center;justify-content:space-between}

/* ── logo e menu ── */
.logo img{height:78px;width:auto;display:block;aspect-ratio:auto}
.logo-testo{font:italic 700 28px/1 Georgia,"Times New Roman",serif;color:#8b2c2c;letter-spacing:.5px}
.logo-testo em{color:#b3402f}
#menu-principale ul{list-style:none;margin:0;padding:0;display:flex;gap:6px}
#menu-principale li{position:relative}
#menu-principale a{display:block;padding:10px 14px;color:#777;font:400 20px var(--f-titoli);text-decoration:none}
#menu-principale a:hover,#menu-principale li:hover>a{color:var(--rosso)}
#menu-principale .sotto{display:none;position:absolute;top:100%;left:0;min-width:230px;background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.14);flex-direction:column;gap:0;padding:6px 0;border-top:2px solid var(--rosso);z-index:20}
#menu-principale li:hover>.sotto,#menu-principale li:focus-within>.sotto{display:flex}
#menu-principale .sotto a{font-weight:400;padding:8px 18px;white-space:nowrap}
#btn-menu{display:none;background:none;border:0;cursor:pointer;padding:8px}
#btn-menu span{display:block;width:26px;height:2px;background:#555;margin:6px 0;transition:.2s}

/* ── titolo sulla finestra del banner ── */
.titolo-testata{margin:0;padding:0 22px 26px;max-width:1180px;width:100%;margin-inline:auto;
  color:#fff;font:400 clamp(26px,4.4vw,50px)/1.15 var(--f-titoli);text-shadow:0 2px 12px rgba(0,0,0,.6)}

/* ── layout ── */
.due-colonne{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:42px}
.titolo-sezione{font-size:30px;line-height:32px;margin:0 0 18px;font-weight:700}
.titolo-sezione a{color:inherit}
.blocco-categoria{margin-top:42px}
.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:26px}
.griglia.tre{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:#fff;border:1px solid #e5e8ea;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s}
.card:hover{box-shadow:0 6px 18px rgba(0,0,0,.1)}
.card-img{display:block;aspect-ratio:16/10;background:#ece5da;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.card:hover .card-img img{transform:scale(1.04)}
.img-vuota{display:block;width:100%;height:100%;background:linear-gradient(135deg,#ece0cd,#d9c1a6)}
.card-testo{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{margin:0;font-size:24px;line-height:1.25}
.card h3 a{color:var(--titoli)}
.card p{margin:0;font-size:18px;line-height:1.5}
.meta{font-size:16px;color:#8a8a8a;margin:0}
.leggi{margin-top:auto;font-weight:700;font-size:17px}
.vedi-tutti{text-align:right;margin:18px 0 0;font-weight:700}
.descrizione{font-size:18px;margin:0 0 20px}
.sottocategorie{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.sottocategorie a{background:#fff;border:1px solid #dcdcdc;border-radius:20px;padding:4px 14px;font-size:14px}
.paginazione{display:flex;justify-content:space-between;align-items:center;margin-top:30px;font-size:15px}

/* ── articolo ── */
.articolo{background:#fff;border:1px solid #e5e8ea;border-radius:6px;padding:30px 34px}
.articolo>h1{margin:0 0 6px;font-size:clamp(26px,3.4vw,38px);color:#000}
.corpo{font-size:18px;line-height:1.5;margin-top:18px}
.corpo p{margin:0 0 1.1em}
.corpo h2,.corpo h3,.corpo h4{margin:1.4em 0 .5em}
.corpo img{border-radius:3px}
.corpo blockquote,.corpo .bq{margin:1.6em 0;padding:4px 0 4px 20px;border-left:4px solid var(--rosso)}
.corpo .bq h3{margin:0;font-size:1.35em}
.corpo hr{border:0;margin:2em 0;height:1px;background:#ddd}
.corpo hr.div-dots{height:12px;background:radial-gradient(circle,#bbb 2px,transparent 3px) center/16px 12px repeat-x}
.corpo hr.div-zigzag{height:10px;background:linear-gradient(135deg,transparent 75%,#ccc 75%) 0 0/14px 10px,linear-gradient(45deg,transparent 75%,#ccc 75%) 0 0/14px 10px}
.galleria{display:grid;gap:10px;margin:1.4em 0}
.galleria.c2{grid-template-columns:repeat(2,1fr)}.galleria.c3{grid-template-columns:repeat(3,1fr)}
.galleria.c4{grid-template-columns:repeat(4,1fr)}.galleria.c5,.galleria.c6{grid-template-columns:repeat(5,1fr)}
.galleria a{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:4px;background:#eee}
.galleria img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:1.4em 0}
.video-grid .video{position:relative;aspect-ratio:16/9;background:#000;border-radius:4px;overflow:hidden}
.video-grid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
figure.immagine{margin:1.4em 0;text-align:center}
.tags{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.tags a{background:#f0f2f3;border-radius:14px;padding:2px 12px;font-size:14px}
.bozza{color:#c0392b}
.btn-admin{display:inline-block;margin-top:18px;background:#2471a3;color:#fff;border-radius:6px;padding:7px 16px;font-size:14px}
.btn-admin:hover{background:#1a5276;color:#fff;text-decoration:none}
.prec-succ{display:flex;justify-content:space-between;gap:20px;margin:22px 0;font-size:14px}
.prec-succ a{max-width:48%}

/* ── commenti e form ── */
.commenti{margin-top:34px}
.commento{background:#fff;border:1px solid #e5e8ea;border-radius:6px;padding:12px 18px;margin-bottom:12px}
.commento p{margin:6px 0 0}
.commento .data{color:#999;font-size:13px;margin-left:8px}
.form-commento{display:grid;gap:14px;max-width:640px;margin-top:22px}
.form-commento label{display:grid;gap:4px;font-size:14px}
.form-commento input,.form-commento textarea{font:inherit;padding:9px 12px;border:1px solid #cfd4d7;border-radius:6px;background:#fff}
.form-commento button,.form-cerca button,#ok-cookie{background:var(--rosso);color:#fff;border:0;border-radius:6px;padding:10px 22px;font:700 15px var(--f-testo);cursor:pointer;justify-self:start}
.form-commento button:hover,.form-cerca button:hover{background:var(--rosso-s)}
.hp{position:absolute!important;left:-9999px!important;height:0;width:0;opacity:0}
.flash{padding:10px 16px;border-radius:6px;margin-bottom:18px;background:#e8f5e9;color:#1e6b34}
.flash.err{background:#fdecea;color:#a93226}

/* ── sidebar ── */
.sidebar{display:flex;flex-direction:column;gap:22px}
.widget{background:#fff;border:1px solid #e5e8ea;border-radius:6px;padding:16px 20px}
.widget h3{margin:0 0 10px;font-size:30px;line-height:32px;font-weight:700}
.widget ul{list-style:none;margin:0;padding:0}
.widget li{padding:5px 0;font-size:19px}
.widget li ul{padding-left:14px}
.widget .n{color:#999;font-size:16px}
.form-cerca{display:flex;gap:8px}
.form-cerca input{flex:1;min-width:0;padding:8px 10px;border:1px solid #cfd4d7;border-radius:6px;font:inherit}
.form-cerca button{padding:8px 14px}

/* ── footer ── */
.colonne-piede{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;padding-top:34px;padding-bottom:20px}
#piede h3{font-size:30px;line-height:32px;font-weight:700;margin:0 0 10px}
#piede ul{list-style:none;margin:0;padding:0}
#piede li{padding:3px 0;font-size:14.5px}
#piede .data{font-size:12.5px;color:#999}
.copy{text-align:center;font-size:13px;color:#999;padding:14px 0 22px}

/* ── social fisso ── */
.social-fisso{position:fixed;left:0;top:96px;z-index:30;display:flex;flex-direction:column;gap:6px;padding-left:8px}
.social-fisso a{width:34px;height:34px;border-radius:5px;background:#3b5998;display:grid;place-items:center}
.social-fisso a:nth-child(2){background:#111}
.social-fisso svg{width:20px;height:20px;fill:#fff}
.social-fisso a:hover{opacity:.85;text-decoration:none}

/* ── cookie ── */
#avviso-cookie{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid #ddd;
  box-shadow:0 -4px 14px rgba(0,0,0,.12);padding:12px 22px;display:flex;gap:18px;align-items:center;justify-content:center}
#avviso-cookie[hidden]{display:none}
#avviso-cookie p{margin:0;font-size:14px}

/* ── lightbox ── */
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:100;display:none;align-items:center;justify-content:center;cursor:zoom-out}
#lightbox.on{display:flex}
#lightbox img{max-width:94vw;max-height:92vh;border-radius:4px}

/* ── responsive ── */
@media (max-width:1100px){
  :root{--header-h:76px}
  .logo img{height:50px}
  #btn-menu{display:block}
  #menu-principale{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:0 8px 18px rgba(0,0,0,.14);max-height:80vh;overflow:auto}
  #menu-principale.aperto{display:block}
  #menu-principale ul{flex-direction:column;gap:0;padding:6px 0}
  #menu-principale .sotto{display:flex;position:static;box-shadow:none;border:0;padding:0 0 4px 16px}
  #menu-principale .sotto a{padding:6px 18px}
}
@media (max-width:900px){
  .due-colonne{grid-template-columns:1fr}
  .colonne-piede{grid-template-columns:1fr}
}
@media (max-width:620px){
  .articolo{padding:20px 18px}
  .social-fisso{display:none}
  .galleria.c4,.galleria.c5,.galleria.c6,.galleria.c3{grid-template-columns:repeat(2,1fr)}
  #avviso-cookie{flex-direction:column;gap:8px;text-align:center}
}

/* tipografia del tema originale (Betheme, desktop) */
h1{font-size:50px;line-height:50px;font-weight:700}
h2{font-size:28px;line-height:28px;font-weight:400}
h3{font-weight:700}
h4{font-size:22px;line-height:26px;font-weight:300}
.articolo>h1{font-size:clamp(30px,4vw,50px);line-height:1.1;font-weight:700}

/* pagina Chi siamo */
.chi-ruoli{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px;margin:18px 0}
.persone-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 34px;margin:18px 0}
.persona{display:flex;gap:18px;align-items:flex-start}
.persona img{width:110px;height:110px;object-fit:cover;border-radius:50%;flex:none}
.persona.grande img{width:150px;height:150px}
.persona h4{margin:0 0 6px;font-size:22px;font-weight:700}
.persona p{margin:0;font-size:16px;line-height:1.5}
.persona .ruolo{display:block;color:var(--rosso);font:700 14px var(--f-titoli);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
@media (max-width:760px){.persone-2col{grid-template-columns:1fr}.persona,.persona.grande{flex-direction:column;align-items:center;text-align:center}}

/* testo articoli uniforme alla Home (18px): annulla i font-size/line-height inline importati da WordPress */
.corpo p,.corpo li,.corpo span,.corpo div{font-size:18px!important;line-height:1.5!important}
.corpo [style*="font-size"],.corpo [style*="line-height"]{font-size:18px!important;line-height:1.5!important}
.corpo .bq h3,.corpo h2,.corpo h3,.corpo h4{line-height:1.25!important}
.corpo h2{font-size:28px!important}.corpo h3{font-size:24px!important}.corpo h4{font-size:22px!important}
.corpo .bq h3{font-size:1.35em!important}