/**
 * Bala Nutritions Homepage - Main Styles
 * 
 * This file serves as the main stylesheet that imports all section styles
 * and defines shared variables for consistent design across all sections.
 * 
 * Usage in WPBakery:
 * - Enqueue this file in your functions.php
 * - All sections will have access to shared variables
 * - Sections maintain their own unique prefixes for isolation
 */

/* ========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ======================================== */

:root {
  /* Container Widths */
  --bnh-max-width: 1500px;
  --bnh-container-padding: 20px;

  /* Spacing Scale */
  --bnh-spacing-xs: 8px;
  --bnh-spacing-sm: 16px;
  --bnh-spacing-md: 24px;
  --bnh-spacing-lg: 40px;
  --bnh-spacing-xl: 60px;
  --bnh-spacing-xxl: 80px;

  /* Typography */
  --bnh-font-size-xs: 0.85rem;
  --bnh-font-size-sm: 0.95rem;
  --bnh-font-size-base: 1rem;
  --bnh-font-size-lg: 1.1rem;
  --bnh-font-size-xl: 1.25rem;
  --bnh-font-size-2xl: 1.5rem;
  --bnh-font-size-3xl: 2rem;
  --bnh-font-size-4xl: 2.5rem;

  /* Colors - Base */
  --bnh-color-white: #ffffff;
  --bnh-color-black: #000000;
  --bnh-color-text-primary: #2c2c2c;
  --bnh-color-text-secondary: #666666;
  --bnh-color-text-muted: #9b9b9b;

  /* Colors - Brand */
  --bnh-color-primary: #7ba96f;
  --bnh-color-primary-hover: #6d9861;
  --bnh-color-secondary: #5fabd3;
  --bnh-color-accent: #ff6b35;

  /* Border Radius */
  --bnh-radius-sm: 8px;
  --bnh-radius-md: 16px;
  --bnh-radius-lg: 20px;
  --bnh-radius-xl: 24px;
  --bnh-radius-2xl: 30px;
  --bnh-radius-round: 50px;

  /* Shadows */
  --bnh-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --bnh-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
  --bnh-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.15);
  --bnh-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.2);

  /* Transitions */
  --bnh-transition-fast: 0.2s ease;
  --bnh-transition-base: 0.3s ease;
  --bnh-transition-slow: 0.4s ease;

  /* Z-Index Scale */
  --bnh-z-base: 1;
  --bnh-z-dropdown: 10;
  --bnh-z-sticky: 100;
  --bnh-z-fixed: 500;
  --bnh-z-modal-backdrop: 1000;
  --bnh-z-modal: 1001;
  --bnh-z-popover: 1100;
  --bnh-z-tooltip: 1200;
}

/* ========================================
   GLOBAL RESETS & BASE STYLES
   ======================================== */

/* Apply box-sizing globally for all homepage sections */
.bnh-section,
.bnh-section * {
  box-sizing: border-box;
}

/* Reset for homepage sections only */
.bnh-section {
  font-family: var(--bnh-font-family);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Container utility */
.bnh-container {
  max-width: var(--bnh-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bnh-container-padding);
  padding-right: var(--bnh-container-padding);
  width: 100%;
}

/* Screen reader only */
.bnh-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ========================================
   WPML LANGUAGE SUPPORT
   ======================================== */

/* Right-to-left language support */
.rtl .bnh-section {
  direction: rtl;
}

/* Text alignment for RTL languages */
.rtl .bnh-section [class*="text-left"] {
  text-align: right;
}

.rtl .bnh-section [class*="text-right"] {
  text-align: left;
}

/* ========================================
   WPBAKERY INTEGRATION
   ======================================== */

/* Ensure sections work well within WPBakery */
.vc_row .bnh-section {
  width: 100%;
}

.wpb_wrapper .bnh-section {
  margin-bottom: 0;
}

/* Full-width sections in WPBakery */
.vc_row[data-vc-full-width] .bnh-section {
  padding-left: var(--bnh-container-padding);
  padding-right: var(--bnh-container-padding);
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Tablets and below */
@media (max-width: 1024px) {
  :root {
    --bnh-container-padding: 16px;
    --bnh-spacing-lg: 32px;
    --bnh-spacing-xl: 50px;
    --bnh-spacing-xxl: 60px;
  }
}

/* Mobile devices */
@media (max-width: 768px) {
  :root {
    --bnh-container-padding: 15px;
    --bnh-spacing-lg: 24px;
    --bnh-spacing-xl: 40px;
    --bnh-spacing-xxl: 50px;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  :root {
    --bnh-container-padding: 12px;
    --bnh-spacing-lg: 20px;
    --bnh-spacing-xl: 30px;
    --bnh-spacing-xxl: 40px;
  }
}

/* ========================================
   SECTION STYLES
   ======================================== */

/* Section styles are now enqueued separately via functions.php */
/* This ensures proper loading in WordPress environment */
/* Each section CSS file is loaded with dependency on this main file */

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .bnh-section {
    background: white !important;
    color: black !important;
  }

  .bnh-section [class*="btn"],
  .bnh-section [class*="button"] {
    display: none;
  }
}