/* ============================================================
   UrbanScape Furniture — global styles
   Brand tokens also live in the tailwind.config of each page.
   ============================================================ */

:root {
  --brand: #1B4332;
  --brand-600: #2D6A4F;
  --charcoal: #2B2D2F;
}

html { scroll-behavior: smooth; }

/* Subtle fade-up animation for product/case cards */
.card-enter {
  opacity: 0;
  transform: translateY(12px);
  animation: cardIn 0.45s ease forwards;
}
@keyframes cardIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Prose styling for CMS-written markdown (product/case/news detail) */
.prose-md h2 { font-size: 1.4rem; font-weight: 700; margin: 1.4em 0 0.6em; color: var(--charcoal); }
.prose-md h3 { font-size: 1.15rem; font-weight: 700; margin: 1.2em 0 0.5em; }
.prose-md p  { margin: 0.8em 0; line-height: 1.75; color: #4B5563; }
.prose-md ul { margin: 0.8em 0; padding-left: 1.4em; list-style: disc; color: #4B5563; }
.prose-md li { margin: 0.35em 0; line-height: 1.7; }
.prose-md strong { color: var(--charcoal); }

/* Category filter active state */
.tab-active {
  background-color: var(--brand);
  color: #fff !important;
}

/* ============================================================
   Hero slider — 3 slides, 3s auto-rotate, cross-fade
   ============================================================ */
.hero-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
.hero-slide.active {
  opacity: 1;
  visibility: visible;
}

/* Slide copy entrance animation */
.hero-slide .hero-copy > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.hero-slide.active .hero-copy > * {
  opacity: 1;
  transform: translateY(0);
}
.hero-slide.active .hero-copy > *:nth-child(1) { transition-delay: 0.10s; }
.hero-slide.active .hero-copy > *:nth-child(2) { transition-delay: 0.22s; }
.hero-slide.active .hero-copy > *:nth-child(3) { transition-delay: 0.34s; }
.hero-slide.active .hero-copy > *:nth-child(4) { transition-delay: 0.46s; }

/* Indicator dots — orange for the active slide */
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.hero-dot:hover { background: rgba(251, 146, 60, 0.7); }
.hero-dot.active {
  width: 28px;
  background: #FB923C;
}

/* ============================================================
   Honors marquee — certificate images scroll horizontally,
   seamless loop, pauses on hover
   ============================================================ */
.cert-track {
  display: flex;
  width: max-content;
  animation: certScroll 28s linear infinite;
}
.cert-track:hover { animation-play-state: paused; }
@keyframes certScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* track = 2 identical groups */
}
.cert-group {
  display: flex;
  gap: 1.5rem;
  padding-right: 1.5rem; /* same as gap, keeps the loop seamless */
}
.cert-item {
  width: 13rem;
  height: 17rem;
  flex-shrink: 0;
  border-radius: 0.9rem;
  border: 1px solid #E5E7EB;
  object-fit: contain; /* keep full certificate visible, never crop */
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.cert-item:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: #FB923C;
}
@media (min-width: 1024px) {
  .cert-item { width: 15rem; height: 20rem; }
}