/* ==========================================================================
   1. ESTRUCTURA GLOBAL (ORDENADOR Y TABLET)
   ========================================================================== */

/* Contenedor del menú en una sola línea verticalmente centrado */
.site-header .main-navigation > div > ul {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important; /* Centra perfectamente los textos, el botón y las banderas */
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  padding-left: 0 !important;
}

/* Mantener textos unidos en una línea y darles un margen limpio */
.site-header .main-navigation ul li {
  white-space: nowrap !important;
  margin-left: 10px !important; 
  margin-right: 10px !important;
}

/* ESTILO DE BOTÓN SEGURO (Sin desborde vertical) */
#site-navigation-mobile .menu_highlight > a,
.site-header .main-navigation ul li.menu_highlight > a {
  display: inline-block !important; 
  background-color: #025296 !important;
  color: white !important;
  border-radius: 5px !important;
  text-decoration: none !important;
  font-size: 16px !important;
  padding: 10px 15px !important;   
  line-height: 1.2 !important;     
  height: auto !important;         
}

#site-navigation-mobile .menu_highlight > a:hover,
.site-header .main-navigation ul li.menu_highlight > a:hover {
  background-color: #011e44 !important; 
  color: #ffffff !important; 
}

/* PROTECCIÓN DE IMAGEN (Afecta solo a la imagen, evita duplicación del contenedor) */
.site-header-container .site-header .site-logo img,
.site-header .site-logo img,
.sticky-header .site-logo img {
  display: inline-block !important; /* Cambiado de 'block' a 'inline-block' para respetar flujos */
  flex-shrink: 0 !important;        /* Prohíbe que el menú encoja la imagen */
  width: auto !important;            /* Mantiene proporción nativa */
  height: auto !important;           
  max-width: 236px !important;       /* Tamaño horizontal controlado */
  margin-top: -3px !important;       /* Corrección sutil para equilibrar el decalado visual */
}

/* 5. Alinear las banderas limpiamente a la derecha del botón azul */
.lang-item {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 6px !important;
  margin-right: 4px !important;
  vertical-align: middle !important;
}

.lang-item a {
  padding: 0 2px !important;
  background: transparent !important;
}

.lang-item img {
  display: inline-block !important;
  max-width: 18px !important;
  height: auto !important;
  box-shadow: none !important;
}

/* Limpiar el estilo de Polylang */
.lang-item ul, 
.current-lang {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   2. MEDIA QUERIES ORIGINALES PARA RESPONSIVE (REPASADAS)
   ========================================================================== */
@media (max-width: 1200px) {
  #site-navigation-mobile .slicknav_nav li.menu_highlight,
  .site-header .main-navigation ul li.menu_highlight {
    padding: 8px 15px !important;
    font-size: 18px !important;
    background-color: #025296 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
}

@media (max-width: 800px) and (min-width: 500px) {
  #site-navigation-mobile .slicknav_nav li.menu_highlight,
  .site-header .main-navigation ul li.menu_highlight {
    padding: 8px 15px !important;
    font-size: 17px !important;
    background-color: #025296 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    margin: 0 auto !important; 
    white-space: nowrap !important;
  }
}

@media (max-width: 500px) and (min-width: 430px) {
  #site-navigation-mobile .slicknav_nav li.menu_highlight,
  .site-header .main-navigation ul li.menu_highlight {
    padding: 8px 15px !important;
    line-height: 1 !important;
    font-size: 16px !important;
    background-color: #025296 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 430px) {
  #site-navigation-mobile .slicknav_nav li.menu_highlight,
  .site-header .main-navigation ul li.menu_highlight {
    border: none !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    font-size: 16px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 392px) {
  #site-navigation-mobile .slicknav_nav li.menu_highlight,
  .site-header .main-navigation ul li.menu_highlight {
    padding: 10px 10px 8px 10px !important;
    font-size: 14px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 372px) {
  #site-navigation-mobile .slicknav_nav li.menu_highlight,
  .site-header .main-navigation ul li.menu_highlight {
    padding: 10px 15px 8px 15px !important;
    font-size: 15px !important;
    margin-left: 10px !important;
    margin-right: 5px !important;
    line-height: 1.2 !important;
  }
}

/* ==========================================================================
   3. CORRECCIÓN EXCLUSIVA PARA MÓVILES EN VERTICAL (RAYAS Y RECORTE)
   ========================================================================== */
@media (max-width: 767px) {
  /* Forzar a que la cabecera móvil se estructure en una sola fila limpia */
  .site-header-container .site-header .header-main,
  .site-header .header-main,
  .site-header .container > .row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  /* Reducir sutilmente el logo en móviles para ganar ancho */
  .site-header-container .site-header .site-logo img,
  .site-header .site-logo img {
    max-width: 140px !important; 
    height: auto !important;
    display: block !important;
    margin-top: 0 !important;
  }

  /* Compactar el botón azul en móvil para que no empuje el menú */
  #site-navigation-mobile .menu_highlight > a,
  .site-header .main-navigation ul li.menu_highlight > a {
    padding: 6px 10px !important;   
    font-size: 12px !important;     
    white-space: nowrap !important; 
    margin: 0 5px !important;
    display: inline-block !important;
  }

  /* Blindar la visibilidad de las 3 rayas del menú móvil */
  .slicknav_menu, 
  .mobile-menu-toggle, 
  .site-header .menu-toggle,
  .site-header .slicknav_btn {
    display: block !important;
    visibility: visible !important;
    float: none !important;
    margin: 0 !important;
    padding: 5px !important;
    z-index: 9999 !important; 
  }
}

/* Microajuste para smartphones extremadamente pequeños (menos de 360px de ancho) */
@media (max-width: 360px) {
  .site-header-container .site-header .site-logo img,
  .site-header .site-logo img {
    max-width: 115px !important;
  }
  #site-navigation-mobile .menu_highlight > a,
  .site-header .main-navigation ul li.menu_highlight > a {
    font-size: 11px !important;
    padding: 5px 6px !important;
  }
}