/* 
   Dark/Light Mode Styles
   Dark Mode = Default (white content)
   Light Mode = Gray content, but Header/Footer stay dark
*/

/* ============================================================================
   DEFAULT (DARK MODE) - White Content
   ============================================================================ */

body {
  background-color: var(--color-dark-bg);
  color: var(--color-text-muted);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* HEADER/FOOTER - ALWAYS DARK, NEVER CHANGE */
#site-header {
  background-color: #1E293B !important;
  color: #FFFFFF !important;
}

#site-header,
#site-header *,
footer,
footer * {
  transition: none !important;
}

footer,
[role="contentinfo"] {
  background-color: #1E293B !important;
  color: #FFFFFF !important;
}

/* Content in Dark Mode = White Text */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  color: var(--color-text-light);
}

body a {
  color: #E85D04;
}

body button,
body .button,
body [role="button"] {
  color: inherit;
}

body code,
body pre {
  background-color: var(--color-card-bg);
  color: var(--color-text-muted);
}

body blockquote {
  border-left-color: #E85D04;
}

/* ============================================================================
   LIGHT MODE - Gray Content, but Header/Footer STAY DARK
   ============================================================================ */

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

/* CRITICAL: Header/Footer DO NOT CHANGE in light mode */
body.light-mode #site-header {
  background-color: #1E293B !important;
  color: #FFFFFF !important;
}

body.light-mode footer,
body.light-mode [role="contentinfo"] {
  background-color: #1E293B !important;
  color: #FFFFFF !important;
}

/* Content headings in light mode = lighter */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
  color: var(--color-text-light);
}

body.light-mode a {
  color: #E85D04;
}

body.light-mode button,
body.light-mode .button,
body.light-mode [role="button"] {
  color: inherit;
}

body.light-mode code,
body.light-mode pre {
  background-color: var(--color-card-bg);
  color: var(--color-text-muted);
}

body.light-mode blockquote {
  border-left-color: #E85D04;
}

/* Elementor dark/light support */
body.light-mode .elementor-widget-heading h1,
body.light-mode .elementor-widget-heading h2,
body.light-mode .elementor-widget-heading h3,
body.light-mode .elementor-widget-heading h4,
body.light-mode .elementor-widget-heading h5,
body.light-mode .elementor-widget-heading h6 {
  color: var(--color-text-light);
}

body.light-mode .elementor-widget-text-editor p {
  color: var(--color-text-muted);
}

body.light-mode .elementor-button {
  background-color: #E85D04 !important;
  color: #FFFFFF !important;
}

/* Gutenberg blocks dark/light */
body.light-mode .wp-block-quote {
  border-left-color: #E85D04;
}

body.light-mode .wp-block-table th {
  background-color: var(--color-card-bg);
  color: var(--color-text-light);
}

/* ============================================================================
   TRANSITION STATE - During Toggle, All Text is WHITE
   ============================================================================ */

body.is-transitioning,
body.is-transitioning * {
  color: #FFFFFF !important;
}

body.is-transitioning {
  background-color: #1E293B !important;
}

/* Mode toggle icon animation */
.mode-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  padding: 0.5rem;
  transition: transform 0.3s ease;
}

.mode-toggle:hover {
  transform: rotate(20deg);
}

.mode-toggle:active {
  transform: rotate(-20deg);
}

/* Smooth transition when toggling */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

html {
  transition: background-color 0.3s ease;
}