/*
Theme Name: Zafarache
Theme URI: https://zafarache.com/
Description: Tema clásico que replica el diseño del periódico Zafarache (Comarca Ribera Baja del Ebro). Reutiliza los estilos originales (Helix Ultimate / SP Page Builder) y sirve el contenido de forma dinámica mediante The Loop.
Author: Secuoyas
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: zafarache
*/

/*
 * Los estilos reales del sitio se cargan desde sus ficheros originales en functions.php
 * (templates/, components/, media/, modules/, plugins/). Este archivo solo aporta la
 * cabecera obligatoria del tema y pequeños ajustes propios del entorno WordPress.
 */

/* Ocultar la barra de admin no es necesario; mantener el layout original. */

/* Detalle de noticia: el original deja .article-details sin padding propio
   (depende solo del padding vertical de #sp-main-body); añadimos un poco de
   aire lateral/inferior para que el contenido no toque los bordes de su columna. */
body.view-article #sp-component .article-details {
	padding: 0 0 30px;
}

/* Topbar redes sociales: tamaño de icono igual al original (fijado inline por
   addon en el Joomla original, aquí no existe ese <style> por addon). */
.redes-topbar .sppb-icon-inner {
	width: 15px;
	height: 15px;
}
.redes-topbar .sppb-icon-inner i {
	font-size: 15px;
	line-height: 15px;
}

/* Logo: altura fija (igual que el original) para evitar reflow/salto al cargar
   o al volver a home. */
.logo-image {
	height: 70px;
	width: auto;
}

/* Página de Contacto: formulario propio (no existe en el snapshot original,
   se maqueta a medida siguiendo la paleta/tipografía de las variables CSS
   del tema: --a-color-primario/cuarto, --a-fuente-body). */
.zft-contact-form {
	margin-top: 25px;
	max-width: 480px;
}
.zft-form-field {
	margin-bottom: 20px;
}
.zft-form-field label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--a-fuente-body);
	font-size: 13px;
	color: var(--a-color-tercero, #212121);
}
.zft-form-field input[type="text"],
.zft-form-field input[type="email"],
.zft-form-field input[type="tel"],
.zft-form-field textarea {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid #ebebeb;
	font-family: var(--a-fuente-body);
	font-size: 14px;
	background: #fff;
}
.zft-form-field input:focus,
.zft-form-field textarea:focus {
	outline: none;
	border-color: var(--a-color-cuarto, #1f4c63);
}
.zft-form-field--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: var(--a-color-tercero, #212121);
}
.zft-form-field--checkbox input {
	margin-top: 3px;
}
.zft-form-submit {
	background: var(--a-color-cuarto, #1f4c63);
	color: #fff;
	border: 0;
	padding: 10px 30px;
	font-size: 13px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}
.zft-form-submit:hover {
	background: var(--a-color-primario, #2e607f);
}
.zft-form-mensaje {
	padding: 10px 15px;
	margin: 15px 0 0;
	font-size: 14px;
}
.zft-form-mensaje--ok {
	background: #e3f5e6;
	color: #1e6b2e;
}
.zft-form-mensaje--error {
	background: #fbe4e4;
	color: #a92a2a;
}
.zft-map iframe {
	display: block;
}

/* Contacto: intro, iconos de email/teléfono y dirección con más aire y el
   estilo de icono grande del original (30px, color --a-color-cuarto). */
.sppb-section.section-custom .sppb-addon-text-block {
	font-size: 15px;
	line-height: 22px;
	margin-bottom: 20px;
}
.sppb-section.section-custom .sppb-addon-raw-html .sppb-addon-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 25px;
	margin-bottom: 10px;
}
.sppb-section.section-custom .sppb-addon-raw-html .sppb-addon-content a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--a-color-tercero, #212121);
	text-decoration: none;
}
.sppb-section.section-custom .sppb-addon-raw-html .sppb-addon-content i {
	font-size: 26px;
	color: var(--a-color-cuarto, #1f4c63);
}
.sppb-section.section-custom .sppb-col-md-6:last-child .sppb-addon-raw-html .sppb-addon-content {
	margin-bottom: 15px;
}
.sppb-section.section-custom .sppb-col-md-6:last-child .sppb-addon-raw-html .sppb-addon-content i {
	font-size: 18px;
	margin-right: 4px;
}

/* Tarjetas "modern" (imagen de fondo) de home/comarca: el original solo
   enlaza el título, aquí la imagen también es clicable. Enlace-overlay
   bajo el wrapper de texto; el wrapper cubre toda la tarjeta (top/bottom/
   left/right:0 en el original) así que hay que quitarle los eventos de
   puntero y devolvérselos solo a sus propios enlaces (categoría/título),
   si no, sus zonas "vacías" seguirían tapando el overlay y el clic no
   llegaría nunca a la imagen. El overlay va oculto a lectores de pantalla
   para no duplicar el enlace accesible del título. */
.sppb-addon-articles.modern .sppb-addon-article-img-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.sppb-addon-articles.modern .sppb-addon-article-info-wrapper {
	z-index: 2;
	pointer-events: none;
}
.sppb-addon-articles.modern .sppb-addon-article-info-wrapper a {
	pointer-events: auto;
}

/* Agenda: tooltip del calendario mensual (falta en events_css.css original;
   solo lo usa este bloque de "Evento único" dentro del popover). */
.jevtt_text .fwb {
	font-weight: bold;
}
.editlinktip.hasjevtip {
	cursor: pointer;
}

/* Agenda: events_css.css deja #jevents_body sin padding lateral (solo
   top/bottom), así que la rejilla del calendario toca los bordes de la
   tarjeta. Añadimos aire lateral y separación entre las flechas ‹ › y el
   título del mes, que en el original quedan pegadas al texto. */
#jevents_body {
	padding-left: 15px;
	padding-right: 15px;
}
#jevents_body .cal_table,
#jevents_body .cal_top_day_names {
	width: 100%;
	margin-left: 0;
}

/* Agenda: el selector de mes del original no fija peso tipográfico (hereda
   el cuerpo normal pese a su tamaño grande) ni está centrado. Lo llevamos a
   la tipografía/color de marca del sitio, centrado, con las flechas como
   botones circulares en vez de simples caracteres sueltos. */
#jevents_body .month_date {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding-left: 0;
}
#jevents_body .month_title,
#jevents_body .month_title_year {
	display: inline;
	padding-left: 0;
	font-family: var(--a-fuente-body);
	font-size: 26px;
	font-weight: 700;
	color: var(--a-color-tercero, #212121);
}
#jevents_body .month_title {
	text-transform: capitalize;
}
#jevents_body .mod_events_link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	border-radius: 50%;
	background: var(--a-color-cuarto, #1f4c63);
	color: #fff;
	text-decoration: none;
	transition: background 0.2s ease;
}
/* fa-chevron-* se centra por metrica de icono, no de texto: line-height:1 en
   el <a> (como con &lsaquo;/&rsaquo;) lo dejaba pegado al borde superior. */
#jevents_body .mod_events_link i {
	font-size: 14px;
	line-height: 1;
}
#jevents_body .mod_events_link:hover {
	background: var(--a-color-primario, #2e607f);
	color: #fff;
}

/* --- Newsletter (inc/newsletter.php) ------------------------------------- */

/* El markup original de Joomla no tenia mensaje de resultado visible; el nuevo
   lo reutiliza para ok y error, con data-zft-error como unico distintivo. */
.mcSignupResult {
	width: 100%;
	margin-top: 8px;
	padding: 8px 10px;
	font-size: 13px;
	line-height: 1.4;
	background: rgba(46, 96, 127, 0.08);
	border-left: 3px solid var(--a-color-primario, #2e607f);
}
.mcSignupResult[data-zft-error] {
	background: rgba(176, 0, 32, 0.08);
	border-left-color: #b00020;
}
.mcSignupModule .mcSignupSubmit[disabled] {
	opacity: 0.6;
	cursor: progress;
}
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

/* Listados de noticias (categoría y búsqueda): todas las miniaturas con la
   misma proporción (la de zft-card, 400x260) y recortadas con cover, sea cual
   sea el tamaño original de la foto. */
.blog .article-intro-image {
	aspect-ratio: 400 / 260;
	overflow: hidden;
}
.blog .article-intro-image a {
	display: block;
	height: 100%;
}
.blog .article-intro-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Sin foto destacada: el logo se muestra entero, centrado sobre fondo neutro. */
.blog .article-intro-image img.zft-thumb-fallback {
	object-fit: contain;
	padding: 12%;
	background: #f5f5f5;
	box-sizing: border-box;
}