/*
Theme Name: Maharani Basmati Rice
Theme URI: https://example.com/
Author: Converted from React design
Description: Simple static WordPress theme that reproduces the Maharani Basmati Rice React design exactly. Uses Tailwind (Play CDN) and Lucide icons — no build step.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: maharani
*/

/* Design system — mirrors src/styles.css from the React project */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.24 0.015 40);
  --card: oklch(1 0 0);
  --primary: oklch(0.45 0.17 27);
  --primary-foreground: oklch(0.985 0.005 90);
  --secondary: oklch(0.965 0.012 80);
  --muted: oklch(0.965 0.008 80);
  --muted-foreground: oklch(0.53 0.02 50);
  --accent: oklch(0.955 0.02 80);
  --border: oklch(0.915 0.008 75);
  --input: oklch(0.915 0.008 75);
  --ring: oklch(0.45 0.17 27);
  --gold: oklch(0.72 0.11 78);
  --cream: oklch(0.975 0.014 84);
  --sand: oklch(0.91 0.045 82);
  --ink: oklch(0.19 0.008 60);
  --surface: oklch(0.985 0.006 80);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: 0.01em;
}

/* @utility section-title from the React project */
.section-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

img { max-width: 100%; height: auto; }

/* Accordion (Contact / product FAQ) */
.mh-acc-panel { display: none; padding: 0 0 1rem; }
.mh-acc-item.open .mh-acc-panel { display: block; }
.mh-acc-item.open .mh-acc-chevron { transform: rotate(180deg); }
.mh-acc-chevron { transition: transform .2s ease; }

/* Rice Range dropdown (hover on desktop) */
.mh-dropdown-menu {
  visibility: hidden;
  opacity: 0;
  transition: all .2s ease;
}
.mh-has-dropdown:hover .mh-dropdown-menu {
  visibility: visible;
  opacity: 1;
}
.mh-has-dropdown:hover .mh-caret { transform: rotate(180deg); }
.mh-caret { transition: transform .2s ease; }