/* ════════════════════════════════════════════════════════════════════════
   WPCONSULTS — KADENCE DARK MODE BRIDGE  v1.0
   ════════════════════════════════════════════════════════════════════════

   PURPOSE
   Recolors Kadence theme chrome (header, footer, sidebar, post content,
   core blocks, forms) when dark mode is active.

   This file INTENTIONALLY uses bare element selectors (body, h1, a, table)
   — scoped under [data-theme="dark"] — because it must reach Kadence's own
   markup. That is why it lives SEPARATE from master.css (which stays 100%
   portable / conflict-free for landing pages).

   LOAD ORDER (functions.php):
     1. master.css
     2. wpc-kadence-dark.css   ← this file (site-wide)

   The --global-palette* variables are set dynamically by the DARK object in
   functions.php (wpc_theme_toggle_js / wpc_dark_mode_antiflash), so most
   recoloring happens automatically. The rules below handle the cases
   Kadence hardcodes as hex values that the palette swap can't reach.
   ════════════════════════════════════════════════════════════════════════ */


/* ── Page & body ─────────────────────────────────── */
[data-theme="dark"] body {
  background-color: var(--global-palette9);
  color: var(--global-palette5);
}

/* ── Headings ────────────────────────────────────── */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--global-palette4);
}

/* ── Links ───────────────────────────────────────── */
[data-theme="dark"] a       { color: var(--global-palette1); }
[data-theme="dark"] a:hover { color: var(--global-palette2); }

/* ── Kadence Header ──────────────────────────────── */
[data-theme="dark"] .site-header,
[data-theme="dark"] .site-header-wrap,
[data-theme="dark"] #masthead {
  background-color: var(--global-palette7) !important;   /* #171f35 — header surface */
}
[data-theme="dark"] .header-navigation .nav-link,
[data-theme="dark"] .main-navigation a { color: var(--global-palette5); }
[data-theme="dark"] .header-navigation .nav-link:hover,
[data-theme="dark"] .main-navigation a:hover { color: var(--global-palette1); }

/* ── Kadence mobile menu (part of the header → match #171f35) ─── */
[data-theme="dark"] #mobile-drawer,
[data-theme="dark"] .kadence-mobile-nav-wrap {
  background-color: var(--global-palette7);
}

/* ── Kadence Footer ──────────────────────────────── */
[data-theme="dark"] .site-footer,
[data-theme="dark"] #colophon,
[data-theme="dark"] .footer-wrap {
  background-color: var(--global-palette7);   /* #171f35 — match header */
  color: var(--global-palette5);
}
[data-theme="dark"] .site-footer h2,
[data-theme="dark"] .site-footer h3,
[data-theme="dark"] .site-footer h4,
[data-theme="dark"] .footer-widget .widget-title { color: var(--global-palette4); }
[data-theme="dark"] .site-footer a,
[data-theme="dark"] .footer-widget a,
[data-theme="dark"] .footer-widget li a { color: var(--global-palette5); }
[data-theme="dark"] .site-footer a:hover,
[data-theme="dark"] .footer-widget a:hover { color: var(--global-palette1); }

/* ── Page / post content area ────────────────────── */
[data-theme="dark"] .site-main,
[data-theme="dark"] .content-area {
  background-color: var(--global-palette9);
  color: var(--global-palette5);
}

/* ── Kadence blocks ──────────────────────────────── */
[data-theme="dark"] .wp-block-kadence-column,
[data-theme="dark"] .kadence-column { background-color: transparent; }
[data-theme="dark"] .wp-block-kadence-infobox .kt-blocks-info-box-link-wrap {
  background-color: var(--global-palette8);
  border-color: rgba(139,107,255,.2);
}

/* ── WordPress core blocks ───────────────────────── */
[data-theme="dark"] .wp-block-group { background-color: var(--global-palette8); }
[data-theme="dark"] .wp-block-separator { border-color: rgba(139,107,255,.2); }
[data-theme="dark"] .wp-block-pullquote,
[data-theme="dark"] .wp-block-quote,
[data-theme="dark"] blockquote {
  border-color: var(--global-palette1);
  color: var(--global-palette6);
}

/* ── Elementor widgets (not sections — leave those to palette) ── */
[data-theme="dark"] .elementor-widget-text-editor { color: var(--global-palette5); }
[data-theme="dark"] .elementor-widget-heading .elementor-heading-title,
[data-theme="dark"] .elementor-widget-icon-box .elementor-icon-box-title { color: var(--global-palette4); }
[data-theme="dark"] .elementor-widget-icon-box .elementor-icon-box-description { color: var(--global-palette6); }

/* ── Forms ───────────────────────────────────────── */
[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--global-palette8);
  color: var(--global-palette5);
  border-color: rgba(139,107,255,.25);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #6B7280; }

/* ── Native tables (Kadence/Gutenberg) ───────────── */
[data-theme="dark"] table { background-color: var(--global-palette8); color: var(--global-palette5); }
[data-theme="dark"] th    { background-color: var(--global-palette7); color: var(--global-palette4); }
[data-theme="dark"] td    { border-color: rgba(139,107,255,.15); }

/* ── Scrollbar (Chromium) ────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar       { background: var(--global-palette9); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--global-palette7); border-radius: 4px; }

/* ── Buttons — keep text white ───────────────────── */
[data-theme="dark"] .kt-button,
[data-theme="dark"] .wp-block-button__link,
[data-theme="dark"] .wp-element-button,
[data-theme="dark"] button[type="submit"],
[data-theme="dark"] input[type="submit"] { color: #ffffff !important; }

/* ── Blog list: excerpt & meta toned down ────────── */
[data-theme="dark"] .entry-meta,
[data-theme="dark"] .post-meta,
[data-theme="dark"] .posted-on,
[data-theme="dark"] .entry-footer,
[data-theme="dark"] .loop-entry .entry-summary,
[data-theme="dark"] .loop-entry p { color: #9CA3AF !important; }

/* ── Single post content — headings bright, body dimmed ── */
[data-theme="dark"] .entry-content h2,
[data-theme="dark"] .entry-content h3,
[data-theme="dark"] .entry-content h4,
[data-theme="dark"] .entry-content h5,
[data-theme="dark"] .entry-content h6 { color: #F8FAFC; }
[data-theme="dark"] .entry-content p,
[data-theme="dark"] .entry-content li,
[data-theme="dark"] .entry-content td { color: #CBD5E0; }

/* end wpc-kadence-dark.css */