/**
 * RevBridge Core - Modern CSS Architecture
 * Central import file for the new CSS system
 *
 * This file imports all CSS in the correct order following ITCSS methodology:
 * 1. Settings - Variables and design tokens
 * 2. Generic - Reset and normalize
 * 3. Elements - Base HTML elements
 * 4. Components - Reusable components
 * 5. Layouts - Page layout and structure
 * 6. Utilities - Helper classes
 *
 * @package RevBridge
 * @since 2.0.0
 * @version 2.0.1 - Fixed mobile menu toggle display (Nov 11, 2024)
 */

/* ===================================
   1. SETTINGS
   Design tokens and CSS variables
   =================================== */

@import url('1-settings/variables.css');

/* ===================================
   2. GENERIC
   Reset and normalize styles
   =================================== */

@import url('2-generic/reset.css');
@import url('2-generic/print.css');

/* ===================================
   3. ELEMENTS
   Base HTML element styles
   =================================== */

@import url('3-elements/typography.css');
@import url('3-elements/wordpress.css');

/* ===================================
   4. COMPONENTS
   Reusable UI components
   =================================== */

@import url('4-components/buttons.css');
@import url('4-components/forms.css');
@import url('4-components/cards.css');
@import url('4-components/alerts.css');
@import url('4-components/badges.css');
@import url('4-components/modals.css');
@import url('4-components/accordion.css');
@import url('4-components/header.css');
@import url('4-components/footer.css');
@import url('4-components/navigation.css');

/* ===================================
   5. LAYOUTS
   Page layout and structure
   =================================== */

@import url('5-layouts/container.css');
@import url('5-layouts/grid.css');

/* NOTE: Page-specific CSS (pages/*.css) is loaded automatically
   via enqueue.php based on current page context.
   DO NOT import page-specific CSS here! */

/* ===================================
   ADDITIONAL COMPONENTS
   Component-specific imports
   =================================== */

@import url('4-components/final-cta.css');

/* ===================================
   6. UTILITIES
   Helper and utility classes
   =================================== */

@import url('6-utilities/helpers.css');

/* ===================================
   NOTES FOR IMPLEMENTATION
   =================================== */

/**
 * HOW TO USE THIS FILE:
 *
 * 1. This file is ALREADY loaded:
 *    ✅ enqueue.php loads it via: wp_enqueue_style('revbridge-core', ...);
 *
 *    You don't need to import it again!
 *
 * 2. This gives you access to:
 *    - All 270+ CSS variables (var(--color-primary), var(--spacing-4), etc.)
 *      Variables are defined in: css/1-settings/variables.css
 *    - All component classes (.btn, .card, .alert, etc.)
 *    - All utility classes (.text-center, .mt-4, .flex, etc.)
 *
 * 3. All styles follow these principles:
 *    - NO declarations
 *    - Mobile-first responsive design
 *    - Consistent spacing using design tokens
 *    - Accessible and semantic HTML
 *
 * 4. Component Usage Examples:
 *
 *    Button:
 *    <button class="btn btn-primary">Click me</button>
 *    <button class="btn btn-outline-primary btn-lg">Large Outline</button>
 *
 *    Card:
 *    <div class="card card-elevated">
 *        <div class="card-header">
 *            <h3 class="card-header-title">Title</h3>
 *        </div>
 *        <div class="card-body">
 *            <p class="card-text">Content here</p>
 *        </div>
 *        <div class="card-footer">
 *            <button class="btn btn-primary">Action</button>
 *        </div>
 *    </div>
 *
 *    Grid Layout:
 *    <div class="container">
 *        <div class="grid grid-cols-3 grid-gap-6">
 *            <div>Column 1</div>
 *            <div>Column 2</div>
 *            <div>Column 3</div>
 *        </div>
 *    </div>
 *
 *    Form:
 *    <form class="form">
 *        <div class="form-group">
 *            <label class="form-label">Name</label>
 *            <input type="text" class="form-control" />
 *        </div>
 *        <button type="submit" class="btn btn-primary">Submit</button>
 *    </form>
 *
 *    Alert:
 *    <div class="alert alert-success">
 *        <div class="alert-icon">✓</div>
 *        <div class="alert-content">
 *            <strong class="alert-title">Success!</strong>
 *            <p class="alert-text">Your changes have been saved.</p>
 *        </div>
 *    </div>
 *
 * 5. Utility Classes:
 *    - Spacing: .mt-4, .mb-6, .p-8, etc.
 *    - Text: .text-center, .text-lg, .font-bold, etc.
 *    - Display: .flex, .grid, .d-none, etc.
 *    - Colors: .text-primary, .bg-light, etc.
 */