/* ============================================================
   Webg - src/input.css
   Sumber Tailwind. Compile dengan ./build.sh ke
   public/assets/css/styles.css. JANGAN edit fail compiled terus.
   Rujuk DESIGN.md sebelum ubah token atau komponen.
   ============================================================ */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ---------- Font self-hosted (OFL, tiada CDN) ---------- */
@layer base {
  @font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/spacegrotesk-var.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
  }
  @font-face {
    font-family: "Inter";
    src: url("../fonts/inter-var.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
  }

  html {
    @apply scroll-smooth;
  }
  body {
    @apply font-sans text-slate-600 bg-surface antialiased;
  }
  h1, h2, h3, h4 {
    @apply font-heading text-ink;
  }
}

/* ---------- Komponen boleh guna semula ---------- */
@layer components {
  .container-site {
    @apply mx-auto max-w-content px-5 md:px-8;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-lg bg-accent px-6 py-3.5 font-semibold text-white shadow-sm shadow-teal-900/10 transition duration-200 hover:bg-accent-hover hover:-translate-y-0.5 hover:shadow-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-6 py-3.5 font-semibold text-ink transition duration-200 hover:border-accent hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent;
  }

  .card {
    @apply rounded-2xl border border-line bg-white p-6 md:p-8 transition duration-200 hover:border-accent/50;
  }

  .eyebrow {
    @apply text-sm font-semibold uppercase tracking-wide text-accent;
  }

  .section-title {
    @apply text-3xl md:text-4xl font-bold leading-tight;
  }

  .nav-link {
    @apply text-sm font-medium text-slate-600 transition hover:text-accent;
  }
  .nav-link-active {
    @apply text-accent;
  }

  .badge-popular {
    @apply inline-block rounded-full bg-accent px-3 py-1 text-xs font-semibold uppercase tracking-wide text-white;
  }

  .check-icon {
    @apply mt-1 h-4 w-4 flex-none text-accent;
  }

  .step-circle {
    @apply flex h-12 w-12 flex-none items-center justify-center rounded-full bg-accent font-heading text-lg font-bold text-white;
  }

  .footer-heading {
    @apply mb-4 font-heading text-sm font-semibold uppercase tracking-wide text-white;
  }
  .footer-link {
    @apply text-sm text-slate-400 transition hover:text-teal-300;
  }

  .prose-page h2 {
    @apply mt-10 mb-3 text-2xl font-bold;
  }
  .prose-page p,
  .prose-page li {
    @apply mb-3 leading-relaxed;
  }
  .prose-page ul {
    @apply mb-4 list-disc pl-6;
  }

  /* Slider testimoni: CSS scroll-snap, tiada library */
  .slider {
    @apply flex snap-x snap-mandatory gap-5 overflow-x-auto pb-4;
    scrollbar-width: thin;
    scrollbar-color: #E2E8F0 transparent;
  }
  .slider > * {
    @apply w-[85%] flex-none snap-start sm:w-[45%] lg:w-[31%];
  }

  /* Butang WhatsApp terapung */
  .wa-float {
    @apply fixed bottom-5 right-5 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-[#25D366] text-white shadow-lg transition hover:scale-110 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink;
  }
}

/* ---------- Interaksi JS (kelas keadaan) ---------- */
@layer utilities {
  .faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
  }
  .faq-item.open .faq-answer {
    grid-template-rows: 1fr;
  }
  .faq-item.open .faq-chevron {
    transform: rotate(180deg);
  }
  .faq-chevron {
    transition: transform 0.25s ease;
  }
}