/* ==========================================================================
   Stavební kameny stránek: sekce, šířky řádků, hlavička podstránky, papír.
   A obsah jednoduchých stránek: Kontakt (formulář), Zásady.
   ========================================================================== */

/* --- Řádky: šířka obsahu podle Tailwind `max-w-*` + `px-6` --- */
:is(.es-row-xl, .es-row-2xl, .es-row-3xl, .es-row-4xl, .es-row-5xl, .es-row-6xl) {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 1.5rem !important;
}
.es-row-xl {
  max-width: 36rem !important;
}
.es-row-2xl {
  max-width: 42rem !important;
}
.es-row-3xl {
  max-width: 48rem !important;
}
.es-row-4xl {
  max-width: 56rem !important;
}
.es-row-5xl {
  max-width: 64rem !important;
}
.es-row-6xl {
  max-width: 72rem !important;
}
:is(.es-row-xl, .es-row-2xl, .es-row-3xl, .es-row-4xl, .es-row-5xl, .es-row-6xl) > .et_pb_column {
  width: 100% !important;
  margin: 0 !important;
}

/* Sekce stránek si odsazení nesou samy (v2 `pt-*`/`pb-*`), Divi nic. */
:is(.es-pagehead, .es-paper) {
  position: relative;
  overflow: hidden;
}

/* --- Hlavička podstránky (v2 PageHero, hlavičky /kolekce, /novinky) ---
   Písek, dvě teplé skvrny, vodoznak Vasca vpravo nahoře, zrno. Vše jako
   vrstvy pozadí v pořadí v2 (zrno nahoře, skvrny dole). */
.es-pagehead {
  padding: 9rem 0 2.5rem !important; /* pt-36 pb-10 */
  background-image:
    var(--es-grain-06),
    url(../img/balboa-mark-ink-045.svg),
    radial-gradient(circle at center, rgba(234, 176, 131, 0.385), transparent 70%),
    radial-gradient(circle at center, rgba(248, 234, 197, 0.63), transparent 68%) !important;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat !important;
  background-size:
    auto,
    auto 520px,
    34rem 34rem,
    36rem 36rem !important;
  background-position:
    0 0,
    right 3vw top -7rem,
    right -14vw top -5rem,
    left -12vw top -8rem !important;
}
@media (min-width: 768px) {
  .es-pagehead {
    padding: 11rem 0 3rem !important; /* md:pt-44 md:pb-12 */
    background-size:
      auto,
      auto 640px,
      34rem 34rem,
      36rem 36rem !important;
  }
}
.es-pagehead .et_pb_column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important; /* gap-6 */
  text-align: center;
}
:where(.es-pagehead .et_pb_module) {
  margin: 0 !important;
}

/* --- Papírová sekce se zrnem --- */
.es-paper {
  background-image: var(--es-grain-06) !important;
}

/* ==========================================================================
   Kontakt (v2 ContactMain.tsx)
   ========================================================================== */

.es-contact {
  padding: 2.5rem 0 6rem !important; /* pt-10 pb-24 */
}
@media (min-width: 768px) {
  .es-contact {
    padding: 3rem 0 7rem !important; /* md:pt-12 md:pb-28 */
  }
}

.es-form {
  margin: 0 !important;
}
.es-form .et_pb_contact_form {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important; /* gap-5 */
  margin: 0 !important;
}
.es-form .et_pb_contact_field {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.es-form .et_pb_contact_form_label {
  display: block !important;
  margin-bottom: 0.375rem; /* mb-1.5 */
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--espero-inkmuted) !important;
}

/* 16 px na telefonu: Safari na iOS by menší pole při kliknutí přizoomovalo. */
.es-form :is(input.input, textarea.input) {
  width: 100% !important;
  margin: 0 !important;
  padding: 0.75rem 1rem !important; /* px-4 py-3 */
  border: 1px solid rgb(42 26 16 / 0.2) !important;
  border-radius: 0 !important;
  background-color: var(--espero-cream) !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--espero-ink) !important;
  box-shadow: none !important;
  transition: border-color 200ms var(--espero-ease-tw);
}
@media (min-width: 768px) {
  .es-form :is(input.input, textarea.input) {
    font-size: 15px !important;
  }
}
/* Textarea je v v2 řádkový prvek: pod ním zůstává mezera po účaří (6 px).
   Pole Divi je flex, řádkový prvek by v něm zblokoval, proto odsazení. */
.es-form .et_pb_contact_field:has(textarea) {
  padding-bottom: 6px !important;
}
.es-form textarea.input {
  height: auto !important;
  min-height: calc(7 * 1.5em + 1.5rem + 2px); /* rows={7} + rámeček */
  resize: vertical;
}
.es-form :is(input.input, textarea.input):focus {
  border-color: var(--espero-orange) !important;
  outline: none;
}
/* v2 pole placeholder nemají; Divi do něj kopíruje popisek. */
.es-form :is(input.input, textarea.input)::placeholder {
  color: transparent !important;
}
/* Chyba (Divi přidá `et_contact_error`): rámeček jako u v2 hlášky. */
.es-form .et_contact_error {
  border-color: rgb(185 28 28) !important;
}

/* Souhlas: jen checkbox a věta, nadpis pole schovaný. */
.es-field-souhlas > .et_pb_contact_form_label,
.es-field-souhlas .et_pb_contact_field_options_title {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.es-field-souhlas .et_pb_contact_field_checkbox {
  display: block;
  margin: 0 !important;
}
.es-field-souhlas .et_pb_contact_field_checkbox input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}
/* Věta souhlasu běží jako text (ne flex), ať mezi „se" a odkazem není mezera
   navíc; políčko visí vlevo. */
.es-field-souhlas .et_pb_contact_field_checkbox label {
  position: relative;
  display: block !important;
  min-height: calc(1.375rem + 0.75rem) !important; /* výšku v v2 dává políčko 20 px + mt-0.5; Divi ji přebíjí */
  box-sizing: border-box;
  padding: 0.375rem 0 0.375rem 2rem !important; /* py-1.5 kvůli palci, gap-3 + 20 px */
  cursor: pointer;
  font-size: 14px !important;
  line-height: 1.375 !important;
  color: rgb(42 26 16 / 0.8) !important;
}
/* Tečka za odkazem jako v2 („…se [Zásadami ochrany osobních údajů].") */
.es-field-souhlas .et_pb_contact_field_checkbox label a::after {
  content: '.';
  display: inline-block;
  text-decoration: none;
}
/* Políčko kreslí Divi jako <i>; vzhled nativního checkboxu s accent-orange. */
.es-field-souhlas .et_pb_contact_field_checkbox label i {
  position: absolute !important;
  left: 0;
  top: 0.375rem;
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin: 0.125rem 0 0 !important;
  padding: 0 !important;
  border: 1px solid rgb(42 26 16 / 0.45) !important;
  border-radius: 3px;
  background: var(--espero-cream) !important;
}
.es-field-souhlas input[type='checkbox']:checked + label i {
  border-color: var(--espero-orange) !important;
  background: var(--espero-orange) !important;
}
.es-field-souhlas input[type='checkbox']:checked + label i::before {
  content: '' !important;
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid var(--espero-cream);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  font-size: 0;
}
.es-field-souhlas input[type='checkbox']:focus-visible + label i {
  outline: 2px solid var(--espero-gold);
  outline-offset: 3px;
}
.es-field-souhlas label a {
  font: inherit !important;
  color: inherit !important;
  text-decoration: underline;
  text-decoration-color: rgb(204 104 1 / 0.5);
  text-underline-offset: 4px;
  transition: color 200ms var(--espero-ease-tw);
}
.es-field-souhlas label a:hover {
  color: var(--espero-orange) !important;
}

/* Odeslat: btn-solid, px-9 py-3.5, šipka jako v2 (dekorace). */
.es-form .et_contact_bottom_container {
  float: none !important;
  display: flex;
  justify-content: flex-start;
  margin: 0 !important;
  padding-top: 0.5rem; /* pt-2 */
}
.es-form .et_pb_contact_submit.et_pb_button {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 0.875rem 2.25rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: var(--espero-orange) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--espero-cream) !important;
  transition: background-color 300ms var(--espero-ease-tw);
}
.es-form .et_pb_contact_submit.et_pb_button:hover {
  background-color: var(--espero-ink) !important;
}
.es-form .et_pb_contact_submit.et_pb_button::after {
  content: '→' !important;
  position: static !important;
  display: inline !important;
  top: auto !important;
  margin-top: 0 !important;
  transform: none !important;
  vertical-align: baseline;
  margin-left: 0.5rem !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  opacity: 1 !important;
}
.es-form .et_pb_contact_submit.et_pb_button::before {
  display: none !important;
}

/* Hlášky Divi (chyby, poděkování): jako v2 12 px červeně / text stránky. */
.es-form .et-pb-contact-message:empty {
  display: none;
}
.es-form .et-pb-contact-message {
  margin-bottom: 1rem;
  font-size: 14px;
  color: var(--espero-ink);
}
.es-form .et-pb-contact-message ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: rgb(185 28 28);
}

/* ==========================================================================
   Zásady ochrany osobních údajů (v2 PrivacyPage.tsx)
   ========================================================================== */

.es-legal {
  padding: 2.5rem 0 6rem !important; /* pt-10 pb-24 */
}
@media (min-width: 768px) {
  .es-legal {
    padding: 3rem 0 7rem !important;
  }
}
.es-legal .et_pb_column {
  display: flex !important;
  flex-direction: column !important;
  gap: 2.5rem !important; /* gap-10 */
}
:where(.es-legal .et_pb_module) {
  margin: 0 !important;
}

.es-legal-lead p {
  font-size: 17px;
  line-height: 1.625;
  color: rgb(42 26 16 / 0.9);
}

.es-legal-section .et_pb_text_inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* gap-3 */
}
.es-legal-section h2 {
  margin: 0;
  padding: 0 !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--espero-ink);
}
.es-legal-section .es-num {
  color: var(--espero-orange);
}
.es-legal-section h3 {
  margin: 0.5rem 0 0;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--espero-inkmuted);
}
.es-legal-section :is(p, li),
.es-legal-lead p {
  margin: 0;
  padding: 0 !important;
}
.es-legal-section :is(p, li) {
  font-size: 16px;
  line-height: 1.625;
  color: rgb(42 26 16 / 0.8);
}
.es-legal-section ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0 !important;
  list-style: none !important;
}
/* Odrážka = oranžová pomlčka (v2 `before:content-['–']`). */
.es-legal-section li {
  position: relative;
  padding-left: 1.25rem !important;
  list-style: none !important;
}
.es-legal-section li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--espero-orange);
}
.es-legal-section strong {
  font-weight: 600;
  color: var(--espero-ink);
}
.es-legal :is(.es-legal-lead, .es-legal-section) a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(204 104 1 / 0.5);
  text-underline-offset: 4px;
  transition: color 200ms var(--espero-ease-tw);
}
.es-legal :is(.es-legal-lead, .es-legal-section) a:hover {
  color: var(--espero-orange);
}

/* ==========================================================================
   Stránka nenalezena (404): jako stavy „nenalezeno" z v2
   (`min-h-[70vh] flex-col items-center justify-center gap-6 pt-32`).
   ========================================================================== */
.es-notfound {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  min-height: 70vh;
  padding: 8rem 0 0 !important;
}
.es-notfound-title :is(h1, h2) {
  margin: 0;
  padding: 0 !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  color: var(--espero-ink) !important;
}
.es-notfound .et_pb_button_module_wrapper {
  margin-top: 0.5rem !important; /* mt-2 */
}