/**
 * Dark Mode CSS for Tinh Yeu Chua
 */

/* Dark Mode Variables */
[data-theme="dark"] {
   --tyc-primary: #4da6ff;
   --tyc-primary-dark: #0084ff;
   --tyc-gradient: linear-gradient(135deg, #4da6ff 0%, #0084ff 100%);
   --tyc-text: #e2e8f0;
   --tyc-text-light: #94a3b8;
   --tyc-heading: #f8fafc;
   --tyc-bg: #0f172a;
   --tyc-bg-soft: #1e293b;
   --tyc-bg-dark: #020617;
   --tyc-border-light: #334155;
   --tyc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
   --tyc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
   --tyc-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5)
}

/* Body */
[data-theme="dark"] body {
   background: var(--tyc-bg);
   color: var(--tyc-text)
}

/* Header */
[data-theme="dark"] .header-top {
   background: #020617;
   border-color: #1e293b
}

[data-theme="dark"] .header-main-custom {
   background: #0f172a;
   border-color: #1e293b
}

[data-theme="dark"] .logo {
   color: #f8fafc
}

[data-theme="dark"] .main-nav>ul>li>a {
   color: #e2e8f0
}

[data-theme="dark"] .main-nav>ul>li>a:hover,
[data-theme="dark"] .main-nav>ul>li.current-menu-item>a {
   background: #1e293b;
   color: #4da6ff
}

[data-theme="dark"] .main-nav .sub-menu {
   background: #1e293b;
   border-color: #334155
}

[data-theme="dark"] .main-nav .sub-menu li a {
   color: #cbd5e1
}

[data-theme="dark"] .main-nav .sub-menu li a:hover {
   background: #334155;
   color: #4da6ff
}

/* Search */
[data-theme="dark"] .header-search-form {
   background: #1e293b;
   border-color: #334155
}

[data-theme="dark"] .header-search-input {
   color: #f8fafc
}

[data-theme="dark"] .header-search-input::placeholder {
   color: #64748b
}

/* Cards */
[data-theme="dark"] .card,
[data-theme="dark"] .post-card {
   background: #1e293b;
   border-color: #334155
}

[data-theme="dark"] .card-title a,
[data-theme="dark"] .post-title a {
   color: #f8fafc
}

[data-theme="dark"] .card-excerpt,
[data-theme="dark"] .post-excerpt {
   color: #94a3b8
}

/* Section */
[data-theme="dark"] .section-soft,
[data-theme="dark"] .archive-section {
   background: #0f172a
}

[data-theme="dark"] .section-title {
   color: #f8fafc
}

/* Footer */
[data-theme="dark"] .footer {
   background: #020617
}

[data-theme="dark"] .footer-bottom {
   background: #0f172a;
   border-color: #1e293b
}

/* Search Autocomplete */
[data-theme="dark"] .search-autocomplete-dropdown {
   background: #1e293b;
   border-color: #334155
}

[data-theme="dark"] .search-result-item {
   border-color: #334155
}

[data-theme="dark"] .search-result-item:hover,
[data-theme="dark"] .search-result-item.active {
   background: #334155
}

[data-theme="dark"] .result-title {
   color: #f8fafc
}

[data-theme="dark"] .result-thumb-placeholder {
   background: #334155;
   color: #64748b
}

[data-theme="dark"] .search-view-all {
   background: #0f172a;
   border-color: #334155
}

/* Mobile Sidebar */
[data-theme="dark"] .mobile-sidebar {
   background: #0f172a
}

[data-theme="dark"] .mobile-sidebar-header {
   border-color: #334155
}

[data-theme="dark"] .mobile-menu>ul>li {
   border-color: #1e293b
}

[data-theme="dark"] .mobile-menu>ul>li>a {
   color: #e2e8f0
}

[data-theme="dark"] .mobile-menu .sub-menu {
   background: #1e293b
}

[data-theme="dark"] .mobile-menu .sub-menu li a {
   color: #cbd5e1
}

[data-theme="dark"] .mobile-search {
   background: #0f172a;
   border-color: #334155
}

[data-theme="dark"] .mobile-search-form {
   background: #1e293b !important
}

[data-theme="dark"] .mobile-search-input {
   color: #f8fafc !important
}

[data-theme="dark"] .submenu-toggle {
   color: #64748b !important;
   border-color: #334155 !important
}

[data-theme="dark"] .submenu-toggle:hover {
   background: #334155 !important;
   color: #4da6ff !important
}

/* Toggle Button Styles */
.theme-toggle,
.lang-toggle {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border: none;
   background: transparent;
   color: #64748b;
   font-size: 18px;
   cursor: pointer;
   border-radius: 8px;
   transition: all 0.2s ease
}

.theme-toggle:hover,
.lang-toggle:hover {
   background: var(--tyc-bg-soft);
   color: var(--tyc-primary)
}

[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .lang-toggle {
   color: #94a3b8
}

[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .lang-toggle:hover {
   background: #1e293b;
   color: #4da6ff
}

/* Header Actions Group */
.header-utilities {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-left: 16px
}

/* Language Toggle */
.lang-toggle {
   font-size: 13px;
   font-weight: 700;
   width: auto;
   padding: 0 12px
}

.lang-toggle .lang-code {
   text-transform: uppercase
}

/* Mobile - Move toggles */
@media (max-width: 768px) {
   .header-utilities {
      display: none
   }

   .mobile-header-utilities {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 12px 20px;
      border-bottom: 1px solid #e2e8f0
   }

   [data-theme="dark"] .mobile-header-utilities {
      border-color: #334155
   }

   .mobile-header-utilities .theme-toggle,
   .mobile-header-utilities .lang-toggle {
      flex: 1;
      height: 44px;
      background: #f1f5f9;
      border-radius: 10px
   }

   [data-theme="dark"] .mobile-header-utilities .theme-toggle,
   [data-theme="dark"] .mobile-header-utilities .lang-toggle {
      background: #1e293b
   }
}

@media (min-width: 769px) {
   .mobile-header-utilities {
      display: none
   }
}
/* Mobile Header Utilities - Bigger buttons */
.mobile-header-utilities .theme-toggle,
.mobile-header-utilities .lang-toggle {
    gap: 8px;
    font-size: 14px !important;
    font-weight: 600 !important
}

.mobile-header-utilities .theme-toggle i,
.mobile-header-utilities .lang-toggle i {
    font-size: 18px
}

/* Fix header utilities spacing */
.header-main-custom .container {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important
}

.header-search-form {
    flex-shrink: 0 !important;
    min-width: 200px !important
}

.header-utilities {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: 12px !important
}

.theme-toggle,
.lang-toggle {
    flex-shrink: 0 !important
}

/* Fix vertical alignment for toggle buttons */
.header-utilities {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    height: 44px !important
}

.theme-toggle,
.lang-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    width: 44px !important;
    background: #f1f5f9 !important;
    border-radius: 10px !important;
    border: none !important
}

.lang-toggle {
    width: auto !important;
    padding: 0 14px !important
}

/* Force same height as search bar */
.header-search-form,
.header-utilities,
.theme-toggle,
.lang-toggle {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important
}

.header-search-form {
    height: 44px !important
}

.header-utilities {
    position: relative !important;
    top: 0 !important
}

/* Fix dark mode text colors */
[data-theme="dark"] .section-title,
[data-theme="dark"] .archive-section h2,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .post-title,
[data-theme="dark"] .post-title a,
[data-theme="dark"] .card-title,
[data-theme="dark"] .card-title a {
    color: #f8fafc !important
}

[data-theme="dark"] .section-header,
[data-theme="dark"] .archive-section .section-header {
    color: #f8fafc !important
}

[data-theme="dark"] .view-all,
[data-theme="dark"] .view-all-link {
    color: #4da6ff !important
}

[data-theme="dark"] .post-excerpt,
[data-theme="dark"] .post-meta,
[data-theme="dark"] p {
    color: #94a3b8 !important
}

[data-theme="dark"] .post-card,
[data-theme="dark"] .news-card {
    background: #1e293b !important;
    border-color: #334155 !important
}

/* FORCE DARK MODE TEXT FIX */
[data-theme="dark"] .section-title span,
[data-theme="dark"] .section-title b,
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6,
[data-theme="dark"] .box-text h5,
[data-theme="dark"] .box-text p {
    color: #f8fafc !important;
}

[data-theme="dark"] a {
    color: #cbd5e1;
}

[data-theme="dark"] a:hover {
    color: #4da6ff;
}

/* Fix Hero Section Text in Dark Mode */
[data-theme="dark"] .hero-section h1,
[data-theme="dark"] .hero-section h2,
[data-theme="dark"] .hero-section h3,
[data-theme="dark"] .hero-section p,
[data-theme="dark"] .hero-section span,
[data-theme="dark"] .hero-section div,
[data-theme="dark"] .prayer-text,
[data-theme="dark"] .liturgical-title,
[data-theme="dark"] .liturgical-date,
[data-theme="dark"] .liturgical-week,
[data-theme="dark"] .liturgical-info {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Ensure buttons inside hero remain visible */
[data-theme="dark"] .reading-tab {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

[data-theme="dark"] .reading-tab.active {
    background: #fff !important;
    color: #0084ff !important;
}

/* SUPER FORCE WHITE TEXT FOR BLUE SECTION */
[data-theme="dark"] .hero-section *,
[data-theme="dark"] .liturgical-section *,
[data-theme="dark"] .liturgical-card * {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Restore button colors inside the blue section */
[data-theme="dark"] .hero-section .reading-tab.active,
[data-theme="dark"] .liturgical-section .reading-tab.active {
    color: #0084ff !important;
}

[data-theme="dark"] .hero-section .reading-source,
[data-theme="dark"] .liturgical-section .reading-source {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2) !important;
}