/* calendar-table-draft.css
   BOZZA: stili per la tabella del calendario mensile (_inc-pagina-mese-tabella.asp).
   Da unire dentro asset/css/calendar.css quando la nuova pagina mensile e' confermata,
   poi rigenerare bundle.min.css come per gli altri file sorgente. */

/* spazio riservato per il banner accanto alla tabella: evita un salto di
   layout (CLS) quando l'annuncio viene caricato in ritardo. 250px = altezza
   di un formato 300x250, il piu' comune per questa posizione (stesso ordine
   di grandezza del banner #ad300dxtop gia' usato altrove nel sito); da
   adeguare qui se _ad300x250dxTop.inc.asp finira' per usare un formato
   diverso una volta popolato */
#ad300dxtop,
.col-md-4 ins.adsbygoogle {
  min-height: 250px;
  display: block;
}

.table-mese {
  width: 100%;
  border-collapse: collapse;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
}

.table-mese caption {
  text-align: left;
}

.table-mese thead th {
  background-color: rgba(236, 237, 237, 0.7);
  border-bottom: 1px #717476 solid;
  padding: 10px 12px;
  text-align: left;
  font-weight: bold;
}

.table-mese tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #ccc;
  vertical-align: middle;
}

.table-mese .col-giorno {
  width: 8%;
  text-align: center;
  font-weight: bold;
}

.table-mese .col-nome {
  width: 20%;
}

.table-mese .col-luna {
  width: 32%;
}

.table-mese .col-festa {
  width: 40%;
}

.table-mese .luna-simbolo {
  font-size: 1.3rem;
  line-height: 1;
  vertical-align: middle;
  color: #333;
  display: inline-flex;
  align-items: center;
}

.table-mese .luna-simbolo svg {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

.table-mese .luna-nome {
  margin-left: 8px;
  font-size: 0.85rem;
  color: #555;
  vertical-align: middle;
}

/* nome del giorno: versione estesa (default, desktop/tablet) e versione
   breve a 3 lettere (Lun, Mar...), quest'ultima usata solo sotto i 576px
   per risparmiare spazio orizzontale, vedi media query in fondo al file */
.table-mese .nome-breve {
  display: none;
}

/* contenitore con scroll orizzontale di sicurezza: non dovrebbe mai servire
   (le larghezze sotto i 576px sono gia' pensate per starci), ma se su un
   telefono molto stretto il contenuto risultasse comunque compresso, la
   tabella scorre invece di rompere il layout della pagina */
.table-mese-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Festivita', domeniche e ricorrenze non festive: colore solo sulle prime due
   celle (giorno + nome del giorno), non su tutta la riga. Le celle di fase
   lunare e festivita'/ricorrenza restano sempre bianche.

   Ordine importante: la regola .solemnity (azzurro) e' dichiarata PRIMA di
   .holiday/.domenica (rosso). Se una riga ha entrambe le classi (es. una
   ricorrenza non festiva che cade di domenica), a parita' di specificita'
   vince l'ultima dichiarata: il rosso ha quindi la precedenza sull'azzurro. */

/* ricorrenze non festive: sfondo azzurro chiaro, testo scuro normale
   (come nella griglia originale: .day.solemnity non ha mai usato testo
   bianco, perche' su un azzurro cosi' chiaro non sarebbe leggibile) */
.table-mese tbody tr.solemnity td.col-giorno,
.table-mese tbody tr.solemnity td.col-nome {
  background-color: #eff0ff;
}

/* festivita' e domeniche: sfondo rosso pieno, testo bianco in grassetto */
.table-mese tbody tr.holiday td.col-giorno,
.table-mese tbody tr.holiday td.col-nome,
.table-mese tbody tr.domenica td.col-giorno,
.table-mese tbody tr.domenica td.col-nome {
  background-color: #C1272D;
  color: #fff;
  font-weight: bold;
  border-bottom-color: #a81f26;
}

/* intestazione: nascosta visivamente a tutte le risoluzioni (il contenuto
   delle colonne - numero, giorno abbreviato, simbolo lunare, festivita' - e'
   sufficientemente auto-esplicativo), ma resta nel markup per gli screen
   reader tramite la stessa tecnica "clip" usata altrove per le classi
   sr-only */
.table-mese-thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- versione mobile: resta una vera tabella (righe/colonne), solo piu'
   compatta. Niente piu' trasformazione in elenco di card. --- */
@media (max-width: 575.98px) {
  .table-mese {
    font-size: 12px;
  }
  .table-mese thead th {
    padding: 6px 4px;
    font-size: 11px;
  }
  .table-mese tbody td {
    padding: 6px 4px;
  }
  .table-mese .col-giorno {
    width: 11%;
  }
  .table-mese .col-nome {
    width: 14%;
  }
  .table-mese .col-luna {
    width: 12%;
    text-align: center;
  }
  .table-mese .col-festa {
    width: 63%;
  }
  /* nome del giorno abbreviato a 3 lettere, per lasciare spazio alla
     colonna festivita'/ricorrenza che ha il contenuto piu' lungo e
     variabile (es. "Mercoledi delle Ceneri, Inizio Quaresima") */
  .table-mese .nome-esteso {
    display: none;
  }
  .table-mese .nome-breve {
    display: inline;
  }
  /* solo il simbolo della fase lunare, senza il nome per esteso */
  .table-mese .luna-nome {
    display: none;
  }
  .table-mese .luna-simbolo {
    font-size: 1.1rem;
  }
}