/*
 * ============================================================
 *  NAVIGATION STYLES — Twenty Twenty-Five Child Theme
 *  Archivo exclusivo para personalizar el menú de navegación
 *  (Gutenberg Navigation Block).
 *
 *  Clases generadas por core/navigation:
 *    .wp-block-navigation              → nav contenedor
 *    .wp-block-navigation__container   → ul raíz
 *    .wp-block-navigation-item         → li
 *    .wp-block-navigation-item__content → a o span
 *    .wp-block-navigation__submenu-container → ul submenu
 *    .wp-block-navigation-submenu      → li con hijos
 *    .wp-block-navigation__submenu-icon → flecha dropdown
 *    .wp-block-navigation__responsive-container       → overlay/panel
 *    .wp-block-navigation__responsive-container-open  → botón hamburguesa
 *    .wp-block-navigation__responsive-container-close → botón cerrar
 *    .wp-block-navigation__responsive-dialog          → wrapper interno
 *    .is-menu-open → class en <body> cuando el overlay está abierto
 * ============================================================
 */

/* ------------------------------------------------------------
 *  1. CONTENEDOR PRINCIPAL (nav)
 *  Ajusta la altura, el fondo y el espaciado general de la barra.
 *  Por defecto el padre lo renderiza dentro de un group con padding.
 * ------------------------------------------------------------ */
.wp-block-navigation {
	/* background-color: #ffffff; */
	/* border-bottom: 1px solid #e0e0e0; */
	/* min-height: 60px; */
	
}

/* ------------------------------------------------------------
 *  2. LISTA DE NAVEGACIÓN (ul raíz)
 *  Flex layout horizontal. Jugar con gap para separar items.
 * ------------------------------------------------------------ */
.wp-block-navigation__container {
	/* gap: 2rem; */
}

/* ------------------------------------------------------------
 *  3. CADA ÍTEM DEL MENU (li)
 * ------------------------------------------------------------ */
.wp-block-navigation-item {
	/* padding: 0; */
}

/* ── Quitar outline al hacer click (se mantiene para navegación por teclado) ── */
.wp-block-navigation-item:focus:not(:focus-visible),
.wp-block-navigation-item__content:focus:not(:focus-visible),
.wp-block-navigation__responsive-container-open:focus:not(:focus-visible),
.wp-block-navigation__responsive-container-close:focus:not(:focus-visible) {
	outline: none;
}

/* ── Outline solo para teclado (accesibilidad) ── */
.wp-block-navigation-item:focus-visible,
.wp-block-navigation-item__content:focus-visible,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible {
	outline: 2px solid #1463af;
	outline-offset: 2px;
}

 .wp-block-navigation__submenu-container .wp-block-navigation-item {
	position: relative;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 5%;
	width: 90%;
	height: 1px;
	background-color: #e0e0e0;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item:last-child::after {
	content: none;
}


/* ------------------------------------------------------------
 *  4. LINKS — estado normal
 *  .wp-block-navigation-item__content es el <a>.
 * ------------------------------------------------------------ */
.wp-block-navigation-item__content {
	/* font-family: 'Inter', sans-serif; */
	/* font-size: 1rem; */
	/* font-weight: 500; */
	/* text-transform: uppercase; */
	/* letter-spacing: 0.02em; */
	/* color: #333333; */
	/* text-decoration: none; */
	/* padding: 0.5rem 0; */
}


/* ------------------------------------------------------------
 *  5. LINK EN HOVER
 * ------------------------------------------------------------ */
/*  */

.wp-block-navigation-item__content:hover,
.wp-block-navigation-item__content:focus {
	color: #1463af !important;
	text-decoration: none;
	
}

 /* LINK SUBMENU */

 .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
 .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	color: white !important;
	background-color: #1463af;
}

/* ------------------------------------------------------------
 *  6. ÍTEM ACTIVO / CURRENT
 *  La clase .current-menu-item o .wp-block-navigation-item--current
 *  se agrega automáticamente al li activo.
 * ------------------------------------------------------------ */	
.wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.wp-block-navigation-item--current .wp-block-navigation-item__content {
	/* color: #0073aa; */
	/* font-weight: 600; */
	/* border-bottom: 2px solid #0073aa; */
}

/* ------------------------------------------------------------
 *  7. SUBMENU — contenedor (ul)
 *  Aparece al hacer hover sobre un ítem con hijos.
 *  Por defecto Gutenberg lo muestra con position absolute.
 * ------------------------------------------------------------ */
.wp-block-navigation__submenu-container {
	/* background-color: #ffffff; */
	/* border: 1px solid #e0e0e0; */
	/* border-radius: 4px; */
	/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
	min-width: 240px;
	/* padding: 0.5rem 0; */
	/* gap: 0; */

	/* ── Posición: centrado horizontal y 10px más abajo ── */
	/* left: 50%; */
	transform: translateX(12%) translateY(10px);
}

/* Puente invisible que cubre el gap vertical del translateY */
.wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -15px;
	left: 0;
	width: 100%;
	height: 15px;
	/* background: red; */ /* descomentar para debug */
}

/* ------------------------------------------------------------
 *  8. ÍTEMS DENTRO DEL SUBMENU (li)
 * ------------------------------------------------------------ */
.wp-block-navigation__submenu-container .wp-block-navigation-item {
	/* padding: 0; */
}

/* ------------------------------------------------------------
 *  9. LINKS DENTRO DEL SUBMENU
 * ------------------------------------------------------------ */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	/* padding: 0.5rem 1rem; */
	/* font-size: 0.9rem; */
	/* font-weight: 400; */
	/* color: #444444; */
	/* white-space: nowrap; */
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	/* color: #0073aa; */
	/* background-color: #f5f5f5; */
}

/* ------------------------------------------------------------
 *  10. FLECHA DEL SUBMENU (icono SVG)
 * ------------------------------------------------------------ */
.wp-block-navigation__submenu-icon {
	display: none;
}
/* ------------------------------------------------------------
 *  11. BOTÓN HAMBURGUESA (overlay open)
 *  Visible solo en móvil o cuando overlayMenu está activo.
 * ------------------------------------------------------------ */
.wp-block-navigation__responsive-container-open {
	/* background: none; */
	/* border: none; */
	color: #1463af;
	/* font-size: 1.5rem; */
	/* cursor: pointer; */

	/* ── Click area grande (como el recuadro invisible original) ── */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem;
	min-width: 48px;
	min-height: 48px;
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:focus,
.wp-block-navigation__responsive-container-open:active {
	/* border: none; */
}

/* ── Icono hamburguesa: 3 barras gruesas (reemplaza SVG default) ── */
.wp-block-navigation__responsive-container-open svg {
	display: none;
}

.wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 24px;
	height: 3px;            /* grosor de cada barra */
	background: #1463af;
	box-shadow: 0 8px 0 #1463af, 0 16px 0 #1463af;
	border-radius: 1px;
}

/* ------------------------------------------------------------
 *  12. OFF-CANVAS PANEL + OVERLAY (unificado para todos los tamaños)
 *  Panel que se desliza desde la derecha, con header "MENÚ",
 *  ítems con íconos y footer con CTA + sociales.
 *  El header/footer/íconos los inyecta assets/js/navigation.js.
 * ------------------------------------------------------------ */

/* --- Contenedor: overlay que cubre toda la pantalla --- */
.wp-block-navigation__responsive-container {
	display: flex !important;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s ease 0.45s;
	width: 100vw !important;
	max-width: 100vw !important;
}

.wp-block-navigation__responsive-container.is-menu-open {
	visibility: visible;
	pointer-events: auto;
	animation: none !important;
	overflow: clip !important;
	transition: visibility 0s ease 0s;
	position: fixed;
	inset: 0;
	z-index: 100000;
}

/* Anular width:100% del core en el wrapper del botón cerrar */
.wp-block-navigation__responsive-close {
	position: absolute;
	right: 0;
	width: auto;
}

/* --- Overlay oscuro (fondo transparente negro) --- */
.wp-block-navigation__responsive-container::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	transition: opacity 0.45s ease;
}

/* Anular fondo blanco del core en el overlay */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: transparent !important;
}

.wp-block-navigation__responsive-container.is-menu-open::before {
	opacity: 1;
}

/* --- Panel lateral: 250px fijo, alineado a la derecha --- */
.wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
	width: 250px !important;
	max-width: 250px !important;
	height: 100vh;
	height: 100dvh;
	margin-left: auto;
	background: #ffffff;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25);
	transform: translateX(100%);
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
	gap: 0;
	overflow: clip;
	text-align: left;
}

/* Al cerrar: el contenido se desvanece al instante */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog .rm-nav-header,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog .rm-nav-footer {
	opacity: 0;
	transition: opacity 0s ease 0s;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog .rm-nav-header,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog .rm-nav-footer {
	opacity: 1;
	transition: opacity 0s ease 0s;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	transform: translateX(0);
}

/* Quitar padding que el core agrega al abrir */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: 0;
}

/* --- Contenido scrollable: header ↑ | lista | footer ↓ --- */
.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
	flex: 1 1 auto;
	overflow-y: auto;
}

.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
	padding-top: 0;
}

/* Elementos inyectados: ocultos fuera del overlay abierto */
.rm-nav-header,
.rm-nav-footer {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .rm-nav-header,
.wp-block-navigation__responsive-container.is-menu-open .rm-nav-footer {
	display: flex;
	flex-shrink: 0;
}

/* Elementos inyectados por navigation.js: ocultos salvo overlay abierto */
.rm-nav-header,
.rm-nav-footer {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .rm-nav-header,
.wp-block-navigation__responsive-container.is-menu-open .rm-nav-footer {
	display: flex;
}

/* ------------------------------------------------------------
 *  13. HEADER DEL PANEL — barra azul con título y botón cerrar
 * ------------------------------------------------------------ */
.rm-nav-header {
	position: relative;
	z-index: 1;
	align-items: center;
	justify-content: space-between;
	background: #1463af;
	color: #ffffff;
	padding: 0.85rem 1.25rem;
}

.rm-nav-header__title {
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Botón cerrar (flecha →), reubicado dentro del header por JS */
.rm-nav-header .wp-block-navigation__responsive-container-close {
	position: static;
	background: none;
	border: none;
	color: #ffffff;
	padding: 0.4rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rm-nav-header .wp-block-navigation__responsive-container-close svg {
	width: 22px;
	height: 22px;
}

/* Blindaje del icono cerrar: el core fuerza `fill: currentColor` en este
 * svg (blocks/navigation/style.css), lo que rellenaba de blanco el chevron
 * anterior basado en stroke. El icono actual es un path de relleno sólido,
 * así que esa regla del core ahora juega a favor; esto solo fija el fondo
 * transparente y anula cualquier stroke heredado. */
.rm-nav-header .wp-block-navigation__responsive-container-close svg,
.rm-nav-header .wp-block-navigation__responsive-container-close svg * {
	fill: currentColor;
	stroke: none;
	background: transparent;
}

/* ------------------------------------------------------------
 *  14. ÍTEMS DEL MENÚ DENTRO DEL PANEL
 * ------------------------------------------------------------ */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 90%;
	align-items: stretch !important; /* anula el align-items: flex-end heredado por items-justified-right */
}


.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__submenu-container .wp-block-navigation-item::after {
	content: none;
}

.wp-block-navigation__responsive-container.is-menu-open  .wp-block-navigation__submenu-container {
	/* background-color: #ffffff; */
	/* border: 1px solid #e0e0e0; */
	/* border-radius: 4px; */
	/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
	min-width: 240px;
	/* padding: 0.5rem 0; */
	/* gap: 0; */

	/* ── Posición: centrado horizontal y 10px más abajo ── */
	/* left: 50%; */

}


.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item .wp-block-navigation__submenu-container {
	padding-top: 0;
	padding-bottom: 1rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0.9rem 0.25rem;
	font-size: 1rem;
	font-weight: 400;
	color: #444444;
	border-bottom: 1px solid #e8e8e8;
	text-align: left;
}

/* Nivel 1 (ítems raíz): extrabold para marcar jerarquía */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-weight: 800;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: #1463af !important;
}



/* ------------------------------------------------------------
 *  15. SUBMENÚ DENTRO DEL PANEL (abierto)
 * ------------------------------------------------------------ */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)
.wp-block-navigation-item .wp-block-navigation__submenu-container {
	transform: none !important;  /* anula el translateX(12%) del submenu desktop */
	width: 100%;
	background: transparent;
	padding-left: 0 !important;  /* sin sangrías, jerarquía por font-weight */
	padding-right: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 0.95rem;
	font-weight: 400;
	color: #666666;
}

/* Hover/focus submenu items dentro del panel: texto blanco sobre fondo azul */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	color: #ffffff !important;
	background-color: #1463af;
}

/* ------------------------------------------------------------
 *  16. FOOTER DEL PANEL — CTA CONTACTANOS + redes sociales
 * ------------------------------------------------------------ */
.rm-nav-footer {
	position: relative;
	z-index: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1.5rem 1.25rem 1.25rem;
	background: #ffffff;
}

/* Botón CTA naranja */
.rm-nav-footer .rm-nav-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #f5a02c;
	color: #ffffff;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.03em;
	text-decoration: none;
	padding: 0.7rem 1.6rem;
	border-radius: 999px;
	transition: background-color 0.2s ease;
}

.rm-nav-footer .rm-nav-cta:hover {
	background: #d98a20;
}

.rm-nav-footer .rm-nav-cta svg {
	width: 16px;
	height: 16px;
}

/* Lista de íconos sociales */
.rm-nav-footer .rm-nav-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rm-nav-footer .rm-nav-social a {
	color: #8e8e8e;
	display: flex;
	align-items: center;
	transition: color 0.2s ease;
}

.rm-nav-footer .rm-nav-social a:hover {
	color: #1463af;
}

.rm-nav-footer .rm-nav-social svg {
	width: 18px;
	height: 18px;
}