/* Tailwind doplňky */
h1, h2 {
  font-family: sans-serif;
  font-weight: 700;
}

/* Jemná fade-in + slide-up animace pro načítané prvky */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease-out, transform .5s ease-out;
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Stylování textového obsahu (odstavce, odkazy, zvýraznění) */
.prose p {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.75;
  color: #1f2937; /* text-gray-800 */
  text-align: justify;
}

.prose p:first-of-type {
  margin-top: 0;
}

/* Zvýrazněné texty */
.prose strong {
  color: #111827; /* text-gray-900 */
  font-weight: 600;
}

/* Odkazy */
.prose a {
  color: #2563eb; /* blue-600 */
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 99, 235, 0.3);
  transition: color 0.2s, border-color 0.2s;
}
.prose a:hover {
  color: #1d4ed8; /* blue-700 */
  border-color: rgba(29, 78, 216, 0.5);
}

/* Odstavce s citacemi nebo zvýrazněním */
.prose blockquote {
  border-left: 4px solid #3b82f6;
  padding-left: 1rem;
  color: #374151;
  font-style: italic;
  background: rgba(59, 130, 246, 0.05);
  border-radius: 0.25rem;
}

/* Nečíslované seznamy */
.prose ul {
  list-style: disc inside;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.prose li {
  margin-bottom: 0.25rem;
}

/* Zvýrazněné první písmeno (např. pro první odstavec článku) */
.prose p:first-of-type::first-letter {
  font-size: 1.5em;
  font-weight: 600;
  float: left;
  margin-right: 0.1em;
  line-height: 1;
  color: #2563eb;
}

#main-content {
  position: relative;
  background-image: url('/assets/img/deti-bg.png');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto; /* roztáhne obrázek přes šířku, výška se přizpůsobí */
  padding-bottom: 32rem; /* aby obsah nekončil přímo na obrázku */
  z-index: 1;
}

#main-content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
/*  background: linear-gradient(to top, rgba(249, 250, 251, 1) 0%, rgba(249, 250, 251, 0) 20em); /40%/ */
  pointer-events: none;
  z-index: -1;
}

#hero-bg {
  position: absolute;
  background-image: url('/assets/img/stromy-bg.jpg');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  height: 100%;
  z-index: -1;
}

#hero-bg::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
/*  background: linear-gradient(to bottom, rgba(249, 250, 251, 1) 0%, rgba(249, 250, 251, 0) 100%); */
  pointer-events: none;
  z-index: -1;
}

#cookie-banner {
  animation: fadeInUp 0.5s ease-out;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#mobile-menu > div:last-child {
  transform: translateY(-8px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
#mobile-menu:not(.hidden) > div:last-child {
  transform: translateY(0);
  opacity: 1;
}

/* Slideshow v hero backgroundu */
.hero-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;              /* top: 0; right: 0; bottom: 0; left: 0; */
  opacity: 0;
  transform: scale(1);
  transition:
    opacity 1.5s ease-in-out,
    transform 10s ease-out;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Aktivní slide:
   - fade-in (opacity 0 -> 1)
   - pomalý zoom-in (scale 1 -> 1.08) během 10 s */
.hero-slide--active {
  opacity: 1;
  transform: scale(1.08);
}