/* Riduci spazio header-titolo*/
@media (max-width: 768px) {
  .content header  {
    margin-top: 0 !important;
  }

  /* Sfondo menu 100% altezza, voci di menu posizione normale */
  .navigation-list {
    min-height: 100vh !important;
    margin: 0 !important;
    padding-top: 2rem !important;
    box-sizing: border-box !important;
  }
  
  .navigation-item {
    margin-bottom: 1rem !important;
  }
  
  .navigation-link {
    width: 100% !important;
    text-align: center !important;
    padding: 1rem !important;
  }
  
  .menu-separator {
    padding: 0.5rem 0 !important;
  }
  
  /* Cambia l'icona hamburger in X quando menu aperto */
  #menu-toggle:checked ~ .menu-button .fa-bars::before {
    content: "\f00d" !important; /* Usa il codice FontAwesome per fa-times */
  }
  
  /* Se FontAwesome non funziona, forza il carattere X */
  #menu-toggle:checked ~ .menu-button .fa-bars {
    font-family: "Font Awesome 6 Free" !important;
  }
  
  #menu-toggle:checked ~ .menu-button .fa-bars::before {
    content: "\f00d" !important;
    font-weight: 900 !important;
  }
}


/* Bandiere come immagini CSS invece di emoji */
.flag-gb::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 15px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"><rect width="60" height="30" fill="%23012169"/><path d="M0,0 L60,30 M60,0 L0,30" stroke="%23fff" stroke-width="6"/><path d="M0,0 L60,30 M60,0 L0,30" stroke="%23C8102E" stroke-width="4"/><rect x="25" y="0" width="10" height="30" fill="%23fff"/><rect x="0" y="10" width="60" height="10" fill="%23fff"/><rect x="27" y="0" width="6" height="30" fill="%23C8102E"/><rect x="0" y="12" width="60" height="6" fill="%23C8102E"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 5px;
}

/* Nascondi l'emoji e mostra solo la bandiera CSS */
a[href="/en/"] {
  font-size: 0;
}

a[href="/en/"]::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 15px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"><rect width="60" height="30" fill="%23012169"/><path d="M0,0 L60,30 M60,0 L0,30" stroke="%23fff" stroke-width="6"/><path d="M0,0 L60,30 M60,0 L0,30" stroke="%23C8102E" stroke-width="4"/><rect x="25" y="0" width="10" height="30" fill="%23fff"/><rect x="0" y="10" width="60" height="10" fill="%23fff"/><rect x="27" y="0" width="6" height="30" fill="%23C8102E"/><rect x="0" y="12" width="60" height="6" fill="%23C8102E"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 16px;
}

/* Bandiera italiana per il link IT */
a[href="/it/"], a[href="/"] {
  font-size: 0;
}

a[href="/it/"]::before, a[href="/"]::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 15px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"><rect x="0" y="0" width="20" height="30" fill="%23009246"/><rect x="20" y="0" width="20" height="30" fill="%23fff"/><rect x="40" y="0" width="20" height="30" fill="%23ce2b37"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 16px;
}

/* Featured Image - Larghezza completa */
.post-content img[alt="Featured image"] {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  margin: 0 0 2rem 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  display: block !important;
}

/* Per dispositivi mobili - mantieni proporzioni ma usa tutta la larghezza */
@media (max-width: 768px) {
  .post-content img[alt="Featured image"] {
    border-radius: 4px !important;
    margin: 0 0 1.5rem 0 !important;
  }
}

/* Alternative: Featured Image con max-height per evitare immagini troppo alte */
/* Decommenta la sezione seguente se vuoi limitare l'altezza massima delle immagini featured */
/*
.post-content img[alt="Featured image"] {
  max-height: 400px !important;
  object-fit: cover !important;
}

@media (max-width: 768px) {
  .post-content img[alt="Featured image"] {
    max-height: 250px !important;
  }
}
*/

/* Featured Image con aspect ratio fisso (opzionale) */
/* Decommenta per mantenere sempre un rapporto 16:9 */
/*
.post-content img[alt="Featured image"] {
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
}
*/

/* Miglioramenti generali per tutte le immagini nei post */
.post-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 4px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Effetto hover per le immagini (opzionale) */
.post-content img:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
  cursor: pointer !important;
}

/* Assicurati che le immagini non abbiano distorsioni */
.post-content img {
  object-fit: contain !important;
}

/* Specifico per featuredImage: sovrascrive le regole generali */
.post-content img[alt="Featured image"] {
  object-fit: cover !important; /* Per la featured image preferiamo cover */
}

/* ===============================================
   SOLUZIONI ALTERNATIVE - Decommenta se necessario
   =============================================== */

/* SOLUZIONE 1: Container per centrare l'immagine mantenendo proporzioni */
/*
.post-content {
  text-align: center;
}

.post-content img[alt="Featured image"] {
  display: inline-block !important;
  text-align: left !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
}
*/

/* SOLUZIONE 2: Featured Image come background per controllo totale */
/*
.featured-image-container {
  width: 100%;
  height: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  margin: 0 0 2rem 0;
}

@media (max-width: 768px) {
  .featured-image-container {
    height: 200px;
  }
}

.post-content img[alt="Featured image"] {
  display: none !important;
}
*/

/* SOLUZIONE 3: Grid layout per immagini responsive */
/*
.post-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.post-content img[alt="Featured image"] {
  grid-column: 1;
  justify-self: stretch;
}
*/