/* ====== Design tokens ====== */
:root{
  --color-primary:#4A90E2;
  --color-secondary:#4EC5A1;
  --color-bg:#FAFAFA;
  --color-text:#333;
  --radius-lg:16px;
  --shadow-sm:0 3px 10px rgba(0,0,0,.06);
  --shadow-md:0 8px 18px rgba(0,0,0,.1);
  --container-pad:clamp(16px,2vw,24px);
  --nav-h:64px; /* se il logo è più alto, porta a 72–80px */
}

/* ====== Base ====== */
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px);}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--color-text);background:var(--color-bg);padding-top:var(--nav-h);}
h1,h2,h3{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
h1{font-size:clamp(1.8rem,4.5vw,2.5rem)}
h2{font-size:clamp(1.4rem,3.5vw,2rem)}
.lead{font-size:clamp(1rem,2.6vw,1.125rem)}
a{color:var(--color-primary)} a:hover{color:var(--color-secondary)}
:focus-visible{outline:3px solid rgba(74,144,226,.7);outline-offset:2px;border-radius:6px}
.section{padding-block:clamp(32px,6vw,64px)}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ====== Skip link ====== */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;padding:10px 14px;background:#000;color:#fff;border-radius:8px;z-index:99999}

/* ====== Navbar / hero ====== */
.navbar.fixed-top{min-height:var(--nav-h)}
.navbar-brand{font-weight:700;color:var(--color-primary)!important;font-family:'Poppins',sans-serif}
.navbar .nav-link{font-weight:500}

.hero{
  background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);
  color:#fff;
  padding-block:clamp(72px,16vw,140px);
  text-align:center;
  margin-top:60px; /* ok in homepage; nelle pagine test resta sopra la progress bar */
}
.hero h1{font-weight:700;line-height:1.15}
.hero .btn{font-weight:700}
.hero--compact { padding-block: 56px; margin-top: 0; }

#heroSection {
  opacity: 1;
  transition: opacity .4s ease;
}

#heroSection.fade-out {
  opacity: 0;
}

/* ====== Cards / badges / footer ====== */
.category-card,.test-card{border:0;border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease}
.category-card:hover,.test-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.badge-category{font-size:.8rem;border-radius:10px;padding:4px 10px;color:#fff;background:var(--color-secondary)}
.search-bar{border-radius:12px;box-shadow:var(--shadow-sm);padding:.9rem 1rem}
footer{background:#1c1c1c}

/* ====== Cookie banner ====== */
.cookie-banner{position:fixed;inset:auto 0 0 0;background:rgba(0,0,0,.92);color:#fff;padding:16px var(--container-pad) calc(16px + env(safe-area-inset-bottom));z-index:9999;box-shadow:0 -8px 20px rgba(0,0,0,.25)}
.cookie-banner[hidden]{display:none!important}
.cookie-banner .btn{min-height:44px}

/* ====== Test layout: domanda su una riga (desktop) / una colonna (mobile) ====== */
.q-row{
  display:grid;
  grid-template-columns:1fr auto; /* testo | opzioni */
  align-items:center;
  gap:16px;
  scroll-margin-top:calc(var(--nav-h) + 16px) !important; /* fondamentale per scroll sotto navbar */
}
.q-text{margin:0;font-weight:600}
.q-options{
  display:flex;align-items:center;gap:10px;
  white-space:nowrap;overflow-x:auto;scrollbar-width:thin;
}
.q-option.form-check{margin:0}
.q-option.form-check-inline{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;
  cursor:pointer;user-select:none;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.q-option:focus-within{outline:2px solid #4A90E2;outline-offset:2px;border-radius:8px}

/* radio nativi nascosti (accessibili via label) */
.form-check-input{position:absolute!important;opacity:0!important;pointer-events:none!important;width:0;height:0}

/* stato selezionato persistente */
.q-option.selected{border-color:#3b82f6;background:rgba(59,130,246,.08);box-shadow:0 0 0 2px rgba(59,130,246,.15) inset}
.q-option .form-check-label{cursor:pointer}

/* mobile: una colonna */
@media (max-width:768px){
  .q-row{grid-template-columns:1fr;align-items:start}
  .q-options{white-space:normal;flex-direction:column;overflow-x:visible}
  .q-option.form-check-inline{width:100%;justify-content:flex-start}
}

/* ====== Feedback "missing" ====== */
.q-missing{border-color:#dc3545!important;box-shadow:0 0 0 2px rgba(220,53,69,.18) inset;animation:qshake 280ms ease-in-out 0s 2}
@keyframes qshake{0%{transform:translateX(0)}25%{transform:translateX(2px)}50%{transform:translateX(-2px)}75%{transform:translateX(1px)}100%{transform:translateX(0)}}

/* ====== Numerazione domanda "x of N" ====== */
.q-num{
  display:inline-block;font:600 .85rem/1 'Inter',system-ui,sans-serif;color:#6c757d;background:#f1f3f5;
  border-radius:999px;padding:4px 10px;margin-right:10px;white-space:nowrap;
}
@media (max-width:768px){ .q-num{margin-top:6px} }

/* ====== Progress area sempre ben visibile ====== */
.progress-wrap{
  position:sticky;
  top:calc(var(--nav-h) + 8px); /* rimane sempre sotto la navbar */
  z-index:5;
  background:#fff;
  border-bottom:1px solid #eee;
  padding:8px;
  margin-bottom:12px;
}