/* ignore : not 
/*
===============================================================================
🐦 ::: PhoenixFlix - Multi-Purpose Movies & Christian Streaming Platform :::
🔥 with dual database architecture, WebAuthn authentication, and family-friendly streaming experience.
===============================================================================
© 2025 ThePhoenixFlix - Ben Tran
(https://github.com/ThePhoenixFlix)
Email: ThePhoenixFlix@gmail.com
Website: https://bit.ly/ThePhoenixFlix
===============================================================================
*/

/* ===============================================================================
   🎨 PHOENIXFLIX MAIN STYLESHEET - MODULAR CSS ARCHITECTURE
   ================================================================================
   
   This is the main stylesheet that imports all modular CSS components.
   The actual styles are organized in separate files within the /styles folder
   for better maintainability, performance, and collaboration.
   
   MODULAR STRUCTURE:
   ├── variables.css    - CSS custom properties & theme variables
   ├── base.css         - CSS reset, typography, base styles
   ├── layout.css       - Header, footer, main content, grids
   ├── components.css   - Reusable UI components
   ├── pages-movies.css - Movie-related page styles
   ├── pages-lds.css    - LDS content page styles
   ├── pages-other.css  - Other pages (guestbook, account, etc.)
   └── language-features.css - Language-specific styling
   
   BENEFITS:
   ✅ Modular & Organized: Clear file structure by functionality
   ✅ Maintainable: Easy to find and edit specific styles
   ✅ Scalable: Structure supports future growth
   ✅ Collaborative: Multiple developers can work simultaneously
   ✅ Performance: Better caching and loading strategies
   
   =============================================================================== */

/* ========================================== */
/* 📦 MODULAR CSS IMPORTS */
/* ========================================== */

/* Import CSS Variables & Theme (now in base.css) */
/* @import url('./styles/variables.css'); */

/* Import Base Styles, Reset, and Variables */
@import url('./styles/base.css');

/* Import Layout Components */
@import url('./styles/layout.css');

/* Import Reusable Components */
@import url('./styles/components.css');

/* Import Page-Specific Styles */
@import url('./styles/pages-movies.css');
@import url('./styles/pages-lds.css');
@import url('./styles/pages-guestbook.css'); 
@import url('./styles/pages-other.css');
@import url('./styles/pages-home.css');
@import url('./styles/pages-movie-details.css');

/* Import Language Features */
@import url('./styles/language-features.css');

/* Import Poster Placeholder Styles */
@import url('./styles/poster-placeholder.css');

/* ========================================== */
/* 🎯 GLOBAL UTILITY CLASSES */
/* ========================================== */

/* Quick utility classes for common styling needs */
.hidden { display: none !important; }
.visible { display: block !important; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Responsive visibility utilities */
@media (max-width: 768px) {
    .mobile-hidden { display: none !important; }
    .mobile-visible { display: block !important; }
}

@media (min-width: 769px) {
    .desktop-hidden { display: none !important; }
    .desktop-visible { display: block !important; }
}

/* ========================================== */
/*  PWA & MOBILE OPTIMIZATIONS */
/* ========================================== */

/* Prevent zoom on form inputs in iOS */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Smooth scrolling for better UX */
html {
    scroll-behavior: smooth;
}

/* ========================================== */
/* 🎨 BRAND CONSISTENCY */
/* ========================================== */

/* Ensure consistent PhoenixFlix branding across all pages */
.phoenixflix-brand {
    font-family: 'Comic Neue', cursive;
    font-weight: 700;
    color: var(--secondaryColor, #ff6b35);
}

/* ========================================== */
/* 📊 DEBUGGING UTILITIES (Development Only) */
/* ========================================== */

/* Uncomment these for development debugging */
/*
.debug-border { border: 2px solid red !important; }
.debug-bg { background: rgba(255, 0, 0, 0.1) !important; }
.debug-grid { background-image: linear-gradient(rgba(255,0,0,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,0,0,0.1) 1px, transparent 1px); background-size: 20px 20px; }
*/

/* ===============================================================================
   🎯 END OF MAIN STYLESHEET
   
   All actual styling is now handled by the modular CSS files imported above.
   This approach provides:
   
   ✅ Better Organization: Styles grouped by functionality
   ✅ Easier Maintenance: Find and edit styles quickly
   ✅ Team Collaboration: Multiple developers can work on different files
   ✅ Performance: Better caching and loading strategies
   ✅ Scalability: Easy to add new components and pages
   
   To modify styles:
   1. Find the appropriate modular file (see comments above)
   2. Edit the specific component or page styles
   3. All changes will be reflected across the entire application
   
   =============================================================================== */