/* =====================================================================
   Dark theme. Loaded after ds.css, buttons.css and map-explorer.css.
   Activated by <html data-theme="dark">, which theme-init.js sets from the
   visitor's choice (light, dark, or the operating system's setting).

   1. Tokens: the --ds-* neutrals and tints are redefined; --mx-* (map
      explorer) aliases them and follows. Brand fills (--wwf-*, buttons with
      white text) keep their light-theme values: white on #007932 is 5.6:1.
   2. Surfaces: rules in the older stylesheets that paint a hard-coded white
      or light grey are overridden one by one.
   Text on the page is at least 4.5:1, large text and UI parts 3:1.
   ===================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;

  --dk-bg: #0f1512;
  --ds-surface: #161e1a;
  --ds-surface-2: #1d2823;
  --ds-line: #34433b;
  --ds-ink-900: #eaf1ec;
  --ds-ink-700: #d3ddd6;
  --ds-ink-600: #bcc8c0;
  --ds-ink-500: #a3b1a8;

  --ds-green-text: #7fd69a;      /* green as text or outline on a dark surface: 9:1 on --ds-surface */
  --ds-green-800: #a9e6bc;       /* strong accent text, hover text */
  --ds-green-100: #28402f;
  --ds-green-50:  #1f3327;
  --ds-ochre-800: #ecc886;
  --ds-ochre-700: #e3b663;
  --ds-ochre-50:  #2f2814;
  --ds-danger-700: #ffa59c;
  --ds-danger-50:  #3b1f1d;
  --ds-focus: #8ec5ff;           /* 9:1 on --ds-surface */

  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .35);
  --ds-shadow-lg: 0 12px 28px rgba(0, 0, 0, .55), 0 4px 8px rgba(0, 0, 0, .4);

  --wwf-focus: #8ec5ff;
  --wwf-orange-text: #ffb066;
}

/* The map explorer keeps its own names: re-point the ones that were fixed colours. */
:root[data-theme="dark"] .mx-app {
  color-scheme: dark;
  --mx-color-control-border: #8a9a90;
  --mx-color-primary-strong: var(--ds-green-800);
  --mx-color-warn: var(--ds-ochre-800);
  --mx-color-scrim: rgba(0, 0, 0, .65);
  --mx-shadow-panel: -8px 0 24px rgba(0, 0, 0, .5);
  --mx-shadow-sheet: 0 -8px 24px rgba(0, 0, 0, .55);
  --mx-axis: var(--ds-ink-500);
}
/* --mx-map-* stay as they are: the basemap tiles are light in both themes, so outlines, halos and labels must be too. */

/* ---------- Page and chrome ---------- */
:root[data-theme="dark"] body { background-color: var(--dk-bg); color: var(--ds-ink-900); }
:root[data-theme="dark"] header,
:root[data-theme="dark"] .header-top-bar { background-color: var(--dk-bg); }
:root[data-theme="dark"] .language-switcher,
:root[data-theme="dark"] .language-switcher.bg-white { background-color: transparent !important; }
:root[data-theme="dark"] .language-toggle,
:root[data-theme="dark"] .nav-link:hover,
:root[data-theme="dark"] .language-toggle:hover,
:root[data-theme="dark"] .nav-link.active { background-color: transparent; color: var(--ds-ink-900) !important; border-bottom-color: var(--ds-green-text); }
:root[data-theme="dark"] .navbar,
:root[data-theme="dark"] .navbar-fixed,
:root[data-theme="dark"] .navbar.is-stuck { background-color: var(--ds-surface) !important; }
:root[data-theme="dark"] .navbar-nav .nav-link,
:root[data-theme="dark"] ul.navbar-nav > li > a { color: var(--ds-ink-900); }
:root[data-theme="dark"] .navbar-nav .nav-link:hover:not(.active):not([aria-expanded="true"]) { color: var(--ds-ink-900) !important; }
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .mega-menu { background-color: var(--ds-surface-2); border-color: var(--ds-line); }
:where(:root[data-theme="dark"]) .dropdown-item { color: var(--ds-ink-900); }   /* hover and active states keep the site's own rules */

/* The brand logo is a dark mark on a light header: give it a light tile. */
:root[data-theme="dark"] .top-logo-link { background-color: #fff; border-radius: var(--ds-radius-md); }

/* ---------- Surfaces that were hard-coded ---------- */
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .key-feature,
:root[data-theme="dark"] .accordion .card-header,
:root[data-theme="dark"] .page-link { background-color: var(--ds-surface) !important; color: var(--ds-ink-900); border-color: var(--ds-line); }
:root[data-theme="dark"] .bg-light { background-color: var(--ds-surface-2) !important; }
:root[data-theme="dark"] .text-dark,
:root[data-theme="dark"] .text-body { color: var(--ds-ink-900) !important; }
:root[data-theme="dark"] .border,
:root[data-theme="dark"] hr { border-color: var(--ds-line) !important; }
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .custom-select,
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:root[data-theme="dark"] textarea { background-color: var(--ds-surface-2); color: var(--ds-ink-900); border-color: #8a9a90; }
:root[data-theme="dark"] ::placeholder { color: var(--ds-ink-500); opacity: 1; }
:root[data-theme="dark"] .table { color: var(--ds-ink-900); }
:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] #doctable tbody tr:hover { border-color: var(--ds-line); }
:root[data-theme="dark"] #doctable tbody tr:hover { background-color: var(--ds-surface-2); }
:root[data-theme="dark"] .ds-skeleton { background: linear-gradient(90deg, var(--ds-surface-2) 25%, var(--ds-line) 37%, var(--ds-surface-2) 63%); background-size: 400% 100%; }
:root[data-theme="dark"] .ds-alert--error { border-color: #7a3a36; }
:root[data-theme="dark"] .ds-alert--success { border-color: #3d6b4b; }
:root[data-theme="dark"] .ds-choice span,
:root[data-theme="dark"] .ds-field input { border-color: #8a9a90; }

/* Focus ring halo was white */
:root[data-theme="dark"] a:focus-visible, :root[data-theme="dark"] button:focus-visible,
:root[data-theme="dark"] input:focus-visible, :root[data-theme="dark"] select:focus-visible,
:root[data-theme="dark"] textarea:focus-visible, :root[data-theme="dark"] summary:focus-visible,
:root[data-theme="dark"] [tabindex]:focus-visible, :root[data-theme="dark"] .btn:focus-visible { box-shadow: 0 0 0 2px var(--dk-bg) !important; }

/* ---------- Cookie banner (third-party markup, styled in ds.css) ---------- */
:root[data-theme="dark"] #termsfeed-com---nb { background: var(--ds-surface) !important; color: var(--ds-ink-900) !important; box-shadow: 0 -4px 20px rgba(0, 0, 0, .6); }

/* ---------- Map explorer: pieces with fixed colours ---------- */
:root[data-theme="dark"] .mx-app .mx-skel { background: linear-gradient(90deg, var(--mx-color-surface-2) 25%, var(--ds-line) 37%, var(--mx-color-surface-2) 63%); background-size: 400% 100%; }
:root[data-theme="dark"] body.mx-page nav.navbar .navbar-collapse { background: var(--ds-surface); }

/* ---------- Native widgets and media ---------- */
:root[data-theme="dark"] img:not([src$=".svg"]):not(.no-dim) { filter: brightness(.92); }
:root[data-theme="dark"] .mx-app img,
:root[data-theme="dark"] .mx-app canvas { filter: none; }

/* ---------- Light image tiles become plain dark surfaces ---------- */
:root[data-theme="dark"] .header-top-bar,
:root[data-theme="dark"] .white-motif-bg { background-image: none !important; background-color: var(--dk-bg); }

/* ---------- Text that was fixed black or a brand colour ---------- */
:root[data-theme="dark"] .nav-link,
:root[data-theme="dark"] .navbar-nav .nav-link,
:root[data-theme="dark"] .text-black { color: var(--ds-ink-900) !important; }
:root[data-theme="dark"] .text-green,
:root[data-theme="dark"] .text-success,
:root[data-theme="dark"] .text-primary { color: var(--ds-green-text) !important; }
:root[data-theme="dark"] .text-olive { color: #c5d06a !important; }
:root[data-theme="dark"] .text-brown,
:root[data-theme="dark"] .text-warning { color: var(--ds-ochre-700) !important; }
:root[data-theme="dark"] .text-danger,
:root[data-theme="dark"] .text-red { color: var(--ds-danger-700) !important; }
:root[data-theme="dark"] .text-orange { color: var(--wwf-orange-text) !important; }
:root[data-theme="dark"] .text-info,
:root[data-theme="dark"] .text-blue { color: #6cc8e0 !important; }
:root[data-theme="dark"] .text-berry { color: #d79be3 !important; }
:root[data-theme="dark"] .text-secondary { color: var(--ds-ink-600) !important; }
:where(:root[data-theme="dark"]) :is(h1, h2, h3, h4, h5, h6) { color: var(--ds-ink-900); }
:where(:root[data-theme="dark"]) a { color: var(--ds-green-text); }          /* zero specificity: any component rule wins */
:where(:root[data-theme="dark"]) a:hover { color: var(--ds-green-800); }

/* Cookie banner copy is set to #111 by its own stylesheet */
:root[data-theme="dark"] #termsfeed-com---nb .cc-nb-title,
:root[data-theme="dark"] #termsfeed-com---nb .cc-nb-text { color: var(--ds-ink-900) !important; }

/* ---------- Inline text colours in templates (pillar cards, headings) ---------- */
:root[data-theme="dark"] [style*="color: #a85400"], :root[data-theme="dark"] [style*="color:#a85400"] { color: #ffb066 !important; }
:root[data-theme="dark"] [style*="color: #646b1f"], :root[data-theme="dark"] [style*="color:#646b1f"] { color: #c5d06a !important; }
:root[data-theme="dark"] [style*="color: #007373"], :root[data-theme="dark"] [style*="color:#007373"] { color: #5fd0d0 !important; }
:root[data-theme="dark"] [style*="color: #552f25"], :root[data-theme="dark"] [style*="color:#552f25"] { color: #e0a998 !important; }
:root[data-theme="dark"] [style*="color: #9a681c"], :root[data-theme="dark"] [style*="color:#9a681c"] { color: var(--ds-ochre-700) !important; }
:root[data-theme="dark"] [style*="color: #000"], :root[data-theme="dark"] [style*="color:#000"] { color: var(--ds-ink-900) !important; }
:root[data-theme="dark"] [style*="color: var(--wwf-brown)"], :root[data-theme="dark"] [style*="color:var(--wwf-brown)"] { color: var(--ds-ochre-700) !important; }
:root[data-theme="dark"] [style*="color: var(--wwf-green)"], :root[data-theme="dark"] [style*="color:var(--wwf-green)"] { color: var(--ds-green-text) !important; }

/* Third-party animated illustrations draw dark strokes on transparency: give them a light tile, like the logo. */
:root[data-theme="dark"] dotlottie-player,
:root[data-theme="dark"] iframe[src*="lottie"] { background-color: rgba(255, 255, 255, .92); border-radius: var(--ds-radius-lg); }

/* ---------- Inline white backgrounds in templates ---------- */
:root[data-theme="dark"] [style*="background: white"], :root[data-theme="dark"] [style*="background:white"],
:root[data-theme="dark"] [style*="background-color: white"], :root[data-theme="dark"] [style*="background-color:white"],
:root[data-theme="dark"] [style*="background: #fff"], :root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background-color: #fff"], :root[data-theme="dark"] [style*="background-color:#fff"] { background-color: var(--ds-surface) !important; }
:root[data-theme="dark"] [style*="background: #f"], :root[data-theme="dark"] [style*="background-color: #f"] { background-color: var(--ds-surface-2) !important; }

/* ---------- Phone menu ---------- */
:root[data-theme="dark"] .navbar-toggler { background-color: var(--ds-surface-2) !important; border-color: var(--ds-line); color: var(--ds-ink-900); }
:root[data-theme="dark"] .navbar-toggler-icon { background-color: transparent !important; color: var(--ds-ink-900); }
:root[data-theme="dark"] .navbar-collapse { background-color: var(--ds-surface); }

/* ---------- Dropdown group headings and active item ---------- */
:root[data-theme="dark"] .dropdown-header { background-color: var(--ds-surface-2); color: var(--ds-ink-600); }
:root[data-theme="dark"] .dropdown-divider { border-color: var(--ds-line); }
:root[data-theme="dark"] .dropdown-item.active,
:root[data-theme="dark"] .dropdown-item:active { color: #fff; }

/* ---------- Gallery filter labels (monstyle.css sets #212121; .active keeps its own white-on-brown) ---------- */
:where(:root[data-theme="dark"]) .shuffle-btn-group label { color: var(--ds-ink-900); }
:root[data-theme="dark"] [style*="solid black"], :root[data-theme="dark"] [style*="solid #000"] { border-color: var(--ds-line) !important; }

/* ---------- Information pages, table captions ---------- */
:root[data-theme="dark"] .list-group-item2 { background-color: var(--ds-surface) !important; color: var(--ds-ink-900); border-color: var(--ds-line); }
:root[data-theme="dark"] caption { color: var(--ds-ink-600); }

/* ---------- Gallery and library (daisyUI scope, driven by variables: see daisy-scope.css) ---------- */
:root[data-theme="dark"] :is(#library-app, #gallery-app)[data-theme="wwf"] {
  color-scheme: dark;
  --color-base-100: #161e1a;
  --color-base-200: #1d2823;
  --color-base-300: #34433b;
  --color-base-content: #eaf1ec;
  --color-neutral: #2a3830;
  --color-neutral-content: #eaf1ec;
}
:root[data-theme="dark"] :is(#library-app, #gallery-app) :is(.stat-title, .stat-desc),
:root[data-theme="dark"] :is(#library-app, #gallery-app) thead th { color: var(--ds-ink-600); }