/* Español (es) overrides.
 *
 * Loaded by header.php only when the page is in Spanish, so no other visitor
 * downloads it. Everything is scoped to html[lang="es"] and cannot leak.
 *
 * Spanish sits between the other two Latin languages here. It runs 15-25% longer
 * than English, but unlike German it breaks at spaces, so it needs room rather
 * than hyphenation. The specific things that bite are the opening inverted marks
 * and the accented capitals, both of which the shared stylesheet was never
 * checked against.
 */

/* Longer labels: let them wrap instead of widening their box. No hyphens: auto
   here - Spanish wraps at spaces perfectly well, and browser hyphenation of
   Spanish is more intrusive than it is useful at these sizes. */
html[lang="es"] .nav-link,
html[lang="es"] .btn,
html[lang="es"] .pot-lang-name,
html[lang="es"] .accordion-title,
html[lang="es"] td, html[lang="es"] th,
html[lang="es"] li,
html[lang="es"] h1, html[lang="es"] h2, html[lang="es"] h3,
html[lang="es"] h4, html[lang="es"] h5, html[lang="es"] h6 {
    overflow-wrap: break-word;
}

/* Headline tracking is set negative for English. Spanish headlines are longer and
   carry accents; the extra squeeze pushes a tilde into the letter above it. */
html[lang="es"] h1, html[lang="es"] h2,
html[lang="es"] .ls-minus-1px,
html[lang="es"] .ls-minus-2px {
    letter-spacing: -0.25px;
}

/* Accents on capitals need vertical room. Several headings in the shared sheet run
   a line-height near 1.0, which clips the tilde on Á, É, Í, Ó, Ú and Ñ - and those
   capitals are mandatory in Spanish, so this is not a rare case. */
html[lang="es"] h1, html[lang="es"] h2, html[lang="es"] h3 {
    line-height: 1.25;
}
html[lang="es"] .btn,
html[lang="es"] .nav-link {
    line-height: 1.4;
}

/* An opening inverted mark must never be left dangling at the end of a line, away
   from the sentence it opens. */
html[lang="es"] p,
html[lang="es"] .accordion-title,
html[lang="es"] h1, html[lang="es"] h2, html[lang="es"] h3 {
    text-wrap: pretty;
}

/* Buttons whose English label is one word and whose Spanish label is three. */
html[lang="es"] .btn.btn-switch-text.btn-small > span,
html[lang="es"] .btn.btn-switch-text.btn-very-small > span,
html[lang="es"] .btn.btn-medium > span {
    white-space: normal;
}

/* The header account button is a fixed 80px in the shared stylesheet, and
   "Registrarse" does not fit it. */
html[lang="es"] .actions-section .w-80px {
    width: auto !important;
    min-width: 80px;
}

/* The nav carries the longest labels on the page. Give it room before it wraps to
   a second row on the sizes where it is tightest. */
@media (min-width: 992px) and (max-width: 1399px) {
    html[lang="es"] .navbar .navbar-nav .nav-link {
        font-size: 15px;
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Plan cards put a feature on one line with a check icon; Spanish feature names
   need a second line rather than an ellipsis. */
html[lang="es"] #vps-features-list li,
html[lang="es"] .pot-plan-feature {
    white-space: normal;
    line-height: 1.5;
}