/*
 * Bedrealm Dark Mode — dark-mode.css
 * Target: /themes/custom/bedrealm/css/theme/theme.css  (or website-subthemes.css)
 */

/* =========================================================
   1. LIGHT MODE TOKENS
   ========================================================= */
:root {
  --br-bg-body:          #f5f5f4;
  --br-bg-card:          #ffffff;
  --br-bg-header:        #1c1917;
  --br-bg-header-top:    #141211;
  --br-bg-footer:        #1c1917;
  --br-bg-section-alt:   #eeece9;
  --br-bg-overlay:       rgba(0, 0, 0, 0.04);

  --br-text-body:        #1c1917;
  --br-text-secondary:   #44403c;
  --br-text-muted:       #78716c;
  --br-text-on-dark:     #e7e5e4;
  --br-text-link:        #c2692a;
  --br-text-link-hover:  #9a4e1e;

  --br-border:           #d6d3d1;
  --br-divider:          #e7e5e4;

  --br-brand-primary:    #c2692a;
  --br-brand-accent:     #e07b3a;
}

/* =========================================================
   2. DARK MODE TOKEN OVERRIDES
   ========================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --br-bg-body:          #141211;
    --br-bg-card:          #1c1917;
    --br-bg-header:        #0f0e0d;
    --br-bg-header-top:    #0a0908;
    --br-bg-footer:        #0f0e0d;
    --br-bg-section-alt:   #232120;
    --br-bg-overlay:       rgba(255, 255, 255, 0.04);

    --br-text-body:        #e7e5e4;
    --br-text-secondary:   #a8a29e;
    --br-text-muted:       #6b6560;
    --br-text-on-dark:     #e7e5e4;
    --br-text-link:        #e07b3a;
    --br-text-link-hover:  #f0a060;

    --br-border:           #2c2825;
    --br-divider:          #211e1b;
  }
}

/* JS-forced dark */
[data-theme="dark"] {
  --br-bg-body:          #141211;
  --br-bg-card:          #1c1917;
  --br-bg-header:        #0f0e0d;
  --br-bg-header-top:    #0a0908;
  --br-bg-footer:        #0f0e0d;
  --br-bg-section-alt:   #232120;
  --br-bg-overlay:       rgba(255, 255, 255, 0.04);

  --br-text-body:        #e7e5e4;
  --br-text-secondary:   #a8a29e;
  --br-text-muted:       #6b6560;
  --br-text-on-dark:     #e7e5e4;
  --br-text-link:        #e07b3a;
  --br-text-link-hover:  #f0a060;

  --br-border:           #2c2825;
  --br-divider:          #211e1b;
}

/* =========================================================
   3. BASE WIRING
   ========================================================= */
body,
.dialog-off-canvas-main-canvas,
.page-container {
  background-color: var(--br-bg-body);
  color: var(--br-text-body);
  transition: background-color 0.2s ease, color 0.2s ease;
}

a {
  color: var(--br-text-link);
}

a:hover,
a:focus {
  color: var(--br-text-link-hover);
}

/* =========================================================
   4. HEADER — dark mode only
   Guarded so light mode is untouched by our rules.
   ========================================================= */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) header[role="banner"],
  html:not([data-theme="light"]) header[role="banner"].region--bright-background,
  html:not([data-theme="light"]) .header-container,
  html:not([data-theme="light"]) .sticky-wrapper header {
    background-color: var(--br-bg-header) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  html:not([data-theme="light"]) .header-top-highlighted,
  html:not([data-theme="light"]) .header-top-highlighted.region--bright-background {
    background-color: var(--br-bg-header-top) !important;
  }

  html:not([data-theme="light"]) header[role="banner"] .site-branding__name a,
  html:not([data-theme="light"]) header[role="banner"] .site-name a,
  html:not([data-theme="light"]) .header-container .site-branding__name a,
  html:not([data-theme="light"]) header[role="banner"] .menu a,
  html:not([data-theme="light"]) .region-header .menu a,
  html:not([data-theme="light"]) #block-bedrealm-main-menu .menu a {
    color: var(--br-text-on-dark) !important;
  }

  html:not([data-theme="light"]) header[role="banner"] .menu a:hover,
  html:not([data-theme="light"]) header[role="banner"] .menu a:focus,
  html:not([data-theme="light"]) .region-header .menu a:hover,
  html:not([data-theme="light"]) header[role="banner"] .menu a.is-active,
  html:not([data-theme="light"]) .region-header .menu a.is-active {
    color: var(--br-brand-accent) !important;
  }

  html:not([data-theme="light"]) .region-header-top-highlighted-second .menu a,
  html:not([data-theme="light"]) #block-bedrealm-account-menu .menu a {
    color: rgba(232, 237, 243, 0.75) !important;
  }

  html:not([data-theme="light"]) .region-header-top-highlighted-second .menu a:hover {
    color: var(--br-text-on-dark) !important;
  }
}

[data-theme="dark"] header[role="banner"],
[data-theme="dark"] header[role="banner"].region--bright-background,
[data-theme="dark"] .header-container,
[data-theme="dark"] .sticky-wrapper header {
  background-color: var(--br-bg-header) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .header-top-highlighted,
[data-theme="dark"] .header-top-highlighted.region--bright-background {
  background-color: var(--br-bg-header-top) !important;
}

[data-theme="dark"] header[role="banner"] .site-branding__name a,
[data-theme="dark"] header[role="banner"] .site-name a,
[data-theme="dark"] .header-container .site-branding__name a,
[data-theme="dark"] header[role="banner"] .menu a,
[data-theme="dark"] .region-header .menu a,
[data-theme="dark"] #block-bedrealm-main-menu .menu a {
  color: var(--br-text-on-dark) !important;
}

[data-theme="dark"] header[role="banner"] .menu a:hover,
[data-theme="dark"] header[role="banner"] .menu a:focus,
[data-theme="dark"] .region-header .menu a:hover,
[data-theme="dark"] header[role="banner"] .menu a.is-active,
[data-theme="dark"] .region-header .menu a.is-active {
  color: var(--br-brand-accent) !important;
}

[data-theme="dark"] .region-header-top-highlighted-second .menu a,
[data-theme="dark"] #block-bedrealm-account-menu .menu a {
  color: rgba(232, 237, 243, 0.75) !important;
}

[data-theme="dark"] .region-header-top-highlighted-second .menu a:hover {
  color: var(--br-text-on-dark) !important;
}

/* =========================================================
   5. MAIN CONTENT REGION
   ========================================================= */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #main-content,
  html:not([data-theme="light"]) #main-content.region--bright-background,
  html:not([data-theme="light"]) .main-content__container,
  html:not([data-theme="light"]) .main-content__section {
    background-color: var(--br-bg-body) !important;
    color: var(--br-text-body);
  }

  html:not([data-theme="light"]) .node__main-content,
  html:not([data-theme="light"]) .node .mt-text-content,
  html:not([data-theme="light"]) .field--name-body,
  html:not([data-theme="light"]) .field__item {
    color: var(--br-text-body);
  }
}

[data-theme="dark"] #main-content,
[data-theme="dark"] #main-content.region--bright-background,
[data-theme="dark"] .main-content__container,
[data-theme="dark"] .main-content__section {
  background-color: var(--br-bg-body) !important;
  color: var(--br-text-body);
}

[data-theme="dark"] .node__main-content,
[data-theme="dark"] .node .mt-text-content,
[data-theme="dark"] .field--name-body,
[data-theme="dark"] .field__item {
  color: var(--br-text-body);
}

/* =========================================================
   6. CARDS
   ========================================================= */

/* Light mode: wire cards to tokens so colors.css can't override */
html .card,
html .card-body {
  background-color: var(--br-bg-card);
  color: var(--br-text-body);
  border-color: var(--br-border);
}

html .card-header,
html .card-footer {
  background-color: var(--br-bg-section-alt);
  color: var(--br-text-secondary);
  border-color: var(--br-border);
}

html .card-title,
html .card-text {
  color: var(--br-text-body);
}

/* Dark mode: !important to beat Basecore's colors.css */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .card,
  html:not([data-theme="light"]) .card-body {
    background-color: var(--br-bg-card) !important;
    color: var(--br-text-body) !important;
    border-color: var(--br-border) !important;
  }

  html:not([data-theme="light"]) .card-header,
  html:not([data-theme="light"]) .card-footer {
    background-color: var(--br-bg-section-alt) !important;
    color: var(--br-text-secondary) !important;
    border-color: var(--br-border) !important;
  }

  html:not([data-theme="light"]) .card-title,
  html:not([data-theme="light"]) .card-text {
    color: var(--br-text-body) !important;
  }
}

[data-theme="dark"] .card,
[data-theme="dark"] .card-body {
  background-color: var(--br-bg-card) !important;
  color: var(--br-text-body) !important;
  border-color: var(--br-border) !important;
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background-color: var(--br-bg-section-alt) !important;
  color: var(--br-text-secondary) !important;
  border-color: var(--br-border) !important;
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .card-text {
  color: var(--br-text-body) !important;
}

/* =========================================================
   7. SECTION BLOCKS (bg-light, website-proelefsi, etc.)
   ========================================================= */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .bg-light {
    background-color: var(--br-bg-section-alt) !important;
    color: var(--br-text-body) !important;
  }

  html:not([data-theme="light"]) .bg-light h1,
  html:not([data-theme="light"]) .bg-light h2,
  html:not([data-theme="light"]) .bg-light h3,
  html:not([data-theme="light"]) .bg-light p,
  html:not([data-theme="light"]) .bg-light em {
    color: var(--br-text-body);
  }

  html:not([data-theme="light"]) .website-proelefsi {
    color: var(--br-text-body);
  }
}

[data-theme="dark"] .bg-light {
  background-color: var(--br-bg-section-alt) !important;
  color: var(--br-text-body) !important;
}

[data-theme="dark"] .bg-light h1,
[data-theme="dark"] .bg-light h2,
[data-theme="dark"] .bg-light h3,
[data-theme="dark"] .bg-light p,
[data-theme="dark"] .bg-light em {
  color: var(--br-text-body);
}

[data-theme="dark"] .website-proelefsi {
  color: var(--br-text-body);
}

/* =========================================================
   8. BUTTONS
   ========================================================= */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .btn-light {
    background-color: var(--br-bg-section-alt) !important;
    border-color: var(--br-border) !important;
    color: var(--br-text-body) !important;
  }

  html:not([data-theme="light"]) .btn-light:hover {
    background-color: var(--br-brand-primary) !important;
    color: #fff !important;
  }
}

[data-theme="dark"] .btn-light {
  background-color: var(--br-bg-section-alt) !important;
  border-color: var(--br-border) !important;
  color: var(--br-text-body) !important;
}

[data-theme="dark"] .btn-light:hover {
  background-color: var(--br-brand-primary) !important;
  color: #fff !important;
}

/* =========================================================
   9. FOOTER
   ========================================================= */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) footer,
  html:not([data-theme="light"]) .site-footer,
  html:not([data-theme="light"]) [class*="footer"] .region--shade-background {
    background-color: var(--br-bg-footer) !important;
    color: var(--br-text-on-dark);
  }

  html:not([data-theme="light"]) footer a,
  html:not([data-theme="light"]) .site-footer a {
    color: var(--br-text-link);
  }
}

[data-theme="dark"] footer,
[data-theme="dark"] .site-footer,
[data-theme="dark"] [class*="footer"] .region--shade-background {
  background-color: var(--br-bg-footer) !important;
  color: var(--br-text-on-dark);
}

[data-theme="dark"] footer a,
[data-theme="dark"] .site-footer a {
  color: var(--br-text-link);
}

/* =========================================================
   10. BASECORE region--bright-background OVERRIDE
   ========================================================= */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .region--bright-background:not(header):not(.header-top-highlighted) {
    background-color: var(--br-bg-body) !important;
    color: var(--br-text-body) !important;
  }
}

[data-theme="dark"] .region--bright-background:not(header):not(.header-top-highlighted) {
  background-color: var(--br-bg-body) !important;
  color: var(--br-text-body) !important;
}

/* =========================================================
   11. MOBILE MENU WIDGET
   ========================================================= */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .mt-mobile-menu-widget {
    background-color: var(--br-bg-header);
    border-top: 1px solid var(--br-border);
  }

  html:not([data-theme="light"]) .mt-input {
    background-color: var(--br-bg-card);
    color: var(--br-text-body);
    border-color: var(--br-border);
  }
}

[data-theme="dark"] .mt-mobile-menu-widget {
  background-color: var(--br-bg-header);
  border-top: 1px solid var(--br-border);
}

[data-theme="dark"] .mt-input {
  background-color: var(--br-bg-card);
  color: var(--br-text-body);
  border-color: var(--br-border);
}

/* =========================================================
   12. INTERNAL BANNER / HERO
   ========================================================= */

/* Light mode reset — prevent colors.css from darkening the banner */
html[data-theme="light"] .internal-banner-container,
html[data-theme="light"] .internal-banner-container::before {
  background-color: revert !important;
  background: revert !important;
}

/* Dark mode only */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .internal-banner-container {
    background-color: var(--br-bg-card) !important;
    color: var(--br-text-body) !important;
    position: relative;
  }

  html:not([data-theme="light"]) .internal-banner-container .hero-top,
  html:not([data-theme="light"]) .internal-banner-container .region--dark-background,
  html:not([data-theme="light"]) .internal-banner-container .region--bright-background {
    background-color: transparent !important;
    color: var(--br-text-body) !important;
  }

  /* Darken any background image */
  html:not([data-theme="light"]) .internal-banner-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
    pointer-events: none;
  }

  html:not([data-theme="light"]) .internal-banner-container .hero-top {
    position: relative;
    z-index: 2;
  }
}

[data-theme="dark"] .internal-banner-container {
  background-color: var(--br-bg-card) !important;
  color: var(--br-text-body) !important;
  position: relative;
}

[data-theme="dark"] .internal-banner-container .hero-top,
[data-theme="dark"] .internal-banner-container .region--dark-background,
[data-theme="dark"] .internal-banner-container .region--bright-background {
  background-color: transparent !important;
  color: var(--br-text-body) !important;
}

[data-theme="dark"] .internal-banner-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
  pointer-events: none;
}

[data-theme="dark"] .internal-banner-container .hero-top {
  position: relative;
  z-index: 2;
}

/* =========================================================
   13. HEADINGS
   ========================================================= */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) h1,
  html:not([data-theme="light"]) h2,
  html:not([data-theme="light"]) h3,
  html:not([data-theme="light"]) h4,
  html:not([data-theme="light"]) h5,
  html:not([data-theme="light"]) h6,
  html:not([data-theme="light"]) .h1,
  html:not([data-theme="light"]) .h2,
  html:not([data-theme="light"]) .h3,
  html:not([data-theme="light"]) .h4,
  html:not([data-theme="light"]) .h5,
  html:not([data-theme="light"]) .h6 {
    color: var(--br-text-body) !important;
  }
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[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(--br-text-body) !important;
}

/* =========================================================
   14. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  body,
  .dialog-off-canvas-main-canvas,
  .page-container,
  a {
    transition: none !important;
  }
}

/* =========================================================
   15. DARK MODE TOGGLE BUTTON
   ========================================================= */
.br-dark-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  background: var(--br-bg-card);
  border: 1px solid var(--br-border);
  border-radius: 50%;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 1.1rem;
  line-height: 1;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.br-dark-toggle:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  border-color: var(--br-brand-primary);
}