/*
Theme Name: Cantik CRM
Theme URI: https://cantikcrm.es
Template: astra
Author: Cantik CRM
Description: Child theme de Astra para la web de Cantik CRM. Sistema de diseño completo (Hanken Grotesk, paleta burdeos/crema), área de configuración, shortcodes de página, CPT de clientes e importador de contenido.
Version: 1.0.0
Text Domain: cantik
*/

/* ==========================================================================
   PUENTE ASTRA ↔ CANTIK
   --------------------------------------------------------------------------
   Las hojas cantik-styles.css y cantik-components.css (copiadas 1:1 del
   diseño original) definen todos los tokens en :root. Este bloque re-declara
   los tokens de color y tipografía leyendo las variables de la Paleta Global
   de Astra (--ast-global-color-0 … 8), de modo que al cambiar un color en
   Apariencia → Personalizar → Colores, cambia toda la web.

   Mapa de la paleta de Astra (configúrala así en el Personalizador):
     0 → Burdeos principal   #A9165E
     1 → Burdeos oscuro      #86114A
     2 → Tinta / titulares   #26141C
     3 → Texto suave         #6B5860
     4 → Fondo crema         #FBF8F6
     5 → Fondo crema 2       #F4ECEA
     6 → Ciruela (plum)      #2A0E1C
     7 → Blush               #FBEAF1
     8 → Melocotón (peach)   #FBB89A

   Las familias tipográficas se sincronizan por PHP (inc/astra-bridge.php),
   que lee las opciones reales de Astra y las imprime como variables.
   ========================================================================== */
:root {
  --burgundy:      var(--ast-global-color-0, #A9165E);
  --burgundy-deep: var(--ast-global-color-1, #86114A);
  --ink:           var(--ast-global-color-2, #26141C);
  --ink-soft:      var(--ast-global-color-3, #6B5860);
  --cream:         var(--ast-global-color-4, #FBF8F6);
  --cream-2:       var(--ast-global-color-5, #F4ECEA);
  --plum:          var(--ast-global-color-6, #2A0E1C);
  --blush:         var(--ast-global-color-7, #FBEAF1);
  --peach:         var(--ast-global-color-8, #FBB89A);

  /* Derivados que siguen al color principal */
  --grad: linear-gradient(120deg, var(--burgundy) 0%, #C42D74 45%, var(--peach) 110%);

  /* Interlineado de encabezados (ajustable desde aquí) */
  --lh-head:    1;    /* h1–h4 por defecto */
  --lh-head-lg: 1;    /* h1 y h2 */
  --lh-head-sm: 1.05; /* h3 y h4 */
}

/* Astra: neutralizar estilos de contenido que interfieren con las páginas
   de shortcode a ancho completo. El header y el footer se montan desde el
   Personalizador de Astra y conservan sus propios estilos. */
.cantik-page .ast-container,
.cantik-page .site-content .ast-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Astra pone display:flex en el contenedor del contenido (para sidebars);
   eso convierte nuestro <main> en un flex item que encoge a su contenido
   y se queda pegado a la izquierda. Lo devolvemos a bloque y forzamos que
   todos los ancestros ocupen el 100% para que los .wrap centren bien. */
.cantik-page .site-content .ast-container { display: block; }
.cantik-page #primary,
.cantik-page .site-main,
.cantik-page main.cantik-single,
.cantik-page .ast-article-single {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  float: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Astra añade margin-bottom:1.6em a los párrafos del contenido; el diseño
   Cantik espacia con margin-top (.article > *), así que lo anulamos. */
body.cantik-body .entry-content p,
body.cantik-body .entry-content .wp-audio-shortcode,
body.cantik-body .entry-content .wp-embedded-audio,
body.cantik-body .entry-content .wp-embedded-video,
body.cantik-body .entry-content .wp-video {
  margin-bottom: 0;
}

/* Header y footer a la anchura de contenido de Astra.
   --maxw la sincroniza inc/astra-bridge.php con el ajuste
   "Anchura del contenedor" del Personalizador (1400px por defecto);
   si cambias ese valor en Astra, el header y el footer le siguen.
   Con !important para imponerse al CSS dinámico de Astra cuando la
   fila está configurada como "Ancho completo" (max-width:100%). */
#masthead .ast-container,
#masthead .ast-builder-grid-row-container-inner,
.main-header-bar .ast-container,
.site-header-focus-item + .ast-breadcrumbs-wrapper,
.site-footer .ast-container,
.site-footer .ast-builder-grid-row-container-inner {
  max-width: var(--maxw, 1400px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 35px;
  padding-right: 35px;
}
/* Evitar doble sangrado cuando Astra anida contenedor + fila con padding. */
#masthead .ast-container .ast-builder-grid-row,
.site-footer .ast-container .ast-builder-grid-row {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 640px) {
  #masthead .ast-container,
  #masthead .ast-builder-grid-row-container-inner,
  .main-header-bar .ast-container,
  .site-header-focus-item + .ast-breadcrumbs-wrapper,
  .site-footer .ast-container,
  .site-footer .ast-builder-grid-row-container-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.cantik-page .entry-header { display: none; }
.cantik-page .site-content { padding: 0; }
.cantik-page article .entry-content { margin: 0; }
.cantik-page article .entry-content > .wp-block-shortcode,
.cantik-page article .entry-content > p:empty { margin: 0; }

/* El body de WordPress recibe la clase .cantik-body desde functions.php
   para heredar fondo y tipografía del sistema de diseño. */
body.cantik-body {
  background: var(--cream);
  font-family: var(--font-body);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
 * Foco en enlaces y botones: sin borde en ningún caso (ni ratón ni teclado).
 * Astra y WordPress aplican :focus a secas, que es lo que produce el borde
 * molesto al clicar; lo anulamos también en :focus-visible.
 * ------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------
 * FOCO Y BORDES EN ENLACES — solución de raíz
 *
 * El problema: varios <a> del diseño llevan borde propio (.btn-ghost,
 * .filter-chip, etc.) y Astra añade su anillo de foco (outline/box-shadow)
 * a los enlaces del menú. Al enfocar o clicar, esos bordes se muestran y,
 * como el .btn los tiene en su `transition`, se ven aparecer y desvanecerse.
 *
 * Solución:
 *  1) Ningún elemento anima su borde/sombra al enfocar (transición cero).
 *  2) Se elimina outline y box-shadow de foco en TODOS los enlaces y botones.
 *  3) Los enlaces del MENÚ de Astra nunca tienen borde (ni ancho ni color).
 * ------------------------------------------------------------------------ */

/* 1 + 2 — quitar el anillo de foco de enlaces y botones en todo el sitio */
a:focus, a:focus-visible, a:active,
button:focus, button:focus-visible,
.btn:focus, .btn:focus-visible,
[role="button"]:focus, [role="button"]:focus-visible,
.ast-button:focus, .wp-block-button__link:focus {
  outline: none !important;
  box-shadow: none !important;
  transition-property: transform, background, color !important;
}

/* 3 — enlaces y botón hamburguesa del menú/cabecera: cero borde en cualquier
 *     estado (el diseño no usa bordes en el menú; los pinta Astra al enfocar) */
.site-header a,
.site-header a:hover,
.site-header a:focus,
.site-header a:active,
.main-header-menu a,
.main-header-menu a:focus,
.ast-builder-menu a,
.ast-builder-menu a:focus,
.menu-item > a,
.menu-item > a:focus,
.ast-menu-toggle,
.ast-menu-toggle:focus,
.menu-toggle,
.menu-toggle:focus,
.site-footer a:focus {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* En campos de formulario mantenemos el halo suave al enfocar, para que se
   vea dónde estás escribiendo (esto no es el borde molesto de los botones). */
body.cantik-body input:focus,
body.cantik-body select:focus,
body.cantik-body textarea:focus {
  outline: none;
  border-color: var(--burgundy);
  box-shadow: 0 0 0 3px rgba(169, 22, 94, 0.18);
}