/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Tema hijo de Astra para personalizaciones (incluye soporte para fuente Magistral).
Author: Tu Nombre
Author URI: https://tuweb.com/
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* Aquí debajo van tus estilos personalizados */

/* ===== BASE de MENÚ ===== */
.elementor-nav-menu {
  align-items: stretch; /* asegura alto completo */
}

.elementor-nav-menu > li.menu-icon-right {
  display: flex;
  align-items: stretch; /* el <a> podrá llenar la altura */
  padding: 0 !important;
  margin: 0 !important;
}

/* Link ocupa todo el alto del item */
.elementor-nav-menu > li.menu-icon-right > a.elementor-item {
  position: relative;
  display: flex !important;
  align-items: center;
  height: 100%;
  padding: 14px 28px 14px 14px !important; /* ajusta este alto a tu header */
  transition: background-color .15s ease, color .15s ease;
  border-radius: 0; /* para que el fondo llegue a bordes */
}

/* ICONO NORMAL (DOWN) SIEMPRE VISIBLE */
.elementor-nav-menu > li.menu-icon-right > a.elementor-item::after {
  content: "\f347"; /* chevron DOWN */
  font-family: dashicons !important;
  font-size: 18px;
  line-height: 1;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%) scale(1) !important;

  color: #3C2255 !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: none !important;
  pointer-events: none;
}

/* ===== ESTADO PÁGINA ACTUAL (FONDO SÍ, PERO ICONO DOWN) ===== */
.elementor-nav-menu > li.menu-icon-right.current-menu-item > a.elementor-item,
.elementor-nav-menu > li.menu-icon-right.current-menu-ancestor > a.elementor-item,
.elementor-nav-menu > li.menu-icon-right > a.elementor-item.elementor-item-active {
  background: #3C2255 !important;
  color: #76B5E1 !important;
}

/* >>> AÑADE ESTE BLOQUE AQUÍ <<< */
/* Icono DOWN pero en celeste cuando la página está activa */
.elementor-nav-menu > li.menu-icon-right.current-menu-item > a.elementor-item::after,
.elementor-nav-menu > li.menu-icon-right.current-menu-ancestor > a.elementor-item::after,
.elementor-nav-menu > li.menu-icon-right > a.elementor-item.elementor-item-active::after {
  content: "\f347"; /* chevron DOWN */
  color: #76B5E1 !important;  /* visible sobre fondo morado */
  background: transparent !important;
  box-shadow: none !important;
}

/* ===== ESTADO SUBMENÚ ABIERTO (ICONO UP) ===== */
/* SmartMenus a veces pone highlighted en li y a, cubrimos ambos */
.elementor-nav-menu > li.menu-icon-right.highlighted > a.elementor-item,
.elementor-nav-menu > li.menu-icon-right > a.elementor-item.highlighted {
  background: #3C2255 !important;
  color: #76B5E1 !important;
}

/* Icono UP solo cuando está abierto */
.elementor-nav-menu > li.menu-icon-right.highlighted > a.elementor-item::after,
.elementor-nav-menu > li.menu-icon-right > a.elementor-item.highlighted::after {
  content: "\f343"; /* chevron UP */
  color: #76B5E1 !important;
  background: transparent !important;
  box-shadow: none !important;
}




/* ===== 1) QUITAR AIRE VERTICAL DEL HEADER (Elementor) ===== */
/* Esto solo afecta al header, no al resto del sitio */
.elementor-location-header .e-con,
.elementor-location-header .elementor-container,
.elementor-location-header .elementor-nav-menu--main {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ===== 2) QUE EL MENÚ OCUPE TODA LA ALTURA REAL DEL HEADER ===== */
.elementor-location-header nav.elementor-nav-menu--main,
.elementor-location-header nav.elementor-nav-menu--main > ul.elementor-nav-menu,
.elementor-location-header nav.elementor-nav-menu--main > ul.elementor-nav-menu > li {
  height: 100%;
  align-items: stretch;
}

/* ===== 3) PINTAR FONDO EN EL LI (rellena toda la barra) ===== */
.elementor-nav-menu > li.menu-icon-right.current-menu-item,
.elementor-nav-menu > li.menu-icon-right.current-menu-ancestor,
.elementor-nav-menu > li.menu-icon-right.highlighted {
  background: #3C2255 !important;
}

/* El <a> hereda el fondo del LI, no pinta por su cuenta */
.elementor-nav-menu > li.menu-icon-right.current-menu-item > a.elementor-item,
.elementor-nav-menu > li.menu-icon-right.current-menu-ancestor > a.elementor-item,
.elementor-nav-menu > li.menu-icon-right.highlighted > a.elementor-item {
  background: transparent !important;
  height: 100%;
  display: flex !important;
  align-items: center;
  padding-top: clamp(8px, 1.2vw, 16px) !important;
  padding-bottom: clamp(8px, 1.2vw, 16px) !important;
  border-radius: 0 !important;
}





/* ================== SUBMENÚS ================== */
/* ====== CONTENEDOR GENERAL (oculto por defecto) ====== */
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children{
  position: static !important;
}

/* Submenú panel: oculto */
.elementor-nav-menu--main .elementor-nav-menu > li > ul.sub-menu{
  position: absolute !important;
  left: 50% !important;
  top: 100% !important;
  transform: translateX(-50%) !important;

  width: min(1100px, 96vw) !important;
  background: rgba(255,255,255,0.96) !important;
  border-radius: 18px !important;
  padding: 22px 18px !important;
  margin-top: 10px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18) !important;
  z-index: 9999 !important;

  /* 👇 oculto de verdad */
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Submenú panel: SOLO cuando el padre está abierto */
.elementor-nav-menu--main .elementor-nav-menu > li.highlighted > ul.sub-menu,
.elementor-nav-menu--main .elementor-nav-menu > li > a.highlighted + ul.sub-menu{
  display: grid !important;                 /* 👈 aquí sí */
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr)) !important;
  gap: 18px !important;
  justify-items: center !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ====== ITEMS COMO TARJETAS ====== */
.elementor-nav-menu--main .sub-menu li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  text-align: center !important;
}

/* Enlace tarjeta */
.elementor-nav-menu--main .sub-menu li > a{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  font-weight: 700 !important;
  color: #2b0e3a !important;
  text-decoration: none !important;

  /* 👇 elimina fondo hover/activo de Elementor */
  background: transparent !important;
}

/* QUITA fondo al hover/activo del link */
.elementor-nav-menu--main .sub-menu li > a:hover,
.elementor-nav-menu--main .sub-menu li.current-menu-item > a,
.elementor-nav-menu--main .sub-menu li.current_page_item > a{
  background: transparent !important;
  color: #2b0e3a !important;
}

/* Cuadro del icono (normal) */
.elementor-nav-menu--main .sub-menu li > a::before{
  content: "" !important;
  width: 96px !important;
  height: 96px !important;
  border-radius: 10px !important;
  background-color: #3C2255 !important;

  background-image: var(--icon-normal);
  background-size: 62% 62% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;

  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  transition: transform .12s ease, background-image .12s ease;
}

/* Hover: NO fondo, SOLO cambia icono */
.elementor-nav-menu--main .sub-menu li > a:hover::before{
  transform: translateY(-2px);
  background-image: var(--icon-hover);
  background-color: #CE1957 !important;
}

/* Activo: NO fondo extra, SOLO icono activo */
.elementor-nav-menu--main .sub-menu li.current-menu-item > a::before,
.elementor-nav-menu--main .sub-menu li.current_page_item > a::before{
  background-image: var(--icon-hover); /* usamos el hover como activo */
  background-color: #CE1957 !important;
}


/* Cambia URLs por las tuyas */
.sub-menu li.icon-que-es      > a{ --icon-normal: url('https://nuevo.comibam.org/wp-content/uploads/2025/11/men-a01a.png'); --icon-hover: url('https://nuevo.comibam.org/wp-content/uploads/2025/11/men-a01b.png'); }
.sub-menu li.icon-historia    > a{ --icon-normal: url('https://nuevo.comibam.org/wp-content/uploads/2025/11/men-a02a.png'); --icon-hover: url('https://nuevo.comibam.org/wp-content/uploads/2025/11/men-a02b.png'); }
.sub-menu li.icon-fe          > a{ --icon-normal: url('https://nuevo.comibam.org/wp-content/uploads/2025/11/men-a03a.png'); --icon-hover: url('https://nuevo.comibam.org/wp-content/uploads/2025/11/men-a03b.png'); }
.sub-menu li.icon-directorio  > a{ --icon-normal: url('https://nuevo.comibam.org/wp-content/uploads/2025/11/men-a04a.png'); --icon-hover: url('https://nuevo.comibam.org/wp-content/uploads/2025/11/men-a04b.png'); }
.sub-menu li.icon-areas       > a{ --icon-normal: url('https://nuevo.comibam.org/wp-content/uploads/2025/11/men-a05a.png'); --icon-hover: url('https://nuevo.comibam.org/wp-content/uploads/2025/11/men-a05b.png'); }
.sub-menu li.icon-embajadores > a{ --icon-normal: url('https://nuevo.comibam.org/wp-content/uploads/2025/11/men-a06a.png'); --icon-hover: url('https://nuevo.comibam.org/wp-content/uploads/2025/11/men-a06b.png'); }


/* Diseño en autor y cargo de widget de carousel */
.ue_post_author_wrap {
    line-height: 1 !important;
    padding-top: 30px !important;
}
.ue_post_author_real,
.ue_post_author_cargo {
  color: #382153 !important;      /* color de fuente */
  margin: 0 !important;    	     /* por si el widget mete márgenes extra */
}

/* Nombre en negrita */
.ue_post_author_real {
  font-weight: 700 !important;
}

.ue_post_date_icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;              /* separación icono-fecha */
  color: #382153;        /* mismo color que autor/cargo si quieres */
  font-size: 0.9rem;
}

.ue_post_date_icon {
  font-size: 16px;
  line-height: 1;
}