/* =========================================================================
   ESEP — Header (child theme de Hello Elementor)
   ========================================================================= */

:root {
	--esep-azul:        #2159D6;
	--esep-azul-osc:    #1A47AB;
	--esep-azul-claro:  #EAF1FD;
	--esep-texto:       #20242B;
	--esep-borde:       #E7E9EE;
	--esep-bar-h:       72px;
	--esep-max:         1760px;  /* ancho del header. "none" = full total */
	--esep-pad-x:       40px;    /* separación de los bordes */
}

/* ---- Contenedor (sticky) ---- */
.esep-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #fff;
	box-shadow: 0 1px 0 var(--esep-borde);
	overflow-x: clip;   /* red de seguridad: un desplegable nunca genera scroll horizontal.
	                       'clip' (no 'hidden') no rompe el sticky y deja caer el menú hacia abajo. */
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Anula el color de hover/active rojo que el tema padre aplica a los <a>.
   Todo lo que vive dentro del header maneja su propio color. */
.esep-header a { -webkit-tap-highlight-color: transparent; }

/* Inputs/botones no heredan la tipografía: la forzamos para usar Open Sans. */
.esep-header input,
.esep-header button { font-family: inherit; }

/* ---- Barra de anuncio ---- */
.esep-topbar { background: var(--esep-azul); }
.esep-topbar p {
	margin: 0;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	padding: 8px 12px;
	letter-spacing: .2px;
	color: #fff;
}

/* ---- Barra principal: logo | menú (centro) | acciones ---- */
.esep-bar { border-bottom: 1px solid var(--esep-borde); }
.esep-bar__inner {
	position: relative;
	max-width: var(--esep-max);
	margin: 0 auto;
	min-height: var(--esep-bar-h);
	padding: 0 var(--esep-pad-x);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: 16px;
}

.esep-logo { grid-column: 1; justify-self: start; align-self: center; display: inline-flex; align-items: center; }
.esep-logo img { display: block; height: auto; max-height: 48px; width: auto; }

.esep-nav { grid-column: 2; display: flex; }

.esep-actions {
	grid-column: 3;
	justify-self: end;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* =========================================================================
   MENÚ (wp_nav_menu nativo) — desktop
   ========================================================================= */
.esep-menu,
.esep-menu .sub-menu { list-style: none; margin: 0; padding: 0; }

.esep-menu { display: flex; align-items: stretch; justify-content: center; height: 100%; gap: 2px; }
.esep-menu > li { position: relative; display: flex; align-items: stretch; }

.esep-menu > li > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 18px;
	font-size: 17px;
	font-weight: 500;
	color: var(--esep-texto);
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;            /* nunca partir un título en dos renglones */
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.esep-menu > li:hover > a,
.esep-menu > li:focus-within > a {
	color: var(--esep-azul);
	border-bottom-color: var(--esep-azul);
}

.esep-menu .menu-item-has-children > a::after {
	content: "";
	width: 7px; height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: .65;
}

/* ---- Submenús (dropdown) ---- */
.esep-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: #fff;
	border: 1px solid var(--esep-borde);
	border-radius: 0 0 12px 12px;   /* esquinas de arriba rectas, las de abajo redondeadas */
	box-shadow: 0 14px 34px rgba(20, 40, 90, .14);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.esep-menu li:hover > .sub-menu,
.esep-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.esep-menu .sub-menu a {
	display: block;
	padding: 7px 12px;
	font-size: 15px;
	font-weight: 400;
	color: var(--esep-texto);
	text-decoration: none;
	border-radius: 7px;
	white-space: nowrap;
	transition: background-color .12s ease, color .12s ease;
}
.esep-menu .sub-menu a:hover,
.esep-menu .sub-menu a:focus { background: var(--esep-azul-claro); color: var(--esep-azul); }

/* ---- MEGA-MENÚ (clase "mega") — 3 columnas ---- */
.esep-menu .mega > .sub-menu {
	left: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(180px, 1fr));
	gap: 2px 6px;
	width: max-content;
	max-width: calc(100vw - 40px);
	padding: 14px;
}
/* Hasta 1080px el mega va en 2 columnas: en 3 columnas + título corto ("Cursos")
   se pasaba del borde derecho y generaba scroll/margen blanco horizontal. */
@media (max-width: 1080px) {
	.esep-menu .mega > .sub-menu { grid-template-columns: repeat(2, 1fr); }
}

.esep-menu .current-menu-item > a { color: var(--esep-azul); }

/* =========================================================================
   ACCIONES: botón "Ingreso Alumnos" (outline — discreto, no compite con la venta)
   ========================================================================= */
.esep-cta {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	background: transparent;
	color: var(--esep-azul);
	font-size: 15px;
	font-weight: 600;
	padding: 9px 20px;
	border: 2px solid var(--esep-azul);
	border-radius: 5px;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.esep-header .esep-cta:hover,
.esep-header .esep-cta:focus-visible {
	background: var(--esep-azul);
	color: #fff !important;   /* el tema padre forzaba un celeste en a:hover */
}
.esep-cta--mobile { display: none; }

/* =========================================================================
   BÚSQUEDA INLINE (la lupa expande un campo dentro de la barra)
   ========================================================================= */
.esep-search {
	position: relative;
	display: inline-flex;
	align-items: center;
	border: 1px solid transparent;     /* sin marco en reposo */
	border-radius: 10px;
	background: transparent;
	transition: border-color .18s ease, background-color .18s ease;
}
.esep-search.is-open {
	border-color: var(--esep-borde);
	background: #fff;
}
.esep-search.is-open:focus-within { border-color: var(--esep-azul); }

/* Input: se fuerza sin borde/sombra/fondo para anular el estilo de <input>
   del tema padre (que dejaba un recuadro negro al abrir la búsqueda). */
.esep-header .esep-search__input {
	width: 0;
	min-height: 0;
	height: 38px;
	opacity: 0;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	outline: 0 !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	font-size: 16px;
	background: transparent !important;
	color: var(--esep-texto);
	transition: width .22s ease, opacity .18s ease, padding .22s ease;
}
.esep-header .esep-search.is-open .esep-search__input {
	width: 250px;
	opacity: 1;
	padding: 0 6px 0 14px;
}

/* Lupa: sin borde, hover azul (pisa el estilo rojo del tema) */
.esep-header .esep-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 38px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--esep-texto);
	cursor: pointer;
	flex: 0 0 auto;
	transition: background-color .15s ease, color .15s ease;
}
/* Tamaño del ícono forzado con alta especificidad + !important: algún estilo
   del tema padre / Elementor estaba achicando el <svg> (le ganaba al atributo
   inline). Esto lo deja fijo sí o sí. */
.esep-header .esep-actions .esep-search .esep-search-toggle svg,
.esep-header .esep-search-toggle svg.esep-search-ico {
	width: 24px !important;
	height: 24px !important;
	display: block;
	flex: 0 0 auto;
}
.esep-header .esep-search:not(.is-open) .esep-search-toggle:hover { background: var(--esep-azul-claro); color: var(--esep-azul); }
.esep-header .esep-search.is-open .esep-search-toggle { color: var(--esep-azul); }

.esep-header .esep-search-close {
	display: none;
	border: 0;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	color: #8a909a;
	cursor: pointer;
	padding: 0 12px 0 4px;
	transition: color .12s ease;
}
.esep-header .esep-search-close:hover { color: var(--esep-texto); }
.esep-search.is-open .esep-search-close { display: inline-flex; align-items: center; }

/* =========================================================================
   MOBILE
   ========================================================================= */
.esep-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px; height: 44px;
	padding: 10px;
	border: 0;
	background: transparent !important;   /* anula fondo rojo/rosa del tema */
	box-shadow: none !important;
	outline: 0;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
}
.esep-burger span {
	display: block; height: 2px; width: 100%;
	background: var(--esep-texto);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.esep-sub-toggle { display: none; }

/* -------------------------------------------------------------------------
   Tier intermedio (992–1200px): compactamos el menú (menos padding, fuente
   un poco menor, acciones más chicas) para mantener el header completo y que
   el hamburguesa recién aparezca por debajo de 992px (lo convencional).
   ------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1200px) {
	.esep-bar__inner { padding: 0 20px; gap: 8px; }
	.esep-menu { gap: 0; }
	.esep-menu > li > a { padding: 0 12px; font-size: 15px; }
	.esep-actions { gap: 6px; }
	.esep-cta { padding: 8px 14px; font-size: 14px; }
	.esep-header .esep-search-toggle { width: 40px; }
}

/* En la franja más justa (992–1080px) ni compactando entra "Cursos y
   Diplomaturas" completo, así que ahí lo mostramos como "Cursos". */
@media (min-width: 992px) and (max-width: 1080px) {
	.esep-menu .mega > a { font-size: 0; gap: 0; }
	.esep-menu .mega > a::before {
		content: "Cursos";
		font-size: 15px;
		font-weight: 500;
		margin-right: 6px;
	}
}

/* Breakpoint a 992px: por debajo pasamos al menú hamburguesa (convencional). */
@media (max-width: 991.98px) {
	.esep-bar__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 0 12px;
		min-height: 60px;
	}

	.esep-burger { display: flex; order: 1; }

	/* Logo realmente centrado, independientemente del ancho de los costados */
	.esep-logo {
		order: 2;
		position: absolute;
		left: 50%; top: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
	}

	.esep-actions { order: 3; }
	.esep-actions .esep-cta { display: none; }

	/* Panel desplegable */
	.esep-nav {
		order: 4;
		display: block;                  /* clave: en mobile NO es flex (si no, el menú y el botón quedan en fila) */
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: #fff;
		border-bottom: 1px solid var(--esep-borde);
		box-shadow: 0 14px 34px rgba(20, 40, 90, .1);
		max-height: 0;
		overflow: hidden;
		transition: max-height .25s ease;
	}
	.esep-nav-open .esep-nav { max-height: calc(100vh - 60px); overflow-y: auto; -webkit-overflow-scrolling: touch; }

	.esep-menu { display: block; flex-direction: column; align-items: stretch; height: auto; gap: 0; padding: 6px; }
	.esep-menu > li { border-bottom: 1px solid #f0f2f5; display: block; position: relative; }
	.esep-menu > li > a {
		display: block;
		padding: 15px 52px 15px 14px;     /* deja sitio a la derecha para la flecha */
		border-bottom: 0;
		font-size: 17px;
		color: var(--esep-texto);
	}
	.esep-menu > li:hover > a,
	.esep-menu > li:active > a { color: var(--esep-azul); border-bottom: 0; }
	.esep-menu .menu-item-has-children > a::after { display: none; }

	.esep-menu .sub-menu {
		position: static;
		opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; border-radius: 0;
		padding: 0 0 8px 14px;
		min-width: 0;
		display: none;
	}
	.esep-menu li.esep-sub-open > .sub-menu { display: block; }
	.esep-menu .sub-menu a { white-space: normal; font-size: 15px; padding: 11px 12px; }
	.esep-menu .sub-menu a:active { color: var(--esep-azul); }

	/* Mega submenú (categorías): en mobile, 2 columnas para que no quede larguísimo */
	.esep-menu .mega > .sub-menu { display: none; width: auto; max-width: none; padding-left: 14px; }
	/* Multicolumna (no grid): los ítems se empaquetan sin huecos entre sí;
	   el espacio sobrante queda al final, no al lado de un ítem de 2 renglones. */
	.esep-menu li.esep-sub-open.mega > .sub-menu {
		display: block;
		column-count: 2;
		column-gap: 8px;
		padding: 4px 8px 8px 14px;
	}
	.esep-menu .mega > .sub-menu li { break-inside: avoid; }
	.esep-menu .mega > .sub-menu a { padding: 10px 8px; }

	/* Flecha para desplegar (además del título, que también despliega vía JS) */
	.esep-sub-toggle {
		display: flex; align-items: center; justify-content: center;
		position: absolute; top: 0; right: 0;
		width: 52px; height: 50px;
		border: 0; background: transparent !important;
		-webkit-tap-highlight-color: transparent;
		cursor: pointer;
	}
	.esep-sub-toggle span {
		width: 9px; height: 9px;
		border-right: 2px solid var(--esep-texto);
		border-bottom: 2px solid var(--esep-texto);
		transform: rotate(45deg) translateY(-2px);
		transition: transform .2s ease;
	}
	.esep-sub-open > .esep-sub-toggle span { transform: rotate(-135deg) translateY(2px); }

	/* Botón "Ingreso Alumnos" SIEMPRE abajo del menú, ancho completo */
	.esep-cta--mobile {
		display: flex;
		justify-content: center;
		margin: 12px 12px 14px;
	}

	.esep-nav-open .esep-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.esep-nav-open .esep-burger span:nth-child(2) { opacity: 0; }
	.esep-nav-open .esep-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* En mobile, al abrir la búsqueda el campo ocupa la barra completa */
	.esep-header .esep-search.is-open {
		position: absolute;
		top: 50%;
		left: 12px; right: 12px;
		transform: translateY(-50%);
		z-index: 5;
		background: #fff;
		border-color: var(--esep-borde);
	}
	.esep-header .esep-search.is-open .esep-search__input { width: auto; flex: 1; }

	/* En mobile la lupa queda un poco más grande (24px se ve chico en touch). */
	.esep-header .esep-actions .esep-search .esep-search-toggle svg,
	.esep-header .esep-search-toggle svg.esep-search-ico {
		width: 28px !important;
		height: 28px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.esep-menu .sub-menu, .esep-nav, .esep-burger span,
	.esep-search, .esep-search__input, .esep-sub-toggle span { transition: none; }
}