/* 
  Light Mode Theme for SmartUndo.de
  This file overrides the default dark mode colors when the .light-mode class is added to the body.
*/

body.light-mode {
  background-color: #f8f9fa;
  /* Light gray background */
  color: #212529;
  /* Dark gray text */
}

/* --- Hero Section & Backgrounds --- */
.light-mode .sites-embed-wrapper,
.light-mode .text-section,
.light-mode .hero-section {
  background-color: #f8f9fa;
  /* Ensure wrappers match body */
}

.light-mode .animated-bg {
  /* Softer, lighter animated background gradient with distinct blue */
  background: radial-gradient(ellipse at 50% 50%, #d1e5ff 0%, #f0f6ff 40%, #ffffff 80%);
}

.light-mode .ring {
  border-color: rgba(90, 24, 154, 0.15);
  /* Darker purple rings */
}

/* --- Typography --- */
.light-mode h1,
.light-mode h2,
.light-mode .guide-text strong,
.light-mode .tip-card strong,
.light-mode .tool-link-card h4,
.light-mode .tip-card h4 {
  color: #111827;
  /* Near black heading text */
}

.light-mode h1 {
  /* Ensure gradient text looks good on light or just use solid color. Solid color might be better */
  background: linear-gradient(135deg, #1f2937 0%, #5a189a 60%, #005bb5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.light-mode .subtitle,
.light-mode .scroll-indicator-inline span {
  color: #4b5563;
  /* Medium gray */
}

.light-mode .guide-text,
.light-mode .tip-card p,
.light-mode .tip-card li,
.light-mode .feature-list li,
.light-mode .intro-text,
.light-mode .disclaimer-text,
.light-mode .tool-link-card p {
  color: #374151;
  /* Darker text for better readability */
}

.light-mode .form-group label {
  color: #4b5563;
}

.light-mode .form-group input,
.light-mode .form-group textarea {
  color: #111827;
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
}

/* --- Navigation --- */
.light-mode .smart-nav {
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  /* Add slight shadow */
}

.light-mode .nav-logo-text {
  color: #111827;
}

.light-mode .nav-link {
  color: #4b5563;
}

.light-mode .nav-link:hover,
.light-mode .nav-link.active {
  color: #000000;
  text-shadow: none;
  /* Remove glow on light mode */
}

/* Hamburger Menu Icon */
.light-mode .hamburger span {
  background-color: #111827;
}

/* Mobile Menu */
.light-mode .mobile-menu {
  background-color: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.light-mode .mobile-menu .nav-link {
  color: #111827;
}

/* Base Links */
.light-mode a {
  color: #005bb5;
}

.light-mode .tip-card a,
.light-mode .guide-text a,
.light-mode .tool-content a {
  color: #004488;
}

/* --- Buttons & Links --- */
.light-mode .next-step-btn,
.light-mode .tool-btn {
  background-color: rgba(90, 24, 154, 0.1);
  color: #5a189a;
  /* Dark purple text */
  border-color: rgba(90, 24, 154, 0.3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.light-mode .next-step-btn:hover,
.light-mode .tool-btn:hover {
  background-color: rgba(90, 24, 154, 0.15);
  border-color: #5a189a;
  box-shadow: 0 4px 15px rgba(90, 24, 154, 0.2);
  color: #000000;
}

/* Action button specifically (Impressum, etc) */
.light-mode .action-btn {
  background-color: rgba(90, 24, 154, 0.1);
  color: #5a189a;
  border-color: rgba(90, 24, 154, 0.3);
}

.light-mode .action-btn:hover {
  background-color: rgba(90, 24, 154, 0.15);
  border-color: #5a189a;
  color: #000000;
}


/* --- Visual Elements & Cards (SmartFacts / Prompts / Tools) --- */
.light-mode .section-divider {
  background: linear-gradient(90deg, transparent 0%, rgba(0, 91, 181, 0.3) 30%, rgba(0, 91, 181, 0.3) 70%, transparent 100%);
  box-shadow: none;
}

.light-mode .indicator-dash {
  background-color: #005bb5;
  box-shadow: none;
}

.light-mode .scroll-line {
  background: rgba(0, 0, 0, 0.1) !important;
}

.light-mode .scroll-line::before {
  background: #005bb5 !important;
}

/* Cards (Tips / Prompts / Tools) */
.light-mode .tip-card,
.light-mode .prompt-card,
.light-mode .tool-link-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.light-mode .tip-card:hover,
.light-mode .prompt-card:hover,
.light-mode .tool-link-card:hover {
  border-color: rgba(0, 91, 181, 0.4);
  background: #fafbfa;
  /* Slightly different white to show hover */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.light-mode .tip-card:target {
  border-color: #005bb5;
  background: rgba(0, 91, 181, 0.05);
  box-shadow: 0 0 15px rgba(0, 91, 181, 0.1);
}

/* Headings inside cards */
.light-mode .tip-card h3,
.light-mode .prompt-card h3 {
  color: #005bb5;
}

.light-mode .tip-card h3 span {
  background: #005bb5;
  color: #ffffff;
}

.light-mode .prompt-number {
  color: #005bb5;
  background: rgba(0, 91, 181, 0.1);
}

/* Highlighted Text */
.light-mode .highlight-text {
  background: rgba(0, 91, 181, 0.1);
  color: #005bb5;
}


/* --- SmartFacts Charts & Timeline --- */
.light-mode .calc-box {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.light-mode .calc-title {
  color: #005bb5;
}

.light-mode .calc-step {
  background: #f8f9fa;
  border-color: rgba(0, 0, 0, 0.1);
  color: #374151;
}

.light-mode .calc-operator {
  color: #111827;
}

.light-mode .calc-result {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #312e81;
  /* Dark indigo */
  box-shadow: none;
}

.light-mode .timeline::before {
  background: rgba(0, 0, 0, 0.1);
}

.light-mode .timeline-node {
  color: #4b5563;
}

.light-mode .node-dot {
  background: #ffffff;
  border-color: #005bb5;
  color: #005bb5;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.light-mode .timeline-node:hover .node-dot {
  background: #005bb5;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 91, 181, 0.3);
}

.light-mode .axis-label-opt1,
.light-mode .axis-title-opt1,
.light-mode .row-label-opt1 {
  color: #4b5563;
}

.light-mode .chart-axis-opt1 {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

.light-mode .axis-marker-opt1::after {
  background: rgba(0, 0, 0, 0.1);
}

.light-mode .bar-base-opt1 {
  background: #e5e7eb;
}

/* Modals */
.light-mode .modal-content {
  background-color: #ffffff;
  color: #111827;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.light-mode .modal-header h3 {
  color: #111827;
}

.light-mode .close-modal {
  color: #4b5563;
}

.light-mode .close-modal:hover {
  color: #111827;
}

/* --- Theme Toggle Switch Button UI --- */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.theme-switch-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s ease;
  color: #e0e0e0;
}

.theme-switch-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.light-mode .theme-switch-btn {
  color: #4b5563;
}

.light-mode .theme-switch-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #000000;
}

/* Moon icon visible in light mode (to switch to dark) */
.light-mode .icon-sun {
  display: none;
}

.light-mode .icon-moon {
  display: block;
}

/* Sun icon visible in dark mode (to switch to light) */
.icon-sun {
  display: block;
}

.icon-moon {
  display: none;
}

@media (max-width: 900px) {

  /* On mobile, place it before hamburger or inside menu */
  .theme-switch-wrapper.desktop-only {
    display: none;
  }

  .mobile-menu .theme-switch-wrapper {
    margin-left: 0;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    justify-content: flex-start;
  }

  .mobile-menu .theme-switch-btn {
    padding: 0;
    gap: 10px;
    font-size: var(--fs-body-large);
    color: #e0e0e0;
  }

  .light-mode .mobile-menu .theme-switch-wrapper {
    border-top-color: rgba(0, 0, 0, 0.1);
  }

  .light-mode .mobile-menu .theme-switch-btn {
    color: #111827;
  }
}

/* SVG Logo Fixes (Nav and Footer) */
.light-mode .footer-logo text {
  fill: #111827 !important;
}

.light-mode .footer-logo text:last-of-type {
  fill: #5a189a !important;
  /* Dark Purple */
}

.light-mode .nav-logo circle,
.light-mode .footer-logo circle {
  fill: #5a189a !important;
}

.light-mode .nav-logo path[stroke="#00aaff"],
.light-mode .footer-logo path[stroke="#00aaff"] {
  stroke: #005bb5 !important;
}

.light-mode .nav-logo stop[offset="50%"],
.light-mode .footer-logo stop[offset="50%"] {
  stop-color: #9d4edd !important;
}

.light-mode .nav-logo stop[offset="100%"],
.light-mode .footer-logo stop[offset="100%"] {
  stop-color: #005bb5 !important;
}

/* --- New UI Components (Phase 2) Light Mode --- */

/* 2. Sticky Back-to-Top Button */
.light-mode #back-to-top {
  background-color: #005bb5;
  color: #ffffff;
}

.light-mode #back-to-top:hover {
  background-color: #004488;
}



/* 4. Footer */
.light-mode .smart-footer {
  background-color: #ffffff;
  border-top-color: rgba(0, 0, 0, 0.1);
}

.light-mode .footer-links a {
  color: #4b5563;
}

.light-mode .footer-links a:hover {
  color: #005bb5;
}

.light-mode .footer-bottom {
  color: #888;
  border-top-color: rgba(0, 0, 0, 0.1);
}

/* 6. Smart Prompts specific components */
.light-mode .copy-btn {
  background: #f0f4f8;
  color: #005bb5;
  border-color: rgba(0, 91, 181, 0.3);
}

.light-mode .copy-btn:hover {
  background: #e1eaf2;
  border-color: #005bb5;
  color: #004488;
}

.light-mode .copy-btn.success {
  background: rgba(46, 204, 113, 0.1);
  border-color: #27ae60;
  color: #27ae60;
}

.light-mode .prompt-box {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #334155;
  scrollbar-color: #005bb5 #f8fafc;
}

.light-mode .prompt-box::-webkit-scrollbar-track {
  background: #f8fafc;
}

.light-mode .prompt-box::-webkit-scrollbar-thumb {
  background-color: #005bb5;
}

/* --- Light Mode for Info Boxes --- */
body.light-mode .info-box-danger {
  background: rgba(166, 77, 255, 0.08);
  /* slightly higher opacity for visibility on white */
  border-color: #d1d5db;
  /* standard light mode border */
  border-left: 4px solid #a64dff;
  /* purple for better contrast */
}

body.light-mode .info-box-danger:hover {
  background: rgba(166, 77, 255, 0.12);
  border-color: #a64dff;
}

body.light-mode .info-box-success {
  background: rgba(77, 166, 255, 0.08);
  border-color: #d1d5db;
  border-left: 4px solid #0077ff;
  /* darker blue/cyan for better contrast */
}

body.light-mode .info-box-success:hover {
  background: rgba(77, 166, 255, 0.12);
  border-color: #0077ff;
}

body.light-mode .info-box-text {
  color: #374151;
}

body.light-mode .info-box-heading--danger {
  color: #7c3aed;
}

body.light-mode .info-box-heading--success {
  color: #0077ff;
}

/* --- Light Mode for Headline Icons (SmartFacts) --- */
body.light-mode .headline-icon {
  background-color: rgba(0, 91, 181, 0.08);
  border-color: #005bb5;
  box-shadow: 0 4px 15px rgba(0, 91, 181, 0.1);
}

/* --- Light Mode for Calc-Step Highlight (SmartFacts) --- */
body.light-mode .calc-step--highlight {
  color: #005bb5;
  border-bottom-color: #005bb5;
}

/* --- Light Mode for Footer Disclaimer --- */
body.light-mode .footer-disclaimer {
  color: #6b7280;
}

body.light-mode .page-disclaimer-wrapper {
  background-color: #f0f1f3;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* --- Light Mode for Legal Warning Banner (SmartPrompts) --- */
body.light-mode .legal-warning-banner {
  background: rgba(220, 38, 38, 0.08);
  /* slight reddish tint */
  border-left-color: #dc2626;
  /* clear red border */
}

body.light-mode .legal-warning-banner p {
  color: #1f2937;
  /* readable text */
}

/* --- Light Mode for Disclaimer Texts (SmartTools) --- */
body.light-mode .checklist-legal-note,
body.light-mode .disclaimer-text {
  color: #6b7280;
}

body.light-mode .checklist-legal-note {
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* --- Light Mode for External Link Icons (SmartTools) --- */
body.light-mode .tool-link-card .external-link-icon svg {
  stroke: #005bb5;
}