/* ==========================================================================
   SKYWASHSOLUTIONS - Dark Theme
   Toggle zwischen Light und Dark Mode
   ========================================================================== */

/* ===== Dark Theme Variables ===== */
[data-theme="dark"] {
  /* Hintergründe */
  --bg-body: #0F172A;
  --bg-light: #1E293B;
  --bg-dark: #020617;
  --bg-overlay: rgba(2, 6, 23, 0.9);
  --bg-glass: rgba(30, 41, 59, 0.8);

  /* Textfarben */
  --text-primary: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --text-light: #64748B;

  /* Neutrale Farben */
  --white: #1E293B;
  --gray-50: #1E293B;
  --gray-100: #334155;
  --gray-200: #475569;
  --gray-300: #64748B;
  --gray-400: #94A3B8;
  --gray-500: #CBD5E1;
  --gray-600: #E2E8F0;
  --gray-700: #F1F5F9;
  --gray-800: #F8FAFC;
  --gray-900: #FFFFFF;

  /* Rahmenfarben */
  --border-color: #334155;

  /* Schatten (subtiler im Dark Mode) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

/* ===== Dark Theme Overrides ===== */

/* Header */
[data-theme="dark"] .header.scrolled {
  background-color: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);
}

[data-theme="dark"] .header.scrolled .nav-link {
  color: var(--text-primary);
}

[data-theme="dark"] .header.scrolled .logo-text {
  color: var(--text-primary);
}

[data-theme="dark"] .header.scrolled .mobile-toggle span {
  background-color: var(--text-primary);
}

/* Navigation Links - Better visibility in dark mode */
[data-theme="dark"] .nav-link {
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

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

[data-theme="dark"] .mobile-nav-link {
  color: #FFFFFF;
}

/* Hero Section - Improved text contrast for dark mode */
[data-theme="dark"] .hero-overlay {
  background: linear-gradient(135deg,
      rgba(2, 6, 23, 0.92) 0%,
      rgba(15, 23, 42, 0.85) 50%,
      rgba(2, 6, 23, 0.92) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* Safari support */
}

[data-theme="dark"] .hero-title {
  color: #FFFFFF;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 5px 20px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .hero-title .text-accent {
  color: #60A5FA;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .hero-subtitle {
  color: #E2E8F0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .hero .badge {
  background-color: rgba(96, 165, 250, 0.3);
  color: #93C5FD;
  border: 1px solid rgba(96, 165, 250, 0.5);
}

[data-theme="dark"] .hero .btn-outline {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .hero .btn-outline:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #FFFFFF;
}

/* Cards */
[data-theme="dark"] .card {
  background-color: #1E293B;
  border: 1px solid #334155;
}

[data-theme="dark"] .service-card {
  background: #1E293B;
  border-color: #334155;
}

[data-theme="dark"] .service-card:hover {
  border-color: var(--primary-light);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
}

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

/* Forms */
[data-theme="dark"] .form-control {
  background-color: #1E293B;
  border-color: #475569;
  color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
}

[data-theme="dark"] .form-control::placeholder {
  color: #64748B;
}

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

/* Contact Form Card */
[data-theme="dark"] .contact-form-card {
  background: #1E293B;
}

/* Sections */
[data-theme="dark"] .section-light {
  background-color: #1E293B;
}

[data-theme="dark"] .trust-section {
  background-color: #1E293B;
}

[data-theme="dark"] .process-section {
  background-color: #0F172A;
}

[data-theme="dark"] .faq-section {
  background-color: #1E293B;
}

[data-theme="dark"] .stats-section {
  background-color: #0F172A;
  border-color: #334155;
}

/* Why Section (Vorteile) - Consistent styling controlled by pages.css */
/* We only override colors here, not geometry/padding */
[data-theme="dark"] .why-section {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
}

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

[data-theme="dark"] .why-section .section-subtitle {
  color: #CBD5E1 !important;
}

[data-theme="dark"] .why-item {
  background: rgba(30, 41, 59, 0.6);
  border-color: #334155;
}

[data-theme="dark"] .why-item h3 {
  color: #FFFFFF;
}

[data-theme="dark"] .why-item p {
  color: #CBD5E1;
}

[data-theme="dark"] .why-icon {
  background: rgba(0, 102, 204, 0.3);
}

/* Innovation/Technology Card - Better contrast */
[data-theme="dark"] .card[style*="primary-light"],
[data-theme="dark"] .services-section .card {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] .services-section .card h3 {
  color: #FFFFFF;
}

[data-theme="dark"] .services-section .card p {
  color: #CBD5E1 !important;
}

[data-theme="dark"] .trust-features li span {
  color: #E2E8F0;
}

[data-theme="dark"] .trust-features li strong {
  color: #FFFFFF;
}

[data-theme="dark"] .text-muted {
  color: #94A3B8 !important;
}

/* Logo - Consistent size in both themes using content-box */
.logo-img {
  box-sizing: content-box !important;
  /* Forces padding to be additive, not subtractive */
  max-height: 50px;
  width: auto;
  border-radius: 8px;
  padding: 4px;
  /* Constant padding in both modes */
  background-color: transparent;
  /* Transparent in light mode by default */
  transition: background-color var(--transition-base);
}

/* Footer logo - same styling */
.footer .logo-img {
  padding: 6px;
}

/* Dark mode: adds white background but size stays same due to defined padding/content-box */
[data-theme="dark"] .logo-img {
  background-color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .footer .logo-img {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Trust Features */
[data-theme="dark"] .trust-features li {
  border-bottom-color: #334155;
}

/* FAQ */
[data-theme="dark"] .faq-item {
  border-bottom-color: #334155;
}

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

[data-theme="dark"] .faq-question:hover {
  color: var(--accent);
}

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

[data-theme="dark"] .footer-bottom {
  border-top-color: #1E293B;
}

/* Legal Pages */
[data-theme="dark"] .legal-content h2 {
  border-bottom-color: #334155;
}

[data-theme="dark"] .legal-box {
  background: #1E293B;
  border-left-color: var(--primary);
}

/* Region Badge */
[data-theme="dark"] .region-badge {
  background-color: rgba(40, 167, 69, 0.2);
  color: #4ADE80;
}

/* Cookie Banner */
[data-theme="dark"] .cookie-banner {
  background-color: #1E293B;
  border-top: 1px solid #334155;
}

/* Page Header - bleibt immer gleich wegen Gradient */

/* Alerts */
[data-theme="dark"] .alert-success {
  background-color: rgba(40, 167, 69, 0.2);
  color: #4ADE80;
  border-color: rgba(40, 167, 69, 0.3);
}

[data-theme="dark"] .alert-error {
  background-color: rgba(220, 53, 69, 0.2);
  color: #F87171;
  border-color: rgba(220, 53, 69, 0.3);
}

[data-theme="dark"] .alert-info {
  background-color: rgba(0, 102, 204, 0.2);
  color: #60A5FA;
  border-color: rgba(0, 102, 204, 0.3);
}

/* ===== Theme Toggle Button ===== */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--white);
  margin-left: var(--space-2);
}

.header.scrolled .theme-toggle {
  color: var(--text-primary);
}

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

.theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.header.scrolled .theme-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 22px;
  height: 22px;
  transition: transform var(--transition-base);
}

.theme-toggle:hover svg {
  transform: rotate(15deg);
}

/* Icon Visibility */
.theme-toggle .icon-sun {
  display: none;
}

.theme-toggle .icon-moon {
  display: block;
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* Mobile Theme Toggle */
.mobile-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-6);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-lg);
  color: var(--white);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mobile-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}

.mobile-theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* Smooth transition for theme changes */
body,
.card,
.service-card,
.form-control,
.header,
.footer,
.section-light,
.trust-section,
.faq-section {
  transition: background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base);
}