/*
Theme Name: ColorMag WQ
Template: colormag
Description: Child theme de ColorMag con la identidad de WQ Radio, basado en la estructura visual de radioforever925.com.
Version: 0.2.0
*/

:root {
	--wq-bg: #0d0d0f;
	--wq-surface: #16161a;
	--wq-text: #ffffff;
	--wq-text-dim: #a8a8b3;
	--wq-accent: #d4e224;
	--wq-accent-ink: #0d0d0f;
	--wq-border: rgba(255,255,255,.08);

	/* Colores de categoria, uno por tema, como en Radio Forever. */
	--cat-politica: #5b6bff;
	--cat-economia: #d4772e;
	--cat-deportes: #2ea34a;
	--cat-sociedad: #d43d5c;
	--cat-cultura: #b05bff;
	--cat-elecciones: #d4e224;
}

* { box-sizing: border-box; }

body {
	background-color: var(--wq-bg) !important;
	color: var(--wq-text) !important;
	font-family: 'Inter', 'Roboto', -apple-system, sans-serif;
}

/* Estructura general oscura, sin la caja/padding por defecto de ColorMag. */
.site, .hfeed, .cm-header-builder, .cm-header-builder-sticky, .cm-footer-builder,
.cm-container, .cm-row, .cm-primary, #cm-primary {
	background-color: transparent !important;
}
.cm-header-builder { background-color: var(--wq-bg) !important; border-bottom: 1px solid var(--wq-border); }

/* Tipografia: blanco puro, sans, sin la slab serif -- Forever usa un sans bold parejo. */
h1, h2, h3, h4, h5, h6,
.entry-title, .cm-entry-title, .site-title, .cm-site-title {
	font-family: 'Inter', 'Roboto', sans-serif !important;
	font-weight: 700 !important;
	color: var(--wq-text) !important;
	letter-spacing: -0.01em;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.entry-title a, .cm-entry-title a, .cm-site-title a {
	color: inherit !important;
}
h1 a:hover, h2 a:hover, h3 a:hover, .entry-title a:hover, .cm-entry-title a:hover {
	color: var(--wq-accent) !important;
}

p, .entry-content, .entry-summary, .cm-entry-summary {
	color: var(--wq-text-dim) !important;
}

a { color: var(--wq-accent); }

/* Tarjetas a sangre completa: sin card, sin padding, sin esquinas redondas.
   La imagen pega directo con el borde del contenedor, como en Forever. */
article, .cm-post, .cm-entry-header, .hentry {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	border-bottom: 1px solid var(--wq-border);
	padding-bottom: 1.5rem !important;
	margin-bottom: 1.5rem !important;
}
article img, .cm-post img, .post-thumbnail img, .cm-featured-image img {
	border-radius: 0 !important;
	width: 100%;
	display: block;
}

/* Insignia de categoria: pill de color solido segun el tema, pegada a la imagen. */
.cm-post-categories a, .cat-links a, .entry-category a, .cm-badge {
	display: inline-block;
	background-color: var(--wq-accent);
	color: var(--wq-accent-ink) !important;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 5px 12px;
	border-radius: 4px;
	text-decoration: none;
}
.cm-post-categories a[href*="politica"], .cat-links a[href*="politica"] { background-color: var(--cat-politica); color: #fff !important; }
.cm-post-categories a[href*="economia"], .cat-links a[href*="economia"] { background-color: var(--cat-economia); color: #fff !important; }
.cm-post-categories a[href*="deportes"], .cat-links a[href*="deportes"] { background-color: var(--cat-deportes); color: #fff !important; }
.cm-post-categories a[href*="sociedad"], .cat-links a[href*="sociedad"] { background-color: var(--cat-sociedad); color: #fff !important; }
.cm-post-categories a[href*="cultura"], .cat-links a[href*="cultura"] { background-color: var(--cat-cultura); color: #fff !important; }
.cm-post-categories a[href*="elecciones"], .cat-links a[href*="elecciones"] { background-color: var(--cat-elecciones); color: var(--wq-accent-ink) !important; }

/* "Leer mas" como enlace simple, no boton. */
.button, .cm-read-more, a.cm-read-more, .more-link {
	background: transparent !important;
	color: var(--wq-text) !important;
	border: none !important;
	padding: 0 !important;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.button:hover, .cm-read-more:hover {
	color: var(--wq-accent) !important;
}

/* Meta (fecha / autor): gris apagado, sin fondo. */
.entry-meta, .cm-entry-meta, .posted-on, .byline {
	color: var(--wq-text-dim) !important;
}

/* Las tarjetas de Magazine Blocks (todas las variantes: style1/2/3, sliders,
   featured-posts) traen fondo blanco fijo via var(--color--white) en su CSS
   propio, sin ligar a la paleta del tema. Esa variable tambien se usa para
   texto/iconos blancos legitimos en otros lados, asi que no se puede tocar
   la variable: se ajusta puntualmente el fondo de la tarjeta.
   OJO: .mzb-post-content a veces es una capa position:absolute superpuesta
   a la imagen (overlay de texto) -- pintarla opaca tapa la foto entera. Solo
   se oscurece la variante "style3", donde .mzb-post-content es una seccion
   normal debajo de la imagen, no un overlay. */
.mzb-post,
.swiper-slide.style3,
.style3 .mzb-post-content {
	background-color: #0d0d0d !important;
}
.mzb-post .mzb-post-title a,
.style3 .mzb-post-content .mzb-post-title a {
	color: #ffffff !important;
}
.mzb-post,
.style3 .mzb-post-content {
	color: #e3e2e2 !important;
}

/* Reproductor en vivo, mismo patron que radioforever925.com: panel redondeado
   con boton circular real + input[type=range] real para volumen (accesible
   por teclado), con la marca de WQ en vez de los colores de Forever. */
.wq-live-player {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #16161a;
	border: 1px solid #2a2a2e;
	border-radius: 16px;
	padding: 10px 16px;
	max-width: 440px;
	margin-bottom: 28px;
}
.wq-live-player__mark {
	display: flex;
	align-items: center;
	gap: 8px;
}
.wq-live-player__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff4d4d;
	display: inline-block;
	flex-shrink: 0;
	animation: wq-live-pulse 1.6s ease-in-out infinite;
}
@keyframes wq-live-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}
.wq-live-player__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}
.wq-live-player__text strong {
	color: #ffffff;
	font-size: 14px;
}
.wq-live-player__text span {
	color: #9a9aa5;
	font-size: 12px;
}
.wq-live-player__play {
	width: 42px;
	height: 42px;
	min-width: 42px;
	border-radius: 50%;
	background: #d4e224;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0d0d0d;
	cursor: pointer;
	flex-shrink: 0;
	padding: 0;
}
.wq-live-player__play:hover {
	background: #b9c81f;
}
.wq-live-player__play:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}
.wq-live-player__vol {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 90px;
}
.wq-live-player__range {
	accent-color: #d4e224;
	flex: 1;
}

/* Widget "recientes de Internacional" de la barra lateral compartida
   (Programacion/Contacto/News WQ/Autores): en la columna angosta de esa
   barra, la columna interna del bloque colapsa a 0px de ancho (bug del
   plugin, no se pudo aislar la regla exacta) y el texto queda una letra
   por linea. Se fuerza el ancho de esa columna puntual. */
#cm-secondary .mzb-section-41224cc5 .mzb-column,
#cm-secondary .mzb-section-41224cc5 .mzb-column-inner {
	width: 100% !important;
	flex: 1 1 100% !important;
	min-width: 0 !important;
}
#cm-secondary .mzb-section-41224cc5 .mzb-posts {
	width: 100% !important;
	grid-template-columns: 1fr !important;
}

/* Banner superior del Home ("Ultimas Noticias" + nota chica al lado): la
   altura fija de escritorio (590px) no se ajusta en mobile para las
   tarjetas chicas (no la destacada, que si necesita esa altura para la
   foto). Deja una tarjeta chica con un hueco enorme en negro debajo del
   titulo. Se le da una altura razonable solo en mobile. */
@media (max-width: 767px) {
	.mzb-banner-posts-3351ac06 .mzb-post:not(.mzb-first-post--highlight),
	.mzb-banner-posts-3351ac06 .mzb-post:not(.mzb-first-post--highlight) .mzb-post-content,
	.mzb-banner-posts-3351ac06 .mzb-post:not(.mzb-first-post--highlight) .mzb-featured-image {
		height: 220px !important;
	}
}

/* Varios bloques de Magazine Blocks (ej. la miniatura de "Internacional")
   fijan el ancho de la imagen en px fijos sin version mobile (390px), lo
   que empuja toda la pagina a scroll horizontal en celular. Red de
   seguridad: en mobile ninguna imagen de tarjeta puede superar el ancho
   disponible. */
@media (max-width: 767px) {
	.mzb-post-list .mzb-posts,
	.mzb-grid-module .mzb-posts {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	.mzb-post-list .mzb-post,
	.mzb-grid-module .mzb-post {
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.mzb-post-list .mzb-featured-image,
	.mzb-post-list .mzb-featured-image img,
	.mzb-post-list img,
	.mzb-grid-module .mzb-featured-image,
	.mzb-grid-module .mzb-featured-image img,
	.mzb-grid-module img {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		height: auto !important;
	}
}

/* Footer y widgets, oscuro consistente. */
.site-footer, .cm-footer, footer, .widget {
	background-color: var(--wq-surface) !important;
	color: var(--wq-text-dim) !important;
	border-color: var(--wq-border) !important;
}
.site-footer a, .cm-footer a { color: var(--wq-accent) !important; }