/* ==========================================================================
   Interactions & hover states
   Loaded after the compiled Tailwind bundle so these rules win.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header nav — text buttons get an animated underline + accent color
   -------------------------------------------------------------------------- */
header nav > button {
  position: relative;
  transition: color 0.2s ease !important;
}

header nav > button:not([style*="background-color:hsl(var(--garden-accent))"])::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -4px;
  height: 2px;
  background-color: hsl(var(--garden-accent));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

header nav > button:not([style*="background-color:hsl(var(--garden-accent))"]):hover {
  color: hsl(var(--garden-accent)) !important;
}
header nav > button:not([style*="background-color:hsl(var(--garden-accent))"]):hover::after {
  transform: scaleX(1);
}

/* CTA button "Napište nám" — filled, uses lift + subtle brighten */
header nav > button[style*="background-color:hsl(var(--garden-accent))"] {
  transition: filter 0.2s ease, transform 0.2s ease !important;
}
header nav > button[style*="background-color:hsl(var(--garden-accent))"]:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Hero CTAs
   -------------------------------------------------------------------------- */
#hero button {
  transition: transform 0.2s ease, background-color 0.2s ease,
    border-color 0.2s ease, filter 0.2s ease !important;
}
#hero button:hover {
  transform: translateY(-2px);
}
#hero button[style*="background-color:hsl(var(--garden-accent))"]:hover {
  filter: brightness(1.08);
}
#hero button[style*="background-color:transparent"]:hover {
  background-color: hsl(var(--garden-cream) / 0.08) !important;
  border-color: hsl(var(--garden-cream)) !important;
}

/* --------------------------------------------------------------------------
   Anchor links — turn green on hover
   -------------------------------------------------------------------------- */
a {
  transition: color 0.2s ease;
}
a:hover {
  color: hsl(var(--garden-green)) !important;
}

/* --------------------------------------------------------------------------
   Brand strip — logos gain color on hover
   -------------------------------------------------------------------------- */
#znacky .flex.flex-col.items-center > div:first-child {
  transition: filter 0.25s ease, transform 0.25s ease !important;
}
#znacky .flex.flex-col.items-center:hover > div:first-child {
  filter: grayscale(0%) brightness(1.2) !important;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Service cards ("Co děláme") — lift + accent highlight
   -------------------------------------------------------------------------- */
#sluzby .grid > div {
  cursor: default;
  transition: transform 0.35s ease, border-color 0.35s ease,
    box-shadow 0.35s ease, background-color 0.35s ease !important;
}
#sluzby .grid > div:hover {
  transform: translateY(-8px) !important;
  border-color: hsl(var(--garden-accent) / 0.5) !important;
  box-shadow: 0 18px 40px hsl(var(--garden-dark) / 0.18) !important;
  background-color: hsl(var(--garden-cream) / 0.6) !important;
}
#sluzby .grid > div:hover h3,
#sluzby .grid > div:hover > div:first-child {
  color: hsl(var(--garden-accent)) !important;
}

/* --------------------------------------------------------------------------
   Stat block (Opravy section) — subtle count-up bounce on hover
   -------------------------------------------------------------------------- */
#opravy .grid.grid-cols-2 > div > div:first-child {
  transition: transform 0.25s ease, color 0.25s ease;
}
#opravy .grid.grid-cols-2 > div:hover > div:first-child {
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   "Proč my" cards — lighter background on hover
   -------------------------------------------------------------------------- */
.group.p-8 {
  cursor: default;
  transition: background-color 0.25s ease !important;
}
.group.p-8:hover {
  background-color: hsl(var(--garden-mid)) !important;
}
.group.p-8 svg {
  transition: transform 0.3s ease;
}
.group.p-8:hover svg {
  transform: scale(1.1);
}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */
#kontakt input,
#kontakt textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
#kontakt input:focus,
#kontakt textarea:focus {
  border-color: hsl(var(--garden-accent)) !important;
  box-shadow: 0 0 0 3px hsl(var(--garden-accent) / 0.15);
}
#kontakt form button[type="submit"] {
  transition: filter 0.2s ease, transform 0.15s ease !important;
}
#kontakt form button[type="submit"]:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
#kontakt form button[type="submit"]:active:not(:disabled) {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Footer nav
   -------------------------------------------------------------------------- */
footer nav button {
  position: relative;
  transition: color 0.2s ease !important;
}
footer nav button:hover {
  color: hsl(var(--garden-accent)) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Mobile menu — slide + fade animation, driven by data-mobile-open attribute
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  header nav {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
    background: hsl(var(--garden-dark));
    border-top: 1px solid hsl(var(--garden-cream) / 0.08);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  header nav[data-mobile-open="true"] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  header nav > button {
    width: 100%;
    text-align: left;
  }
}

/* Hamburger → X animation */
button[aria-label='Otevřít menu'] span {
  transition: transform 0.25s ease, opacity 0.2s ease !important;
}
button[aria-label='Otevřít menu'][data-menu-open="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg) !important;
}
button[aria-label='Otevřít menu'][data-menu-open="true"] span:nth-child(2) {
  opacity: 0 !important;
}
button[aria-label='Otevřít menu'][data-menu-open="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg) !important;
}

/* --------------------------------------------------------------------------
   Section reveal on scroll (driven by IntersectionObserver in app.js)
   Hero is skipped — it should be visible immediately.
   -------------------------------------------------------------------------- */
main > section[data-in-view="false"]:not(#hero) {
  opacity: 0;
  transform: translateY(24px);
}
main > section:not(#hero) {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* --------------------------------------------------------------------------
   Reduced motion — respect the user's OS setting
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}