/**
 * GDPR a obchodní podmínky — logged-in i veřejné stránky
 */

.legalPageBody,
.gdprPageBody,
.gdprPublicPageBody,
.termsandconditionsPageBody {
    min-height: calc(100vh - 56px);
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 55%, #f1f5f9 100%);
    padding-bottom: 48px;
    box-sizing: border-box;
}

/* Délka řádku: při 840px a písmu 15px vycházelo 101 znaků na řádek — na dlouhý
   právní text skoro dvojnásobek pohodlné míry. 700px dává ~79 znaků, což je
   horní hranice doporučeného rozsahu, a stránka přitom nenaroste o moc. */
.legalPageInside {
    max-width: 700px;
    margin: 0 auto;
    padding: 56px 16px 24px;
    box-sizing: border-box;
}

.legalPageCard {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8f0;
    /* Poloměr z tokenu — karta měla vlastních 20px a mimo ostatní karty aplikace
       (dialogy, karty zdi, panely) vyčnívala. Token drží tvar na jednom místě. */
    border-radius: var(--gc-radius, 12px);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 32px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.legalPageCard::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #1d4ed8 0%, #6366f1 50%, #818cf8 100%);
}

.legalPageCard--terms::before {
    background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 50%, #3b82f6 100%);
}

.legalPageContent,
#gdprPage.legalPageContent,
#termsandconditionsPage.legalPageContent {
    display: block;
    height: auto;
    justify-content: unset;
    align-items: unset;
    padding: 36px 32px 40px;
    margin: 0;
    /* Bylo `pre-line`: dokud byl text holý řetězec, držela zalomení a mezery
       mezi kapitolami prázdná řádka ve zdroji šablony. Od 19. 8. 2026 je text
       označkovaný (<p>, <h2>, <h3>, výčty) a rytmus určují pravidla níž.
       S `pre-line` by každý konec řádku MEZI značkami vyrobil prázdný řádek
       navíc — na /gdpr to dělalo 2 244 px (43 %) prázdné výšky. */
    white-space: normal;
    font-size: 15px;
    line-height: 1.78;
    color: #475569;
    letter-spacing: 0.01em;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Nadpis dokumentu dřív nebyl značka, jen první řádek textu — proto ho stylovalo
   `.legalPageContent::first-line`. Od 19. 8. 2026 má každá právní stránka
   skutečný <h1 class="legalPageTitle">, takže pravidlo mířilo na první řádek
   UVNITŘ toho nadpisu a nedělalo nic (hodnoty byly shodné). Velikost drží
   `.legalPageTitle` níž — jedno místo, ne dvě. */

/* ------------------------------------------------------------------------
   Struktura právního textu (odstavce, sekce, výčty, odkazy)

   Text byl dosud jeden dlouhý řetězec, kde odsazení i mezery mezi kapitolami
   vznikaly z prázdných řádků ve zdroji (tehdejší `white-space: pre-line`). Mezery
   proto vycházely pokaždé jinak. Šablony teď obsah značkují (<p>, <h2>, <h3>,
   výčty) a rytmus dokumentu drží tahle pravidla — jedno místo, jedna hodnota.
   ------------------------------------------------------------------------ */

/* Celý svislý rytmus nese spodní mezera odstavce. Nahoře záměrně nic:
   kdyby margin určovaly oba prvky, u nadpisů by se sléval jejich okraj
   s okrajem odstavce a výsledná mezera by závisela na pořadí značek.

   `!important` je nutné: public.css má globální `p { margin: 0 0 0px !important }`,
   které bez stejné síly vyhraje bez ohledu na specificitu — odstavce by na sebe
   nasedly a text by vypadal jako jeden blok (ověřeno na produkci 19. 8. 2026).
   Stejný důvod jako u barvy odkazů níž. */
.legalPageContent p {
    margin: 0 0 16px !important;
}

/* Sekce: větší a těžší než tělo textu a hlavně s JEDNOTNÝM odstupem shora,
   aby začátek kapitoly nezávisel na formátování zdroje.
   `scroll-margin-top` počítá s lištou nad stránkou (56px — stejná hodnota
   jako v `min-height` u .legalPageBody) plus malý nádech; bez něj by odkaz
   s kotvou `#…` odroloval nadpis přesně pod lištu, tedy mimo výhled. */
.legalPageContent h2.legalPageSection {
    margin: 36px 0 12px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
    letter-spacing: -0.01em;
    scroll-margin-top: 72px;
}

/* Podsekce je o stupeň níž: menší písmo i menší odstup, ať ji čtenář
   nezamění se začátkem nové kapitoly. */
.legalPageContent h3.legalPageSubsection {
    margin: 24px 0 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: #0f172a;
    letter-spacing: -0.01em;
    scroll-margin-top: 72px;
}

/* Výčty: odsazení je vlastní, protože výchozí hodnota prohlížeče (2rem) je
   při `html { font-size: 10px }` jen 20px a odrážky lezou k okraji karty.
   Jednotka `em` navíc odsazení zmenší spolu s písmem na mobilu. */
.legalPageContent .legalPageList {
    margin: 0 0 16px;
    padding-inline-start: 1.5em;
    list-style-position: outside;
}

/* Druh značky nastavujeme ručně — sdílená třída je na <ul> i <ol> a v
   aplikaci je několik globálních `list-style: none`, o které by se dalo
   časem zakopnout. */
.legalPageContent ul.legalPageList {
    list-style-type: disc;
}

.legalPageContent ol.legalPageList {
    list-style-type: decimal;
}

.legalPageContent .legalPageList li {
    margin-bottom: 6px;
}

.legalPageContent .legalPageList li:last-child {
    margin-bottom: 0;
}

/* Vnořený výčet patří k položce nad sebou, ne k odstavci — proto menší
   mezera nahoře a žádná pod ním. */
.legalPageContent .legalPageList .legalPageList {
    margin: 6px 0 0;
}

/* Odkazy uvnitř textu.
   `!important` tu není z lenosti: public.css má globální
   `:where(a:not(.btn)…) { color: … !important }`, které bez stejné síly
   přebije jak základní barvu, tak tmavší odstín na :hover.

   Řetěz `:not()` a obal `:where()` jsou opsané ze stejného pravidla v
   public.css a mají tentýž důvod: na právních stránkách už jeden odkaz
   v roli tlačítka je (/deleteaccount) a modrý podtržený popisek na barevném
   tlačítku je známá past. `:where()` navíc sráží specificitu na samotné
   `.legalPageContent` (0,1,0), takže `.btn a { color: inherit !important }`
   pro odkaz UVNITŘ tlačítka pořád vyhraje. Nová třída odkazu-tlačítka
   patří i sem.

   Podtržení zůstává — v souvislém odstavci je barva sama o sobě jediným
   rozlišovacím znakem odkazu (WCAG 1.4.1). */
.legalPageContent :where(a:not(.btn):not(.btnSet):not(.btnSetBlue):not(.btnSetRed):not(.btnSetGreen):not(.btnSetyelowGreen):not(.btnSetSearch):not(.gc-nav-btn)) {
    color: var(--gc-primary-strong, #0069d9) !important;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* `:hover` patří DOVNITŘ `:where()`, jinak by selektor vyskočil na 0,2,0
   a přebil `.btnSet a { color: inherit !important }` u odkazu vnořeného
   v tlačítku. Takhle zůstává na 0,1,0 a vyhrává jen nad pravidlem výš
   (rozhoduje pořadí v souboru). */
.legalPageContent :where(a:hover:not(.btn):not(.btnSet):not(.btnSetBlue):not(.btnSetRed):not(.btnSetGreen):not(.btnSetyelowGreen):not(.btnSetSearch):not(.gc-nav-btn)) {
    color: var(--gc-primary-darker, #0056b3) !important;
}

/* Fokus musí být vidět i uprostřed odstavce, kde odkaz splývá s řádkem;
   samotná změna barvy by při klávesové navigaci zanikla. Obrys se kreslí
   i na tlačítkových odkazech, proto tu `:not()` řetěz není — obrys nic
   nepřebarvuje, jen zvýrazňuje. */
.legalPageContent a:focus-visible {
    outline: 2px solid var(--gc-primary-strong, #0069d9);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .legalPageInside {
        padding-top: 48px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .legalPageContent,
    #gdprPage.legalPageContent,
    #termsandconditionsPage.legalPageContent {
        padding: 24px 18px 28px;
        font-size: 14px;
        line-height: 1.72;
    }

    /* Tělo textu je na mobilu o stupeň menší, takže se o stupeň zmenšují
       i nadpisy a mezery — jinak by odstup mezi sekcemi na úzké obrazovce
       ukrajoval nepoměrně velkou část výšky. */
    .legalPageContent p,
    .legalPageContent .legalPageList {
        margin-bottom: 14px;
    }

    .legalPageContent h2.legalPageSection {
        margin: 30px 0 10px;
        font-size: 18px;
    }

    .legalPageContent h3.legalPageSubsection {
        margin: 20px 0 8px;
        font-size: 15px;
    }
}

/* Vnitřní odsazení karty už mezeru nahoře i dole má — první a poslední prvek
   ji tedy nesmí zdvojit, jinak nesedí horní a spodní okraj textu.
   Pravidlo stojí ZA mobilním blokem schválně: se selektory typu
   `.legalPageContent .legalPageList` má shodnou specificitu, takže o vítězi
   rozhoduje pořadí — kdyby bylo výš, poslední výčet by si na mobilu spodní
   mezeru ponechal. */
.legalPageContent > *:first-child {
    margin-top: 0;
}

.legalPageContent > *:last-child {
    margin-bottom: 0;
}

@media print {
    .legalPageBody,
    .gdprPageBody,
    .gdprPublicPageBody,
    .termsandconditionsPageBody {
        background: #fff;
        min-height: auto;
    }

    .legalPageCard {
        border: none;
        box-shadow: none;
        border-radius: 0;
    }

    .legalPageCard::before {
        display: none;
    }

    .legalPageContent,
    #gdprPage.legalPageContent,
    #termsandconditionsPage.legalPageContent {
        padding: 0;
        color: #000;
        font-size: 12pt;
    }
}

/* Nadpis právní stránky.
   Titulek byl dosud jen první řádek běžného textu, obarvený přes `::first-line`
   (viz výše) — vizuálně nadpis, pro odečítač i vyhledávač ale obyčejná věta.
   `/gdpr` a `/terms` tak neměly jediný <h1> (WCAG 1.3.1, 2.4.6).
   Hodnoty jsou schválně shodné s pravidlem `::first-line`, aby se vzhled nezměnil;
   `::first-line` se teď uplatní na první řádek uvnitř tohohle nadpisu, tedy na totéž. */
.legalPageTitle {
    display: block;
    margin: 0 0 0.35em;
    font-size: clamp(20px, 5vw, 28px);
    font-weight: 800;
    line-height: 1.25;
    color: #0f172a;
    letter-spacing: -0.02em;
}

/* Upozornění nad právním dokumentem, který je zatím jen česky.
   Vykresluje Library/legalLanguageNotice.php, a to jen mimo cs/sk. */
.legalPageLangNotice{
    margin: 0 0 20px;
    padding: 12px 14px;
    border-left: 3px solid var(--gc-primary, #007bff);
    border-radius: var(--gc-radius-sm, 6px);
    background: var(--gc-surface-muted, #f1f5f9);
    font-size: 14px;
    line-height: 1.5;
    color: var(--gc-text-muted, #475569);
}