/* ==========================================================================
   article-content.css
   Tipografía del cuerpo de los artículos del blog.

   Estas reglas vivían en main.css, la hoja del diseño anterior, que ya no se
   carga en ninguna página del sitio. Sin ellas el contenido que llega de
   WordPress se mostraba sin interlineado, sin separación entre párrafos, con
   los encabezados indistinguibles y las tablas como texto plano.

   Se extraen aquí para cargarlas en el artículo sin arrastrar el resto de
   main.css, que entra en conflicto con v5.css. Los colores y tipografías se
   han pasado al sistema de v5.
   ========================================================================== */

/* ==========================================================================
   17. ARTICLE CONTENT TYPOGRAPHY (WordPress API content)
   ========================================================================== */
.article-content p {
    color: var(--gray);
        font-size: 1.125rem;
        line-height: 1.8;
        margin-bottom: 1.5rem;
}

.article-content h2 {
    font-family: var(--font-display);
        color: var(--ink);
        font-size: 1.75rem;
        font-weight: 700;
        margin-top: 2.5rem;
        margin-bottom: 1rem;
        line-height: 1.3;
}

.article-content h3 {
    font-family: var(--font-display);
        color: var(--ink);
        font-size: 1.375rem;
        font-weight: 700;
        margin-top: 2rem;
        margin-bottom: 0.75rem;
        line-height: 1.4;
}

.article-content h4 {
    font-family: var(--font-display);
        color: var(--ink);
        font-size: 1.125rem;
        font-weight: 700;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
}

.article-content ul,
.article-content ol {
    margin-bottom: 1.5rem;
        padding-left: 1.5rem;
        color: var(--gray);
}

.article-content ul {
    list-style-type: disc;
}

.article-content ol {
    list-style-type: decimal;
}

.article-content li {
    font-size: 1.125rem;
        line-height: 1.8;
        margin-bottom: 0.5rem;
}

.article-content li strong {
    color: var(--ink);
}

.article-content blockquote {
    border-left: 4px solid var(--gold);
        padding: 1rem 1.5rem;
        margin: 2rem 0;
        background: rgba(248, 213, 128, 0.08);
        border-radius: 0 0.75rem 0.75rem 0;
        font-style: italic;
        color: var(--ink-soft);
}

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

.article-content a {
    color: var(--rose);
        font-weight: 600;
        text-decoration: none;
        transition: color 0.2s;
}

.article-content a:hover {
    color: var(--ink);
        text-decoration: underline;
}

.article-content img {
    border-radius: 1rem;
        margin: 2rem auto;
        max-width: 100%;
        height: auto;
        display: block;
}

.article-content figure {
    margin: 2rem 0;
}

.article-content figcaption {
    text-align: center;
        font-size: 0.875rem;
        color: var(--gray-light);
        margin-top: 0.5rem;
}

.article-content pre {
    background: var(--ink);
        color: var(--beige);
        padding: 1.25rem;
        border-radius: 0.75rem;
        overflow-x: auto;
        margin: 1.5rem 0;
        font-size: 0.875rem;
        line-height: 1.7;
}

.article-content code {
    background: rgba(27, 33, 61, 0.06);
        color: var(--ink);
        padding: 0.125rem 0.375rem;
        border-radius: 0.25rem;
        font-size: 0.875em;
}

.article-content pre code {
    background: transparent;
        color: inherit;
        padding: 0;
}

/* Wrap tables in a horizontal scroll container on mobile */
.article-content .table-wrapper {
    overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 1.5rem 0;
}

.article-content table {
    width: 100%;
        border-collapse: collapse;
        margin: 1.5rem 0;
        min-width: 500px;
}

.article-content th,
.article-content td {
    border: 1px solid var(--beige);
        padding: 0.75rem 1rem;
        text-align: left;
        font-size: 0.9375rem;
}

.article-content th {
    background: var(--crema);
        font-weight: 600;
        color: var(--ink);
}

.article-content hr {
    border: none;
        border-top: 2px solid #F3F4F6;
        margin: 2.5rem 0;
}

.article-content .wp-block-image {
    margin: 2rem 0;
}

.article-content .wp-block-image img {
    border-radius: 1rem;
}

/* Article content adjustments */

/* Ajustes de lectura en móvil. En main.css estaban dentro de este @media;
   al extraerlas se habían quedado sueltas y encogían el texto también en
   escritorio. */
@media (max-width: 768px) {
    .article-content p,
    .article-content li {
        font-size: 1rem;
    }

    .article-content h2 {
        font-size: 1.5rem;
    }

    .article-content h3 {
        font-size: 1.25rem;
    }

    .article-content table {
        font-size: 0.875rem;
    }

    .article-content th,
    .article-content td {
        padding: 0.5rem 0.75rem;
    }
}