/*
Theme Name: PGS Full
Theme URI: https://www.pgsicilia.it
Author: Mimmo
Description: Tema per le sezioni regionali e provinciali PGS (Polisportive Giovanili Salesiane), coerente con il design del sito nazionale pgsitalia.org. Prima installazione: PGS Sicilia.
Version: 1.21.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: pgs-full
*/

@font-face{
  font-family:'Big Shoulders Text';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(fonts/bigshoulders.woff2) format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(fonts/inter.woff2) format('woff2');
}
:root{
  --blue:#0094FE;
  --blue-dark:#295477;
  --navy:#254685;
  --sky:#5BC0DE;
  --red:#D33A45;
  --cream:#F9F7F5;
  --line:#ECE8E3;
  --ink:#0B0B0C;
  --body:rgba(0,0,0,.74);
  --display:'Big Shoulders Text',Impact,'Arial Narrow',sans-serif;
  --text:'Inter',-apple-system,'Segoe UI',sans-serif;
  --z-drop:20; --z-header:30;
}
body{
  margin:0; background:#fff; color:var(--body);
  font-family:var(--text); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--ink); text-wrap:balance; margin:0}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
.wrap{max-width:1180px; margin-inline:auto; padding-inline:clamp(20px,4vw,40px)}
[id]{scroll-margin-top:90px}
.im{background-size:cover; background-position:center}
.screen-reader-text,
.solo-lettori{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap; margin:-1px; padding:0; border:0}
/* Salto al contenuto: invisibile finché non lo si raggiunge col tasto Tab */
.salta-al-contenuto{position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--navy); color:#fff; padding:12px 18px; border-radius:0 0 6px 0;
  font-family:var(--text); font-weight:600; text-decoration:none}
.salta-al-contenuto:focus{left:0}

/* ---------- topbar rete nazionale ---------- */
.topbar{background:var(--navy); color:#fff}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:7px}
.topbar span{font-size:12.5px; color:rgba(255,255,255,.75); letter-spacing:.02em}
.topbar a{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:#fff; min-height:24px;
  font-family:var(--display); font-weight:650; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  transition:color .15s ease-out;
}
.topbar a:hover{color:var(--sky)}
.topbar a svg{flex-shrink:0}
@media (max-width:700px){
  .topbar span{display:none}
  .topbar .wrap{justify-content:center}
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  background:#fff; border-bottom:1px solid var(--line);
}
.bar{display:flex; align-items:center; gap:24px; padding-block:14px}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0}
.logo img{display:block; width:54px; height:54px; object-fit:contain}
.logo .word{line-height:1.05}
.logo .word b{
  font-family:var(--display); font-weight:750; font-size:24px; letter-spacing:.02em;
  color:var(--ink); text-transform:uppercase; display:block;
}
.logo .word span{font-size:10.5px; letter-spacing:.02em; color:rgba(0,0,0,.55); display:block; white-space:pre-line}
nav.main{margin-left:auto}
nav.main ul{list-style:none; margin:0; padding:0; display:flex; gap:2px}
nav.main li{position:relative}
nav.main a{
  font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:.03em;
  text-transform:uppercase; text-decoration:none; color:var(--ink);
  padding:10px 11px; display:block; border-radius:8px;
}
nav.main > ul > li > a:hover{color:var(--blue)}
nav.main > ul > li.current-menu-item > a,
nav.main > ul > li.current-menu-ancestor > a,
nav.main > ul > li.current_page_parent > a{
  color:var(--blue); text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px;
}
nav.main li.menu-item-has-children > a::after{content:" ▾"; font-size:11px}
nav.main li ul.sub-menu{
  position:absolute; top:100%; left:0; z-index:var(--z-drop);
  min-width:230px; background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 18px 45px rgba(11,32,50,.14); padding:8px; display:block;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease-out, transform .18s ease-out, visibility .18s;
}
nav.main li:hover > ul.sub-menu, nav.main li:focus-within > ul.sub-menu{opacity:1; visibility:visible; transform:none}
nav.main ul.sub-menu a{
  font-family:var(--text); font-weight:500; font-size:14px; text-transform:none; letter-spacing:0;
  color:var(--body); padding:8px 12px; border-radius:8px;
}
nav.main ul.sub-menu a:hover{background:var(--cream); color:var(--ink)}
.cta{
  font-family:var(--display); font-weight:650; font-size:15px; letter-spacing:.04em; text-transform:uppercase;
  background:var(--blue); color:var(--ink); text-decoration:none;
  padding:11px 20px; border-radius:10px; white-space:nowrap; flex-shrink:0;
  transition:filter .15s ease-out, transform .15s ease-out;
}
.cta:hover{filter:brightness(1.08); transform:translateY(-1px)}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:10px; padding:9px 12px; cursor:pointer; font-family:var(--display); font-weight:650; text-transform:uppercase; font-size:14px; letter-spacing:.05em}

/* ---------- hero ---------- */
.hero{position:relative; height:min(88vh,720px); min-height:520px; overflow:hidden; background:var(--blue-dark)}
.slide{
  position:absolute; inset:0; opacity:0;
  /* Le slide spente restavano cliccabili sopra a quella visibile: il clic finiva
     sull'ultima della pila invece che sulla slide mostrata. visibility le toglie
     anche dall'ordine di tabulazione; il ritardo lascia completare la dissolvenza. */
  visibility:hidden; pointer-events:none;
  transition:opacity .9s ease-out, visibility 0s linear .9s;
  display:grid; place-items:center; text-align:center; padding-inline:20px;
}
.slide.on{opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .9s ease-out, visibility 0s}
.slide::before{content:""; position:absolute; inset:0; background:linear-gradient(rgba(8,20,32,.34),rgba(8,20,32,.5))}
.slide-inner{position:relative; max-width:900px}
.slide .h1{
  font-family:var(--display); font-weight:650; text-transform:uppercase; color:#fff;
  font-size:clamp(2.6rem,7vw,5.4rem); line-height:1.02; letter-spacing:.015em; margin:0;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.slide .h1 a{color:inherit; text-decoration:none}
.slide .kicker{
  font-family:var(--display); font-weight:600; font-size:clamp(.85rem,1.6vw,1.05rem);
  letter-spacing:.22em; text-transform:uppercase; color:#fff; opacity:.92; margin-top:18px;
}
.btn-ghost{
  display:inline-block; margin-top:30px; font-family:var(--display); font-weight:650;
  font-size:15px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  color:#fff; border:2px solid #fff; border-radius:10px; padding:12px 26px;
  transition:background .18s ease-out, color .18s ease-out; background:none; cursor:pointer;
}
.btn-ghost:hover{background:#fff; color:var(--ink)}
.hero .arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  background:none; border:0; color:#fff; font-size:34px; cursor:pointer; padding:14px; opacity:.8;
}
.hero .arrow:hover{opacity:1}
.hero .arrow.prev{left:10px}.hero .arrow.next{right:10px}
.dots{position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:0; z-index:2}
/* Il pallino resta di 9px, ma l'area da toccare e di 24x24: sotto quella misura
   il bersaglio e troppo piccolo per un dito. */
.dots button{position:relative; width:24px; height:24px; border:0; padding:0; background:none; cursor:pointer}
.dots button::after{content:""; position:absolute; inset:0; margin:auto; width:9px; height:9px;
  border-radius:50%; background:rgba(255,255,255,.45)}
.dots button.on::after{background:#fff}

/* ---------- sezioni ---------- */
section.blk{padding-block:clamp(64px,9vw,110px)}
.sec-title{
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(1.9rem,3.6vw,2.9rem); text-align:center; margin-bottom:14px;
}
.sec-sub{text-align:center; max-width:62ch; margin:0 auto 48px}

/* mission */
.mission{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:stretch}
.mission-card{
  background:var(--cream); border-radius:14px; padding:clamp(30px,4vw,54px);
  display:flex; flex-direction:column; justify-content:center; text-align:center; gap:26px;
}
.mission-card p{
  margin:0; font-weight:600; color:var(--ink); font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.55;
}
.mission-card .sedi{font-size:14px; font-weight:400; color:var(--body)}
.mission-mark{display:flex; justify-content:center; gap:14px; align-items:center}
.mission-mark img{width:92px; height:92px; object-fit:contain}
.mission-photo{border-radius:14px; min-height:340px}

/* news */
.sec-news{background:var(--cream)}
.news-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.news-card{
  display:grid; grid-template-columns:180px 1fr; background:#fff; border-radius:14px; overflow:hidden;
  text-decoration:none; transition:transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s;
}
.news-card:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(11,32,50,.12)}
.news-thumb{min-height:170px; background-color:var(--blue-dark)}
.news-body{padding:22px 24px; display:flex; flex-direction:column; gap:8px; justify-content:center}
.news-date{font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:rgba(0,0,0,.62)}
.news-card h3{
  font-family:var(--display); font-weight:650; text-transform:uppercase; letter-spacing:.015em;
  font-size:clamp(1.05rem,1.7vw,1.3rem); line-height:1.18;
}
.center-cta{text-align:center; margin-top:44px}
.btn-solid{
  display:inline-block; font-family:var(--display); font-weight:650; font-size:15px; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; color:var(--ink); border:0; cursor:pointer;
  background:var(--blue); border-radius:10px; padding:13px 28px;
  transition:filter .15s ease-out, transform .15s ease-out;
}
.btn-solid:hover{filter:brightness(1.08); transform:translateY(-1px)}

/* comunicati */
.comunicati{max-width:880px; margin-inline:auto}
.com-row{
  display:grid; grid-template-columns:110px 170px 1fr auto; gap:18px; align-items:center;
  padding:17px 18px; border-bottom:1px solid var(--line); text-decoration:none;
  border-radius:10px; transition:background .15s ease-out;
}
.com-row:hover{background:var(--cream)}
.com-row.slim{grid-template-columns:110px 1fr auto}
.com-date{font-size:13.5px; color:rgba(0,0,0,.62); font-variant-numeric:tabular-nums}
.com-org{font-family:var(--display); font-weight:650; font-size:15px; letter-spacing:.05em; text-transform:uppercase; color:var(--navy)}
.com-title{color:var(--ink); font-weight:500; font-size:15.5px}
.com-dl{color:var(--blue); flex-shrink:0}
.com-row:hover .com-dl svg{transform:translateY(2px)}
.com-dl svg{transition:transform .18s ease-out; display:block}

/* province */
.prov-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:780px; margin-inline:auto; list-style:none; padding:0}
@media (max-width:640px){.prov-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}
.prov-grid li{display:contents}
.prov{
  border:1px solid var(--line); border-radius:14px; padding:20px 10px 16px; text-align:center;
  text-decoration:none; background:#fff; display:block;
  transition:background .18s ease-out, transform .18s ease-out, border-color .18s;
}
.prov-stemma{
  display:block; margin:0 auto 10px; width:auto; height:58px; object-fit:contain;
  transition:transform .18s ease-out;
}
.prov:hover .prov-stemma{transform:scale(1.06)}
.prov b{
  font-family:var(--display); font-weight:750; font-size:1.6rem; letter-spacing:.06em;
  color:var(--navy); display:block; line-height:1; transition:color .18s;
}
.prov span{font-size:13.5px; color:var(--body); display:block; margin-top:4px}
.prov-crediti{
  text-align:center; font-size:12px; color:rgba(0,0,0,.62); margin:26px auto 0; max-width:62ch;
}
.prov-crediti a{color:inherit}
.prov:hover{background:var(--blue-dark); border-color:var(--blue-dark); transform:translateY(-3px)}
.prov:hover b, .prov:hover span{color:#fff}

/* sede */
.sec-sede{position:relative; color:#fff; background-color:var(--blue-dark)}
.sec-sede::before{content:""; position:absolute; inset:0; background:rgba(10,24,36,.62)}
.sede-grid{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px); max-width:900px; margin-inline:auto}
.sede-block h2{
  display:flex; align-items:center; gap:16px;
  font-family:var(--display); font-weight:650; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(1.7rem,3vw,2.4rem); color:#fff; margin-bottom:22px;
}
.sede-block h2 svg{flex-shrink:0}
.sede-block p{color:rgba(255,255,255,.95); font-size:16px; margin:0 0 18px}
.orari{width:100%; border-collapse:collapse; font-size:15px; color:rgba(255,255,255,.95)}
.orari td{padding-block:7px; border-bottom:1px solid rgba(255,255,255,.18)}
.orari td:last-child{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- testata pagine interne ---------- */
.page-head{background:var(--cream); padding-block:clamp(40px,6vw,70px)}
.crumbs{font-size:13.5px; color:rgba(0,0,0,.62); margin-bottom:14px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--blue)}
.page-head h1{
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.05;
}
.page-head .lead{max-width:64ch; margin:14px 0 0}

/* archivio news */
.chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:46px}
.chip{
  font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); border:1.5px solid rgba(0,0,0,.22); border-radius:999px;
  padding:8px 18px; transition:all .15s ease-out; background:#fff; cursor:pointer;
}
.chip:hover{border-color:var(--blue); color:var(--blue)}
.chip.on{background:var(--blue-dark); border-color:var(--blue-dark); color:#fff}
.arch-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.a-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none;
  display:flex; flex-direction:column;
  transition:transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s;
}
.a-card:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(11,32,50,.12)}
.a-thumb{height:190px; background-color:var(--blue-dark)}
.a-body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:9px}
.a-tag{font-family:var(--display); font-weight:650; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--navy)}
.a-card h3{
  font-family:var(--display); font-weight:650; text-transform:uppercase; letter-spacing:.015em;
  font-size:1.25rem; line-height:1.18;
}
.a-card p{margin:0; font-size:14.5px; line-height:1.55}
.pagine{display:flex; justify-content:center; gap:8px; margin-top:52px}
.pagine a, .pagine span.current, .pagine span.dots{
  font-family:var(--display); font-weight:650; font-size:16px; text-decoration:none; color:var(--ink);
  min-width:42px; height:42px; border-radius:10px; display:grid; place-items:center; border:1px solid var(--line);
  transition:all .15s ease-out; padding-inline:6px;
}
.pagine a:hover{border-color:var(--blue); color:var(--blue)}
.pagine span.current{background:var(--blue); border-color:var(--blue)}
.pagine span.dots{border:0}

/* articolo */
.art-wrap{max-width:780px; margin-inline:auto}
.art-meta{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:18px 0 0}
.art-meta .a-tag{font-size:13px}
.art-meta .a-tag a{color:inherit; text-decoration:none}
.art-meta .sep{color:rgba(0,0,0,.3)}
.art-figure{border-radius:16px; aspect-ratio:16/8.5; margin:0 0 14px}
.art-caption{font-size:13px; color:rgba(0,0,0,.55); text-align:center; margin-bottom:40px}
.prose{font-size:17px; line-height:1.65; text-wrap:pretty}
.prose p{margin:0 0 22px}
.prose strong{color:var(--ink)}
.prose h2{
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  font-size:1.9rem; margin:44px 0 18px;
}
.prose h3{
  font-family:var(--display); font-weight:650; text-transform:uppercase; letter-spacing:.05em;
  font-size:1.15rem; color:var(--navy); margin:28px 0 10px;
}
.prose ul, .prose ol{margin:0 0 22px; padding-left:24px}
.prose li{margin-block:6px}
.prose img{border-radius:12px}
.prose blockquote{
  background:var(--cream); border-radius:16px; padding:clamp(26px,4vw,42px); margin:44px 0; text-align:center;
}
.prose blockquote p{
  font-family:var(--display); font-weight:650; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(1.3rem,2.6vw,1.8rem); line-height:1.25; color:var(--ink); margin:0 0 14px;
}
.prose blockquote cite{font-style:normal; font-size:14px; color:rgba(0,0,0,.62)}
.prose .wp-caption, .prose figure{max-width:100%; margin:0 0 22px}
.prose figcaption{font-size:13px; color:rgba(0,0,0,.55); text-align:center; margin-top:8px}
.art-actions{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; margin-top:46px; padding-top:28px; border-top:1px solid var(--line)}
.share{display:flex; align-items:center; gap:10px}
.share span{font-family:var(--display); font-weight:650; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:rgba(0,0,0,.62)}
.share a{
  width:36px; height:36px; border-radius:50%; background:var(--blue-dark); color:#fff;
  display:grid; place-items:center; transition:background .15s ease-out;
}
.share a:hover{background:var(--blue); color:var(--ink)}
.sec-rel{background:var(--cream)}
.rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px}

/* pagina statica con sottonavigazione */
.side-layout{display:grid; grid-template-columns:250px 1fr; gap:clamp(34px,5vw,70px); align-items:start}
.subnav{position:sticky; top:96px}
.subnav h4,
.subnav .subnav-titolo{
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  font-size:22px; color:var(--ink); margin-bottom:14px; padding-inline:14px; line-height:1.1;
}
.subnav ul{list-style:none; margin:0 0 26px; padding:0}
.subnav ul ul{margin:0; padding-left:12px}
.subnav a{
  display:block; text-decoration:none; font-size:15px; color:var(--body);
  padding:10px 14px; border-radius:10px; transition:background .15s ease-out, color .15s;
}
.subnav a:hover{background:var(--cream); color:var(--ink)}
.subnav .current_page_item > a{
  background:var(--blue-dark); color:#fff; font-weight:600;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; font-size:14.5px;
}
.subnav ul ul{margin:0 0 6px; padding-left:10px}
.subnav .gruppo > .sub-group{
  display:block; padding:16px 14px 6px;
  font-family:var(--display); font-weight:650; font-size:16.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--navy);
}
.subnav .gruppo + .gruppo > .sub-group{border-top:1px solid var(--line); margin-top:6px}
.subnav-card{background:var(--cream); border-radius:14px; padding:20px 22px; font-size:14px}
.subnav-card b{font-family:var(--display); font-weight:650; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); display:block; margin-bottom:6px; font-size:14.5px}
.page-photo{border-radius:16px; margin-block:34px}
.cta-band{
  background:var(--blue-dark); border-radius:18px; color:#fff; margin-top:46px;
  padding:clamp(28px,4vw,44px); display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.cta-band h3{
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(1.4rem,2.6vw,2rem); color:#fff;
}
.cta-band p{margin:6px 0 0; color:rgba(255,255,255,.9); font-size:15px}

/* pagina comitato provinciale (one-page) */
.prov-mark{
  display:inline-grid; place-items:center; width:64px; height:64px; border-radius:16px;
  background:var(--blue-dark); color:#fff; font-family:var(--display); font-weight:750;
  font-size:1.7rem; letter-spacing:.03em; margin-bottom:16px;
}
.anchor-bar{
  position:sticky; top:69px; z-index:10; background:#fff; border-bottom:1px solid var(--line);
  padding-block:10px;
}
.anchor-bar .wrap{display:block}
.anchor-links{display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin}
.anchor-links a{
  font-family:var(--display); font-weight:600; font-size:13.5px; letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none; color:var(--body); border:1.5px solid var(--line); border-radius:999px;
  padding:7px 15px; white-space:nowrap; flex:0 0 auto; transition:all .15s ease-out;
}
.anchor-links a:hover{border-color:var(--blue); color:var(--blue)}
.anchor-links .eti-breve{display:none}

/* ---------- pannello di sezione: righe su desktop, a scomparsa su mobile ---------- */
.nav-acc summary{display:none}
/* su desktop il contenuto resta visibile anche se <details> non è aperto:
   così la navigazione di sezione funziona pure senza JavaScript */
@media (min-width:981px){
  .nav-acc > h4, .nav-acc > ul{display:block}
  .nav-acc > .anchor-links{display:flex}
}
.cl-wrap{max-width:880px; margin-inline:auto}
.cl-content h2{
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  font-size:1.55rem; margin:0 0 20px; padding-top:clamp(30px,4vw,44px); border-top:1px solid var(--line);
}
.cl-content h2:first-child{border-top:0; padding-top:0}
.cl-content > *:not(h2){margin-bottom:14px}

/* footer */
.site-footer{background:var(--cream); padding-top:clamp(50px,7vw,80px)}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(28px,5vw,70px); padding-bottom:54px}
.foot-brand p{margin:18px 0 0; font-size:15px; max-width:38ch}
.foot-brand p b, .foot-brand p strong{color:var(--ink)}
.site-footer h4{font-family:var(--display); font-weight:650; text-transform:uppercase; letter-spacing:.04em; font-size:17px; margin-bottom:16px}
.foot-list{list-style:none; margin:0; padding:0; font-size:15px}
.foot-list li{margin-block:4px}
.foot-list a{text-decoration:none; color:var(--body); display:inline-block; padding-block:4px; min-height:24px}
.foot-list a:hover{color:var(--blue)}
.social{display:flex; gap:10px; margin-top:20px}
.social a{
  width:36px; height:36px; border-radius:50%; background:var(--blue-dark); color:#fff;
  display:grid; place-items:center; transition:background .15s ease-out;
}
.social a:hover{background:var(--blue); color:var(--ink)}
.foot-ita{display:inline-block; margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.foot-ita small{
  font-family:var(--display); font-weight:650; text-transform:uppercase; letter-spacing:.08em;
  font-size:12px; color:rgba(0,0,0,.55); display:block; margin-bottom:10px;
}
.foot-ita:has(> img:only-child){padding-top:24px}
.foot-ita img{height:84px; width:auto; max-width:100%; transition:opacity .15s ease-out}
.foot-ita:hover img{opacity:.8}
.legal{border-top:1px solid var(--line); padding-block:18px; font-size:13px; color:rgba(0,0,0,.55); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* Comparsa progressiva — il contenuto è visibile di partenza.
   Solo il JavaScript, e solo se la pagina è realmente a schermo, aggiunge la classe
   .pre agli elementi sotto la piega: così nessun testo può restare invisibile
   (niente JS, anteprime, lettori, strumenti di scansione). */
.reveal{transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
.js .reveal.pre{opacity:0; transform:translateY(26px)}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
  .js .reveal.pre{opacity:1; transform:none}
}

/* responsive */
@media (max-width:1120px){
  nav.main a{font-size:14px; padding:10px 7px}
}
@media (max-width:980px){
  nav.main{
    display:none; position:absolute; top:100%; left:0; right:0; background:#fff;
    border-bottom:1px solid var(--line); box-shadow:0 24px 40px rgba(0,0,0,.1);
    /* con tutte le sottovoci aperte l'elenco supera lo schermo: deve scorrere da sé,
       altrimenti le ultime voci restano irraggiungibili sotto il bordo */
    max-height:calc(100vh - 118px); max-height:calc(100dvh - 118px);
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
  nav.main.open{display:block}
  nav.main ul{flex-direction:column; padding:12px 20px 20px; gap:0}
  nav.main li ul.sub-menu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding-left:18px}
  nav.main li.menu-item-has-children > a::after{content:""}
  .burger{display:block}
  .cta{display:none}
  .mission{grid-template-columns:1fr}
  .mission-photo{min-height:300px}
  .news-grid{grid-template-columns:1fr}
  .arch-grid{grid-template-columns:1fr 1fr}
  .rel-grid{grid-template-columns:1fr}
  .sede-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .com-row{grid-template-columns:86px 1fr auto; row-gap:2px}
  .com-title{grid-column:1 / span 2}
  .com-dl{grid-column:3; grid-row:1 / span 2; align-self:center}
  .side-layout{grid-template-columns:1fr}
  .subnav{position:static}
  .subnav h4{display:none}
  .subnav-card{display:none}
  .anchor-bar{top:63px; padding-block:8px}

  /* il comando che apre il pannello: si legge come un campo, non come tante pillole */
  .nav-acc summary{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    list-style:none; cursor:pointer; background:#fff;
    border:1.5px solid var(--line); border-radius:12px; padding:11px 15px;
  }
  .nav-acc summary::-webkit-details-marker{display:none}
  .nav-acc summary::after{
    content:"›"; font-family:var(--display); font-size:22px; line-height:1; color:var(--blue);
    transform:rotate(90deg); transition:transform .2s ease-out; flex-shrink:0;
  }
  .nav-acc[open] summary::after{transform:rotate(-90deg)}
  .nav-acc summary:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
  .nav-acc-eti{
    font-family:var(--display); font-weight:650; font-size:11.5px; letter-spacing:.14em;
    text-transform:uppercase; color:rgba(0,0,0,.55); display:block;
  }
  .nav-acc-ora{
    font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:.02em;
    text-transform:uppercase; color:var(--ink); display:block; line-height:1.15;
  }
  .nav-acc summary > span{display:block; min-width:0}

  /* l'elenco aperto: una scheda con righe piene, non pillole spezzate */
  .subnav ul{
    display:block; margin:8px 0 0; padding:0; overflow:hidden;
    border:1px solid var(--line); border-radius:12px; background:#fff;
  }
  .subnav li + li{border-top:1px solid var(--line)}
  .subnav a{
    display:block; border:0; border-radius:0; padding:13px 16px; font-size:15px;
    white-space:normal; letter-spacing:0; text-transform:none;
    font-family:var(--text); font-weight:500; color:var(--body);
  }
  .subnav .gruppo > .sub-group{
    padding:14px 16px 6px; font-size:15.5px; letter-spacing:.05em;
    background:var(--cream); border-bottom:1px solid var(--line);
  }
  .subnav .gruppo + .gruppo > .sub-group{margin-top:0; border-top:1px solid var(--line)}
  /* schede provinciali: sono sempre tre voci, stanno in riga */
  .anchor-links{display:flex; gap:6px; overflow:visible}
  .anchor-links a{flex:1 1 0; min-width:0; text-align:center; padding:9px 4px; font-size:12.5px; letter-spacing:.03em}
  .anchor-links .eti-lunga{display:none}
  .anchor-links .eti-breve{display:inline}
  .subnav .current_page_item > a{
    background:var(--blue-dark); color:#fff; font-family:var(--display);
    text-transform:uppercase; letter-spacing:.04em; font-size:15px;
  }
}
@media (max-width:560px){
  .news-card{grid-template-columns:1fr}
  .news-thumb{min-height:170px; max-height:170px}
  .arch-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .bar{gap:14px}
  .logo{gap:9px}
  .logo img{width:42px; height:42px}
  .logo .word b{font-size:20px}
  .logo .word span{font-size:9.5px}
}

/* ---------- intestazioni di gruppo nelle tendine (IL COMITATO, NORME, EVENTI…) ---------- */
nav.main .drop-group{
  display:block; padding:12px 12px 6px;
  font-family:var(--display); font-weight:650; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(0,0,0,.5);
}
nav.main li.gruppo + li.gruppo .drop-group,
nav.main li.gruppo ~ li.gruppo .drop-group{border-top:1px solid var(--line); margin-top:6px}
nav.main li.gruppo{list-style:none}
/* i sotto-elenchi dei gruppi devono SEGUIRE il genitore: con visibility:visible
   resterebbero cliccabili (trasparenti) sopra la pagina anche a tendina chiusa */
nav.main li.gruppo > ul.sub-menu{position:static; visibility:inherit; opacity:1; transform:none;
  transition:none; box-shadow:none; border:0; padding:0; min-width:0}
@media (max-width:980px){
  nav.main .drop-group{padding-left:0}
}

/* ---------- barra filtri (archivio comunicati) ---------- */
.filtri{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px;
  background:var(--cream); border-radius:14px; padding:20px 22px; margin-bottom:26px;
}
.filtri label{display:flex; flex-direction:column; gap:6px; flex:1 1 200px}
.filtri label span{
  font-family:var(--display); font-weight:650; font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(0,0,0,.62);
}
.filtri select{
  font-family:var(--text); font-size:15px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; width:100%;
}
.filtri select:focus-visible, .filtri button:focus-visible, .chip:focus-visible,
nav.main a:focus-visible, .com-row:focus-visible, .a-card:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px;
}
.filtri button{flex:0 0 auto}
.filtri-reset{
  font-size:14px; color:var(--body); text-decoration:underline; text-underline-offset:4px;
  padding-bottom:12px;
}
.filtri-reset:hover{color:var(--blue)}
.filtri-esito{
  font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(0,0,0,.62); margin:0 0 10px;
}
.vuoto{
  background:var(--cream); border-radius:14px; padding:28px; text-align:center;
  color:var(--body); margin:0;
}
.cl-content h3{margin-top:22px}
@media (max-width:560px){
  .filtri{padding:16px}
  .filtri label{flex:1 1 100%}
}

/* mappa nella fascia sede */
.sede-mappa{
  border-radius:14px; overflow:hidden; margin:4px 0 18px; max-width:420px;
  border:2px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1);
}
.sede-mappa iframe{display:block; width:100%; height:210px; border:0}
.sede-mappa img{display:block; width:100%; height:auto}
.sede-mappa small{
  display:block; padding:5px 10px; font-size:11px; color:rgba(255,255,255,.8);
  background:rgba(0,0,0,.35);
}

/* ---------- filtri su più righe (archivio news) ---------- */
.filtri-righe{display:flex; flex-direction:column; gap:12px; margin-bottom:40px}
.filtro-riga{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.filtro-eti{
  flex:0 0 86px; font-family:var(--display); font-weight:650; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(0,0,0,.55); padding-top:9px;
}
.filtri-righe .chips{margin:0; justify-content:flex-start; flex:1 1 300px}
@media (max-width:700px){
  .filtro-riga{flex-direction:column; gap:6px}
  .filtro-eti{flex:none; padding-top:0}
  .filtri-righe .chips{gap:7px}
  .filtri-righe .chip{font-size:13px; padding:7px 14px}
}

/* ---------- testata della scheda provinciale con stemma ---------- */
.prov-testata{display:flex; align-items:center; gap:clamp(16px,3vw,28px)}
.prov-stemma-grande{
  flex:0 0 auto; height:clamp(74px,9vw,104px); width:auto; display:block;
  filter:drop-shadow(0 4px 14px rgba(11,32,50,.16));
}
.prov-testata h1{margin:0}
@media (max-width:560px){
  .prov-testata{gap:14px}
  .prov-stemma-grande{height:62px}
}

/* ---------- schede persona (Struttura e organi) ---------- */
.persone{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 10px}
.persona{
  display:flex; align-items:center; gap:14px; min-width:0;
  border:1px solid var(--line); border-radius:14px; padding:12px 16px; background:#fff;
}
.persona-foto{
  flex:0 0 auto; width:56px; height:56px; border-radius:50%; object-fit:cover;
  background:var(--cream);
}
.persona-dati{display:block; min-width:0}
.persona-dati small{
  display:block; font-family:var(--display); font-weight:650; font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--navy); margin-bottom:2px;
}
.persona-dati b{
  display:block; font-family:var(--display); font-weight:700; font-size:1.12rem;
  letter-spacing:.015em; color:var(--ink); line-height:1.15;
}
.persona-dati em{display:block; font-style:normal; font-size:12.5px; color:rgba(0,0,0,.55); margin-top:2px}
.persone-nota{font-size:14px; color:rgba(0,0,0,.6); margin:0 0 26px}
.prose .persone + h2{margin-top:38px}
@media (max-width:860px){
  .persone{grid-template-columns:1fr}
}