/* Dark Mode Styles for Mifugo Digital */

/* Dark mode CSS variables */
[data-theme="dark"] {
  /* Colors */
  --primary-color: #60a5fa;
  --primary-dark: #3b82f6;
  --secondary-color: #818cf8;
  --text-dark: #f9fafb;
  --text-light: #e5e7eb;
  --text-muted: #9ca3af;
  --background-light: #1f2937;
  --background-dark: #111827;
  --white: #1f2937;
  --border-color: #374151;
  --card-background: #374151;
  --shadow-color: rgba(0, 0, 0, 0.3);
  
  /* Shadows for dark mode */
  --shadow-sm: 0 1px 2px 0 var(--shadow-color);
  --shadow-md: 0 4px 6px -1px var(--shadow-color);
  --shadow-lg: 0 10px 15px -3px var(--shadow-color);
}

/* Dark mode specific styles */
[data-theme="dark"] body {
  background-color: var(--background-dark) !important;
  color: var(--text-dark) !important;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .ws-header {
  background: var(--background-light);
  border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .ws-nav__menu-link {
  color: var(--text-dark);
}

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

[data-theme="dark"] .ws-light-1 {
  background: var(--background-light);
}

[data-theme="dark"] p {
  color: var(--text-light) !important;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.05) !important;
  line-height: 1.7 !important;
}

/* Enhanced typography for dark mode */
[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-dark) !important;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.1) !important;
  font-weight: 600 !important;
}

/* Logo and copyright text in dark mode */
[data-theme="dark"] .ws-m-logo-wrapper,
[data-theme="dark"] .ws-m-logo-wrapper *,
[data-theme="dark"] .ws-m-copyright,
[data-theme="dark"] .ws-m-copyright * {
  color: var(--text-dark) !important;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.1) !important;
}

/* Site name should use same color as copyright text */
[data-theme="dark"] [slot="site-name"],
[data-theme="dark"] [slot="site-name"] *,
[data-theme="dark"] .ws-global[slot="site-name"],
[data-theme="dark"] .ws-global[slot="site-name"] * {
  color: white !important;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .ws-m-logo-wrapper span,
[data-theme="dark"] .ws-m-copyright span {
  color: var(--text-dark) !important;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] h1 {
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.15) !important;
  letter-spacing: -0.025em !important;
}

[data-theme="dark"] h2 {
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.12) !important;
  letter-spacing: -0.02em !important;
}

[data-theme="dark"] h3 {
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.1) !important;
  letter-spacing: -0.015em !important;
}

/* Enhanced link styling for dark mode */
[data-theme="dark"] a {
  color: white !important;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s ease !important;
}

[data-theme="dark"] a:hover {
  color: #e5e7eb !important;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.5) !important;
  text-decoration: none !important;
}

/* Enhanced button text for dark mode */
[data-theme="dark"] .ws-button a {
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.2) !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
}

/* Enhanced navigation text for dark mode */
[data-theme="dark"] .ws-nav__menu-link {
  color: var(--text-dark) !important;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.1) !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

[data-theme="dark"] .ws-nav__menu-link:hover {
  color: var(--primary-color) !important;
  text-shadow: 0 0 2px rgba(96, 165, 250, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Enhanced footer text for dark mode */
[data-theme="dark"] .ws-m-footer-navigation a {
  color: var(--text-light) !important;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.05) !important;
  transition: all 0.3s ease !important;
}

[data-theme="dark"] .ws-m-footer-navigation a:hover {
  color: var(--primary-color) !important;
  text-shadow: 0 0 2px rgba(96, 165, 250, 0.3) !important;
}

/* Enhanced form text for dark mode */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--card-background) !important;
  border-color: var(--border-color) !important;
  color: var(--text-dark) !important;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted) !important;
  text-shadow: none !important;
}

/* Enhanced list text for dark mode */
[data-theme="dark"] li {
  color: var(--text-light) !important;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.03) !important;
}

/* Enhanced blockquote text for dark mode */
[data-theme="dark"] blockquote {
  color: var(--text-light) !important;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.05) !important;
  border-left: 4px solid var(--primary-color) !important;
  padding-left: 1rem !important;
  margin: 1.5rem 0 !important;
  font-style: italic !important;
}

/* Enhanced code text for dark mode */
[data-theme="dark"] code {
  background-color: var(--card-background) !important;
  color: var(--primary-color) !important;
  text-shadow: 0 0 1px rgba(96, 165, 250, 0.2) !important;
  padding: 0.2rem 0.4rem !important;
  border-radius: 4px !important;
  font-size: 0.875em !important;
}

/* Enhanced strong and emphasis text for dark mode */
[data-theme="dark"] strong,
[data-theme="dark"] b {
  color: var(--text-dark) !important;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.15) !important;
  font-weight: 600 !important;
}

[data-theme="dark"] em,
[data-theme="dark"] i {
  color: var(--text-light) !important;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* Enhanced small text for dark mode */
[data-theme="dark"] small {
  color: var(--text-muted);
  text-shadow: none;
}

/* Enhanced label text for dark mode */
[data-theme="dark"] label {
  color: var(--text-dark);
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
  font-weight: 500;
}

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

[data-theme="dark"] .ws-m-footer-navigation a {
  color: var(--text-light);
}

[data-theme="dark"] .ws-m-footer-navigation a:hover {
  color: var(--primary-color);
}

[data-theme="dark"] .ws-social-icons a {
  background: var(--primary-color);
}

[data-theme="dark"] .ws-social-icons a:hover {
  background: var(--primary-dark);
}

/* Dark mode toggle button - Now handled by header-toggle.css */
/* Removed fixed positioning styles - use header-toggle.css for positioning */

/* Dark mode logo switching */
[data-theme="dark"] .ws-m-logo-wrapper img[src*="fulllogo_transparent_nobuffer.png"] {
  content: url("/ws/media-library/7e429e921cf944dab7cfedd9b41b948b/fulllogo_transparent_nobuffer_dark.png");
}

[data-theme="dark"] .ws-m-logo-wrapper img[src*="vertical.png"] {
  content: url("/ws/media-library/7e429e921cf944dab7cfedd9b41b948b/vertical-dark.png");
}

/* Dark mode form elements */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--card-background);
  border-color: var(--border-color);
  color: var(--text-dark);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-light);
}

/* Dark mode cards and sections */
[data-theme="dark"] .ws-section {
  background-color: var(--background-light);
}

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


[data-theme="dark"] ws-block[white-space-bottom] .ws-section {
  background: var(--background-light);
}

/* Site name should use same color as copyright text in light mode */
[slot="site-name"],
[slot="site-name"] *,
.ws-global[slot="site-name"],
.ws-global[slot="site-name"] * {
  color: hsla(var(--ws-surface-text-color), var(--ws-surface-text-medium-emphasis-opacity)) !important;
}

/* Dark mode transitions */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Dark mode cookie banner */
[data-theme="dark"] .ws-cookie-banner {
  background: var(--background-light);
  border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .ws-cookie-banner__accept {
  background: var(--primary-color);
}

[data-theme="dark"] .ws-cookie-banner__decline {
  background: transparent;
  border: 1px solid var(--text-light);
  color: var(--text-light);
}

/* Dark mode mobile navigation */
[data-theme="dark"] .ws-nav-collapse {
  background: var(--background-light);
  border: 1px solid var(--border-color);
}

/* Dark mode focus states */
[data-theme="dark"] a:focus,
[data-theme="dark"] button:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Dark mode scrollbar */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--background-dark);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

/* Dark mode selection */
[data-theme="dark"] ::selection {
  background: var(--primary-color);
  color: white;
}

/* Dark mode loading states */
[data-theme="dark"] .loading {
  background: linear-gradient(90deg, var(--background-light) 25%, var(--border-color) 50%, var(--background-light) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Dark mode responsive adjustments */
@media (max-width: 768px) {
  .dark-mode-toggle {
    top: 15px;
    right: 15px;
    width: 45px;
    height: 45px;
  }
  
  .dark-mode-toggle svg {
    width: 20px;
    height: 20px;
  }
}