/* MoringaFarmJava — Premium Export Design System (WP port of src/styles.css) */

:root {
  --radius: 0.6rem;

  /* ==========================
     Premium Luxury Palette
  ========================== */

  --background: #F7F4EC;
  --cream: #FCF8F1;
  --foreground: #1F2D24;

  --card: #FFFFFF;
  --card-foreground: #1F2D24;

  --popover: #FFFFFF;
  --popover-foreground: #1F2D24;

  /* Forest Green */
  --primary: #28543B;
  --primary-foreground: #F8F4EC;
  --primary-dark: #17341A;

  /* Cream */
  --secondary: #EFE7D8;
  --secondary-foreground: #28543B;

  /* Neutral */
  --muted: #F3EFE7;
  --muted-foreground: #6E756F;

  /* Accent */
  --accent: #D9BC7A;
  --accent-foreground: #17341A;

  /* Luxury Gold */
  --gold: #C8A96A;
  --gold-foreground: #17341A;

  --destructive: #C64747;
  --destructive-foreground: #FFFFFF;

  --border: rgba(40,84,59,.12);
  --input: rgba(40,84,59,.12);
  --ring: #28543B;

  /* Shadows */
  --shadow-elegant:
      0 30px 70px rgba(23,52,26,.18);

  --shadow-soft:
      0 12px 35px rgba(23,52,26,.10);

  /* Gradients */
  --gradient-hero:
      linear-gradient(
      180deg,
      rgba(23,52,26,.58) 0%,
      rgba(23,52,26,.30) 45%,
      rgba(23,52,26,.75) 100%
      );

  --gradient-gold:
      linear-gradient(
      135deg,
      #C8A96A 0%,
      #E4C98A 100%
      );

  --gradient-leaf:
      linear-gradient(
      135deg,
      #28543B 0%,
      #17341A 100%
      );
}

* { border-color: var(--border); }
html { scroll-behavior: smooth; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
h1, h2, h3, h4, .font-display {
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  letter-spacing: -0.02em;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* === Utility classes referenced via className in original === */
.container-x { margin-left: auto; margin-right: auto; width: 100%; max-width: 80rem; padding-left: 1.5rem; padding-right: 1.5rem; }
@media (min-width: 768px) { .container-x { padding-left: 2.5rem; padding-right: 2.5rem; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.22em; color: var(--primary);
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: currentColor; display: inline-block;
}
.eyebrow.justify-center { justify-content: center; }

.gold-divider { height: 1px; background: var(--gradient-gold); }

.hover-lift { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-elegant); }

.link-underline { position: relative; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s ease;
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

.text-balance { text-wrap: balance; }

/* Force gold for inline overrides like `!text-gold` from Tailwind */
.\!text-gold { color: var(--gold) !important; }

/* Shadows */
.shadow-elegant { box-shadow: var(--shadow-elegant); }
.shadow-soft { box-shadow: var(--shadow-soft); }

/* Animations */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes kenburns {
  0%   { transform: scale(1.05); }
  100% { transform: scale(1.18); }
}
.animate-fade-up { animation: fade-up .9s cubic-bezier(.2,.7,.2,1) both; }
.animate-fade-in { animation: fade-in 1.2s ease-out both; }
.animate-kenburns { animation: kenburns 18s ease-out forwards; }

/* Reveal-on-scroll initial state */
.mfj-reveal { opacity: 0; }
.mfj-reveal.is-visible { animation: fade-up .9s cubic-bezier(.2,.7,.2,1) both; }

/* Mobile menu transition */
.mfj-mobile-menu { display: none; }
.mfj-mobile-menu.is-open { display: block; }

/* FAQ accordion */
.mfj-faq-item .mfj-faq-answer {
  display: grid; grid-template-rows: 0fr;
  opacity: 0; transition: grid-template-rows .5s ease, opacity .5s ease, margin .5s ease;
}
.mfj-faq-item.is-open .mfj-faq-answer {
  grid-template-rows: 1fr; opacity: 1; margin-top: 1rem;
}
.mfj-faq-item .mfj-faq-answer > div { overflow: hidden; color: var(--muted-foreground); line-height: 1.7; }

/* Group hover scale for image cards */
.group:hover .group-hover\:scale-110 { transform: scale(1.10); }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:rotate-45 { transform: rotate(45deg); }
.group:hover .group-hover\:text-primary { color: var(--primary); }

/* Long transition variant the original uses */
.duration-1200 { transition-duration: 1200ms; }

/* ======================================================
   PREMIUM HEADER
====================================================== */

/* Header saat di atas Hero */
.mfj-header:not(.is-solid){
    background:rgba(16,50,26,.18);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

/* Logo */
.mfj-header:not(.is-solid) .mfj-logo-text{
    color:#FFF8F0;
    font-weight:500;
    text-shadow:0 2px 10px rgba(0,0,0,.25);
}

/* Menu */
.mfj-header:not(.is-solid) .mfj-nav-link{
    color:#F7F3EB;
    font-weight:500;
    transition:all .3s ease;
}

.mfj-header:not(.is-solid) .mfj-nav-link:hover{
    color:#D8B46B;
}

/* Icon */
.mfj-header:not(.is-solid) .mfj-icon-btn{
    color:#F7F3EB;
    border:1px solid rgba(255,255,255,.20);
}

.mfj-header:not(.is-solid) .mfj-icon-btn:hover{
    background:rgba(255,255,255,.08);
}

/* Header setelah scroll */
.mfj-header.is-solid{
    background:rgba(252,249,243,.95);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(0,0,0,.06);
}

/* ===========================
   PREMIUM LOGO
=========================== */

/* Header transparan */
.mfj-header:not(.is-solid) .mfj-logo-text{
    color:#FFFDF8;
    font-weight:600;
    letter-spacing:-0.02em;
    text-shadow:0 2px 12px rgba(0,0,0,.35);
}

.mfj-header:not(.is-solid) .mfj-logo-text .text-gold{
    color:#D8B46B;
}

/* Header setelah scroll */
.mfj-header.is-solid .mfj-logo-text{
    color:#17341A;
    text-shadow:none;
}

.mfj-header.is-solid .mfj-logo-text .text-gold{
    color:#B68B3A;
}

/* Menu */
.mfj-header.is-solid .mfj-nav-link{
    color:#29402C;
    font-weight:500;
}

.mfj-header.is-solid .mfj-nav-link:hover{
    color:#B68B3A;
}

/* Icon */
.mfj-header.is-solid .mfj-icon-btn{
    color:#29402C;
    border-color:rgba(0,0,0,.08);
}

.mfj-header.is-solid .mfj-icon-btn:hover{
    background:#F3EEE3;
}

.mfj-header.is-solid .mfj-logo-text { color: var(--foreground); }
.mfj-header.is-solid .mfj-nav-link { color: color-mix(in oklab, var(--foreground) 85%, transparent); }
.mfj-header.is-solid .mfj-nav-link:hover { color: var(--primary); }
.mfj-header.is-solid .mfj-icon-btn { border-color: var(--border); color: var(--foreground); }
.mfj-header.is-solid .mfj-icon-btn:hover { background-color: var(--muted); }

/* When transparent (top of hero) */
.mfj-header:not(.is-solid) .mfj-logo-text { color: var(--primary-foreground); }
.mfj-header:not(.is-solid) .mfj-nav-link { color: color-mix(in oklab, var(--primary-foreground) 90%, transparent); }
.mfj-header:not(.is-solid) .mfj-nav-link:hover { color: var(--primary-foreground); }
.mfj-header:not(.is-solid) .mfj-icon-btn { border-color: rgb(255 255 255 / 25%); color: var(--primary-foreground); }
.mfj-header:not(.is-solid) .mfj-icon-btn:hover { background: rgb(255 255 255 / 10%); }

/* SVG icons */
.icon { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon-sm { width: 0.875rem; height: 0.875rem; }
.icon-lg { width: 1.25rem; height: 1.25rem; }

/* ===== PREMIUM HEADER ===== */

.mfj-header:not(.is-solid){
    background:transparent;
}

.mfj-header.is-solid{
    background:rgba(23,52,26,.95);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.mfj-logo-text{
    color:#F8F4EC !important;
}

.mfj-logo-text .text-primary{
    color:#C8A96A !important;
}

.mfj-nav-link{
    color:#F8F4EC !important;
}

.mfj-nav-link:hover{
    color:#C8A96A !important;
}

.mfj-icon-btn{
    color:#F8F4EC !important;
    border-color:rgba(255,255,255,.15);
}

.mfj-icon-btn:hover{
    color:#C8A96A !important;
    background:rgba(255,255,255,.08);
}

/* ===================================
   PREMIUM HERO
=================================== */

.hero,
.hero-section,
.mfj-hero{
    position:relative;
}

/* Overlay lebih elegan */
.hero::before,
.hero-section::before,
.mfj-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(20,40,24,.55) 0%,
        rgba(20,40,24,.25) 45%,
        rgba(20,40,24,.45) 100%
    );
    z-index:1;
}

/* Konten di atas overlay */
.hero > *,
.hero-section > *,
.mfj-hero > *{
    position:relative;
    z-index:2;
}

/* Judul */
.hero h1,
.hero-title,
.hero h2{
    color:#F8F5ED !important;
    text-shadow:0 8px 35px rgba(0,0,0,.45);
}

/* Kata miring */
.hero em,
.hero-title em{
    color:#D8B46B !important;
}

/* Deskripsi */
.hero p,
.hero-description{
    color:#E8E0CF !important;
}

/* Label atas */
.hero .eyebrow{
    color:#D8B46B !important;
}

/* Tombol */
.hero .button,
.hero a.button,
.hero .btn{
    border-radius:999px;
}

/* ===========================
   WhatsApp Header Button
=========================== */

.mfj-header a[href*="wa.me"]{
    background:transparent;
    border:1px solid rgba(255,255,255,.18);
    color:#F7F3EB;
    transition:.3s;
}

.mfj-header a[href*="wa.me"]:hover{
    background:rgba(255,255,255,.08);
    border-color:#D8B46B;
    color:#FFFFFF;
}

.mfj-whatsapp-btn{
    background:transparent;
    border:1px solid rgba(255,255,255,.18);
    color:#F7F3EB;
}

.mfj-whatsapp-btn:hover{
    background:rgba(255,255,255,.08);
    border-color:#D8B46B;
}