/*
Theme Name: GOOOYA Auriazul (Kadence Child)
Theme URI: https://goooyauriazul.com
Description: Child theme de Kadence con la identidad de ¡GOOOYA! Auriazul — La Casa de la Afición de Pumas. Azul #023769 + Oro #D7AF00, titulares Georgia, fondo crema. Basado en los mockups aprobados (jul 2026).
Author: José Luis / ¡GOOOYA! Auriazul
Template: kadence
Version: 1.0.0
Text Domain: goooya-auriazul
*/

/* ============ TOKENS DE MARCA ============ */
:root, body {
  --azul-uni: #023769;
  --azul-profundo: #011E3D;
  --azul-medio: #054A8C;
  --oro: #D7AF00;
  --oro-claro: #F0CC33;
  --crema: #FAF7EF;
  --tinta: #1C1C1C;
  --gris: #6B7280;
  --blanco: #FFFFFF;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;

  /* Paleta global de Kadence mapeada a la marca */
  --global-palette1: #023769;
  --global-palette2: #054A8C;
  --global-palette3: #1C1C1C;
  --global-palette4: #011E3D;
  --global-palette5: #6B7280;
  --global-palette6: #9CA3AF;
  --global-palette7: #FAF7EF;
  --global-palette8: #F5F1E6;
  --global-palette9: #FFFFFF;
  --global-heading-font-family: Georgia, 'Times New Roman', serif;
}

/* ============ BASE ============ */
body {
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title, .archive-title, .page-title,
.wp-block-heading {
  font-family: var(--serif);
  color: var(--azul-profundo);
  line-height: 1.25;
}

.entry-content a, .entry-summary a {
  color: var(--azul-uni);
  text-decoration-color: var(--oro);
}
.entry-content a:hover, .entry-summary a:hover {
  color: var(--azul-medio);
}

/* ============ HEADER ============ */
.site-header, #masthead, .site-main-header-wrap, .site-header-row-container-inner {
  background: var(--azul-profundo);
}
.site-header .site-branding .site-title,
.site-header .site-branding .site-description {
  color: var(--blanco);
  font-family: var(--serif);
}
.site-header .main-navigation .primary-menu-container > ul > li > a,
.site-header a, #masthead a {
  color: var(--blanco);
}
.site-header .main-navigation .primary-menu-container > ul > li > a:hover,
.site-header .main-navigation .primary-menu-container > ul > li.current-menu-item > a {
  color: var(--oro-claro);
}

/* ============ BOTONES ============ */
.wp-block-button__link, .button, button[type="submit"],
input[type="submit"], .kb-button, .wp-element-button {
  background: var(--azul-uni);
  color: var(--blanco);
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 600;
  transition: background .2s ease, transform .2s ease;
}
.wp-block-button__link:hover, .button:hover, button[type="submit"]:hover,
input[type="submit"]:hover, .kb-button:hover, .wp-element-button:hover {
  background: var(--azul-medio);
  transform: translateY(-1px);
}
.wp-block-button.is-style-goooya-oro .wp-block-button__link,
.btn-oro {
  background: var(--oro);
  color: var(--azul-profundo);
  box-shadow: 0 6px 18px rgba(201,162,39,.35);
}
.wp-block-button.is-style-goooya-oro .wp-block-button__link:hover,
.btn-oro:hover {
  background: var(--oro-claro);
  color: var(--azul-profundo);
}

/* ============ ETIQUETAS DE CATEGORÍA (pilares) ============ */
.entry-taxonomies .category-links a, .post-categories a, .entry-meta a[rel="category tag"] {
  background: var(--oro);
  color: var(--azul-profundo);
  border-radius: 4px;
  padding: 2px 10px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
.entry-taxonomies .category-links a:hover, .post-categories a:hover {
  background: var(--oro-claro);
}

/* ============ TARJETAS DE ENTRADA (archivo/blog) ============ */
.loop-entry.type-post, article.entry {
  background: var(--blanco);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(1,30,61,.07);
  transition: box-shadow .25s ease, transform .25s ease;
}
.loop-entry.type-post:hover {
  box-shadow: 0 10px 26px rgba(1,30,61,.14);
  transform: translateY(-3px);
}
.loop-entry .entry-title a { color: var(--azul-profundo); }
.loop-entry .entry-title a:hover { color: var(--azul-uni); }

/* ============ META ============ */
.entry-meta, .entry-meta a { color: var(--gris); }

/* ============ FOOTER ============ */
.site-footer, #colophon, .site-footer-wrap {
  background: var(--azul-profundo);
  color: rgba(255,255,255,.85);
}
.site-footer a, #colophon a { color: var(--oro-claro); }
.site-footer a:hover { color: var(--blanco); }

/* ============ BLOCKQUOTE con voz editorial ============ */
.entry-content blockquote {
  border-left: 4px solid var(--oro);
  background: var(--blanco);
  font-family: var(--serif);
  font-style: italic;
  color: var(--azul-profundo);
  padding: 16px 22px;
  border-radius: 0 8px 8px 0;
}

/* ============ SELECCIÓN DE TEXTO ============ */
::selection { background: var(--oro-claro); color: var(--azul-profundo); }


/* ============ PORTADA Y PAGINAS ============ */
.home.page .entry-header { display: none; }
.page article.entry { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.page article.entry:hover { box-shadow: none; transform: none; }
.home .entry-content { margin-top: 0; }

/* ============================================================
   LA PORTADA DEL MES (shortcode goooya_portada)
   ============================================================ */
.goooya-portada-seccion { margin: 0 0 24px; }

.goooya-portada-head {
	border-bottom: 3px solid #023769;
	margin-bottom: 22px;
}
.goooya-portada-head span {
	display: inline-block;
	background: #023769;
	color: #D7AF00;
	font-weight: 800;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 7px 16px 5px;
}

.goooya-portada {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
}
@media (min-width: 768px) {
	.goooya-portada {
		grid-template-columns: 5fr 7fr;
		align-items: start;
	}
}

.goooya-portada-cover img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(1, 30, 61, 0.28);
	transition: transform 0.25s ease;
}
.goooya-portada-cover a:hover img { transform: translateY(-4px); }
.goooya-portada-caption {
	margin: 12px 0 0;
	font-size: 0.85rem;
	color: #054A8C;
}
.goooya-portada-caption a {
	color: #023769;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: #D7AF00;
	text-decoration-thickness: 2px;
}

.goooya-portada-notas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}
@media (max-width: 600px) {
	.goooya-portada-notas { grid-template-columns: 1fr; }
}
.goooya-portada-nota a { text-decoration: none; display: block; }
.goooya-portada-nota img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	border-radius: 6px;
}
.goooya-portada-nota h3 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.02rem;
	line-height: 1.32;
	color: #023769;
	margin: 0.55em 0 0;
}
.goooya-portada-nota a:hover h3 { color: #054A8C; text-decoration: underline; text-decoration-color: #D7AF00; }

/* ============================================================
   LOGO EN EL HEADER (el wordmark reemplaza al titulo de texto)
   ============================================================ */
.site-branding .site-title { display: none; }
.site-branding .custom-logo {
	max-width: 230px;
	width: 100%;
	height: auto;
}

/* ============================================================
   MENU: BOTON SUSCRIBETE (CTA dorado) Y LANDING EL RINCON
   ============================================================ */
.main-navigation .goooya-menu-cta > a {
	background: #D7AF00;
	color: #023769 !important;
	font-weight: 700;
	border-radius: 999px;
	padding: 9px 20px !important;
	margin-left: 10px;
	line-height: 1.2;
}
.main-navigation .goooya-menu-cta > a:hover {
	background: #F0CC33;
	color: #011E3D !important;
}
.goooya-rincon-hero {
	padding: 30px 0 10px;
}
.goooya-rincon-hero h1 {
	color: #023769;
}

/* PORTADA: quitar espacio superior entre header y hero en Inicio (el hero ya trae su propio padding) */
body.home #primary {
	margin-top: 0;
	margin-bottom: 0;
}


/* FOOTER: fila superior solo tiene contenido en la columna 1 (parrafo de marca); ocultar columnas vacias y usar todo el ancho centrado */
.site-top-footer-inner-wrap.site-footer-row-columns-3 .site-footer-top-section-2,
.site-top-footer-inner-wrap.site-footer-row-columns-3 .site-footer-top-section-3 {
	display: none;
}
.site-top-footer-inner-wrap.site-footer-row-columns-3 .site-footer-top-section-1 {
	flex: 0 0 100%;
	max-width: 100%;
	text-align: center;
}

/* FIX centrado real: la seccion es flex, text-align no alcanza */
.site-top-footer-inner-wrap.site-footer-row-columns-3 .site-footer-top-section-1 {
	justify-content: center;
	align-items: center;
}

/* FIX REAL: el contenedor es CSS Grid de 3 columnas fijas (394px cada una), no flex.
   El fix anterior de flex no aplicaba. Forzar una sola columna al 100% en esta fila. */
.site-top-footer-inner-wrap.site-footer-row-columns-3 {
	grid-template-columns: 100% !important;
}

/* FIX tipografia titulares dentro de bloques de ultimas notas (Cronica, Femenil, etc) */
.wp-block-latest-posts__post-title {
	font-family: Georgia, 'Times New Roman', serif !important;
	font-weight: 700 !important;
	color: #023769 !important;
	font-size: 1.15rem !important;
	line-height: 1.35 !important;
}
.wp-block-latest-posts__post-title:hover {
	color: #054A8C !important;
	text-decoration: underline;
	text-decoration-color: #D7AF00;
}


/* PORTADA: evitar recorte de las imágenes verticales (4:5) en el archivo de la categoría Portada */
.category-portada a.post-thumbnail.kadence-thumbnail-ratio-2-3 {
	aspect-ratio: 4 / 5 !important;
	height: auto !important;
}
.category-portada a.post-thumbnail.kadence-thumbnail-ratio-2-3 img {
	object-fit: cover !important;
	object-position: top center !important;
	height: auto !important;
}


/* Banner My Team (divisor entre Portada y La Jornada) */
.goooya-myteam-banner {
	max-width: 1240px;
	margin: 0 auto 32px;
	padding: 0 20px;
	text-align: center;
}
.goooya-myteam-banner-img {
	margin: 0 !important;
}
.goooya-myteam-banner-img img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	border-radius: 6px;
}