/* SS Layout - Dark Mode (site-wide)
   Loaded on every frontend page when dark mode is enabled. Activates under
   html[data-theme="dark"], which the pre-paint head script sets from
   localStorage / system preference. Colours match the plugin dark palette
   (DESIGN_CONTEXT.md section 1B) so cards, tables and the page agree. */

html[data-theme="dark"] {
  --ssdm-page:    #0B1626;
  --ssdm-surface: #13213A;
  --ssdm-raise:   #1C2C49;
  --ssdm-heading: #EDF1F7;
  --ssdm-text:    #C4CEDD;
  --ssdm-muted:   #93A0B4;
  --ssdm-border:  #283850;
  --ssdm-link:    #9FC0FF;
  --ssdm-accent:  #FFC21F;
}

/* ============================================================
   Toggle button  ([ss_dark_toggle])
============================================================ */
.ssl-dm-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 40px;
  height: 40px;
  padding: 0 11px;
  border-radius: 10px;
  border: 1px solid #E4E8EE;
  background: #FFFFFF;
  color: #0B1E3F;
  cursor: pointer;
  line-height: 0;
  vertical-align: middle;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.ssl-dm-toggle:hover { border-color: #0B1E3F; }
.ssl-dm-toggle:focus-visible { outline: 2px solid #F5B800; outline-offset: 2px; }
.ssl-dm-toggle .ssl-dm-ico { width: 18px; height: 18px; display: block; }
.ssl-dm-toggle .ssl-dm-label {
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
/* Show the moon in light mode (click -> dark) and the sun in dark mode. */
.ssl-dm-ico-sun  { display: none; }
.ssl-dm-ico-moon { display: block; }
html[data-theme="dark"] .ssl-dm-ico-moon { display: none; }
html[data-theme="dark"] .ssl-dm-ico-sun  { display: block; }
html[data-theme="dark"] .ssl-dm-toggle {
  background: var(--ssdm-surface);
  border-color: var(--ssdm-border);
  color: var(--ssdm-accent);
}

/* ============================================================
   Smooth light/dark transition.
   The .ssl-dm-anim class is added by JS after first paint, so the
   transition only fires on toggle - never on initial load.
============================================================ */
html.ssl-dm-anim body,
html.ssl-dm-anim .site, html.ssl-dm-anim #wrapper,
html.ssl-dm-anim .content-bg, html.ssl-dm-anim .content-container,
html.ssl-dm-anim .wp-site-blocks, html.ssl-dm-anim .site-main,
html.ssl-dm-anim .site-header, html.ssl-dm-anim #masthead,
html.ssl-dm-anim .site-footer, html.ssl-dm-anim .footer-wrap, html.ssl-dm-anim #colophon,
html.ssl-dm-anim .entry-content, html.ssl-dm-anim .wp-block-group,
html.ssl-dm-anim .ssl-card, html.ssl-dm-anim .ssl-widget, html.ssl-dm-anim .ssl-guide-item,
html.ssl-dm-anim .ss-pt-wrap, html.ssl-dm-anim .ss-pi-wrap, html.ssl-dm-anim .ss-pt-full,
html.ssl-dm-anim .ssl-dm-toggle,
html.ssl-dm-anim input, html.ssl-dm-anim textarea, html.ssl-dm-anim select {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* ============================================================
   Kadence page chrome in dark mode.
   Backgrounds use !important to beat the theme; text colours are
   gentle so component-specific colours still win.
============================================================ */
html[data-theme="dark"] body { background-color: var(--ssdm-page); color: var(--ssdm-text); }

html[data-theme="dark"] #wrapper,
html[data-theme="dark"] .site,
html[data-theme="dark"] .content-bg,
html[data-theme="dark"] .content-container,
html[data-theme="dark"] .wp-site-blocks,
html[data-theme="dark"] .site-main,
html[data-theme="dark"] .entry-content-wrap,
html[data-theme="dark"] .hero-section {
  background-color: var(--ssdm-page) !important;
}

html[data-theme="dark"] .site-header-wrap,
html[data-theme="dark"] .site-header,
html[data-theme="dark"] #masthead,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .footer-wrap,
html[data-theme="dark"] #colophon,
html[data-theme="dark"] .entry-content .wp-block-group,
html[data-theme="dark"] .kt-row-column-wrap,
html[data-theme="dark"] .single-entry .entry-content-wrap > .wp-block-group {
  background-color: var(--ssdm-surface) !important;
  border-color: var(--ssdm-border);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .entry-title,
html[data-theme="dark"] .site-title { color: var(--ssdm-heading) !important; }

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] .entry-content,
html[data-theme="dark"] .site-main,
html[data-theme="dark"] .widget,
html[data-theme="dark"] blockquote { color: var(--ssdm-text); }

html[data-theme="dark"] .entry-content a:not(.button):not(.wp-block-button__link):not(.ssl-featured-cta):not(.ss-pt-seeall),
html[data-theme="dark"] .widget a:not(.button) { color: var(--ssdm-link); }

html[data-theme="dark"] input:not([type="submit"]):not([type="button"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--ssdm-surface) !important;
  color: var(--ssdm-text) !important;
  border-color: var(--ssdm-border) !important;
}

html[data-theme="dark"] hr,
html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td { border-color: var(--ssdm-border); }