/* ==========================================================================
   Cukrovinky u Kristýnky: barvy, písmo, základní vzhled a pomocné třídy
   ========================================================================== */

:root {
  /* Barvy hlavního obsahu: sytější pastely na teplém hnědém inkoustu. */
  --barva-smetana: #fff9f4;
  --barva-smetana-tmava: #f7e4dc;
  --barva-inkoust: #4a2e27;
  --barva-inkoust-jemny: #7a5c50;
  --barva-ruze: #ff7590;
  --barva-ruze-jemna: #f6d9d6;
  --barva-ruze-syta: #e8577b;
  --barva-zlata: #ffb84d;
  --barva-zlata-jemna: #e9d3a3;
  --barva-mata: #4fb583;
  --barva-mata-jemna: #dce6d2;
  --barva-bila: #fffdf9;
  --barva-cara: rgba(74, 46, 39, 0.14);
  --barva-fokus: #c2436a;

  --barva-ruze-nadech: #fbeceb;
  --barva-mata-nadech: #eef3e8;
  --barva-zlata-nadech: #f7ecd6;
  --barva-ruze-text: #9a3a53;
  --barva-mata-text: #276b48;
  --barva-zlata-text: #8a5a12;
  --barva-ruze-najeti: #d4436a;
  --barva-vyzva-stred: #c2436a;
  --barva-hlavicka: rgba(255, 248, 239, 0.85);
  --barva-chyba: #a3413a;
  --barva-chyba-pozadi: #fbe9e6;
  --barva-uspech-text: #276b48;
  --barva-uspech-pozadi: #e4f1e8;

  --zar-1: rgba(201, 161, 90, 0.28);
  --zar-2: rgba(232, 160, 160, 0.32);
  --zar-3: rgba(143, 160, 124, 0.22);

  --pismo-nadpis: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --pismo-text: "Work Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --mezera-1: 0.25rem;
  --mezera-2: 0.5rem;
  --mezera-3: 0.75rem;
  --mezera-4: 1rem;
  --mezera-5: 1.5rem;
  --mezera-6: 2.5rem;
  --mezera-7: 4rem;
  --mezera-8: 6rem;
  --mezera-9: 9rem;

  --polomer-maly: 6px;
  --polomer-stredni: 14px;
  --polomer-velky: 28px;
  --stin-jemny: 0 20px 45px -25px rgba(59, 42, 32, 0.35);
  --stin-vyrazny: 0 30px 60px -20px rgba(59, 42, 32, 0.45);

  --sirka-obsahu: 1200px;
}

/* Hlavička a patička mají jemnější, "pudrové" barvy, zbytek stránky zůstává na sytějších.
   Vlastní vlastnosti se dědí, takže stačí přepsat je na těchto dvou prvcích. */
.hlavicka,
.pata {
  --barva-ruze: #e8a0a0;
  --barva-ruze-syta: #c97070;
  --barva-zlata: #c9a15a;
  --barva-mata: #8fa07c;
  --barva-fokus: #a85a5a;
  --barva-ruze-text: #96444a;
  --barva-mata-text: #4c6b3c;
  --barva-zlata-text: #8a6a24;
  --barva-ruze-najeti: #b85f5f;
  --barva-vyzva-stred: #a85a5a;
  --barva-hlavicka: rgba(255, 249, 244, 0.85);
}

/* ---------- Základ ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--vyska-hlavicky, 4.2rem) + 4.5rem); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--barva-smetana);
  color: var(--barva-inkoust);
  font-family: var(--pismo-text);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Lepivá patička: veřejné stránky jsou sloupec o výšce alespoň celého okna,
   hlavní obsah se roztáhne a patička tak vždy leží na spodním okraji,
   i když je obsah krátký (např. po odeslání poptávky nebo na chybové stránce). */
body:not(.sprava) {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body:not(.sprava) > main { flex: 1 0 auto; width: 100%; }
body:not(.sprava) > footer,
body:not(.sprava) > header,
body:not(.sprava) > .oznameni { flex-shrink: 0; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--pismo-nadpis);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 var(--mezera-4);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.6rem, 5vw + 1rem, 4.6rem); }
h2 { font-size: clamp(2rem, 3vw + 1rem, 3rem); }
h3 { font-size: clamp(1.35rem, 1.2vw + 1rem, 1.75rem); }

p { margin: 0 0 var(--mezera-4); max-width: 62ch; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

/* ---------- Rozložení ---------- */
.kontejner {
  width: 100%;
  max-width: var(--sirka-obsahu);
  margin-inline: auto;
  padding-inline: var(--mezera-5);
}

.sekce { padding-block: var(--mezera-8); }
.sekce--uzka { padding-block: var(--mezera-7); }

.nadtitulek {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--barva-ruze);
  margin-bottom: var(--mezera-2);
}

.uvodni-text {
  font-size: 1.15rem;
  color: var(--barva-inkoust-jemny);
  max-width: 58ch;
}

.stred { text-align: center; margin-inline: auto; }

.jen-pro-ctecky {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.preskocit {
  position: absolute;
  left: var(--mezera-4);
  top: -60px;
  background: var(--barva-inkoust);
  color: var(--barva-bila);
  padding: var(--mezera-2) var(--mezera-4);
  border-radius: var(--polomer-maly);
  z-index: 200;
  transition: top 0.2s ease;
}
.preskocit:focus { top: var(--mezera-4); }

:focus-visible { outline: 3px solid var(--barva-fokus); outline-offset: 3px; }

/* Past na roboty: pole je mimo obrazovku, člověk ho nevidí ani nevyplní. */
.past {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 640px) {
  .sekce { padding-block: var(--mezera-7); }
  .sekce--uzka { padding-block: var(--mezera-6); }
}