/* ==========================================================================
   Light / dark theme — hand-written layer (loads AFTER theme-dark.css).
   theme-dark.css (generated) handles every colour rule in the stylesheets;
   this file covers what a stylesheet compiler can't see: inline style="",
   Tailwind utility classes in templates, images, logos and form controls.
   The theme is chosen by /js/theme.js (data-theme on <html>).
   ========================================================================== */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

html[data-theme="dark"] body {
  background-color: #0b1220 !important;
  color: #e8edf5;
}
html[data-theme="dark"] ::selection { background: #166534; color: #fff; }

/* ── Logo: white version on dark (same artwork) ── */
html[data-theme="dark"] img[data-brand-logo],
html[data-theme="dark"] .mea-stamp-logo,
html[data-theme="dark"] .header-logo img.logo-desktop,
html[data-theme="dark"] .bento-logo-img {
  content: url("/img/logo/logo-main-white.svg");
}
html[data-theme="dark"] .header-logo img.logo-mobile { filter: brightness(0) invert(1); }
html[data-theme="dark"] .ops-skip, html[data-theme="dark"] .no-dark { filter: none; }

/* ── Photos slightly softer so they don't glare; illustrations dimmed ── */
html[data-theme="dark"] img:not([src$=".svg"]):not([data-brand-logo]) { filter: brightness(0.92); }
html[data-theme="dark"] .hero-scene-svg { filter: brightness(0.8) saturate(0.95); }
html[data-theme="dark"] .mea-licence-logo img { filter: none; }

/* ── Inline style="" colours used in templates and app.js ── */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"] { background: #111a2c !important; }
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background:#f9fafb"],
html[data-theme="dark"] [style*="background:#f1f5f9"],
html[data-theme="dark"] [style*="background:#f0f0f0"],
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background: #f1f5f9"] { background: #18233a !important; }
html[data-theme="dark"] [style*="background:#f0fdf4"],
html[data-theme="dark"] [style*="background: #f0fdf4"] { background: #0f2a1b !important; }
html[data-theme="dark"] [style*="background:#fff1f2"] { background: #3a1219 !important; }
html[data-theme="dark"] [style*="color:#166534"], html[data-theme="dark"] [style*="color: #166534"],
html[data-theme="dark"] [style*="color:#15803d"], html[data-theme="dark"] [style*="color: #15803d"],
html[data-theme="dark"] [style*="color:var(--color-primary)"], html[data-theme="dark"] [style*="color: var(--color-primary)"],
html[data-theme="dark"] [style*="color:var(--mea-green-primary)"] { color: #4ade80 !important; }
html[data-theme="dark"] [style*="color:#1a1a1a"], html[data-theme="dark"] [style*="color:#111827"],
html[data-theme="dark"] [style*="color:#1e293b"], html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #333"], html[data-theme="dark"] [style*="color:#0f172a"] { color: #e8edf5 !important; }
html[data-theme="dark"] [style*="color:#334155"], html[data-theme="dark"] [style*="color:#475569"],
html[data-theme="dark"] [style*="color:#4b5563"], html[data-theme="dark"] [style*="color:#64748b"],
html[data-theme="dark"] [style*="color:#666"], html[data-theme="dark"] [style*="color: #4b5563"],
html[data-theme="dark"] [style*="color: #475569"], html[data-theme="dark"] [style*="color: #64748b"] { color: #a8b4c7 !important; }
html[data-theme="dark"] [style*="color:#9f1239"], html[data-theme="dark"] [style*="color:#be123c"] { color: #fda4af !important; }
html[data-theme="dark"] [style*="border-color:#bbf7d0"], html[data-theme="dark"] [style*="border:1px solid #e2e8f0"],
html[data-theme="dark"] [style*="border: 1px solid #e2e8f0"], html[data-theme="dark"] [style*="border:1px solid #bbf7d0"] { border-color: #2a3850 !important; }

/* ── Tailwind utility classes still used in a few templates ── */
html[data-theme="dark"] .bg-white { background-color: #111a2c !important; }
html[data-theme="dark"] .bg-gray-100, html[data-theme="dark"] .bg-gray-200 { background-color: #18233a !important; }
html[data-theme="dark"] .text-black, html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800, html[data-theme="dark"] .text-gray-700 { color: #e8edf5 !important; }
html[data-theme="dark"] .text-gray-600, html[data-theme="dark"] .text-gray-500 { color: #a8b4c7 !important; }
html[data-theme="dark"] .text-blue-600 { color: #93c5fd !important; }
html[data-theme="dark"] .border-gray-200, html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .border-neutral-300 { border-color: #2a3850 !important; }
html[data-theme="dark"] .prose { color: #d6dde8; }
html[data-theme="dark"] .prose :where(h1, h2, h3, h4, strong, a) { color: #f1f5f9; }

/* ── Form controls ── */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: #111a2c;
  color: #e8edf5;
  border-color: #2a3850;
}
html[data-theme="dark"] ::placeholder { color: #7d8aa0; opacity: 1; }

/* ── Cookie banner (inline-styled in layouts/partials/cookie-banner.html) ── */
html[data-theme="dark"] #cookie-decline { color: #e8edf5 !important; border-color: #2a3850 !important; }

/* ── Theme switch (classic header button; the redesign uses the "Aa" panel) ── */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-right: 6px;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle { border-color: #2a3850; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
.homepage .site-header .theme-toggle { color: #fff; border-color: rgba(255, 255, 255, 0.5); }

/* ── Component fixes found by the contrast audit ── */
/* "Call" button uses var(--color-dark) as its background, which is a TEXT colour in dark */
html[data-theme="dark"] .pd-btn-call { background: #1e293b !important; color: #fff !important; border: 1px solid #334155; }
html[data-theme="dark"] .pd-btn-call:hover { background: #273449 !important; }
/* Components whose BACKGROUND is var(--color-dark) (a text colour in dark mode) */
html[data-theme="dark"] .header-contact-btn,
html[data-theme="dark"] .subscribe-form button,
html[data-theme="dark"] .social-link:hover,
html[data-theme="dark"] .scroll-top,
html[data-theme="dark"] .pwa-ios-tooltip,
html[data-theme="dark"] .trust-ticker { background: #1e293b !important; color: #f1f5f9 !important; }
html[data-theme="dark"] .header-contact-btn:hover { background: #273449 !important; }

/* 404 button: --color-dark turns light in dark mode, so give it the brand green (5:1 with white) */
html[data-theme="dark"] .not-found-btn { background: #15803d; color: #ffffff; }
html[data-theme="dark"] .not-found-btn:hover { background: #166534; }