/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 6.0.0
*/

/* ==========================================================================
   VEDIC WISDOM DESIGN SYSTEM - v6.0 PRODUCTION READY
   ========================================================================== */

:root {
    /* --- 1. COLOR PALETTE --- */
    --color-bg-cream:    #FBF8F3;
    --color-surface:     #FFFFFF;
    --color-surface-alt: #F5F1E8;
    --color-surface-hover: #F9FAFB;
    --color-surface-active: #F3F4F6;
    
    --color-overlay:      rgba(0, 0, 0, 0.4);
    --color-primary:      #D97706;
    --color-primary-hover:#B45309;
    --color-secondary:    #1E40AF;
    --color-focus-ring:   rgba(217, 119, 6, 0.4);

    --color-text-body:    #1F2937;
    --color-text-secondary: #4B5563;
    --color-text-muted:   #6B7280;
    --color-text-on-dark: #FFFFFF;

    --color-border:        #E5E7EB;
    --color-border-medium: #D1D5DB;
    --color-border-dark:   #9CA3AF;

    /* Alerts */
    --color-info-light:    #DBEAFE; --color-info: #0369A1;
    --color-success-light: #D1FAE5; --color-success: #047857;
    --color-warning-light: #FED7AA; --color-warning: #C2410C;
    --color-error-light:   #FEE2E2; --color-error: #B91C1C;

    /* Departments */
    --color-education-dark:  #1D4ED8; --color-education-light: #DBEAFE;
    --color-leadership-dark: #6D28D9; --color-leadership-light: #EDE9FE;
    --color-worship-dark:    #CA8A04; --color-worship-light:   #FEF9C3;

    /* --- 2. TYPOGRAPHY --- */
    --font-head: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', sans-serif;
    --font-code: 'JetBrains Mono', monospace;

    --leading-tight: 1.1;
    --leading-snug: 1.375;
    --leading-normal: 1.5;

    --track-tighter: -0.02em;
    --track-tight: -0.01em;
    --track-wide: 0.025em;

    /* --- 3. SPACING & LAYOUT --- */
    --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;
    
    --radius-sm: 4px; --radius: 6px; --radius-md: 8px; 
    --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;

    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);

    /* --- 4. MOTION --- */
    --duration-normal: 150ms;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    
    /* ELEMENTOR BRIDGE (AUTO-CONFIG) */
    --e-global-color-primary:   var(--color-primary);
    --e-global-color-secondary: var(--color-secondary);
    --e-global-color-text:      var(--color-text-body);
    --e-global-color-accent:    var(--color-primary);
    --e-global-typography-primary-font-family: var(--font-head);
    --e-global-typography-secondary-font-family: var(--font-body);
}

/* GLOBAL RESET */
body {
    background-color: var(--color-bg-cream);
    color: var(--color-text-body);
    font-family: var(--font-body);
    line-height: var(--leading-normal);
}

/* TYPOGRAPHY */
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; color: var(--color-text-body); }
h1 { font-size: 2.25rem; line-height: var(--leading-tight); }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-family: var(--font-body); font-size: 1.25rem; font-weight: 600; }
h5 { font-family: var(--font-body); font-size: 1.25rem; font-weight: 600; }
h6 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; }

@media (min-width: 1024px) {
    h1 { font-size: 4.5rem; }
    h2 { font-size: 3.75rem; }
    h3 { font-size: 3rem; }
    h5 { font-size: 1.875rem; }
    h6 { font-size: 1.5rem; }
}

/* COMPONENTS */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 24px; border-radius: var(--radius-md);
    background: var(--color-primary); color: var(--color-text-on-dark);
    font-family: var(--font-body); font-weight: 500;
    transition: all var(--duration-normal) var(--ease-out);
    border: none; cursor: pointer; text-decoration: none;
}
.btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); }

.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 24px; border-radius: var(--radius-md);
    background: transparent; border: 1px solid var(--color-border-dark);
    color: var(--color-text-body); font-weight: 500;
    transition: all var(--duration-normal) var(--ease-out);
    cursor: pointer; text-decoration: none;
}
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }

.vedic-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.vedic-input {
    width: 100%; padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-medium);
    background: var(--color-surface);
}
.vedic-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }

/* Force Elementor Defaults */
.elementor-button {
    background-color: var(--color-primary) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
}
.elementor-heading-title { font-family: var(--font-head) !important; }

/* Ensure the main header doesn't cut off our mega menu */
.elementor-nav-menu--main {
    position: static !important;
}

.elementor-widget-nav-menu .elementor-widget-container {
    position: static !important;
}