/* ============================================================
   Groov-illa · groovilla-base.css
   Design system condiviso: variabili, reset, layout,
   topbar, nav, sezioni shared, newsletter, footer.
   Importare su OGNI pagina del sito.
   ============================================================ */

:root {
  --cream:      oklch(0.968 0.010 80);
  --cream-2:    oklch(0.945 0.016 78);
  --cream-3:    oklch(0.915 0.022 76);
  --paper-line: #cccccc;
  --ink:        oklch(0.14  0.014 60);
  --ink-2:      oklch(0.18  0.014 60);
  --ink-mute:   oklch(0.28  0.018 60);
  --olive:      oklch(0.5   0.075 110);
  --olive-deep: oklch(0.38  0.07  112);
  --olive-soft: oklch(0.78  0.06  108);
  --rust:       oklch(0.55  0.14  45);
  --serif:   "Instrument Serif", Georgia, serif;
  --display: "DM Serif Display", Georgia, serif;
  --body:    "Work Sans", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;
  --serif-article: "Lora", Georgia, serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#fff;
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 600px at 10% -10%, oklch(0.92 0.04 80/.6), transparent 60%),
    radial-gradient(900px  500px at 95%   5%, oklch(0.9  0.05 50/.35),transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 39px, oklch(0.6 0.02 70/.035) 39px 40px);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;object-fit:cover}

/* ── LAYOUT ── */
.page{max-width:1400px;margin:0 auto;padding:0 32px}
@media(max-width:720px){.page{padding:0 16px}}

/* ── TOPBAR ── */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--ink-mute);text-transform:uppercase;
  border-bottom:1px solid var(--paper-line);
}
.tb-live{display:inline-flex;align-items:center;gap:8px}
.pulse{
  width:7px;height:7px;border-radius:50%;
  background:var(--rust);box-shadow:0 0 0 4px oklch(0.55 0.14 45/.18);
  animation:pulse 2.4s ease-in-out infinite;flex-shrink:0
}
@keyframes pulse{50%{box-shadow:0 0 0 8px oklch(0.55 0.14 45/.05)}}
.tb-links{display:flex;gap:20px}
@media(max-width:600px){.tb-links{display:none}}

/* ── NAV ── */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0 14px;gap:24px;
  border-bottom:1px solid var(--paper-line);
}
.logo{
  font-family:'Boldonse',sans-serif;font-size:38px;line-height:1;
  display:inline-flex;align-items:baseline;flex-shrink:0;text-decoration:none;
}
.logo .g{color:var(--ink);text-shadow:0 1px 1px rgba(255,255,255,0.5),0 -1px 1px rgba(0,0,0,0.18)}
.logo .dash{color:var(--rust);text-shadow:0 1px 1px rgba(255,255,255,0.4),0 -1px 1px rgba(0,0,0,0.15)}
.logo .i{color:var(--olive-deep);text-shadow:0 1px 1px rgba(255,255,255,0.4),0 -1px 1px rgba(0,0,0,0.15)}
.nav-links{
  display:flex;gap:24px;align-items:center;
  font-size:13.5px;color:var(--ink-2);flex:1;margin-left:28px;
}
.nav-links a:hover{color:var(--ink)}
.nav-r{display:flex;gap:10px;align-items:center}
.btn-ghost{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 14px;border:1px solid var(--paper-line);border-radius:999px;
  color:var(--ink-mute);background:transparent;cursor:pointer;
}
.btn-solid{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 18px;border-radius:999px;
  background:var(--ink);color:var(--cream);border:none;cursor:pointer;
  display:inline-flex;align-items:center;
}
.menu-btn{display:none}
@media(max-width:900px){
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  .btn-ghost:not(.menu-btn){display:none}
  .btn-solid{display:none}
  .topbar .tb-links{display:none}
}

/* ── NEWSLETTER ── */
.nl-wrap{background:var(--ink);padding:80px 0}
.nl-inner{
  max-width:1400px;margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}
@media(max-width:900px){.nl-inner{grid-template-columns:1fr;gap:36px;padding:0 16px}}
.nl-wrap h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(34px,4.5vw,58px);line-height:1;letter-spacing:-.02em;
  margin:0 0 16px;color:var(--cream);text-wrap:balance;
}
.nl-wrap h2 em{font-family:var(--serif);font-style:italic;color:var(--olive-soft)}
.nl-desc{font-family:var(--serif);font-size:17px;line-height:1.46;color:oklch(0.7 0.02 80);margin:0}
.nl-form{display:flex;flex-direction:column;gap:14px}
.nl-field{
  display:flex;border:1.5px solid oklch(0.42 0.02 60);border-radius:3px;overflow:hidden;
}
.nl-field input{
  flex:1;border:0;background:transparent;padding:15px 18px;
  font-family:var(--body);font-size:15px;color:var(--cream);outline:none;
}
.nl-field input::placeholder{color:oklch(0.48 0.02 80)}
.nl-field button{
  appearance:none;border:0;background:var(--rust);color:var(--cream);
  padding:0 22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;transition:background .2s;
}
.nl-field button:hover{background:oklch(0.62 0.14 45)}
.nl-terms{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:oklch(0.42 0.02 80)}
.nl-stats{display:flex;flex-direction:column;gap:0}
.nl-stat{
  display:flex;align-items:baseline;gap:16px;padding:16px 0;
  border-bottom:1px solid oklch(0.3 0.02 60);
}
.nl-stat:last-child{border-bottom:0}
.nl-stat .nv{font-family:var(--display);font-size:44px;line-height:1;color:var(--cream);letter-spacing:-.02em}
.nl-stat .nv em{font-family:var(--serif);font-style:italic;color:var(--olive-soft)}
.nl-stat .nl-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:oklch(0.48 0.02 80);max-width:200px}

/* ── FOOTER ── */
footer{padding:56px 0 44px;border-top:1px solid var(--paper-line)}
.footer-big{
  font-family:var(--display);font-size:clamp(54px,8vw,108px);line-height:.84;
  color:var(--ink);letter-spacing:-.03em;margin:0 0 44px;font-weight:400;opacity:.1;
}
.footer-big em{font-family:var(--serif);font-style:italic;color:var(--olive-deep)}
.footer-top{
  display:grid;grid-template-columns:2fr repeat(4,1fr);gap:32px;margin-bottom:44px;
}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.footer-top{grid-template-columns:1fr}}

/* ── Mobile menu ── */
.nav-mobile-menu{display:none;padding:16px 32px 24px;border-top:1px solid var(--paper-line)}
.nav-mobile-menu.open{display:block}
.nav-mobile-menu ul{list-style:none;margin:0;padding:0}
.nav-mobile-menu ul li{border-bottom:1px solid var(--paper-line)}
.nav-mobile-menu ul li a{display:block;padding:12px 0;font-family:var(--body);font-size:15px;font-weight:500;color:var(--ink);text-decoration:none}
.nav-mobile-menu ul li a:hover{color:var(--rust)}
.nav-mobile-menu ul li a.nav-cta{color:var(--rust);font-weight:600}
.mobile-lang{display:flex;gap:8px;margin-top:16px}

/* ── Lang switcher ── */
.lang-btn{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;background:transparent;border:1px solid var(--paper-line);color:var(--ink-mute);padding:4px 10px;cursor:pointer;transition:all .15s}
.lang-btn:hover,.lang-btn.active{color:var(--ink);border-color:var(--ink)}

/* ── FONT OVERRIDE GLOBALE ──
   Tutti i body text usano Lora indipendentemente da
   quale CSS inline ogni articolo/template carica.
   Sovrascrive var(--body) = Work Sans nei contesti editoriali. */
.cl-intro p,
.cl-verdict-short,
.cl-pros li, .cl-cons li,
.cl-buy-if-text,
.bn-body p,
.guida-prose p,
.guida-section p,
.rec-prose p,
.pillar-content p,
.pillar-content li,
.rec-faq-a,
.rec-faq-item .rec-faq-a,
article p,
.body-text p {
  font-family: "Lora", Georgia, serif !important;
}

/* ── NAV STICKY ── */
.nav-sticky{
  position:sticky;top:0;z-index:200;
  background:#fff;
  border-bottom:1px solid var(--paper-line);
  box-shadow:0 1px 8px rgba(0,0,0,.06);
}
.nav-sticky .nav{border-bottom:none}
.nav-wrapper{position:sticky;top:0;z-index:200;background:#fff;box-shadow:0 1px 8px rgba(0,0,0,.06)}