/* Deutsch (de) overrides.
 *
 * Loaded by header.php only when the page is in German, so no other visitor
 * downloads it. Everything is scoped to html[lang="de"] and cannot leak.
 *
 * German is the hardest of the three live languages for layout. It runs longer than
 * English, and unlike French it does it by building single unbreakable words:
 * "Serverstandorte", "Zahlungsbedingungen", "Rückerstattungsrichtlinie". A long
 * French phrase wraps at a space; a long German compound does not wrap at all
 * unless it is told to.
 */

/* Let compounds break. Without this a single word widens its container and pushes
   the layout sideways - the classic German overflow. The hyphens rule only fires
   where the browser has German hyphenation data, hence the explicit lang. */
html[lang="de"] {
    hyphens: auto;
    -webkit-hyphens: auto;
}
html[lang="de"] h1, html[lang="de"] h2, html[lang="de"] h3,
html[lang="de"] h4, html[lang="de"] h5, html[lang="de"] h6,
html[lang="de"] .nav-link,
html[lang="de"] .btn,
html[lang="de"] .pot-lang-name,
html[lang="de"] .accordion-title,
html[lang="de"] td, html[lang="de"] th,
html[lang="de"] li {
    overflow-wrap: break-word;
    word-break: normal;
}

/* Headline tracking is set negative for English, which is already tight. German
   headlines are longer and the extra squeeze makes them hard to read. */
html[lang="de"] h1, html[lang="de"] h2,
html[lang="de"] .ls-minus-1px,
html[lang="de"] .ls-minus-2px {
    letter-spacing: -0.25px;
}

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

/* The header account button is a fixed 80px in the shared stylesheet. */
html[lang="de"] .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="de"] .navbar .navbar-nav .nav-link {
        font-size: 15px;
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Language menu: the name column is nowrap + ellipsis, and the German "Bald"
   badge is short, so the name gets its space back. */
html[lang="de"] .pot-lang-name {
    min-width: 0;
}

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