/* ============================================================
   FitBreak — právní dokumenty (legal.php)

   Doplněk k `css/style.css`, který se načítá PŘED tímhle souborem
   a nese design tokeny i základ `.legal-page`, `.legal-page h1/h2`,
   `.legal-page .subtitle` a `.legal-back`. Tady je jen to, co
   vícejazyčná stránka přidala: hlavička s přepínačem jazyků,
   patička s odkazem na druhý dokument a pár detailů obsahu.

   Žádné vlastní barvy — všechno z tokenů ve `style.css`
   (tmavé téma zbytku webu). Žádné inline styly v HTML.
   ============================================================ */

body.legal-doc {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.6;
}

/* --- Hlavička: logo + přepínač jazyků ---------------------- */
/* Šířka je stejná jako u `.legal-page` (700 px), aby logo stálo
   svisle v jedné linii s nadpisem dokumentu, ne nad ním vlevo. */
.legal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
    max-width: 700px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-lg) 0;
}
.legal-logo {
    font-family: var(--font-logo);
    font-size: 1.4rem;
    color: var(--color-text);
    text-decoration: none;
    line-height: 1;
}
.legal-logo-accent {
    color: var(--color-primary);
}
.legal-langs {
    display: inline-flex;
    gap: 6px;
}
.legal-lang {
    padding: 5px 11px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.legal-lang:hover {
    color: var(--color-text);
    border-color: var(--color-text-muted);
}
.legal-lang.is-on {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg);
}

/* --- Obsah dokumentu -------------------------------------- */
/* `.legal-page` je ve `style.css`; tady jen to, co přidal
   vícejazyčný obsah. */
.legal-page {
    position: relative;
    z-index: 1; /* nad dekorativním `body::before` ve style.css */
}
.legal-page h1 {
    /* Nadpis je v němčině i polštině delší než v češtině — bez
       zlomu by přetékal přes okraj na úzkém displeji. */
    overflow-wrap: break-word;
}
.legal-page code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-input);
    color: var(--color-text);
}
.legal-page strong {
    color: var(--color-text);
}
.legal-page li {
    /* Dlouhá adresa nebo název scope nesmí roztáhnout stránku do šířky. */
    overflow-wrap: break-word;
}
.legal-page a:hover {
    color: var(--color-primary-light);
}
.legal-back-arrow {
    font-size: 1.1em;
    line-height: 1;
}

/* --- Patička: odkaz na druhý dokument --------------------- */
.legal-foot {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-lg) var(--space-3xl);
    border-top: 1px solid var(--color-border);
    position: relative;
    z-index: 1;
}
.legal-foot-label {
    margin: 0 0 var(--space-xs);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}
.legal-foot-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
.legal-foot-link:hover {
    text-decoration: underline;
}

/* --- Úzké displeje ---------------------------------------- */
@media (max-width: 480px) {
    .legal-head {
        padding: var(--space-md) var(--space-md) 0;
    }
    .legal-foot {
        padding: var(--space-lg) var(--space-md) var(--space-2xl);
    }
    .legal-lang {
        padding: 4px 9px;
    }
}