/*
==========================================
🎨 Main CSS File - โรงเรียนเพี้ยนพินอนุสรณ์
Import ไฟล์ CSS ทั้งหมดตามลำดับที่ถูกต้อง
==========================================

📁 โครงสร้างไฟล์:
├── 1-variables.css      # สี, ขนาด, transition
├── 2-reset.css          # CSS reset และ base styles
├── 3-layout.css         # Container และ layout หลัก
├── 4-header.css         # Header และรูปภาพ
├── 5-navigation.css     # Navigation bar
├── 6-submenu.css        # Dropdown submenu
├── 7-components.css     # ปุ่ม, form, badge ต่างๆ
├── 8-responsive.css     # Media queries ทั้งหมด
├── 9-homepage.css       # สไตล์สำหรับหน้าแรกโดยเฉพาะ
└── main.css            # ไฟล์นี้ - Import ทั้งหมด

==========================================
*/

/* ==========================================
   1. CSS Variables - โหลดก่อนสุด
========================================== */
@import url('variables.css');

/* ==========================================
   2. Reset & Base Styles - โหลดที่สอง
========================================== */
@import url('reset.css');

/* ==========================================
   3. Layout & Grid Systems - โครงสร้างหลัก
========================================== */
@import url('layout.css');

/* ==========================================
   4. Header Component - ส่วน Header
========================================== */
@import url('header.css');

/* ==========================================
   5. Navigation Component - เมนูหลัก
========================================== */
@import url('navigation.css');

/* ==========================================
   6. Submenu Component - Dropdown menu
========================================== */
@import url('submenu.css');

/* ==========================================
   7. UI Components - ปุ่ม, form, ฯลฯ
========================================== */
@import url('components.css');

/* ==========================================
   8. Responsive Design
========================================== */
@import url('responsive.css');

/* ==========================================
   9. Homepage CSS
========================================== */
@import url('homepage.css');

/* ==========================================
   10. Print CSS
========================================== */
@import url('print.css') print; /* ระบุ media type เพื่อให้โหลดเมื่อพิมพ์เท่านั้น */

/* ==========================================
   Global Accessibility Overrides
   (ย้ายมาจาก responsive.css เดิม)
========================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

@media (prefers-contrast: high) {
    :root {
        --primary-blue: #0066cc;
        --text-dark: #000000;
        --border-color-light: #000000;
    }

    button, input, select, textarea {
        border-width: 2px;
    }
}


/* ==========================================
   Development Helper Styles (ลบในโปรดักชัน)
========================================== */

/* เปิดเมื่อต้อง debug layout */
/*
.debug * {
    outline: 1px solid red;
}

.debug .container {
    background: rgba(255, 0, 0, 0.1);
}

.debug .main-nav-blue {
    background: rgba(0, 255, 0, 0.1);
}

.debug .submenu {
    background: rgba(0, 0, 255, 0.1) !important;
}
*/

/* ==========================================
   Performance Optimization
========================================== */

/* Preload critical fonts (ถ้าไม่ได้ทำใน header.php แล้ว) */
/*
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');
*/

/* Critical path rendering optimization */
.above-fold {
    /* Styles สำหรับเนื้อหาที่เห็นทันทีเมื่อโหลดหน้า */
}

/* ==========================================
   Future Features (เตรียมไว้)
========================================== */

/* Dark Mode Support (ตัวแปรอยู่ใน variables.css แล้ว) */
/* High Contrast Mode (ตัวแปรอยู่ใน variables.css แล้ว) */
/* Reduced Motion (กฎอยู่ใน Global Accessibility Overrides แล้ว) */

/* ==========================================
   Browser-specific Fixes
========================================== */

/* Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .site-header-image {
        /* Safari-specific styles */
    }
}

/* Firefox specific fixes */
@-moz-document url-prefix() {
    .main-nav-blue {
        /* Firefox-specific styles */
    }
}

/* ==========================================
   Loading States (Global)
========================================== */

/* Page loading overlay */
.page-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-container);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    opacity: 1;
    transition: opacity 0.5s ease;
}

.page-loading.hidden {
    opacity: 0;
    pointer-events: none;
}

.page-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color-light);
    border-top: 3px solid var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ==========================================
   Feature Detection
========================================== */

/* Grid support detection */
@supports not (display: grid) {
    .news-grid,
    .card-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .news-grid > *,
    .card-grid > * {
        flex: 1 1 250px;
    }
}

/* Flexbox fallback for older browsers */
@supports not (display: flex) {
    .main-nav-blue ul {
        display: block;
        text-align: center;
    }

    .main-nav-blue li {
        display: inline-block;
        vertical-align: top;
    }
}

/* ==========================================
   End of Main CSS
   Total files imported: 10
========================================== */