/* UX enhancements on top of the original theme CSS (loaded last, see app/layout.tsx).
   Nothing here changes the layout or the look at rest; it only improves interaction. */

/* ---------- Header / navigation ---------- */

/* Below 992px the slide-over drawer (components/MobileMenu.tsx) replaces the in-bar menu. */
@media (max-width: 991px) {
  .ll-desktop-nav { display: none !important; }
}

/* Buttons that replaced <a>/<span> toggles keep the theme's styling. */
:where(.ll-reset-button) {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
  text-align: inherit;
}

/* Desktop dropdown also opens from the keyboard (same fade-down effect as on hover). */
.wsmenu > .wsmenu-list > li:focus-within > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: rotateX(0deg);
}

/* ---------- Accessibility ---------- */

.ll-skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100000;
  padding: 10px 18px;
  background: #121212;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.85rem;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}
.ll-skip:focus { transform: translateY(0); }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid #121212;
  outline-offset: 3px;
}
.white--color :where(a, button):focus-visible,
.hero-section :where(a, button):focus-visible,
.page-hero-section :where(a, button):focus-visible,
.banner-section :where(a, button):focus-visible {
  outline-color: #fff;
}

/* ---------- Content ---------- */

/* YouTube embeds: responsive 16:9 instead of a fixed 900px width that overflowed phones. */
.single-post-txt .yt-lite { display: block; width: 100%; }

/* Pagination prev/next chevrons (the theme pointed at Font Awesome, which was never loaded). */
.page-pagination .ll-chevron { display: inline-block; vertical-align: middle; width: 0.6em; height: 0.6em; }

/* Testimonial carousel can be dragged. */
.reviews-wrapper .swiper { cursor: grab; }
.reviews-wrapper .swiper:active { cursor: grabbing; }

/* Contact form field errors */
.contact-form .ll-field-error {
  margin: -14px 0 18px;
  color: #e74c3c;
  font-size: 14.5px;
  font-weight: 400;
}
.contact-form .form-control[aria-invalid="true"] { border-color: #e74c3c; }
.contact-form .submit:disabled { opacity: 0.6; cursor: progress; }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Card and archive images link to their product/tip (same look; the theme only linked the titles). */
.ll-img-link { display: block; }

/* Homepage hero: the background photo settles from a slight zoom on load (1.6s). The image is painted
   on a layer that inherits the section's background, so the section itself is untouched. */
#hero-9.ll-hero-settle { position: relative; overflow: hidden; }
#hero-9.ll-hero-settle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transform-origin: 50% 40%;
  animation: ll-hero-settle 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ll-hero-settle {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}