/*
  EA Dark Mode Toggle — frontend styles
  - Uses html.ea-darkmode to activate.
  - Targets both generic WP/Kadence elements + your EA page classes.
*/

/* Toggle control */
.ea-dm-wrap{ display:inline-flex; }
.ea-dm-wrap.ea-dm-align-left{ justify-content:flex-start; }
.ea-dm-wrap.ea-dm-align-center{ justify-content:center; width:100%; }
.ea-dm-wrap.ea-dm-align-right{ justify-content:flex-end; width:100%; }

.ea-dm-toggle{
  appearance:none;
  border:1px solid rgba(11,42,74,0.28);
  background:#ffffff;
  color:var(--global-palette1, #0b2a4a);
  border-radius:999px;
  padding:8px 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:nowrap;
  white-space:nowrap;
  cursor:pointer;
  font-weight:800;
  font-size:14px;
  line-height:1;
  box-shadow:0 10px 22px rgba(17,24,39,0.06);
}
.ea-dm-toggle:hover{
  box-shadow:0 14px 30px rgba(17,24,39,0.10);
}
.ea-dm-toggle:focus{
  outline:2px solid rgba(243,111,33,0.55);
  outline-offset:2px;
}
.ea-dm-toggle svg{ width:16px; height:16px; }

.ea-dm-text{ white-space:nowrap; }

/* Icon swap */
.ea-dm-icon-sun{ display:none; }
html.ea-darkmode .ea-dm-icon-sun{ display:inline; }
html.ea-darkmode .ea-dm-icon-moon{ display:none; }

/* Optional: hide text */
.ea-dm-toggle.ea-dm-no-text .ea-dm-text{ display:none; }

/*
  Dark mode theme tokens
  You can override these in Appearance → Customize → Additional CSS if desired.
*/
html.ea-darkmode{
  color-scheme: dark;
  --ea-dm-bg: #0b1220;
  --ea-dm-surface: #111827;
  --ea-dm-surface-2: #0f172a;
  --ea-dm-border: rgba(255,255,255,0.14);
  --ea-dm-text: #e5e7eb;
  --ea-dm-muted: #cbd5e1;
  --ea-dm-link: #93c5fd;
  --ea-dm-shadow: 0 16px 34px rgba(0,0,0,0.45);
}

/* Global background + text */
html.ea-darkmode body{
  background: var(--ea-dm-bg) !important;
  color: var(--ea-dm-text);
}
/* Links (force :visited so header/menu links don't disappear) */
html.ea-darkmode a,
html.ea-darkmode a:visited{ color: var(--ea-dm-link) !important; }
html.ea-darkmode a:hover,
html.ea-darkmode a:focus{ color: #bfe7ff !important; }

/* Kadence/theme structural wrappers (safe-ish) */
html.ea-darkmode .site,
html.ea-darkmode .site-content,
html.ea-darkmode .content-area,
html.ea-darkmode .entry,
html.ea-darkmode .entry-content,
html.ea-darkmode .content-wrap{
  background: transparent;
  color: var(--ea-dm-text);
}

/* Header + footer */
html.ea-darkmode .site-header,
html.ea-darkmode .site-footer{
  background: var(--ea-dm-surface-2) !important;
  border-color: var(--ea-dm-border) !important;
}
/* Header/footer links (explicit :visited so menu links don't go dark/purple) */
html.ea-darkmode .site-header a,
html.ea-darkmode .site-header a:visited,
html.ea-darkmode .site-footer a,
html.ea-darkmode .site-footer a:visited,
html.ea-darkmode .site-header .main-navigation a,
html.ea-darkmode .site-header .main-navigation a:visited,
html.ea-darkmode .site-header .nav-menu a,
html.ea-darkmode .site-header .nav-menu a:visited{
  color: var(--ea-dm-text) !important;
}
html.ea-darkmode .site-header a:hover,
html.ea-darkmode .site-header a:focus{
  color: #ffffff !important;
}

/* Your EA page panels/cards/tiles (override inline page CSS with !important) */
html.ea-darkmode .ea-home-bg,
html.ea-darkmode .ea-page-bg,
html.ea-darkmode .ea-portal-bg{
  background: var(--ea-dm-bg) !important;
}

html.ea-darkmode .ea-panel,
html.ea-darkmode .ea-portal-panel,
html.ea-darkmode .ea-fa-hero-panel,
html.ea-darkmode .ea-card,
html.ea-darkmode .ea-portal-card,
html.ea-darkmode .ea-tool-tile,
html.ea-darkmode .ea-portal-step,
html.ea-darkmode .ea-step,
html.ea-darkmode .ea-faq details{
  background: var(--ea-dm-surface) !important;
  border-color: var(--ea-dm-border) !important;
  box-shadow: var(--ea-dm-shadow) !important;
}

/* Hero panels that had gradients */
html.ea-darkmode .ea-hero-panel,
html.ea-darkmode .ea-cta-panel,
html.ea-darkmode .ea-fa-hero-band{
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.00) 70%) !important;
}

/* Text helpers */
html.ea-darkmode .ea-muted,
html.ea-darkmode .ea-portal-muted,
html.ea-darkmode .ea-fa-hero-copy{
  color: var(--ea-dm-muted) !important;
}

/* Headings / titles
   Kadence + some WP blocks set explicit heading colors that don't inherit from <body>.
   This forces section titles to switch to the dark-mode text color.
*/
html.ea-darkmode :where(
  h1,h2,h3,h4,h5,h6,
  .wp-block-heading,
  .entry-title,
  .page-title,
  .post-title,
  .wp-block-post-title,
  .wp-block-query-title,
  .widget-title,
  summary
){
  color: var(--ea-dm-text) !important;
}

/*
  Light-background blocks (Query Loop cards, Group blocks with a background, details/summary)
  can stay light even in dark mode. Because the page text is flipped to a light color,
  those areas become low-contrast.

  This is a best-effort normalization for common WordPress/Kadence structures.
*/
html.ea-darkmode :where(
  .wp-block-group.has-background,
  .wp-block-column.has-background,
  .wp-block-columns.has-background,
  .wp-block-cover.has-background,
  .wp-block-cover.is-light,
  .wp-block-query .wp-block-post-template > li,
  .wp-block-post-template > li,
  .wp-block-post
){
  background-color: var(--ea-dm-surface) !important;
  border-color: var(--ea-dm-border) !important;
  color: var(--ea-dm-text) !important;
}

html.ea-darkmode :where(details){
  background-color: var(--ea-dm-surface-2) !important;
  border: 1px solid var(--ea-dm-border) !important;
  color: var(--ea-dm-text) !important;
}
html.ea-darkmode :where(details > summary){
  background-color: var(--ea-dm-surface-2) !important;
  color: var(--ea-dm-text) !important;
}

/* Meta text (dates/excerpts) */
html.ea-darkmode :where(
  .wp-block-post-date,
  .wp-block-post-excerpt,
  .wp-block-post-excerpt__excerpt,
  .wp-block-post-author,
  .wp-block-post-terms,
  .entry-meta,
  .post-meta
){
  color: var(--ea-dm-muted) !important;
}

/* Optional: make “price”/big numeric callouts readable if you used ea-price */
html.ea-darkmode .ea-price{ color: var(--ea-dm-text) !important; }

/* Button control in dark mode */
html.ea-darkmode .ea-dm-toggle{
  background: var(--ea-dm-surface-2);
  border-color: var(--ea-dm-border);
  color: var(--ea-dm-text);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

/* Form fields (best-effort) */
html.ea-darkmode input,
html.ea-darkmode textarea,
html.ea-darkmode select{
  background: var(--ea-dm-surface-2);
  color: var(--ea-dm-text);
  border-color: var(--ea-dm-border);
}

/* Notes / warnings */
html.ea-darkmode .ea-note,
html.ea-darkmode .ea-portal-note{
  background: rgba(243,111,33,0.10) !important;
  border-color: rgba(243,111,33,0.35) !important;
  color: var(--ea-dm-text) !important;
}

/* Reduce harsh box shadows for motion-sensitive users */
@media (prefers-reduced-motion: reduce){
  .ea-dm-toggle,
  html.ea-darkmode .ea-panel,
  html.ea-darkmode .ea-card,
  html.ea-darkmode .ea-portal-panel,
  html.ea-darkmode .ea-tool-tile{
    transition:none !important;
  }
}