/**
 * Header global iplacex26 — paridad con iplacex24 (iplaweb), sin Tailwind.
 * Tokens desde theme.json. Mobile-first; breakpoint único 768px.
 */

/* box-sizing: el tema lienzo no trae reset global (Tailwind lo daba en iplaweb).
   Sin esto, width:100% + padding desborda el contenedor (nav/topbar se salían). */
.ipx-header *,
.ipx-header *::before,
.ipx-header *::after {
	box-sizing: border-box;
}

/* ---------- Utilidades de accesibilidad ---------- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ipla-blue);
}
.skip-link:focus {
	left: 0;
	top: 0;
}

/* ---------- Estructura base ---------- */
.ipx-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	/* Clip SOLO en el eje X: mata el desborde horizontal global del mega-menú
	   (.ipx-mega es position:absolute anclado a los ítems del nav; en los ítems
	   del lado derecho su borde derecho sobresale del viewport y sumaba a
	   scrollWidth INCLUSO cerrado, porque se oculta con visibility:hidden, no
	   display:none). overflow-y queda visible para que el mega siga cayendo
	   hacia abajo (translateY). 'clip' no crea contenedor de scroll → no rompe
	   el position:sticky del propio header. */
	overflow-x: clip;
	overflow-y: visible;
	font-family: var(--wp--preset--font-family--montserrat);
}

.ipx-header__main {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: visible;
}

.ipx-header__bar {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--ipla-blue);
	color: var(--wp--preset--color--white);
}

/* ---------- Logo ---------- */
.ipx-header__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}
.ipx-header__logo img {
	display: block;
	width: 141px;
	height: 38px;
	max-width: 100%;
}

/* ---------- Burger (mobile) ---------- */
.ipx-header__mobile-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
}
.ipx-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 0.5rem;
	background: var(--wp--preset--color--ipla-lightblue);
	border: 0;
	border-radius: 2px;
	cursor: pointer;
}
.ipx-burger__line {
	display: block;
	width: 2rem;
	height: 4px;
	background: var(--wp--preset--color--white);
	border-radius: 2px;
	transition: transform 0.3s ease-in, opacity 0.3s ease-in;
}
.ipx-burger[aria-expanded="true"] .ipx-burger__line:nth-child(1) {
	transform: translateY(10px) rotate(45deg);
}
.ipx-burger[aria-expanded="true"] .ipx-burger__line:nth-child(2) {
	opacity: 0;
}
.ipx-burger[aria-expanded="true"] .ipx-burger__line:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg);
}

/* ---------- Iconos ---------- */
.ipx-icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.ipx-icon svg {
	display: block;
}

/* ---------- Desktop wrapper ---------- */
.ipx-header__desktop {
	display: none;
}

/* ===================================================================
   DESKTOP (>= 768px)
   =================================================================== */
@media (min-width: 768px) {
	.ipx-header__bar {
		align-items: stretch;
		padding: 0;
	}

	.ipx-header__logo {
		padding: 1.5rem 3rem;
		z-index: 50;
	}

	.ipx-header__mobile-actions,
	.ipx-burger {
		display: none;
	}

	.ipx-header__desktop {
		display: flex;
		flex-direction: column;
		flex: 1 1 0;
		min-width: 0;
		width: 100%;
	}

	/* ---------- Topbar ---------- */
	.ipx-topbar {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		gap: 2rem;
		width: 100%;
		min-height: 20px;
		max-height: 35px;
		padding: 0.5rem 7rem;
		background: var(--wp--preset--color--ipla-header-gray);
		color: var(--wp--preset--color--ipla-blue);
		font-size: 0.875rem;
		font-weight: 500;
	}
	.ipx-topbar__corner {
		position: absolute;
		left: -15px;
		top: 4px;
		width: 80px;
		height: 50px;
		background: var(--wp--preset--color--ipla-blue);
		transform: rotate(45deg);
		z-index: 30;
	}

	.ipx-topbar__social {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.ipx-topbar__social li {
		width: 18px;
		height: 18px;
	}
	.ipx-topbar__social a,
	.ipx-topbar__social img {
		display: block;
		width: 18px;
		height: 18px;
	}

	.ipx-topbar__menu {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 2rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.ipx-topbar__item {
		position: relative;
		z-index: 20;
	}
	.ipx-topbar__link,
	.ipx-topbar__trigger {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.25rem;
		color: inherit;
		font: inherit;
		text-decoration: none;
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
		border-bottom: 2px solid transparent;
		transition: border-color 0.1s ease-in;
	}
	.ipx-topbar__link:hover,
	.ipx-topbar__trigger:hover {
		border-bottom-color: var(--wp--preset--color--ipla-blue);
	}

	.ipx-topbar__dropdown {
		position: absolute;
		bottom: 0;
		left: 0;
		transform: translateY(99%) translateX(-20%);
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		margin: 0;
		padding: 1.25rem 2rem;
		list-style: none;
		background: var(--wp--preset--color--ipla-blue);
		color: var(--wp--preset--color--white);
		opacity: 0;
		visibility: hidden;
		z-index: 500;
		transition: opacity 0.15s ease-in, visibility 0.15s ease-in;
	}
	.ipx-topbar__item.has-dropdown:hover .ipx-topbar__dropdown,
	.ipx-topbar__item.has-dropdown:focus-within .ipx-topbar__dropdown {
		opacity: 1;
		visibility: visible;
	}
	.ipx-topbar__dropdown a {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.5rem;
		padding: 0.75rem 0.5rem;
		color: inherit;
		text-decoration: none;
		border-bottom: 2px solid transparent;
		transition: border-color 0.1s ease-in;
		white-space: nowrap;
	}
	.ipx-topbar__dropdown a:hover {
		border-bottom-color: var(--wp--preset--color--white);
	}

	/* ---------- Main nav ---------- */
	.ipx-mainnav {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		width: 100%;
		flex: 1 1 auto;
		min-height: 40px;
		padding: 1rem 6rem;
		overflow: visible;
	}
	.ipx-mainnav__list {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 2rem;
		margin: 0 auto;
		padding: 0;
		list-style: none;
		font-size: 0.875rem;
		font-weight: 500;
	}
	.ipx-mainnav__item {
		position: relative;
		color: var(--wp--preset--color--white);
	}
	.ipx-mainnav__item.is-hidden {
		display: none;
	}
	.ipx-mainnav__link,
	.ipx-mainnav__trigger {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.25rem;
		color: inherit;
		font: inherit;
		text-decoration: none;
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
		transition: transform 0.1s ease-in, border-color 0.1s ease-in, background-color 0.1s ease-in, color 0.1s ease-in;
	}

	/* Items normales: hover sube + subraya */
	.ipx-mainnav__item:not(.is-cta) > .ipx-mainnav__link,
	.ipx-mainnav__item:not(.is-cta) > .ipx-mainnav__trigger {
		border-bottom: 2px solid transparent;
	}
	.ipx-mainnav__item:not(.is-cta):hover > .ipx-mainnav__link,
	.ipx-mainnav__item:not(.is-cta):hover > .ipx-mainnav__trigger,
	.ipx-mainnav__item:not(.is-cta):focus-within > .ipx-mainnav__link,
	.ipx-mainnav__item:not(.is-cta):focus-within > .ipx-mainnav__trigger {
		transform: translateY(-4px);
		border-bottom-color: var(--wp--preset--color--white);
	}

	/* Items CTA: botón azul */
	.ipx-mainnav__item.is-cta > .ipx-mainnav__link,
	.ipx-mainnav__item.is-cta > .ipx-mainnav__trigger {
		padding: 0.5rem 1rem;
		background: var(--wp--preset--color--ipla-lightblue);
		border-radius: 2px;
		color: var(--wp--preset--color--white);
	}
	.ipx-mainnav__item.is-cta:hover > .ipx-mainnav__link,
	.ipx-mainnav__item.is-cta:hover > .ipx-mainnav__trigger,
	.ipx-mainnav__item.is-cta:focus-within > .ipx-mainnav__link,
	.ipx-mainnav__item.is-cta:focus-within > .ipx-mainnav__trigger {
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--ipla-blue);
	}

	/* ---------- Mega menú ---------- */
	.ipx-mega {
		position: absolute;
		bottom: 0;
		left: 0;
		transform: translateY(104%) translateX(-15%);
		display: flex;
		flex-direction: row;
		gap: 1rem;
		width: max-content;
		padding: 2rem 2.5rem;
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--ipla-blue);
		box-shadow: 0 12px 28px rgba(6, 6, 49, 0.14);
		opacity: 0;
		visibility: hidden;
		z-index: 50;
		/* Cierre con gracia (hover-intent): al SALIR del hover el panel se queda
		   visible ~0.3s y luego se desvanece en 0.2s (visibility pasa a hidden
		   recién a los 0.5s). Ese margen de tiempo permite cruzar el hueco hacia
		   el hijo sin que el menú desaparezca de golpe. Al ABRIR (regla :hover de
		   abajo) el delay es 0 → aparece de inmediato. */
		transition: opacity 0.2s ease 0.3s, visibility 0s linear 0.5s;
	}
	/* Puente invisible: extiende el área de hover del panel hacia arriba para
	   cubrir el hueco entre la barra del nav y el panel (zona muerta donde el
	   cursor "caía" y cerraba el menú). Solo activo con el panel abierto
	   (visibility:hidden lo desactiva al cerrar). */
	.ipx-mega::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -1.25rem;
		height: 1.25rem;
	}
	.ipx-mainnav__item.has-mega:hover .ipx-mega,
	.ipx-mainnav__item.has-mega:focus-within .ipx-mega {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.2s ease 0s, visibility 0s linear 0s;
	}
	.ipx-mega__col {
		position: relative;
		width: max-content;
	}
	.ipx-mega__title {
		display: block;
		margin-bottom: 0.75rem;
		font-weight: 700;
	}
	.ipx-mega__links {
		margin: 0 0 0.75rem;
		padding-left: 1rem;
		list-style: none;
	}
	.ipx-mega__links li {
		margin-bottom: 1rem;
		width: 20vw;
		max-width: 320px;
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.5;
	}
	.ipx-mega__links a {
		color: inherit;
		text-decoration: none;
		border-bottom: 2px solid transparent;
		transition: border-color 0.1s ease-in;
	}
	.ipx-mega__links a:hover {
		border-bottom-color: var(--wp--preset--color--ipla-blue);
	}
	.ipx-mega__button {
		display: inline-block;
		margin-bottom: 0.75rem;
		padding: 0.5rem 1.25rem;
		border: 1px solid var(--wp--preset--color--ipla-textgray);
		border-radius: 4px;
		color: inherit;
		font-size: 0.875rem;
		text-decoration: none;
		width: max-content;
		transition: background-color 0.3s ease-in, color 0.3s ease-in;
	}
	.ipx-mega__button:hover {
		background: var(--wp--preset--color--ipla-lightblue);
		color: var(--wp--preset--color--white);
	}

}

/* ---------- Botón de búsqueda (común) ---------- */
.ipx-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex: 0 0 auto;
	padding: 0.5rem;
	border: 0;
	border-radius: 9999px;
	cursor: pointer;
	background: var(--wp--preset--color--ipla-lightblue);
	color: var(--wp--preset--color--white);
	transition: background-color 0.1s ease-in, color 0.1s ease-in;
}
.ipx-search__button--mobile {
	background: var(--wp--preset--color--ipla-lightblue);
	color: var(--wp--preset--color--white);
}

/* ---------- Overlay de búsqueda desktop ---------- */
.ipx-desktop-search {
	position: absolute;
	top: 100%;
	right: 0;
	width: 30%;
	min-width: 280px;
	padding: 0.5rem 1rem;
	z-index: 90;
}
.ipx-desktop-search[hidden] {
	display: none;
}

/* ---------- Formulario de búsqueda ---------- */
.ipx-search {
	position: relative;
	width: 100%;
}
.ipx-search__input {
	width: 100%;
	height: 2.5rem;
	padding: 0 2.5rem 0 1rem;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ipla-black);
	border: 1px solid var(--wp--preset--color--ipla-textgray);
	border-radius: 9999px;
	box-shadow: 0 8px 20px rgba(6, 6, 49, 0.12);
	font: inherit;
}
.ipx-search__input:focus {
	outline: 2px solid var(--wp--preset--color--ipla-link-blue);
	outline-offset: 1px;
}
.ipx-search__suggestions {
	position: absolute;
	top: calc(100% + 0.25rem);
	left: 0;
	width: 100%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ipla-black);
	border: 1px solid var(--wp--preset--color--ipla-textgray);
	border-radius: 6px;
	box-shadow: 0 8px 20px rgba(6, 6, 49, 0.12);
	z-index: 10;
	overflow: hidden;
}
.ipx-search__suggestions[hidden] {
	display: none;
}
.ipx-search__suggestions ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ipx-search__suggestions a {
	display: block;
	padding: 0.5rem 1rem;
	color: inherit;
	text-decoration: none;
}
.ipx-search__suggestions a:hover {
	background: var(--wp--preset--color--ipla-gray);
}
.ipx-search__empty {
	margin: 0;
	padding: 0.5rem 1rem;
	color: var(--wp--preset--color--ipla-text-darkgray);
}

/* ===================================================================
   MOBILE DRAWER (< 768px)
   =================================================================== */
.ipx-mobile-nav {
	position: absolute;
	top: 64px;
	left: 0;
	width: 100%;
	height: calc(100vh - 64px);
	padding: 1rem 1rem 6rem;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ipla-blue);
	font-size: 1rem;
	font-weight: 700;
	overflow-y: auto;
	overflow-x: hidden;
	transform: translateX(100%);
	opacity: 0;
	visibility: hidden;
	z-index: -20;
	transition: transform 0.5s ease-in, opacity 0.5s ease-in, visibility 0.5s ease-in;
}
.ipx-mobile-nav.is-open {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
	z-index: 40;
}

.ipx-mobile-nav__search {
	position: relative;
	margin-bottom: 0.5rem;
}
.ipx-search__mobile {
	margin-top: 0.5rem;
}
.ipx-search__mobile[hidden] {
	display: none;
}

.ipx-mobile-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ipx-mobile-menu__item {
	border-bottom: 0.5px solid var(--wp--preset--color--ipla-textgray);
}
.ipx-mobile-menu__row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 1rem;
	margin: 0.75rem 0;
	border: 0;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--white);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.ipx-mobile-menu__row.is-cta {
	background: var(--wp--preset--color--ipla-lightblue);
	color: var(--wp--preset--color--white);
}
.ipx-mobile-menu__row a {
	color: inherit;
	text-decoration: none;
}
.ipx-mobile-menu__group {
	margin-bottom: 0.75rem;
	padding: 0 1rem;
}
.ipx-mobile-menu__group-title {
	display: block;
	margin-bottom: 0.75rem;
}
.ipx-mobile-menu__group ul,
.ipx-mobile-schools ul {
	margin: 0 0 0.75rem;
	padding: 0 0 0 1rem;
	list-style: none;
}
.ipx-mobile-menu__group li,
.ipx-mobile-schools li {
	margin-bottom: 1rem;
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.5;
}
.ipx-mobile-menu__group a,
.ipx-mobile-schools a {
	color: inherit;
	text-decoration: none;
}

/* Escuelas (acordeón anidado) */
.ipx-mobile-schools {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ipx-mobile-schools__row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 0.75rem;
	border: 0;
	border-radius: 0.5rem;
	background: rgba(244, 244, 245, 0.6);
	color: var(--wp--preset--color--ipla-blue);
	font: inherit;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

/* topMenu mobile (bloque azul) */
.ipx-mobile-topmenu {
	width: calc(100% + 2rem);
	margin: 0 -1rem;
	padding: 1rem 1rem 12rem;
	background: var(--wp--preset--color--ipla-blue);
	color: var(--wp--preset--color--white);
}
.ipx-mobile-topmenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ipx-mobile-topmenu > ul > li {
	border-bottom: 0.5px solid var(--wp--preset--color--white);
}
.ipx-mobile-topmenu > ul > li:last-child {
	border-bottom: 0;
}
.ipx-mobile-topmenu__row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	margin: 0.75rem 0;
}
.ipx-mobile-topmenu__row a {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	color: inherit;
	text-decoration: none;
}
.ipx-mobile-topmenu__toggle {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: 0.25rem;
}
.ipx-mobile-topmenu .ipx-accordion__panel ul {
	padding: 0 1rem 0.75rem;
}
.ipx-mobile-topmenu .ipx-accordion__panel li {
	margin-bottom: 0.75rem;
	font-weight: 300;
}
.ipx-mobile-topmenu .ipx-accordion__panel a {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	color: inherit;
	text-decoration: none;
}

/* ---------- Acordeones (común mobile) ---------- */
.ipx-accordion__panel {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: max-height 0.4s ease-in, opacity 0.3s ease-in, visibility 0.4s ease-in;
}
.ipx-accordion__panel.is-open {
	max-height: 3000px;
	opacity: 1;
	visibility: visible;
}
.ipx-accordion__toggle .ipx-icon--chevron-right {
	transition: transform 0.4s ease-in;
}
.ipx-accordion__toggle[aria-expanded="true"] .ipx-icon--chevron-right {
	transform: rotate(90deg);
}

/* Oculta el drawer mobile en desktop + botón de búsqueda blanco en desktop
   (debe ir tras la regla común para ganar en el cascade). */
@media (min-width: 768px) {
	.ipx-mobile-nav {
		display: none;
	}
	.ipx-search__button {
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--ipla-blue);
	}
	.ipx-search__button:hover {
		background: var(--wp--preset--color--ipla-gray);
		color: var(--wp--preset--color--ipla-lightblue);
	}
}

/* El drawer mobile vive en translateX(100%) (fuera de pantalla): evita el scroll
   horizontal que generaría. `clip` (no `hidden`) no rompe el sticky ni el fixed
   del hero. Se clipa en html Y body: clip solo en html no contiene el scroll
   cuando el scroller efectivo propaga al body. */
@media (max-width: 767.98px) {
	html,
	body {
		overflow-x: clip;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ipx-header *,
	.ipx-mobile-nav,
	.ipx-accordion__panel {
		transition: none !important;
	}
}