/*
 * Dark Mode Styles for Recycling Website
 * Eco-friendly color palette with proper contrast
 */

/* ===== DARK MODE VARIABLES ===== */
:root {
  /* Light mode colors (default) */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #adb5bd;
  --border-color: #dee2e6;
  --card-bg: #ffffff;
  --navbar-bg: #ffffff;
  --footer-bg: #212529;
}

/* Dark mode colors */
[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3a3a3a;
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --text-muted: #888888;
  --border-color: #404040;
  --card-bg: #2d2d2d;
  --navbar-bg: #1a1a1a;
  --footer-bg: #0d0d0d;
}

/* ===== DARK MODE TOGGLE BUTTON ===== */
.dark-mode-toggle {
  position: relative;
  margin-left: 2rem;
  /* Add spacing between EcoHub brand and toggle */
}

.dark-mode-toggle .btn {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 2px solid var(--primary-green);
  background: transparent;
  color: var(--primary-green);
}

.dark-mode-toggle .btn:hover {
  background: var(--primary-green);
  color: white;
  transform: scale(1.1);
}

[data-theme="dark"] .dark-mode-toggle .btn {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

[data-theme="dark"] .dark-mode-toggle .btn:hover {
  background: var(--accent-green);
  color: var(--bg-primary);
}

/* ===== GLOBAL DARK MODE STYLES ===== */
[data-theme="dark"] body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== NAVIGATION ===== */
[data-theme="dark"] .navbar {
  background-color: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .navbar-brand {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .nav-link {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
  color: var(--accent-green) !important;
}

[data-theme="dark"] .dropdown-menu {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .dropdown-item {
  color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
  background-color: var(--bg-tertiary);
  color: var(--accent-green);
}

/* ===== SECTIONS ===== */
[data-theme="dark"] .about-section,
[data-theme="dark"] .faq-section,
[data-theme="dark"] .blog-section {
  background-color: var(--bg-secondary);
}

[data-theme="dark"] .projects-section,
[data-theme="dark"] .testimonials-section {
  background-color: var(--bg-primary);
}

/* ===== CARDS ===== */
[data-theme="dark"] .feature-card,
[data-theme="dark"] .project-card,
[data-theme="dark"] .faq-card,
[data-theme="dark"] .blog-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .project-card:hover,
[data-theme="dark"] .faq-card:hover,
[data-theme="dark"] .blog-card:hover {
  box-shadow: 0 20px 40px rgba(107, 191, 89, 0.2);
}

/* ===== TYPOGRAPHY ===== */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--text-primary);
}

[data-theme="dark"] .section-title {
  color: var(--text-primary);
}

[data-theme="dark"] .section-description,
[data-theme="dark"] .feature-description,
[data-theme="dark"] .project-description,
[data-theme="dark"] .faq-answer,
[data-theme="dark"] .blog-excerpt {
  color: var(--text-secondary);
}

[data-theme="dark"] .feature-title,
[data-theme="dark"] .project-title,
[data-theme="dark"] .faq-title,
[data-theme="dark"] .blog-title a {
  color: var(--text-primary);
}

[data-theme="dark"] .blog-title a:hover {
  color: var(--accent-green);
}

/* ===== MISSION SECTION ===== */
[data-theme="dark"] .mission-content {
  background-color: var(--bg-secondary);
}

[data-theme="dark"] .accordion-button {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--primary-green);
  color: white;
}

[data-theme="dark"] .accordion-body {
  background-color: var(--card-bg);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

/* ===== TESTIMONIALS ===== */
[data-theme="dark"] .testimonial-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .testimonial-text {
  color: var(--text-secondary);
}

[data-theme="dark"] .author-name {
  color: var(--text-primary);
}

[data-theme="dark"] .author-title {
  color: var(--text-muted);
}

/* ===== CONTACT FORM ===== */
[data-theme="dark"] .contact-form-container {
  background-color: rgba(45, 45, 45, 0.95) !important;
  border: 1px solid var(--border-color);
  backdrop-filter: blur(15px);
}

[data-theme="dark"] .contact-form .section-title,
[data-theme="dark"] .contact-section .section-title,
[data-theme="dark"] .contact-section .text-dark {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .contact-form .section-description,
[data-theme="dark"] .contact-section .section-description,
[data-theme="dark"] .contact-section .text-muted {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .form-control {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus {
  background-color: var(--bg-tertiary);
  border-color: var(--accent-green);
  color: var(--text-primary);
  box-shadow: 0 0 0 0.2rem rgba(107, 191, 89, 0.25);
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--text-muted);
}

[data-theme="dark"] .input-group-text {
  background-color: var(--primary-green);
  border: 1px solid var(--primary-green);
  color: white;
}

/* ===== FOOTER ===== */
[data-theme="dark"] #footer {
  background-color: var(--footer-bg) !important;
}

[data-theme="dark"] #footer_b {
  background-color: var(--footer-bg);
  border-top: 1px solid var(--border-color);
}

/* ===== BLOG SPECIFIC ===== */
[data-theme="dark"] .blog-meta {
  color: var(--text-muted);
}

[data-theme="dark"] .blog-tag {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .blog-tag:hover {
  background-color: var(--accent-green);
  color: var(--bg-primary);
}

[data-theme="dark"] .blog-read-more {
  color: var(--accent-green);
}

[data-theme="dark"] .blog-read-more:hover {
  color: var(--primary-green);
}

/* ===== TAGS AND BADGES ===== */
[data-theme="dark"] .tag,
[data-theme="dark"] .category-tag {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .category-tag {
  background-color: var(--primary-green);
  color: white;
}

/* ===== LINKS ===== */
[data-theme="dark"] .feature-link {
  color: var(--accent-green);
}

[data-theme="dark"] .feature-link:hover {
  color: var(--primary-green);
}

/* ===== BORDERS AND DIVIDERS ===== */
[data-theme="dark"] hr {
  border-color: var(--border-color);
}

[data-theme="dark"] .border_1 {
  border-color: var(--border-color) !important;
}

/* ===== CAROUSEL INDICATORS ===== */
[data-theme="dark"] .carousel-indicators [data-bs-target] {
  background-color: var(--accent-green);
}

/* ===== SMOOTH TRANSITIONS ===== */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #888888;
    --border-color: #404040;
    --card-bg: #2d2d2d;
    --navbar-bg: #1a1a1a;
    --footer-bg: #0d0d0d;
  }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
  [data-theme="dark"] {
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #333333;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --border-color: #666666;
    --card-bg: #1a1a1a;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] * {
    transition: none !important;
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  [data-theme="dark"] {
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --text-primary: #000000;
    --text-secondary: #333333;
    --card-bg: #ffffff;
  }
}

/*
 ===== ADDITIONAL BLOG AND FAQ DARK MODE FIXES ===== */

/* Blog Section Background */
[data-theme="dark"] .blog-section {
  background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .blog-section.bg-light {
  background-color: var(--bg-primary) !important;
}

/* FAQ Section Background */
[data-theme="dark"] .faq-section {
  background-color: var(--bg-primary) !important;
}

/* Blog Cards Enhanced */
[data-theme="dark"] .blog-card {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .blog-card .blog-content {
  background-color: var(--card-bg) !important;
}

/* FAQ Accordion Enhanced */
[data-theme="dark"] .modern-accordion .accordion-item {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .modern-accordion .accordion-button {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .modern-accordion .accordion-button:not(.collapsed) {
  background-color: var(--primary-green) !important;
  color: white !important;
}

[data-theme="dark"] .modern-accordion .accordion-body {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

/* Override any light backgrounds */
[data-theme="dark"] .bg-light {
  background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .bg-white {
  background-color: var(--card-bg) !important;
}

/* Social Network Icons */
[data-theme="dark"] .social-network li a {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .social-network li a:hover {
  background-color: var(--accent-green);
  color: var(--bg-primary);
}

/* Blog Social Icons Specific Colors */
[data-theme="dark"] .icoFacebook:hover {
  background-color: #3b5998 !important;
  color: white !important;
}

[data-theme="dark"] .icoGoogle:hover {
  background-color: #bd081c !important;
  color: white !important;
}

[data-theme="dark"] .icoLinkedin:hover {
  background-color: #0077b5 !important;
  color: white !important;
}

[data-theme="dark"] .icoRss:hover {
  background-color: var(--accent-green) !important;
  color: white !important;
}

/* =
==== BLOG SIDEBAR READABILITY IMPROVEMENTS ===== */

/* Improve sidebar text contrast */
.blog_1r1 h6 a {
  color: #333 !important;
  text-decoration: none;
  font-weight: 500;
}

.blog_1r1 h6 a:hover {
  color: var(--primary-green) !important;
  text-decoration: underline;
}

/* Dark mode sidebar improvements */
[data-theme="dark"] .blog_1r1 {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .blog_1r1 h4 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .blog_1r1 h6 a {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .blog_1r1 h6 a:hover {
  color: var(--accent-green) !important;
}

[data-theme="dark"] .blog_1r1 p {
  color: var(--text-secondary) !important;
}

/* Popular tags styling */
.blog_1r1 ul li a {
  background-color: #f8f9fa;
  color: #495057;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  text-decoration: none;
  font-size: 0.875rem;
  margin: 0.25rem;
  display: inline-block;
  border: 1px solid #dee2e6;
  transition: all 0.3s ease;
}

.blog_1r1 ul li a:hover {
  background-color: var(--primary-green);
  color: white;
  border-color: var(--primary-green);
}

[data-theme="dark"] .blog_1r1 ul li a {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .blog_1r1 ul li a:hover {
  background-color: var(--accent-green);
  color: var(--bg-primary);
  border-color: var(--accent-green);
}

/* Newsletter section */
[data-theme="dark"] .blog_1r1 input.form-control {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .blog_1r1 .button {
  background-color: var(--primary-green);
  color: white;
  border-color: var(--primary-green);
}

[data-theme="dark"] .blog_1r1 .button:hover {
  background-color: var(--accent-green);
  border-color: var(--accent-green);
}

/* Latest posts improvements */
.blog_1r1ir h6.fw-bold a {
  color: #333 !important;
  line-height: 1.3;
}

.blog_1r1ir h6.fw-bold a:hover {
  color: var(--primary-green) !important;
}

[data-theme="dark"] .blog_1r1ir h6.fw-bold a {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .blog_1r1ir h6.fw-bold a:hover {
  color: var(--accent-green) !important;
}

/ *=====BLOG ARTICLE CARD STYLING=====*/
/* Development platform cards */
.blog-article .card {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.blog-article .card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.blog-article .card-body {
  padding: 1.5rem;
}

.blog-article .card-title {
  color: var(--primary-green);
  font-weight: 600;
  margin-bottom: 1rem;
}

.blog-article .card-text {
  color: #6c757d;
  line-height: 1.5;
}

/* Dark mode card styling */
[data-theme="dark"] .blog-article .card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="dark"] .blog-article .card-title {
  color: var(--accent-green);
}

[data-theme="dark"] .blog-article .card-text {
  color: var(--text-secondary);
}

[data-theme="dark"] .blog-article .card:hover {
  box-shadow: 0 4px 8px rgba(107, 191, 89, 0.2);
}

/* Alert styling */
.blog-article .alert {
  border-radius: 0.5rem;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.blog-article .alert-info {
  background-color: #e7f3ff;
  color: #0c5460;
}

.blog-article .alert-success {
  background-color: #d1f2eb;
  color: #0f5132;
}

[data-theme="dark"] .blog-article .alert-info {
  background-color: rgba(13, 202, 240, 0.1);
  color: var(--text-primary);
  border: 1px solid rgba(13, 202, 240, 0.2);
}

[data-theme="dark"] .blog-article .alert-success {
  background-color: rgba(107, 191, 89, 0.1);
  color: var(--text-primary);
  border: 1px solid rgba(107, 191, 89, 0.2);
}

/* Table styling */
.blog-article .table {
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .blog-article .table {
  background-color: var(--card-bg);
  color: var(--text-primary);
}

[data-theme="dark"] .blog-article .table th {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .blog-article .table td {
  border-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .blog-article .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bg-tertiary);
}

/* Accordion styling for blog articles */
.blog-article .accordion-button {
  background-color: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
}

.blog-article .accordion-button:not(.collapsed) {
  background-color: var(--primary-green);
  color: white;
}

[data-theme="dark"] .blog-article .accordion-button {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .blog-article .accordion-button:not(.collapsed) {
  background-color: var(--accent-green);
  color: var(--bg-primary);
}

[data-theme="dark"] .blog-article .accordion-body {
  background-color: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}