/*
Theme Name: Copuchando
Theme URI: https://www.copuchando.cl
Description: Child theme de GeneratePress para Copuchando.cl — portal de farándula chilena.
Author: Copuchando
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: copuchando
*/

/* ============ Estilos de marca ============ */

/* Colores de acento y tipografía de títulos */
.site-header {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Placeholders de publicidad (visibles durante el desarrollo) */
.copu-ad {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: #fafafa;
	border: 1px dashed #c9c9c9;
	border-radius: 6px;
	color: #b0b0b0;
	margin: 24px 0;
	padding: 20px 12px;
	text-align: center;
	min-height: 90px;
}

.copu-ad-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #c9c9c9;
}

.copu-ad-text {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: 2px;
	color: #d9d9d9;
}

.copu-ad--banner {
	min-height: 90px;
}

.copu-ad--box {
	min-height: 250px;
}

.copu-ad--skyscraper {
	min-height: 250px;
}

/* Header sticky: logo y menú en la misma línea */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #ffffff;
}

.site-header .inside-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

/* Menú de navegación sticky */
#site-navigation {
	position: sticky;
	top: 0;
	z-index: 99;
}

/* ============ Portada: secciones de magazine ============ */

/* Layout de 2 columnas: contenido + sidebar */
.copu-home {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 32px;
	align-items: start;
}

.copu-main {
	min-width: 0;
}

.copu-sidebar {
	position: sticky;
	top: 80px;
	align-self: start;
}

/* Encabezados de sección (TENDENCIA / ÚLTIMAS / MÁS VISTOS) */
.copu-section-title {
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 20px;
	padding: 8px 14px;
	background: #d90429;
	color: #ffffff;
	display: inline-block;
	border-radius: 3px;
}

/* TENDENCIA — hero destacado */
.copu-tendencia {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 20px;
	margin-bottom: 32px;
}

.copu-tendencia .hero-card {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background: #1f1f1f;
}

.copu-tendencia .hero-card img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.copu-tendencia .hero-card:hover img {
	transform: scale(1.04);
}

.copu-tendencia .hero-card .overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 60px 24px 20px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
}

.copu-tendencia .hero-card .cat,
.copu-latest .card .cat {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: #d90429;
	color: #fff;
	padding: 4px 10px;
	border-radius: 3px;
	margin-bottom: 10px;
	text-decoration: none;
}

.copu-tendencia .hero-card h2,
.copu-tendencia .hero-card h2 a {
	color: #ffffff;
	font-size: 26px;
	line-height: 1.25;
	margin: 0;
	text-decoration: none;
	transition: color 0.2s ease;
}

.copu-tendencia .hero-card h2 a:hover {
	color: #d90429;
}

/* Sidebar de tendencia — lista vertical */
.copu-tendencia .side-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.copu-tendencia .side-list .mini {
	display: flex;
	gap: 12px;
	align-items: center;
	text-decoration: none;
}

.copu-tendencia .side-list .mini img {
	width: 90px;
	height: 65px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.copu-tendencia .side-list .mini:hover img {
	transform: scale(1.06);
}

.copu-tendencia .side-list .mini h3 {
	font-size: 15px;
	line-height: 1.3;
	margin: 0;
	color: #1f1f1f;
	transition: color 0.2s ease;
}

.copu-tendencia .side-list .mini:hover h3 {
	color: #d90429;
}

/* ÚLTIMAS NOVEDADES — grid */
.copu-latest {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 32px;
}

.copu-latest .card {
	background: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease;
}

.copu-latest .card:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.copu-latest .card img {
	width: 100%;
	height: 170px;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.copu-latest .card:hover img {
	transform: scale(1.04);
}

.copu-latest .card .body {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.copu-latest .card h3 {
	font-size: 17px;
	line-height: 1.3;
	margin: 0;
	color: #1f1f1f;
	transition: color 0.2s ease;
}

.copu-latest .card:hover h3 {
	color: #d90429;
}

.copu-latest .card .date {
	font-size: 12px;
	color: #8a8a8a;
}

/* MÁS VISTOS — panel lateral */

/* Tabs */
.copu-tabs {
	display: flex;
	border-bottom: 2px solid #d90429;
	margin-bottom: 14px;
}

.copu-tab {
	flex: 1;
	background: transparent;
	border: none;
	padding: 10px 8px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: #6b6b6b;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: color 0.2s ease;
}

.copu-tab:hover {
	color: #1f1f1f;
}

.copu-tab.is-active {
	color: #d90429;
	border-bottom-color: #d90429;
}

.copu-tab-panel {
	display: none;
}

.copu-tab-panel.is-active {
	display: block;
}

.copu-popular ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.copu-popular ul li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}

.copu-popular ul li:last-child {
	border-bottom: 0;
}

.copu-popular .pop-thumb {
	flex-shrink: 0;
	line-height: 0;
	position: relative;
	overflow: hidden;
	border-radius: 6px;
}

.copu-popular .pop-thumb img {
	width: 90px;
	height: 65px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	transition: transform 0.3s ease;
}

.copu-popular .pop-thumb:hover img {
	transform: scale(1.06);
}

/* Número de posición sobre la miniatura (esquina inferior derecha) */
.copu-popular .pop-rank {
	position: absolute;
	right: 4px;
	bottom: 4px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 12px;
	font-weight: 800;
	color: #ffffff;
	background: #d90429;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.copu-popular .wpp-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.copu-popular .pop-title {
	text-decoration: none;
	color: #1f1f1f;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.35;
	display: block;
}

.copu-popular .pop-title:hover {
	color: #d90429;
}

.copu-popular .wpp-date {
	font-size: 12px;
	color: #8a8a8a;
}

/* Botón "Ver más noticias" */
.copu-load-more-wrap {
	text-align: center;
	margin: 8px 0 32px;
}

.copu-load-more {
	background: #ffffff;
	color: #d90429;
	border: 2px solid #d90429;
	border-radius: 4px;
	padding: 12px 32px;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.copu-load-more:hover {
	background: #d90429;
	color: #ffffff;
}

.copu-load-more:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ============ Responsive ============ */

@media (max-width: 1000px) {
	.copu-home {
		grid-template-columns: 1fr;
	}

	.copu-sidebar {
		position: static;
	}
}

@media (max-width: 900px) {
	.copu-tendencia {
		grid-template-columns: 1fr;
	}

	.copu-latest {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.copu-latest {
		grid-template-columns: 1fr;
	}

	.copu-tendencia .hero-card img {
		height: 230px;
	}

	.copu-tendencia .hero-card h2 {
		font-size: 20px;
	}
}

/* ============ Menú mobile ============ */

@media (max-width: 768px) {
	/* Evitar desbordes horizontales */
	html,
	body {
		overflow-x: hidden;
		max-width: 100%;
	}

	.site-header .inside-header {
		flex-direction: column;
		gap: 0;
		width: 100%;
		margin: 0;
	}

	/* Quitar márgenes entre elementos del header en mobile */
	.site-header .inside-header > *:not(:last-child):not(.main-navigation) {
		margin-bottom: 0;
	}

	.site-branding {
		text-align: center;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding: 6px 16px;
		display: none;
	}

	/* Logo más compacto en mobile */
	.site-logo img.is-logo-image {
		max-height: 42px !important;
	}

	.main-title a {
		font-size: 26px;
	}

	/* Barra de navegación móvil más baja */
	#site-navigation {
		width: 100%;
		position: relative;
	}

	#site-navigation .inside-navigation {
		position: relative;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0;
		height: 48px;
	}

	/* Lupa + botón dark mode: fijarlos a la derecha */
	#site-navigation .mobile-bar-items {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 22;
		display: flex;
		align-items: center;
		height: 48px;
	}

	#site-navigation .mobile-bar-items .search-item a,
	#site-navigation .mobile-bar-items .dark-mode-item {
		height: 48px;
		line-height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 14px;
		color: #ffffff;
	}

	#site-navigation .mobile-bar-items .dark-mode-item .copu-dark-toggle {
		background: transparent;
		border: none;
		cursor: pointer;
		color: #ffffff;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 48px;
	}

	#site-navigation .mobile-bar-items .dark-mode-item .copu-dark-icon-sun {
		display: none;
	}

	body.dark-mode #site-navigation .mobile-bar-items .dark-mode-item .copu-dark-icon-moon {
		display: none;
	}

	body.dark-mode #site-navigation .mobile-bar-items .dark-mode-item .copu-dark-icon-sun {
		display: block;
	}

	/* Ocultar el dark mode del menú desplegable (ya está junto a la lupa) */
	#site-navigation .main-nav li.dark-mode-item {
		display: none !important;
	}

	/* Botón menú: a la izquierda */
	#site-navigation .menu-toggle {
		flex: 1;
		text-align: left;
		padding: 0 20px;
		line-height: 48px;
		height: 48px;
		color: #ffffff;
	}

	/* Menú desplegable: no empujar contenido, desplegar sobre el header */
	#site-navigation .main-nav {
		position: absolute;
		top: 48px;
		left: 0;
		right: 0;
		z-index: 30;
		background: #331342;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
	}

	#site-navigation .main-nav > ul {
		display: none;
		margin: 0;
	}

	#site-navigation.toggled .main-nav > ul {
		display: block;
	}

	#site-navigation.toggled .main-nav li {
		display: block;
		width: 100%;
		text-align: left;
	}

	#site-navigation.toggled .main-nav li a {
		display: block;
		padding: 14px 20px;
		line-height: 1.4;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		color: #ffffff;
	}

	#site-navigation.toggled .main-nav li:last-child a {
		border-bottom: 0;
	}

	/* Barra de búsqueda expandida */
	.navigation-search {
		position: fixed;
		top: 60px;
		left: 0;
		right: 0;
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
		z-index: 35;
		background: #ffffff;
		padding: 12px 16px;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
		display: none;
	}

	.navigation-search.nav-search-active {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.navigation-search .search-field {
		flex: 1;
		min-width: 0;
		padding: 10px 12px;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 15px;
	}

	.copu-search-close {
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		border: none;
		background: #f0f0f0;
		border-radius: 4px;
		font-size: 18px;
		line-height: 1;
		color: #1f1f1f;
		cursor: pointer;
	}

	.copu-search-close:hover {
		background: #e0e0e0;
	}
}

/* ============ Artículo individual ============ */

/* Author box */
.copu-author-box {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: #f7f7f9;
	border-left: 4px solid #d90429;
	padding: 18px 20px;
	border-radius: 6px;
	margin: 24px 0;
}

.copu-author-box .avatar img {
	border-radius: 50%;
}

.copu-author-box .info .label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #8a8a8a;
}

.copu-author-box .info .name {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: #1f1f1f;
	margin: 2px 0 6px;
}

.copu-author-box .info p {
	margin: 0;
	font-size: 14px;
	color: #4a4a4a;
	line-height: 1.5;
}

/* Relacionados */
.copu-related {
	margin: 32px 0;
}

.copu-related-title {
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 8px 14px;
	background: #d90429;
	color: #fff;
	display: inline-block;
	border-radius: 3px;
	margin: 0 0 20px;
}

/* Tiempo de lectura */
.entry-reading-time {
	font-size: 0.9em;
	color: #8a8a8a;
}

/* Breadcrumbs */
.copu-breadcrumbs {
	font-size: 13px;
	color: #8a8a8a;
	margin-bottom: 12px;
}

.copu-breadcrumbs nav a {
	color: #8a8a8a;
	text-decoration: none;
}

.copu-breadcrumbs nav a:hover {
	color: #d90429;
}

/* Logo gráfico en el header (ocultar texto de marca) */
.main-title,
.site-description {
	display: none;
}

.site-branding {
	display: none;
}

.site-logo img.is-logo-image {
	max-height: 60px;
	width: auto;
	height: auto;
	display: block;
}

/* Enlaces "También te puede interesar" dentro del artículo */
.copu-related-inline {
	background: #f7f7f9;
	border-left: 4px solid #d90429;
	padding: 14px 16px;
	margin: 20px 0;
	font-size: 15px;
	line-height: 1.5;
	color: #4a4a4a;
	border-radius: 4px;
}

.copu-related-inline a {
	color: #d90429;
	font-weight: 600;
	text-decoration: none;
}

.copu-related-inline a:hover {
	text-decoration: underline;
}

/* ============ Footer personalizado ============ */

.copu-footer {
	background: #1f1f1f;
	color: #cfcfcf;
	padding: 48px 0 32px;
}

.copu-footer-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.copu-footer-title {
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 18px;
}

.copu-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.copu-footer-links a {
	color: #cfcfcf;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s ease;
}

.copu-footer-links a:hover {
	color: #ff4d66;
}

.copu-footer-text {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: #cfcfcf;
}

.copu-footer-email {
	display: inline-block;
	color: #ffffff;
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
}

.copu-footer-email:hover {
	color: #ff4d66;
}

.copu-footer-social {
	display: flex;
	gap: 12px;
}

.copu-social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #333333;
	color: #ffffff;
	transition: background 0.2s ease, transform 0.2s ease;
}

.copu-social:hover {
	background: #d90429;
	transform: translateY(-2px);
}

/* Copyright bar (GeneratePress) en fondo oscuro */
.site-footer .site-info {
	background: #141414;
	color: #9a9a9a;
}

.site-footer .site-info .copyright-bar {
	color: #9a9a9a;
}

@media (max-width: 768px) {
	.copu-footer-inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* ============ Formulario de contacto ============ */

.copu-contact-form {
	max-width: 560px;
	margin: 24px 0;
}

.copu-form-row {
	margin-bottom: 16px;
}

.copu-form-row label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #1f1f1f;
	margin-bottom: 6px;
}

.copu-form-row .req {
	color: #d90429;
}

.copu-form-row input,
.copu-form-row textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 15px;
	font-family: inherit;
	background: #ffffff;
}

.copu-form-row input:focus,
.copu-form-row textarea:focus {
	outline: none;
	border-color: #d90429;
	box-shadow: 0 0 0 2px rgba(217, 4, 41, 0.12);
}

.copu-form-submit {
	background: #d90429;
	color: #ffffff;
	border: none;
	border-radius: 4px;
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease;
}

.copu-form-submit:hover {
	background: #a9031f;
}

.copu-form-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.copu-form-status {
	margin-top: 12px;
	font-size: 14px;
	min-height: 20px;
}

.copu-form-status.is-success {
	color: #2d6a4f;
}

.copu-form-status.is-error {
	color: #d90429;
}

/* ============ Botón modo oscuro ============ */

li.dark-mode-item {
	display: flex;
	align-items: center;
}

li.dark-mode-item .copu-dark-toggle {
	background: transparent;
	border: none;
	cursor: pointer;
	color: #ffffff;
	padding: 0 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 60px;
	height: 60px;
}

li.dark-mode-item .copu-dark-toggle svg {
	display: block;
}

li.dark-mode-item .copu-dark-icon-sun {
	display: none;
}

body.dark-mode li.dark-mode-item .copu-dark-icon-moon {
	display: none;
}

body.dark-mode li.dark-mode-item .copu-dark-icon-sun {
	display: block;
}

li.dark-mode-item .copu-dark-toggle:hover svg {
	filter: drop-shadow(0 0 4px #D81B60);
}

/* ============ FOUC: aplicar dark mode antes de pintar ============ */
html.dark-mode-pre {
	background: #121212;
}

/* Fondo del botón de lupa activo (quitar rojo #a9031f) */
.main-navigation .main-nav ul li.search-item.active > a,
.main-navigation .menu-bar-items .search-item.active > a {
	background-color: transparent;
	color: #ffffff;
}

/* Zoom sutil en imagen destacada del artículo */
.page-header-image-single {
	overflow: hidden;
	border-radius: 8px;
}

.page-header-image-single img {
	transition: transform 0.3s ease;
	display: block;
}

.page-header-image-single:hover img {
	transform: scale(1.03);
}