/*
Theme Name: Mondo Italia
Theme URI: https://mondoitalia.site
Author: Claudio Coronel - IH&IA
Description: Theme custom basado en la portada original de Mondo Italia
Version: 1.0
*/

/* ===== MENÚ DESKTOP HORIZONTAL (>=769px) ===== */
@media (min-width: 769px) {
  /* el nav no debe colapsar ni apilar */
  .main-nav {
    display: block;
  }

  /* UL del menú en fila */
  .main-nav ul.menu-horizontal,
  .main-nav > ul {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;                /* similar a tu gap-1 */
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* LI sin “bloques raros” */
  .main-nav ul.menu-horizontal > li,
  .main-nav > ul > li {
    margin: 0;
    padding: 0;
    position: relative;
  }

  /* Links estilo Next (px-3 py-2 text-sm font-medium) */
  .main-nav ul.menu-horizontal > li > a,
  .main-nav > ul > li > a {
    display: block;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #1F1F1F;
    text-decoration: none;
    position: relative;
    transition: color .2s ease;
    white-space: nowrap; /* evita saltos de línea */
  }

  .main-nav ul.menu-horizontal > li > a:hover,
  .main-nav > ul > li > a:hover {
    color: #008C45;
  }

  /* subrayado animado tipo tu span verde */
  .main-nav ul.menu-horizontal > li > a::after,
  .main-nav > ul > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: #008C45;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
  }

  .main-nav ul.menu-horizontal > li > a:hover::after,
  .main-nav > ul > li > a:hover::after {
    transform: scaleX(1);
  }

  /* estado activo WP */
  .main-nav .current-menu-item > a,
  .main-nav .current-menu-ancestor > a {
    color: #008C45;
  }
  .main-nav .current-menu-item > a::after,
  .main-nav .current-menu-ancestor > a::after {
    transform: scaleX(1);
  }
}

/* ===== NAV WRAP (para posicionar dropdown en mobile) ===== */
.nav-wrap { position: relative; }

/* Accesibilidad */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ===== Desktop (>=1024px) ===== */
@media (min-width: 1024px) {
  .menu-toggle { display: none !important; }

  .main-nav { display: block !important; }
  .main-nav ul.menu-horizontal,
  .main-nav ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 24px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .main-nav li { margin: 0 !important; padding: 0 !important; }

  .main-nav a {
    display: block !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1F1F1F !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    position: relative;
    transition: color .2s ease;
  }
  .main-nav a:hover { color: #008C45 !important; }

  /* subrayado tipo Next */
  .main-nav a::after {
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:100%; height:2px;
    background:#008C45;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .2s ease;
  }
  .main-nav a:hover::after { transform:scaleX(1); }

  .main-nav .current-menu-item > a,
  .main-nav .current-menu-ancestor > a { color:#008C45 !important; }
  .main-nav .current-menu-item > a::after,
  .main-nav .current-menu-ancestor > a::after { transform:scaleX(1); }
}

/* ===== Mobile (<1024px) ===== */
@media (max-width: 1023px) {
  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 12px;
    border:1px solid rgba(0,0,0,.15);
    background:#fff;
    border-radius:999px;
    cursor:pointer;
    font-size:22px;
    line-height:1;
  }

  /* oculto por defecto */
  .main-nav { display: none; }

  /* visible al abrir */
  .main-nav.is-open{
    display:block;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    padding:12px 14px;
    z-index:9999;
  }

  .main-nav ul{
    list-style:none;
    margin:0; padding:0;
  }

  .main-nav li a{
    display:block;
    padding:12px 10px;
    border-top:1px solid rgba(0,0,0,.08);
    color:#1F1F1F;
    text-decoration:none;
  }

  .main-nav li:first-child a{ border-top:0; }
  .main-nav li a:hover{ color:#008C45; }
}

/* ===== MENU: FIX REAL (sin Tailwind) ===== */

/* Por defecto (desktop primero): hamburguesa NO */
.menu-toggle { display: none; }

/* NAV visible en desktop por defecto */
.main-nav { display: block; }

/* Desktop >=1024px: menú SIEMPRE horizontal */
@media (min-width: 1024px) {
  .menu-toggle { display: none !important; }

  #site-navigation,
  .main-nav { 
    display: block !important; 
    position: static !important;
  }

  .main-nav ul,
  .main-nav ul.menu-horizontal {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 24px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .main-nav li { margin: 0 !important; padding: 0 !important; }

  .main-nav a {
    display: block !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1F1F1F !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .main-nav a:hover { color: #008C45 !important; }
}

/* Mobile <1024px */
@media (max-width: 1023px) {
  .menu-toggle{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid rgba(0,0,0,.15);
    background: #fff;
    border-radius: 999px;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
  }

  /* Oculto por defecto */
  .main-nav { display: none !important; }

  /* Abierto con JS */
  .main-nav.is-open{
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    padding: 12px 14px;
    z-index: 9999;
  }

  .main-nav ul { list-style: none; margin: 0; padding: 0; }
  .main-nav li a{
    display: block;
    padding: 12px 10px;
    border-top: 1px solid rgba(0,0,0,.08);
    color: #1F1F1F;
    text-decoration: none;
  }
  .main-nav li:first-child a{ border-top: 0; }
  .main-nav li a:hover{ color: #008C45; }
}

.single .grid a img.mi-card-img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block !important;
}

/* SINGLE - imágenes insertadas clásicas (img suelto) */
@media (min-width: 1024px) {
  .single .entry-content img.alignnone,
  .single .post-content img.alignnone,
  .single article img.alignnone {
    display: block;
    max-width: 760px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 1rem auto !important;
  }
}

/* Barra de compartir: forzar alineación a la izquierda */
.mi-sharebar,
.mi-sharebar * {
  text-align: left !important;
}

.mi-sharebar {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-right: auto !important;
}

/* Por si algún ícono trae ml-auto / margin-left auto */
.mi-sharebar a {
  margin-left: 0 !important;
}

/* Layout header: logo | banner | menu */
.mi-header-inner{
  display:flex;
  align-items:center;
  gap:16px;
}

/* Banner container */
.mi-banner{
  flex: 1 1 auto;
  max-width:700px;
  aspect-ratio: 700 / 90;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width: 240px;
}

/* Make widgets behave */
.mi-header-banner-widget,
.mi-header-banner-widget *{
  max-width:100%;
}

.mi-banner img{
  width:100%;
  height:auto;
  max-height:90px;
  object-fit:contain;
  display:block;
}

/* Tablet: allow wrap */
@media (max-width: 1023px){
  .mi-header-inner{ flex-wrap:wrap; }
  .mi-banner{ order: 2; flex: 1 1 100%; max-width:100%; }
  /* si querés mantener menú arriba, ajustamos order del nav */
}

/* Mobile: banner full width */
@media (max-width: 767px){
  .mi-banner{ flex-basis:100%; max-width:100%; }
  .mi-banner img{ max-height:72px; } /* para que no quede gigante */
}

/* ===== FIX HEADER MONDO ITALIA ===== */

@media (min-width:1024px){

.mi-header-row{
display:flex;
align-items:center;
gap:24px;
}

.mi-logo{
order:1;
flex:0 0 auto;
}

.mi-banner{
order:2;
flex:1;
display:flex;
justify-content:center;
}

.mi-nav{
order:3;
margin-left:auto;
}
}

/* Header escritorio */
@media (min-width:1024px){

.mi-header-row{
display:flex;
align-items:center;
}

.mi-logo{
flex:0 0 auto;
}

.mi-banner{
flex:1;
display:flex;
justify-content:center;
}

.mi-nav{
margin-left:auto;
}
}

/* ===== OVERRIDE SOLO ESCRITORIO (NO TOCA MOBILE) ===== */
@media (min-width:1024px){

  /* fila del header */
  .mi-header-row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:24px !important;
  }

  /* logo fijo a la izquierda */
  .mi-logo{
    flex:0 0 auto !important;
  }

  /* banner centrado en el espacio del medio */
  .mi-banner{
    flex:1 1 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    max-width:700px !important;
    margin:0 auto !important;
  }

  /* menú fijo a la derecha */
  .mi-nav{
    flex:0 0 auto !important;
    margin-left:auto !important;
  }

  /* evitar que el widget meta márgenes raros */
  .mi-banner .widget{ margin:0 !important; }
  .mi-banner img{
    max-height:90px !important;
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    display:block !important;
  }
}

/* ===== Banner header seguro (solo escritorio) ===== */
.mi-header-banner-row{
  display:none; /* por defecto oculto */
}

@media (min-width:1024px){
  .mi-header-banner-row{
    display:block; /* solo escritorio */
    background:#fff;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
  }

  .mi-header-banner-center{
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .mi-header-banner-center .widget,
  .mi-header-banner-center .mi-header-banner-widget,
  .mi-header-banner-center .wp-block-image,
  .mi-header-banner-center a{
    display:block;
    margin:0 auto !important;
    width:100%;
    max-width:700px;
  }

  .mi-header-banner-center img{
    display:block;
    width:100%;
    height:auto;
    max-height:90px;
    object-fit:contain;
  }

  .mi-header-banner-center figure{
    margin:0 !important;
  }
}

/* Banner sidebar arriba de Más Leídas (solo escritorio) */
.mi-sidebar-banner-top{
  margin-bottom: 18px;
}

.mi-sidebar-banner-top img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border-radius: 10px; /* opcional, queda prolijo */
}

/* Solo escritorio */
@media (max-width: 1023px){
  .banner-desktop-only{
    display:none !important;
  }
}

/* Banner top solo móvil (700x90 responsive) */
.mobile-only-banner{
  display: none;
}

@media (max-width: 1023px){
  .mobile-only-banner{
    display: block !important;
  }

  .mi-mobile-top-banner-wrap{
    background: #fff;
  }

  .mi-mobile-top-banner,
  .mi-mobile-top-banner .widget,
  .mi-mobile-top-banner .wp-block-image,
  .mi-mobile-top-banner a{
    display: block;
    width: 100%;
    max-width: 700px;
    margin: 0 auto !important;
  }

  .mi-mobile-top-banner img{
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 700px;
    margin: 0 auto;
  }

  .mi-mobile-top-banner figure{
    margin: 0 !important;
  }
}