/*
Theme Name: El Observador
Theme URI: https://paginasmexico.com
Author: PáginasMX
Description: Tema a la medida de El Observador, periódico regional de Veracruz, Puebla, Hidalgo y Tlaxcala. Hecho por PáginasMX. Editable desde el editor de bloques.
Version: 1.8
Requires at least: 6.5
Tested up to: 7.1
Text Domain: pmx-el-observador
*/

/* Todo va con :where() para especificidad 0: así el cliente puede sobrescribir
   cualquier cosa desde el editor sin pelearse con la hoja del tema. Un
   `.pmx-eo-nota p { margin:0 }` normal se come los márgenes que ponga él. */

/* ---------- Antetítulo (municipio) ---------- */
:where(.pmx-eo-kicker) {
	display: inline-block;
	font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
	font-weight: 700;
	font-size: .74rem;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acento);
	text-decoration: none;
	margin-bottom: .35rem;
}
:where(.pmx-eo-kicker):hover { color: var(--wp--preset--color--primario); }

/* ---------- Cintillo de última hora ---------- */
.pmx-eo-cintillo {
	display: flex; align-items: stretch;
	background: var(--wp--preset--color--primario);
	color: #fff; overflow: hidden;
}
.pmx-eo-cintillo__etiqueta {
	flex: 0 0 auto;
	display: flex; align-items: center; gap: .5rem;
	background: var(--wp--preset--color--acento);
	padding: .55rem 1rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700; font-size: .78rem;
	letter-spacing: .12em; text-transform: uppercase;
	white-space: nowrap;
}
/* El punto que late: dice "esto está vivo" sin escribir la palabra. */
.pmx-eo-cintillo__punto {
	width: 8px; height: 8px; border-radius: 50%;
	background: #fff; animation: pmx-eo-latir 1.4s ease-in-out infinite;
}
@keyframes pmx-eo-latir { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.pmx-eo-cintillo__pista { flex: 1 1 auto; overflow: hidden; position: relative; display: flex; align-items: center; }
.pmx-eo-cintillo__pista .wp-block-query { width: 100%; }
/* Los titulares tienen que ir EN LÍNEA. Como <li> son elementos de lista, sin
   esto se apilaban y el cintillo crecía a lo alto en vez de correr a lo ancho. */
.pmx-eo-cintillo__pista .wp-block-post-template {
	display: flex !important; align-items: center;
	gap: 0; margin: 0; padding: 0; list-style: none;
	width: max-content; flex-wrap: nowrap;
	animation: pmx-eo-correr 45s linear infinite;
}
.pmx-eo-cintillo__pista .wp-block-post-template > li {
	display: inline-flex; align-items: center;
	margin: 0; padding: 0; white-space: nowrap; flex: 0 0 auto;
}
.pmx-eo-cintillo__pista .wp-block-post-template > li > * { margin: 0; }
.pmx-eo-cintillo__pista .wp-block-post-template > li::after {
	content: "\2022"; color: var(--wp--preset--color--acento);
	margin: 0 1.1rem; font-weight: 700;
}
.pmx-eo-cintillo__pista a {
	color: #fff !important; text-decoration: none;
	font-family: 'Roboto Condensed', sans-serif; font-size: .92rem; font-weight: 400;
}
.pmx-eo-cintillo__pista a:hover { color: #fff !important; text-decoration: underline; }
/* Entra por la derecha y sale por la izquierda: con 6 titulares no alcanza a
   dar la vuelta completa, así que un desplazamiento de -50% dejaría un hueco. */
@keyframes pmx-eo-correr { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
.pmx-eo-cintillo:hover .wp-block-post-template { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.pmx-eo-cintillo__pista .wp-block-post-template { animation: none; }
	.pmx-eo-cintillo__punto { animation: none; }
}

/* ---------- Cabecera ---------- */
.pmx-eo-barra-alta {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: .8rem; letter-spacing: .04em;
}
.pmx-eo-marca img { display: block; height: auto; max-height: 78px; width: auto; }
@media (max-width: 781px) { .pmx-eo-marca img { max-height: 52px; } }

/* La navegación de secciones: barra roja, mayúsculas condensadas. */
.pmx-eo-secciones :where(.wp-block-navigation-item__content) {
	color: #fff !important;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700; font-size: .86rem;
	letter-spacing: .07em; text-transform: uppercase;
	text-decoration: none;
	padding: .55rem .1rem;
}
.pmx-eo-secciones :where(.wp-block-navigation-item__content):hover { text-decoration: underline; }
/* Los submenús de municipios: fondo negro, no el blanco de fábrica, para que
   no desaparezcan sobre la barra roja. */
.pmx-eo-secciones .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--primario) !important;
	border: 0 !important; min-width: 220px;
}
.pmx-eo-secciones .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	text-transform: none; letter-spacing: .02em; font-weight: 400; padding: .4rem 1rem;
}

/* ---------- Rejillas de notas ---------- */
:where(.pmx-eo-nota) { border-top: 3px solid var(--wp--preset--color--primario); padding-top: .8rem; }
:where(.pmx-eo-nota) .wp-block-post-title { margin: .1rem 0 .4rem; }
:where(.pmx-eo-nota) .wp-block-post-title a { text-decoration: none; }
:where(.pmx-eo-nota) .wp-block-post-featured-image img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
:where(.pmx-eo-nota) .wp-block-post-excerpt__excerpt { color: var(--wp--preset--color--tenue); font-size: .93rem; }

/* La nota principal: la imagen manda y el titular se le monta encima. */
.pmx-eo-principal .wp-block-post-featured-image img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.pmx-eo-principal .wp-block-post-title { font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.02; }

/* Lista compacta "lo más reciente": sin foto, sólo titular y filete. */
:where(.pmx-eo-lista) .wp-block-post-template > li {
	border-bottom: 1px solid var(--wp--preset--color--humo);
	padding-bottom: .7rem; margin-bottom: .7rem;
}
:where(.pmx-eo-lista) .wp-block-post-template > li:last-child { border-bottom: 0; }
:where(.pmx-eo-lista) .wp-block-post-title { font-size: 1rem; line-height: 1.25; }

/* ---------- Encabezado de sección ---------- */
.pmx-eo-rotulo {
	display: flex; align-items: center; gap: .8rem;
	border-bottom: 3px solid var(--wp--preset--color--primario);
	padding-bottom: .5rem; margin-bottom: 1.4rem;
}
.pmx-eo-rotulo > :where(h2, h3) {
	margin: 0; font-size: 1.35rem; letter-spacing: .02em; text-transform: uppercase;
}
.pmx-eo-rotulo::after {
	content: ""; flex: 1 1 auto; height: 3px;
	background: var(--wp--preset--color--acento);
}

/* ---------- Retícula de puntos: el guiño de imprenta ---------- */
.pmx-eo-trama {
	background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);
	background-size: 7px 7px;
}

/* ---------- Nota completa ---------- */
.pmx-eo-cuerpo :where(p):first-of-type::first-letter {
	font-family: 'Anton', sans-serif;
	font-size: 3.4rem; float: left; line-height: .8;
	padding: 6px 10px 0 0; color: var(--wp--preset--color--acento);
}
.pmx-eo-cuerpo :where(p) { margin-bottom: 1.1rem; }

/* ---------- Tarjetas de sección por estado ---------- */
.pmx-eo-estado { border-top: 4px solid var(--wp--preset--color--acento); padding-top: .9rem; }

/* Un periódico se lee en el teléfono: nada se sale a lo ancho. */
:where(.wp-block-group) > * { min-width: 0; }

/* ---------- Filetes que antes iban como bordes por lado ---------- */
/* Declarar un solo lado hacía que WordPress pintara los otros tres del color
   por defecto: aparecían marcos blancos alrededor de la cita y de la banda. */
:where(.pmx-eo-ficha)  { border-top: 1px solid var(--wp--preset--color--humo); border-bottom: 1px solid var(--wp--preset--color--humo); }
:where(.pmx-eo-piepost){ border-top: 1px solid var(--wp--preset--color--humo); }
:where(.pmx-eo-copy)   { border-top: 1px solid rgba(255,255,255,.12); }
:where(.pmx-eo-cita)   { border-left: 4px solid var(--wp--preset--color--acento); padding-left: 1.4rem; }

/* ---------- Móvil ---------- */
@media (max-width: 781px) {
	.pmx-eo-barra-alta .wp-block-group { gap: .25rem; justify-content: flex-start; }
	.pmx-eo-cintillo__etiqueta { font-size: .7rem; padding: .5rem .7rem; }
	.pmx-eo-principal .wp-block-post-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
	.pmx-eo-rotulo > :where(h2, h3) { font-size: 1.1rem; }
	/* En el teléfono la cabecera se apila: los "21 años" y la cobertura se
	   alinean a la izquierda como el logo, no a la derecha del escritorio. */
	.pmx-eo-marca { text-align: left; }
	header .has-text-align-right { text-align: left !important; }
}

/* ---------- Enlaces sobre fondo negro ---------- */
/* El color de enlace del tema es el negro de la marca: perfecto sobre papel,
   invisible sobre las bandas oscuras (pie de página, Denuncia Ciudadana y el
   recuadro de publicidad). Ahí van en blanco y se subrayan al pasar. */
:where(.pmx-eo-trama, .has-primario-background-color) a:not(.wp-block-button__link):not(.wp-block-navigation-item__content) {
	color: #fff;
	text-decoration: none;
}
:where(.pmx-eo-trama, .has-primario-background-color) a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):hover {
	color: var(--wp--preset--color--acento);
	text-decoration: underline;
}
/* El gris "tenue" también se pierde en negro: se aclara sólo ahí. */
:where(.pmx-eo-trama, .has-primario-background-color) .has-tenue-color { color: #9aa3b0 !important; }

/* ---------- Cortinilla institucional ---------- */
/* El video viene sobre un gris carbón (#1f2422), no sobre el negro de la
   marca: sin difuminar los bordes se ve el rectángulo pegado encima de la
   banda. La máscara lo funde por los cuatro lados. */
.pmx-eo-cortinilla { max-width: 300px; margin: 0 auto; }
.pmx-eo-cortinilla video {
	display: block; width: 100%; height: auto; border-radius: 2px;
	/* Se difuminan sólo los bordes, no el centro: una elipse radial se comía
	   el teléfono, que va casi hasta abajo del cuadro. El video además va
	   ligeramente oscurecido al codificarlo para acercarlo al negro de la banda. */
	-webkit-mask-image:
		linear-gradient(to right,  transparent 0, #000 9%, #000 91%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 6%, #000 96%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right,  transparent 0, #000 9%, #000 91%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 6%, #000 96%, transparent 100%);
	mask-composite: intersect;
}
@media (max-width: 781px) { .pmx-eo-cortinilla { max-width: 230px; } }
/* Si el lector pidió menos animación, se congela en el póster. */
@media (prefers-reduced-motion: reduce) {
	.pmx-eo-cortinilla video { display: none; }
	.pmx-eo-cortinilla { background: center/contain no-repeat; }
}

/* ---------- Costura entre secciones ---------- */
/* Las secciones traen su propio relleno; el margen que el editor pone entre
   bloques hermanos dejaba una raya blanca del fondo entre la cortinilla y
   Denuncia Ciudadana, que son dos bandas negras seguidas. */
main.wp-block-group > .wp-block-group + .wp-block-group { margin-block-start: 0; }

/* El bloque nativo de términos envuelve en su propio contenedor; aquí sólo
   queremos el antetítulo suelto encima del titular. */
:where(.wp-block-post-terms.pmx-eo-kicker) { margin: 0 0 .35rem; }