/*
 * CSS scritto a mano, NON generato da Tailwind/Docker.
 * Va qui qualunque regola custom o override rapido che non vuoi passare
 * dalla build (niente @apply, niente sintassi Tailwind: solo CSS puro).
 * Caricato dopo style.css, quindi può sovrascriverlo a parità di specificità.
 * Basta salvare e ricaricare la pagina: nessun rebuild richiesto.
 */

/*
 * Admin bar di WP (32px desktop, 46px sotto 782px) che copre l'header
 * "fixed top-0" del tema per gli utenti loggati.
 */
body.admin-bar header.fixed {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar header.fixed {
    top: 46px;
  }
}

/*
 * Altezza del contenitore della mappa Leaflet (page-dove-siamo.php).
 * "isolation: isolate" crea un proprio stacking context: senza, i pannelli
 * interni di Leaflet (z-index fino a 1000, vedi leaflet.css) risalgono e
 * competono direttamente con l'header fisso (z-50), passandoci sopra.
 */
#map {
  height: 420px;
  isolation: isolate;
}

@media screen and (min-width: 768px) {
  #map {
    height: 500px;
  }
}

/*
 * Galleria foto nativa (blocco Gutenberg "Galleria" o shortcode [gallery])
 * inserita nel contenuto delle Realizzazioni: allinea gli angoli arrotondati
 * e gli spazi al resto del tema.
 */
.rilegno-progetto-content .wp-block-gallery,
.rilegno-progetto-content .gallery {
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.rilegno-progetto-content .wp-block-image img,
.rilegno-progetto-content .gallery-item img {
  border-radius: 0.75rem;
}

/*
 * Pannello del menu mobile (header.php + assets/js/nav-mobile.js).
 * Animazione scritta a mano (non utility Tailwind) perché le classi vengono
 * aggiunte via JS a runtime: il compilatore Tailwind non le vedrebbe mai
 * nei file .php scansionati e le scarterebbe in build (successo già capitato
 * in questo tema con altre utility non ancora usate altrove).
 */
#mobile-menu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-0.5rem);
  transition: max-height 0.35s ease-in-out, opacity 0.25s ease-in-out, transform 0.3s ease-in-out;
}

#mobile-menu.is-open {
  max-height: 28rem;
  opacity: 1;
  transform: translateY(0);
}