/* Stile condiviso per le pagine di help di CreaVideoLyrics.
   Un unico file cosi' se cambia la grafica va toccato solo qui. */
/* NUOVO (21/09, su richiesta di Mirco: "il tema scuro non mi piace") -
   stessa struttura di prima, solo i valori delle variabili colore
   invertiti su un tema chiaro. */
:root{
  --bg:#f5f6f8;
  --bg-panel:#ffffff;
  --testo:#20242b;
  --testo-attenuato:#5a6270;
  --accento:#1d6fb8;
  --ok:#2f8f5b;
  --warn:#a06a10;
  --bordo:#d5d9e0;
}
*{box-sizing:border-box;}
body{
  margin:0;
  padding:0 0 60px 0;
  background:var(--bg);
  color:var(--testo);
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1.55;
}
header{
  background:var(--bg-panel);
  border-bottom:1px solid var(--bordo);
  padding:18px 28px;
  position:sticky;
  top:0;
}
header h1{
  margin:0;
  font-size:20px;
}
header p{
  margin:4px 0 0 0;
  color:var(--testo-attenuato);
  font-size:13px;
}
nav.indice{
  max-width:820px;
  margin:24px auto 0 auto;
  padding:16px 20px;
  background:var(--bg-panel);
  border:1px solid var(--bordo);
  border-radius:8px;
}
nav.indice h2{
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--testo-attenuato);
  margin:0 0 10px 0;
}
nav.indice ul{
  margin:0;
  padding-left:20px;
  columns:2;
}
nav.indice li{margin-bottom:6px;}
nav.indice a{color:var(--accento);text-decoration:none;}
nav.indice a:hover{text-decoration:underline;}

main{
  max-width:820px;
  margin:24px auto 0 auto;
  padding:0 20px;
}
section.argomento{
  background:var(--bg-panel);
  border:1px solid var(--bordo);
  border-radius:8px;
  padding:20px 24px;
  margin-bottom:18px;
  scroll-margin-top:90px; /* cosi' l'ancora non finisce sotto l'header sticky */
}
section.argomento h2{
  margin-top:0;
  font-size:18px;
  color:var(--testo);
  border-bottom:1px solid var(--bordo);
  padding-bottom:8px;
}
section.argomento h3{
  font-size:14px;
  color:var(--testo-attenuato);
  margin:16px 0 6px 0;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.perche{
  border-left:3px solid var(--accento);
  background:#eaf2fa;
  padding:10px 14px;
  border-radius:0 6px 6px 0;
  margin:10px 0;
}
.perche strong{color:var(--accento);}
.attenzione{
  border-left:3px solid var(--warn);
  background:#faf2e2;
  padding:10px 14px;
  border-radius:0 6px 6px 0;
  margin:10px 0;
}
.attenzione strong{color:var(--warn);}
ul.suggerimenti{padding-left:20px;}
ul.suggerimenti li{margin-bottom:6px;}
code{
  background:#eceff3;
  padding:1px 6px;
  border-radius:4px;
  font-size:13px;
}
.torna-su{
  display:block;
  text-align:right;
  font-size:12px;
  margin-top:10px;
}
.torna-su a{color:var(--testo-attenuato);text-decoration:none;}
footer{
  max-width:820px;
  margin:20px auto 0 auto;
  padding:0 20px;
  color:var(--testo-attenuato);
  font-size:12px;
}

/* NUOVO (27/09): riquadro in evidenza (correzioni automatiche del MIDI) */
section.evidenza{
  background:linear-gradient(135deg,#eaf3fc,#ffffff);
  border:2px solid var(--accento);
  border-radius:10px;
  padding:20px 24px;
  margin-bottom:18px;
  scroll-margin-top:90px;
}
section.evidenza h2{margin-top:0;color:var(--accento);}
section.evidenza ul{padding-left:20px;}
section.evidenza li{margin-bottom:6px;}