/*
Theme Name:   Kadence Child - Toni
Theme URI:    https://toniaroca.com/
Description:  Tema hijo personalizado para toniaroca.com
Author:       Toni Aroca
Author URI:   https://toniaroca.com/
Template:     kadence
Version:      1.0.0
Text Domain:  kadence-child
*/

/* =============================================
   VARIABLES DE MARCA — toniaroca.com
   Solo correcciones que Kadence no cubre
   desde el Personalizador.
   Los colores globales van en el Personalizador.
   Versión 1.0 — Mayo 2026
   ============================================= */

:root {
  --color-marca:       #003366;
  --color-acento:      #FF8C00;
  --color-acento-dark: #CC7000;
  --color-texto:       #1A1A1A;
  --color-fondo-alt:   #F5F3EE;
  --color-secundario:  #6B7280;
}

/* =============================================
   BOTÓN SECUNDARIO — "Leer el blog"
   Kadence no distingue entre botón primario
   y secundario desde el Personalizador.
   Aquí forzamos el estilo contorno en azul.
   ============================================= */

.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--color-marca) !important;
  border: 2px solid var(--color-marca) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--color-marca) !important;
  color: #FFFFFF !important;
}

/* =============================================
   ESPACIADO — Reducir espacio vacío excesivo
   en la sección crema de la portada
   ============================================= */

.wp-block-group.has-background {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

/* Eliminar margen sobrante al final del bloque crema */
.wp-block-group.has-background > .wp-block-group__inner-container > *:last-child {
  margin-bottom: 0 !important;
}

/* =============================================
   ESPACIADO — Hero de portada
   Reducir el gap excesivo entre elementos
   ============================================= */

.wp-block-buttons {
  margin-top: 24px !important;
}

/* =============================================
   COLUMNAS TEMÁTICAS — tres bloques inferiores
   ============================================= */

.wp-block-columns {
  gap: 32px;
}

.wp-block-column h3 {
  margin-bottom: 10px;
}

/* =============================================
   TEXTOS META del blog (fechas, categorías)
   ============================================= */

.entry-meta,
.post-date,
time {
  color: var(--color-secundario);
  font-size: 14px;
}

/* =============================================
   RESPONSIVE — Ajustes móvil
   ============================================= */

@media (max-width: 768px) {

  .wp-block-buttons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .wp-block-columns {
    flex-direction: column;
  }
}