/* =================================================================
   Cuerpo de las notas del blog

   Esta hoja se carga en dos lugares: en el editor del panel y en la
   nota publicada en la tienda. Es lo que hace que escribir y publicar
   se vean igual, así que el contenido no se estila en ningún otro
   archivo.

   Cómo está armada:
   - Las medidas viven en variables, una sola vez, arriba.
   - El bloque del final vuelve a aplicar esas mismas variables sobre
     el CSS que trae el editor, que llega con sus propios tamaños y
     con más especificidad. Sin ese bloque el editor mostraría la
     tipografía de la librería en lugar de la de la tienda.
   - Los colores los pasa quien la usa (--blog-color-*), porque el
     panel y la tienda tienen paletas distintas y modo oscuro propio.
   ================================================================= */

.st-blog-content {
    --blog-fg: var(--blog-color-fg, #0f172a);
    --blog-muted: var(--blog-color-muted, #6b7280);
    --blog-border: var(--blog-color-border, #e5e7eb);
    --blog-accent: var(--blog-color-accent, #1d4ed8);
    --blog-code-bg: var(--blog-color-code-bg, #f3f4f6);
    --blog-quote-bg: var(--blog-color-quote-bg, transparent);

    --blog-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --blog-font-size: 17px;
    --blog-line-height: 1.75;
    --blog-p-gap: 1.15em;
    --blog-h2-size: 1.55em;
    --blog-h3-size: 1.22em;
    --blog-heading-top: 1.9em;
    --blog-heading-bottom: 0.6em;
    --blog-list-pad: 3em;
    --blog-marker-offset: 1.5em;
    --blog-marker-width: 1.2em;
    --blog-marker-gap: 0.3em;
    --blog-indent-step: 3em;
    --blog-block-gap: 1.6em;
    --blog-image-max-height: 620px;
    --blog-radius: 10px;

    box-sizing: border-box;
    color: var(--blog-fg);
    font-family: var(--blog-font-family);
    font-size: var(--blog-font-size);
    line-height: var(--blog-line-height);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.st-blog-content > *:first-child { margin-top: 0; }
.st-blog-content > *:last-child { margin-bottom: 0; }

.st-blog-content p { margin: 0 0 var(--blog-p-gap); }

.st-blog-content h2,
.st-blog-content h3 {
    margin: var(--blog-heading-top) 0 var(--blog-heading-bottom);
    color: var(--blog-fg);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.01em;
}
.st-blog-content h2 { font-size: var(--blog-h2-size); }
.st-blog-content h3 { font-size: var(--blog-h3-size); }

.st-blog-content strong,
.st-blog-content b { font-weight: 700; }
.st-blog-content em,
.st-blog-content i { font-style: italic; }
.st-blog-content u { text-decoration: underline; text-underline-offset: 2px; }
.st-blog-content s { text-decoration: line-through; }

.st-blog-content a {
    color: var(--blog-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Listas ---------------------------------------------------------
   El editor no usa los marcadores del navegador: los dibuja él con un
   elemento propio. Para que la nota publicada caiga en el mismo lugar,
   acá también se dibujan a mano con las mismas medidas. Los li del
   editor llevan data-list, así que se los saltea para no terminar con
   dos marcadores encima. */
.st-blog-content ul,
.st-blog-content ol {
    margin: 0 0 var(--blog-p-gap);
    padding-left: var(--blog-list-pad);
}
.st-blog-content ol { counter-reset: blog-ordered; }

.st-blog-content li {
    position: relative;
    margin: 0 0 0.4em;
    padding-left: 0;
    list-style: none;
}
.st-blog-content li:last-child { margin-bottom: 0; }

.st-blog-content ul > li:not([data-list])::before,
.st-blog-content ol > li:not([data-list])::before {
    position: absolute;
    left: calc(-1 * var(--blog-marker-offset));
    width: var(--blog-marker-width);
    text-align: right;
    color: var(--blog-fg);
}
.st-blog-content ul > li:not([data-list])::before { content: "\2022"; }
.st-blog-content ol > li:not([data-list]) { counter-increment: blog-ordered; }
.st-blog-content ol > li:not([data-list])::before {
    content: counter(blog-ordered) ".";
    font-variant-numeric: tabular-nums;
}

.st-blog-content blockquote {
    margin: var(--blog-block-gap) 0;
    padding: 0.15em 0 0.15em 1.15em;
    border-left: 4px solid var(--blog-accent);
    background: var(--blog-quote-bg);
    color: var(--blog-fg);
    font-size: 1.06em;
    font-style: normal;
}
.st-blog-content blockquote p:last-child { margin-bottom: 0; }

/* Una foto sacada con el celular viene vertical y de miles de píxeles: sin
   un techo de alto se come varias pantallas. Al achicarse queda más angosta
   que la columna, así que se centra. */
.st-blog-content img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: var(--blog-image-max-height);
    height: auto;
    margin: var(--blog-block-gap) auto;
    border-radius: var(--blog-radius);
}

.st-blog-content pre {
    margin: var(--blog-block-gap) 0;
    padding: 14px 16px;
    border-radius: var(--blog-radius);
    background: var(--blog-code-bg);
    color: var(--blog-fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
    line-height: 1.55;
    white-space: pre-wrap;
}
.st-blog-content code {
    padding: 0.12em 0.35em;
    border-radius: 5px;
    background: var(--blog-code-bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
}
.st-blog-content pre code {
    padding: 0;
    background: none;
    font-size: 1em;
}

.st-blog-content hr {
    height: 0;
    margin: 2.2em 0;
    border: 0;
    border-top: 1px solid var(--blog-border);
}

/* Alineaciones y sangrías. Los nombres los pone el editor y el
   sanitizador del servidor sólo deja pasar estos, así que la lista
   tiene que coincidir en los tres lugares. */
.st-blog-content .ql-align-center { text-align: center; }
.st-blog-content .ql-align-right { text-align: right; }
.st-blog-content .ql-align-justify { text-align: justify; }
.st-blog-content .ql-align-center img { margin-inline: auto; }
.st-blog-content .ql-align-right img { margin-inline: auto 0; }

.st-blog-content .ql-indent-1 { padding-left: calc(var(--blog-indent-step) * 1); }
.st-blog-content .ql-indent-2 { padding-left: calc(var(--blog-indent-step) * 2); }
.st-blog-content .ql-indent-3 { padding-left: calc(var(--blog-indent-step) * 3); }
.st-blog-content .ql-indent-4 { padding-left: calc(var(--blog-indent-step) * 4); }
.st-blog-content .ql-indent-5 { padding-left: calc(var(--blog-indent-step) * 5); }
.st-blog-content .ql-indent-6 { padding-left: calc(var(--blog-indent-step) * 6); }
.st-blog-content .ql-indent-7 { padding-left: calc(var(--blog-indent-step) * 7); }
.st-blog-content .ql-indent-8 { padding-left: calc(var(--blog-indent-step) * 8); }

@media (max-width: 600px) {
    .st-blog-content {
        --blog-font-size: 16.5px;
        --blog-line-height: 1.7;
        --blog-h2-size: 1.42em;
        --blog-h3-size: 1.16em;
        --blog-list-pad: 2.1em;
        --blog-marker-offset: 1.05em;
        --blog-marker-width: 0.85em;
        --blog-image-max-height: 460px;
        /* Con 3em por nivel una sangría se come la pantalla, así que en
           celulares el escalón es más corto (en el editor también, que
           lee la misma variable). */
        --blog-indent-step: 1.5em;
    }
}

/* =================================================================
   Convivencia con el editor

   Estas reglas sólo existen cuando el editor está montado sobre el
   contenedor. Repiten las variables de arriba con la especificidad
   suficiente para ganarle al CSS de la librería, que trae sus propios
   tamaños de encabezado, márgenes en cero y una tipografía distinta.
   ================================================================= */

.st-blog-content.ql-container {
    height: auto;
    font-family: var(--blog-font-family);
    font-size: var(--blog-font-size);
}

.st-blog-content.ql-container .ql-editor {
    padding: 0;
    line-height: var(--blog-line-height);
    counter-reset: blog-ordered;
}

.st-blog-content.ql-container .ql-editor p { margin: 0 0 var(--blog-p-gap); }
.st-blog-content.ql-container .ql-editor h2,
.st-blog-content.ql-container .ql-editor h3 {
    margin: var(--blog-heading-top) 0 var(--blog-heading-bottom);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.01em;
}
.st-blog-content.ql-snow .ql-editor h2 { font-size: var(--blog-h2-size); }
.st-blog-content.ql-snow .ql-editor h3 { font-size: var(--blog-h3-size); }

.st-blog-content.ql-container .ql-editor > *:first-child { margin-top: 0; }
.st-blog-content.ql-container .ql-editor > *:last-child { margin-bottom: 0; }

.st-blog-content.ql-snow .ql-editor blockquote {
    margin: var(--blog-block-gap) 0;
    padding: 0.15em 0 0.15em 1.15em;
    border-left: 4px solid var(--blog-accent);
    background: var(--blog-quote-bg);
    font-size: 1.06em;
}

.st-blog-content.ql-container .ql-editor ol,
.st-blog-content.ql-container .ql-editor ul {
    margin: 0 0 var(--blog-p-gap);
    padding-left: var(--blog-list-pad);
}
.st-blog-content.ql-container .ql-editor li {
    margin: 0 0 0.4em;
    padding-left: 0;
}
.st-blog-content.ql-container .ql-editor li > .ql-ui::before {
    margin-left: calc(-1 * var(--blog-marker-offset));
    margin-right: var(--blog-marker-gap);
    width: var(--blog-marker-width);
}

.st-blog-content.ql-container .ql-editor .ql-indent-1:not(.ql-direction-rtl) { padding-left: calc(var(--blog-indent-step) * 1); }
.st-blog-content.ql-container .ql-editor .ql-indent-2:not(.ql-direction-rtl) { padding-left: calc(var(--blog-indent-step) * 2); }
.st-blog-content.ql-container .ql-editor .ql-indent-3:not(.ql-direction-rtl) { padding-left: calc(var(--blog-indent-step) * 3); }
.st-blog-content.ql-container .ql-editor .ql-indent-4:not(.ql-direction-rtl) { padding-left: calc(var(--blog-indent-step) * 4); }
.st-blog-content.ql-container .ql-editor .ql-indent-5:not(.ql-direction-rtl) { padding-left: calc(var(--blog-indent-step) * 5); }
.st-blog-content.ql-container .ql-editor .ql-indent-6:not(.ql-direction-rtl) { padding-left: calc(var(--blog-indent-step) * 6); }
.st-blog-content.ql-container .ql-editor .ql-indent-7:not(.ql-direction-rtl) { padding-left: calc(var(--blog-indent-step) * 7); }
.st-blog-content.ql-container .ql-editor .ql-indent-8:not(.ql-direction-rtl) { padding-left: calc(var(--blog-indent-step) * 8); }
.st-blog-content.ql-container .ql-editor li.ql-indent-1:not(.ql-direction-rtl) { padding-left: calc(var(--blog-indent-step) * 1); }
.st-blog-content.ql-container .ql-editor li.ql-indent-2:not(.ql-direction-rtl) { padding-left: calc(var(--blog-indent-step) * 2); }
.st-blog-content.ql-container .ql-editor li.ql-indent-3:not(.ql-direction-rtl) { padding-left: calc(var(--blog-indent-step) * 3); }
.st-blog-content.ql-container .ql-editor li.ql-indent-4:not(.ql-direction-rtl) { padding-left: calc(var(--blog-indent-step) * 4); }
.st-blog-content.ql-container .ql-editor li.ql-indent-5:not(.ql-direction-rtl) { padding-left: calc(var(--blog-indent-step) * 5); }
.st-blog-content.ql-container .ql-editor li.ql-indent-6:not(.ql-direction-rtl) { padding-left: calc(var(--blog-indent-step) * 6); }
.st-blog-content.ql-container .ql-editor li.ql-indent-7:not(.ql-direction-rtl) { padding-left: calc(var(--blog-indent-step) * 7); }
.st-blog-content.ql-container .ql-editor li.ql-indent-8:not(.ql-direction-rtl) { padding-left: calc(var(--blog-indent-step) * 8); }

/* El bloque de código del editor viene con el fondo oscuro de la librería:
   se lo lleva al mismo <pre> claro que muestra la nota publicada. */
.st-blog-content.ql-container .ql-editor .ql-code-block-container {
    margin: var(--blog-block-gap) 0;
    padding: 14px 16px;
    border-radius: var(--blog-radius);
    background: var(--blog-code-bg);
    color: var(--blog-fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
    line-height: 1.55;
}
.st-blog-content.ql-container .ql-editor .ql-code-block {
    background: none;
    color: inherit;
}

.st-blog-content.ql-snow .ql-editor img {
    max-width: 100%;
    max-height: var(--blog-image-max-height);
}
.st-blog-content.ql-snow .ql-editor code {
    padding: 0.12em 0.35em;
    border-radius: 5px;
    background: var(--blog-code-bg);
    font-size: 0.92em;
}

.st-blog-content.ql-container .ql-editor.ql-blank::before {
    left: 0;
    right: 0;
    color: var(--blog-muted);
    font-style: normal;
}