/* =========================
   Plum Blossom Dark Theme (Divi-tuned)
   Light mode = untouched theme
   ========================= */

html[data-theme='dark'] {
  --bg:        #2A1B2E;   /* deep plum */
  --bg-soft:   #3A273D;   /* optional panels/cards */
  --text:      #F9F3F5;
  --text-dim:  #E6D7DC;
  --accent:    #C7778A;
  --accent-2:  #F6B0C3;
  --btn-bg:    #8C3F54;
  --btn-text:  #FFF6F9;
  --border:    #513350;
}

/* 1) Make the overall canvas dark (Divi wrappers included) */
html[data-theme='dark'] body,
html[data-theme='dark'] #page-container,
html[data-theme='dark'] #et-main-area,
html[data-theme='dark'] #main-content {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  transition: background-color .25s ease, color .25s ease;
}

/* 2) Stop Divi sections/rows/modules from reintroducing light panels */
html[data-theme='dark'] .et_pb_section,
html[data-theme='dark'] .et_pb_row,
html[data-theme='dark'] .et_pb_column,
html[data-theme='dark'] .et_pb_module {
  background-color: transparent !important;
  border-color: var(--border) !important; /* harmless if no borders */
}

/* 3) Text & headings */
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'] .et_pb_text,
html[data-theme='dark'] .et_pb_text_inner,
html[data-theme='dark'] p,
html[data-theme='dark'] li,
html[data-theme='dark'] small {
  color: var(--text) !important;
}
html[data-theme='dark'] .et_pb_text p,
html[data-theme='dark'] .et_pb_text li,
html[data-theme='dark'] .et_pb_blurb_description,
html[data-theme='dark'] .entry-content p {
  color: var(--text-dim) !important;
}

/* 4) Links */
html[data-theme='dark'] a,
html[data-theme='dark'] a:visited { color: var(--accent) !important; }
html[data-theme='dark'] a:hover   { color: var(--accent-2) !important; }

/* 5) Buttons (WP + Divi) */
html[data-theme='dark'] button,
html[data-theme='dark'] input[type="button"],
html[data-theme='dark'] input[type="submit"],
html[data-theme='dark'] .wp-block-button__link,
html[data-theme='dark'] .et_pb_button,
html[data-theme='dark'] .et_pb_promo_button {
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme='dark'] .wp-block-button__link:hover,
html[data-theme='dark'] .et_pb_button:hover,
html[data-theme='dark'] button:hover,
html[data-theme='dark'] input[type="submit"]:hover {
  filter: brightness(0.96);
}

/* 6) Optional: header/footer tints (comment out if you like your originals) */
html[data-theme='dark'] #main-header,
html[data-theme='dark'] .site-header {
  background-color: #352239 !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}
html[data-theme='dark'] #main-footer,
html[data-theme='dark'] #footer-bottom {
  background-color: #291b2d !important;
  color: var(--text-dim) !important;
  border-top: 1px solid var(--border) !important;
}

/* 7) Dividers */
html[data-theme='dark'] hr,
html[data-theme='dark'] .wp-block-separator,
html[data-theme='dark'] .et_pb_divider {
  border-color: var(--border) !important;
}

/* 8) Floating toggle button (both modes) */
.plum-toggle {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 9999;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px; font: inherit; cursor: pointer;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85); color: #333;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html[data-theme='dark'] .plum-toggle {
  background: rgba(53,34,57,.85);
  color: var(--btn-text);
  border: 1px solid var(--border);
}
.plum-toggle:hover { transform: translateY(-1px); }
.plum-toggle:focus { outline: 2px solid #f2c1cd; outline-offset: 3px; }
.plum-toggle__icon { line-height: 1; }
@media (max-width: 640px){ .plum-toggle__text { display:none; } }

/* ===== Dark-mode header: dark grey bar + readable links ===== */
html[data-theme='dark'] #main-header,
html[data-theme='dark'] .site-header {
  background-color: #2f2f34 !important;   /* dark grey */
  color: #F3EAF0 !important;
  border-bottom: 1px solid #44434a !important;
}

/* When Divi turns the header into a fixed bar on scroll */
html[data-theme='dark'] #main-header.et-fixed-header {
  background-color: #2f2f34 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
}

/* Top-level menu links */
html[data-theme='dark'] #top-menu > li > a,
html[data-theme='dark'] .nav li > a {
  color: #F3EAF0 !important;              /* light text */
}
html[data-theme='dark'] #top-menu > li > a:hover,
html[data-theme='dark'] .nav li > a:hover {
  color: #F6B0C3 !important;              /* plum highlight on hover */
}

/* Mobile hamburger + dropdown */
html[data-theme='dark'] .et_mobile_menu,
html[data-theme='dark'] .mobile_menu_bar:before {
  background-color: #2f2f34 !important;
  color: #F3EAF0 !important;
}
html[data-theme='dark'] .et_mobile_menu li a {
  color: #F3EAF0 !important;
  border-color: #44434a !important;
}
html[data-theme='dark'] .et_mobile_menu li a:hover {
  color: #F6B0C3 !important;
}

/* Optional: site title in header */
html[data-theme='dark'] #logo,
html[data-theme='dark'] .logo_container a,
html[data-theme='dark'] #main-header .logo_container h1 a {
  color: #F3EAF0 !important;
}