/*
 * Stile minimo per il riquadro del campionato. Tutto sotto .fb-campionato e
 * niente regole globali: si incolla in un sito che ha gia' un suo stile, e
 * toccare body o table gli rovinerebbe il resto della pagina.
 *
 * I colori passano da variabili cosi' chi incolla puo' ridefinirle col proprio
 * tema senza riscrivere il foglio.
 */
.fb-campionato {
  --fb-testo: #1a1a1a;
  --fb-tenue: #6b6b6b;
  --fb-riga: #e6e6e6;
  --fb-sfondo: transparent;
  --fb-evidenza: #f5f5f5;

  color: var(--fb-testo);
  background: var(--fb-sfondo);
  font-family: inherit;
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  .fb-campionato {
    --fb-testo: #ececec;
    --fb-tenue: #a0a0a0;
    --fb-riga: #333;
    --fb-evidenza: #1e1e1e;
  }
}

.fb-campionato__sezione { margin: 1.5rem 0; }

.fb-campionato__tabella {
  width: 100%;
  border-collapse: collapse;
  /* Su telefono la tabella scorre dentro il suo riquadro invece di allargare
     la pagina: una vetrina che scrolla in orizzontale sembra rotta. */
  display: block;
  overflow-x: auto;
}

.fb-campionato__tabella th,
.fb-campionato__tabella td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--fb-riga);
  text-align: right;
  white-space: nowrap;
}

.fb-campionato__tabella th:nth-child(2),
.fb-campionato__tabella td:nth-child(2) { text-align: left; width: 100%; }

.fb-campionato__fuori { color: var(--fb-tenue); }

/* Le etichette dicono a parole quello che il colore da solo non direbbe. */
.fb-campionato__etichetta {
  font-size: 0.8em;
  color: var(--fb-tenue);
}

.fb-campionato__avvertenza {
  padding: 0.6rem 0.8rem;
  background: var(--fb-evidenza);
  border-left: 3px solid var(--fb-tenue);
  font-size: 0.9em;
}

.fb-campionato__fonte { font-size: 0.85em; color: var(--fb-tenue); }

/* La navigazione fra le giornate. */

.fb-campionato__giornate { margin: 0 0 1rem; }

.fb-campionato__passi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.fb-campionato__giornata-corrente { font-size: 1.05em; order: -1; flex-basis: 100%; }

.fb-campionato__passo { font-size: 0.9em; }
.fb-campionato__passo--spento { color: var(--fb-tenue); }

/* I numeri di tutte le giornate: servono a tornare a novembre senza premere
   venti volte "precedente". Vanno a capo su piu' righe invece di scorrere
   lateralmente, perche' una barra che scorre su un telefono si scopre solo per
   caso. */
.fb-campionato__numeri {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}

.fb-campionato__numero {
  display: block;
  min-width: 2rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--fb-riga);
  border-radius: 0.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
  text-decoration: none;
}

.fb-campionato__numero--attuale {
  border-color: currentColor;
  font-weight: 700;
}

.fb-campionato__stacco {
  align-self: center;
  padding: 0 0.15rem;
  color: var(--fb-tenue);
}

/* La data in testa al gruppo, non su ogni riga: una giornata si gioca in uno o
   due giorni, e ripeterla otto volte ruba spazio a chi ha giocato contro chi. */
.fb-campionato__giorno {
  margin: 1.2rem 0 0.4rem;
  font-size: 0.95em;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--fb-tenue);
  border-bottom: 1px solid var(--fb-riga);
  padding-bottom: 0.2rem;
}

.fb-campionato__partite { list-style: none; padding: 0; margin: 0; }

/* Le colonne sono quattro e non una fila di parole appiccicate: ora, casa,
   punteggio, ospite. Il punteggio al centro con le squadre che gli puntano
   contro e' la forma in cui un risultato si legge senza doverlo cercare. */
.fb-campionato__incontro {
  display: grid;
  grid-template-columns: 3.25rem 1fr auto 1fr;
  gap: 0.5rem 0.75rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--fb-riga);
}

.fb-campionato__ora { color: var(--fb-tenue); font-variant-numeric: tabular-nums; font-size: 0.9em; }
.fb-campionato__casa { text-align: right; }
.fb-campionato__ospite { text-align: left; }

.fb-campionato__punteggio {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 0 0.2rem;
}

.fb-campionato__trattino { padding: 0 0.3rem; }

.fb-campionato__stato { color: var(--fb-tenue); font-style: italic; font-weight: 400; }

.fb-campionato__marcatori {
  grid-column: 2 / -1;
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9em;
  color: var(--fb-tenue);
}

/* Sul telefono le due squadre non stanno affiancate: l'ora e il punteggio
   passano sopra, i nomi vanno a capo interi invece di spezzarsi a meta'. */
@media (max-width: 30rem) {
  .fb-campionato__incontro {
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.6rem;
  }
  .fb-campionato__casa,
  .fb-campionato__ospite {
    grid-column: 2;
    text-align: left;
  }
  .fb-campionato__ora { grid-row: 1; }
  .fb-campionato__punteggio { grid-row: 2; align-self: center; }
  .fb-campionato__marcatori { grid-column: 2; }
}

/* Aggiunte per la versione WordPress, dove l'HTML arriva gia' fatto. */
.fb-campionato__scorrevole { overflow-x: auto; }
.fb-campionato__didascalia { text-align: left; font-weight: 600; padding-bottom: 0.4rem; }
.fb-campionato__errore { color: var(--fb-tenue, #6b6b6b); font-style: italic; }
.fb-campionato__titolo { font-size: 1.3rem; }

/* Nella versione WordPress la tabella non e' display:block (l'overflow lo fa
   il contenitore), cosi' resta una vera tabella anche per chi legge con uno
   screen reader. */
.fb-campionato__tabella { display: table; }

/* La diagnosi, che vede solo chi amministra il sito. Deve distinguersi dal
   contenuto della pagina: e' un'informazione di servizio, non qualcosa che il
   sito sta dicendo ai suoi lettori. */
.fb-campionato__diagnosi {
	margin: .25rem 0 0;
	padding: .5rem .75rem;
	border-left: 3px solid #b45309;
	background: #fffbeb;
	color: #78350f;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .8125rem;
	word-break: break-all;
}