/* ═══════════════════════════════════════
   LIGHT MODE  —  [data-theme="light"]
   Default = dark (already inline-styled)
═══════════════════════════════════════ */

/* ── 1. CSS variable overrides ── */
[data-theme="light"] {
  --black:     #F0EFEC;
  --dark:      #E8E6E3;
  --grey-mid:  #DDD9D4;
  --off-white: #FAFAF8;
}

/* ── 2. Body ── */
[data-theme="light"] body {
  background: #F0EFEC;
  color: #111111;
}

/* ── 3. Navbar ── */
/* Always show light glass in light mode (prevents dark hero showing through) */
[data-theme="light"] #navbar {
  background: rgba(240,239,236,.85) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important;
}
[data-theme="light"] #navbar.scrolled {
  background: rgba(240,239,236,.92) !important;
  border-bottom-color: rgba(0,0,0,.10) !important;
}
[data-theme="light"] .nav-link {
  color: rgba(0,0,0,.5) !important;
}
[data-theme="light"] .nav-link:hover {
  color: rgba(0,0,0,.9) !important;
}

/* ── 4. Mobile menu ── */
[data-theme="light"] #mobile-nav {
  background: rgba(240,239,236,.97) !important;
}
[data-theme="light"] #mobile-nav .border-t {
  border-color: rgba(0,0,0,.08) !important;
}
[data-theme="light"] #mobile-nav .nav-link {
  color: rgba(0,0,0,.6) !important;
}
[data-theme="light"] #mobile-nav .nav-link:hover {
  color: #111 !important;
}
[data-theme="light"] button[onclick="toggleMobile()"] {
  color: rgba(0,0,0,.5) !important;
}
[data-theme="light"] button[onclick="toggleMobile()"]:hover {
  color: #111 !important;
}

/* ── 5. Dark cards → light surface ── */
[data-theme="light"] .dark-card {
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(0,0,0,.09) !important;
  color: #111111 !important;
}
[data-theme="light"] .dark-card:hover {
  background: rgba(0,0,0,.07) !important;
  border-color: rgba(0,0,0,.15) !important;
}
[data-theme="light"] .dark-card .text-white,
[data-theme="light"] .dark-card p,
[data-theme="light"] .dark-card div,
[data-theme="light"] .dark-card .f-display {
  color: #111111 !important;
}
[data-theme="light"] .dark-card .text-sm {
  color: #555555 !important;
}
[data-theme="light"] .dark-card .text-xs {
  color: #777777 !important;
}

/* ── 6. Check items (dienst pages) ── */
[data-theme="light"] .check-item {
  border-bottom-color: rgba(0,0,0,.06) !important;
}
[data-theme="light"] .check-item .text-white,
[data-theme="light"] .check-item p {
  color: #111111 !important;
}
[data-theme="light"] .check-item .text-xs {
  color: #777777 !important;
}

/* ── 7. Content sections — broad text override ── */
/* Targets any section NOT a photo hero */
[data-theme="light"] section:not(.hero-wrap):not(.pt-32) .text-white {
  color: #111111 !important;
}
[data-theme="light"] section:not(.hero-wrap):not(.pt-32) p[style*="255,255,255"] {
  color: #555555 !important;
}
[data-theme="light"] section:not(.hero-wrap):not(.pt-32) span[style*="255,255,255"] {
  color: #777777 !important;
}
[data-theme="light"] section:not(.hero-wrap):not(.pt-32) div[style*="255,255,255"] {
  color: #555555 !important;
}
[data-theme="light"] section:not(.hero-wrap):not(.pt-32) a[style*="255,255,255"] {
  color: var(--gold) !important;
}

/* ── 8. Hero photo sections — KEEP DARK ── */
/* Index hero (has photo bg + dark gradient) */
[data-theme="light"] .hero-wrap .text-white { color: rgba(255,255,255,.95) !important; }
[data-theme="light"] .hero-wrap p[style*="255,255,255"] { color: rgba(255,255,255,.55) !important; }
[data-theme="light"] .hero-wrap span[style*="255,255,255"] { color: rgba(255,255,255,.55) !important; }

/* Page heroes on dienst/over-ons/artikel — identified by pt-32 class */
[data-theme="light"] section.pt-32 .text-white { color: rgba(255,255,255,.95) !important; }
[data-theme="light"] section.pt-32 p[style*="255,255,255"] { color: rgba(255,255,255,.55) !important; }
[data-theme="light"] section.pt-32 span[style*="255,255,255"] { color: rgba(255,255,255,.35) !important; }

/* ── 9. Footer — always dark ── */
[data-theme="light"] footer {
  background: #1A1A1E !important;
}

/* ── 10. Blog cards ── */
[data-theme="light"] .blog-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.07) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
[data-theme="light"] .blog-card h3 { color: #111111 !important; }
[data-theme="light"] .blog-card p  { color: #555555 !important; }

/* ── 11. Service cards ── */
[data-theme="light"] .svc-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* ── 12. Feature cards ── */
[data-theme="light"] .feat-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
}

/* ── 13. Form inputs ── */
[data-theme="light"] .form-input {
  background: rgba(0,0,0,.05) !important;
  border-color: rgba(0,0,0,.15) !important;
  color: #111111 !important;
}
[data-theme="light"] .form-input::placeholder { color: rgba(0,0,0,.35) !important; }
[data-theme="light"] select.form-input option { background: #F0EFEC; color: #111111; }

/* ── 14. Ghost / outline-white buttons ── */
[data-theme="light"] .btn-ghost,
[data-theme="light"] .btn-outline-white {
  border-color: rgba(0,0,0,.22) !important;
  color: rgba(0,0,0,.7) !important;
}
[data-theme="light"] .btn-ghost:hover,
[data-theme="light"] .btn-outline-white:hover {
  border-color: rgba(0,0,0,.5) !important;
  color: #111 !important;
}

/* ── 15. Value cards (over-ons) ── */
[data-theme="light"] .value-card {
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(0,0,0,.08) !important;
}
[data-theme="light"] .value-card:hover {
  background: rgba(0,0,0,.07) !important;
  border-color: rgba(201,160,56,.3) !important;
}
[data-theme="light"] .value-card .text-white,
[data-theme="light"] .value-card p,
[data-theme="light"] .value-card h3 {
  color: #111111 !important;
}
[data-theme="light"] .value-card .text-sm { color: #555555 !important; }

/* ── 16. Dividers ── */
[data-theme="light"] .rule-dark { background: rgba(0,0,0,.10) !important; }

/* ── 17. Scrollbar ── */
[data-theme="light"] ::-webkit-scrollbar-track { background: #E8E6E3; }

/* ── 18. Blog filter buttons ── */
[data-theme="light"] .filter-btn {
  border-color: rgba(0,0,0,.14) !important;
  color: #555 !important;
  background: transparent !important;
}
[data-theme="light"] .filter-btn.active,
[data-theme="light"] .filter-btn:hover {
  background: var(--gold) !important;
  color: #111 !important;
  border-color: var(--gold) !important;
}

/* ── 19. Site logo ── */
[data-theme="light"] .site-logo { color: #111111 !important; }

/* ── 20. Theme toggle button (navbar) ── */
#theme-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 2px;
  cursor: pointer;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.65);
  transition: color .2s, border-color .2s, background .2s;
  flex-shrink: 0;
}
#theme-toggle:hover {
  color: #fff;
  border-color: rgba(255,255,255,.55);
}
[data-theme="light"] #theme-toggle {
  border-color: rgba(0,0,0,.18) !important;
  color: rgba(0,0,0,.6) !important;
  background: none !important;
}
[data-theme="light"] #theme-toggle:hover {
  border-color: rgba(0,0,0,.45) !important;
  color: #111 !important;
}

/* ── 21. Hamburger icon ── */
[data-theme="light"] #ico-open,
[data-theme="light"] #ico-close { color: rgba(0,0,0,.55) !important; }

/* ── 22. Article body (blog-porsche-cayenne-hybrid.html) ── */
[data-theme="light"] .article-body p           { color: #444444 !important; }
[data-theme="light"] .article-body h2           { color: #111111 !important; }
[data-theme="light"] .article-body h3           { color: #222222 !important; }
[data-theme="light"] .article-body ul li        { color: #444444 !important; }
[data-theme="light"] .article-body strong       { color: #111111 !important; }
[data-theme="light"] .article-body .callout     {
  background: rgba(201,160,56,.06) !important;
  border-color: rgba(201,160,56,.3) !important;
}
[data-theme="light"] .article-body .callout p   { color: #444444 !important; }

/* ── 23. Prose ── */
[data-theme="light"] .prose       { color: #222222 !important; }
[data-theme="light"] .prose h1,
[data-theme="light"] .prose h2,
[data-theme="light"] .prose h3,
[data-theme="light"] .prose h4    { color: #111111 !important; }
[data-theme="light"] .prose p,
[data-theme="light"] .prose li    { color: #333333 !important; }
[data-theme="light"] .prose blockquote {
  border-color: var(--gold) !important;
  background: rgba(0,0,0,.03) !important;
  color: #444 !important;
}
[data-theme="light"] .prose code  { background: rgba(0,0,0,.06) !important; color: #222 !important; }

/* ── 24. Page-hero sections (dienst/over-ons) — keep dark ── */
[data-theme="light"] .page-hero,
[data-theme="light"] section.page-hero { background: #1A1A1E !important; }

/* ── 25. Blog article sidebar ── */
[data-theme="light"] aside .dark-card p,
[data-theme="light"] aside .dark-card .text-white { color: #111111 !important; }

/* ── 26. Floating theme toggle (bottom of page) ── */
#theme-toggle-float {
  position: fixed;
  bottom: 1.75rem;
  left: 1.75rem;
  z-index: 800;
  width: 40px;
  height: 40px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(26,26,30,.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,.65);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s, border-color .2s, background .2s, transform .15s;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
#theme-toggle-float:hover {
  color: #fff;
  border-color: rgba(255,255,255,.55);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
}
[data-theme="light"] #theme-toggle-float {
  background: rgba(240,239,236,.90) !important;
  border-color: rgba(0,0,0,.18) !important;
  color: rgba(0,0,0,.6) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.12) !important;
}
[data-theme="light"] #theme-toggle-float:hover {
  border-color: rgba(0,0,0,.4) !important;
  color: #111 !important;
}
/* Hide on mobile (bottom-left conflicts with float-cta on small screens) */
@media (max-width: 640px) {
  #theme-toggle-float { display: none !important; }
}