/*
Theme Name: Percy Theme
Theme URI: https://percy.vistalince.com
Author: Vista Lince
Description: Tema personalizado moderno para el portafolio One Page de Percy.
Version: 1.0.0
Text Domain: percy-theme
*/


/* ==========================================================================
   0. FUENTES LOCALES OPTIMIZADAS (Reemplaza CDN externo)
   ========================================================================== */

/* Fuente Clash Display (Títulos) */
@font-face {
    font-family: 'Clash Display';
    src: url('./fonts/ClashDisplay-Variable.woff2') format('woff2');
    font-weight: 200 700; /* Cubre todos los grosores */
    font-display: swap;   /* Evita el error rojo de fuentes invisibles en Google */
    font-style: normal;
}

/* Fuente Supreme (Textos) */
@font-face {
    font-family: 'Supreme';
    src: url('./fonts/Supreme-Variable.woff2') format('woff2');
    font-weight: 100 900; /* Cubre todos los grosores */
    font-display: swap;
    font-style: normal;
}


/* ==========================================================================
   1. VARIABLES DE ESTILO GLOBAL
   ========================================================================== */
:root {
    /* Tipografías */
    --font-headings: 'Clash Display', sans-serif;
    --font-body: 'Supreme', sans-serif;

    /* Colores */
    --color-bg-primary: #0E1217;       /* Obsidiana suave */
    --color-bg-secondary: #181E24;     /* Tarjetas / Sidebar */
    --color-accent-amber: #FFB300;     /* Ámbar de realce */
    --color-text-primary: #F8FAFC;     /* Texto principal */
    --color-text-secondary: #94A3B8;   /* Texto secundario */
    --color-border: #26313C;           /* Bordes sutiles */
    --color-success: #10B981;          /* Indicadores / Éxito */
    --color-error: #EF4444;            /* Alertas / Errores */

    /* Bordes (Border-Radius) */
    --radius-sm: 4px;                  /* Elementos pequeños (botones, tags) */
    --radius-lg: 8px;                  /* Elementos grandes (tarjetas, sidebar) */

    /* Layout */
    --layout-max-width: 1440px;
    --layout-padding: 64px;

}

/* ==========================================================================
   2. RESET Y ESTILOS GENERALES
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Encabezados */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text-primary);
}

a {
    color: var(--color-accent-amber);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-text-primary);
}

/* ==========================================================================
   3. ESTRUCTURA Y LAYOUT (Ancho Máximo 1280px)
   ========================================================================== */
.site-header {
    background-color: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 48px;
}

.header-container {
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: 24px var(--layout-padding); /* 24px arriba/abajo, dinámico a los lados */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-layout-container {
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: 0 var(--layout-padding); /* 40px arriba/abajo, dinámico a los lados */
    display: flex;
    gap: 40px;
}

/* Clases para estructurar el Sticky Sidebar */
.sticky-sidebar {
    flex: 0 0 350px;
    position: sticky;
    top: 40px;
    height: fit-content;
}

.main-content-scroll {
    flex: 1;
}



/* ==========================================================================
   4. ESTILOS RESPONSIVOS BÁSICOS
   ========================================================================== */
/* Para laptops pequeñas y pantallas medianas (menos de 1200px) */
@media (max-width: 1200px) {
    :root {
        --layout-padding: 40px; /* Reducimos a 40px para aprovechar más pantalla */
    }
}

/* Para tablets (menos de 1024px) */
@media (max-width: 1024px) {
    :root {
        --layout-padding: 32px; 
    }
    .main-layout-container {
        flex-direction: column;
        gap: 30px;
    }
    .sticky-sidebar {
        flex: 1;
        position: relative;
        top: 0;
    }
}

/* Para teléfonos móviles (menos de 768px) */
@media (max-width: 768px) {
    :root {
        --layout-padding: 20px; /* Espacio mínimo de seguridad para celulares */
    }
}

/* ==========================================================================
   5. ESPACIADO ENTRE SECCIONES
   ========================================================================== */
.portfolio-section {
    margin-bottom: 96px; /* Da un espacio amplio y moderno entre cada bloque de contenido */
}

/* Reducimos el espaciado en móviles para pantallas más compactas */
@media (max-width: 768px) {
    .portfolio-section {
        margin-bottom: 50px;
    }
}



/* ==========================================================================
   6. VARIABLES Y REGLAS EXCLUSIVAS PARA MODO CLARO (LIGHT THEME)
   ========================================================================== */
body.light-theme {
    --color-bg-primary: #F1F5F9;       /* Fondo claro (slate-100) */
    --color-bg-secondary: #FFFFFF;     /* Tarjetas y Sidebar blancas */
    --color-text-primary: #0F172A;     /* Texto gris oscuro (slate-900) */
    --color-text-secondary: #475569;   /* Texto secundario (slate-600) */
    --color-border: #E2E8F0;           /* Bordes grises muy suaves (slate-200) */
    --color-success: #059669;          /* Éxito para modo claro */
    --color-error: #DC2626;
}

/* Modificaciones visuales de la cabecera en modo claro */
body.light-theme .site-header {
    background-color: rgba(241, 245, 249, 0.9);
}

body.light-theme .logo-isotipo {
    color: #0E1217 !important; /* Asegura contraste oscuro de la "P" sobre ámbar */
}

body.light-theme .hamburger-line {
    background-color: #0F172A; /* Menú hamburguesa oscuro en modo claro */
}

/* --- ANIMACIÓN Y COLORES DEL SWITCHER EN MODO CLARO --- */
body.light-theme .theme-switcher .icon-moon {
    color: #475569; /* Gris apagado cuando el botón se desliza al sol */
}

body.light-theme .theme-switcher .icon-sun {
    color: #0E1217; /* Negro/Oscuro cuando el botón se posiciona sobre el sol */
}

body.light-theme .switcher-thumb {
    transform: translateX(26px); /* Desplaza horizontalmente el botón hacia el sol */
}

/* --- CORRECCIÓN DE EFECTO HOVER DE TARJETAS EN MODO CLARO (UX/UI FIX) --- */
@media (hover: hover) {
    body.light-theme .about-card:hover,
    body.light-theme .service-card:hover,
    body.light-theme .service-row-card:hover,
    body.light-theme .portfolio-bento-card:hover,
    body.light-theme .testimonial-card:hover,
    body.light-theme .sidebar-profile-card:hover,
    body.light-theme .sidebar-wrapper:hover,
    body.light-theme .timeline-card:hover {
        background-color: #F8FAFC !important; /* Evita el fondo oscuro en modo claro */
        border-color: rgba(255, 179, 0, 0.35) !important; /* Borde ámbar suave, no tan fuerte */
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important; /* Sombreado limpio de elevación */
        transform: translateY(-6px); /* Mantiene el efecto flote en modo claro */
    }
    
    /* Modificaciones de visualización específicas de single.php en Modo Claro */
    body.light-theme .nav-links-grid a {
        color: var(--color-text-primary); /* Asegura contraste del texto negro en modo claro */
    }
    
    body.light-theme .nav-links-grid a:hover {
        color: var(--color-accent-amber); /* Mantiene iluminación ámbar en hover */
    }
}



/* ==========================================================================
   ESTILOS GLOBALES DE CONTENIDO (RESET Y MAQUETADO DE GUTENBERG)
   ========================================================================== */
.entry-content {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1vw + 0.8rem, 1.12rem);
    color: var(--color-text-secondary);
    line-height: 1.8; /* Interlineado confortable para lectura */
}

/* 1. Párrafos (Separación y respiración) */
.entry-content p {
    margin-top: 0;
    margin-bottom: 24px; /* Espaciado idóneo entre bloques de texto */
}

/* Negrita sutil */
.entry-content strong,
.entry-content b {
    color: var(--color-text-primary);
    font-weight: 700;
}

/* 2. Títulos Internos (Jerarquía) */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-family: var(--font-headings);
    color: var(--color-text-primary);
    margin-top: 48px;
    margin-bottom: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.entry-content h2 { font-size: clamp(1.6rem, 2.5vw, 2.1rem); }
.entry-content h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); }

/* 3. Listados (Indentación y viñetas) */
.entry-content ul,
.entry-content ol {
    margin-top: 0;
    margin-bottom: 28px;
    padding-left: 24px; /* Sangría de indentación */
}

.entry-content li {
    margin-bottom: 10px; /* Separación saludable entre viñetas */
    padding-left: 4px;
}

/* Estilo para los marcadores numéricos o viñetas */
.entry-content ul li::marker {
    color: var(--color-accent-amber); /* Viñetas color ámbar sutil */
}

.entry-content ol li::marker {
    font-family: var(--font-headings);
    color: var(--color-accent-amber);
    font-weight: 600;
}

/* 4. Citas (Blockquotes de Gutenberg) */
.entry-content blockquote,
.entry-content .wp-block-quote {
    margin: 40px 0;
    padding: 10px 0 10px 24px;
    border-left: 3px solid var(--color-accent-amber); /* Borde de cita ámbar */
    font-style: italic;
    font-size: 1.18rem;
    color: var(--color-text-primary);
}

.entry-content blockquote p {
    margin-bottom: 0;
}

.entry-content blockquote cite,
.entry-content .wp-block-quote cite {
    display: block;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-style: normal;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-top: 10px;
}

/* 5. Tablas Nativas y de Gutenberg (Estilo Limpio) */
.entry-content table,
.entry-content .wp-block-table {
    width: 100%;
    border-collapse: collapse;
    margin: 40px 0;
    font-size: 0.95rem;
}

.entry-content th,
.entry-content td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.entry-content th {
    font-family: var(--font-headings);
    color: var(--color-text-primary);
    font-weight: 600;
    background-color: var(--color-bg-secondary);
}

.entry-content td {
    color: var(--color-text-secondary);
}

/* Filas alternas sutiles */
.entry-content tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* 6. Leyendas de Imágenes (Captions) */
.entry-content figcaption,
.entry-content .wp-block-image figcaption {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    text-align: center;
    margin-top: 12px;
    margin-bottom: 24px;
}

/* 7. Bloques de Código o Preformateado */
.entry-content pre,
.entry-content .wp-block-code {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    padding: 20px;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    margin-bottom: 28px;
}

.entry-content code {
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--color-accent-amber);
    background-color: rgba(255, 179, 0, 0.05);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}