/**
 * Dark Mode Styles
 * Theme-specific overrides for dark mode
 * 
 * @package Expanding_Tiles
 * @since 1.0.0
 */

/* Dark mode is applied via data-theme attribute on html element */
/* Variables are already defined in style.css */

[data-theme="dark"] {
  /* Ensure smooth transition */
  transition: background-color 0.3s ease, color 0.3s ease;

  /*
   * Some plugins/optimizers inject their own CSS variables after the theme.
   * Re-assert muted color at higher priority to keep excerpt/meta/menu readable.
   */
  --muted: rgba(255, 255, 255, 0.84) !important;
}

/* Additional dark mode adjustments */
[data-theme="dark"] .site-header {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .post-card {
  box-shadow: var(--shadowCard);
}

/* Header navigation readability in dark mode */
[data-theme="dark"] .main-navigation a,
[data-theme="dark"] #primary-menu a {
  color: rgba(255, 255, 255, 0.84) !important;
}

[data-theme="dark"] .main-navigation a:hover,
[data-theme="dark"] .main-navigation a:focus,
[data-theme="dark"] #primary-menu a:hover,
[data-theme="dark"] #primary-menu a:focus,
[data-theme="dark"] .main-navigation .current-menu-item > a,
[data-theme="dark"] .main-navigation .current_page_item > a,
[data-theme="dark"] #primary-menu .current-menu-item > a,
[data-theme="dark"] #primary-menu .current_page_item > a {
  color: #ffffff !important;
}

/*
 * Grid cards: ensure excerpt/meta remain readable in dark backgrounds.
 * Some plugins inject additional typography rules; use a stronger selector +
 * !important to guarantee legibility.
 */
[data-theme="dark"] .post-card .post-excerpt {
  color: rgba(255, 255, 255, 0.90) !important;
  opacity: 1 !important;
}

[data-theme="dark"] .post-card .post-meta {
  color: rgba(255, 255, 255, 0.78) !important;
  opacity: 1 !important;
}

[data-theme="dark"] .post-card .post-content {
  color: rgba(255, 255, 255, 0.92);
}

[data-theme="dark"] .post-card:hover {
  box-shadow: var(--shadowCardHover);
}

[data-theme="dark"] .post-image-wrapper::after {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

[data-theme="dark"] .tab-button {
  background: #3a3a3a;
  color: #aaa;
}

[data-theme="dark"] .tab-button:hover {
  background: #4a4a4a;
}

[data-theme="dark"] .tab-button.active {
  background: #5b9bd5;
  color: white;
}

[data-theme="dark"] .accordion-header {
  background: #3a3a3a;
  color: #e0e0e0;
}

[data-theme="dark"] .accordion-header:hover {
  background: #4a4a4a;
}

[data-theme="dark"] .accordion-header.active {
  background: #5b9bd5;
  color: white;
}

[data-theme="dark"] .accordion-body {
  border-top-color: #444;
}

/* Images - slight brightness reduction in dark mode (optional) */
[data-theme="dark"] img:not(.post-image):not(.article-hero-image) {
  opacity: 0.9;
}

/* Code blocks in dark mode */
[data-theme="dark"] pre,
[data-theme="dark"] code {
  background: #1a1a1a;
  border-color: #444;
}

/* Forms in dark mode */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #2c2c2c;
  border-color: #444;
  color: #e0e0e0;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--accent);
}

/* Ensure smooth image transitions */
img {
  transition: opacity 0.3s ease;
}

/* Single Post Content - Improved Readability */
[data-theme="dark"] .single-content,
[data-theme="dark"] .entry-content,
[data-theme="dark"] .post-content {
  color: #e0e0e0;
}

[data-theme="dark"] .single-content p,
[data-theme="dark"] .entry-content p,
[data-theme="dark"] .post-content p {
  color: #d0d0d0;
}

[data-theme="dark"] .single-content h1,
[data-theme="dark"] .single-content h2,
[data-theme="dark"] .single-content h3,
[data-theme="dark"] .single-content h4,
[data-theme="dark"] .single-content h5,
[data-theme="dark"] .single-content h6 {
  color: #ffffff;
}

[data-theme="dark"] .single-content a {
  color: var(--accent);
}

[data-theme="dark"] .single-content a:hover {
  color: var(--accent2);
}

/* WPBakery/Visual Composer content */
[data-theme="dark"] .vc_row,
[data-theme="dark"] .wpb_wrapper,
[data-theme="dark"] .vc_column_container {
  color: #d0d0d0;
}

[data-theme="dark"] .wpb_text_column p {
  color: #d0d0d0;
}

/* Loading state */
body:not(.loaded) {
  opacity: 0;
}

body.loaded {
  opacity: 1;
  transition: opacity 0.3s ease;
}


/* Hover readability safeguard for glossy card effect (theme may use data-theme or body.dark-mode) */
[data-theme="dark"] .post-card:hover,
body.dark-mode .post-card:hover {
  background: rgba(44, 44, 44, 0.92) !important;
}

[data-theme="dark"] .post-card:hover .post-excerpt,
[data-theme="dark"] .post-card:hover .post-meta,
[data-theme="dark"] .post-card:hover .read-more,
body.dark-mode .post-card:hover .post-excerpt,
body.dark-mode .post-card:hover .post-meta,
body.dark-mode .post-card:hover .read-more {
  color: rgba(255,255,255,.90) !important;
  opacity: 1 !important;
}

/* =========================================================
   WPBakery Tabs - Dark Mode Readability (overlay + direct post)
   ========================================================= */

[data-theme="dark"] .article-body .vc_tta-tabs .vc_tta-tab > a,
[data-theme="dark"] .article-body .wpb_tabs .wpb_tabs_nav li a,
[data-theme="dark"] .article-body .ultimate-tabs-nav li,
body.dark-mode .article-body .vc_tta-tabs .vc_tta-tab > a,
body.dark-mode .article-body .wpb_tabs .wpb_tabs_nav li a,
body.dark-mode .article-body .ultimate-tabs-nav li {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

[data-theme="dark"] .article-body .vc_tta-tabs .vc_tta-tab.vc_active > a,
[data-theme="dark"] .article-body .wpb_tabs .wpb_tabs_nav li.ui-tabs-active a,
[data-theme="dark"] .article-body .wpb_tabs .wpb_tabs_nav li.active a,
[data-theme="dark"] .article-body .ultimate-tabs-nav li.active,
body.dark-mode .article-body .vc_tta-tabs .vc_tta-tab.vc_active > a,
body.dark-mode .article-body .wpb_tabs .wpb_tabs_nav li.ui-tabs-active a,
body.dark-mode .article-body .wpb_tabs .wpb_tabs_nav li.active a,
body.dark-mode .article-body .ultimate-tabs-nav li.active {
  background: color-mix(in srgb, var(--accent) 70%, #1e293b) !important;
  color: #ffffff !important;
  border-color: color-mix(in srgb, var(--accent2) 72%, #0f172a) !important;
}

[data-theme="dark"] .article-body .vc_tta-panel,
[data-theme="dark"] .article-body .wpb_tab,
[data-theme="dark"] .article-body .ultimate-tab-content,
body.dark-mode .article-body .vc_tta-panel,
body.dark-mode .article-body .wpb_tab,
body.dark-mode .article-body .ultimate-tab-content {
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .article-body .vc_tta-panel-body,
[data-theme="dark"] .article-body .wpb_tab p,
[data-theme="dark"] .article-body .ultimate-tab-content p,
body.dark-mode .article-body .vc_tta-panel-body,
body.dark-mode .article-body .wpb_tab p,
body.dark-mode .article-body .ultimate-tab-content p {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Some VC blocks inject light backgrounds inline; neutralize inside dark overlay/article */
[data-theme="dark"] .article-body [class*="vc_custom_"],
body.dark-mode .article-body [class*="vc_custom_"] {
  color: inherit;
}

/* =========================================================
   WPBakery Standard Tabs - Contrast Hardening (dark mode)
   ========================================================= */

[data-theme="dark"] .article-body .wpb_tabs .wpb_tab,
[data-theme="dark"] .entry-content .wpb_tabs .wpb_tab,
[data-theme="dark"] .single-content .wpb_tabs .wpb_tab,
body.dark-mode .article-body .wpb_tabs .wpb_tab,
body.dark-mode .entry-content .wpb_tabs .wpb_tab,
body.dark-mode .single-content .wpb_tabs .wpb_tab {
  background: #1f232b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .article-body .wpb_tabs .wpb_tab .wpb_wrapper,
[data-theme="dark"] .entry-content .wpb_tabs .wpb_tab .wpb_wrapper,
[data-theme="dark"] .single-content .wpb_tabs .wpb_tab .wpb_wrapper,
body.dark-mode .article-body .wpb_tabs .wpb_tab .wpb_wrapper,
body.dark-mode .entry-content .wpb_tabs .wpb_tab .wpb_wrapper,
body.dark-mode .single-content .wpb_tabs .wpb_tab .wpb_wrapper {
  background: transparent !important;
}

[data-theme="dark"] .article-body .wpb_tabs .wpb_tab,
[data-theme="dark"] .article-body .wpb_tabs .wpb_tab p,
[data-theme="dark"] .article-body .wpb_tabs .wpb_tab li,
[data-theme="dark"] .article-body .wpb_tabs .wpb_tab span,
[data-theme="dark"] .article-body .wpb_tabs .wpb_tab div,
[data-theme="dark"] .entry-content .wpb_tabs .wpb_tab,
[data-theme="dark"] .entry-content .wpb_tabs .wpb_tab p,
[data-theme="dark"] .entry-content .wpb_tabs .wpb_tab li,
[data-theme="dark"] .entry-content .wpb_tabs .wpb_tab span,
[data-theme="dark"] .entry-content .wpb_tabs .wpb_tab div,
[data-theme="dark"] .single-content .wpb_tabs .wpb_tab,
[data-theme="dark"] .single-content .wpb_tabs .wpb_tab p,
[data-theme="dark"] .single-content .wpb_tabs .wpb_tab li,
[data-theme="dark"] .single-content .wpb_tabs .wpb_tab span,
[data-theme="dark"] .single-content .wpb_tabs .wpb_tab div,
body.dark-mode .article-body .wpb_tabs .wpb_tab,
body.dark-mode .article-body .wpb_tabs .wpb_tab p,
body.dark-mode .article-body .wpb_tabs .wpb_tab li,
body.dark-mode .article-body .wpb_tabs .wpb_tab span,
body.dark-mode .article-body .wpb_tabs .wpb_tab div,
body.dark-mode .entry-content .wpb_tabs .wpb_tab,
body.dark-mode .entry-content .wpb_tabs .wpb_tab p,
body.dark-mode .entry-content .wpb_tabs .wpb_tab li,
body.dark-mode .entry-content .wpb_tabs .wpb_tab span,
body.dark-mode .entry-content .wpb_tabs .wpb_tab div,
body.dark-mode .single-content .wpb_tabs .wpb_tab,
body.dark-mode .single-content .wpb_tabs .wpb_tab p,
body.dark-mode .single-content .wpb_tabs .wpb_tab li,
body.dark-mode .single-content .wpb_tabs .wpb_tab span,
body.dark-mode .single-content .wpb_tabs .wpb_tab div {
  color: rgba(245, 247, 250, 0.93) !important;
}

[data-theme="dark"] .article-body .wpb_tabs .wpb_tabs_nav li a,
[data-theme="dark"] .entry-content .wpb_tabs .wpb_tabs_nav li a,
[data-theme="dark"] .single-content .wpb_tabs .wpb_tabs_nav li a,
body.dark-mode .article-body .wpb_tabs .wpb_tabs_nav li a,
body.dark-mode .entry-content .wpb_tabs .wpb_tabs_nav li a,
body.dark-mode .single-content .wpb_tabs .wpb_tabs_nav li a {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

[data-theme="dark"] .article-body .wpb_tabs .wpb_tabs_nav li.ui-tabs-active a,
[data-theme="dark"] .article-body .wpb_tabs .wpb_tabs_nav li.active a,
[data-theme="dark"] .entry-content .wpb_tabs .wpb_tabs_nav li.ui-tabs-active a,
[data-theme="dark"] .entry-content .wpb_tabs .wpb_tabs_nav li.active a,
[data-theme="dark"] .single-content .wpb_tabs .wpb_tabs_nav li.ui-tabs-active a,
[data-theme="dark"] .single-content .wpb_tabs .wpb_tabs_nav li.active a,
body.dark-mode .article-body .wpb_tabs .wpb_tabs_nav li.ui-tabs-active a,
body.dark-mode .article-body .wpb_tabs .wpb_tabs_nav li.active a,
body.dark-mode .entry-content .wpb_tabs .wpb_tabs_nav li.ui-tabs-active a,
body.dark-mode .entry-content .wpb_tabs .wpb_tabs_nav li.active a,
body.dark-mode .single-content .wpb_tabs .wpb_tabs_nav li.ui-tabs-active a,
body.dark-mode .single-content .wpb_tabs .wpb_tabs_nav li.active a {
  background: color-mix(in srgb, var(--accent) 72%, #1e293b) !important;
  color: #fff !important;
}

/* =========================================================
   WPBakery/VC Tabs - Global Fallback (all dark post layouts)
   ========================================================= */

[data-theme="dark"] .wpb_tabs .wpb_tab,
[data-theme="dark"] .vc_tta-panel,
[data-theme="dark"] .vc_tta-panel-body,
[data-theme="dark"] .ultimate-tab-content,
body.dark-mode .wpb_tabs .wpb_tab,
body.dark-mode .vc_tta-panel,
body.dark-mode .vc_tta-panel-body,
body.dark-mode .ultimate-tab-content {
  background: #1f232b !important;
  color: rgba(245, 247, 250, 0.93) !important;
}

[data-theme="dark"] .wpb_tabs .wpb_tab p,
[data-theme="dark"] .wpb_tabs .wpb_tab li,
[data-theme="dark"] .wpb_tabs .wpb_tab span,
[data-theme="dark"] .wpb_tabs .wpb_tab div,
[data-theme="dark"] .wpb_tabs .wpb_tab h1,
[data-theme="dark"] .wpb_tabs .wpb_tab h2,
[data-theme="dark"] .wpb_tabs .wpb_tab h3,
[data-theme="dark"] .wpb_tabs .wpb_tab h4,
[data-theme="dark"] .wpb_tabs .wpb_tab h5,
[data-theme="dark"] .wpb_tabs .wpb_tab h6,
[data-theme="dark"] .vc_tta-panel-body p,
[data-theme="dark"] .vc_tta-panel-body li,
[data-theme="dark"] .vc_tta-panel-body span,
[data-theme="dark"] .vc_tta-panel-body div,
[data-theme="dark"] .vc_tta-panel-body h1,
[data-theme="dark"] .vc_tta-panel-body h2,
[data-theme="dark"] .vc_tta-panel-body h3,
[data-theme="dark"] .vc_tta-panel-body h4,
[data-theme="dark"] .vc_tta-panel-body h5,
[data-theme="dark"] .vc_tta-panel-body h6,
body.dark-mode .wpb_tabs .wpb_tab p,
body.dark-mode .wpb_tabs .wpb_tab li,
body.dark-mode .wpb_tabs .wpb_tab span,
body.dark-mode .wpb_tabs .wpb_tab div,
body.dark-mode .wpb_tabs .wpb_tab h1,
body.dark-mode .wpb_tabs .wpb_tab h2,
body.dark-mode .wpb_tabs .wpb_tab h3,
body.dark-mode .wpb_tabs .wpb_tab h4,
body.dark-mode .wpb_tabs .wpb_tab h5,
body.dark-mode .wpb_tabs .wpb_tab h6,
body.dark-mode .vc_tta-panel-body p,
body.dark-mode .vc_tta-panel-body li,
body.dark-mode .vc_tta-panel-body span,
body.dark-mode .vc_tta-panel-body div,
body.dark-mode .vc_tta-panel-body h1,
body.dark-mode .vc_tta-panel-body h2,
body.dark-mode .vc_tta-panel-body h3,
body.dark-mode .vc_tta-panel-body h4,
body.dark-mode .vc_tta-panel-body h5,
body.dark-mode .vc_tta-panel-body h6 {
  color: rgba(245, 247, 250, 0.93) !important;
}