/* Tamaño del texto elegido por el lector.

   En las páginas normales basta agrandar la letra base, porque los tamaños
   están en rem. La Biblia mide sus versículos contra el alto de la pantalla,
   así que ahí se multiplica cada tamaño y la letra base queda quieta, para no
   descuadrar los botones del lector. */

:root {
    --text-scale: 1;
}

html {
    font-size: calc(100% * var(--text-scale, 1));
}

html:has(body.bible-ambient-page) {
    font-size: 100%;
}

@media (max-width: 820px) {
    body.bible-ambient-page .focus-verse {
        font-size: calc(clamp(21.6px, 7.4vw, 33.6px) * var(--text-scale, 1));
    }
}

@media (max-width: 520px) {
    body.bible-ambient-page .focus-verse {
        font-size: calc(clamp(18.9px, 6.8vw, 29.6px) * var(--text-scale, 1));
    }
}

@media (min-width: 960px) {
    body.bible-ambient-page .focus-verse,
    body.bible-ambient-page .context-verse {
        font-size: calc(clamp(19.8px, 2.35vh, 27.5px) * var(--text-scale, 1));
    }
}

@media (min-width: 960px) and (max-height: 760px) {
    body.bible-ambient-page .focus-verse,
    body.bible-ambient-page .context-verse {
        font-size: calc(clamp(17.3px, 2.2vh, 23.2px) * var(--text-scale, 1));
    }
}

@media (min-width: 960px) and (min-height: 820px) {
    body.bible-ambient-page .focus-verse {
        font-size: calc(clamp(23.2px, 3.7vh, 37.6px) * var(--text-scale, 1));
    }

    body.bible-ambient-page .context-verse {
        font-size: calc(clamp(14.4px, 1.45vh, 16.8px) * var(--text-scale, 1));
    }
}

/* Control dentro de la tarjeta del menú: una «A» por tamaño, la activa marcada */
.header .nav-links .text-size-row {
    display: grid;
    gap: 7px;
    margin-top: 4px;
    padding: 11px 14px 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    list-style: none;
}

.header .nav-links .text-size-label {
    color: #9eacc0;
    font: 650 10.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.header .nav-links .text-size-controls {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.header .nav-links .text-size-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(210, 227, 255, 0.14);
    border-radius: 11px;
    background: rgba(214, 230, 253, 0.05);
    color: #c4d2e4;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.header .nav-links .text-size-button:nth-child(1) { font-size: 12px; }
.header .nav-links .text-size-button:nth-child(2) { font-size: 14px; }
.header .nav-links .text-size-button:nth-child(3) { font-size: 17px; }
.header .nav-links .text-size-button:nth-child(4) { font-size: 20px; }

.header .nav-links .text-size-button:hover { background: rgba(174, 215, 250, 0.14); }

.header .nav-links .text-size-button[aria-pressed="true"] {
    background: rgba(174, 215, 250, 0.20);
    border-color: rgba(174, 215, 250, 0.50);
    color: #eaf5ff;
}

.header .nav-links .text-size-value {
    color: #9eacc0;
    font: 500 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: center;
}

html:not(.dark) .header .nav-links .text-size-row {
    border-top-color: rgba(0, 0, 0, 0.10);
}

html:not(.dark) .header .nav-links .text-size-label,
html:not(.dark) .header .nav-links .text-size-value { color: #6b7280; }

html:not(.dark) .header .nav-links .text-size-button {
    border-color: rgba(0, 0, 0, 0.10);
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
}

html:not(.dark) .header .nav-links .text-size-button[aria-pressed="true"] {
    background: rgba(11, 99, 197, 0.12);
    border-color: rgba(11, 99, 197, 0.45);
    color: #0b63c5;
}