/*
Theme Name: RED-ES. Red de Artes Escénicas y Musicales
Theme URI: https://www.red-es.org
Author: PreciseFuture
Author URI: https://www.precisefuture.com
Description: Theme for RED-ES — Red de Artes Escénicas y Musicales de España.
Version: 1.0.0
Text Domain: red-es
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
License URI: https://www.precisefuture.com
*/

/* ==========================================================================
   Google Fonts
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* Brand */
    --pf-redes-primary: #C91517;
    --pf-redes-primary-hover: #B90507;
    --pf-redes-primary-light: #E8333A;

    /* Backgrounds */
    --pf-redes-bg: #f7f7ff;
    --pf-redes-bg-alt: #efefff;
    --pf-redes-bg-dark: #1a1a1a;
    --pf-redes-bg-input: #efefff;

    /* Text */
    --pf-redes-text: #171723;
    --pf-redes-text-light: #909090;
    --pf-redes-text-inverse: #ffffff;

    /* Borders */
    --pf-redes-border: #cccccc;
    --pf-redes-border-light: #eeeeee;

    /* Accents */
    --pf-redes-accent-blue: #e8f0fe;

    /* Status */
    --pf-redes-success: #27ae60;
    --pf-redes-warning: #f39c12;
    --pf-redes-error: #e74c3c;

    /* Typography */
    --pf-redes-font: "Open Sans", sans-serif;
    --pf-redes-font-size-xs: 0.75rem;
    --pf-redes-font-size-sm: 0.875rem;
    --pf-redes-font-size-md: 1rem;
    --pf-redes-font-size-lg: 1.25rem;
    --pf-redes-font-size-xl: 1.5rem;
    --pf-redes-font-size-xxl: 2rem;

    /* Spacing */
    --pf-redes-spacing-xs: 4px;
    --pf-redes-spacing-sm: 8px;
    --pf-redes-spacing-md: 16px;
    --pf-redes-spacing-lg: 24px;
    --pf-redes-spacing-xl: 32px;
    --pf-redes-spacing-xxl: 48px;
    --pf-redes-gap: 24px;

    /* UI */
    --pf-redes-radius: 0px;
    --pf-redes-transition: 0.3s ease;
    --pf-redes-max-width: 1600px;
}

/* ==========================================================================
   Minimal Reset
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--pf-redes-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--pf-redes-text);
    background-color: var(--pf-redes-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--pf-redes-primary);
    text-decoration: none;
    transition: color var(--pf-redes-transition);
}

a:hover,
a:focus {
    color: var(--pf-redes-primary-hover);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.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;
}

.site-container {
    width: 100%;
    max-width: var(--pf-redes-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pf-redes-spacing-md);
    padding-right: var(--pf-redes-spacing-md);
}

/* ==========================================================================
   Accessibility — Reduced Motion
   ========================================================================== */

@keyframes pf-redes-fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.pf-redes-animate-in {
    animation: pf-redes-fadeInUp 0.4s ease-out forwards;
    opacity: 0;
}

/* Progress bar — thin red line above results bar */
.pf-redes-progress-bar {
    width: 0;
    height: 3px;
    background: var(--pf-redes-primary, #C91517);
    pointer-events: none;
    transition: width 0.3s ease-out;
    margin-bottom: 2px;
}
.pf-redes-progress-bar.active {
    width: 70%;
    transition: width 2s ease-out;
}
.pf-redes-progress-bar.done {
    width: 100%;
    transition: width 0.2s ease-out;
}
.pf-redes-progress-bar.hide {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}