/* Dark-mode corrections for satchurch.lv.
 *
 * THE PALETTE ITSELF IS NOT DEFINED HERE. Kadence Pro's dark-mode module emits
 * the full `body.color-switch-dark { --global-paletteN ... }` block (including
 * palette10-15, --global-palette9rgb, --global-palette-btn-*, highlight vars),
 * and that is the single source of truth. This file only fixes the things the
 * palette swap cannot express - Kadence chrome whose colour comes from a theme
 * setting holding a LITERAL white instead of a palette slot, so it never flips.
 *
 * DEPENDENCY: LiteSpeed UCSS (optm-ucss) must stay OFF - with it on, this box
 * served a stale UCSS snapshot that stripped the dark block and pinned the old
 * palette. Excluded from LiteSpeed combine via optm-css_exc "satchurch-darkmode",
 * so it must stay a REAL FILE and must never be inlined or enqueued twice.
 *
 * CONVENTION: no raw hex below this token block. Anything that has a palette
 * equivalent references the palette var, so a palette edit propagates here for
 * free; only genuinely custom surfaces carry a literal, and each is defined once.
 */

body.color-switch-dark{
  /* text */
  --dm-text:        var(--global-palette3);  /* #f4f0f7 primary light text      */
  --dm-text-muted:  var(--global-palette4);  /* #d9cfe4 body copy on dark       */
  --dm-text-dim:    var(--global-palette6);  /* #9b8fb3 placeholders            */
  --dm-text-soft:   #e6dcf0;                 /* search drawer icons, custom     */
  /* accent */
  --dm-accent:      var(--global-palette1);  /* #c48ae0                         */
  --dm-accent-soft: #e0b6f2;                 /* nav hover on overlay header     */
  /* surfaces */
  --dm-surface:        var(--global-palette9); /* #0d0912 page background       */
  --dm-surface-raised: #171020;                /* search input, accordion       */
  --dm-surface-hover:  #241734;                /* hover + active surface        */
  /* lines */
  --dm-border:        rgba(196,138,224,.22);
  --dm-border-strong: rgba(196,138,224,.38);
}

/* --- 1. Palette 7/8/9 play two roles ------------------------------------- *
 * They are the LIGHT end, so the site uses them BOTH as light backgrounds AND
 * as "white text" over photos/dark bands. Flipping is right for the background
 * role but turns that text the same colour as the dark page. Keep the TEXT
 * variants light (the -background-color variants correctly stay flipped). */
body.color-switch-dark .has-theme-palette-7-color,
body.color-switch-dark .has-theme-palette-8-color,
body.color-switch-dark .has-theme-palette-9-color{color:var(--dm-text) !important}

/* --- 2. Transparent (overlay) header ------------------------------------- *
 * Sits on a photo/dark hero in BOTH modes and its colours are configured as
 * palette9 ("white"), so it must stay light in dark mode. NOTE: transparent-header
 * is a class on <body>, so this must be a COMPOUND selector (no space).
 * TOP-LEVEL items only; dropdown colours come from the Customizer palette settings. */
body.color-switch-dark.transparent-header .header-navigation ul.menu > li > a,
body.color-switch-dark.transparent-header .header-navigation ul.menu > li > a span,
body.color-switch-dark.transparent-header .drawer-toggle,
body.color-switch-dark.transparent-header .drawer-toggle span,
body.color-switch-dark.transparent-header .site-title{color:var(--dm-text) !important}
body.color-switch-dark.transparent-header .header-navigation ul.menu > li > a:hover,
body.color-switch-dark.transparent-header .header-navigation ul.menu > li > a:hover span{color:var(--dm-accent-soft) !important}
/* The donate button is filled with palette9, which is near-black in dark mode; it gets the lilac pill
 * of the homepage buttons instead. */
body.color-switch-dark.transparent-header #main-header .header-button,
body.color-switch-dark.mobile-transparent-header .mobile-header-button-wrap .mobile-header-button{
  background:var(--dm-accent);color:var(--dm-surface)}
body.color-switch-dark.transparent-header #main-header .header-button:hover,
body.color-switch-dark.mobile-transparent-header .mobile-header-button-wrap .mobile-header-button:hover{
  background:var(--global-palette2);color:var(--dm-surface)}

/* --- 3. Header search drawer --------------------------------------------- *
 * Same trap again: the drawer panel background is a FIXED white from the theme
 * settings and does not follow the palette, while its text/input/icons DO flip
 * light - giving white-on-white (the whole overlay was invisible in dark mode).
 * Scoped to #search-drawer so the separate #mobile-drawer is left alone. */
body.color-switch-dark #search-drawer .drawer-inner,
body.color-switch-dark #search-drawer .drawer-content{
  background-color:var(--dm-surface) !important;color:var(--dm-text) !important}
body.color-switch-dark #search-drawer .search-field{
  background-color:var(--dm-surface-raised) !important;color:var(--dm-text) !important;
  border-color:var(--dm-border-strong) !important}
body.color-switch-dark #search-drawer .search-field::placeholder{color:var(--dm-text-dim) !important;opacity:1}
body.color-switch-dark #search-drawer .search-field:focus{
  border-color:var(--dm-accent) !important;outline:2px solid var(--dm-accent);outline-offset:2px}
body.color-switch-dark #search-drawer .kadence-search-icon-wrap,
body.color-switch-dark #search-drawer .kadence-search-icon-wrap svg,
body.color-switch-dark #search-drawer .drawer-toggle,
body.color-switch-dark #search-drawer .drawer-toggle span{color:var(--dm-text-soft) !important}

/* --- 4. Kadence Blocks accordion ----------------------------------------- *
 * Same trap, worst symptom. The block stores header background, border and the
 * panel background as literal whites, so in dark mode:
 *   - the header is a white slab with its own dark text (readable, but wrong), and
 *   - .kt-accordion-panel-inner stays WHITE while its text flips to palette4
 *     light - i.e. genuinely invisible content, on /ziedot/ + /give/ + RU.
 * Not page-scoped on purpose: one rule covers every accordion site-wide. */
body.color-switch-dark .kt-blocks-accordion-header{
  background-color:var(--dm-surface-raised) !important;
  border-color:var(--dm-border) !important;
  color:var(--dm-text) !important}
body.color-switch-dark .kt-blocks-accordion-header .kt-blocks-accordion-title,
body.color-switch-dark .kt-blocks-accordion-header .kt-blocks-accordion-title-wrap,
body.color-switch-dark .kt-blocks-accordion-header span{color:var(--dm-text) !important}
body.color-switch-dark .kt-blocks-accordion-header .kt-blocks-accordion-icon-trigger,
body.color-switch-dark .kt-blocks-accordion-header svg{color:var(--dm-text) !important;fill:currentColor !important}
body.color-switch-dark .kt-blocks-accordion-header:hover,
body.color-switch-dark .kt-blocks-accordion-header.kt-accordion-panel-active{
  background-color:var(--dm-surface-hover) !important}
body.color-switch-dark .kt-accordion-panel-inner{
  background-color:var(--dm-surface) !important;
  border-color:var(--dm-border) !important;
  color:var(--dm-text-muted) !important}

/* --- 5. Row shape dividers ----------------------------------------------- *
 * Kadence draws the row top/bottom separator as an inline <svg> whose fill is a
 * literal white chosen to match the LIGHT page background. In dark mode that
 * leaves a full-width white wedge under the hero (all three languages).
 * The divider must always carry the page background colour. */
body.color-switch-dark .kt-row-layout-top-sep svg,
body.color-switch-dark .kt-row-layout-top-sep path,
body.color-switch-dark .kt-row-layout-bottom-sep svg,
body.color-switch-dark .kt-row-layout-bottom-sep path{fill:var(--dm-surface) !important}