/**
 * reader.css — Estilos de lectura tipo periódico para artículos (single).
 *
 * Aplica SOLO al contenido del artículo (.entry-content dentro de single),
 * sin tocar el resto del tema. Mejora la legibilidad con:
 *   - columna de lectura cómoda (~70 caracteres)
 *   - interlineado generoso y párrafos espaciados
 *   - primera letra capital opcional
 *   - citas, imágenes y enlaces diferenciados
 *   - imagen destacada al inicio del artículo
 *
 * + Controles de tamaño de fuente (A- / A+ / Restablecer) accesibles,
 *   con persistencia en localStorage.
 */

/* =========================================================
   Tipografía del artículo (cabecera + cuerpo)
   ========================================================= */
.single-post .entry-title,
.single .entry-title {
    font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 2.6rem);  /* base h1 */
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0.4rem 0 1rem;
    color: #1f2933;
}

.single-post .entry-content,
.single .entry-content {
    font-size: 1.9rem;           /* base = nivel por defecto 'xl' */
    line-height: 1.65;
    color: #2b3641;
    width: 100%;                 /* ocupa toda la columna, sin huecos laterales */
    margin-left: 0;
    margin-right: 0;
}

/* Párrafos: espaciado vertical generoso */
.single .entry-content p {
    margin: 0 0 1.4em;
    hyphens: auto;
}
.single .entry-content > p:first-child {
    margin-top: 0;
}

/* Primera letra capital del primer párrafo (look periódico) */
.single .entry-content > p:first-of-type:not(:has(figure, img)):first-letter {
    font-family: 'Alegreya', Georgia, serif;
    font-size: 3.6em;
    font-weight: 700;
    line-height: 0.85;
    float: left;
    margin: 0.1em 0.1em 0 0;
    color: #DC143C;
}

/* =========================================================
   Elementos tipográficos enriquecidos
   ========================================================= */
.single .entry-content h2,
.single .entry-content h3,
.single .entry-content h4 {
    font-family: 'Alegreya', Georgia, serif;
    line-height: 1.3;
    color: #1f2933;
    margin: 1.8em 0 0.7em;
}
.single .entry-content h2 { font-size: 1.6em; font-weight: 700; }
.single .entry-content h3 { font-size: 1.3em; font-weight: 700; }
.single .entry-content h4 { font-size: 1.1em; font-weight: 600; }

.single .entry-content a {
    color: #B11233;
    text-decoration: underline;
    text-decoration-color: rgba(177, 18, 51, 0.3);
    text-underline-offset: 2px;
}
.single .entry-content a:hover {
    color: #DC143C;
    text-decoration-color: #DC143C;
}

.single .entry-content blockquote {
    border-left: 4px solid #DC143C;
    margin: 1.6em 0;
    padding: 0.6em 0 0.6em 1.4em;
    font-family: 'Alegreya', Georgia, serif;
    font-size: 1.2em;
    font-style: italic;
    color: #52606d;
    background: transparent;
}

.single .entry-content img,
.single .entry-content figure {
    border-radius: 4px;
}
.single .entry-content img {
    height: auto;
}

.single .entry-content ul,
.single .entry-content ol {
    margin: 0 0 1.4em;
    padding-left: 1.5em;
}
.single .entry-content li {
    margin-bottom: 0.4em;
}

/* Anuncios dentro del contenido: no rompan el ritmo */
.single .entry-content .adsense-post-300,
.single .entry-content .adsense-post-full {
    margin: 1.8em auto;
}

/* =========================================================
   Imagen destacada al inicio del artículo
   ========================================================= */
.fr-featured-image {
    width: 100%;                 /* ocupa toda la columna, sin huecos laterales */
    margin: 0 0 1.8em;
    padding: 0;
}
.fr-featured-image__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(31, 41, 51, 0.08), 0 4px 12px rgba(31, 41, 51, 0.06);
}
.fr-featured-image__caption {
    margin-top: 0.5em;
    font-size: 0.85em;
    color: #7b8794;
    font-style: italic;
    text-align: left;
    line-height: 1.4;
}

/* =========================================================
   Barra de controles de tamaño de fuente
   ========================================================= */
.fr-reader-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    width: 100%;                 /* ocupa toda la columna */
    margin: 0 0 1.2rem;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    color: #7b8794;
}

.fr-reader-controls .fr-label {
    margin-right: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}

.fr-reader-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 32px;
    padding: 0 0.6rem;
    border: 1px solid #e4e7eb;
    background: #ffffff;
    color: #52606d;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Open Sans', sans-serif;
    line-height: 1;
}
.fr-reader-controls button:hover {
    border-color: #DC143C;
    color: #DC143C;
    background: #FDECEF;
}
.fr-reader-controls button:focus-visible {
    outline: 3px solid rgba(220, 20, 60, 0.4);
    outline-offset: 2px;
}
.fr-reader-controls button[aria-pressed="true"] {
    background: #DC143C;
    border-color: #DC143C;
    color: #fff;
}

.fr-reader-controls .fr-aa {
    font-size: 1rem;
    font-weight: 700;
}
.fr-reader-controls .fr-reset {
    font-size: 0.8rem;
}

/* =========================================================
   Tamaños de fuente aplicados vía data-attribute en <article>
   ========================================================= */
.single article[data-fr-size="sm"] .entry-content { font-size: 1.45rem; }
.single article[data-fr-size="md"] .entry-content { font-size: 1.6rem; }
.single article[data-fr-size="lg"] .entry-content { font-size: 1.75rem; }
.single article[data-fr-size="xl"] .entry-content { font-size: 1.9rem; }
.single article[data-fr-size="xxl"] .entry-content { font-size: 2.1rem; line-height: 1.6; }
.single article[data-fr-size="xxxl"] .entry-content { font-size: 2.3rem; line-height: 1.55; }
.single article[data-fr-size="mega"] .entry-content { font-size: 2.6rem; line-height: 1.5; }

/* Cuando se agranda, ajusta interlineado para que no se masifique */
.single article[data-fr-size="lg"] .entry-content { line-height: 1.7; }
.single article[data-fr-size="xl"] .entry-content { line-height: 1.65; }

/* El título también escala con el tamaño seleccionado */
.single article[data-fr-size="sm"] .entry-title { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
.single article[data-fr-size="lg"] .entry-title { font-size: clamp(2rem, 4.5vw, 2.9rem); }
.single article[data-fr-size="xl"] .entry-title { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.single article[data-fr-size="xxl"] .entry-title { font-size: clamp(2.4rem, 5.5vw, 3.5rem); }
.single article[data-fr-size="xxxl"] .entry-title { font-size: clamp(2.7rem, 6vw, 3.9rem); }
.single article[data-fr-size="mega"] .entry-title { font-size: clamp(3rem, 6.5vw, 4.4rem); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 768px) {
    .single .entry-content {
        font-size: 1.6rem;       /* base móvil = nivel 'xl' en móvil */
        max-width: 100%;
    }
    .single article[data-fr-size="sm"] .entry-content { font-size: 1.3rem; }
    .single article[data-fr-size="md"] .entry-content { font-size: 1.4rem; }
    .single article[data-fr-size="lg"] .entry-content { font-size: 1.5rem; }
    .single article[data-fr-size="xl"] .entry-content { font-size: 1.6rem; }
    .single article[data-fr-size="xxl"] .entry-content { font-size: 1.75rem; }
    .single article[data-fr-size="xxxl"] .entry-content { font-size: 1.9rem; }
    .single article[data-fr-size="mega"] .entry-content { font-size: 2.1rem; }

    .single .entry-content > p:first-of-type:first-letter {
        font-size: 3em;
    }

    .fr-reader-controls {
        justify-content: center;
    }
}

/* =========================================================
   Utilidad: respetar preferencia de motion reducido
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .fr-reader-controls button {
        transition: none !important;
    }
}