/* ===========================================================
   HERBANUTRICION.CL — Kadence Additional CSS  v2
   Archivo en child theme: hn-cl-kadence.css
   Encolado en functions.php como 'hn-kadence-config'

   Propósito LIMITADO:
   - Paleta Kadence → tokens del sistema
   - Tipografía base (Inter ya cargada por functions.php)
   - Ocultar títulos de página automáticos de Kadence
   - Wrappers full-width sin constraining
   - WooCommerce tienda: grid limpio, sin cambios de color
   - Links y accesibilidad

   NO toca: header (header.php custom), footer (Kadence nativo),
   botones (style.css ya los define), home (hn-home.css),
   productos (hn-cl-product.css), checkout (hn-cl-checkout.css).

   Revisión: 2026-06-20 v2
   =========================================================== */


/* -----------------------------------------------------------
   1. PALETA KADENCE → tokens del sistema
   ----------------------------------------------------------- */
:root {
  --global-palette1: #78BE20;
  --global-palette2: #67A81C;
  --global-palette3: #14210C;
  --global-palette4: #2B2B2B;
  --global-palette5: #6B7280;
  --global-palette6: #7A6249;
  --global-palette7: #E5E7EB;
  --global-palette8: #F7F9F4;
  --global-palette9: #FFFFFF;
}


/* -----------------------------------------------------------
   2. TIPOGRAFÍA BASE
   Inter ya está cargada en functions.php desde Google Fonts.
   Solo aseguramos que Kadence la use en su propio scope.
   ----------------------------------------------------------- */
body,
.site,
.entry-content,
.wp-block-post-content,
.site-footer,
#colophon {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: 'Inter', -apple-system, sans-serif;
  letter-spacing: -0.02em;
}


/* -----------------------------------------------------------
   3. OCULTAR TÍTULOS DE PÁGINA AUTOMÁTICOS
   Kadence muestra un .entry-title encima del contenido de
   cada página/post. Como cada página ya tiene su propio H1
   dentro del contenido, ese título duplicado se oculta.
   ----------------------------------------------------------- */
.entry-header,
.entry-header .entry-title,
h1.entry-title,
h2.entry-title,
.page-header,
.page-title,
.wp-block-post-title,
.kadence-page-header-wrap {
  display: none !important;
}


/* -----------------------------------------------------------
   4. WRAPPERS — ANCHO COMPLETO
   Solo 2 correcciones quirúrgicas:
   a) #page: elimina boxed-layout de Kadence (si está activo),
      lo que desbloquea el footer en TODAS las páginas.
   b) #primary / .content-area: elimina el layout de sidebar
      (Kadence pone width:70% float:left cuando hay sidebar).
   NO tocamos padding ni #content.site-content — Kadence maneja
   los márgenes correctos por tipo de página (blog, tienda, etc).
   ----------------------------------------------------------- */

/* 4a — Desbloquear boxed layout */
#page,
body #page,
.kadence-site {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 4b — Área de contenido: 100% sin sidebar */
.content-area,
#primary {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 4c — Sidebar oculto */
#secondary,
.widget-area {
  display: none !important;
}


/* -----------------------------------------------------------
   6. LINKS GLOBALES (en cuerpo de texto)
   Solo afecta links sin clase para no tocar nav, botones.
   ----------------------------------------------------------- */
.entry-content a:not([class]),
.wp-block-post-content a:not([class]) {
  color: #78BE20;
  text-decoration: none;
}
.entry-content a:not([class]):hover,
.wp-block-post-content a:not([class]):hover {
  color: #67A81C;
  text-decoration: underline;
}


/* -----------------------------------------------------------
   7. WOOCOMMERCE — TIENDA (ARCHIVO /tienda/)
   Solo layout de grilla. Sin cambios de color agresivos
   para no interferir con lo que Kadence o WC ya traen.
   ----------------------------------------------------------- */

/* Grilla 4 columnas — corrige el default de 3 de WC */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  float: none !important;
  clear: both;
}
@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 380px) {
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
}

/* Card: respetar los colores nativos, solo radio y borde */
.woocommerce ul.products li.product {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #E5E7EB;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

/* Nombre del producto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.3;
}

/* Badge "En oferta" */
.woocommerce span.onsale {
  background: #78BE20 !important;
  color: #2B2B2B !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 100px !important;
  min-height: unset !important;
  min-width: unset !important;
  padding: 4px 12px !important;
  font-size: 0.7rem !important;
  line-height: 1.5 !important;
}

/* Paginación */
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #78BE20 !important;
  color: #2B2B2B !important;
  border-color: #78BE20 !important;
}


/* -----------------------------------------------------------
   8. WOOCOMMERCE — MENSAJES NATIVOS
   ----------------------------------------------------------- */
.woocommerce-message { border-top-color: #78BE20 !important; }
.woocommerce-info { border-top-color: #78BE20 !important; }
.woocommerce-message::before,
.woocommerce-info::before { color: #78BE20 !important; }


/* -----------------------------------------------------------
   9. BREADCRUMBS
   ----------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb,
.kadence-breadcrumbs,
.breadcrumb-trail {
  font-size: 0.8rem;
  color: #6B7280;
  padding: 10px 0;
}
.woocommerce .woocommerce-breadcrumb a,
.kadence-breadcrumbs a,
.breadcrumb-trail a {
  color: #78BE20;
}
.woocommerce .woocommerce-breadcrumb a:hover,
.kadence-breadcrumbs a:hover,
.breadcrumb-trail a:hover {
  color: #67A81C;
}


/* -----------------------------------------------------------
   10. FOCUS VISIBLE — accesibilidad
   ----------------------------------------------------------- */
:focus-visible {
  outline: 3px solid #78BE20 !important;
  outline-offset: 3px !important;
}


/* -----------------------------------------------------------
   11. SELECCIÓN DE TEXTO
   ----------------------------------------------------------- */
::selection {
  background: rgba(120, 190, 32, 0.25);
  color: #2B2B2B;
}


/* -----------------------------------------------------------
   FIN — hn-cl-kadence.css v2
   2026-06-20
   =========================================================== */

/* FOOTER 100% ANCHO GLOBAL — replica hn-home.css sin .home (todas las paginas) */
.site-footer,
#colophon,
.site-footer-wrap {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
.site-bottom-footer-wrap,
.site-footer-row-container-inner,
.site-bottom-footer-inner-wrap,
.site-footer-bottom-section-1,
.footer-widget-area,
.footer-widget-area-inner,
.footer-html,
.footer-html-inner,
.hn-footer,
.hn-footer__grid {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.site-footer .site-container,
.site-footer-row-container-inner > .site-container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Objetivo sin publicar aún — visible en footer, no clickeable (2026-07-05) */
.hn-footer__col .hn-soon {
  color: var(--global-palette5, #6B7280);
  opacity: .7;
  cursor: default;
}
.hn-footer__col .hn-soon em {
  font-style: normal;
  font-size: 0.85em;
}


/* -----------------------------------------------------------
   9. FIX: la regla de la sección 3 (ocultar título automático de
   página/post) usa .entry-header sin scope, así que también
   oculta el .entry-header de cualquier tarjeta anidada tipo
   .loop-entry (ej: carrusel "Publicaciones Similares" dentro de
   un blog post con hero custom). Se restaura solo ahí.
   Bug real detectado con agent-browser 2026-07-07.
   ----------------------------------------------------------- */
.loop-entry .entry-header,
.loop-entry .entry-header .entry-title,
.loop-entry h1.entry-title,
.loop-entry h2.entry-title,
.loop-entry h3.entry-title {
  display: block !important;
}

/* -----------------------------------------------------------
   10. FIX: página de resultados de búsqueda (body.search-results)
   sin CSS propio: hereda colores casi blancos de Kadence
   (--global-palette4 y el color: #fff de h2.entry-title) sobre
   fondo blanco, texto ilegible. Forzado a --text en título,
   fecha, autor, categorías, resumen y "Leer más" de cada tarjeta.
   Bug real detectado con agent-browser 2026-07-07.
   ----------------------------------------------------------- */
body.search-results .entry-title,
body.search-results .entry-title a,
body.search-results .entry-meta,
body.search-results .entry-meta a,
body.search-results .posted-on,
body.search-results .posted-by,
body.search-results .cat-links,
body.search-results .cat-links a,
body.search-results time.entry-date,
body.search-results .entry-summary,
body.search-results .entry-summary *,
body.search-results .post-more-link {
  color: #2B2B2B !important;
}