/*
Theme Name: Shri JRG Foods
Theme URI: https://www.jrgfoods.com
Author: Shri JRG Foods Private Limited
Author URI: https://www.jrgfoods.com
Description: Premium corporate website theme for Shri JRG Foods — a 450 TPD roller flour mill. Includes hero with parallax silo banner, six-product portfolio, drag-scroll facility gallery with lightbox, manufacturing journey, industries served, quality assurance, timeline of milestones, sustainability dashboard, enquiry portal (AJAX to admin-ajax + wp_mail) and floating WhatsApp CTA. Palette: warm cream + saffron yellow + maroon + forest green. Fonts: Fraunces (display) + Inter (body). Tailwind Play CDN loaded via header.php.
Version: 1.0.0
Requires at least: 6.0
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: shri-jrg-foods
Tags: business, one-column, responsive-layout, custom-colors, custom-logo, custom-menu, footer-widgets, translation-ready
*/

/* Base overrides that shouldn't rely on Tailwind CDN JIT timing. Everything else is Tailwind utilities in the templates or the inline tailwind.config in header.php. */

:root {
  --bg: #FEFCF6;
  --ink: #0B0B0A;
  --saffron: #F5C518;
  --saffron-light: #FCD34D;
  --maroon: #8B1E2B;
  --forest: #2D5A3D;
  --cream: #FAF6EC;
}

html { scroll-behavior: smooth; background: var(--bg); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01", "cv11", "cv02";
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

::selection { background: var(--saffron); color: var(--ink); }

.text-display {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 30, "WONK" 0;
  letter-spacing: -0.03em;
  line-height: 0.95;
}

.glass {
  background: rgba(254, 252, 246, 0.75);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(11, 11, 10, 0.06);
}

.glass-dark {
  background: rgba(11, 11, 10, 0.55);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid rgba(245, 197, 24, 0.18);
}

.kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--maroon);
  font-weight: 600;
}

.hairline {
  background: linear-gradient(90deg, transparent, rgba(139, 30, 43, 0.35), transparent);
  height: 1px;
}

.paper {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(245,197,24,0.05), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(139,30,43,0.04), transparent 45%);
}

.grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.15  0 0 0 0 0.15  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply; opacity: 0.28;
}

.num-tabular { font-variant-numeric: tabular-nums; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Marquee */
@keyframes marquee-x {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee { animation: marquee-x 45s linear infinite; }

/* Ping (WhatsApp pulse) */
@keyframes ping {
  75%, 100% { transform: scale(1.6); opacity: 0; }
}
.animate-ping { animation: ping 1.5s cubic-bezier(0,0,0.2,1) infinite; }

/* Pulse (small dots) */
@keyframes pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.animate-pulse { animation: pulse 2s ease-in-out infinite; }

/* Underline on nav hover */
.gold-underline {
  background-image: linear-gradient(90deg, var(--saffron) 0%, var(--saffron) 100%);
  background-size: 0% 3px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.4s cubic-bezier(0.4,0,0.2,1);
  padding-bottom: 2px;
}
.gold-underline:hover { background-size: 100% 3px; }

/* Silo parallax (CSS only fallback) */
.parallax-bg { will-change: transform; }

/* Lightbox */
.lb-open { overflow: hidden; }