/* Small additions on top of Tailwind utilities. */

html { scroll-behavior: smooth; }

/* Header: shrink logo once the page scrolls */
#site-header.is-scrolled { box-shadow: 0 2px 18px rgba(0, 0, 0, .06); }
#site-header.is-scrolled .site-logo { height: 52px; }

/* Desktop nav */
.nav-link {
  position: relative;
  display: block;
  padding: 30px 12px;
  color: #b3925a;
  transition: color .2s;
}
.nav-link:hover { color: #161616; }
.nav-link.is-active { color: #161616; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 18px;
  height: 2px;
  background: #161616;
  transform: scaleX(0);
  transition: transform .25s;
}
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }
#site-header.is-scrolled .nav-link { padding-top: 18px; padding-bottom: 18px; }
#site-header.is-scrolled .nav-link::after { bottom: 10px; }

/* Hero */
.hero-float { animation: hero-float 6s ease-in-out infinite; }
@keyframes hero-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-12px) rotate(-2deg); }
}

/* Thin divider with centre dot (Enfold style) */
.divider {
  position: relative;
  width: min(390px, 80%);
  height: 1px;
  background: #e1e1e1;
}
.divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 9px;
  height: 9px;
  margin-left: -4px;
  border: 1px solid #e1e1e1;
  border-radius: 50%;
  background: #fff;
}

/* Parallax backgrounds on devices that support it well */
@media (min-width: 1024px) and (hover: hover) {
  .parallax { background-attachment: fixed; }
}

/* History timeline: vertical dashed line behind the icons */
@media (min-width: 768px) {
  .timeline::before {
    content: "";
    position: absolute;
    top: 40px;
    bottom: 80px;
    left: 50%;
    border-left: 1px dashed #d5d0c9;
  }
}
@media (max-width: 767px) {
  .timeline-side { text-align: left; }
}

/* Product thumbnails */
.product-thumb.is-active { border-color: #b3925a; }

#to-top.is-visible { display: flex; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}