/*
 * Veřejný objednávkový formulář pro zákazníky.
 *
 * Načítá se jen na stránce /objednavka (a na potvrzení objednávky), proto tu
 * mohou být obecné selektory na prvky — nikde jinde v aplikaci se tento soubor
 * nepoužije.
 *
 * Vzhled vychází z ostatních stránek webu (steampunkbrno.cz): tmavě šedý obsah
 * (#131313, ne černý), nadpisy Teko velkými písmeny s prostrkáním a žlutou
 * #fcd300, zlato-hnědé dělící čáry (#9b7b3f). Původní formulář měl pole vysoká
 * 57 px a rozestup 52 px; tady jsou pole nižší (44 px) a rozestupy větší, což
 * na široké obrazovce vypadá lépe.
 *
 * Je to zároveň záloha pro přímé otevření stránky: když je formulář vložený do
 * našeho webu, pošle si web svoje styly tématu (viz order.js) a ty se vloží až
 * za tento soubor, takže mají poslední slovo. Vzhled formuláře se tím mění
 * spolu s tématem webu, aniž by se sem muselo cokoli dopisovat.
 */

/* Stejná písma jako na webu; když se nenačtou, použije se systémové. */
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&family=Teko:wght@400;500&display=swap');

html { -webkit-text-size-adjust: 100%; }

/*
 * Selektor `html body` (ne jen `body`) je záměrně konkrétnější: při vložení do
 * webu se za tímto souborem načtou styly tématu, které nastavují černé pozadí,
 * a stejně specifický selektor by vyhrál jen podle pořadí. Takhle zůstane
 * formulář šedý jako ostatní stránky.
 */
html body {
    margin: 0;
    background: #000;
    color: #f8f8f8;
    font: 14px/1.6 Play, "Segoe UI", system-ui, sans-serif;
}

/*
 * Šedý podklad jako na ostatních stránkách webu: na /pokusne_krysy/ má panel
 * `max-width: 1000px`, je na střed a okolo je černá stránka; odsazení obsahu
 * od okraje podkladu je 126 px. Dřív byl podklad přes celou šířku iframe,
 * takže byl širší než zbytek webu a text se lepil na jeho spodní okraj.
 *
 * Obsah (nadpis, úvod, formulář) je užší než podklad — stejně jako na webu,
 * kde je text uvnitř panelu — a je na střed.
 */
main {
    box-sizing: border-box;
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(3rem, 10vw, 7rem) 1.5rem clamp(4rem, 12vw, 8rem);
    background: #131313;
}

/*
 * Obsah drží šířku a je na střed podkladu. Je to obal s třídou (z layoutu),
 * ne `main > *`: hvězdička má nulovou specificitu, takže by obecné pravidlo
 * přebilo `.card { margin: 0 }` na formuláři a obsah by zůstal vlevo.
 */
main > .obsah { max-width: 42rem; margin: 0 auto; }

/*
 * Nadpis a úvodní text mají vlastní selektory s `main` (a třídou u odstavce)
 * záměrně: WordPress posílá do vloženého formuláře svoje globální styly
 * (`h1 { font-size: var(--wp--preset--font-size--xx-large) }` = přes 46 px
 * a `:root :where(p) { font-size: var(--wp--preset--font-size--large) }` =
 * přes 21 px) a ty se vkládají až za náš soubor. Stejně specifický selektor by
 * tedy vyhrál podle pořadí a formulář by měl obrovský nadpis i text.
 *
 * Velikosti jsou opsané z ostatních stránek webu: nadpis Teko s prostrkáním
 * a žlutou #fcd300 o velikosti nadpisu na /pokusne_krysy/ (22,4 px), text pod
 * ním 14 px jako běžný text webu.
 */
main h1 {
    margin: 0 0 1rem;
    padding-bottom: .3rem;
    border-bottom: 2px solid #9b7b3f;
    color: #fcd300;
    font-family: Teko, Play, sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 3px;
    text-align: center;
    text-transform: uppercase;
}

main .uvod {
    margin: .75rem 0 0;
    color: #f8f8f8;
    font-size: 14px;
    text-align: center;
}

/* Rozestupy mezi poli jsou větší než dřív, aby formulář dýchal. */
main label { display: block; margin: 1.5rem 0 .35rem; color: #fff; font-size: 14px; }

input, select, textarea {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: .5rem .75rem;
    border: 1px solid #00041e;
    border-radius: 2px;
    background: #fff;
    color: #000;
    font: inherit;
    font-size: 16px;
}

textarea { height: auto; min-height: 6rem; }

input[type="checkbox"], input[type="radio"] { width: auto; height: auto; }

/*
 * Odkaz-tlačítko na potvrzovací stránce („Zadat další objednávku“) má stejný
 * vzhled jako tlačítko formuláře, aby sedělo se zbytkem stránek — app.css mu
 * dává jinou (červenou) barvu, protože je psaný pro lištu obsluhy.
 */
main .button {
    display: inline-block;
    margin-top: .9rem;
    padding: .45rem 1.25rem;
    border: 2px solid #000;
    border-radius: 5px;
    background: #fcd300;
    color: #000;
    font-family: Teko, Play, sans-serif;
    font-size: 1.35rem;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
}

main .button:hover { color: #000; filter: brightness(1.08); }

main form button {
    display: block;
    margin: 1.75rem auto 0;
    padding: .45rem 1.25rem;
    border: 2px solid #000;
    border-radius: 5px;
    background: #fcd300;
    color: #000;
    font-family: Teko, Play, sans-serif;
    font-size: 1.35rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
}

/* Doplňkové texty jsou menší a šedé — stejně jako v původním formuláři. */
main .muted { margin: .5rem 0 0; color: #b9b9b9; font-size: 12px; }
main .povinne { color: #fcd300; font-weight: 700; }
main .cena { margin: 1.5rem 0 0; font-size: 16px; }
main .cena strong { color: #fcd300; }

/* Nadpis sekce uvnitř formuláře (doručovací adresa) — stejný vzhled jako
   rozklikávací nadpis adresy pro doklad, aby se sekce nepletly. */
main .nadpis-sekce {
    margin: 2rem 0 0;
    color: #fcd300;
    font-family: Teko, Play, sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
}

main label.zaskrtnuti { display: flex; gap: .5rem; align-items: flex-start; font-size: 14px; font-weight: 400; }
main label.zaskrtnuti input { margin-top: .3rem; }

/* Sbalená adresa pro doklad — otevírá se kliknutím na nadpis. */
details#blok-adresa { margin-top: 1.75rem; }
details#blok-adresa > summary {
    color: #fcd300;
    font-size: 16px;
    cursor: pointer;
    list-style-position: inside;
}
details#blok-adresa > summary:hover { text-decoration: underline; }

/* Formulář není karta: v tmavém vzhledu leží pole přímo na pozadí. */
.card { margin: 0; padding: 0; border: 0; background: transparent; }

/* Jméno a e-mail vedle sebe, jako je měl původní formulář. */
.dvojice { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
@media (max-width: 40rem) { .dvojice { grid-template-columns: 1fr; } }

/* Past na roboty musí zůstat neviditelná i tady. */
.past { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Potvrzení objednávky, tabulky a hlášky v tmavém provedení. */
.result { margin: 1rem 0; padding: 1rem; border: 1px solid #444; border-left-width: 6px; border-radius: .35rem; background: #1b1b1b; }
main .result h2 { margin-top: 0; }
.result-ok { border-left-color: #4caf50; }
.result-warn { border-left-color: #b8860b; }
.result-error { border-left-color: #d05a5a; }
.result-neutral { border-left-color: #555; }

table { border-collapse: collapse; }
th, td { padding: .4rem .6rem; border: 1px solid #444; color: #f8f8f8; text-align: left; }
main .result th { width: 10rem; white-space: nowrap; }

.flash { padding: .6rem .8rem; border-radius: .35rem; }
.flash-ok { background: #14351c; color: #d9f2e0; }
.flash-error { background: #3a1414; color: #f7dcdc; }

a { color: #fcd300; }