/* =====================================================================
   Základ nad vygenerovanými třídami.

   Schválně krátké. Všechno, co jde vyjádřit třídou, patří AI do rukou;
   sem jen věci, které se třídami vyjádřit nedají a bez kterých web působí
   nedodělaně, ať už si AI vymyslí cokoli.

   Nic tady nekreslí obsah. Žádná hlavička, žádná patička, žádné mřížky.
   ===================================================================== */

/*
 * Výchozí barvy a písma webu.
 *
 * Sémantické třídy (`bg-znacka`, `text-na-znacce`…) ukazují na tyhle
 * proměnné. Web bez vlastního nastavení tak vypadá rozumně a přepínač
 * barev v editoru jen tyhle hodnoty přepíše — HTML sekcí se nedotkne.
 *
 * `theme_tokens` webu se vkládají AŽ ZA tenhle soubor, takže je přebijí.
 */
:root {
    --znacka: #2563eb;
    --znacka-tmava: #1d4ed8;
    --znacka-svetla: #eff6ff;
    --doplnkova: #0f766e;
    --na-znacce: #ffffff;

    --text: #1f2937;
    --tise: #6b7280;
    --plocha: #f8fafc;
    --papir: #ffffff;
    --tmava: #0f172a;
    --ram: #e5e7eb;

    --focus: #2563eb;
    --selection: #dbeafe;
    --field-border: #d1d5db;
    --field-radius: .5rem;
    --field-bg: #ffffff;
    --muted: #9ca3af;
    --img-bg: #f3f4f6;

    /*
     * `--stick-h` (výška přilepené hlavičky) tu SCHVÁLNĚ NENÍ.
     *
     * Kdyby tu byla, přebila by obě záložní hodnoty u `scroll-margin-top`
     * níž a rozlišení „web s přilepenou hlavičkou / bez ní" by přestalo
     * fungovat. Nastavuje ji až zákazník v nastavení webu, když chce
     * odsadit jinak, než kolik odhadne `:has()`.
     */

    /*
     * Lišta se souhlasem si dřív sahala po `--surface`, `--border`,
     * `--radius` a `--radius-sm`, které nejsou definované nikde. Tmavý
     * web tak dostal bílou lištu se šedým rámečkem. Míří teď na
     * proměnné, které zákazník opravdu nastavuje.
     */
    --radius: .75rem;
    --radius-sm: .5rem;
}

/* Kotvy uvnitř stránky mají klouzat, ale ne komu na tom vadí. */
html {
    scroll-behavior: smooth;
}

/*
 * Nic v sekci nesmí roztáhnout stránku do šířky.
 *
 * Stačí jedna pevná šířka nebo dlouhé slovo bez mezery a na telefonu
 * se web posouvá doprava do prázdna. Je to nejnápadnější chyba, jakou
 * web může mít, a zákazník ji vidí dřív než cokoli jiného.
 *
 * `clip`, ne `hidden`: `overflow-x: hidden` na `html`/`body` zruší
 * `position: sticky` u potomků, a přilepená hlavička je běžná věc.
 */
html, body {
    overflow-x: clip;
}

/*
 * Rozbalovací mobilní nabídka stojí na `<details>`, protože skripty se
 * do sekcí nepouštějí. Bez tohohle by na tlačítku s ikonou zůstal
 * výchozí trojúhelníček prohlížeče a vypadalo by to jako chyba.
 */
summary {
    cursor: pointer;
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

summary::marker {
    content: '';
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, ::before, ::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Viditelné zaměření klávesnicí. Bez tohohle by se web nedal projít
   tabulátorem, protože preflight ruší výchozí obrysy prohlížeče. */
:focus-visible {
    outline: 2px solid var(--focus, #2563eb);
    outline-offset: 2px;
}

::selection {
    background: var(--selection, #dbeafe);
}

/*
 * Kotva musí skončit POD přilepenou hlavičkou, ale jen na webu, který
 * ji má.
 *
 * Dřív se odsazovalo natvrdo o 5rem, protože `--stick-h` nikdo nikdy
 * nenastavil. Na webu bez přilepené hlavičky, což je většina, tím
 * kliknutí na „Kontakt" skončilo o pět řádků pod nadpisem. Nula pro
 * všechny by zas schovala nadpis pod hlavičku tam, kde přilepená je.
 *
 * `:has()` rozhodne podle skutečnosti: když je na stránce cokoli
 * přilepeného, odsadí se; jinak ne. Kdo chce přesnou hodnotu, nastaví
 * si `--stick-h` v nastavení webu.
 */
[id] {
    scroll-margin-top: var(--stick-h, 0rem);
}

body:has(.sticky, .md\:sticky, .lg\:sticky, .xl\:sticky, .sm\:sticky) [id] {
    scroll-margin-top: var(--stick-h, 5rem);
}

/* Formulářové prvky utility neřeší a AI je bude psát holé. Tohle je
   nejmenší možný základ, aby vypadaly jako součást webu a ne jako
   výchozí ovládací prvky prohlížeče. */
input, textarea, select {
    width: 100%;
    padding: .625rem .75rem;
    border: 1px solid var(--field-border, #d1d5db);
    border-radius: var(--field-radius, .5rem);
    background: var(--field-bg, #fff);
    color: inherit;
}

input::placeholder, textarea::placeholder {
    color: var(--muted, #9ca3af);
}

/* Obrázek, který se ještě nenačetl, nemá skákat s rozvržením. */
img {
    background: var(--img-bg, #f3f4f6);
}

/* Sekce psané AI dostávají tuhle třídu jen tehdy, když si o ni řeknou.
   Slouží na dlouhý text, kde je vypisování tříd u každého odstavce
   zbytečné. */
.text-flow > * + * {
    margin-top: 1em;
}

.text-flow ul, .text-flow ol {
    list-style: revert;
    padding-left: 1.5em;
}

.text-flow a {
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* ── Lišta se souhlasem ──────────────────────────────────────────────
   Vykresluje ji `mereni.js`, styl je tady, aby se neblikalo a aby si ho
   zákazník mohl přebarvit stejnými proměnnými jako zbytek webu.

   Schválně nepřekrývá celou obrazovku: lišta, která se nedá obejít,
   nutí lidi klikat na „souhlasím“ jen aby se dostali k obsahu, a takový
   souhlas nic neznamená. */
.ts-cookies {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 9999;
    max-width: 32rem;
    margin-inline: auto;
    padding: 1rem 1.125rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    background: var(--papir, #fff);
    color: var(--text, #1f2937);
    border: 1px solid var(--ram, #e5e7eb);
    border-radius: var(--radius, .75rem);
    box-shadow: 0 10px 30px rgb(0 0 0 / .15);
    font-size: .8125rem;
    line-height: 1.5;
}

.ts-cookies p {
    flex: 1 1 14rem;
    margin: 0;
}

.ts-cookies__akce {
    display: flex;
    gap: .5rem;
}

.ts-cookies button {
    padding: .5rem .875rem;
    border-radius: var(--radius-sm, .5rem);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ts-cookies__ano {
    background: var(--znacka, #111827);
    color: var(--na-znacce, #fff);
}

.ts-cookies__ne {
    background: transparent;
    border-color: var(--ram, #d1d5db);
    color: inherit;
}

.ts-cookies button:focus-visible {
    outline: 2px solid var(--znacka, #111827);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .ts-cookies {
        animation: ts-cookies-in .25s ease-out;
    }

    @keyframes ts-cookies-in {
        from { transform: translateY(1rem); opacity: 0; }
    }
}

/* ── Podpis pod webem ────────────────────────────────────────────────
   Vykresluje ho `Skeleton::podpis()` pod poslední sekcí, mimo dosah
   modelu i čističe sekcí. Musí být decentní: je to naše vizitka na
   cizím webu, ne reklamní pruh. */
.web-podpis {
    padding: .85rem 1rem;
    background: var(--plocha, #f4f6f8);
    border-top: 1px solid var(--ram, #e3e7ec);
    color: var(--tise, #5c6675);
    font-size: .78rem;
    line-height: 1.5;
    text-align: center;
}

.web-podpis a { color: inherit; text-decoration: underline; }
.web-podpis a:hover { color: var(--znacka, #2563eb); }

/* ─────────────────────────────────────────────────────────────────────
   OBJEVENÍ PŘI ODROLOVÁNÍ

   Třídy si přidává `web.js`, ne stavitel sekce. Kdyby počáteční stav
   (`opacity: 0`) byl v CSS napevno, člověk s vypnutým JavaScriptem by
   koukal na prázdnou stránku. Takhle se nic neschová dřív, než je
   jisté, že se to zase objeví.
   ───────────────────────────────────────────────────────────────── */

.web-animace {
    opacity: 0;
    transition: opacity .5s ease-out, transform .5s ease-out;
    will-change: opacity, transform;
}

.web-animace--zdola  { transform: translateY(16px); }
.web-animace--zleva  { transform: translateX(-16px); }
.web-animace--zprava { transform: translateX(16px); }
.web-animace--zjemna { transform: none; }

.web-animace.je-videt {
    opacity: 1;
    transform: none;
}

/* Kdo má animace vypnuté, vidí obsah rovnou. `web.js` mu třídy vůbec
   nepřidá, tohle je druhá pojistka pro případ, že by je přidal někdo
   jiný. */
@media (prefers-reduced-motion: reduce) {
    .web-animace {
        opacity: 1;
        transform: none;
        transition: none;
    }
}