/* ==========================================================================
   Ottica Zambelli — Foglio di stile personalizzato
   (Tailwind gestisce la maggior parte del layout; qui regole complementari)
   ========================================================================== */

body {
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Stile Generale Immagini e Placeholder (Zoom interno, bordi tondi, ombra)
   -------------------------------------------------------------------------- */
img, .page-image-placeholder {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover !important;
  object-position: center;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  background-color: transparent !important;
  border: none !important;
}

/* --------------------------------------------------------------------------
   Dropdown navbar
   -------------------------------------------------------------------------- */
.dropdown-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.dropdown-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (min-width: 768px) {
  .dropdown:hover .dropdown-panel,
  .dropdown:focus-within .dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Hero section — immagine di sfondo
   -------------------------------------------------------------------------- */
.hero-section {
  background-image: url('../img/copertina.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   Box informativi sovrapposti alla hero
   -------------------------------------------------------------------------- */
.info-boxes {
  position: relative;
  z-index: 10;
}

.info-box__icon {
  color: #3A9D9C;
}

.info-box__title {
  color: #3A9D9C !important;
}

/* --------------------------------------------------------------------------
   Header — logo + testo affiancati (salvaguardia layout e proporzioni)
   -------------------------------------------------------------------------- */
.site-logo-wrap {
  display: block;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
}

@media (min-width: 640px) {
  .site-logo-wrap {
    width: 4rem;
    height: 4rem;
  }
}

.site-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* --------------------------------------------------------------------------
   Footer globale e Hover ad alto contrasto
   -------------------------------------------------------------------------- */
#contatti,
#contatti h2,
#contatti p,
#contatti a,
#contatti address,
#contatti dt,
#contatti dd,
#contatti span {
  color: #0F2C59 !important;
}

#contatti a {
  transition: color 0.2s ease-in-out;
}

#contatti a:hover {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Testo lungo leggibile (convenzioni e pagine di approfondimento)
   -------------------------------------------------------------------------- */
.prose-content h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #0F2C59;
}

.prose-content p,
.prose-content li {
  color: #374151;
  line-height: 1.75;
}

.prose-content ul {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  padding-left: 1.25rem;
  list-style-type: disc;
}

.prose-content li + li {
  margin-top: 0.5rem;
}

/* ==========================================================================
   FIX DEFINITIVO LOGO HEADER E IMMAGINI GREZZE (DA LASCIARE IN FONDO)
   ========================================================================== */

/* 1. Blocca il logo nell'header: piccolo, pulito e fuso con lo sfondo */
header img, 
.site-logo, 
[src*="logo"] {
  height: 50px !important;      /* Blocca l'altezza esattamente a 50px */
  max-height: 50px !important;
  width: auto !important;       /* Mantiene le proporzioni perfette */
  max-width: 220px !important;  /* Evita che si allarghi mai più */
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  object-fit: contain !important;
  mix-blend-mode: multiply !important; /* Rende trasparente il bianco attorno */
  border: none !important;
  margin: 0 !important;
}

/* 2. Immagini grezze nelle pagine (es. Regione Lombardia in Convenzioni) */
.img-raw, 
[src*="Regione"], 
[src*="sanitario"] {
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  object-fit: contain !important;
  mix-blend-mode: multiply !important;
  border: none !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 180px !important; /* Tetto massimo per non renderle sproporzionate */
  margin: 0 auto !important;
}