/* Darom AI Blog - Modular CSS Architecture
 * Inspired by Reddit.com's modern, accessible design
 * Author: Darom Team
 * Last Updated: January 2025
 */

/* Import all modular CSS components */
/* @import url('./variables.css'); - Moved to base.html head */
@import url('./base.css');
@import url('./layout.css');
@import url('./header.css');
@import url('./sidebar.css');
@import url('./posts.css');
@import url('./footer.css');
@import url('./article-detail.css');
@import url('./forms.css');
@import url('./profile.css');

/* 
 * This file serves as the main entry point for all CSS components.
 * All styling is now organized into modular, maintainable files:
 * 
 * - variables.css: CSS custom properties for consistent design tokens
 * - base.css: Global styles, typography, and reset
 * - layout.css: Grid systems and page layout structure
 * - header.css: Navigation and header components
 * - sidebar.css: Sidebar widgets and layout
 * - posts.css: Styling for post listings
 * - article-detail.css: Styling for the article detail page
 * - footer.css: Footer layout and components
 * - profile.css: Profile page styling with Reddit.com inspiration
 * 
 * This modular approach improves:
 * - Maintainability: Each component is isolated
 * - Performance: Can selectively load components
 * - Collaboration: Multiple developers can work on different components
 * - Debugging: Easier to locate and fix issues
 */

/* Reddit.com Style Enhancements */
/* Variables moved to variables.css */

/* Global Reddit-style improvements */
.reddit-container {
    max-width: 2400px;
    margin: 0 auto;
    padding: 0 1rem;
}

.reddit-main {
    flex: 1;
    min-width: 0;
}

.reddit-sidebar {
    width: 312px;
    flex-shrink: 0;
}

/* Responsive improvements */
@media (max-width: 1024px) {
    .reddit-sidebar {
        width: 280px;
    }
}

@media (max-width: 767px) {
    .reddit-container {
        padding: 0 0.5rem;
    }

    .reddit-sidebar {
        display: none;
    }
}

/* Enhanced accessibility */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for better accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--reddit-orange);
    outline-offset: 2px;
}

/* Print styles */
@media print {

    .reddit-sidebar,
    .reddit-header,
    .footer {
        display: none !important;
    }

    .reddit-main {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}