/* Stili schermo */

:root {
  /* Dark mode */
  color-scheme: dark;

  /* Variabili globali */
  --color: #006600;
  --primary-color: #006600;
  --secondary-color: #4aaf38;

  --foreground-color: #dadada;
  --foreground-head-color: #fff;

  --background-color: #020202;
  --background-color-lighter1: #252525;
  --background-color-lighter2: #3a3a3a;
  --background-head-color: #006600;

  --border-color: #006600;
  --border-head-color: #4aaf38;

  --sidebar-head-color: #fff;

  --link-color: #f0c3ff;
  --link-hover-color: #fff;
  --link-visited-color: #fff;

  --form-background-color: #000;
  --form-foreground-color: #cacaca;

  --positive-color: #80ff80;
  --negative-color: #ff8080;

  --background-mark-color: #1c5824;
  --foreground-mark-color: #dadada;

  --background-thead-color: #5a5a5a;
  --foreground-thead-color: #fff;


  /* UI */
  scrollbar-color: var(--secondary-color) var(--background-color);
  scrollbar-gutter: stable;
}

@supports (box-sizing: border-box) {
  button,
  select,
  input[type="submit"],
  input[type="reset"],
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"] {
    padding: 0.3rem !important;
    box-sizing: border-box;
  }
}

button, input {
  accent-color: var(--secondary-color);
}

a {
  text-underline-offset: 0.15em;
}

/* Font */

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/_font/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2'),
       url('/_font/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Regular.ttf') format('ttf');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/_font/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-RegularItalic.woff2') format('woff2'),
       url('/_font/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-RegularItalic.ttf') format('ttf');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/_font/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2'),
       url('/_font/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Bold.ttf') format('ttf');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

html {
  height: 100%;
  font-synthesis: none; /* evita finto bold/italic */
  margin-top: 5px;
}

body {
  height: 100%;
  min-height: 100%;
  margin: 0 5px 0 5px;
  padding: 0;
  color: var(--foreground-color);
  background-color: var(--background-color)
}


/* LAYOUT */

#main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  grid-template-rows: min-content min-content min-content;
  grid-template-areas:
    "header header"
    "position ."
    "content sidebar"
    "footer footer";
  gap: 1rem;
  row-gap: 0;
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
  padding: 0;
}

#main:not(:has(#barra-laterale)) {
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "position"
    "content"
    "footer";
}

#intestazione,
#intestazione-home {
  grid-area: header;
  margin-top: 0;
  padding: 0;
}

#intro {
  margin-top: 0;
  padding: 0 0 1rem 0;
  text-align: left;
}

#top-menu {
  display: block;
  font-size: smaller;
  margin-top: 0.2rem;
  margin-left: 0.5rem;
  margin-bottom: 1rem;
  padding: 0;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

#posizione {
  grid-area: position;
}

#contenuto {
  grid-area: content;
  min-height: 0;
  margin-top: 0;
  padding-bottom: 1rem;
  text-align: left;
}

#barra-laterale {
  grid-area: sidebar;
  margin-bottom: 1.5rem;
	padding-top: 0;
  padding-bottom: 3.5rem;
}

#piepagina {
  grid-area: footer;
  width: 100%;
  border-top: 1px solid var(--border-color);
  padding: 0;
  margin-bottom: 0;
  background-color: var(--background-color);
  align-self: end;
}

#feedback {
  line-height: 1;
  font-size: smaller;
  margin-top: 0.3rem;
  margin-bottom: 0.5rem;
}

#feedback strong,
#licenza strong {
  color: var(--secondary-color)
}

#licenza {
  margin-bottom: 0.5rem;
}

#licenza::after {
  content: "";
  clear: both;
  display: table;
}

#licenza p {
  text-align: left;
  line-height: 1;
  font-size: small;
  padding: 2px;
  margin-top: 0.5rem;
}


/* TAG HTML5 per vecchi browser */

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

mark {
  display: inline;
}



/* Definizioni globali */

html {
  font-size: 100%;
  line-height: 1.5;
}

body {
  background-color: var(--background-color);
  color: var(--foreground-color);
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.5;
  position: relative;
  font-family: Helvetica, Arial, sans-serif;
}

article,
section {
  line-height: 1.5;
}

p, li, div, th, td {
  line-height: 1.7;
  word-spacing: .05rem;
}

p, div {
  word-wrap: break-word;
}

strong {
  color: var(--secondary-color);
}

li {
  margin-bottom: 0.2rem;
}

img {
  border: 0;
}

a,
a:link {
  color: var(--link-color);
  font-weight: bold;
}

#contenuto a:hover,
#top-menu a:hover,
#almanacco-home a:hover,
#barra-laterale a:hover,
#posizione a:hover,
#piepagina a:hover {
  color: var(--link-hover-color) !important;
}

#contenuto a:visited {
  color: var(--link-visited-color);
}

#contenuto #almanacco-home a:visited,
#contenuto #toc a:visited,
#contenuto .navigazione a:visited {
  color: var(--link-color);
}

#contenuto nav a:visited {
  color: var(--link-color);
}

button {
  color: var(--form-foreground-color);
  background-color: var(--background-color-lighter1);
}

input,
select,
textarea {
  padding: 2px;
  border: 2px solid var(--border-color);
  background-color: var(--form-background-color);
  color: var(--form-foreground-color);
  font-weight: bold;
  font-size: 100%;
  text-align: left;
}

#contenuto section:last-of-type > *:last-child {
  margin-bottom: 0;
}

#login input[type="text"],
#login input[type="password"] {
  width: 10rem;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--positive-color) !important;
}

input:invalid,
input:focus:invalid,
textarea:focus:invalid,
textarea:invalid {
  border-color: var(--negative-color) !important;
}

input::placeholder,
textarea::placeholder {
  color: gray;
}

label {
  color: var(--secondary-color);
  font-weight: bold;
  font-size: 100%;
}

input[type="email"],
input[type="text"] {
  width: 50%;
  max-width: 99%;
}

input[type="number"] {
  width: 6rem;
  max-width: 99%;
}

textarea {
  width: 90%;
  max-width: 90%;
  field-sizing: content;
}

fieldset {
  border: 1px solid var(--border-color);
}

fieldset h3 {
  margin-top: 0;
  color: var(--secondary-color);
}

fieldset p,
#barra-laterale.riquadro p {
  margin-bottom: 0;
}

legend {
  font-weight: bold;
  color: var(--border-color);
}

hr {
  border-bottom: 2px solid var(--border-color);
}

mark {
  background-color: var(--background-mark-color);
  color: var(--foreground-mark-color);
  padding: 0 0.1rem;
  font-weight: bold;
}

summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--link-color);
}


/* CLASSI e ID ELEMENTI */

#intestazione h1,
#intestazione-home h1 {
  color: var(--primary-color);
}

#logo {
  display: inline-block;
  margin-top: 0.3rem;
  margin-left: 0.5rem;
  margin-right: 0;
  margin-bottom: 0;
  line-height: 0;
}

#logo a {
  border: 0;
}

#logo img {
  max-width: 100%;
  height: auto;
  box-shadow:
    1px 1px 4px rgba(0, 0, 0, 0.3),
    6px 6px 0 var(--background-color-lighter2);
  /* Perdonate il piccolo hack! */
}

#intestazione-home,
#intestazione,
#intro,
#piepagina,
#posizione {
  font-family: "Atkinson Hyperlegible Next", Arial, Verdana, sans-serif;
}

#contenuto,
#barra-intro,
#barra-laterale {
  font-family: "Atkinson Hyperlegible Next", "Helvetica Neue", "Lucida Casual", sans-serif;
}

#login label {
  font-family: Arial, sans-serif;
}

body {
  background: fixed linear-gradient(135deg, #020202 0%, #020202 55%, #003309 100%);
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Atkinson Hyperlegible Next", Arial, Verdana, sans-serif;
}

#contenuto h2:first-child,
#contenuto h3:first-child,
#contenuto h4:first-child,
#barra-laterale p:first-child {
  margin-top: 0 !important;
}

#contenuto h2:first-child + section,
#contenuto h2:first-child + h3 {
  margin-top: 0;
}

#contenuto table {
  border-collapse: collapse;
  border: 2px solid var(--border-color);
  min-width: 70%;
}

#contenuto table thead {
  background-color: var(--background-thead-color);
  top: 0;
}

#contenuto table thead tr {
  top: 0;
  z-index: 2;
}

#contenuto table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--foreground-thead-color);
  font-weight: bold;
  font-style: normal;
  background-color: var(--background-head-color);
  font-size: smaller;
  padding-top: 0;
  padding-bottom: 0;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

#contenuto table.sortable th.sort {
  cursor: pointer;
}

#contenuto table tr,
#contenuto table th,
#contenuto table td {
  vertical-align: top;
  table-layout: fixed;
  padding: 0.3rem;
}

#contenuto table thead tr,
#contenuto table tbody tr:nth-child(even) {
  background-color: var(--background-color-lighter2);
}

#edizioni .riquadro,
#tour-tappe .riquadro {
  margin: 1rem;
  background-color: var(--background-color-lighter1);
  border: none;
}

#edizioni .riquadro ul,
#tour-tappe .riquadro ul {
  margin-bottom: 0;
}

#edizioni details,
#tour-tappe details {
  display: inline;
}

#edizioni details > ul,
#tour-tappe details > ul {
  background-color: var(--background-color-lighter1);
  border: 1px solid var(--border-color);
}

#edizioni summary,
#tour-tappe summary {
  display: inline-block;
  font-size: small;
}

#edizioni summary::before,
#tour-tappe summary::before {
  content: "▸";
  display: inline-block;
  width: 0.8rem;
}

#edizioni details[open] summary::before,
#tour-tappe details[open] summary::before {
  content: "▾";
  display: inline-block;
  width: 0.8rem;
}

#contenuto table th {
  font-weight: normal;
  font-style: italic;
}

#contenuto p {
  margin-top: 0;
}

#contenuto strong,
#contenuto h2,
#contenuto h3,
#contenuto h4,
#contenuto h5,
#contenuto .pagination {
  margin-top: 1.5rem;
  color: var(--secondary-color);
  text-align: left;
}

#contenuto section {
  margin-top: 2rem;
}

#contenuto article section {
  margin-top: 1.5rem;
}

#contenuto article section:first-child {
  margin-top: 0;
}

#contenuto section h2:first-child,
#contenuto section h3:first-child,
#contenuto section h4:first-child {
  padding: 0.1rem;
  padding-left: 0.5rem;
  width: 55%;
  color: var(--foreground-head-color);
  border-bottom: 2px solid var(--border-head-color);
  border-left: 2px solid var(--border-head-color);
}

#contenuto section h3:first-child,
#contenuto section h4:first-child {
  font-size: 1ch;
}

#contenuto section h3:first-child {
  font-size: 1.4em;
}

#contenuto section h4:first-child {
  border-bottom: none;
}

#contenuto section h2.titolo-segmento,
#contenuto section h3.titolo-segmento,
#contenuto section h4.titolo-segmento {
  border-left: none;
}

#contenuto dt {
  margin-top: 0.5rem;
  font-size: 110%;
}

#contenuto dt:first-child {
  margin-top: 0;
}

#contenuto dd {
  margin-left: 0;
  padding-left: 1rem;
}

#contenuto ul {
  margin-left: 0;
  padding-left: 1.2rem;
}

#contenuto ol {
  margin-left: 0;
  padding-left: 2rem;
}

#contenuto #faq dt {
  color: var(--secondary-color);
  font-weight: bold;
}

#contenuto #messaggio {
  min-height: 6rem;
}

#piepagina {
  background-color: var(--background-color);
}


.navigazione {
  display: inline-block;
  margin-top: 2rem;
  text-align: left;
  border-left: 3px solid var(--border-color);
  padding: 0.3rem 1rem 0 0.5rem;
}

.navigazione p {
  margin-bottom: 0.3rem;
}

#intestazione h1, #intestazione-home h1,
#intestazione h2, #intestazione-home h2 {
  margin-top: 0;
}

#intro p {
  margin-top: 0;
  margin-bottom: 0.3rem;
}

#posizione {
  width: 50%;
  margin: 0 0 0.5rem 0;
  padding: 0.5rem 0;
  word-spacing: -2px;
  font-weight: bold;
  font-size: smaller;
  text-align: left;
}

#contenuto .pagination {
  text-align: center;
  margin: 0.5rem auto 0 auto;
}

#contenuto .pagination a {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

#contenuto nav {
  white-space: nowrap;
}

#toc {
  width: 45%;
  margin: 1.5rem 0.5rem 1.5rem 0.5rem;
  padding: 0.5rem;
  background-color: var(--background-color-lighter2);
  font-weight: bold;
  font-size: smaller;
  text-align: left;
}

#toc ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1rem;
}

#toc li {
  margin-bottom: 0.3rem;
  padding: 0;
  line-height: 1.2;
}

.copy-btn {
  display: block;
  position: relative;
  margin: 1rem 0 1rem 0;
  padding: 0.5rem;
  font-size: small;
  cursor: pointer;
}

.toggle-btn {
  display: block;
  position: relative;
  font-size: small;
  cursor: pointer;
}

.copy-error,
.copy-ok {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 10px;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: smaller;
  color: var(--positive-color);
}

.copy-error {
  color: var(--negative-color);
}


#analisi-musicale .contenuto,
#testo .contenuto {
  white-space: pre-line;
  line-height: 1.4;
  background-color: var(--background-color-lighter2);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  padding: 0.5rem;
  display: inline-block;
}

.indice-lettere {
  border: 1px solid var(--border-color);
  color: var(--secondary-color);
  padding: 0.5rem;
  margin: 0 0.5rem 1rem 0;
  font-weight: bold;
}


/* Barre */

#barra-laterale h2,
#barra-laterale h3 {
  margin: 0;
  padding: 0;
  color: var(--sidebar-head-color);
  font-size: 120%;
  text-align: center;
}

#barra-laterale h3 {
  font-size: 110%;
}

#barra-laterale ol,
#barra-laterale ul {
  padding-left: 16px;
  text-indent: 0;
  margin-left: 0;
  margin-bottom: 0;
}

#barra-laterale ol {
  padding-left: 20px;
}

#barra-laterale li {
  padding-bottom: 0.3rem;
}

#barra-laterale .riquadro h4 {
  color: var(--primary-color);
  margin-bottom: 0;
}

#barra-laterale h4 + ul {
  margin-top: 0;
}

#barra-laterale .riquadro {
  background-color: var(--background-color-lighter2);
  border: 1px solid transparent;
  padding-top: 0;
  margin-bottom: 2rem;
}

.titolo-segmento,
#toc h3,
#toc h4,
#barra-laterale .riquadro > h2,
#barra-laterale .riquadro > h3:first-child {
  margin: 0.5rem 0 0 -1rem;
  padding: 0.5ch 0 0.1ch 1ch !important;
  width: 90%;
  color: var(--sidebar-head-color) !important;
  background-color: var(--background-head-color);
  border-bottom: 3px solid transparent;
  text-align: left;
  font-size: smaller;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

#toc h3,
#toc h4 {
  margin-bottom: 1.5ch;
  font-size: 1rem;
}

#barra-laterale .riquadro > h2 a,
#barra-laterale .riquadro > h3:first-child a,
#barra-laterale .riquadro > h2 a:link,
#barra-laterale .riquadro > h3:first-child a:link {
  color: var(--sidebar-head-color) !important;
}

.print,
.share {
  text-align: center;
}



/* ELEMENTI VARI */

#top-menu ul,
#piepagina ul {
  display: inline;
  margin: 0;
  padding-left: 0;
  list-style: none;
  text-indent: 0;
  font-weight: bold;
  text-align: left;
}

#top-menu li,
#piepagina li {
  display: inline;
  margin-left: 0;
  padding-right: 0;
  text-indent: 0;
  white-space: nowrap;
}

#top-menu li:after,
#piepagina li:after {
  content: " - ";
}

#top-menu li:last-child:after,
#piepagina li:last-child:after {
  content: none;
  padding-right: initial;
}

.lista-orizzontale {
  margin: 0;
  padding-left: 0;
  list-style: none;
  text-indent: 0;
  font-weight: bold;
  text-align: left;
}

.lista-orizzontale li {
  display: inline;
  margin-left: 0;
  padding-right: 0.2rem;
  text-indent: 0;
  white-space: nowrap;
}

.riquadro {
  text-align: left;
  margin-bottom: 1rem;
  padding: 0.5rem;
  border: 2px solid var(--border-color);
}

.riquadro *:last-child {
  margin-bottom: 0 !important;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.clear {
  clear: both;
}

img.center { display: block; margin: 0 auto; }
img.left   { display: block; float: left; margin-right: 4px; }
img.right  { display: block; float: right; margin-left: 4px; }

.rosso, .no   { color: var(--negative-color); }
.verde, .yes  { color: var(--positive-color); }

.caption {
  text-align: center;
  font-weight: bold;
}

.firma {
  text-align: left;
  margin: 1rem 0 0 1.5rem !important;
  font-weight: bold;
  font-style: normal;
}

.dedica {
  width: 85%;
  border-left: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 0.5rem;
  margin-left: 0.5rem;
}

.listamc {
  column-count: 2;
  column-gap: 0.5rem;
}

.listamc li {
  line-height: 1.6;
}

.ombra {
  box-shadow: 2px 2px 4px #555555;
}

#ricerca {
  width: 100%;
  margin: 0.5rem auto;
  padding: 0;
  text-align: center;
}

#ricerca input {
  text-align: left !important;
  margin-top: 0;
}

ul.lista-compatta {
  display: inline;
  list-style: none;
  margin: 0;
  padding-left: 0 !important;
  text-indent: 0;
}

ul.lista-compatta li {
  display: inline;
  margin: 0;
  padding-left: 0;
  list-style: none;
  text-indent: 0;
}

.citazione {
  margin: 1rem 1rem 1.5rem 1rem;
  padding: 4px;
  border: 0;
  box-shadow: 2px 2px 4px #555555;
}


.mediaembed {
  width: 100%;
  position: relative;
  margin: 1rem 0;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  text-align: center;
}

.inline-img {
}

.inline-img img {
  max-width: 80%;
  height: auto;
}

figcaption {
  font-size: smaller;
  font-weight: bold;
  font-style: italic;
}

.sql-info {
  margin-top: 0.5rem;
  margin-bottom: 0;
  border: 1px solid var(--border-color);
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--form-foreground-color);
  padding: 0.5rem;
  font-size: 70%;
}

.sql-sample {
  margin-top: 0.5rem;
  font-family: monospace;
  white-space: pre-wrap;
  overflow-x: auto;
}

.form-option {
  margin-top: 0.5rem;
}

#chart-box {
  margin: 1rem 0;
  height: auto;
}

#chart {
  border: 1px solid var(--border-color);
}

.aggiornamenti > ul {
  border-left: 2px solid var(--border-color);
  border-bottom: 2px solid var(--border-color);
}

.elemento-lista-nolink,
.elemento-lista-anno,
.album-tracklist-brano,
.singoli-tracklist-brano,
.tour-scaletta-brano,
.album-crediti-nome,
.singoli-crediti-nome,
.tour-crediti-nome {
  font-weight: bold;
  color: var(--link-color);
}

.data-edizione,
.data-tappa,
.anno,
.anno-album,
.anno-brano,
.anno-singolo,
.anno-tour {
  font-family: monospace, monospace;
  font-size: 1rem;
}


#almanacco-home {
  text-align: left;
}

#scelta-data .form-option {
  float: left;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
}

.intestazione-anno {
  width: 3rem;
}

.dato-nome {
}

.dato-valore {
  color: var(--secondary-color);
  font-weight: bold;
}


/* Stili inline per editor, news, schede */

.corsivo      { font-style: italic; }
.barrato      { text-decoration: line-through; }
.grassetto    { font-weight: bold; }

#editor button {
  font-weight: 400;
}

#editor button.corsivo {
  font-style: italic !important;
}

#editor button.grassetto {
  font-weight: bold !important;
}

#contenuto .blog-post {
  padding-left: 0.5ch;
  border-left: 1px solid var(--primary-color);
  border-bottom: 1px solid var(--primary-color);
  margin-bottom: 1.5rem;
}

#contenuto .blog-post-meta {
  font-style: italic;
}

#contenuto .blog-post-body strong {
  color: var(--foreground-color);
}


/* Stili per il player di note */

.is-active-note,
.is-playing {
  font-weight: 700;
  text-decoration: underline;
}


/* Usabilità e accessibilità */

.skip-link {
  position: absolute;
  top: -3rem;
  background-color: var(--background-color);
  color: #dadada;
  z-index: 99;
}

.skip-link:focus {
  top: 0;
}