/*
Theme Name: MVT Noticias
Theme URI: https://mvt.com.mx
Author: Agencia de Noticias MVT
Author URI: https://mvt.com.mx
Description: Tema de bloques (FSE) para Agencia de Noticias MVT, construido desde cero a partir del diseño de Figma "NOTICIAS-MVT".
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mvt-noticias
*/

/* Menú overlay (hamburguesa): la variable --wp--style--root--padding-* no está
   definida en theme.json, así que el padding por defecto de WordPress
   (clamp(1rem, var(...), 20rem)) queda inválido y colapsa a 0. Se fija un
   padding explícito para que el listado y el botón de cerrar no queden
   pegados a los bordes. */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: 32px 40px;
}

.wp-block-navigation__responsive-container-close svg {
	width: 32px;
	height: 32px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	margin-bottom: 4px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 10px 0;
}

/* Barra de categorías del header: por defecto el <ul> de navegación se
   encoge a su contenido y queda apilado a la izquierda, dejando un hueco
   vacío antes del buscador. Se estira para ocupar todo el ancho disponible
   y se reparten los elementos de izquierda a derecha con space-between. */
.mvt-categories-nav {
	flex-grow: 1;
}

.mvt-categories-nav .wp-block-navigation__responsive-container-content,
.mvt-categories-nav .wp-block-navigation__container {
	width: 100%;
}

.mvt-categories-nav .wp-block-navigation__container {
	justify-content: space-between;
}

/* Icono de búsqueda del header: el botón de bloque WordPress trae fondo
   negro por defecto (estilo de botón genérico). Se deja solo el ícono, sin
   fondo ni borde, igual que los demás iconos de la página. */
.mvt-header-search .wp-block-search__button {
	background: none;
	border: none;
	padding: 4px;
	color: #0b1f33;
}

.mvt-header-search .wp-block-search__button svg,
.mvt-overlay-search .wp-block-search__button svg {
	width: 24px;
	height: 24px;
}

/* Un solo menú en teléfono: por debajo de 600px (el propio breakpoint de
   WordPress para el botón de hamburguesa — ver
   wp-includes/blocks/navigation/style.css, ".wp-block-navigation__responsive-
   container-open:not(.always-shown)") la barra de 4 categorías
   (`overlayMenu:"mobile"`) deja de mostrarse en línea y saca su propio botón
   de hamburguesa, quedando dos hamburguesas visibles a la vez junto al menú
   siempre-visible de 14 categorías. Se oculta esa segunda fila completa (la
   barra + su buscador) y las redes sociales de la primera fila; el buscador
   y las redes ya están duplicados dentro del menú de hamburguesa único
   (patterns/header-nav-overlay.php), así que nada se pierde. Por encima de
   600px el diseño original (barra de categorías + buscador + redes visibles)
   no cambia.
   El !important es necesario: ambos elementos son grupos "flex" y WordPress
   inyecta la regla global `body .is-layout-flex{display:flex}` (especificidad
   0,1,1), que le gana a un simple selector de una clase (0,1,0) sin importar
   el orden de las hojas de estilo. */
@media (max-width: 599px) {
	.mvt-header-categories-row,
	.mvt-header-socials {
		display: none !important;
	}
}

/* Logo centrado en teléfono: con las redes sociales ocultas (arriba), la
   fila del logo queda con solo 2 elementos (hamburguesa + logo); en flex con
   `justify-content:space-between` eso empuja el logo al extremo derecho en
   vez de centrarlo. Se cambia a grid de 3 columnas iguales-en-los-extremos
   (1fr auto 1fr) solo en esta fila, con la hamburguesa anclada a la columna
   izquierda y el logo centrado en la columna media — así el logo queda
   centrado respecto al ancho total de la fila, sin importar el ancho real
   del botón de hamburguesa. */
@media (max-width: 599px) {
	.mvt-header-row1 {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.mvt-header-row1 .wp-block-navigation {
		grid-column: 1;
		justify-self: start;
	}

	.mvt-header-row1 .wp-block-site-logo {
		grid-column: 2;
		justify-self: center;
	}

	/* El logo es cuadrado (180x180 fijo, ver wp:site-logo en header.html) —
	   en escritorio se ve proporcionado, pero en teléfono ese mismo ancho
	   fijo hace que la fila del header sea casi tan alta como ancha. Se
	   reduce solo aquí (no se toca el atributo `width` del bloque, que sigue
	   siendo 180 para desktop/tablet) para achicar tanto el ancho como el
	   alto de un solo golpe, ya que es cuadrado. */
	.mvt-header-row1 .wp-block-site-logo img {
		max-width: 100px;
	}
}

/* Menos aire arriba/abajo del logo en teléfono: el padding-top de 16px del
   header (fijo en parts/header.html para todos los anchos) se sentía de más
   una vez que el logo ya se redujo arriba — sin este ajuste el espacio en
   blanco seguía viéndose grande aunque el logo ya fuera más chico. */
@media (max-width: 599px) {
	header.mvt-page-gutter {
		padding-top: 8px;
	}
}

.mvt-overlay-search .wp-block-search__button {
	background: none;
	border: none;
	padding: 4px;
	color: #0b1f33;
}

/* Pie de página: las tres columnas (categorías/visite también/enlaces de
   interés) tienen ancho fijo en px tomado del diseño de Figma (470+178+240px
   más 190px de separación entre ellas = ~1268px mínimo). Ese ancho no cede
   ante pantallas angostas porque es un `width` inline, no un porcentaje, así
   que por debajo de 1320px (el `contentSize` del tema) el contenido ya no
   cabe y produce scroll horizontal en todo el sitio. Se apilan verticalmente
   y a ancho completo por debajo de ese punto de quiebre. */
@media (max-width: 1320px) {
	.mvt-footer-columns {
		flex-direction: column;
		gap: 40px !important;
	}

	.mvt-footer-col--categorias,
	.mvt-footer-col--visite {
		width: 100% !important;
	}
}

/* Dentro de la columna "categorías", el wp:columns interno ya se apila solo
   por debajo de 782px (comportamiento nativo de core/columns), pero conserva
   su blockGap horizontal de 60px entre las dos columnas mientras no están
   apiladas; se reduce en el mismo punto de quiebre que las columnas del pie
   para que no se vea un hueco desproporcionado antes de apilarse. */
@media (max-width: 1320px) and (min-width: 783px) {
	.mvt-footer-col--categorias .wp-block-columns {
		gap: 24px !important;
	}
}

/* Texto solo para lectores de pantalla: usado para los encabezados <h2> de
   secciones del homepage que no tienen una etiqueta visible en el diseño de
   Figma ("Destacados", "Notas extras", "Más noticias") — sin un h2 ahí, la
   jerarquía de encabezados salta de h1 directo a h3 en esas secciones, lo que
   desorienta a quien navega por niveles de encabezado con lector de
   pantalla. El texto existe en el DOM para esa navegación pero no ocupa
   espacio visual ni cambia el diseño. */
.mvt-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Márgenes laterales de página en móvil/tablet: el `<header>`, el `<main>` de
   cada plantilla y el `<footer>` usan layout "constrained" (max-width via
   contentSize) pero ninguno tiene padding lateral propio — el aire visible a
   los costados en escritorio es solo el espacio fuera de esa caja de 1320px,
   no un padding real. Por debajo de 1320px la caja ocupa el 100% del
   viewport y el contenido queda pegado a los bordes de la pantalla. Se le da
   un padding lateral explícito a los tres contenedores raíz (clase
   `mvt-page-gutter`, agregada en `parts/header.html`, cada `templates/*.html`
   y `parts/footer.html`) solo por debajo de ese punto de quiebre, para no
   alterar el diseño de escritorio. */
@media (max-width: 1320px) {
	.mvt-page-gutter {
		padding-left: 40px;
		padding-right: 40px;
	}
}

@media (max-width: 600px) {
	.mvt-page-gutter {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Paginación de archivo/búsqueda (`core/query-pagination`, usado en
   archive.html y search.html): por defecto WordPress la renderiza como
   texto plano sin ningún estilo — se homologa aquí al lenguaje visual del
   resto del sitio: navy (#0b1f33) para lo interactivo, mayúsculas +
   letter-spacing en "Publicaciones pasadas/nuevas" igual que la barra de
   categorías del header, y un divisor superior de 1px en #c0c0c0 igual al
   que ya separa las dos filas del header. Se estilan las clases nativas de
   WordPress (`.page-numbers`, `.wp-block-query-pagination-next`, etc.)
   directamente — sin agregar ninguna clase nueva al bloque — porque son
   exclusivas de este bloque en todo el tema. */
.wp-block-query-pagination {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid #c0c0c0;
	row-gap: 16px;
	column-gap: 8px;
	flex-wrap: wrap;
}

.wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.page-numbers:not(.dots) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid #c0c0c0;
	color: #0b1f33;
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

a.page-numbers:not(.dots):hover {
	background-color: #0b1f33;
	border-color: #0b1f33;
	color: #ffffff;
}

.page-numbers.current {
	background-color: #0b1f33;
	border-color: #0b1f33;
	color: #ffffff;
}

.page-numbers.dots {
	color: #8e8e8e;
	padding: 0 2px;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	font-family: var(--wp--preset--font-family--ui);
	text-transform: uppercase;
	letter-spacing: 1.92px;
	font-weight: 600;
	color: #0b1f33;
	text-decoration: none;
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	text-decoration: underline;
}

/* Desplazamiento horizontal en notas individuales, causado por contenido
   histórico del artículo — no por la plantilla. Encontrado en un caso real:
   un `<iframe>` de Facebook pegado directamente en el cuerpo de la nota (el
   código que da el propio botón "Insertar publicación" de Facebook) trae
   `width="500"` fijo en el HTML, que en un viewport angosto se sale del
   contenedor y arrastra a toda la página con él. `add_theme_support(
   'responsive-embeds')` en functions.php NO alcanza este caso porque solo
   envuelve los bloques `wp:embed`/oEmbed de WordPress — un `<iframe>` pegado
   a mano en el editor clásico nunca pasa por ahí.
   Con más de 58,000 notas publicadas a lo largo de una década, no es viable
   auditar una por una en busca de HTML pegado con anchos fijos (iframes,
   tablas, `<pre>`, etc.) — así que además de acotar el ancho del iframe en
   sí, se agrega `overflow-x: auto` al contenedor del contenido como red de
   seguridad: cualquier elemento futuro que aparezca más ancho que la
   columna queda con su propio scroll horizontal contenido ADENTRO del
   artículo, en vez de desplazar la página completa. */
.wp-block-post-content {
	overflow-x: auto;
}

.wp-block-post-content iframe {
	max-width: 100%;
}

/* Mismo problema, otro patrón: el shortcode `[caption]` del editor clásico
   (anterior a bloques) genera `<figure class="wp-caption" style="width:
   XXXpx">` con el ancho fijo de la imagen original en px — un patrón muy
   común en una década de notas, no un caso aislado como el iframe de arriba.
   El `!important` es necesario porque ese ancho viene como `style=""` en el
   propio HTML de la nota (inline), que ninguna regla normal de una hoja de
   estilos externa puede vencer. */
.wp-block-post-content .wp-caption {
	max-width: 100% !important;
	width: auto !important;
}

.wp-block-post-content .wp-caption img {
	max-width: 100%;
	height: auto;
}

/* Bloque publicitario de 5 banners (patterns/gam-banner-block.php), migrado
   de V-3-PWA-Macave's ".advertising-three" — la fila central de 3 anuncios
   300x250 en grid, apilada a 1 columna por debajo de 990px (el mismo punto
   de quiebre que usaba el tema legado, conservado a propósito en vez de
   reusar los breakpoints de este tema para que la migración sea 1:1). Los
   dos banners 970x90 (arriba/abajo) ya se centran solos vía margin:auto en
   su propio style= inline, sin necesitar una regla aparte aquí. */
.mvt-gam-banner-three {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px;
	margin-bottom: 40px;
}

@media (max-width: 990px) {
	.mvt-gam-banner-three {
		grid-template-columns: 1fr;
	}
}

/* Los dos banners 970x90 (arriba/abajo del bloque de 5) no caben de forma
   útil en teléfono — a 390px de ancho un creativo pensado para 970px queda
   irreconocible aunque `max-width:100%` lo encoja. Se ocultan por completo
   por debajo del mismo punto de quiebre "móvil" del resto del tema (599px).
   El `!important` es necesario en la variante placeholder (entorno local),
   que usa layout flex — WordPress inyecta `body .is-layout-flex{display:flex}`
   (especificidad 0,1,1), que gana sobre un selector de una sola clase; no
   hace falta en la variante de anuncio real (un `<div>` sin layout de bloque)
   pero se deja igual por consistencia y porque no estorba.
   El lado de GPT (mvt_noticias_gam_script() en functions.php) tiene su propio
   sizeMapping para estos mismos dos slots, para que tampoco se solicite el
   anuncio por debajo de 600px — no basta con ocultarlo visualmente. */
@media (max-width: 599px) {
	.mvt-gam-banner-970 {
		display: none !important;
	}
}

/* Banner de single.html visible solo en teléfono, debajo de la imagen
   principal — oculto en escritorio y tablet, donde no se muestra en ningún
   otro lado (no es un duplicado de los banners del lateral: ese es un
   espacio publicitario distinto, con su propio slot de Google Ad Manager).
   Mismo punto de quiebre "móvil" que el resto del tema (599px, ver
   .mvt-header-categories-row más arriba). El `!important` es necesario en
   ambas reglas porque el bloque usa layout flex y WordPress inyecta
   `body .is-layout-flex{display:flex}` (especificidad 0,1,1), que le gana
   a un selector de una sola clase sin importar el orden de las hojas de
   estilo. */
.mvt-mobile-only-banner {
	display: none !important;
}

@media (max-width: 599px) {
	.mvt-mobile-only-banner {
		display: flex !important;
	}
}

/* Banners del sidebar de single.html: cada caja mide 300px con
   max-width:100%, pero la columna que los contiene (34% de ancho en
   escritorio, 100% del viewport en móvil una vez que `wp:columns` se
   apila) casi siempre es más ancha que 300px — sin alinear el eje
   transversal del flex vertical, el sobrante de espacio queda a la derecha
   y las cajas se ven pegadas a la izquierda. `align-items:center` las
   centra dentro de la columna en cualquier ancho. */
.mvt-sidebar-banners {
	align-items: center;
}