/* ==========================================================================
   Espero: vzhled webu
   Převod z v2 `src/index.css`. Obsah je v Divi modulech, tady jen prezentace.
   Barvy jsou zároveň globálními barvami Divi (stejné hodnoty), vlastní CSS
   je čte výhradně z proměnných `--espero-*`.
   ========================================================================== */

/* --- Fonty (self-hosted, žádné Google Fonts) --- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/cormorant-garamond-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/cormorant-garamond-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/marcellus-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/marcellus-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokeny --- */
:root {
  /* Tmavé sekce */
  --espero-bg: #2b1608;
  --espero-bg2: #3d220e;

  /* Světlá teplá základna */
  --espero-sand: #f7e7d3;
  --espero-paper: #f7e7d3;
  --espero-peach: #eab083;
  --espero-glow: #f8eac5;

  /* Akcenty */
  --espero-orange: #cc6801;
  --espero-orangelight: #e8873a;
  --espero-gold: #c4952a;
  --espero-golddark: #8a6a20;

  /* Text */
  --espero-cream: #fff8ef;
  --espero-muted: #c9a888;
  --espero-ink: #2a1a10;
  --espero-inkmuted: #6d5340;

  /* Tón, do kterého navazují sousední světlé sekce přes zrno (v2: `#f5e6d2`). */
  --espero-page: #f5e6d2;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Marcellus', Georgia, serif;

  /* EASE z v2: [0.22, 1, 0.36, 1] */
  --espero-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Tailwind `transition-colors` */
  --espero-ease-tw: cubic-bezier(0.4, 0, 0.2, 1);

  /* Míry pergamenové sekce „Legendy" (v2 index.css): znak Vasca na švu,
     nadpis kapitoly pod ním a horní odsazení listu na sobě závisí. */
  --vasco-mark-h: min(clamp(8.5rem, 16vw, 13.5rem), 22svh);
  --chapter-gap: min(4rem, 6svh);
  --chapter-top: calc(var(--vasco-mark-h) / 2 + var(--chapter-gap));
  --chapter-headroom: calc(var(--chapter-top) + 1.5rem + min(2rem, 3.5svh));
}

/* --- Základ --- */
html {
  background-color: var(--espero-bg);
  scroll-behavior: smooth;
}

body {
  background-color: var(--espero-bg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Divi 5 (flex) přidává vlastní mezery: sekce 60 px mezi řádky, řádek 40 px,
   sloupec 30 px, pole formuláře 10 px. v2 (Tailwind) nic. Ve strukturách
   s třídou `es-*` se vypínají; `:where()` nechá přednost konkrétním
   mezerám, které si prvky nastavují samy. */
:where(
    .et_flex_section[class*='es-'],
    .et_flex_row[class*='es-'],
    .et_flex_row[class*='es-'] > .et_flex_column,
    .et_flex_section[class*='es-'] > .et_flex_row > .et_flex_column,
    .et_flex_group[class*='es-'],
    .es-form .et_pb_contact_field
  ) {
  gap: 0 !important;
}

/* Divi dává obsahu bílé pozadí; sekce si barvu nesou samy. */
#page-container,
#main-content {
  background-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--espero-gold);
  outline-offset: 3px;
}

/* --- Kurzor na interaktivních prvcích --- */
button:not(:disabled),
select:not(:disabled),
summary,
label[for],
input[type='checkbox']:not(:disabled),
input[type='radio']:not(:disabled),
input[type='submit']:not(:disabled),
input[type='button']:not(:disabled),
input[type='file']:not(:disabled),
[role='button']:not([aria-disabled='true']),
[role='tab']:not([aria-disabled='true']) {
  cursor: pointer;
}

button:disabled,
[aria-disabled='true'] {
  cursor: default;
}

::selection {
  background: var(--espero-gold);
  color: var(--espero-bg);
}

/* --- Tlačítka ---
   Třídy `btn-*` jsou pro prvky z JS a čisté odkazy. Na Divi modulu Tlačítko
   se používá třída `es-btn-*` (modul), styl míří na vnitřní `.et_pb_button`. */
.btn-solid,
.btn-outline,
.btn-outline-ink,
.es-btn-solid .et_pb_button,
.es-btn-outline .et_pb_button,
.es-btn-outline-ink .et_pb_button,
.et_pb_button.es-btn-solid,
.et_pb_button.es-btn-outline,
.et_pb_button.es-btn-outline-ink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  transition-property: color, background-color, border-color;
  transition-duration: 300ms;
  transition-timing-function: var(--espero-ease-tw);
}

.btn-outline,
.es-btn-outline .et_pb_button,
.et_pb_button.es-btn-outline {
  border: 1px solid var(--espero-gold);
  color: var(--espero-cream);
}
.btn-outline:hover,
.es-btn-outline .et_pb_button:hover,
.et_pb_button.es-btn-outline:hover {
  background-color: var(--espero-gold);
  color: var(--espero-bg);
}

/* Varianta na světlém (teplém) pozadí: inkoustový rám místo zlatého */
.btn-outline-ink,
.es-btn-outline-ink .et_pb_button,
.et_pb_button.es-btn-outline-ink {
  border: 1px solid rgb(42 26 16 / 0.35);
  color: var(--espero-ink);
}
.btn-outline-ink:hover,
.es-btn-outline-ink .et_pb_button:hover,
.et_pb_button.es-btn-outline-ink:hover {
  border-color: var(--espero-ink);
  background-color: var(--espero-ink);
  color: var(--espero-sand);
}

/* Plné oranžové tlačítko: hlavní akce */
.btn-solid,
.es-btn-solid .et_pb_button,
.et_pb_button.es-btn-solid {
  background-color: var(--espero-orange);
  color: var(--espero-cream);
}
.btn-solid:hover,
.es-btn-solid .et_pb_button:hover,
.et_pb_button.es-btn-solid:hover {
  background-color: var(--espero-ink);
}

/* --- Dotykový cíl 44 px bez zásahu do sazby (v2 `.tap-44`) ---
   Nepoužívat na odkaz uvnitř běžícího textu: neviditelná plocha by brala
   kliky sousednímu řádku. */
.tap-44 {
  position: relative;
}
.tap-44::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2.75rem;
  transform: translateY(-50%);
}

/* --- Velký nadpis: gradient do textu ---
   Na Divi modulu Nadpis se gradient musí dostat až na vlastní element
   nadpisu, proto i potomci `h1`–`h4`. Preset nadpisu nastavuje barvu
   s `!important`; `-webkit-text-fill-color` má přednost před `color`, takže
   gradient prosvítá i tak a barva z presetu zůstává jako záloha. */
.headline-fill,
.headline-fill :is(h1, h2, h3, h4) {
  background-image: linear-gradient(104deg, #fff8ef 0%, #f0e0c8 28%, #fff8ef 52%, #e6d2b6 78%, #fdf4e6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Tmavá varianta pro světlé sekce */
.headline-ink,
.headline-ink :is(h1, h2, h3, h4) {
  background-image: linear-gradient(104deg, #2a1a10 0%, #5a3418 30%, #2a1a10 55%, #6b3d18 80%, #2a1a10 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* --- Presety Divi ---
   Presety nesou barvy, písmo a hover (upravitelné v builderu). Co Divi
   v presetu neumí, doplňuje tahle část; selektor je třída presetu, takže
   stačí modulu vybrat preset. ID jsou v `docs/divi-ids.json`. */

/* Tlačítka: odsazení a přechod barev (v2 `px-7 py-3.5`, 300 ms). */
.et_pb_button:is(
    [class*='preset--module--divi-button--e669e65b-ed2b-41eb-aa25-ba36178b190b'],
    [class*='preset--module--divi-button--be6f56ff-5b00-4e17-9688-4513d0b3c6bf'],
    [class*='preset--module--divi-button--b779e123-3e90-43aa-809c-dd2752fd9122']
  ) {
  display: inline-flex;
  flex-direction: row !important; /* Divi flex modul je jinak sloupec */
  gap: 0 !important; /* šipku odsazuje vlastní margin (ml-2) */
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.875rem 1.75rem !important;
  line-height: 1.5 !important;
  transition-property: color, background-color, border-color;
  transition-duration: 300ms;
  transition-timing-function: var(--espero-ease-tw);
}

/* Velikosti tlačítek z v2 jako třídy modulu */
.es-btn-lg .et_pb_button,
.et_pb_button.es-btn-lg {
  padding: 1rem 2rem !important; /* px-8 py-4 */
}
.es-btn-xl .et_pb_button,
.et_pb_button.es-btn-xl {
  padding: 1rem 2.5rem !important; /* px-10 py-4 */
}
.es-btn-wide .et_pb_button,
.et_pb_button.es-btn-wide {
  padding: 0.875rem 2.25rem !important; /* px-9 py-3.5 */
}

/* Hover: Divi přepisuje odsazení na `1em !important` (selektor
   `body #page-container .et_pb_section …:hover`) a tlačítko se zúží.
   v2 mění jen barvy, proto stejné odsazení držíme i při hoveru. */
#page-container .et_pb_section .et_pb_button:is(
    [class*='preset--module--divi-button--e669e65b-ed2b-41eb-aa25-ba36178b190b'],
    [class*='preset--module--divi-button--be6f56ff-5b00-4e17-9688-4513d0b3c6bf'],
    [class*='preset--module--divi-button--b779e123-3e90-43aa-809c-dd2752fd9122']
  ):hover {
  padding: 0.875rem 1.75rem !important;
}
#page-container .et_pb_section .es-btn-lg .et_pb_button:hover,
#page-container .et_pb_section .et_pb_button.es-btn-lg:hover {
  padding: 1rem 2rem !important;
}
#page-container .et_pb_section .es-btn-xl .et_pb_button:hover,
#page-container .et_pb_section .et_pb_button.es-btn-xl:hover {
  padding: 1rem 2.5rem !important;
}
#page-container .et_pb_section .es-btn-wide .et_pb_button:hover,
#page-container .et_pb_section .et_pb_button.es-btn-wide:hover {
  padding: 0.875rem 2.25rem !important;
}
#page-container .et_pb_section .et_pb_button.es-agegate-back:hover {
  padding: 0.5rem !important;
}
#page-container .et_pb_section .et_pb_button.es-filter-option:hover {
  padding: 0.5rem 1.25rem !important;
}
#page-container .et_pb_section .es-recipe-empty .et_pb_button:hover {
  padding: 0.75rem 2rem !important;
}
#page-container .et_pb_section .es-cta-actions .et_pb_button:hover {
  padding: 1rem 2.5rem !important;
}
#page-container .et_pb_section .es-crosssell .et_pb_button:hover {
  padding: 0.75rem 1.5rem !important;
}
#page-container .et_pb_section .es-form .et_pb_contact_submit.et_pb_button:hover {
  padding: 0.875rem 2.25rem !important;
}

/* Nadpis kapitoly: řádkování 1 (`leading-none`), Divi ho z presetu nevypíše. */
.preset--module--divi-heading--079977cb-e5ee-4ded-be0b-eb2d48697d83 :is(h1, h2, h3, h4) {
  line-height: 1;
}

/* Divi dává nadpisům spodní odsazení 10 px; v2 (Tailwind preflight) nic. */
.et_pb_heading_container :is(h1, h2, h3, h4, h5, h6) {
  padding-bottom: 0;
}

/* --- Zrno (feTurbulence) --- */
.grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- USP ikony: pomalé „dýchání" --- */
@keyframes icon-float {
  from {
    transform: translateY(-3px);
  }
  to {
    transform: translateY(3px);
  }
}
.animate-icon-float {
  animation: icon-float 6s ease-in-out infinite alternate;
}

/* --- Indikátor scrollu: tenká linka jede dolů --- */
@keyframes scroll-pulse {
  0% {
    transform: translateY(-110%);
  }
  60% {
    transform: translateY(230%);
  }
  100% {
    transform: translateY(230%);
  }
}
.animate-scroll-pulse {
  animation: scroll-pulse 2.8s cubic-bezier(0.45, 0, 0.35, 1) infinite;
}

/* --- Nástupy při scrollu (v2 `whileInView`) ---
   Skrývá se jen tehdy, když běží JS (`es-js` na <html>) a nejsme ve builderu.
   Bez JS nebo při reduced-motion zůstává obsah vidět. */
html.es-js:not(.es-builder) body:not(.et-fb) :is(.es-reveal-children > .et_pb_column > .et_pb_module, .es-reveal-children > .et_pb_module):not(.is-visible),
html.es-js:not(.es-builder) body:not(.et-fb) .es-reveal {
  opacity: 0;
  transform: translateY(var(--es-reveal-y, 24px));
  transition:
    opacity var(--es-reveal-duration, 1s) var(--espero-ease) var(--es-reveal-delay, 0s),
    transform var(--es-reveal-duration, 1s) var(--espero-ease) var(--es-reveal-delay, 0s);
}
html.es-js:not(.es-builder) body:not(.et-fb) .es-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Reduced motion: všechno statické --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .animate-icon-float,
  .animate-scroll-pulse {
    animation: none !important;
  }
  html.es-js .es-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Ve Visual Builderu žádné animace: obsah musí být vidět a editovatelný. */
:is(html.es-builder, body.et-fb) {
  scroll-behavior: auto;
}
:is(html.es-builder, body.et-fb) .animate-icon-float,
:is(html.es-builder, body.et-fb) .animate-scroll-pulse {
  animation: none !important;
}

/* Pozn.: obecné resety modulů uvnitř sekcí (`margin: 0`) jsou v `:where()`,
   tedy s nulovou specificitou. Konkrétní okraje prvků (`mt-*` z v2) tak
   vyhrají, i když jsou zapsané dřív nebo jednodušším selektorem. */