/* main.css corretto per debug selettore menu mobile -- VERIFICARE */

/* FONT HOOKS (aggiungeremo i .woff2 quando li avrai)
@font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-extrabold-webfont.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Fennario"; src:url("../fonts/fennrg__-webfont.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"PT Serif"; src:url("../fonts/PTSerif-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"PT Serif"; src:url("../fonts/PTSerif-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"PT Serif"; src:url("../fonts/PTSerif-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
*/
:root{
  --bg:#fff; --fg:#1a1a1a; --muted:#5a5a5a; --line:#eee;
  --brand:#2457ff; --brand-2:#0ea5e9;
  --container:62rem; --radius:.8rem;
  --card:#fafafa; --yellow:#fff7c2; --green:#daf5d8; --verde-acqua:#264789;--yellow-orange:#f3b310;--azzurro:#31b7e6;--grey:#f4f6ff;--celeste:#e1f7ff;
  --ff-title:"Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  --ff-sub:"Fennario", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  --ff-text:"PT Serif", ui-serif, Georgia, "Times New Roman", serif;
}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--fg);background:var(--bg);font:17px/1.65 var(--ff-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 1rem}
.page-wrapper{padding-bottom:2rem}

/* accessibilità */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.5rem 1rem;background:#000;color:#fff;z-index:999}

/* Icone SVG */
.icon{width:1.2em;height:1.2em;display:inline-block;vertical-align:middle;margin-right:.5em}

/* header+menu */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line); z-index: 1000;  /* sopra tutto */}

/* LANGUAGE SELECTOR */
.lang-selector {
  position: relative;
  display: inline-block;
  width: 100px;
}

.lang-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--ff-title);
  color: var(--text);
  text-decoration: none;
  width: 100%;
}

.lang-trigger:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.lang-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.lang-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.lang-selector.open .lang-arrow {
  transform: rotate(180deg);
}

.lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 100px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

.lang-selector.open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  color: var(--text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--ff-title);
  transition: background-color 0.2s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.lang-dropdown-item:last-child {
  border-bottom: none;
}

.lang-dropdown-item:hover {
  background: rgba(36, 87, 255, 0.05);
  color: var(--brand);
}

.lang-dropdown-item.active {
  background: rgba(36, 87, 255, 0.1);
  color: var(--brand);
  font-weight: 600;
}


.header-inner{display:flex;align-items:center;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:700;font-family:var(--ff-title)}
.brand .logo{font-size:1.25rem}
.menu-toggle{margin-left: auto;
    display: none;
    background: var(--grey);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .6rem .8rem;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--verde-acqua);}
.site-nav{font-family:var(--ff-title); margin-left:auto; text-transform: uppercase;font-size: 13px}
.nav-list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.nav-list a{display:block;padding:.45rem .7rem;border-radius:.6rem;text-decoration:none}
.nav-list a:hover,.nav-list a:focus{background:#f4f6ff}

/* Sotto-menu */
.nav-list .has-submenu{position:relative}
.nav-list .submenu{
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:.6rem;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  min-width:180px;
  z-index:1000;
  display:none;
  list-style:none;
  margin:0;
  padding:.5rem 0;
}
.nav-list .submenu li{margin:0}
.nav-list .submenu a{
  display:block;
  padding:.5rem 1rem;
  border-radius:0;
  white-space:nowrap;
}
.nav-list .submenu a:hover,.nav-list .submenu a:focus{
  background:var(--grey);
}
.nav-list .has-submenu:hover .submenu,
.nav-list .has-submenu[aria-expanded="true"] .submenu{
  display:block;
}



.logo { display:inline-block; line-height:1; }
.logo img { display:block; max-height: 50px; height:auto; width:auto; max-width:100%; }
/* nascondi visivamente ma leggibile agli screen reader */
.sr-only {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
@media (max-width:980px){ .logo img{ max-height:72px; } }



/* Subnav programma (sticky) */
/* Base contenitore: usa lo stile della "programma-nav" anche se l'elemento ha classe "subnav" */
.subnav,
.programma-nav{
  position: sticky;
  top: var(--header-h, 64px);
  z-index: 900;
  background:#fff;
  border:1px solid var(--line);
  border-radius: 0 0 .6rem .6rem;
  padding:.4rem;
  margin: -.2rem 0 1.2rem;
  overflow:auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
}

/* Link interni: stessa resa per .pill (Programma) e .tab (generico) */
.subnav .tab,
.programma-nav .pill{
  display:inline-block;
  margin:.2rem .25rem;
  padding:.45rem .75rem;
  border:1px solid var(--line);
  border-radius:999px;
  text-decoration:none;
  font-family:var(--ff-sub);
  font-size:.95rem;
  white-space:nowrap;
}

/* Stato attivo/unico */
.subnav .tab[aria-current="true"],
.subnav .tab.active,
.programma-nav .pill[aria-current="true"],
.programma-nav .pill.active{
  background:var(--yellow-orange);
  border-color:var(--yellow-orange);
  color: white;
}

.programma-nav .pill{
  display:inline-block; margin:.2rem .25rem; padding:.45rem .75rem;
  border:1px solid var(--line); border-radius:999px; text-decoration:none;
  font-family:var(--ff-sub); font-size: 0.8rem;text-transform: uppercase;
}
.programma-nav .pill[aria-current="true"]{
  background:var(--yellow-orange);
  border-color:var(--yellow-orange);
}

.programma .prevnext{
  display:flex; gap:.5rem; justify-content:space-between; margin-top:1rem;
}
.programma .prevnext a{
  display:inline-block; padding:.45rem .75rem; border:1px solid var(--line);
  border-radius:999px; text-decoration:none;font-size: 90%;font-family: var(--ff-title);
}
/* Titoli/section con ID non finiscono sotto header + subnav */
:root{
  --header-h: 64px;
  --subnav-h: 56px;    /* altezza media pill-nav */
  --anchor-gap: 12px;  /* aria extra */
}

/* Titoli/section con ID non finiscono sotto header + subnav */
[id]{ scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + var(--anchor-gap)); }



/* hero */
.hero{padding:2rem 0 1.4rem;border-bottom:1px solid var(--line)}
.hero h1{line-height:1;font-family:var(--ff-title); font-size:clamp(1.9rem,3vw,2.2rem); margin:.2em 0 .3em}
.lead{line-height:1;font-size:1.05rem;color:var(--muted);max-width:60ch;font-family:var(--ff-title)}
body#intro .lead{line-height:1.4;font-size:1.3rem;color:var(--muted);max-width:60ch;font-family:var(--ff-text);font-style: italic;}
.hero-actions{display:flex;gap:.6rem;margin-top:1rem}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:var(--radius);background:var(--azzurro);color:#fff;text-decoration:none; font-family: var(--ff-title);}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--fg)}

/* sezioni */
.section-group{margin: 0 0 2rem;padding:0 0 2rem 0;border-bottom:1px solid var(--line)}
.section-group h2{margin:0 0 .8rem; font-family:var(--ff-title); font-size:1.7rem; letter-spacing:.005em}
.entry{padding:1.1rem 0;border-top:1px dashed var(--line)}
.entry h3{margin:.2rem 0 .5rem; font-family:var(--ff-title); font-size:1.35rem}
.entry h4{font-family:var(--ff-sub); font-size:1.15rem; margin:.2rem 0}
.entry .entry-content p{margin:.8rem 0}
.firma{margin:.8rem 0 0; font-family:var(--ff-sub); font-weight:500; font-size: .88rem}
.ruolo{margin:.1rem 0 .4rem; color:var(--muted); font-family:var(--ff-sub); font-size:.78rem}
.multi-firme .ruolo{font-weight:400}

/* programma */
.programma .giorno-bloc{background:var(--card); padding:1rem; border:1px solid var(--line); border-radius:var(--radius)}
.programma .giorno{margin:0; text-transform:none; font-family:var(--ff-sub); font-weight:700; font-size:1.1rem}
.programma .tema{margin:.2rem 0 0; font-family:var(--ff-title); font-size:1.4rem;}
.programma .citazione{}
.programma .riferimento{font-style:normal; color:var(--muted)}
.programma .slots{display:grid; gap:1rem; margin-top:1rem}
.programma.slot{padding:1rem; border:1px solid var(--line); border-radius:var(--radius); background:#fff; margin-bottom:3rem;}
.programma .slot{padding:1rem; border:1px solid var(--line); border-radius:var(--radius); background:#fff}
/* Quando clicchi un link a #giovedi-18 o #sabato-20, ecc.
   aggiunge margine in alto per compensare la nav sticky */
.programma.slot {scroll-margin-top: 9rem; /* oppure: calc(64px + 32px) se header = 64px e nav = 32px */}
.programma .orario{display:inline-block; min-width:4.5rem; font-family:var(--ff-sub); font-weight:700}
.programma .programma_titolo{margin:.2rem 0 .3rem; font-family:var(--ff-sub); font-size:1.08rem}
.programma .icon_map .map{border-bottom:1px dashed currentColor; text-decoration:none}
.programma .nota,.programma .yt,.programma .share,.programma .gioco,.programma .cuore,.programma .riflessione,.programma .ascolto,.programma .crediti,.programma .pre_programma_titolo{margin:.25rem 0}
.programma blockquote{margin:.6rem 0; padding:.6rem .9rem; }
.subheader {
    margin: 3rem -1rem 0;
    border-top: solid 1px #ccc;
    padding: 2rem 1rem 0;
}

/* post-it */
.postit{display: inline-block; padding: 1.6rem 2.8rem .7rem; border-radius: .4rem; border: 1px solid var(--line); box-shadow: 0 6px 13px rgba(0, 0, 0, .04); max-width: 26ch; margin: 1.25rem 1.5rem 3.25rem 0; font-family: var(--ff-sub); font-weight: bold; height: 170px; text-align: center; }
.postit.giallo{transform: rotate(2deg);background: linear-gradient(35deg, #FFC107, #FF9800); border-radius: 10px; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);}
.postit.verde{background: linear-gradient(35deg, #A3D8A2, #6BAF6A); border-radius: 10px; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);transform: rotate(-2deg);}



/* MAI all-caps forzato */
h1,h2,h3,h4,h5,h6{ text-transform:none; letter-spacing:.01em;color:var(--verde-acqua);}
/*h1,h2,h3{text-transform:uppercase;}*/ 
h6{font-size: inherit; font-style: italic; margin:1rem 0 0;}

/* mobile nav */
@media (max-width: 860px){
  .menu-toggle{display:inline-block}
  .site-nav{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line); font-size: 16px}
  .site-nav.open{display:block; background:var(--celeste)}
  .nav-list{flex-direction:column;padding:0.75rem}
  .nav-list a{padding:.2rem 1rem!important; font-size: 1.1rem}
}


/* === EQUIPÉ / GRID RESPONSIVE === */
.equipe{
  display:grid;
  gap:1.2rem;
  /* fallback mobile */
  grid-template-columns:repeat(1, minmax(0,1fr));
}

/* ≥520px: 2 colonne */
@media (min-width:520px){
  .equipe{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ≥740px (tablet): 3 colonne */
@media (min-width:740px){
  .equipe{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* ≥980px (desktop): 4 colonne di default */
@media (min-width:980px){
  .equipe{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

/* MODIFICATORI: forza 4 o 5 colonne su desktop/large */
@media (min-width:980px){
  .equipe.cols-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .equipe.cols-5{ grid-template-columns:repeat(5, minmax(0,1fr)); }
}

/* card membro (come prima) */
.membro{ display:flex; gap:1rem; align-items:center; border:1px solid var(--line);
  border-radius:var(--radius); padding:.8rem; background:var(--card); }
.ritratto{ width:64px; height:64px; object-fit:cover; border-radius:50%; flex-shrink:0; border:1px solid var(--line); }
.membro .info .nome{ font-family:var(--ff-sub); font-weight:700; margin:0 0 .25rem;font-size:.9rem }
.membro .info .ruolo{ font-size:.95rem; color:var(--muted); margin:0; }

/* firma con foto (immutato) */
.firma-con-foto{ display:flex; align-items:center; gap:.75rem; margin-top:2.2rem!important;line-height:1;}
.firma-con-foto img.ritratto-firma{ width:48px; height:48px; border-radius:50%; object-fit:cover; border:1px solid var(--line); }


/* === CITAZIONI / BLOCKQUOTE === */
blockquote.citazione {
 /*  margin: 1.2rem 0;
  padding: 1rem 1.2rem;
 border-left: 4px solid var(--brand);
  background: var(--card);
  color: var(--muted);
  border-radius: var(--radius);*/
  margin:1rem 0;
  padding: 0;
  font-family: var(--ff-text);
  line-height: 1.4;
  font-style: italic;
  color: var(--verde-acqua);
}

blockquote.citazione p {
  /*margin: 0 0 .6rem;
  font-size: 1.05rem;
  line-height: 1.6;*/
}

blockquote.citazione footer {
  font-size: 0.95rem;
  font-style: normal;
}

blockquote.citazione footer cite {
  font-style: normal;
  font-weight: 500;
}
.programma.slot header{
    margin: -1rem -1rem 2rem;
    border-bottom: 1px solid #ccc;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 1rem;
}

/* ===== PROGRAMMA: HEADER DEL GIORNO ===== */
/* Lo .slot ha padding: 1rem; facciamo "sanguinare" l'header fino al bordo */
.programma.slot .giorno-header{
  margin: -1rem -1rem 1rem;                /* supera il padding dello .slot */
  padding: .9rem 1rem;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  border-bottom: 1px solid var(--line);    /* linea di chiusura header */
  background: aliceblue;
}
.programma.slot .giorno-header .giorno{
  margin: 0;
  font-family: var(--ff-sub);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--yellow-orange);
}
.programma.slot .giorno-header .tema{
  margin: .2rem 0 0;
  font-family: var(--ff-title);
  font-size: 1.4rem;
}
.programma.slot .giorno-header .citazione{
  /*margin: .2rem 0 0;
  color: var(--muted);
  font-style: italic;*/
}

/* ===== PROGRAMMA: RIGHE ORARIO + CONTENUTO ===== */
.programma .slots{
  display: grid;
  gap: 1rem;
}

/* Ogni "riga" usa una grid a 2 colonne: orario fisso + contenuto fluido */
.programma .riga{
  display: grid;
  grid-template-columns: 6rem 1fr;   /* orario a sinistra, contenuto a destra */
  gap: .75rem 1rem;
  align-items: start;
}
.programma .riga header{background: var(--green); margin:1rem 0 0;}
.programma .riga .contenuto .subriga {background:var(--yellow) ; padding: 1rem;margin-bottom: 2rem;}

/* Orario in colonna fissa */
.programma .orario{
  grid-column: 1;
  display: inline-block;
  min-width: 4.5rem;
  font-family: var(--ff-title);
  font-weight: 700;
  line-height: 1.4;
  margin-top: .3rem; /* piccolo allineamento con h5 */
  color: var(--verde-acqua);
}
.programma .orario.orario--testo{       /* per "A seguire", "Pausa", ecc. */
  font-weight: 600;
  color: var(--muted);
  margin-top: 2.3rem;
  display: none;
}

/* Contenuti nella colonna destra */
.programma .riga .contenuto{
  grid-column: 2;
}
.programma .riga .programma_titolo{
  margin: .15rem 0 .3rem;
  font-family: var(--ff-title);
  font-size: 1.08rem;
  /*text-transform: uppercase;*/
}
.programma .riga p{margin-top: 0;}
.programma .riga p b{color:var(--verde-acqua);}

/* Citazioni nel contenuto (riuso del tuo stile base, opzionale) */
.programma .riga blockquote.citazione{
}

/* ===== Responsivo: sotto 560px le due colonne si impilano ===== */
@media (max-width: 560px){
  .programma .riga{
    grid-template-columns: 1fr;     /* una sola colonna */
  }
  .programma .orario{
    grid-column: 1;
    margin: 0 0 .25rem;
  }
  .programma .riga .contenuto{
    grid-column: 1;
  }
}

/* ===== ICONS AUTOMATICHE ===== */
.icon_map::before,
.nota::before,
.yt::before, .share::before,.gioco::before, .ascolto::before {
  display: inline-block;
  margin-right: .4rem;
  font-family: var(--ff-sub);
  font-weight: 600;
}

.icon_map::before {
  content: "📍";
  color: #f59e0b; /* giallo arancio */
}

.nota::before {
  content: "🎵";
  color: #10b981; /* verde acqua */
}

.yt::before {
  content: "▶️";
  color: #0ea5e9; /* azzurro canale */
}

.share::before {
  content: "👥";
  color: #0ea5e9; /* azzurro canale */
}
.gioco::before {
  content: "🎲";
  color: #0ea5e9;
}
.riflessione::before {
  content: "💭";
  color: #0ea5e9;
 }
.cuore::before {
  content: "❤️";
  color: #0ea5e9;
 }
.ascolto::before {
  content: "👂";
  color: #0ea5e9;
 }



/* 1) Le icone: tieni pure i tuoi contenuti e colori */
.icon_map::before,
.nota::before,
.yt::before, .share::before, .gioco::before, .riflessione::before,
.cuore::before, .ascolto::before {
  display: inline-block;
  font-family: var(--ff-sub);
  font-weight: 600;
  /* POSIZIONAMENTO A PUNTO ELENCO */
  position: absolute;
  left: 0;
  top: 0.15em;           /* micro‑allineamento verticale */
  width: 1.4em;          /* larghezza “colonna icona” */
  text-align: center;
}

/* 2) Le righe con icona diventano blocchi con rientro a sinistra */
.icon_map, .nota, .yt, .share, .gioco, .riflessione, .cuore, .ascolto{
  /* annulla il flex che spezzava il testo */
  display: block;        /* (sovrascrive il tuo display:flex) */
  position: relative;
  margin: .25rem 0;

  /* hanging indent: il testo parte dopo la “colonna icona”
     e quando va a capo resta allineato al testo, NON sotto l’icona */
  padding-left: 1.8em;   /* > width della icona per un po’ di aria */
}
.small{font-size: 80%}

.versetto{
      font-weight: bold;
    font-size: 60%;
    vertical-align: top;
    color: #999;
    font-family: Avenir, helvetica;
}

/*
h3.giorno{font-size:1.8rem!important;color: #000!important;line-height: 1!important;}
h4.tema{font-size:2.5rem!important;line-height: 1!important;}
*/

/* FONT */
.ff-title {
  font-family: var(--ff-title)!important;
  font-weight: 700; /* Solo bold per Montserrat, come definito */
}
.ff-sub {
  font-family: var(--ff-sub)!important;
  font-weight: 400; /* Normale, come definito */
}
.capitalize {
  text-transform: capitalize!important;
}

/* COLORI per il testo */
.text-bg { color: var(--bg); }
.text-fg { color: var(--fg); }
.text-muted { color: var(--muted); }
.text-line { color: var(--line); }
.text-brand { color: var(--brand); }
.text-brand-2 { color: var(--brand-2); }
.text-card { color: var(--card); }
.text-yellow { color: var(--yellow); }
.text-green { color: var(--green); }
.text-verde { color: var(--verde-acqua); }
.text-giallo { color: var(--yellow-orange); }

.search { margin-block: 1rem 0.5rem 0; }
.search input[type="search"] { width: 100%; max-width: 32rem; padding: .6rem .8rem; border: 1px solid var(--border, #ddd); border-radius: .6rem; }
.toc-list { columns: 2; gap: 2rem; margin: 1rem 0 2rem;font-family:var(--ff-title);font-size:80% }
@media (min-width: 900px){ .toc-list { columns: 3; } }
.songs .canto { padding: 1rem 0; border-top: 1px solid #eee; }
.songs .canto h2 { margin: .2rem 0 .6rem; font-weight: 600; }
.songs .canto .lyrics { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.6; }
.small { font-size: .875rem; opacity: .8; }


pre {
    font-family: 'Courier New', monospace; /* Font monospace per preservare spazi e allineamento */
    white-space: pre-wrap; /* Mantiene spazi e wrap */
    font-size: 16px;
    line-height: 1.8;
    margin: 20px 0;
    overflow-x: auto; /* Scroll orizzontale se necessario */
    text-align: left;
}

/* Stile specifico per accordi (opzionale: renderli in grassetto o colorati) */
/* Nota: Per stilizzare gli accordi, usa <span class="chord">[RE]</span> nell'HTML invece di testo piano */
.chord {
    font-weight: bold;
    color: var(--brand, #2457ff);
}

.intro, .interlude, .outro {
    text-align: center;
    font-style: italic;
    color: var(--muted, #5a5a5a); /* Colore mutato per sezioni brevi */
}

.verse, .chorus {
    margin-bottom: 20px;
}

/* === add: scroll progress bar (safe) === */
.scroll-progress{
  position: fixed; top: 0; left: 0; height: 4px; width: 0;
  background: var(--yellow-orange); z-index: 9999; transform-origin: 0 50%;
  transition: width .1s linear;
}

/* === Fade-in non invasivo: pagina intera === */
/* Nasconde il body finché non marchiamo l'HTML come is-loaded */
html:not(.is-loaded) body { opacity: 0; }
html.is-loaded body { opacity: 1; transition: opacity .6s ease; }

/* === Fade-in elementi: approccio data-attribute === */
[data-fade] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}

/* Trigger del fade: accetta sia html.is-loaded sia body.is-ready */
html.is-loaded [data-fade],
body.is-ready [data-fade] {
  opacity: 1;
  transform: none;
}

/* Accessibilità: riduci o elimina il movimento se richiesto */
@media (prefers-reduced-motion: reduce) {
  [data-fade] { transition: none; transform: none; }
  html.is-loaded body { transition: none; }
}


/* === add: sticky header (non cambia layout esistente) === */
.site-header{
  position: sticky; top: 0px; z-index: 1000;
  background: var(--bg, #fff);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* === add: smooth scroll nativo === */
html { scroll-behavior: smooth; }

/* === add: evidenziazione link attivo (se usi .site-nav) === */
.site-nav a.is-active{
  color: #111;
  border-bottom: 2px solid currentColor;
}

.src.small{display:none}

li.entry {
    font-size: 90%;
    line-height: 1;
    list-style-type: none;
}

/* evidenzia voce attiva nel menu generale */
.site-nav a[aria-current="page"]{
  color: var(--link-active, #264789);
  font-weight: 700;
}

/* subnav: stile attivo */
.subnav .tab.active,
.subnav .tab[aria-current="true"]{
  background: var(--yellow-orange);
  color: #fff;
}

.invisibile{display: none}


/* footer 
.site-footer{border-top:1px solid var(--line);margin-top:2rem;padding:1.25rem 0;color:var(--muted);font-size:.95rem}*/

.site-footer {
  font-family: var(--ff-title);
  background: var(--grey);
  color: black;
  font-size: 0.875rem;
  padding: 2rem 1rem;
  line-height: 1.6;
}

.site-footer a {
  color: var(--verde-acqua);
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
}
.site-footer h3{margin: 0;  font-size: 120%;}
/* griglia 2/3 + 1/3 */
.footer-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:2rem;
  padding:2rem 1rem;
}
.footer-col.left{display:flex;gap:1rem;align-items:flex-start}
.footer-logo{width:88px;height:auto;flex-shrink:0;filter:grayscale(100%) contrast(120%);opacity:.95}

/* icone social */
.social{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
.btn-ico{
  width:25px;height:25px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
}
.btn-ico:hover{background:var(--verde-acqua)}
.btn-ico svg{width:25px;height:25px;fill:var(--verde-acqua)}

/* blocchi legali */
.legal-links{font-size:.9rem}
.legal-links .license{margin:0 0 .25rem 0}

/* riga inferiore */
.footer-bottom{background:#0b0b0b;border-top:1px solid #222;padding:.75rem 0;font-size:.9rem}

/* responsive */
@media (max-width: 860px){
  .footer-grid{grid-template-columns:1fr;gap:1.5rem}
  .footer-logo{width:72px}
  .footer-col.left{display:block}
  .footer-col.left > div{margin-top:1rem}
}


@media (max-width: 560px){
  .programma .riga {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  /* nuova regola: se contiene titolo, affianca orario + titolo */
  .programma .riga:has(.programma_titolo) {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
  }

  .programma .orario {
    margin: 0;
    min-width: 2.5rem;
  }

  .programma .programma_titolo {
    margin: 0;
  }

  .programma .riga .contenuto {
    flex: 1;
  }
}
ul.contact-list {
  font-family: var(--ff-title);
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.contact-list li{margin: 0 0 1rem;}
.muted{text-transform: uppercase;line-height: 1.;}

ul.contact-list li 
address{margin: 1rem 0 0;}

/* forza il ridimenionamento */

.responsive {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  margin: 1rem 0;
  height: 0;
  overflow: hidden;
}

.responsive iframe,
.responsive video,
.responsive embed,
.responsive object {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: 10px;
}


/* === Sticky system (unificato) === */
:root{
  --header-height: 64px;       /* sovrascritto via JS in base all’header reale */
  --sticky-gap: 0px;           /* margine aria tra header e sticky */
  --active-sticky: 0px;        /* altezza sticky attiva, gestita via JS */
  --page-bg: #fff;
}

/* Barra sticky riutilizzabile ovunque */
.sticky-bar{
  position: sticky;
  top: calc(var(--header-height) + var(--sticky-gap));
  z-index: 950;
  padding: 0.5rem 0 0.5rem 0.7rem;
  background: var(--page-bg);
  border-bottom: 1px solid #eee;
}

/* Effetto quando realmente “attacca” */
.sticky-bar.is-stuck{
  box-shadow: 0 none
}

/* Contenitore opzionale per toolbar/forms */
.sticky-bar .toolbar{
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
}

/* Offset degli anchor: tutti gli elementi con id scrollano sotto header+sticky */
[id]{
  scroll-margin-top: calc(var(--header-height) + var(--active-sticky) + 12px);
}

/* Accessibilità movimento ridotto */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

/* Album grid */
.album-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
  gap: 1rem; 
  margin: 1.5rem 0;
}

.album-card { 
  background: #fff; 
  border-radius: .75rem; 
  overflow: hidden; 
  box-shadow: 0 1px 4px rgba(0,0,0,.08); 
  transition: transform .2s ease, box-shadow .2s ease;
}

.album-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.album-card img { 
  width: 100%; 
  height: 220px; 
  object-fit: cover; 
  display: block; 
}

.album-card figcaption { 
  padding: .75rem; 
  font-size: .95rem; 
}

.album-card .meta { 
  color: #64748b; 
  font-size: .85rem; 
  margin: .25rem 0; 
}

/* Responsive album */
@media (max-width: 860px) {
  .album-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem;
  }
  
  .album-card img {
    height: 180px;
  }
}


/* Form container */
.form-container {
  text-align: center;
  padding: 2rem;
  background: var(--card);
  border-radius: 1rem;
  border: 2px dashed var(--line);
  margin: 1.5rem 0;
}

.form-container .btn {
  font-size: 1.1rem;
  padding: 1rem 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.form-note {
  margin: 1rem 0 0 0;
  color: var(--muted);
  font-style: italic;
}

.form-note small {
  font-size: 0.9rem;
}

/* Placeholder wall */
.placeholder-wall {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 2rem;
  text-align: center;
  background: var(--card);
  border: 2px dashed var(--line);
  border-radius: 1rem;
  color: var(--muted);
}

.placeholder-wall h3 {
  margin: 0 0 1rem 0;
  color: var(--fg);
  font-size: 1.5rem;
}

.placeholder-wall p {
  margin: 0.5rem 0;
  max-width: 400px;
}

.placeholder-wall code {
  background: var(--line);
  padding: 0.2rem 0.4rem;
  border-radius: 0.3rem;
  font-family: monospace;
  font-size: 0.9rem;
}

/* Placeholder album */
.placeholder-album {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 2rem;
  text-align: center;
  background: var(--card);
  border: 2px dashed var(--line);
  border-radius: 1rem;
  color: var(--muted);
  grid-column: 1 / -1; /* Occupa tutta la griglia */
}

.placeholder-album h3 {
  margin: 0 0 1rem 0;
  color: var(--fg);
  font-size: 1.5rem;
}

.placeholder-album p {
  margin: 0.5rem 0;
  max-width: 400px;
}

.placeholder-album a {
  color: var(--brand);
  text-decoration: none;
}

.placeholder-album a:hover {
  text-decoration: underline;
}

/* Social Links Container */
.social-links-container {
  text-align: center;
  padding: 2rem;
  background: var(--card);
  border-radius: 1rem;
  margin: 1.5rem 0;
}

.social-links-container h3 {
  margin: 0 0 1rem 0;
  color: var(--fg);
  font-size: 1.5rem;
}

.social-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}

.social-buttons .btn {
  padding: .5rem;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  font-weight: 400;
  width: 100%;
  max-width: 180px;
} 

.btn-instagram {
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  color: white;
}

.btn-twitter {
  background: #1da1f2;
  color: white;
}

.btn-facebook {
  background: #1877f2;
  color: white;
}

.btn-tiktok {
  background: #000000;
  color: white;
}

.social-buttons .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Social CTA Section */
.social-cta {
   color: white;
  padding: 3rem 0;
  margin: 0;
  font-family: var(--ff-title);
}

.social-cta .social-links-container {
  background: linear-gradient(135deg, var(--verde-acqua) 0%, var(--azzurro) 100%);
  border-radius: 1rem;
  padding: 2rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.social-cta .social-links-container h3 {
  color: white;
  margin: 0 0 1rem 0;
  font-size: 2rem;
}

.cta-title {
  font-family: var(--ff-title);
}

.text-giallo {
  color: var(--yellow-orange);
}

.social-cta .social-links-container p {
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 1.5rem 0;
  font-size: 1.2rem;
}

.social-cta .social-buttons .btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  backdrop-filter: blur(10px);
}

.social-cta .social-buttons .btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Responsive Social CTA */
@media (max-width: 860px) {
  .social-cta {
    padding: 2rem 0;
  }
  
  .social-cta .social-links-container {
    padding: 1.5rem;
  }
  
  .social-cta .social-links-container h3 {
    font-size: 1.8rem;
  }
}

/* Responsive social buttons */
@media (max-width: 860px) {
  .social-buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* Map Container - Modern style inspired by social-links-container */
.map-container {
  text-align: center;
  padding: 1.5rem;
  background: #f3f3f3;
  border-radius: 1rem;
  margin: 1.5rem 0;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--ff-title);

}

.map-container h3 {
  margin: 0 0 0.8rem 0;
  font-size: 1.4rem;
  font-family: var(--ff-title);
}

.map-container p {
  margin: 0 0 1.2rem 0;
  font-size: 1rem;
}

.map-btn {
  display: inline-block;
  background:var(--azzurro);
  border: var(--azzurro);
  padding: 0.7rem 1.5rem;
  border-radius: 200px;
  text-decoration: none;
  letter-spacing: 0.5px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  color:white;
}

.map-btn:hover {
  background: var(--celeste);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  color: var(--verde-acqua);
}

/* Responsive Map Container */
@media (max-width: 860px) {
  .map-container {
    padding: 1.2rem;
  }
  
  .map-container h3 {
    font-size: 1.2rem;
  }

  
  .social-buttons .btn {
    width: 100%;
    max-width: 250px;
  }
  
  .social-feed-container {
    padding: 1rem;
    margin: 1rem 0;
  }
}

/* === PULSANTE BACK TO TOP === */
.btn.back2top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--azzurro);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

.btn.back2top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.btn.back2top:hover {
  background: var(--verde-acqua);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.btn.back2top:active {
  transform: translateY(0);
}

.btn.back2top .icon {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  color: white;
  stroke: white;
}

/* Mobile responsive */
@media (max-width: 860px) {
  .btn.back2top {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
  }
  
  .btn.back2top .icon {
    width: 1.2rem;
    height: 1.2rem;
    color: white;
    stroke: white;
  }
}

/* Motion safe */
@media (prefers-reduced-motion: reduce) {
  .btn.back2top {
    transition: none;
  }
}


/* === NAVIGAZIONE AVATAR AUTORI === */
.author-avatars {
  display: flex;
  align-items: center;
  justify-content: center;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid white;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

/* Per avatar multipli (come coordinatori-province.png) usa contain per evitare tagli */
.author-avatar[src*="coordinatori-province"] {
  object-fit: contain;
  background-color: #f8f9fa;
}

/* Stili specifici per la navigazione di intro.html */
body#intro .programma-nav .pill {
  padding: 0.1rem;
}

body#intro .author-avatar {
  width: 60px;
  height: 60px;
  border: none;
}

/* Mobile: riduci avatar a 50px per evitare andata a capo */
@media (max-width: 860px) {
  body#intro .author-avatar {
    width: 50px;
    height: 50px;
  }
}

/* Intro page layout improvements */
body#intro .hero h1 {
  margin: .2em 0 .1em;
}

body#intro .firma-con-foto {
  margin-top: 1rem !important;
  margin-bottom: 1.5rem;
  display: flex;
}

body#intro .multi-firme {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: flex-start;
  margin-top: 1rem !important;
  margin-bottom: 1.5rem;
}

body#intro .multi-firme .firma-con-foto {
  margin-top: 0 !important;
  margin-bottom: 0;
  flex: 0 0 auto;
}

@media (max-width: 860px) {
  body#intro .multi-firme {
    flex-direction: column;
    gap: 1rem;
  }
}

body#intro .entry {
  border-top: 2px solid var(--line);
  margin-top: 2rem;
  padding-top: 1.5rem;
}

body#intro .entry:first-of-type {
  border-top: none;
  margin-top: 0;
}

/* Stile per i pill con solo avatar */
.programma-nav .pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  min-width: 50px;
}

/* Hover effect per gli avatar */
.programma-nav .pill:hover .author-avatar {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* Mobile responsive per avatar */
@media (max-width: 860px) {
  .author-avatar {
    width: 35px;
    height: 35px;
  }
  
  .programma-nav .pill {
    padding: 0.4rem;
    min-width: 45px;
  }
}
/* Cache buster - Thu Sep 11 11:06:39 CEST 2025 */

/* NAV LIST MOBILE */
@media (max-width: 860px) {
    .header-inner .lang-selector {
      display: none;
    }
    .site-nav .lang-selector {
        display: block;
        width: 100px;
        position: absolute;
        top: 1rem;
        right: 2rem;
    }
    .site-nav .lang-trigger {
        width: 100px;
        justify-content: space-between;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 1rem;
        font-weight: 600;
        font-family: var(--ff-title);
        color: var(--text);
        text-decoration: none;
        width: 100%;
    }
  .site-nav a.lang-dropdown-item {font-size:1rem;}
  .nav-list .has-submenu .submenu {
    position: static;
    display: block !important;
    box-shadow: none;
    border: none;
    background: none;
    margin: 0;
    padding: 0rem 0 0.5rem 1.5rem;
    border-radius: 0;
    text-transform: capitalize;
  }
}