/*
Theme Name: Shantanu Agroveda (Mangalam) Child
Description: Child theme for Hello Elementor. Global/parent styling only.
Author: Shantanu Agroveda
Template: hello-elementor
Version: 2.0.1
Text Domain: shantanu-agroveda-child
*/

/* ==========================================================================
   ARCHITECTURE NOTE (v2.0.0): This file now holds ONLY sitewide global
   styling — brand tokens, typography defaults, resets. It no longer holds
   any page/section layout classes (no .sa-section, .card-product,
   .btn-gradient-cta, etc.) — those broke the one-file-per-section workflow.
   Every landing page section is now self-contained: its own <div> + its own
   scoped <style> block, living in /02-landing-pages/<page>/. See
   /02-landing-pages/LANDING-PAGES-CONTEXT.md for the full rationale.
   ========================================================================== */

/* ==========================================================================
   1. BRAND TOKENS — single source of truth for color & type.
   Every section file across every future page reads these variables.
   Change a brand color/font here once; it propagates everywhere.
   ========================================================================== */
:root {
  --color-brown-bg: #320707;      /* master background */
  --color-green-deep: #1F4B3A;    /* natural / trust accent */
  --color-green-darker: #123024;  /* gradient end for green sections */
  --color-yellow: #FFBF00;        /* header / highlight */
  --color-amber: #ED752C;         /* header / CTA */
  --color-cream: #F5EDE1;         /* text on dark bg, light section bg */
  --color-near-black: #160303;    /* footer / overlay */

  --gradient-cta: linear-gradient(135deg, var(--color-yellow) 0%, var(--color-amber) 100%);
  --gradient-hero: linear-gradient(180deg, var(--color-brown-bg) 0%, #1a0303 100%);
  --gradient-trust: linear-gradient(135deg, var(--color-green-deep) 0%, var(--color-green-darker) 100%);

  --font-heading: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-accent: 'Cormorant Garamond', Georgia, serif; /* tagline / pull-quotes ONLY */

  --fs-h1: clamp(2.25rem, 4vw + 1rem, 4rem);
  --fs-h2: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.5vw + 1rem, 1.75rem);
  --fs-body: 1.05rem;
  --fs-small: 0.9rem;

  --radius-md: 12px;
  --radius-lg: 24px;
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.25);

  /* Shared container width — every section's outer wrapper should reference
     this instead of hardcoding its own px value, so section edges align
     consistently down the page. Narrower text blocks (hero copy, FAQ list)
     intentionally nest a tighter max-width INSIDE this for readability —
     that's a deliberate exception, not an inconsistency. */
  --container-max: 1400px;
}

/* ==========================================================================
   2. GLOBAL BASE (applies everywhere, every page/section inherits this)
   ========================================================================== */
body {
  background-color: var(--color-brown-bg);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
}

h1, h2, h3, h4, .elementor-heading-title {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-cream);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

a { color: var(--color-yellow); transition: color 0.2s ease; }
a:hover { color: var(--color-amber); }

/* Fancy accent — tagline, pull-quotes, section eyebrows ONLY. Global brand
   element, reusable on any future page — not a page-layout class. */
.brand-tagline, .accent-quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.3rem, 2vw + 0.5rem, 2rem);
  color: var(--color-yellow);
}

/* ==========================================================================
   3. FULL-BLEED BREAKOUT — global structural utility.
   Elementor boxes sections inside its Content Width setting by default,
   which was clipping sections meant to run edge-to-edge (hero backgrounds,
   split panels) regardless of that per-section Elementor setting. This
   forces true 100vw width via the standard breakout technique, hardcoded
   here so it no longer depends on remembering to toggle "Full Width" /
   "Stretch Section" per Elementor section. Add class="full-bleed" to any
   section's outer element that should ignore Elementor's boxed width.
   ========================================================================== */
html, body { overflow-x: hidden; } /* safety net: prevents the breakout's negative margins from ever causing a horizontal scrollbar sliver */

.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ==========================================================================
   4. ACCESSIBILITY & PERFORMANCE (global, sitewide)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
img, video { max-width: 100%; height: auto; }