/*
 * Zelená jedáleň — Recepty
 * Ohraničený reset. Témy WordPressu často štýlujú tlačidlá, polia a nadpisy
 * globálne; tieto pravidlá tomu bránia zasahovať do appky. Všetko je viazané
 * na .zj-root, takže mimo appky sa nič nemení.
 */

.zj-root {
  box-sizing: border-box;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}

.zj-root *,
.zj-root *::before,
.zj-root *::after {
  box-sizing: border-box;
}

/* Tlačidlá — appka si farby a rámiky nastavuje inline, tu vypíname len to,
   čo témy pridávajú navyše (verzálky, tiene, prechody, min-výšky). */
.zj-root button {
  font: inherit;
  /* !important je tu zámerne — mnohé témy si vynucujú verzálky a tiene
     na všetkých tlačidlách a bez toho by prebili vzhľad appky. */
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none;
  box-shadow: none !important;
  min-height: 0;
  min-width: 0;
  width: auto;
  margin: 0;
  line-height: normal;
  -webkit-appearance: none;
  appearance: none;
}

.zj-root button:hover,
.zj-root button:focus,
.zj-root button:active {
  box-shadow: none;
  text-decoration: none;
}

/* Formulárové polia */
.zj-root input,
.zj-root select {
  font: inherit;
  margin: 0;
  max-width: 100%;
  box-shadow: none;
  line-height: normal;
}

.zj-root input:focus,
.zj-root select:focus {
  box-shadow: none;
}

/* Nadpisy — veľkosti aj rozostupy riadi appka inline */
.zj-root h1,
.zj-root h2,
.zj-root h3,
.zj-root h4 {
  font-weight: inherit;
  letter-spacing: normal !important;
  text-transform: none !important;
  clear: none;
}

.zj-root h1::before, .zj-root h2::before,
.zj-root h3::before, .zj-root h4::before,
.zj-root h1::after,  .zj-root h2::after,
.zj-root h3::after,  .zj-root h4::after {
  content: none !important;
}

.zj-root p {
  max-width: none;
}

.zj-root a {
  box-shadow: none !important;
  border-bottom: 0 !important;
  text-decoration: none;
}

/* Fotky receptov. Témy im často pridávajú rámiky, tiene a zaoblenia —
   rozmery si riadi appka sama, preto ich tu vynulujeme. */
.zj-root img {
  max-width: 100%;
  vertical-align: middle;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  background: none;
}

/* Ikony majú rozmery v atribútoch width/height. Témy často nastavujú
   svg { width: 1em !important }, čo by ich zdeformovalo — preto auto. */
.zj-root svg {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  vertical-align: middle;
}

/* Klikateľné karty — jemné zdvihnutie pri prejdení myšou */
.zj-root .zj-card {
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.zj-root .zj-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(35, 31, 32, .09);
}

/* Viditeľné ohraničenie pri ovládaní klávesnicou */
.zj-root button:focus-visible,
.zj-root a:focus-visible,
.zj-root input:focus-visible,
.zj-root select:focus-visible {
  outline: 2.5px solid #8AA02E;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .zj-root .zj-card { transition: none; }
  .zj-root .zj-card:hover { transform: none; }
}