/*
Theme Name: Forcast Child — Observatório Público
Theme URI: https://observatoriopublico.com
Description: Tema hijo de Forcast para el portal Observatório Público. Paleta extraída del logotipo, fondo blanco y limpieza de marca del demo.
Author: Observatório Público
Template: forcast
Version: 1.0.0
Text Domain: forcast-child
*/

/* =====================================================================
   1. PALETA DE MARCA — extraída del logotipo (icono def.png)
   ===================================================================== */
:root {
	/* --- Neutros oscuros: la placa metálica del logo --- */
	--op-black:        #0E0F10;   /* negro de marca (media real de la placa) */
	--op-black-pure:   #000000;   /* color dominante nº1 del logo */
	--op-graphite:     #202020;   /* dominante nº2 — relieve de la placa */
	--op-steel:        #707078;   /* gris medio del bisel */

	/* --- Cromados: el lettering "OBSERVATÓRIO" --- */
	--op-silver:       #CACCD2;   /* plata media real */
	--op-silver-100:   #F0F0F0;   /* alto brillo del cromado */
	--op-silver-50:    #F7F7F8;

	/* --- Dorados: "PÚBLICO" y las barras inferiores --- */
	--op-gold:         #B38D2B;   /* dorado medio real del logo */
	--op-gold-bright:  #D6A93A;   /* hover / uso sobre fondo oscuro */
	--op-gold-pure:    #BC8D03;   /* dorado más saturado del logo */
	--op-gold-deep:    #8A6B1F;   /* enlaces sobre blanco — contraste AA 5.0:1 */
	--op-gold-soft:    #FBF4E2;   /* fondo suave / resaltados */

	/* --- Base --- */
	--op-white:        #FFFFFF;

	/* --- Roles semánticos --- */
	--op-bg:           var(--op-white);
	--op-surface:      var(--op-white);
	--op-surface-alt:  var(--op-silver-50);
	--op-text:         #14161A;
	--op-text-muted:   #5B6068;
	--op-border:       #E6E7EA;
	--op-accent:       var(--op-gold);

	/* --- Sobrescritura de las variables propias del tema Forcast --- */
	--thm-primary:     var(--op-gold);
	--thm-news:        var(--op-gold-deep);
}

/* =====================================================================
   2. FONDO BLANCO EN TODO EL SITIO
   ===================================================================== */
html,
body,
#page,
#content,
.site,
.site-content,
.bytf__main-wrapper,
.main-header,
.header__menu-wrapper,
.header__top-wraper,
.blog__page-wrapper,
.single__page-wrapper,
.archive__page-wrapper,
.bytf-footer,
footer.bytf-footer,
.elementor-location-footer {
	background-color: var(--op-bg) !important;
}

/* Secciones de Elementor del footer y de la home: fondo blanco */
.elementor-location-footer .elementor-section,
.elementor-location-footer .elementor-column,
body .elementor-section.elementor-top-section[data-op-white] {
	background-color: transparent !important;
}

/* Tintes rosados heredados del rojo del demo -> neutros */
[style*="#FFF0F3"],
[style*="#fff0f3"] {
	background-color: var(--op-gold-soft) !important;
}

/* =====================================================================
   3. TIPOGRAFÍA Y COLOR DE TEXTO
   ===================================================================== */
body {
	color: var(--op-text-muted);
	background-color: var(--op-bg);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.post__title,
.bytf__post-title {
	color: var(--op-text);
}

a {
	color: var(--op-text);
}

a:hover,
a:focus {
	color: var(--op-gold-deep);
}

/* =====================================================================
   4. ACENTOS DORADOS
   ===================================================================== */
.thm__btn,
.bytf__btn,
button.thm__btn,
input[type="submit"],
.wp-block-button__link {
	background-color: var(--op-gold);
	border-color: var(--op-gold);
	color: var(--op-black);
}

.thm__btn:hover,
.bytf__btn:hover,
button.thm__btn:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background-color: var(--op-black);
	border-color: var(--op-black);
	color: var(--op-gold-bright);
}

/* Etiquetas de categoría */
.bytf__post-cat a,
.post__cat a,
.category__name,
.bytf__postmeta .cat a {
	color: var(--op-gold-deep);
}

.bytf__post-cat a:hover,
.post__cat a:hover,
.bytf__postmeta .cat a:hover {
	color: var(--op-gold);
}

/* Menú principal */
.byteflows_menu .byteflows_menu-nav > li > a {
	color: var(--op-text);
}

.byteflows_menu .byteflows_menu-nav > li > a:hover,
.byteflows_menu .byteflows_menu-nav > li.current-menu-item > a,
.byteflows_menu .byteflows_menu-nav > li.current-category-ancestor > a {
	color: var(--op-gold-deep);
}

/* Barra superior del header (fecha) */
.main-header-seven .header__top-wraper {
	border-bottom: 1px solid var(--op-border);
}

/* Separadores y filetes */
hr,
.bytf__divider,
.widget-title:after,
.section__title:after {
	border-color: var(--op-gold);
	background-color: var(--op-gold);
}

/* Paginación */
.pagination .page-numbers.current,
.page-numbers.current {
	background-color: var(--op-gold);
	border-color: var(--op-gold);
	color: var(--op-black);
}

/* Selección de texto */
::selection {
	background: var(--op-gold);
	color: var(--op-black);
}

/* =====================================================================
   5. LIMPIEZA DE MARCA DEL DEMO
   Red de seguridad en CSS. Los elementos ya se eliminaron en la base
   de datos; esto cubre cualquier resto en widgets o plantillas.
   ===================================================================== */

/* 5.1 — Redes sociales (header, footer, sidebar, autor, single) */
.header__social-icon,
.footer__social,
.footer__social-icon,
.bytf__social,
.bytf__social-icon,
.social__icon-wrapper,
.social-counter,
.author__social,
.authore__social,
.bytf__author-social,
.widget_empath_social,
.elementor-widget-social-icons,
.elementor-widget-empath-social-icon,
.empath-social-icon,
.bytf__post-share,
.post__share,
.single__share,
.share__wrapper,
.bytf-share-wrapper,
.social-share {
	display: none !important;
}

/* 5.2 — Botón "Buy Now" / "Sign In" del header */
.main-header .header__control .thm__btn {
	display: none !important;
}

/* 5.3 — Barra "Quick Links" del header */
.header__top-info.htop__left-info,
.header__top-innrer-left,
.main-header-seven .header__top-info .quick-link {
	display: none !important;
}

/* La fecha ocupa el espacio y se conserva */
.main-header-seven .header__top-wraper-inner {
	justify-content: space-between;
}
.main-header-seven .date_h:after {
	display: none !important;   /* separador que dividía fecha / redes */
}

/* 5.4 — Autor del post en cualquier listado o ficha */
.bytf__postmeta li.authore,
.bytf__postmeta-two li.authore,
li.authore,
.post__author,
.author__meta,
.authore__info,
.author-info,
.bytf__author-box,
.author__box,
.entry-meta .byline,
.posted-by,
.vcard.author {
	display: none !important;
}

/* 5.5 — Etiquetas (tags) del post */
.tagcloud,
.tags__wrapper,
.post__tags,
.bytf__post-tags,
.entry-footer .tags-links,
.widget_tag_cloud,
.bytf__tag-list {
	display: none !important;
}

/* Fila de tags + compartir del single: si queda vacía, se colapsa */
.single__post-footer:empty,
.bytf__post-bottom:empty {
	display: none !important;
}

/* 5.6 — Marcador (favoritos) y cualquier botón de compartir.
   El tema llama a empath_bookmark_trigger() en 97 sitios sin condición y
   la función no está protegida con function_exists(), así que no se puede
   sobrescribir desde el tema hijo. Se neutraliza aquí. */
.bytf__bookmark,
.bookmark__dark,
.bookmark-trigger,
.bookmark-icon,
.bookmark-count,
.bytf__bookmark-count,
li:has(> .bytf__bookmark),
.single__top-social,
.empath__post-share,
.post__share-wrapper,
.share-btn,
.share__btn,
.bytf__share,
.social-box,
.share-wrap,
.share-title,
.empath-print-btn {
	display: none !important;
}

/* 5.6 bis — Conmutador de modo oscuro e icono de usuario */
.dark__switch,
.empath-switch-box__input,
.toggle-label,
.login__user {
	display: none !important;
}

/* Si algún navegador conserva data-theme="dark", se ignora */
html[data-theme="dark"],
html[data-theme="dark"] body {
	background-color: var(--op-bg) !important;
	color: var(--op-text-muted) !important;
}

/* 5.7 — Comentarios */
#comments,
.comments-area,
.comment-respond,
#respond,
.comment-list,
.comments-link,
.bytf__comment-wrapper,
.single__comment-area,
li.comment {
	display: none !important;
}

/* 5.8 — Bloques de suscripción a la newsletter */
.bytf__newsletter,
.newsletter__wrapper,
.widget_empath_newsletter_form,
.elementor-widget-empath-newsletter,
.mc4wp-form,
.mc4wp-form-fields {
	display: none !important;
}

/* 5.9 — El tema imprime <img src=""> cuando un post no tiene imagen
   destacada (navegación anterior/siguiente). Evita el icono roto. */
img[src=""],
img:not([src]),
.more-posts img[src=""] {
	display: none !important;
}

/* =====================================================================
   6. LOGOTIPO
   ===================================================================== */
.byteflows_logo img,
.footer__logo img,
.elementor-widget-image img {
	max-width: 100%;
	height: auto;
}

.byteflows_logo img {
	max-height: 74px;
	width: auto;
}

/* Logo dentro de los banners publicitarios: el hueco original era un
   badge pequeño, así que hay que limitarlo. */
.banner__logo img {
	max-width: 190px;
	height: auto;
}

/* Logo del pie */
.bytf-footer .elementor-widget-image img,
.elementor-location-footer .elementor-widget-image img {
	max-width: 220px;
	height: auto;
}

/* =====================================================================
   7. PIE DE UNA SOLA COLUMNA
   Al quitar "Institucional" y "Fale conosco" sólo queda "Seções".
   El tema imprime el pie de Elementor sin envoltorio propio, así que
   hay que apuntar a los IDs de elemento (Footer 5, plantilla #5500).
   ===================================================================== */

/* Lista de secciones: fila horizontal centrada, no columna a la izquierda */
.elementor-element-68887d0 .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 36px;
}

.elementor-element-68887d0 .elementor-icon-list-item {
	margin: 0;
	padding: 0;
}

.elementor-element-68887d0 .elementor-icon-list-item a {
	font-size: 15px;
}

/* Fila del copyright: logotipo y texto alineados y centrados */
.elementor-element-413a80c {
	align-items: center;
}

.elementor-element-d8c91d3 .elementor-widget-image {
	text-align: center;
}

.elementor-element-d8c91d3 img {
	max-width: 190px;
}

@media (max-width: 767px) {
	.elementor-element-68887d0 .elementor-icon-list-items {
		gap: 8px 20px;
	}
	.elementor-element-d8c91d3 img {
		max-width: 150px;
	}
}

/* Logo del panel lateral y del buscador */
.offcanvas__logo img,
.bytf-offcanvas .byteflows_logo img,
.search__popup-logo img {
	max-width: 200px;
	height: auto;
}

@media (max-width: 991px) {
	.byteflows_logo img {
		max-height: 52px;
	}
	.banner__logo img {
		max-width: 140px;
	}
}