/* 
* theme.css - สไตล์ชีทสำหรับธีมต่างๆ ของเว็บไซต์โรงเรียนเทพปัญญา
* เวอร์ชัน: 1.0
*/

/* ====================== ธีมน้ำเงิน (ค่าเริ่มต้น) ====================== */
.theme-blue {
    --primary-color: #0066cc;
    --primary-color-rgb: 0, 102, 204;
    --primary-dark: #005299;
    --primary-light: #e6f0ff;
    --accent-color: #ff9900;
    --text-on-primary: #ffffff;
    --text-primary: #333333;
    --text-secondary: #666666;
    --bg-light: #f5f5f5;
    --bg-body: #ffffff;
    --border-color: #dddddd;
}

/* ====================== ธีมเขียว ====================== */
.theme-green {
    --primary-color: #2e7d32;
    --primary-color-rgb: 46, 125, 50;
    --primary-dark: #1b5e20;
    --primary-light: #e8f5e9;
    --accent-color: #ff5722;
    --text-on-primary: #ffffff;
    --text-primary: #333333;
    --text-secondary: #666666;
    --bg-light: #f5f5f5;
    --bg-body: #ffffff;
    --border-color: #dddddd;
}

/* ====================== ธีมส้ม ====================== */
.theme-orange {
    --primary-color: #FF8800;
    --primary-color-rgb: 255, 136, 0;
    --primary-dark: #e67a00;
    --primary-light: #fff5e6;
    --accent-color: #3f51b5;
    --text-on-primary: #ffffff;
    --text-primary: #333333;
    --text-secondary: #666666;
    --bg-light: #f5f5f5;
    --bg-body: #ffffff;
    --border-color: #dddddd;
}

/* ====================== ธีมม่วง ====================== */
.theme-purple {
    --primary-color: #6a1b9a;
    --primary-color-rgb: 106, 27, 154;
    --primary-dark: #4a148c;
    --primary-light: #f3e5f5;
    --accent-color: #ffab00;
    --text-on-primary: #ffffff;
    --text-primary: #333333;
    --text-secondary: #666666;
    --bg-light: #f5f5f5;
    --bg-body: #ffffff;
    --border-color: #dddddd;
}

/* ====================== โหมดกลางคืน ====================== */
.dark-mode {
    --text-primary: #f5f5f5;
    --text-secondary: #bbbbbb;
    --bg-body: #222222;
    --bg-light: #333333;
    --border-color: #444444;
}

.dark-mode body {
    background-color: var(--bg-body);
    color: var(--text-primary);
}

.dark-mode header {
    background-color: var(--bg-light);
}

.dark-mode .logo-section {
    background-color: var(--bg-body);
}

.dark-mode .theme-selector {
    background-color: var(--bg-light);
    border-color: var(--border-color);
}

.dark-mode .theme-btn {
    background-color: var(--bg-body);
    border-color: var(--border-color);
}

.dark-mode .site-title h2 {
    color: var(--text-secondary);
}

.dark-mode .search-form input {
    background-color: var(--bg-light);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.dark-mode .breadcrumb-container {
    background-color: var(--bg-light);
    border-color: var(--border-color);
}

.dark-mode .breadcrumb-item a {
    color: var(--text-secondary);
}

.dark-mode .breadcrumb-item.active a {
    color: var(--primary-color);
}

.dark-mode .highlight-news,
.dark-mode .quick-links,
.dark-mode .vision-box,
.dark-mode .mission-box,
.dark-mode .program-box,
.dark-mode .facility-card,
.dark-mode .tabs-container,
.dark-mode .news-card,
.dark-mode .faq-item,
.dark-mode .link-item,
.dark-mode .popup-content {
    background-color: var(--bg-light);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.dark-mode .thai-frame {
    background-color: rgba(51, 51, 51, 0.9);
}

.dark-mode .vision-content,
.dark-mode .mission-content,
.dark-mode .facility-body,
.dark-mode .news-body,
.dark-mode .faq-answer {
    color: var(--text-primary);
}

.dark-mode .vision-content p,
.dark-mode .mission-content p,
.dark-mode .facility-desc,
.dark-mode .news-body p,
.dark-mode .faq-answer p {
    color: var(--text-secondary);
}

.dark-mode .quick-link-item,
.dark-mode .tab-btn,
.dark-mode .faq-question {
    background-color: var(--bg-body);
}

.dark-mode .tab-btn {
    color: var(--text-secondary);
}

.dark-mode .tab-btn.active {
    background-color: var(--bg-light);
}

.dark-mode .section-header-center p,
.dark-mode .section-header p {
    color: var(--text-secondary);
}

.dark-mode .facility-title,
.dark-mode .news-body h3,
.dark-mode .faq-question h3 {
    color: var(--text-primary);
}

.dark-mode .marquee-item {
    border-color: var(--border-color);
}

.dark-mode .marquee-item:hover,
.dark-mode .quick-link-item:hover,
.dark-mode .faq-question:hover {
    background-color: var(--bg-light);
}

.dark-mode .footer {
    background-color: #111;
}

.dark-mode .footer-bottom {
    background-color: #000;
}