/* ===========================================================================
   site.css  --  piccole aggiunte al foglio di stile principale
   ---------------------------------------------------------------------------
   styles.css e' il file compilato del progetto originale e non va modificato:
   qui stanno solo le poche regole in piu' che servono al sito in ASP.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. UTILITY TAILWIND MANCANTI
   ---------------------------------------------------------------------------
   styles.css e' stato compilato da Tailwind leggendo il codice React di
   partenza, quindi contiene SOLO le classi che quel codice usava davvero.
   Le pagine ASP usano qualche classe in piu' (per esempio grid-cols-1 o
   mt-20) che nel file compilato non esiste: senza queste regole quelle
   classi non avrebbero alcun effetto.
   Sono scritte con le stesse variabili di Tailwind v4 (--spacing = .25rem,
   --text-*, i colori del tema) per ottenere un risultato identico.
   Se un giorno ricompili il CSS dal sorgente, questo blocco diventa
   superfluo e puo' essere eliminato senza conseguenze.
   --------------------------------------------------------------------------- */

/* margini e spaziature interne */
.mt-10 { margin-top: calc(var(--spacing) * 10); }
.mt-20 { margin-top: calc(var(--spacing) * 20); }
.mb-2  { margin-bottom: calc(var(--spacing) * 2); }
.mb-4  { margin-bottom: calc(var(--spacing) * 4); }
.pt-1  { padding-top: calc(var(--spacing) * 1); }
.pt-2  { padding-top: calc(var(--spacing) * 2); }
.pt-6  { padding-top: calc(var(--spacing) * 6); }
.pt-8  { padding-top: calc(var(--spacing) * 8); }
.pb-6  { padding-bottom: calc(var(--spacing) * 6); }
.pb-16 { padding-bottom: calc(var(--spacing) * 16); }
.py-10 { padding-block: calc(var(--spacing) * 10); }
.py-20 { padding-block: calc(var(--spacing) * 20); }
.p-5   { padding: calc(var(--spacing) * 5); }

/* larghezze e altezze fisse */
.w-12  { width: calc(var(--spacing) * 12); }
.w-16  { width: calc(var(--spacing) * 16); }
.w-20  { width: calc(var(--spacing) * 20); }
.h-14  { height: calc(var(--spacing) * 14); }
.h-56  { height: calc(var(--spacing) * 56); }
.h-64  { height: calc(var(--spacing) * 64); }
.h-80  { height: calc(var(--spacing) * 80); }
.min-h-\[68vh\] { min-height: 68vh; }

/* griglie e disposizione */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gap-5   { gap: calc(var(--spacing) * 5); }
.gap-y-10 { row-gap: calc(var(--spacing) * 10); }
.justify-end { justify-content: flex-end; }
.self-start  { align-self: flex-start; }
.isolate     { isolation: isolate; }
.overflow-x-auto { overflow-x: auto; }

/* testo */
.text-6xl { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); }
.uppercase { text-transform: uppercase; }
.leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

/* colori (color-mix riproduce la sintassi con la barra, es. bg-primary/5) */
.bg-primary-foreground { background-color: var(--primary-foreground); }
.bg-primary\/5 { background-color: color-mix(in oklab, var(--primary) 5%, transparent); }
.text-border   { color: var(--border); }
.text-foreground\/80 { color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.text-primary-foreground\/80 { color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); }
.text-primary-foreground\/90 { color: color-mix(in oklab, var(--primary-foreground) 90%, transparent); }
.border-border\/40 { border-color: color-mix(in oklab, var(--border) 40%, transparent); }
.border-dotted { --tw-border-style: dotted; border-style: dotted; }

/* stati al passaggio del mouse */
.hover\:bg-primary-foreground\/10:hover { background-color: color-mix(in oklab, var(--primary-foreground) 10%, transparent); }
.hover\:scale-105:hover { scale: 1.05; }

/* varianti per schermi medi (>= 48rem, come Tailwind) */
@media (min-width: 48rem) {
  .md\:pt-12 { padding-top: calc(var(--spacing) * 12); }
  .md\:py-24 { padding-block: calc(var(--spacing) * 24); }
  .md\:h-96  { height: calc(var(--spacing) * 96); }
  .md\:max-w-3xl { max-width: var(--container-3xl); }
  .md\:text-lg  { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); }
  .md\:text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); }
}

/* varianti per schermi grandi (>= 64rem) */
@media (min-width: 64rem) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ---------------------------------------------------------------------------
   2. REGOLE PROPRIE DEL SITO ASP
   --------------------------------------------------------------------------- */

/* Nasconde davvero gli elementi con l'attributo hidden.
   Serve perche' alcuni reset CSS impostano display sui <li> e sovrascrivono
   il comportamento predefinito dell'attributo. */
[hidden] {
  display: none !important;
}

/* Pulsante del filtro galleria attualmente selezionato */
.gal-filter.is-active {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--primary-foreground);
}

/* Voce del menu corrispondente alla pagina che si sta guardando */
.nav-link[aria-current="page"] {
  color: var(--primary);
}

/* Lingua attualmente selezionata nel cambio lingua */
.lang-link[aria-current="true"] {
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 500;
}

/* Il link "Vai al contenuto principale" compare solo quando riceve il focus
   da tastiera: e' un aiuto per chi naviga senza mouse. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.75rem 1rem;
  background-color: var(--background);
  color: var(--foreground);
  border: 1px solid var(--primary);
  border-radius: 2px;
}