/*
Theme Name: ARUJ Khapli Wheat - Luxury Heritage Brand
Theme URI: https://arujfoods.com
Author: ARUJ Design Studio
Author URI: https://arujfoods.com
Description: Fully responsive luxury WordPress theme for ARUJ Traditional Khapli Whole Wheat Atta. Inspired by Nature, Rooted in Heritage. Features bespoke animated wheat botanicals, interactive ARUJ Math nutrition studio, cold stone chakki craftsmanship showcase, and full Elementor page builder compatibility.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aruj
Tags: custom-colors, custom-menu, custom-logo, featured-images, full-width-template, theme-options, translation-ready, e-commerce, food-and-drink

=========================================================
ARUJ Brand Color Palette:
- Forest Green: #1E4D2B
- Forest Dark:  #12331C
- Forest Deep:  #0D2414
- Wheat Gold:   #C8962A
- Sun Gold:     #D4A441
- Warm Ivory:   #FAF7ED
- Warm Cream:   #F5EFE0
- Warm Sand:    #EDE4D1
- Warm Border:  #E5DCC9
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Montserrat:wght@300;400;500;600;700;800&family=Caveat:wght@600;700&display=swap');

:root {
  --forest-green: #1E4D2B;
  --forest-dark: #12331C;
  --forest-deep: #0D2414;
  --forest-light: #286337;
  --forest-subtle: rgba(30, 77, 43, 0.06);

  --wheat-gold: #C8962A;
  --wheat-gold-dark: #A5791E;
  --wheat-gold-light: #E0AC3C;

  --sun-gold: #D4A441;
  --sun-gold-glow: rgba(212, 164, 65, 0.28);

  --warm-ivory: #FAF7ED;
  --warm-cream: #F5EFE0;
  --warm-sand: #EDE4D1;
  --warm-border: #E5DCC9;

  --text-main: #1A261C;
  --text-muted: #4A574C;
  --text-light: #7E8C80;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-hand: 'Caveat', cursive;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  --shadow-sm: 0 2px 10px rgba(30, 77, 43, 0.04);
  --shadow-md: 0 8px 25px rgba(30, 77, 43, 0.08);
  --shadow-lg: 0 16px 45px rgba(18, 51, 28, 0.12);
}

/* Base Reset & Setup */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  background-color: var(--warm-ivory);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--warm-ivory);
  color: var(--text-main);
  overflow-x: hidden;
  line-height: 1.6;
}

.font-serif { font-family: var(--font-serif); }
.font-sans  { font-family: var(--font-sans); }
.font-hand  { font-family: var(--font-hand); }

h1, h2, h3, h4, .heading-serif {
  font-family: var(--font-serif);
  color: var(--forest-green);
  font-weight: 600;
  line-height: 1.18;
}

/* Announcement Top Ticker */
.announcement-ticker {
  background-color: var(--forest-dark);
  color: var(--warm-ivory);
  border-bottom: 1px solid rgba(200, 150, 42, 0.25);
}

/* Sticky Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(250, 247, 237, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--warm-border);
  transition: all 0.3s ease;
}

.nav-link {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--forest-green);
  text-decoration: none;
  position: relative;
  transition: color 0.25s ease;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: var(--wheat-gold);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover {
  color: var(--wheat-gold-dark);
}

.nav-link:hover::after {
  width: 100%;
}

/* Buttons */
.btn-primary {
  background-color: var(--forest-green);
  color: var(--warm-ivory);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--forest-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.btn-primary:hover {
  background-color: var(--forest-dark);
  border-color: var(--forest-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: #FFFFFF;
}

.btn-gold {
  background: linear-gradient(135deg, #D4A441 0%, #C8962A 100%);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--wheat-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 24px rgba(200, 150, 42, 0.3);
  text-decoration: none;
}

.btn-gold:hover {
  background: linear-gradient(135deg, #E0AC3C 0%, #B8851B 100%);
  border-color: #E0AC3C;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(200, 150, 42, 0.45);
  color: #FFFFFF;
}

/* =========================================================
   HERO SECTION: LUXURY CLEAN CANVAS & BOTANICAL ANIMATIONS
   ========================================================= */

.hero-luxury-canvas {
  background: radial-gradient(circle at 68% 38%, #FFFFFF 0%, #FAF7ED 55%, #F4ECE0 100%);
  position: relative;
}

/* Swaying Wheat Botanicals */
.wheat-stalk-left {
  position: absolute;
  left: -24px;
  bottom: 20px;
  width: 130px;
  height: 380px;
  transform-origin: bottom center;
  animation: wheatSwayLeft 7s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 2;
  opacity: 0.85;
  filter: drop-shadow(0 6px 12px rgba(18, 51, 28, 0.08));
}

.wheat-stalk-right {
  position: absolute;
  right: -20px;
  bottom: 30px;
  width: 140px;
  height: 400px;
  transform-origin: bottom center;
  animation: wheatSwayRight 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 2;
  opacity: 0.85;
  filter: drop-shadow(0 6px 12px rgba(18, 51, 28, 0.08));
}

@keyframes wheatSwayLeft {
  0%   { transform: rotate(-5deg) translateY(0); }
  50%  { transform: rotate(1deg) translateY(-4px); }
  100% { transform: rotate(-7deg) translateY(2px); }
}

@keyframes wheatSwayRight {
  0%   { transform: rotate(4deg) translateY(0); }
  50%  { transform: rotate(-2deg) translateY(-6px); }
  100% { transform: rotate(6deg) translateY(1px); }
}

/* Ambient Glow Behind Pouch */
.hero-radiance-glow {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 164, 65, 0.35) 0%, rgba(200, 150, 42, 0.12) 45%, transparent 72%);
  filter: blur(28px);
  z-index: 1;
  animation: pulseGlow 6s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  0% { transform: scale(0.92); opacity: 0.6; }
  100% { transform: scale(1.1); opacity: 0.95; }
}

/* Floating Pouch */
.hero-pouch-container {
  position: relative;
  z-index: 5;
  animation: pouchFloat 6s ease-in-out infinite alternate;
  filter: drop-shadow(0 28px 45px rgba(18, 51, 28, 0.18));
  transition: transform 0.4s ease;
}

@keyframes pouchFloat {
  0%   { transform: translateY(0px) rotate(0.4deg); }
  100% { transform: translateY(-12px) rotate(-0.6deg); }
}

/* Floating Golden Grains */
.gold-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #D4A441;
  box-shadow: 0 0 10px rgba(212, 164, 65, 0.8);
  pointer-events: none;
  z-index: 6;
  animation: particleFloat 7s linear infinite;
  opacity: 0;
}

@keyframes particleFloat {
  0%   { transform: translateY(0) scale(0.5); opacity: 0; }
  20%  { opacity: 0.85; }
  80%  { opacity: 0.6; }
  100% { transform: translateY(-90px) scale(1.2); opacity: 0; }
}

/* Glass Benefit Pills */
.glass-benefit-pill {
  position: absolute;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(200, 150, 42, 0.35);
  border-radius: 9999px;
  padding: 8px 16px;
  box-shadow: 0 10px 25px rgba(18, 51, 28, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: pillFloat 5s ease-in-out infinite alternate;
}

@keyframes pillFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-7px); }
}

/* =========================================================
   CONTINUOUS GOLDEN TRUST MARQUEE RIBBON
   ========================================================= */

.golden-ribbon-ticker {
  background: linear-gradient(90deg, #D4A441 0%, #C8962A 50%, #D4A441 100%);
  color: #102B18;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 0;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(200, 150, 42, 0.25);
  position: relative;
  z-index: 25;
}

.golden-ribbon-track {
  display: inline-flex;
  align-items: center;
  animation: ribbonScroll 26s linear infinite;
}

.golden-ribbon-ticker:hover .golden-ribbon-track {
  animation-play-state: paused;
}

@keyframes ribbonScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =========================================================
   COMPACT & POWERFUL "THE ARUJ MATH"
   ========================================================= */

.math-dark-card {
  background: linear-gradient(160deg, #18201A 0%, #0F1410 100%);
  border: 1.5px solid rgba(200, 150, 42, 0.35);
  border-radius: 28px;
  padding: 36px 40px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  color: #FAF7ED;
  position: relative;
  overflow: hidden;
}

.math-slider-gold {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 9999px;
  background: #2E3830;
  outline: none;
  cursor: pointer;
}

.math-slider-gold::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFE9B3, #D4A441 60%, #996B15);
  box-shadow: 0 4px 14px rgba(212, 164, 65, 0.6);
  cursor: grab;
  transition: transform 0.15s ease;
}

.math-slider-gold::-webkit-slider-thumb:hover {
  transform: scale(1.18);
}

.math-pill {
  background: #242E26;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FAF7ED;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.math-pill:hover {
  background: #334035;
  border-color: #D4A441;
}

.math-pill.active {
  background: #D4A441;
  color: #0F1410;
  border-color: #D4A441;
  box-shadow: 0 3px 10px rgba(212, 164, 65, 0.4);
}

/* =========================================================
   ARTISANAL STONE CHAKKI CARD (NO WIREFRAME)
   ========================================================= */

.artisanal-chakki-card {
  background: linear-gradient(145deg, #FFFFFF 0%, #FBF8F0 100%);
  border: 1px solid #E5DCC9;
  border-radius: 28px;
  padding: 32px;
  box-shadow: 0 16px 40px rgba(18, 51, 28, 0.07);
  position: relative;
}

/* =========================================================
   MODAL WINDOWS & FAQ ACCORDIONS
   ========================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(11, 30, 17, 0.7);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background-color: #FFFFFF;
  border-radius: var(--radius-xl);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--warm-border);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.open .modal-content {
  transform: scale(1);
}

.faq-item {
  border: 1px solid var(--warm-border);
  transition: all 0.2s ease;
}

.faq-header {
  cursor: pointer;
}

.faq-content {
  display: none;
}

.faq-item.active .faq-content {
  display: block;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

/* WordPress Standard Support Classes */
.alignwide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}
.wp-caption {
  max-width: 100%;
  margin-bottom: 1.5em;
  text-align: center;
}
.wp-caption-text {
  font-size: 0.85em;
  color: var(--text-light);
  margin-top: 0.5em;
}