/* AIRDAVE APP — stile per le pagine canzone/artista/lettera dell'app dinamica.
 *
 * Si costruisce SOPRA airdave-tokens.css (va caricato prima, vedi
 * templates/base.php) e replica i pattern visivi del tema WordPress reale
 * (header sticky, badge "On air", footer scuro con indice A-Z) - stesso
 * markup di header.php/footer.php del tema, vedi templates/parti-comuni.php.
 *
 * File separato dal tema apposta: tema e app non si rompono a vicenda
 * quando uno dei due evolve (solo i token sono condivisi, non le regole).
 *
 * Deploy: /css/app-canzoni.css (root del sito), caricato dalle pagine cache
 * via <link> — non duplicato in ogni pagina, con centinaia di migliaia di
 * pagine il peso si sommerebbe.
 */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.125rem;
  line-height:1.7;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark)}
a:focus-visible{outline:3px solid var(--hi);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ===== HEADER (stessa markup del tema) ===== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--paper);
  border-bottom:2px solid var(--ink);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px}
.brand{display:flex;align-items:center;gap:14px}
.brand a{color:var(--ink);display:flex;align-items:center;gap:14px}
.brand-logo{
  font-family:var(--font-display);font-size:1.9rem;
  letter-spacing:.02em;text-transform:uppercase;line-height:1;
}
.brand-logo span{color:var(--accent)}
.onair{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-ui);font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;
}
.onair::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--onair);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.onair::before{animation:none}html{scroll-behavior:auto}}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:6px;align-items:center}
.main-nav a{font-family:var(--font-ui);font-weight:600;font-size:.92rem;color:var(--ink);padding:10px 14px;border-radius:8px;display:inline-block}
.main-nav a:hover{background:var(--paper-warm);color:var(--accent)}

/* hamburger (2026-08-06, aggiunta menu multi-voce) — stessa identica CSS
   del tema WP reale (wordpress/wp-content/themes/airdave/style.css),
   copiata 1:1 per parita' visiva, non solo i token colore/font. */
.nav-toggle{display:none;background:transparent;border:0;padding:10px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== EQUALIZER (stessa markup del tema) ===== */
.eq{display:inline-flex;align-items:flex-end;gap:3px;height:22px;vertical-align:middle}
.eq i{width:4px;background:var(--accent);border-radius:2px 2px 0 0}
.eq i:nth-child(1){height:40%}.eq i:nth-child(2){height:90%}.eq i:nth-child(3){height:55%}
.eq i:nth-child(4){height:100%}.eq i:nth-child(5){height:30%}.eq i:nth-child(6){height:70%}
.footer-az .eq i{background:var(--hi)}

/* ===== CONTENUTO ===== */
#content{max-width:var(--measure);margin:0 auto;padding:56px 24px 64px}

/* Breadcrumb (2026-08-06): discreto, sopra l'H1, non ruba scena */
.breadcrumb{
  font-family:var(--font-ui);font-size:.82rem;color:var(--ink-soft);
  margin:0 0 1rem;
}
.breadcrumb a{color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--line)}
.breadcrumb a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.breadcrumb-sep{margin:0 .35em;color:var(--line)}
.breadcrumb [aria-current="page"]{color:var(--ink-soft)}

h1{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,4.4vw,3.2rem);
  line-height:1.08;text-transform:uppercase;
  margin:0 0 .3rem;
}
.sottotitolo{color:var(--ink-soft);font-family:var(--font-ui);font-size:1rem;margin:0 0 1.8rem}
.sottotitolo a{color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--hi)}

h2{
  font-family:var(--font-ui);font-weight:800;letter-spacing:-.01em;
  font-size:1.65rem;line-height:1.25;
  margin:2em 0 .7em;
}

section.significato{
  background:var(--paper-warm);
  border-left:5px solid var(--accent);
  border-radius:0 14px 14px 0;
  padding:20px 24px;margin:1.8rem 0;
}
section.significato h2{margin-top:0;font-size:1.35rem}
section.significato a{color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-color:var(--hi)}
section.significato a:hover{color:var(--magenta);text-decoration-color:var(--magenta)}

/* Foto artista + bio (2026-08-06): affiancate quando entrambe presenti,
   il layout regge anche con una sola delle due (la maggioranza degli
   artisti non ha foto, vedi app/lib/immagini.php). */
.artista-intro{display:flex;gap:1.5rem;align-items:flex-start;margin:1.5rem 0;flex-wrap:wrap}
.foto-artista{width:140px;height:140px;object-fit:cover;border-radius:8px;flex-shrink:0;border:1px solid var(--line)}
.artista-intro p{flex:1;min-width:200px;margin:0}

/* Pagina hub /artisti/ (2026-08-06): presentazione + numeri + indice A-Z */
.hub-intro{max-width:640px;margin:0 0 2rem}
.hub-intro p{font-size:1.05rem;line-height:1.6}
.hub-link-blog a{color:var(--accent);font-weight:600}
.hub-link-blog a:hover{color:var(--magenta)}

.hub-numeri{display:flex;gap:2rem;flex-wrap:wrap;margin:0 0 2.5rem;padding:1.5rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hub-numero{display:flex;flex-direction:column}
.hub-numero strong{font-family:var(--font-display);font-size:1.8rem;color:var(--accent);text-transform:uppercase}
.hub-numero span{font-family:var(--font-ui);color:var(--ink-soft);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}

/* Barra sotto-lettere (2026-08-06, confronto col legacy /g/ live: la barra
   "GA GB GC..." in cima). Stile chip, adattato al fondo chiaro del
   contenuto (il .az-dial del footer e' pensato per il fondo scuro). */
.alfabeto{display:flex;flex-wrap:wrap;gap:6px;margin:1.2rem 0 2rem}
.alfabeto a{
  font-family:var(--font-ui);font-weight:700;font-size:.82rem;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:6px;
  min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  text-transform:uppercase;padding:0 6px;
}
.alfabeto a:hover{background:var(--hi);border-color:var(--hi);color:var(--ink)}

/* Top artisti per viste storiche (2026-08-06, confronto col legacy). */
ul.top-artisti{list-style:none;padding:0;margin:1rem 0 2.5rem;display:flex;gap:1.2rem;flex-wrap:wrap}
ul.top-artisti li{width:110px}
ul.top-artisti a{display:block;text-decoration:none;color:var(--ink);text-align:center}
.foto-artista-mini{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:50%;border:1px solid var(--line);margin-bottom:.5rem;
  background:var(--paper-warm);
}
.nome-artista-top{display:block;font-family:var(--font-ui);font-weight:700;font-size:.85rem;line-height:1.25}
ul.top-artisti a:hover .nome-artista-top{color:var(--accent)}

.link-discografia{margin:1rem 0}
.link-discografia a{font-family:var(--font-ui);font-weight:700;color:var(--accent)}
.link-discografia a:hover{color:var(--magenta)}

/* Griglia album (2026-08-06): copertina + titolo + anno come UNA voce
   compatta, non tre righe separate - vedi app/lib/immagini.php per la
   convenzione delle copertine (/cover/{id}.jpg, non tutte esistono). */
ul.elenco-album{
  list-style:none;padding:0;margin:1.5rem 0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.5rem;
}
ul.elenco-album a{display:block;text-decoration:none;color:var(--ink)}
.cover-album{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:6px;border:1px solid var(--line);margin-bottom:.5rem;
  background:var(--paper-warm);
}
.titolo-album{display:block;font-family:var(--font-ui);font-weight:700;line-height:1.3}
ul.elenco-album a:hover .titolo-album{color:var(--accent)}
.anno-album{display:block;font-family:var(--font-ui);color:var(--ink-soft);font-size:.85rem;margin-top:.15rem}

/* Blocco "Incluso in" sulla pagina canzone (2026-08-06): stessa griglia
   album, ma piu' compatta - non deve competere visivamente con l'H1/estratto. */
section.incluso-in{margin:2.5rem 0}
section.incluso-in h2{font-size:1.1rem;margin:0 0 1rem}
ul.elenco-album-compatto{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:1rem}
ul.elenco-album-compatto .titolo-album{font-size:.88rem}
ul.elenco-album-compatto .anno-album{font-size:.78rem}

.cover-album-grande{
  display:block;width:220px;max-width:60%;aspect-ratio:1/1;object-fit:cover;
  border-radius:8px;border:1px solid var(--line);margin:1.2rem 0;
}

blockquote{
  margin:2em 0;padding:6px 0 6px 24px;
  border-left:4px solid var(--magenta);
  color:var(--ink-soft);font-style:italic;
}
blockquote footer{margin-top:.4rem;font-style:normal;font-size:.82rem;font-family:var(--font-ui);color:var(--ink-soft)}

/* Liste artista/lettera, nello stile "card" del tema */
ul.elenco{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:2px;border-top:1px solid var(--line)}
ul.elenco li a{
  display:block;padding:14px 4px;
  border-bottom:1px solid var(--line);
  color:var(--ink);font-family:var(--font-ui);font-weight:600;
}
ul.elenco li a:hover{color:var(--accent)}

/* Liste lunghe (oltre ~50 voci: canzoni artista, artisti per lettera) in
   due colonne, per non costringere a uno scroll infinito. Sotto i 600px
   torna a una colonna (vedi media query in fondo al file). */
ul.elenco.elenco-doppia{
  display:block;
  column-count:2;
  column-gap:2.5rem;
  border-top:1px solid var(--line);
}
ul.elenco.elenco-doppia li{break-inside:avoid}
ul.elenco.elenco-doppia li a{border-bottom:1px solid var(--line)}

/* ===== FOOTER (stessa markup del tema) ===== */
.site-footer{background:var(--ink);color:#c9c7d2}
.footer-az{border-bottom:1px solid #2e2c38;padding:34px 0 30px}
.footer-az h2{
  font-family:var(--font-display);color:var(--paper);
  font-size:1.1rem;text-transform:uppercase;letter-spacing:.06em;
  margin:0 0 18px;display:flex;align-items:center;gap:14px;
}
.az-dial{display:flex;flex-wrap:wrap;gap:6px}
.az-dial a{
  font-family:var(--font-ui);font-weight:700;font-size:.85rem;
  color:#c9c7d2;border:1px solid #3a3846;border-radius:6px;
  min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  text-transform:uppercase;
}
.az-dial a:hover{background:var(--hi);border-color:var(--hi);color:var(--ink)}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding:44px 24px;max-width:var(--maxw);margin:0 auto}
.footer-cols h3{font-family:var(--font-ui);font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);margin:0 0 16px}
.footer-cols p{font-family:var(--font-ui);font-size:.95rem;line-height:1.6;margin:0}
.footer-cols ul{list-style:none;margin:0;padding:0}
.footer-cols li{margin-bottom:10px}
.footer-cols a{color:#c9c7d2;font-family:var(--font-ui);font-size:.95rem}
.footer-cols a:hover{color:var(--hi)}
.footer-brand{font-family:var(--font-display);font-size:1.6rem;color:var(--paper);text-transform:uppercase;margin:0 0 12px}
.footer-brand span{color:var(--hi)}
.footer-bottom{border-top:1px solid #2e2c38;padding:20px 24px;font-family:var(--font-ui);font-size:.82rem;color:#8b8996;max-width:var(--maxw);margin:0 auto}
.footer-bottom a{color:#8b8996}
.footer-bottom a:hover{color:var(--hi)}

@media (max-width:900px){
  .footer-cols{grid-template-columns:1fr 1fr;gap:32px}
  /* menu hamburger (2026-08-06) — stessa identica regola del tema WP reale */
  .nav-toggle{display:block}
  .main-nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:var(--paper);border-bottom:2px solid var(--ink);
    padding:12px 24px 20px;
  }
  .main-nav.is-open{display:block}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .main-nav a{display:block;padding:12px 10px;font-size:1rem}
  .onair{display:none}
}
@media (max-width:600px){
  body{font-size:1.05rem}
  .onair{display:none}
  #content{padding:40px 20px 48px}
  .footer-cols{grid-template-columns:1fr;padding:32px 20px}
  ul.elenco.elenco-doppia{column-count:1}
  .foto-artista{width:96px;height:96px}
  .cover-album-grande{width:100%;max-width:280px}
  ul.elenco-album{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem}
}