/*
Theme Name:  Masala Raaj
Description: Child theme for Masala Raaj Export Website
Template:    hello-elementor
Version:     1.2.0
Author:      Masala Raaj
Text Domain: masala-raaj
*/

/* =============================================
   BRAND CSS VARIABLES — Premium Spice Heritage Palette
   Phase 4: Warmer, richer, more premium
   ============================================= */
:root {
    /* Primary — Rich Burgundy/Wine (warmer, more premium than harsh red) */
    --mr-green:        #7B2D3B;   /* Primary: rich burgundy/wine */
    --mr-gold:         #D4A017;   /* Accent: warm saffron gold */
    --mr-burgundy:     #5C1F2B;   /* Dark burgundy variant */
    --mr-cream:        #FDF8F0;   /* Warm cream background */
    --mr-charcoal:     #2A1810;   /* Warm dark brown text */
    --mr-terracotta:   #1B6B25;   /* Logo green — CTAs & interactive */

    /* Extended palette */
    --mr-maroon-light: #9B3D4B;
    --mr-gold-light:   #E8B730;
    --mr-gold-dark:    #B8890F;
    --mr-warm-gray:    #F5EDE0;
    --mr-text-body:    #4A3828;
    --mr-text-light:   #7A6858;
    --mr-text-muted:   #A89888;
    --mr-border:       #E8DDD4;
    --mr-bg-section:   #FDF8F0;
    --mr-bg-warm:      #FAF3E8;
    --mr-bg-dark:      #1A0F0A;
    --mr-hero-bg:      #1A0A05;

    /* Spice accent colors — interactive elements */
    --mr-turmeric:     #E8A820;
    --mr-chilli:       #C4392A;
    --mr-coriander:    #5A7A2E;
    --mr-saffron:      #D4762A;
    --mr-cardamom:     #8B7355;

    /* Typography */
    --mr-font-heading: 'Playfair Display', Georgia, serif;
    --mr-font-body:    'DM Sans', system-ui, sans-serif;
    --mr-font-accent:  'Montserrat', sans-serif;
}

/* =============================================
   GLOBAL BASE STYLES
   ============================================= */
body {
    font-family: var(--mr-font-body);
    color: var(--mr-charcoal);
    background-color: var(--mr-cream);
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mr-font-heading);
    color: var(--mr-green);
    line-height: 1.25;
}

p { color: var(--mr-text-body); }

a {
    color: var(--mr-green);
    transition: color 0.2s ease;
}
a:hover { color: var(--mr-gold); }

/* =============================================
   SECTION BACKGROUNDS
   ============================================= */
.bg-green    { background-color: var(--mr-green) !important; }
.bg-cream    { background-color: var(--mr-cream) !important; }
.bg-gold     { background-color: var(--mr-gold)  !important; }
.bg-charcoal { background-color: var(--mr-charcoal) !important; }
.bg-warm     { background-color: var(--mr-bg-warm) !important; }
.bg-dark     { background-color: var(--mr-bg-dark) !important; }

/* =============================================
   BUTTONS
   ============================================= */
.btn-primary {
    background-color: var(--mr-gold);
    color: var(--mr-charcoal);
    border: 2px solid var(--mr-gold);
    padding: 14px 32px;
    font-family: var(--mr-font-accent);
    font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    border-radius: 4px; transition: all 0.25s ease;
}
.btn-primary:hover {
    background-color: transparent;
    color: var(--mr-gold);
}

/* =============================================
   PRODUCT CARDS
   ============================================= */
.mr-product-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(123,45,59,0.07);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    transform-style: preserve-3d;
}
.mr-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(123,45,59,0.15);
}
.mr-product-card__image img {
    width: 100%; height: 240px; object-fit: cover;
}
.mr-product-card__body { padding: 20px; }
.mr-product-card__title {
    font-family: var(--mr-font-heading);
    font-size: 1.125rem; font-style: italic;
    color: var(--mr-green); margin-bottom: 8px;
}
.mr-product-card__category {
    font-family: var(--mr-font-accent);
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--mr-gold); margin-bottom: 10px;
}

/* =============================================
   SECTION HEADINGS
   ============================================= */
.section-label {
    font-family: var(--mr-font-accent);
    font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--mr-gold); display: block; margin-bottom: 8px;
}
.section-title {
    font-family: var(--mr-font-heading);
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    color: var(--mr-green); margin-bottom: 16px;
}
.section-title--light { color: #fff; }

/* =============================================
   STAT COUNTERS
   ============================================= */
.mr-stat-number {
    font-family: var(--mr-font-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700; color: var(--mr-gold); line-height: 1;
}
/* Fix "s" suffix sizing — smaller, lighter, inline */
.mr-stat-suffix {
    font-size: 0.45em;
    font-weight: 400;
    vertical-align: baseline;
    letter-spacing: 0.05em;
    opacity: 0.7;
    margin-left: 2px;
    font-family: var(--mr-font-body);
}
.mr-stat-label {
    font-family: var(--mr-font-accent);
    font-size: 0.875rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255,248,240,0.75); margin-top: 6px; display: block;
}
.mr-stat-desc {
    font-family: var(--mr-font-body);
    font-size: 0.8rem; color: rgba(255,248,240,0.45);
    display: block; margin-top: 4px;
}

/* =============================================
   SCROLL REVEAL — Enhanced
   ============================================= */
.mr-reveal,
.mr-reveal-left,
.mr-reveal-right {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.mr-reveal        { transform: translateY(36px); }
.mr-reveal-left   { transform: translateX(-40px); }
.mr-reveal-right  { transform: translateX(40px); }
.mr-reveal-scale  { opacity: 0; transform: scale(0.92);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }

.mr-reveal.revealed,
.mr-reveal-left.revealed,
.mr-reveal-right.revealed,
.mr-reveal-scale.revealed {
    opacity: 1; transform: none;
}

.mr-reveal-delay-1 { transition-delay: 0.08s; }
.mr-reveal-delay-2 { transition-delay: 0.16s; }
.mr-reveal-delay-3 { transition-delay: 0.24s; }
.mr-reveal-delay-4 { transition-delay: 0.32s; }

/* =============================================
   FOOTER
   ============================================= */
.site-footer { background-color: var(--mr-green); color: var(--mr-cream); }
.site-footer a { color: rgba(253,248,240,0.72); }
.site-footer a:hover { color: var(--mr-gold); }
.footer-heading {
    font-family: var(--mr-font-accent); font-size: 0.75rem;
    font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--mr-gold); margin-bottom: 16px;
}

/* =============================================
   PREMIUM SVG ICON STYLE
   ============================================= */
.icon-premium {
    width: 44px; height: 44px;
    stroke: var(--mr-gold);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icon-sm { width: 28px; height: 28px; }
.icon-lg { width: 56px; height: 56px; }

/* =============================================
   PARALLAX BACKGROUNDS
   ============================================= */
.parallax-bg {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
@media (max-width: 768px) {
    /* Disable parallax on mobile (performance) */
    .parallax-bg { background-attachment: scroll; }
}

/* =============================================
   UTILITY
   ============================================= */
.text-gold        { color: var(--mr-gold) !important; }
.text-green       { color: var(--mr-green) !important; }
.text-cream       { color: var(--mr-cream) !important; }
.text-white       { color: #fff !important; }
.text-muted       { color: var(--mr-text-muted) !important; }
.text-terracotta  { color: var(--mr-terracotta) !important; }