/* ==========================================================================
   THE WATER PROJECT DESIGN SYSTEM 2025 - MAIN SYSTEM FILE
   ========================================================================== */

/* @import statements MUST come first in CSS - no url() wrapper for better compatibility */

/* Core foundation */
@import './design-system-2025/core/tokens.css';
@import './design-system-2025/core/base.css';
@import './design-system-2025/core/fonts.css';
@import './design-system-2025/core/themes.css';

/* Layout patterns */
@import './design-system-2025/layouts/hero-sections.css';
@import './design-system-2025/layouts/cta-sections.css';
@import './design-system-2025/layouts/sections.css';

/* Components */
@import './design-system-2025/components/navigation.css';
@import './design-system-2025/components/buttons.css';
@import './design-system-2025/components/cards.css';
@import './design-system-2025/components/grids.css';
@import './design-system-2025/components/lists.css';
@import './design-system-2025/components/fundraising.css';

/* Utilities */
@import './design-system-2025/utilities/utilities.css';
@import './design-system-2025/utilities/typography-showcase.css';

/* Global overflow prevention */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.motif-2025 {
  overflow-x: hidden !important;
  max-width: 100% !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Standardize section spacing */
.motif-2025 > .section-standard,
.motif-2025 > .mission-bridge,
.motif-2025 > .cta-section,
.motif-2025 > .hero-card,
.motif-2025 > div[class*="section"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Additional overflow prevention and margin standardization for mobile */
@media (max-width: 767px) {
  /* Standardize margins between sections */
  .motif-2025 .section-standard + .section-standard {
    margin-top: 0; /* Consistent spacing between sections */
  }
  
  /* Reduce padding on common elements */
  .motif-2025 .card {
    margin-bottom: 16px !important; /* Override default card margins */
  }
  
  .motif-2025 * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure all direct children respect container boundaries */
  .motif-2025 > * {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  /* Specific overflow fixes for common problematic elements */
  .motif-2025 .wrap,
  .motif-2025 .container {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Section standard should not have its own padding - only wrap should */
  .motif-2025 .section-standard {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* 
 * Main design system entry point that loads all components
 * in the correct order for optimal performance and cascade.
 * 
 * IMPORTANT: DO NOT add component-specific styles to this file!
 * Edit the appropriate component file instead:
 * 
 * - Navigation: /components/navigation.css
 * - Cards: /components/cards.css  
 * - Buttons: /components/buttons.css
 * - Grids: /components/grids.css
 * - Hero sections: /layouts/hero-sections.css
 * - CTA sections: /layouts/cta-sections.css
 * - Standard sections: /layouts/sections.css
 * - Typography showcase: /utilities/typography-showcase.css
 * - Utility classes: /utilities/utilities.css
 * 
 * Usage in PHP pages:
 * 
 * <?php include('includes/design-system-2025-helpers.php'); ?>
 * 
 * <div class="<?php echo get_motif_wrapper_classes('page-name', 'warm-earth'); ?>">
 *   <!-- Page content using design system classes -->
 * </div>
 * 
 * <?php echo render_dev_theme_switcher(); ?>
 */

/* ========================================
   CORE FOUNDATION OVERRIDES
   ======================================== */

/* Essential tokens that may need to be available immediately */
:root,
.motif-2025 {
  /* Spacing system */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 96px;
  
  /* Typography scale */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  
  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line height */
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  
  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  
  /* Colors - Ocean Slate theme (default) */
  --surface: #ffffff;
  --surface-elevated: #f8fafc;
  --border: #e6ebf0;
  --border-light: #f1f5f9;
  --text-primary: #1e293b;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --heading-color: #1e293b;
  --primary: #2D6484;
  --primary-hover: #1e4a5f;
  --shadow-sm: 0 4px 12px rgba(45,100,132,0.15);
  --shadow-md: 0 8px 24px rgba(45,100,132,0.15);
  --shadow-lg: 0 12px 48px rgba(45,100,132,0.2);
  
  /* Donate Button Variables - Independent of theme colors */
  --donate-red: #DC2626;
  --donate-red-hover: #B91C1C;
  --donate-red-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
  
  /* Font families - critical for typography */
  --font-primary: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-secondary: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-cursive: "Covered By Your Grace", "Comic Sans MS", cursive;
  --font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;
}

/* ========================================
   IMPORT COMPONENT FILES (REMOVED DUPLICATE)
   ======================================== */

/* ========================================
   DESIGN SYSTEM ACTIVATION
   ======================================== */

/* 
 * The .motif-2025 class acts as the design system boundary
 * All design system styles are scoped within this class
 * to prevent conflicts with legacy CSS
 */

.motif-2025 {
  /* Activate the design system */
  contain: layout style;
  position: relative;
  z-index: 1;
  
  /* Default theme variables (can be overridden by data-theme) */
  color: var(--text-secondary);
  background: var(--background);
  font-family: var(--font-primary);
  line-height: var(--line-height-normal);
}

/* Ensure all sections inherit font and theme-aware styling */
.motif-2025 * {
  font-family: inherit;
}

/* Default font families (when no font stack is selected) */
.motif-2025:not([data-font-stack]) h1,
.motif-2025:not([data-font-stack]) h2, 
.motif-2025:not([data-font-stack]) h3,
.motif-2025:not([data-font-stack]) h4,
.motif-2025:not([data-font-stack]) h5,
.motif-2025:not([data-font-stack]) h6 {
  font-family: var(--font-primary);
  color: var(--heading-color);
  font-weight: var(--font-weight-semibold);
}

.motif-2025:not([data-font-stack]) p,
.motif-2025:not([data-font-stack]) li,
.motif-2025:not([data-font-stack]) span:not(.fa):not([class*="fa-"]),
.motif-2025:not([data-font-stack]) div {
  font-family: var(--font-primary);
}

/* Font stack switching - handled in fonts.css */

/* Preserve Font Awesome icons */
.motif-2025 .fa,
.motif-2025 .fas,
.motif-2025 .far,
.motif-2025 .fal,
.motif-2025 .fab,
.motif-2025 i[class*="fa-"] {
  font-family: FontAwesome !important;
}

/* Default button font */
.motif-2025:not([data-font-stack]) .btn {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-medium);
}

/* Button font handled in fonts.css */

.motif-2025 pre,
.motif-2025 code {
  font-family: var(--font-mono);
}

/* ========================================
   DESIGN SYSTEM META INFO
   ======================================== */

.motif-2025 {
  /* Design system version for debugging */
  --design-system-version: '1.0.0';
}

/* Log design system load in development */
@media (max-width: 0px) {
  /* This media query never matches, but ensures the log runs */
  .motif-2025::before {
    content: 'Design System 2025 v1.0.0 Loaded';
  }
}