/*
|--------------------------------------------------------------------------
| Reach site light/dark compatibility layer
|--------------------------------------------------------------------------
| Loaded after page CSS. Existing theme-aware pages keep their own design;
| this layer catches Bootstrap and older hard-coded light surfaces.
*/

html,
body {
  background-color: var(--theme-background);
  color: var(--theme-text);
}

body,
main,
section,
article,
aside,
header,
footer,
nav,
div,
form {
  border-color: var(--theme-border);
}

html[data-color-mode="dark"] {
  --bs-body-color: var(--theme-text);
  --bs-body-bg: var(--theme-background);
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: var(--theme-text-muted);
  --bs-secondary-bg: var(--theme-surface-soft);
  --bs-tertiary-bg: var(--theme-surface-muted);
  --bs-border-color: var(--theme-border);
  --bs-card-bg: var(--theme-surface);
}

/* Bootstrap / common surfaces */
html[data-color-mode="dark"] .bg-white,
html[data-color-mode="dark"] .bg-light,
html[data-color-mode="dark"] .card,
html[data-color-mode="dark"] .modal-content,
html[data-color-mode="dark"] .dropdown-menu,
html[data-color-mode="dark"] .offcanvas,
html[data-color-mode="dark"] .list-group-item,
html[data-color-mode="dark"] .accordion-item,
html[data-color-mode="dark"] .accordion-button,
html[data-color-mode="dark"] .table,
html[data-color-mode="dark"] .form-control,
html[data-color-mode="dark"] .form-select,
html[data-color-mode="dark"] input,
html[data-color-mode="dark"] textarea,
html[data-color-mode="dark"] select {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

html[data-color-mode="dark"] .form-control::placeholder,
html[data-color-mode="dark"] textarea::placeholder,
html[data-color-mode="dark"] input::placeholder {
  color: var(--theme-text-soft) !important;
  opacity: 1;
}

html[data-color-mode="dark"] .text-dark,
html[data-color-mode="dark"] .text-body,
html[data-color-mode="dark"] .text-black {
  color: var(--theme-text) !important;
}

html[data-color-mode="dark"] .text-muted,
html[data-color-mode="dark"] .text-secondary {
  color: var(--theme-text-muted) !important;
}

html[data-color-mode="dark"] .border,
html[data-color-mode="dark"] .border-top,
html[data-color-mode="dark"] .border-bottom,
html[data-color-mode="dark"] .border-start,
html[data-color-mode="dark"] .border-end {
  border-color: var(--theme-border) !important;
}

/* Navigation */
html[data-color-mode="dark"] .navbar,
html[data-color-mode="dark"] .navbar-collapse,
html[data-color-mode="dark"] .nav-panel,
html[data-color-mode="dark"] .mobile-nav,
html[data-color-mode="dark"] .section-nav {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

html[data-color-mode="dark"] .navbar a,
html[data-color-mode="dark"] .nav-link,
html[data-color-mode="dark"] .section-nav a {
  color: var(--theme-text) !important;
}

/* Giving page */
html[data-color-mode="dark"] .my-card {
  background: var(--theme-surface) !important;
  color: var(--theme-text);
}

html[data-color-mode="dark"] .my-card p,
html[data-color-mode="dark"] .my-wrapper p {
  color: var(--theme-text-muted);
}

html[data-color-mode="dark"] .my-radio {
  background: var(--theme-surface-soft);
  color: var(--theme-text);
}

html[data-color-mode="dark"] .my-radio:hover {
  background: var(--theme-surface-muted);
}

html[data-color-mode="dark"] .StripeElement {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}

/* Daily devotion */
html[data-color-mode="dark"] .gray-bg {
  background-color: var(--theme-background) !important;
}

html[data-color-mode="dark"] .devotion-card {
  color: var(--theme-text) !important;
}

html[data-color-mode="dark"] .devotion-kicker,
html[data-color-mode="dark"] .devotion-link {
  color: var(--theme-text-muted) !important;
}

html[data-color-mode="dark"] .devotion-divider {
  background: var(--theme-border) !important;
}

html[data-color-mode="dark"] .devotion-verse {
  border-left-color: var(--theme-border) !important;
}

html[data-color-mode="dark"] .devotion-btn-outline {
  background: var(--theme-surface-soft) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

html[data-color-mode="dark"] .devotion-fade {
  background: linear-gradient(
    to bottom,
    rgba(15, 20, 26, 0),
    rgba(15, 20, 26, 0.98)
  ) !important;
}

html[data-color-mode="dark"] .devo-btn {
  background-color: var(--theme-surface-muted) !important;
  color: var(--theme-text) !important;
}

/* Devotion archive */
html[data-color-mode="dark"] .devotions-page {
  background: var(--theme-background) !important;
  --archive-ink: var(--theme-text);
  --archive-muted: var(--theme-text-muted);
  --archive-line: var(--theme-border);
  --archive-soft: var(--theme-surface-soft);
}

html[data-color-mode="dark"] .devotions-page .archive-card,
html[data-color-mode="dark"] .devotions-page .archive-nav {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}

html[data-color-mode="dark"] .devotions-page .archive-theme,
html[data-color-mode="dark"] .devotions-page .date-month-btn.active {
  color: var(--theme-text) !important;
}

html[data-color-mode="dark"] .devotions-page .archive-date,
html[data-color-mode="dark"] .devotions-page .archive-scripture,
html[data-color-mode="dark"] .devotions-page .archive-preview,
html[data-color-mode="dark"] .devotions-page .date-month-btn,
html[data-color-mode="dark"] .devotions-page .date-month-btn small {
  color: var(--theme-text-muted) !important;
}

html[data-color-mode="dark"] .devotions-page .date-month-btn:hover,
html[data-color-mode="dark"] .devotions-page .date-month-btn.active {
  background: var(--theme-surface-muted) !important;
}

/* Account */
html[data-color-mode="dark"] {
  --account-bg: var(--theme-background);
  --account-card: var(--theme-surface);
  --account-text: var(--theme-text);
  --account-muted: var(--theme-text-muted);
  --account-line: var(--theme-border);
  --account-dark: #f3f6f9;
  --account-soft: var(--theme-surface-soft);
}

html[data-color-mode="dark"] .account-panel,
html[data-color-mode="dark"] .account-card,
html[data-color-mode="dark"] .bookmark-folder,
html[data-color-mode="dark"] .account-tab,
html[data-color-mode="dark"] .giving-results-bar,
html[data-color-mode="dark"] .giving-filter-form,
html[data-color-mode="dark"] .logout-link {
  background: var(--account-card) !important;
  border-color: var(--account-line) !important;
  color: var(--account-text) !important;
}

html[data-color-mode="dark"] .account-tab.active,
html[data-color-mode="dark"] .button {
  background: #f3f6f9 !important;
  border-color: #f3f6f9 !important;
  color: #11161c !important;
}

html[data-color-mode="dark"] .button-secondary,
html[data-color-mode="dark"] .bookmark-folder-head,
html[data-color-mode="dark"] .giving-allocations {
  background: var(--account-soft) !important;
  border-color: var(--account-line) !important;
  color: var(--account-text) !important;
}

html[data-color-mode="dark"] .giving-item {
  border-bottom-color: var(--account-line) !important;
}

/* Preserve intentionally dark/visual hero areas instead of flattening them. */
html[data-color-mode="dark"] [style*="background-image"],
html[data-color-mode="dark"] .bg-image-fade,
html[data-color-mode="dark"] .featured-devotion {
  color-scheme: dark;
}