/*
Theme Name: El Chamizo
Theme URI: https://elchamizovalladolid.es
Description: Child theme de Blocksy para El Chamizo, espacio juvenil de ocio, club y apoyo al estudio para adolescentes (12-16 años) en Huerta del Rey, Valladolid. Incluye home con 3 variantes de diseño, plantilla de páginas de servicio y ficha de actividades (CPT).
Author: El Chamizo
Template: blocksy
Version: 1.0.0
Text Domain: elchamizo
Domain Path: /languages
*/

/* =========================================================
   1. TOKENS DE DISEÑO (fallback)
   -----------------------------------------------------------
   Estos valores son la base por defecto: la identidad
   "cultura urbana" que comparten las 3 variantes (A1/A2/A3).
   Cada variant-aN.css redefine estas variables en :root —
   con los mismos valores de color/tipografía/forma, ya que
   las 3 variantes solo difieren en maquetación, no en lenguaje
   visual.
   ========================================================= */
:root {
    /* Color */
    --chz-color-bg: #302E2E;
    --chz-color-bg-alt: #3A3838;
    --chz-color-bg-light: #f5f5f0;
    --chz-color-text: #f5f5f5;
    --chz-color-text-secondary: #a8a8a8;
    --chz-color-accent: #E8FF3A;
    --chz-color-accent-contrast: #0a0a0a;
    --chz-color-accent-2: #ffffff;
    --chz-color-border: #2e2e2e;

    /* Tipografía */
    --chz-font-heading: 'Anton', 'Archivo Black', system-ui, sans-serif;
    --chz-font-body: 'Space Grotesk', system-ui, sans-serif;
    --chz-h1-size: 88px;
    --chz-h1-size-mobile: 48px;

    /* Forma y espaciado */
    --chz-radius-sm: 0px;
    --chz-radius-md: 0px;
    --chz-radius-lg: 0px;
    --chz-border-width: 3px;
    --chz-section-padding: 80px;
    --chz-section-padding-mobile: 48px;
    --chz-container-width: 1200px;
    --chz-transition: 0.2s ease;
}

/* =========================================================
   2. RESET LIGERO
   ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
picture,
svg,
video,
iframe {
    display: block;
    max-width: 100%;
    height: auto;
}

/* =========================================================
   3. ACCESIBILIDAD
   ========================================================= */

/* Oculta visualmente pero mantiene el contenido para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Foco visible consistente en toda la web */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--chz-color-accent);
    outline-offset: 2px;
}

/* Desplazamiento suave al pulsar enlaces ancla (p. ej. #pre-inscripcion) */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   4. UTILIDADES COMPARTIDAS
   ========================================================= */

/* Contenedor centrado estándar */
.chz-container {
    width: 100%;
    max-width: var(--chz-container-width);
    margin-inline: auto;
    padding-inline: 24px;
}

/* Sección con padding vertical controlado por variante */
.chz-section {
    padding-block: var(--chz-section-padding-mobile);
}

@media (min-width: 768px) {
    .chz-section {
        padding-block: var(--chz-section-padding);
    }
}

/* Escapa del contenedor para imágenes/vídeos a sangre (full-bleed) */
.chz-breakout {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Texto placeholder pendiente de contenido definitivo */
.chz-placeholder {
    opacity: 0.6;
    font-style: italic;
}