/* ================================================================
   Fantametrica — css/layout.css
   Struttura e chrome del sito: navbar, hero con marquee, footer,
   banner setup e pulsante "torna su".
   ================================================================ */

/* ---------- Navbar ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: var(--nav-bg);
  border-bottom: 1px solid transparent;
  transition: border-color .35s ease;
}
.nav.scrolled { border-bottom-color: var(--border); }
.nav-inner { display: flex; align-items: center; gap: 16px; min-height: 64px; padding-block: 8px; transition: min-height .3s ease, padding-block .3s ease; }
.nav.scrolled .nav-inner { min-height: 56px; padding-block: 6px; }

.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }
.brand-mark {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 10px;
  /* Tile che segue il tema: chiara di giorno (logo nero), navy di notte (logo bianco) */
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .1);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
  overflow: hidden;
}
[data-theme="dark"] .brand-mark {
  background: linear-gradient(150deg, #1e40af, #132a63);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 2px 8px rgba(30, 64, 175, .35);
}
.brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; padding: 5px; }
/* Navbar: logo nero di giorno (su tile chiara), bianco di notte (su tile navy) */
[data-theme="dark"] .brand-logo { filter: invert(1); }
/* Footer: riquadro BIANCO fisso in entrambi i temi + logo colorato, mai filtrato */
.brand-mark.footer-mark,
[data-theme="dark"] .brand-mark.footer-mark {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .1);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}
.brand-mark.footer-mark .brand-logo,
[data-theme="dark"] .brand-mark.footer-mark .brand-logo { filter: none; }
/* Navbar: solo il logo, senza riquadro — nero di giorno, bianco di notte */
.nav .brand-mark,
[data-theme="dark"] .nav .brand-mark {
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
  width: auto; height: auto;
}
.nav .brand-mark .brand-logo {
  width: 36px; height: 36px; padding: 0;
}
.brand-name { font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; }
.brand-name em { font-style: normal; color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 12px; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 8px;
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: .93rem;
  transition: color .2s ease;
}
.nav-link:hover { color: var(--text); background: var(--glass); }
.nav-link.active { color: var(--accent); }
.nav-link.active::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px;
  border-radius: 2px; background: var(--accent);
}
.badge {
  min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-grid; place-items: center;
  background: var(--accent); color: #fff;
  border-radius: 999px; font-size: .7rem; font-weight: 700;
}
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.burger { display: none; }
.burger svg path { transform-box: fill-box; transform-origin: center; transition: transform .3s ease, opacity .3s ease; }
.burger.on svg path:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.on svg path:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.on svg path:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Icone tema: scuro → sole (vai al giorno), chiaro → luna */
.i-sun { display: none; }
.i-moon { display: block; }
[data-theme="dark"] .i-sun { display: block; }
[data-theme="dark"] .i-moon { display: none; }
.icon-btn svg { transition: transform .4s cubic-bezier(.2, .8, .3, 1.2); }
.icon-btn:active svg { transform: rotate(60deg) scale(.9); }

/* ---------- Clearance sotto la navbar ----------
   Le pagine interne (listone, formazioni, preferiti) iniziano con
   <section class="section"> direttamente sotto la navbar FISSA:
   il padding ridotto di .section su mobile (56px al di sotto di
   560px, 40px in landscape basso) farebbe finire il testo dietro
   la navbar. Come l'hero della home, il primo blocco parte sempre
   sotto la navbar. L'home non è toccata: il suo primo figlio è
   .hero, non .section. */
main > .section:first-child { padding-top: 104px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 150px 0 0;
  /* Niente more overflow hidden: gli aloni sono globali (body::before),
     non ce n'è più uno locale qui che rischi di venire tagliato */
}
.hero-emblem {
  display: grid; place-items: center;
  width: 68px; height: 68px; border-radius: 18px;
  margin-bottom: 22px;
  /* Giorno: riquadro bianco con logo nero. */
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
}
/* Notte: riquadro dello STESSO colore dello sfondo dietro (uniforme) —
   niente contrasto, resta visibile solo il logo bianco. */
[data-theme="dark"] .hero-emblem {
  background: var(--bg);
  border-color: transparent;
  box-shadow: none;
}
[data-theme="dark"] .hero-emblem img {
  filter: invert(1);
}
.hero-emblem img { width: 42px; height: 42px; object-fit: contain; }
.hero-copy { max-width: 720px; }
.hero-title { font-size: clamp(2.3rem, 5.4vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; margin: 4px 0 18px; }
.hero-sub { color: var(--muted); font-size: 1.08rem; max-width: 520px; }
.hero-sub b { color: var(--text); font-weight: 700; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Squadre: striscia a scorrimento continuo (lenta e fluida) */
.marquee { margin-top: 56px; overflow: hidden; border-block: 1px solid var(--border); padding: 12px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 34px; width: max-content; animation: marquee 46s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.mq-item { display: inline-flex; color: var(--text); text-decoration: none; transition: transform .25s ease, color .25s ease; }
.mq-item:hover { transform: translateY(-2px); color: var(--accent); }
.mq-item:focus-visible { outline-offset: 4px; border-radius: 8px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Footer ---------- */
.footer { background-color: var(--bg-2); border-top: 1px solid var(--border); padding: 52px 0 22px; margin-top: 40px; transition: none; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr; gap: 36px; }
.f-col p { color: var(--muted); font-size: .9rem; margin-top: 10px; }
.f-col h4 { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.f-col a { display: block; color: var(--text); text-decoration: none; font-weight: 500; font-size: .92rem; padding: 3px 0; transition: color .15s ease; }
.f-col a:hover { color: var(--accent); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: .84rem; }
.footer-bottom .heart { color: var(--red); }

#toTop { position: fixed; right: 20px; bottom: 20px; z-index: 90; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility .25s; box-shadow: var(--shadow-sm); background: var(--surface); }
#toTop.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------- Banner setup ---------- */
.banner { background: #fdeaea; color: #7f1d1d; border-bottom: 1px solid #f3c1c1; padding: 13px 0; }
[data-theme="dark"] .banner { background: #2b1518; color: #fca5a5; border-bottom-color: #4a2328; }
.banner-inner { max-width: 900px; margin-inline: auto; padding-inline: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.banner code { background: rgba(0, 0, 0, .08); }
.banner-ic { width: 17px; height: 17px; display: inline-block; vertical-align: -3px; }
.banner strong { display: inline-flex; align-items: center; gap: 7px; font-size: .95rem; }
.banner .or { font-size: .84rem; opacity: .85; }
.banner .hint { font-size: .84rem; opacity: .9; }
.banner .btn { margin-top: 3px; }
.banner[hidden] { display: none; }