/*
Theme Name: Fauntec Child
Theme URI: https://fauntec.cl/
Description: Child theme de Astra para fauntec.cl — diseño "tech moderno" (fase D1). Paleta azul profundo/acento, tipografía Inter, componentes .fauntec-* para la home (D2).
Author: Fauntec
Author URI: https://fauntec.cl/
Template: astra
Version: 1.1.0
Text Domain: fauntec-child
*/

/* =========================================================================
   1. Tokens de marca (toda la paleta en un solo lugar)
   ========================================================================= */
:root {
  --fauntec-primary: #0B2A5B;        /* azul profundo: header, footer, bloques oscuros */
  --fauntec-primary-dark: #081F44;   /* variante oscura (submenús, hover profundo) */
  --fauntec-accent: #2E7DF7;         /* azul acento (decorativo: gradientes, highlight) */
  --fauntec-accent-strong: #2563EB;  /* acento accesible AA (5.17:1 vs blanco) para links/botones */
  --fauntec-accent-dark: #1B5FD0;    /* hover de links/botones (AA) */
  --fauntec-ink: #0F172A;            /* titulares */
  --fauntec-body: #475569;           /* texto de cuerpo (7.2:1 vs fondo claro) */
  --fauntec-border: #E2E8F0;         /* bordes suaves */
  --fauntec-bg-soft: #F8FAFC;        /* fondo claro */
  --fauntec-white: #FFFFFF;
  --fauntec-radius: 8px;             /* botones y tarjetas redondeados 8px */
  --fauntec-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* =========================================================================
   2. Puente con Astra: refuerzo duro de la paleta sobre las variables
      globales. ":root:root" sube especificidad para ganar al CSS dinámico
      de Astra sin importar el orden de impresión de hojas.
   ========================================================================= */
:root:root {
  --ast-global-color-0: #2563EB; /* acento interactivo (links, botones) */
  --ast-global-color-1: #1B5FD0; /* hover de enlaces */
  --ast-global-color-2: #0F172A; /* titulares */
  --ast-global-color-3: #475569; /* texto de cuerpo */
  --ast-global-color-5: #F8FAFC; /* fondo claro alterno */
  --ast-global-color-7: #E2E8F0; /* bordes */
}

/* =========================================================================
   3. Base: tipografía Inter + colores de texto
   ========================================================================= */
body, button, input, select, textarea,
.ast-button, .ast-custom-button {
  font-family: var(--fauntec-font);
}
body { color: var(--fauntec-body); }
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .entry-content h1, .entry-content h2, .entry-content h3 {
  color: var(--fauntec-ink);
  font-family: var(--fauntec-font);
}

/* =========================================================================
   4. Enlaces (base del sitio — header/footer los sobreescriben abajo)
   ========================================================================= */
a { color: var(--fauntec-accent-strong); }
a:hover, a:focus { color: var(--fauntec-accent-dark); }

/* =========================================================================
   5. Botones: Astra + Gutenberg + WooCommerce (8px, acento AA)
   ========================================================================= */
.ast-button, .ast-custom-button,
.wp-block-button__link,
button[type="submit"], input[type="submit"],
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
  background-color: var(--fauntec-accent-strong);
  border-color: var(--fauntec-accent-strong);
  color: var(--fauntec-white);
  border-radius: var(--fauntec-radius);
}
.ast-button:hover, .ast-custom-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
  background-color: var(--fauntec-accent-dark);
  border-color: var(--fauntec-accent-dark);
  color: var(--fauntec-white);
}

/* =========================================================================
   6. Header — azul profundo con texto claro (Astra Header Footer Builder)
   ========================================================================= */
.ast-primary-header-bar, .main-header-bar, .ast-above-header-bar {
  background-color: var(--fauntec-primary);
}
.site-header .site-title a,
.site-header .site-title a:hover,
.site-header .site-title a:focus {
  color: var(--fauntec-white);
}
.main-header-menu > .menu-item > .menu-link { color: #E2E8F0; }
.main-header-menu > .menu-item:hover > .menu-link,
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.focus > .menu-link {
  color: var(--fauntec-white);
}
.main-header-menu .sub-menu { background-color: var(--fauntec-primary-dark); }
.main-header-menu .sub-menu .menu-link { color: #E2E8F0; }
.main-header-menu .sub-menu .menu-link:hover { color: var(--fauntec-white); }
.ast-mobile-menu-trigger, .menu-toggle, .main-header-menu-toggle { color: #E2E8F0; }

/* =========================================================================
   7. Footer — azul profundo
   ========================================================================= */
.site-footer { background-color: var(--fauntec-primary); color: #CBD5E1; }
.site-footer a { color: var(--fauntec-white); }
.site-footer a:hover, .site-footer a:focus { color: #BFDBFE; }
.site-footer .ast-small-footer { border-top: 1px solid rgba(255, 255, 255, 0.12); }

/* =========================================================================
   8. Componentes para la home (D2) — listos para usar
   ========================================================================= */
/* Hero: gradiente azul profundo -> acento, texto claro */
.fauntec-hero {
  background: linear-gradient(135deg, var(--fauntec-primary) 0%, var(--fauntec-accent) 100%);
  color: var(--fauntec-white);
  padding: 72px 24px;
  border-radius: var(--fauntec-radius);
}
.fauntec-hero h1, .fauntec-hero h2, .fauntec-hero h3 { color: var(--fauntec-white); }
.fauntec-hero p { color: #DBEAFE; }
.fauntec-hero .wp-block-button__link { background-color: var(--fauntec-white); color: var(--fauntec-primary); }
.fauntec-hero .wp-block-button__link:hover { background-color: #E2E8F0; color: var(--fauntec-primary); }

/* Cards: grid 3 columnas responsive (3 -> 2 -> 1) */
.fauntec-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fauntec-cards > * {
  background: var(--fauntec-white);
  border: 1px solid var(--fauntec-border);
  border-radius: var(--fauntec-radius);
  padding: 24px;
}
@media (min-width: 922px) and (max-width: 1199px) {
  .fauntec-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 921px) {
  .fauntec-cards { grid-template-columns: 1fr; }
}

/* Benefits: fila de beneficios con auto-fit */
.fauntec-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.fauntec-benefits > * {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: var(--fauntec-radius);
  background: var(--fauntec-bg-soft);
  border: 1px solid var(--fauntec-border);
}

/* =========================================================================
   9. Detalles WooCommerce / formularios
   ========================================================================= */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"],
input[type="number"], input[type="password"], textarea, select,
.select2-container .select2-selection {
  border-color: var(--fauntec-border);
  border-radius: var(--fauntec-radius);
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--fauntec-ink);
  font-weight: 600;
}
.woocommerce span.onsale {
  background-color: var(--fauntec-accent-strong);
  border-radius: var(--fauntec-radius);
}

/* =========================================================================
   10. Home D2 — secciones de la página de inicio
   ========================================================================= */
/* Espaciado entre secciones */
.fauntec-hero { margin: 0 0 40px; }
.fauntec-benefits { margin: 0 0 48px; }
.fauntec-featured { margin: 0 0 24px; }

/* La home no muestra el título de página ("Inicio") sobre el hero */
.home .entry-header,
.home .ast-single-entry-banner { display: none; }

/* Beneficios: título + detalle en columna */
.fauntec-benefits > * { flex-direction: column; gap: 4px; }
.fauntec-benefits strong { color: var(--fauntec-ink); font-size: 1rem; line-height: 1.4; }
.fauntec-benefits span { color: var(--fauntec-body); font-size: 0.92rem; line-height: 1.5; }

/* Hero: menos aire en móvil */
@media (max-width: 544px) {
  .fauntec-hero { padding: 48px 20px; margin-bottom: 32px; }
  .fauntec-hero h1 { font-size: 1.9rem; line-height: 1.25; }
}

/* Destacados: encabezado y grilla [products] */
.fauntec-featured h2 { margin: 0 0 8px; }
.fauntec-featured ul.products { margin-bottom: 0; }

/* Ocultar el estado vacío de [products] SOLO en la sección destacados
   (con 0 productos no debe verse el aviso "No products were found…") */
.fauntec-featured .woocommerce-info,
.fauntec-featured .woocommerce-no-products-found { display: none; }