/*
Theme Name:        GeneratePress Child
Theme URI:         https://marlonmelara.com/
Description:       Tema hijo personalizado para el blog de Marlon Melara, basado en GeneratePress.
Author:            Marlon Melara
Author URI:        https://marlonmelara.com/
Template:          generatepress
Version:           1.0.0
Text Domain:       generatepress-child
*/

/* ==========================================================================
   Variables CSS globales y personalizaciones (Metodología BEM)
   ========================================================================== */
:root {
    --color-primary: #4801dc; /* Tomado de la paleta del blog */
    --color-secondary: #ffa954;
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* ==========================================================================
   Estilos para el Cuerpo de los Posts (Minimalista & Moderno)
   ========================================================================== */

/* Bloque contenedor principal del artículo */
.post-content {
    --space-base: 1.5rem;
    --line-height-reading: 1.75;
    
    max-width: 720px; /* Ancho óptimo para lectura (60-75 caracteres por línea) */
    margin: 0 auto;
    padding: var(--space-base);
    font-family: var(--font-main);
    color: #2c3e50; /* Color suave para evitar el contraste agresivo del negro puro */
}

/* --- Elementos de Encabezado --- */

/* h2 actúa como el título principal interno en el editor clásico */
.post-content__h2 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    margin-top: calc(var(--space-base) * 2);
    margin-bottom: var(--space-base);
    color: #1a1a1a;
    letter-spacing: -0.02em;
}

.post-content__h3 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    margin-top: calc(var(--space-base) * 1.5);
    margin-bottom: calc(var(--space-base) * 0.75);
    color: #2c3e50;
}

.post-content__h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: var(--space-base);
    margin-bottom: calc(var(--space-base) * 0.5);
}

/* --- Texto y Párrafos --- */

.post-content__p {
    font-size: 1.125rem; /* 18px, ideal para pantallas de escritorio y móviles */
    line-height: var(--line-height-reading);
    margin-bottom: var(--space-base);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Énfasis semánticos modernos */
.post-content__strong {
    font-weight: 700;
    color: #1a1a1a;
}

.post-content__em {
    font-style: italic;
    color: #555555;
}

/* Enlaces limpios con microinteracción */
.post-content__a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 2px solid rgba(72, 1, 220, 0.15); /* Subrayado sutil */
    transition: all 0.2s ease-in-out;
}

.post-content__a:hover,
.post-content__a:focus {
    color: #310099;
    border-bottom-color: var(--color-primary);
    background-color: rgba(72, 1, 220, 0.04); /* Resaltado moderno al pasar el cursor */
}

/* --- Listas Estilizadas --- */

.post-content__ul,
.post-content__ol {
    margin-bottom: var(--space-base);
    padding-left: calc(var(--space-base) * 1.25);
}

.post-content__li {
    font-size: 1.125rem;
    line-height: var(--line-height-reading);
    margin-bottom: calc(var(--space-base) * 0.5);
}

/* --- Bloques de Citas (Blockquotes) --- */

.post-content__blockquote {
    margin: calc(var(--space-base) * 1.5) 0;
    padding: calc(var(--space-base) * 0.75) var(--space-base);
    border-left: 4px solid var(--color-primary);
    background-color: #f9f9fb;
    font-style: italic;
}

.post-content__blockquote .post-content__p {
    font-size: 1.25rem;
    color: #4a5568;
    margin-bottom: 0;
}

.post-content__cite {
    display: block;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #718096;
    margin-top: calc(var(--space-base) * 0.5);
}

/* --- Elementos Multimedia --- */

.post-content__img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 6px; /* Esquinas suavizadas de tendencia moderna */
    margin: calc(var(--space-base) * 1.5) auto;
}

/* Clases de alineación estándar de WordPress aplicadas al bloque */
.post-content .aligncenter {
    margin-left: auto;
    margin-right: auto;
}

/* --- Tablas de Datos Minimalistas --- */

.post-content__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-base);
    font-size: 1rem;
}

.post-content__th,
.post-content__td {
    padding: calc(var(--space-base) * 0.5) calc(var(--space-base) * 0.75);
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.post-content__th {
    font-weight: 600;
    background-color: #f8fafc;
    color: #1a1a1a;
}

.post-content__table tbody tr:hover {
    background-color: #f8fafc; /* Efecto cebra sutil interactivo */
}

/* --- Adaptabilidad Móvil (Responsive) --- */
@media (max-width: 768px) {
    .post-content {
        --space-base: 1.2rem;
    }
    
    .post-content__h2 { font-size: 1.75rem; }
    .post-content__h3 { font-size: 1.35rem; }
    .post-content__p, 
    .post-content__li { font-size: 1.05rem; }
}