/**
 * Header / Footer — reykjavik-child
 *
 * Port de los estilos de cabecera de flat-shop-lite-child/style.css
 * (#headerGOBMX, #logosCE, #menu-principal-infonomia, .phone) y de la
 * barra de navegación de flat-shop-lite-child/header.php, sin depender
 * de Bootstrap: las reglas de layout que Bootstrap aportaba (grid, flex,
 * columnas) están resueltas aquí.
 *
 * Contraste (WCAG AA):
 *  - #f0efef sobre #611232 (barra GOBMX): 11.3:1
 *  - #666 sobre #e6e6e6 (menú): 4.6:1
 *  - #a85400 sobre #fff / #e6e6e6: 5.6:1 / 4.8:1
 *  - #fff sobre #611232 (pie GOBMX): 12.9:1
 *  - #fff sobre #212120 (cinta "ECOSUR, México."): 16.7:1
 *
 * @package Reykjavik_Child
 */

/*======= Banda GOBMX (barra Gobierno de México) =======*/

#headerGOBMX {
	display: block;
	height: 45px;
	margin: 0;
	/* Color real del widget GOBMX en producción (plugin
	   plugin-wordpress-datos-ecosur/widgets/headerGOBMX/css/style.css). */
	background-color: #611232;
}

#headerGOBMX > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

#headerGOBMX .nav-logo,
#headerGOBMX .hl-gobmx__logo {
	display: flex;
	align-items: center;
	padding-left: 64px;
}

#headerGOBMX .nav-logo > a,
#headerGOBMX .hl-gobmx__logo > a {
	display: flex;
	align-items: center;
}

#headerGOBMX img.logoGOBmx {
	display: block;
	height: 30px;
	width: auto;
	max-width: none;
}

#headerGOBMX .nav-ligas,
#headerGOBMX .hl-gobmx__ligas {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 48px;
	margin-top: 5px;
	text-align: right;
}

#headerGOBMX .nav-ligas > a.link-gobMX,
#headerGOBMX .hl-gobmx__ligas > a.link-gobMX {
	display: inline-flex;
	align-items: center;
	/* Equivale al padding de .nav-link de Bootstrap (0.5rem 1rem), que en
	   producción separa los enlaces; sin él, los enlaces salen pegados. */
	margin: auto -5px;
	padding: 8px 16px;
	color: #f0efef; /* Sobre #611232: 11.3:1 (WCAG AA) */
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 1.3px;
	text-decoration: none;
}

#headerGOBMX a.link-gobMX:hover,
#headerGOBMX a.link-gobMX:focus {
	color: #fff;
	text-decoration: underline;
}

#headerGOBMX .link-gobMX--busqueda svg {
	display: block;
}

@media (max-width: 499px) {
	#headerGOBMX .nav-logo,
	#headerGOBMX .hl-gobmx__logo {
		padding-left: calc(23vw - 51px);
	}
	#headerGOBMX .nav-ligas,
	#headerGOBMX .hl-gobmx__ligas {
		padding-right: calc(16.5vw - 34.5px);
	}
	#headerGOBMX .nav-ligas > a.link-gobMX,
	#headerGOBMX .hl-gobmx__ligas > a.link-gobMX {
		margin: auto calc(3vw - 20px);
	}
}

/*======= Banda de logos (CONACYT / ECOSUR + nombre institucional) =======*/

.hl-logos-wrap {
	margin: 0;
	padding: 0 15px; /* Equivale al .container-fluid de producción. */
	background-color: #fff;
}

#logosCE {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 116px;
	margin: 0 -15px; /* Equivale al .row de producción. */
	overflow: hidden; /* Evita scroll horizontal si el nombre es ancho. */
	background-color: #fff;
}

#logosCE a {
	display: contents;
}

#logosCE .imagenes-logos,
.hl-logos__img {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 100%;
}

#logosCE img {
	max-height: 65px;
	width: auto;
	padding-right: 18px;
}

#logosCE h1,
#logosCE .hl-logos__titulo p {
	margin: 0 0 0 1vw;
	color: #a85400; /* Sobre #fff: 5.6:1 (WCAG AA) */
	font-size: clamp(11px, 1.55vw, 38px);
	font-weight: 400;
	letter-spacing: 0.12em;
	font-variant: small-caps;
	transform: scale(1.01, 0.6); /* Aplana el texto, como en flat-shop-lite-child. */
	white-space: nowrap;
}

/* ≥992px: en producción el nombre es "d-lg-block" — la imagen queda a la
   izquierda y el nombre ocupa la columna restante. */
@media (min-width: 992px) {
	#logosCE {
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
	#logosCE .imagenes-logos,
	.hl-logos__img {
		flex: 0 0 auto;
		justify-content: flex-end;
		padding-left: 15px;
	}
	#logosCE .hl-logos__titulo {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* ≥1700px: como col-xl-4 en producción — la imagen se alinea al final de
   su tercio de ancho (margen izquierdo de ~70px, como la referencia). */
@media (min-width: 1700px) {
	#logosCE .imagenes-logos,
	.hl-logos__img {
		flex: 0 0 33.333%;
	}
	#logosCE h1,
	#logosCE .hl-logos__titulo p {
		margin-left: 1.8vw;
		font-size: calc(3vw + 6px);
		letter-spacing: 6px;
	}
}

/* <992px: solo la imagen centrada; el nombre queda oculto (como en
   producción, con "d-none d-lg-block"). */
@media (max-width: 991px) {
	#logosCE .hl-logos__titulo {
		display: none;
	}
	#logosCE img {
		max-width: calc(100vw - 24px);
		height: auto;
		padding-right: 0;
	}
}

/*======= #menu-principal-infonomia (widget migrado, si existiera) =======*/

#menu-principal-infonomia {
	height: 72px;
	background-color: #e6e6e6;
}

#menu-principal-infonomia .menu-items li a {
	color: #666;
}

@media (max-width: 1500px) and (min-width: 960px) {
	#menu-principal-infonomia {
		height: calc(2.5vw + 33px);
	}
	#menu-principal-infonomia .menu-items li>a {
		font-size: calc(1.1vw + 1.5px);
	}
}

@media (max-width: 959px) {
	#menu-principal-infonomia {
		height: calc(1vw + 74px);
	}
}

/*======= Encabezado propio =======*/

/* Neutralizar estilos de cabecera heredados del tema padre. */
#masthead.hl-header {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/*======= Barra de navegación gris =======*/

.hl-nav {
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: #e6e6e6;
	border-bottom: 1px solid #d6d6d6;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.hl-nav__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 1170px;
	min-height: 72px;
	margin: 0 auto;
	padding: 8px 15px;
}

.hl-nav__brand {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.hl-nav__brand img {
	display: block;
	width: auto;
	object-fit: contain;
}

.hl-nav__brand--phone img {
	max-height: 54px;
}

.hl-nav__brand:not(.hl-nav__brand--phone) img {
	max-height: 46px;
	padding: 4px 0;
}

.hl-nav__collapse {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.hl-nav__collapse ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hl-nav__list li,
.hl-nav__collapse .menu > ul li {
	position: relative;
}

.hl-nav__list a,
.hl-nav__collapse .menu > ul a {
	display: block;
	padding: 10px 14px;
	color: #666; /* Sobre #e6e6e6: 4.6:1 (WCAG AA) */
	font-size: 16px;
	line-height: 1.3;
	text-decoration: none;
}

.hl-nav__list a:hover,
.hl-nav__list a:focus,
.hl-nav__collapse .menu > ul a:hover,
.hl-nav__collapse .menu > ul a:focus {
	color: #a85400;
	background-color: #f0efef;
}

.hl-nav__list .current-menu-item > a,
.hl-nav__list .current_page_item > a,
.hl-nav__collapse .menu > ul .current-menu-item > a {
	color: #a85400;
	font-weight: 600;
}

/* Submenús (nivel 2) */
.hl-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	flex-direction: column;
	gap: 0;
	min-width: 230px;
	background-color: #fff;
	border: 1px solid #d6d6d6;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.hl-nav__list li:hover > .sub-menu,
.hl-nav__list li:focus-within > .sub-menu {
	display: flex;
}

.hl-nav__list .sub-menu li {
	width: 100%;
}

.hl-nav__list .sub-menu a {
	white-space: nowrap;
	color: #444;
	border-bottom: 1px solid #eee;
}

.hl-nav__list .sub-menu li:last-child a {
	border-bottom: 0;
}

/* Carrito de compras */
.hl-nav__cart {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #666;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
}

.hl-nav__cart img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.hl-nav__cart:hover,
.hl-nav__cart:focus {
	color: #a85400;
}

/* Botón de menú (móvil) */
.hl-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background-color: #fff;
	border: 1px solid #b0b0b0;
	border-radius: 4px;
	cursor: pointer;
}

.hl-nav__toggle:hover,
.hl-nav__toggle:focus {
	background-color: #f0efef;
}

.hl-nav__burger {
	position: relative;
	display: block;
	width: 22px;
	height: 2px;
	background-color: #333;
}

.hl-nav__burger::before,
.hl-nav__burger::after {
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background-color: #333;
	content: "";
}

.hl-nav__burger::before {
	top: -7px;
}

.hl-nav__burger::after {
	top: 7px;
}

/* El logo ECOSUR se oculta en pantallas pequeñas (como en el tema original). */
@media (max-width: 758px) {
	.phone {
		display: none !important;
	}
}

/* Navegación en móvil */
@media (max-width: 879px) {
	.hl-nav__toggle {
		display: inline-flex;
	}

	.hl-nav__inner {
		gap: 10px;
		padding: 8px 12px;
	}

	.hl-nav__collapse {
		display: none;
		flex: 0 0 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-left: 0;
		padding-top: 6px;
		border-top: 1px solid #d6d6d6;
	}

	.hl-nav__collapse.is-open {
		display: flex;
	}

	.hl-nav__collapse ul {
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	.hl-nav__list a,
	.hl-nav__collapse .menu > ul a {
		padding: 13px 10px;
		border-top: 1px solid #d6d6d6;
	}

	.hl-nav__list .sub-menu {
		position: static;
		display: flex;
		min-width: 0;
		background-color: #f4f4f4;
		border: 0;
		box-shadow: none;
	}

	.hl-nav__cart {
		padding: 13px 10px;
		border-top: 1px solid #d6d6d6;
	}
}

/* Sin JavaScript: el menú permanece visible en móvil. */
html.no-js .hl-nav__toggle {
	display: none;
}

html.no-js .hl-nav__collapse {
	display: flex;
}

/*======= Sidebar superior del contenido (#sidebar-head) =======*/

.hl-content-head {
	max-width: 1170px;
	margin: 0 auto;
	padding: 20px 15px 0;
}

.hl-content-head ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*======= Pie: widgets institucionales (.area-de-widget) =======*/

/*
 * Los widgets migrados del sitio original (banda "ECOSUR, México.", bloque
 * GOBMX "Gobierno de México" y pleca) traen su propio <style> e incluyen
 * clases de Bootstrap (container, row, col-sm-3, col-12). En producción
 * Bootstrap está cargado; aquí no, para no afectar al resto del tema.
 * Se replica por tanto el subconjunto de grid necesario, limitado a los
 * widgets, y los estilos propios del bloque GOBMX como respaldo (con los
 * mismos valores que el <style> del widget, por si no se conserva al
 * editarlo).
 */

/* La foto decorativa del pie de Reykjavik es un ::before absoluto que se
   pinta POR ENCIMA de los widgets: se desactiva (producción no la tiene). */
#colophon::before {
	content: none;
}

/* Los widgets siempre quedan sobre el fondo del tema. */
.area-de-widget {
	position: relative;
	z-index: 1;
}

/* Contenedores (equivalente a Bootstrap). */
.area-de-widget .container,
.area-de-widget .container-fluid {
	width: 100%;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
}

@media (min-width: 576px) {
	.area-de-widget .container {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.area-de-widget .container {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.area-de-widget .container {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.area-de-widget .container {
		max-width: 1140px;
	}
}

/* Filas y columnas. */
.area-de-widget .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}

.area-de-widget .row > [class*="col"] {
	box-sizing: border-box;
	min-height: 1px;
	padding: 0 15px;
}

.area-de-widget .row > .col {
	flex: 1 0 0%;
}

.area-de-widget .col-12 {
	flex: 0 0 100%;
	max-width: 100%;
}

.area-de-widget .col-sm-3 {
	flex: 0 0 100%;
	max-width: 100%;
}

@media (min-width: 576px) {
	.area-de-widget .col-sm-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}
}

/* Bloque GOBMX: estilos propios del widget (idénticos a su <style>). */
#colophon .area-de-widget .main-footer {
	background-color: #611232;
	min-height: 56px;
	color: #fff;
	padding: 0;
	text-align: left;
	font-weight: 300;
}

#colophon .area-de-widget .main-footer .list-info {
	color: #fff;
	padding: 30px 10px 10px;
}

#colophon .area-de-widget .main-footer .list-info h5 {
	/*
	 * Reykjavik declara color en TODOS los h1–h6 (headings/_base.scss con
	 * var(--color_content_headings)), lo que rompe la herencia de #fff de
	 * .main-footer y dejaba los títulos ("¿Qué es gob.mx?", "Enlaces"…)
	 * en gris. Producción los muestra en blanco: se fija explícitamente.
	 */
	color: #fff;
	font-weight: 300;
	margin-bottom: 20px;
}

#colophon .area-de-widget .main-footer .list-info a,
#colophon .area-de-widget .main-footer .list-info a.link-email {
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

#colophon .area-de-widget .main-footer .list-info p {
	margin-bottom: 15px;
}

#colophon .area-de-widget .main-footer .list-info ul {
	margin: 0 0 60px;
	padding: 0;
}

#colophon .area-de-widget .main-footer .list-info ul li {
	list-style-type: none;
	margin: 0 0 2px;
	padding: 0;
	line-height: 110%;
}

/*
 * Iconos sociales ("Síguenos en": Facebook/Twitter/Instagram/Youtube).
 * El widget usa ul.list-inline, que sin Bootstrap se renderiza en
 * vertical. Equivalente exacto de Bootstrap 3 (flat-shop-lite), que es
 * lo que carga producción, limitado a los widgets del pie.
 */
.area-de-widget ul.list-inline {
	padding-left: 0;
	margin-left: -5px;
	list-style: none;
}

.area-de-widget ul.list-inline > li {
	display: inline-block;
	padding-right: 5px;
	padding-left: 5px;
}

#colophon .area-de-widget .main-footer .row > div {
	margin-bottom: 15px;
}

#colophon .area-de-widget .main-footer p {
	margin: 0;
	font-size: 14px;
	line-height: 136%;
	height: auto;
	position: static;
}

@media (min-width: 768px) {
	#colophon .area-de-widget .main-footer .row > div {
		margin-bottom: 0;
	}
}

/* Banda "ECOSUR, México." sobre el bloque GOBMX. */
#colophon #footer-derechos-reservados {
	background-color: #212120;
}

#colophon #footer-derechos-reservados > .cinta-derechos {
	text-align: center;
	color: #fff;
	padding: 15px 15px 1px;
	font-size: 20px;
}

/* Pleca institucional inferior. */
#colophon .area-de-widget .footer-pleca {
	background-color: #fff;
	background-image: url( https://framework-gb.cdn.gob.mx/gobmx/img/pleca.svg );
	background-repeat: repeat-x;
	background-size: cover;
}