/* =========================================================
   Madu Mulyo — Custom Styles
   (Tailwind handles the utility classes; only things that
   cannot be expressed cleanly with Tailwind live here.)
   ========================================================= */

/* Smooth anchor scrolling */
html { scroll-behavior: smooth; }

/* Offset fixed header when jumping to sections */
section { scroll-margin-top: 84px; }

/* ── Honeycomb background pattern (Hero) ──────────────── */
.honeycomb-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23D98E2B' stroke-width='1.2' opacity='0.35'%3E%3Cpolygon points='28,0 56,16 56,50 28,66 0,50 0,16'/%3E%3Cpolygon points='28,66 56,82 56,116 28,132 0,116 0,82'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 100px;
}

/* ── Header scroll shadow ─────────────────────────────── */
header { transition: box-shadow .3s ease; }
header.scrolled { box-shadow: 0 4px 20px -8px rgba(43,27,14,0.18); }

/* ── Mobile nav slide transition ─────────────────────── */
#mobileNav {
  transition: max-height .35s ease, opacity .3s ease;
  overflow: hidden;
}

/* ── Floating animation (hero hexagon) ───────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
.animate-float { animation: float 5s ease-in-out infinite; }

/* ── Card / row hover lift ────────────────────────────── */
.hover-lift { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -14px rgba(43,27,14,0.2);
}

/* ── WhatsApp CTA pulse ring ──────────────────────────── */
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0   rgba(217,142,43,.5); }
  70%  { box-shadow: 0 0 0 14px rgba(217,142,43,0);  }
  100% { box-shadow: 0 0 0 0   rgba(217,142,43,0);   }
}
.animate-pulse-ring { animation: pulseRing 2.5s ease-out infinite; }

/* ── Reduced-motion safety net ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .animate-float,
  .animate-pulse-ring,
  .hover-lift {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}