/* =============================================================
   CCRI Dark Mode Implementation
   Covers: styles.css, styles-nav.css, styles-footer.css, inline styles
   Add to the END of styles.css (or as a separate stylesheet loaded last)
   ============================================================= */

/* -------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES — light defaults, dark overrides
   ------------------------------------------------------------- */

:root {
  /* Brand greens */
  --dm-green-primary:     #00703c;
  --dm-green-mid:         #138e43;
  --dm-green-dark:        #01703a;

  /* Backgrounds */
  --dm-bg-page:           #ffffff;
  --dm-bg-surface:        #f5f5f5;
  --dm-bg-surface-2:      #ececec;
  --dm-bg-card-green:     #d8e0dc;
  --dm-bg-card-grey:      #e0e0e0;
  --dm-bg-card-warm:      #ece8e2;
  --dm-bg-nav:            #ffffff;
  --dm-bg-nav-dropdown:   #ffffff;
  --dm-bg-nav-alt:        #f5f5f5;
  --dm-bg-alert:          #ffffa8;
  --dm-bg-footer:         #000000;

  /* Text */
  --dm-text-body:         #282828;
  --dm-text-muted:        #424242;
  --dm-text-nav:          #292929;
  --dm-text-white:        #ffffff;
  --dm-text-alert:        #282828;
  --dm-text-link:         #2d5e7b;
  --dm-text-link-nav:     #00703c;

  /* Borders */
  --dm-border-body:       #282828;
  --dm-border-light:      #e4e4e4;
  --dm-border-mid:        #dcdcdc;
  --dm-border-nav-bottom: #00713a;

  /* Slider controls */
  --dm-slider-arrow:      #282828;
  --dm-slider-disabled:   #b0b0b0;

  /* Shadows */
  --dm-shadow-nav:        rgb(181 181 181 / 20%);
}

[data-theme="dark"] {
  /* Brand greens — slightly brighter for dark bg readability */
  --dm-green-primary:     #2ecc71;
  --dm-green-mid:         #27ae60;
  --dm-green-dark:        #2ecc71;

  /* Backgrounds */
  --dm-bg-page:           #121212;
  --dm-bg-surface:        #1e1e1e;
  --dm-bg-surface-2:      #2a2a2a;
  --dm-bg-card-green:     #1a2e24;
  --dm-bg-card-grey:      #252525;
  --dm-bg-card-warm:      #2a2420;
  --dm-bg-nav:            #1a1a1a;
  --dm-bg-nav-dropdown:   #1e1e1e;
  --dm-bg-nav-alt:        #252525;
  --dm-bg-alert:          #3a3800;
  --dm-bg-footer:         #0a0a0a;

  /* Text */
  --dm-text-body:         #e8e8e8;
  --dm-text-muted:        #b0b0b0;
  --dm-text-nav:          #e8e8e8;
  --dm-text-white:        #ffffff;
  --dm-text-alert:        #f0e68c;
  --dm-text-link:         #7ab8d4;
  --dm-text-link-nav:     #2ecc71;

  /* Borders */
  --dm-border-body:       #444444;
  --dm-border-light:      #333333;
  --dm-border-mid:        #3a3a3a;
  --dm-border-nav-bottom: #2ecc71;

  /* Slider controls */
  --dm-slider-arrow:      #e8e8e8;
  --dm-slider-disabled:   #555555;

  /* Shadows */
  --dm-shadow-nav:        rgb(0 0 0 / 40%);
}

/* Smooth transitions on theme switch */
body,
.nav-box,
.notifications-box,
.connect-link,
.home-boxes,
.campuses,
.attention-box-inner,
.campus-text,
.intro,
.presidents-message,
.hp-dropdown-menu,
.sideMenu,
footer,
.bread-box,
.add-edit-section,
.edit-section,
.local-nav a,
.accordion-fin .acc-btn,
.ccri-tabs .nav-tabs .nav-link,
.fac-complete-list-inside,
.fac-staff-card,
.table {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* -------------------------------------------------------------
   2. BASE & BODY  (styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] body {
  background-color: var(--dm-bg-page);
  color: var(--dm-text-body);
}

[data-theme="dark"] .ccri-main-content {
  background: var(--dm-bg-page);
  color: var(--dm-text-body);
}

/* Links */
[data-theme="dark"] a {
  color: var(--dm-text-link);
}

[data-theme="dark"] .edit-area a {
  color: var(--dm-text-link);
}

[data-theme="dark"] .edit-area a:hover {
  color: var(--dm-text-link);
}

/* -------------------------------------------------------------
   3. NAV BOX  (styles-nav.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .nav-box {
  background: var(--dm-bg-nav);
  box-shadow: 3px 2px 14px 1px var(--dm-shadow-nav);
}

[data-theme="dark"] .bg-light {
  background-color: var(--dm-bg-nav) !important;
}

[data-theme="dark"] .main-ccri-dropdown {
  color: var(--dm-text-nav) !important;
}

[data-theme="dark"] .main-ccri-dropdown:hover,
[data-theme="dark"] a#myccri_dropdown:hover {
  background-color: var(--dm-bg-surface-2) !important;
}

[data-theme="dark"] .endy .navbar-light .navbar-nav .show > .main-ccri-dropdown {
  color: var(--dm-text-nav) !important;
  background-color: var(--dm-bg-surface);
}

/* Hamburger icon lines */
[data-theme="dark"] .cd-menu-icon11,
[data-theme="dark"] .cd-menu-icon11::before,
[data-theme="dark"] .cd-menu-icon11::after {
  background-color: var(--dm-text-nav);
}

/* Nav buttons */
[data-theme="dark"] a.nav-btn.clear {
  background: var(--dm-bg-nav);
  color: var(--dm-text-body);
  border-color: var(--dm-border-body);
}

[data-theme="dark"] a.nav-btn.clear:hover {
  background: var(--dm-bg-surface-2);
}

/* Mobile side menu */
[data-theme="dark"] .sideMenu {
  background: var(--dm-bg-nav);
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link {
  color: var(--dm-text-nav);
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover {
  background: var(--dm-bg-surface-2);
}

[data-theme="dark"] .ccri-nav-drop {
  border-bottom-color: var(--dm-border-light);
}

[data-theme="dark"] .extra-mobile-links.container.d-xl-none {
  background: var(--dm-bg-surface);
}

[data-theme="dark"] .extra-mobile-links li a,
[data-theme="dark"] .extra-mobile-links .mobil-btn-box li a {
  color: var(--dm-text-nav) !important;
}

[data-theme="dark"] .extra-mobile-links li a:hover {
  background: var(--dm-bg-surface-2);
}

[data-theme="dark"] .back-link-text {
  background: rgba(255, 255, 255, 0.08);
  color: var(--dm-text-nav);
}

[data-theme="dark"] .side-main-menu {
  background: transparent;
}

[data-theme="dark"] .hp-dropdown-menu ul {
  background: none;
  border-color: var(--dm-border-light);
}

/* Desktop dropdown menus */
[data-theme="dark"] .navbar-expand-xl .navbar-nav .hp-dropdown-menu {
  background: var(--dm-bg-nav-dropdown);
  border-top-color: var(--dm-border-light);
  border-bottom-color: var(--dm-border-nav-bottom);
}

[data-theme="dark"] .hp-dropdown-menu a.nav-link {
  color: var(--dm-text-nav) !important;
}

[data-theme="dark"] .hp-dropdown-menu a.nav-link:hover {
  background-color: var(--dm-bg-surface-2);
}

[data-theme="dark"] .hp-dropdown-menu .dropdown-ccri-heading {
  color: var(--dm-green-primary);
}

[data-theme="dark"] .about-message-box,
[data-theme="dark"] .alt-box {
  background: var(--dm-bg-nav-alt);
}

[data-theme="dark"] .about-message-box:before,
[data-theme="dark"] .alt-box:before {
  background: var(--dm-bg-nav-alt);
}

[data-theme="dark"] .about-message {
  color: var(--dm-text-nav) !important;
}

[data-theme="dark"] a.about-feature {
  color: var(--dm-text-nav);
}

[data-theme="dark"] a.about-feature:hover {
  background-color: var(--dm-bg-surface-2);
}

[data-theme="dark"] .rip {
  color: var(--dm-text-nav) !important;
}

[data-theme="dark"] .featured-pro-box span {
  color: var(--dm-text-nav) !important;
}

[data-theme="dark"] a.see-all {
  color: var(--dm-text-nav) !important;
}

[data-theme="dark"] a.see-all:hover {
  background: var(--dm-bg-surface-2);
}

[data-theme="dark"] .dropdown-ccri-heading.featured-program-heading {
  color: var(--dm-text-nav) !important;
}

[data-theme="dark"] .mobile-local-nav-btn {
  background-color: var(--dm-bg-nav);
  border-color: var(--dm-border-body);
  color: var(--dm-text-nav);
}

[data-theme="dark"] .overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Journey section in nav */
[data-theme="dark"] h3.journey-title {
  color: var(--dm-text-nav);
}

[data-theme="dark"] .Jbox p {
  color: var(--dm-text-body);
}

[data-theme="dark"] .journey {
  background-color: var(--dm-bg-surface) !important;
  border-top-color: var(--dm-green-primary);
}

/* Search */
[data-theme="dark"] .se {
  background: var(--dm-bg-nav-dropdown);
  border-color: var(--dm-border-light);
}

/* -------------------------------------------------------------
   4. HERO / VIDEO SECTION  (inline styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .intro {
  background: var(--dm-bg-page);
}

/* Curved mask pseudo-elements use the bg color */
[data-theme="dark"] .intro:before,
[data-theme="dark"] .intro:after {
  background: var(--dm-bg-page);
}

[data-theme="dark"] h2.intro-text,
[data-theme="dark"] .intro p {
  color: var(--dm-text-body);
}

/* -------------------------------------------------------------
   5. NOTIFICATION / INFO BOXES  (inline styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .notifications-box {
  background: var(--dm-bg-surface);
  color: var(--dm-text-body);
}

[data-theme="dark"] .not-box-one  { background: var(--dm-bg-card-green); }
[data-theme="dark"] .not-box-three { background: var(--dm-bg-card-grey); }
[data-theme="dark"] .not-box-four  { background: var(--dm-bg-card-warm); }

[data-theme="dark"] span.not-box-heading { color: var(--dm-text-body); }
[data-theme="dark"] .not-box-body p      { color: var(--dm-text-body); }

[data-theme="dark"] .not-check {
  color: var(--dm-text-body);
  border-color: var(--dm-border-body);
}

[data-theme="dark"] .notifications-box:hover .not-check {
  background: #128e43;
  color: #ffffff;
  border-color: #128e43;
}

/* -------------------------------------------------------------
   6. EMERGENCY / ATTENTION BOX  (inline styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .attention-box-inner {
  background: var(--dm-bg-alert);
}

[data-theme="dark"] .attention-text p,
[data-theme="dark"] .attention-text a {
  color: var(--dm-text-alert);
}

[data-theme="dark"] button#closeNotification {
  border-color: var(--dm-text-alert);
  color: var(--dm-text-alert);
}

[data-theme="dark"] button#closeNotification:hover {
  background: var(--dm-text-alert);
  color: var(--dm-bg-alert);
}

/* -------------------------------------------------------------
   7. LET'S GET STARTED / PATHWAYS  (inline styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .why-boxes {
  background: var(--dm-bg-page);
}

[data-theme="dark"] .get-started-description h2,
[data-theme="dark"] .pathways-description h2,
[data-theme="dark"] .hp-pathways p {
  color: var(--dm-text-body);
}

/* -------------------------------------------------------------
   8. CCRI CONNECT SECTION  (inline styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .connect-link {
  background: var(--dm-bg-card-green);
}

[data-theme="dark"] .ccri-connect h2,
[data-theme="dark"] .ccri-connect p {
  color: var(--dm-text-body);
}

[data-theme="dark"] .ccri-connect:before {
  background: var(--dm-bg-page);
}

[data-theme="dark"] .ccri-connect:after {
  background: var(--dm-bg-surface);
}

/* President message */
[data-theme="dark"] .presidents-message {
  background: var(--dm-bg-card-green);
  color: var(--dm-text-body);
}

[data-theme="dark"] a.presidents-message:hover {
  filter: brightness(1.15);
}

[data-theme="dark"] .ccri-connect.pres-message:before {
  background: var(--dm-bg-surface);
}

[data-theme="dark"] .ccri-connect.pres-message:after {
  background: var(--dm-bg-page);
}

[data-theme="dark"] .ccri-connect p.prez-text-para {
  color: var(--dm-text-body) !important;
}

[data-theme="dark"] .prez-button {
  background: var(--dm-bg-surface);
  color: var(--dm-text-body);
}

/* -------------------------------------------------------------
   9. NEWS & EVENTS  (inline styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .home-boxes {
  background: var(--dm-bg-surface);
}

[data-theme="dark"] .home-boxes h2 {
  color: var(--dm-text-body);
}

/* News dropdown menu buttons */
[data-theme="dark"] .news-menu button {
  background: var(--dm-bg-surface-2);
  color: var(--dm-text-body);
}

[data-theme="dark"] .news-menu .dropdown-menu.show {
  background: var(--dm-bg-nav-dropdown);
  border-color: var(--dm-border-light);
}

[data-theme="dark"] .news-menu a.dropdown-item {
  color: var(--dm-text-body);
}

/* News slider title */
[data-theme="dark"] .news-slider-2025 h4.slider-title {
  color: var(--dm-text-body);
}

/* Slider arrows — all three sliders */
[data-theme="dark"] .news-slider-2025 .slick-prev,
[data-theme="dark"] .news-slider-2025 .slick-next,
[data-theme="dark"] .events-slider-2025 .slick-prev,
[data-theme="dark"] .events-slider-2025 .slick-next,
[data-theme="dark"] .campuses-slide .slick-prev,
[data-theme="dark"] .campuses-slide .slick-next {
  border-color: var(--dm-slider-arrow);
}

[data-theme="dark"] .news-slider-2025 .slick-prev:before,
[data-theme="dark"] .news-slider-2025 .slick-next:before,
[data-theme="dark"] .events-slider-2025 .slick-prev:before,
[data-theme="dark"] .events-slider-2025 .slick-next:before,
[data-theme="dark"] .campuses-slide .slick-prev:before,
[data-theme="dark"] .campuses-slide .slick-next:before {
  color: var(--dm-slider-arrow);
}

[data-theme="dark"] .news-slider-2025 .slick-prev.slick-disabled,
[data-theme="dark"] .news-slider-2025 .slick-next.slick-disabled,
[data-theme="dark"] .events-slider-2025 .slick-prev.slick-disabled,
[data-theme="dark"] .events-slider-2025 .slick-next.slick-disabled,
[data-theme="dark"] .campuses-slide .slick-prev.slick-disabled,
[data-theme="dark"] .campuses-slide .slick-next.slick-disabled {
  border-color: var(--dm-slider-disabled);
}

[data-theme="dark"] .news-slider-2025 .slick-prev.slick-disabled:before,
[data-theme="dark"] .news-slider-2025 .slick-next.slick-disabled:before,
[data-theme="dark"] .events-slider-2025 .slick-prev.slick-disabled:before,
[data-theme="dark"] .events-slider-2025 .slick-next.slick-disabled:before,
[data-theme="dark"] .campuses-slide .slick-prev.slick-disabled:before,
[data-theme="dark"] .campuses-slide .slick-next.slick-disabled:before {
  color: var(--dm-slider-disabled);
}

/* Fade gradient on slider text — fix for dark bg */
[data-theme="dark"] .slider-text p::after {
  background: linear-gradient(to right, rgba(30, 30, 30, 0), var(--dm-bg-surface) 50%);
}

[data-theme="dark"] .grey-background .slider-text p::after {
  background: linear-gradient(to right, rgba(30, 30, 30, 0), var(--dm-bg-surface) 50%);
}

/* -------------------------------------------------------------
   10. CAMPUSES SECTION  (inline styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .campuses {
  background: var(--dm-bg-surface);
}

[data-theme="dark"] .campuses h2,
[data-theme="dark"] .campuses h3,
[data-theme="dark"] .campus-intro-para,
[data-theme="dark"] .campus-address {
  color: var(--dm-text-body);
}

[data-theme="dark"] .campus-intro-para a {
  color: var(--dm-text-link);
}

[data-theme="dark"] .campus-text {
  background: var(--dm-bg-card-green);
}

[data-theme="dark"] a.campus-box:hover .not-check {
  background: #128e43;
  color: #ffffff;
  border-color: #128e43;
}

/* -------------------------------------------------------------
   11. APPLY CTA / FULL WIDTH TWO  (styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .full-width-two {
  /* keeps its background-image, just ensure text stays white */
  color: #fff !important;
}

[data-theme="dark"] .full-width-two-heading {
  color: #ffffff;
}

[data-theme="dark"] .full-width-two p.tag-line {
  color: #fff;
}

/* -------------------------------------------------------------
   12. BREADCRUMB  (styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .bread-box {
  background: transparent;
}

[data-theme="dark"] .breadcrumb a,
[data-theme="dark"] .edit-area .breadcrumb a {
  color: var(--dm-text-body);
}

[data-theme="dark"] .breadcrumb .first-crumb a,
[data-theme="dark"] .edit-area .breadcrumb .first-crumb a {
  color: var(--dm-green-primary);
}

[data-theme="dark"] .breadcrumb li {
  color: var(--dm-text-body);
}

[data-theme="dark"] .breadcrumb li:last-of-type {
  background: var(--dm-bg-surface);
  color: var(--dm-text-body);
}

/* -------------------------------------------------------------
   13. CONTENT / EDIT AREA  (styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .grey-background,
[data-theme="dark"] #grey-background {
  background: var(--dm-bg-surface);
}

[data-theme="dark"] .add-edit-section,
[data-theme="dark"] .content-block {
  background: var(--dm-bg-page);
  color: var(--dm-text-body);
}

[data-theme="dark"] h1 {
  color: var(--dm-text-body);
}

[data-theme="dark"] h2 {
  color: var(--dm-green-primary);
}

[data-theme="dark"] .edit-area h3,
[data-theme="dark"] .fullwidth-edit-section h3 {
  color: var(--dm-text-body);
}

[data-theme="dark"] h4 {
  color: var(--dm-text-body);
}

[data-theme="dark"] h5 {
  color: var(--dm-text-body);
}

[data-theme="dark"] h2.heading-black {
  color: var(--dm-text-body);
}

[data-theme="dark"] p.tag-line {
  color: var(--dm-text-body);
}

[data-theme="dark"] .main-edit-section {
  color: var(--dm-text-body);
}

/* Tables */
[data-theme="dark"] .table {
  color: var(--dm-text-body);
  border-color: var(--dm-border-light);
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  border-color: var(--dm-border-mid) !important;
}

[data-theme="dark"] .table th {
  background: var(--dm-bg-surface-2);
  color: var(--dm-text-body);
}

[data-theme="dark"] .table tbody tr:nth-of-type(odd) {
  background-color: var(--dm-bg-surface);
}

[data-theme="dark"] .grey-background .table tbody tr:nth-of-type(odd) {
  background-color: var(--dm-bg-surface-2);
}

/* -------------------------------------------------------------
   14. LOCAL NAV  (styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .local-nav a {
  color: var(--dm-text-body);
}

[data-theme="dark"] .local-nav a:hover {
  background: var(--dm-bg-surface-2);
}

[data-theme="dark"] .local-nav a.dropdown-toggle {
  background: var(--dm-bg-surface);
}

[data-theme="dark"] .local-nav-dropdown {
  background: var(--dm-bg-surface-2);
}

[data-theme="dark"] .local-nav li {
  border-bottom-color: var(--dm-border-mid);
}

[data-theme="dark"] ul.local-nav {
  border-color: var(--dm-border-mid);
}

[data-theme="dark"] .side-bar-heading {
  color: var(--dm-green-primary);
  border-bottom-color: var(--dm-green-primary);
}

[data-theme="dark"] .mobile-local-nav-btn {
  background-color: var(--dm-bg-page);
  border-color: var(--dm-border-body);
  color: var(--dm-text-body);
}

[data-theme="dark"] .grey-background .local-nav a.dropdown-toggle {
  background: var(--dm-bg-surface-2);
}

/* -------------------------------------------------------------
   15. ACCORDIONS  (styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .accordion-fin .acc-btn {
  color: var(--dm-text-body);
  border-bottom-color: var(--dm-border-mid);
}

[data-theme="dark"] .accordion-fin .acc-btn:hover {
  background: var(--dm-bg-surface-2);
}

[data-theme="dark"] .accordion-desc {
  border-bottom-color: var(--dm-border-mid);
}

[data-theme="dark"] .acc-btn p {
  color: var(--dm-text-body);
}

/* -------------------------------------------------------------
   16. TABS  (styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .ccri-tabs .tab-pane {
  background: var(--dm-bg-page);
  border-color: var(--dm-border-light);
}

[data-theme="dark"] .ccri-tabs .nav-tabs .nav-link {
  background: var(--dm-bg-page);
  border-color: var(--dm-border-body);
  color: var(--dm-text-body);
}

[data-theme="dark"] .ccri-tabs .nav-tabs .nav-link:hover {
  background: var(--dm-bg-surface-2);
}

[data-theme="dark"] .ccri-tabs .nav-tabs .nav-item.show .nav-link,
[data-theme="dark"] .ccri-tabs .nav-tabs .nav-link.active {
  background-color: var(--dm-green-primary);
  border-color: var(--dm-green-primary);
  color: #fff;
}

/* -------------------------------------------------------------
   17. FACULTY & STAFF  (styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .fac-list-btn {
  background-color: var(--dm-bg-page);
  color: var(--dm-text-body);
  border-color: var(--dm-border-body) !important;
}

[data-theme="dark"] .fac-list-btn:hover {
  background: var(--dm-bg-surface);
  color: var(--dm-text-body);
}

[data-theme="dark"] .fac-complete-list-inside {
  background: var(--dm-bg-surface);
  border-color: var(--dm-border-body);
}

[data-theme="dark"] .fac-staff-card {
  background: var(--dm-bg-surface);
}

[data-theme="dark"] p.side-bar-heading-fac {
  color: var(--dm-text-body);
}

[data-theme="dark"] .local-nav-box.fac-nav {
  border-top-color: var(--dm-border-mid);
}

/* -------------------------------------------------------------
   18. NEWS SLIDERS (styles.css global)
   ------------------------------------------------------------- */

[data-theme="dark"] h4.slider-title {
  color: var(--dm-text-body);
}

[data-theme="dark"] p.slider-date {
  color: var(--dm-text-muted);
}

[data-theme="dark"] .slider-text p {
  color: var(--dm-text-body);
}

[data-theme="dark"] .slider-text p::after {
  background: linear-gradient(to right, rgba(18, 18, 18, 0), var(--dm-bg-page) 50%);
}

[data-theme="dark"] .include-box {
  background: var(--dm-bg-surface);
}

/* -------------------------------------------------------------
   19. CARD BLOCKS  (styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .block-card-heading {
  color: var(--dm-text-body);
}

[data-theme="dark"] span.small-block-card-header {
  color: var(--dm-text-body);
}

[data-theme="dark"] a.small-block-card {
  color: var(--dm-text-body);
}

[data-theme="dark"] a.small-block-card:hover {
  background: var(--dm-bg-surface-2);
}

/* -------------------------------------------------------------
   20. CONTACT BOX  (styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .contact-box {
  color: var(--dm-text-body);
}

[data-theme="dark"] .contact-box h3 {
  color: var(--dm-green-primary);
}

[data-theme="dark"] .contact-box a {
  color: var(--dm-text-link);
}

[data-theme="dark"] .contact-box form.ldpforms input,
[data-theme="dark"] .contact-box form.ldpforms textarea {
  background: var(--dm-bg-surface);
  color: var(--dm-text-body);
}

/* -------------------------------------------------------------
   21. QUOTE BLOCK  (styles.css)
   ------------------------------------------------------------- */

/* Quote is green background — stays as-is in dark mode, already high contrast */

/* -------------------------------------------------------------
   22. COOKIE BANNER  (styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] div#CookieBanner {
  background: var(--dm-bg-nav);
  color: var(--dm-text-body);
}

/* -------------------------------------------------------------
   23. FOOTER  (styles-footer.css)
   ------------------------------------------------------------- */

/* Footer is already black (#000000) — only minor tweaks needed */

[data-theme="dark"] footer {
  background: var(--dm-bg-footer);
}

[data-theme="dark"] footer a:hover {
  color: #83ffc5;
}

[data-theme="dark"] .footer-lower hr {
  border-top-color: #333333;
}

/* -------------------------------------------------------------
   24. MASTHEAD / HEADER IMAGES  (styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .display-background-image {
  background-color: var(--dm-bg-surface);
}

/* Text on dark background-image heroes stays white — no override needed */

/* -------------------------------------------------------------
   25. BACK TO TOP BUTTON
   ------------------------------------------------------------- */

/* Already green — fine in both modes */

/* -------------------------------------------------------------
   26. PROGRAM PAGE STYLES  (styles.css)
   ------------------------------------------------------------- */

[data-theme="dark"] .menu-edit-section-inside.program-details {
  background: var(--dm-bg-surface);
}

[data-theme="dark"] h3.side-headers {
  color: var(--dm-text-body);
}

/* -------------------------------------------------------------
   27. DARK MODE TOGGLE BUTTON (add to nav)
   ------------------------------------------------------------- */

#dark-mode-toggle {
  background: transparent;
  border: solid 1px currentColor;
  border-radius: 50%;
  width: 2.2em;
  height: 2.2em;
  font-size: 1em;
  cursor: pointer;
  color: inherit;
  transition: background 0.3s, color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#dark-mode-toggle:hover {
  background: rgba(128, 128, 128, 0.2);
}