/*
Theme Name:        OP Child
Theme URI:         https://orgullosamentepaisa.com
Description:       Tema hijo de Orgullosamente Paisa (OP). Tokens en op-brand-tokens.css. Nunca hardcodear colores aquí.
Author:            Orgullosamente Paisa
Author URI:        https://orgullosamentepaisa.com
Template:          jannah
Version:           0.3.6
Requires at least: 6.4
Requires PHP:      8.1
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       op-child
*/

/*
 * Overrides de Jannah con la marca OP (derivado de ecn-child 0.9.3).
 * Selectores verificados contra el código fuente de Jannah 7.6.5
 * (ver docs/03-reconocimiento-jannah.md). Cero hexadecimales: solo tokens.
 * Sin !important: donde el CSS generado por Theme Options (prioridad 1001)
 * pisaría un override, se sube ESPECIFICIDAD, no prioridad.
 */

/* ---- Variables propias de Jannah, redefinidas con tokens OP ----
 * Jannah pinta marca, navegación y botones desde estas custom properties
 * (assets/css/base.css y style.css del padre). Redefinirlas cubre la mayor
 * parte de la identidad sin tocar plantillas.
 * Se declaran también en body: el CSS que genera Theme Options (prioridad
 * 1001) vuelve a definirlas en :root DESPUÉS de este archivo; una
 * declaración en body gana sobre la heredada de :root sin !important. */
:root,
body {
	--brand-color: var(--op-acento);
	--dark-brand-color: color-mix(in srgb, var(--op-acento) 82%, var(--op-negro));
	--base-color: var(--op-negro);
	--bright-color: var(--op-blanco);

	/* Navegación principal: verde bosque, texto blanco, ítem activo verde bandera.
	 * Es lo que hace que OP no se confunda con ECN (nav blanca, acento rojo). */
	--main-nav-background: var(--op-oscuro);
	--main-nav-text-color: var(--op-blanco);
	--main-nav-primary-color: var(--op-acento);
	--main-nav-contrast-primary-color: var(--op-blanco);
	--main-nav-main-border-color: var(--op-oscuro);
	--main-nav-secondry-background: var(--op-blanco);
	--main-nav-secondry-text-color: var(--op-negro);
	--main-nav-secondry-border-color: var(--op-gris-borde);

	/* C6 — Botones: verde bandera, esquinas redondeadas */
	--tie-buttons-color: var(--op-acento);
	--tie-buttons-text: var(--op-blanco);
	--tie-buttons-hover-color: var(--op-oscuro);
	--tie-buttons-hover-text: var(--op-blanco);
	--tie-buttons-border-color: var(--op-acento);
	--tie-buttons-radius: var(--op-radio-borde);
}

/* ---- C1 — Etiqueta de categoría: TODAS en verde bandera ----
 * Decisión de diseño (docs/01-sistema-visual.md): un solo acento lee más
 * autoritario. Jannah emite .post-cat.tie-cat-{id} y el CSS generado por
 * Theme Options le pone color por categoría DESPUÉS de este archivo; el
 * selector doble clase + atributo gana por especificidad, sin !important. */
.post-cat,
.post-cat.post-cat[class*="tie-cat-"] {
	background-color: var(--op-acento);
	color: var(--op-blanco);
	text-transform: uppercase;
	font-family: var(--op-font-titular);
	font-variation-settings: 'wght' 700, 'wdth' 85;
	letter-spacing: 0.04em;
	border-radius: var(--op-radio-borde-sm);
}

/* ---- C6 — Botón: refuerzo sobre la clase base de Jannah ---- */
.button {
	border-radius: var(--op-radio-borde-sm);
}

/* ---- Tipografía: asignación por rol (docs/04-tipografia.md) ----
 * Outfit para titulares (geométrica, ancha) y Archivo para cuerpo.
 * Los 'wdth' heredados no afectan a Outfit (no tiene ese eje). */

/* Titular de nota y titulares generales: 700 / 85 */
.post-title,
.entry-title,
h2, h3, h4 {
	font-family: var(--op-font-titular);
	font-variation-settings: 'wght' 700, 'wdth' 85;
	color: var(--op-negro);
}

/* Titular principal (portada y single): Outfit 800 (Outfit ignora wdth) */
h1,
h1.post-title,
h1.entry-title {
	font-family: var(--op-font-titular);
	font-variation-settings: 'wght' var(--op-titular-wght), 'wdth' var(--op-titular-wdth);
	color: var(--op-negro);
}

/* Cuerpo de nota y sumarios: 400 / 100 (ancho normal) */
body,
.entry,
p {
	font-family: var(--op-font-cuerpo);
	font-variation-settings: 'wght' 400, 'wdth' 100;
}

/* ---- Ítems especiales del menú principal ----
 * Se activan con clases CSS puestas en el ítem del menú (wp-admin o REST):
 *   .op-menu-en-vivo    → "Radio": punto verde pulsante al lado (C5)
 *   .op-menu-suscribete → "Suscríbete": botón amarillo silletero redondeado (C6) */
.op-menu-en-vivo > a::after {
	content: 'EN VIVO';
	color: var(--op-destacado);
	font-size: var(--op-fs-xs);
	font-variation-settings: 'wght' 700, 'wdth' 85;
	letter-spacing: 0.06em;
	margin-inline-start: var(--op-sp-2);
}

.op-menu-en-vivo > a::before {
	content: '';
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--op-acento);
	margin-inline-end: var(--op-sp-1);
	vertical-align: middle;
	animation: op-pulso 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.op-menu-en-vivo > a::before {
		animation: none;
	}
}

.op-menu-suscribete > a {
	background: var(--op-destacado);
	color: var(--op-negro);
	border-radius: var(--op-radio-borde-sm);
	padding: var(--op-sp-2) var(--op-sp-4);
	font-variation-settings: 'wght' 700, 'wdth' 85;
}

.op-menu-suscribete > a:hover {
	background: var(--op-blanco);
	color: var(--op-oscuro);
}

/* ---- Barra "Última hora": amarillo silletero sobre verde bosque ---- */
.breaking-title {
	background: var(--op-destacado);
	color: var(--op-negro);
}

/* ---- Pie: verde bosque en vez del negro de Jannah ---- */
#footer,
.site-footer,
#footer .footer-widget-area,
.site-footer .footer-widget-area,
.site-footer .footer-bottom {
	background-color: var(--op-oscuro);
}

/* ---- Sumarios y texto secundario en Gris Prensa (400 / 100) ---- */
.post-excerpt,
.entry-sub-title {
	color: var(--op-gris);
}

/* ---- Metadatos, fechas, autoría: 500 / 100 ---- */
.post-meta {
	color: var(--op-gris);
	font-variation-settings: 'wght' 500, 'wdth' 100;
}

/* ---- Contraste en superficies oscuras (footer, dark-skin) -------------
 * La regla de titulares de arriba pinta h2/h3/h4 en Negro Editorial. En el
 * pie (Jannah le pone .dark-skin.dark-widgetized-area) eso deja los
 * encabezados de columna casi invisibles: negro sobre fondo oscuro, muy por
 * debajo del contraste mínimo de WCAG AA.
 *
 * Se corrige subiendo especificidad (clase + elemento gana a elemento
 * suelto), no con !important. */
.dark-skin h1,
.dark-skin h2,
.dark-skin h3,
.dark-skin h4,
.dark-skin h5,
.dark-skin h6,
.dark-skin .widget-title,
.dark-widgetized-area h1,
.dark-widgetized-area h2,
.dark-widgetized-area h3,
.dark-widgetized-area h4,
.dark-widgetized-area .wp-block-heading {
	color: var(--op-blanco);
}

/* ---- Portada: sin título de página ------------------------------------
 * La página se llama "Portada" en el escritorio (para poder encontrarla),
 * pero un medio no rotula su propia portada: el H2 "Portada" sobre la nota
 * de apertura resta jerarquía a la apertura misma. */
body.home .entry-header-outer {
	display: none;
}

/* La portada no necesita la caja blanca con sombra alrededor del contenido:
 * las tarjetas ya tienen su propia estructura. */
body.home .main-content > article.container-wrapper {
	background: transparent;
	box-shadow: none;
	padding-inline: 0;
}

/* ---- Enlaces del contenido: verde solo como acento ---------------------
 * En .entry-content Jannah pinta todos los enlaces con --brand-color. En un
 * titular eso lo convierte en un enlace más y aplana la jerarquía. El verde
 * se reserva para enlaces dentro de párrafos; los titulares los gobierna
 * op-bloques.css. */
.entry-content p a {
	color: var(--op-acento);
}

.entry-content p a:hover {
	color: var(--op-negro);
}


/* =====================================================================
 * Cabecera OP (Jannah header layout 2: logo centrado + navegación)
 * Referentes: Axios / Semafor (barra corta + franja de temas), Vox (logo
 * fuerte centrado), Bloomberg Línea (sobriedad). Nada de la cabecera de
 * ECN (layout 3, nav blanca, ítems en mayúsculas con subrayado).
 * ================================================================== */

/* Logo de texto: Outfit 900, verde bandera, tracking cerrado */
#logo,
#logo a,
.logo-text,
#logo .logo-text {
	font-family: var(--op-font-titular);
	font-variation-settings: 'wght' 900;
	letter-spacing: -0.03em;
	color: var(--op-acento);
}

.logo-row {
	padding-block: var(--op-sp-4);
}

/* Navegación: ítems en caja de píldora, sin subrayado, sentence case */
.main-nav .main-menu > ul > li > a,
#main-nav .main-menu > ul > li > a {
	text-transform: none;
	font-family: var(--op-font-titular);
	font-variation-settings: 'wght' 600;
	font-size: var(--op-fs-base);
	letter-spacing: 0;
	border-radius: 999px;
	padding-inline: var(--op-sp-4);
	line-height: 2.4;
	margin-block: var(--op-sp-2);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.main-nav .main-menu > ul > li > a:hover,
.main-nav .main-menu > ul > li.current-menu-item > a,
.main-nav .main-menu > ul > li.current-menu-ancestor > a,
.main-nav .main-menu > ul > li.menu-item-has-children:hover > a {
	background: rgba(255, 255, 255, 0.12);
	color: var(--op-blanco);
}

/* Jannah pinta un filete de color bajo el ítem activo: fuera */
.main-nav .main-menu > ul > li > a::after,
.main-nav .main-menu > ul > li > a::before,
.main-nav .main-menu .menu-sub-content li a::before {
	display: none;
}

/* Bordes de la barra: ninguno (main_nav_border_top/bottom quedan en false) */
#main-nav {
	border: 0;
}

/* Submenús y mega menú: esquinas redondeadas, sombra suave, tipografía OP */
.main-nav .menu-sub-content,
.main-nav .mega-menu-block {
	border-radius: var(--op-radio-borde);
	box-shadow: 0 12px 32px rgba(11, 61, 34, 0.18);
	border: 1px solid var(--op-gris-borde);
	overflow: hidden;
}

.main-nav .menu-sub-content li a {
	font-family: var(--op-font-cuerpo);
	font-variation-settings: 'wght' 500, 'wdth' 100;
	text-transform: none;
}

/* Suscríbete: píldora amarilla, siempre visible aunque el resto se apague */
.op-menu-suscribete > a {
	border-radius: 999px;
	padding-inline: var(--op-sp-5);
	line-height: 2.4;
}

/* Buscador de la barra: campo redondeado */
.main-nav .search-bar,
.main-nav #search-input,
.main-nav .search-bar input {
	border-radius: 999px;
}

/* ---- Franja de temas (chips) bajo la navegación ---- */
.op-temas-wrap {
	background: var(--op-gris-superficie);
	border-bottom: 1px solid var(--op-gris-borde);
}

.op-temas {
	display: flex;
	align-items: center;
	gap: var(--op-sp-2);
	padding-block: var(--op-sp-2);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.op-temas::-webkit-scrollbar {
	display: none;
}

.op-temas__rotulo {
	flex: 0 0 auto;
	font-family: var(--op-font-titular);
	font-variation-settings: 'wght' 700;
	font-size: var(--op-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--op-acento);
	margin-inline-end: var(--op-sp-2);
}

.op-tema {
	flex: 0 0 auto;
	font-family: var(--op-font-cuerpo);
	font-variation-settings: 'wght' 500, 'wdth' 100;
	font-size: var(--op-fs-sm);
	color: var(--op-negro);
	background: var(--op-blanco);
	border: 1px solid var(--op-gris-borde);
	border-radius: 999px;
	padding: var(--op-sp-1) var(--op-sp-3);
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.op-tema:hover {
	background: var(--op-acento);
	border-color: var(--op-acento);
	color: var(--op-blanco);
}

/* ---- Barra superior: fecha + Última hora, discreta ---- */
#top-nav {
	background: var(--op-blanco);
	border-bottom: 1px solid var(--op-gris-borde);
}

.breaking-title {
	border-radius: 999px;
	padding-inline: var(--op-sp-3);
}

/* ---- Cabecera pegajosa: compacta ---- */
.header-layout-2 #main-nav.sticky-nav-active .main-menu > ul > li > a,
#main-nav.sticky-nav-active .main-menu > ul > li > a {
	line-height: 2.2;
	margin-block: var(--op-sp-1);
}

/* ---- Menú móvil: verde bosque, ítems grandes ---- */
#mobile-menu-container,
.side-aside.dark-skin {
	background: var(--op-oscuro);
}

#mobile-menu li a {
	font-family: var(--op-font-titular);
	font-variation-settings: 'wght' 600;
	text-transform: none;
	font-size: var(--op-fs-md);
}


/* ---- Correcciones tras la primera captura (0.3.1) ----
 * Jannah pinta la barra con su skin oscuro y el rótulo de "Última hora" con
 * el color de marca desde el CSS generado por Theme Options (prioridad 1001).
 * Se gana por especificidad (id + clase), nunca con !important. */
#main-nav,
#main-nav.main-nav-dark,
#theme-header #main-nav,
#theme-header .main-nav-dark {
	background-color: var(--op-oscuro);
}

#top-nav .breaking-title,
#theme-header .breaking-title,
#theme-header .breaking .breaking-title {
	background-color: var(--op-destacado);
	color: var(--op-negro);
}

/* Logo centrado: menos aire arriba y abajo (Jannah deja ~100px) */
#theme-header .logo-row,
#theme-header .logo-container,
.header-layout-2 .logo-row,
.header-layout-2 .logo-container {
	padding-block: var(--op-sp-4);
	min-height: 0;
}

#theme-header #logo,
.header-layout-2 #logo {
	margin-block: 0;
}

/* Sin banner junto al logo en layout centrado: el hueco no existe */
.header-layout-2 .op-cabecera-anuncio {
	display: none;
}


/* ---- 0.3.3: las dos fugas de color de Jannah -------------------------
 * 1) #theme-header lleva la clase .main-nav-light, que redefine las
 *    variables de la barra EN EL PROPIO ELEMENTO (gana a :root y a body).
 *    Se redefinen aquí con id + clase.
 * 2) El rojo de "Última hora" no es un background: es un ::before con
 *    #f05555 en helpers.min.css. */
#theme-header.main-nav-light,
#theme-header.main-nav-dark,
#theme-header.main-nav-default-light {
	--main-nav-background: var(--op-oscuro);
	--main-nav-text-color: var(--op-blanco);
	--main-nav-primary-color: var(--op-acento);
	--main-nav-contrast-primary-color: var(--op-blanco);
	--main-nav-secondry-background: var(--op-blanco);
	--main-nav-secondry-text-color: var(--op-negro);
	--main-nav-main-border-color: var(--op-oscuro);
	--main-nav-secondry-border-color: var(--op-gris-borde);
}

#top-nav .breaking-title::before {
	background: var(--op-destacado);
}

#top-nav .breaking-title {
	color: var(--op-negro);
}