/* =====================================================================
   JA Helple — DARK MODE
   Light mode is the original design and is NOT modified. Every rule below
   is scoped under html[data-theme="dark"] (mirrored by html.t4-dark, which
   darkmode.js/pre-paint also set). Dark MIRRORS light — same relationships,
   never adds contrast light lacks. This template has ZERO color CSS custom
   properties (literal-hex build) so everything here is literal overrides,
   centralized through the --dm-* palette below.
   Brand accent (#c6475a default / #3633be blue style) is KEPT in dark.
   ===================================================================== */

html[data-theme="dark"] {
  --dm-bg:        #14151a;   /* page background            */
  --dm-band:      #191b21;   /* gray/alt section band      */
  --dm-surface:   #1e2028;   /* cards / white surfaces     */
  --dm-surface-2: #262a33;   /* elevated / form inputs     */
  --dm-border:    #313540;   /* dividers / frames          */
  --dm-field:     #454a57;   /* input outline (one step up)*/
  --dm-text:      #c4c7cf;   /* body text                  */
  --dm-muted:     #9297a2;   /* meta / muted text          */
  --dm-heading:   #f0f1f5;   /* headings                   */
  --dm-accent:    #c6475a;   /* brand (default style)      */
  --dm-link:      #e0697b;   /* lifted accent for text links */
  color-scheme: dark;
}
/* blue template style keeps its indigo brand on dark */
html[data-theme="dark"] body.theme-blue { --dm-accent:#3633be; --dm-link:#8f8bff; }

/* ------------------------------------------------------------------ *
 * 1. Page shell
 * ------------------------------------------------------------------ */
html[data-theme="dark"] body,
html[data-theme="dark"] #t4-wrapper,
html[data-theme="dark"] .t4-wrapper,
html[data-theme="dark"] .site,
html[data-theme="dark"] #t4-body,
html[data-theme="dark"] .t4-content,
html[data-theme="dark"] .t4-mainbody {
  background-color: var(--dm-bg);
  color: var(--dm-text);
}
/* slideshow / acm owl section inner (light-gray in light) */
html[data-theme="dark"] .acm-slideshow.acm-owl,
html[data-theme="dark"] .acm-owl { background-color: var(--dm-bg); }
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"] .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"] .txt-number,
html[data-theme="dark"] .number,
html[data-theme="dark"] .sub-heading { color: var(--dm-heading); }

/* Bootstrap .text-dark utility → readable on dark (light's near-black is invisible) */
html[data-theme="dark"] .text-dark { color: var(--dm-text) !important; }

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] dd,
html[data-theme="dark"] dt,
html[data-theme="dark"] td,
html[data-theme="dark"] th { color: var(--dm-text); }

/* ------------------------------------------------------------------ *
 * 2. Section palettes (literal per-palette bg/text rules in the bundle)
 * ------------------------------------------------------------------ */
html[data-theme="dark"] .t4-palette-mainnav,
html[data-theme="dark"] .t4-palette-light {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text);
}
html[data-theme="dark"] .t4-palette-gray {
  background-color: var(--dm-band) !important;
  color: var(--dm-text);
}
html[data-theme="dark"] .t4-palette-dark {
  background-color: #101216 !important;
  color: var(--dm-text);
}
/* Footer is already dark in the light design → keep it IDENTICAL in dark
   (owner request). Light footer bg is #1c1c1c; do not darken it further. */
html[data-theme="dark"] .t4-palette-footer,
html[data-theme="dark"] #t4-footnav,
html[data-theme="dark"] #t4-footer {
  background-color: #1c1c1c !important;
}
/* .t4-palette-blue = brand fill (#c6475a) — KEEP as-is (brand). */

/* ------------------------------------------------------------------ *
 * 3. Header
 * ------------------------------------------------------------------ */
html[data-theme="dark"] #t4-header-wrap,
html[data-theme="dark"] .t4-megamenu-wrap { background-color: transparent; }
/* the header section wrapper is palette-mainnav → covered above (surface) */
html[data-theme="dark"] #t4-header .t4-section.t4-header {
  background-color: var(--dm-surface) !important;
}
/* logo sits on .bg-primary coral block — keep it (brand) */

/* Nav link rest colors per palette (bundle rules are color-only + !important) */
html[data-theme="dark"] .t4-palette-mainnav .t4-navbar .navbar-nav > li > a,
html[data-theme="dark"] .t4-palette-light .t4-navbar .navbar-nav > li > a {
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .t4-navbar .navbar-nav > li.active > a,
html[data-theme="dark"] .t4-navbar .navbar-nav > li.show > a,
html[data-theme="dark"] .t4-navbar .navbar-nav > li > a:hover,
html[data-theme="dark"] .t4-navbar .navbar-nav > li > a:focus {
  color: var(--dm-accent) !important;
}
/* megamenu caret triangle (per palette, !important, border-top-color) */
html[data-theme="dark"] .t4-palette-mainnav .t4-navbar .navbar-nav > li > a .item-caret::before,
html[data-theme="dark"] .t4-palette-light .t4-navbar .navbar-nav > li > a .item-caret::before {
  border-top-color: var(--dm-text) !important;
}

/* Megamenu / dropdown panels */
html[data-theme="dark"] .t4-megamenu .dropdown-menu,
html[data-theme="dark"] .t4-megamenu .megamenu > .dropdown-menu,
html[data-theme="dark"] .megamenu-content,
html[data-theme="dark"] .t4-navbar .dropdown-menu {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text);
}
html[data-theme="dark"] .t4-megamenu .mega-col-nav .mega-nav > li > a,
html[data-theme="dark"] .t4-megamenu .dropdown-item {
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .t4-megamenu .mega-col-nav .mega-nav > li > a:hover,
html[data-theme="dark"] .t4-megamenu .dropdown-item:hover,
html[data-theme="dark"] .t4-megamenu .dropdown-item:focus {
  color: var(--dm-accent) !important;
  background-color: transparent !important;   /* no hover fill on megamenu items (owner request) */
}
html[data-theme="dark"] .t4-megamenu .mega-group-title,
html[data-theme="dark"] .t4-megamenu .megamenu-title,
html[data-theme="dark"] .t4-megamenu .mega-col-title { color: var(--dm-heading) !important; }

/* ------------------------------------------------------------------ *
 * 4. Off-canvas (mobile drilldown)
 * ------------------------------------------------------------------ */
html[data-theme="dark"] .t4-offcanvas,
html[data-theme="dark"] .off-canvas-right,
html[data-theme="dark"] .off-canvas-left,
html[data-theme="dark"] .t4-offcanvas .t4-offcanvas-body,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .offcanvas-body {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text);
}
/* off-canvas nav links (top-level #212529 + sub #585858 → dark-on-dark) */
html[data-theme="dark"] .off-canvas-right .nav-link,
html[data-theme="dark"] .off-canvas-left .nav-link,
html[data-theme="dark"] .off-canvas-right .nav li a,
html[data-theme="dark"] .t4-offcanvas .nav-link,
html[data-theme="dark"] .t4-offcanvas a { color: var(--dm-text) !important; }
html[data-theme="dark"] .off-canvas-right .nav-link:hover,
html[data-theme="dark"] .off-canvas-right .active > .nav-link,
html[data-theme="dark"] .off-canvas-right .current > .nav-link,
html[data-theme="dark"] .t4-offcanvas .nav-link:hover,
html[data-theme="dark"] .t4-offcanvas .active > .nav-link { color: var(--dm-accent) !important; }
html[data-theme="dark"] .off-canvas-right .dropdown-menu,
html[data-theme="dark"] .t4-offcanvas .dropdown-menu,
html[data-theme="dark"] .t4-offcanvas .sub-menu-back { background-color: var(--dm-surface) !important; }
/* drilldown arrows / close circles: dark chip, keep chevron visible */
html[data-theme="dark"] .t4-offcanvas .sub-menu-toggle.btn-toggle,
html[data-theme="dark"] .t4-offcanvas .js-offcanvas-close,
html[data-theme="dark"] .t4-off-canvas-header .js-offcanvas-close,
html[data-theme="dark"] .t4-offcanvas .close,
html[data-theme="dark"] .t4-offcanvas .btn-toggle {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}

/* ------------------------------------------------------------------ *
 * 5. Cards / surfaces (white-in-light)
 * ------------------------------------------------------------------ */
html[data-theme="dark"] .card,
html[data-theme="dark"] .item-inner,
html[data-theme="dark"] .dt-donate .campaign-list .campaign-item .item-inner,
html[data-theme="dark"] .acm-members .member-item,
html[data-theme="dark"] .acm-testimonials .testimonial-item,
html[data-theme="dark"] .acm-features .feature-item,
html[data-theme="dark"] .blog-item .item-content,
html[data-theme="dark"] #ja-form,
html[data-theme="dark"] .ja-form,
html[data-theme="dark"] .well,
html[data-theme="dark"] .panel {
  background-color: var(--dm-surface);
  color: var(--dm-text);
  border-color: var(--dm-border);
}
/* white-in-light ACM inner panels — match the source 3-class specificity */
html[data-theme="dark"] .acm-hero.style-1 .hero-content,
html[data-theme="dark"] .acm-features.style-8 .features-detail,
html[data-theme="dark"] .acm-features .features-detail,
html[data-theme="dark"] .owl-article .item,
html[data-theme="dark"] .items-row .item,
html[data-theme="dark"] .t4-module .module-inner {
  background-color: var(--dm-surface);
  color: var(--dm-text);
}
html[data-theme="dark"] .acm-hero.style-1 .hero-content h1,
html[data-theme="dark"] .acm-hero.style-1 .hero-content h2,
html[data-theme="dark"] .acm-hero.style-1 .hero-content h3,
html[data-theme="dark"] .owl-article .item h1,
html[data-theme="dark"] .owl-article .item h2,
html[data-theme="dark"] .owl-article .item h3,
html[data-theme="dark"] .owl-article .item h4,
html[data-theme="dark"] .t4-module .module-inner h1,
html[data-theme="dark"] .t4-module .module-inner h2,
html[data-theme="dark"] .t4-module .module-inner h3 { color: var(--dm-heading); }
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .item-inner h1, html[data-theme="dark"] .item-inner h2,
html[data-theme="dark"] .item-inner h3, html[data-theme="dark"] .item-inner h4,
html[data-theme="dark"] .item-inner h5, html[data-theme="dark"] .item-inner h6 {
  color: var(--dm-heading);
}

/* ------------------------------------------------------------------ *
 * 6. Forms
 * ------------------------------------------------------------------ */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .inputbox,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] .input-text,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] #login-form .form-control,
html[data-theme="dark"] .profile-edit #member-profile input,
html[data-theme="dark"] .dt-donate input,
html[data-theme="dark"] .dt-donate textarea {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border: 1px solid var(--dm-field) !important;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .inputbox:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-accent) !important;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .inputbox::placeholder { color: var(--dm-muted) !important; }
html[data-theme="dark"] label,
html[data-theme="dark"] .control-label,
html[data-theme="dark"] legend { color: var(--dm-text); }

/* ------------------------------------------------------------------ *
 * 7. DT Donate — progress bars / campaign meta
 * ------------------------------------------------------------------ */
html[data-theme="dark"] .dt-donate .campaign-process-bar,
html[data-theme="dark"] .dt-donate .process-bar { background-color: var(--dm-border) !important; }
html[data-theme="dark"] .dt-donate .fund-details .campaign-raised-info { color: var(--dm-heading); }
html[data-theme="dark"] .dt-donate .fund-details .campaign-raised-info + .campaign-raised-info,
html[data-theme="dark"] .dt-donate .campaign-raised-info { border-color: var(--dm-border) !important; }

/* ------------------------------------------------------------------ *
 * 8. Borders / dividers / utilities
 * ------------------------------------------------------------------ */
html[data-theme="dark"] hr { border-color: var(--dm-border); }
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left,
html[data-theme="dark"] .border-right { border-color: var(--dm-border) !important; }

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

/* breadcrumb divider */
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--dm-muted); }
html[data-theme="dark"] .breadcrumb-item a { color: var(--dm-link); }
html[data-theme="dark"] .breadcrumb-item.active { color: var(--dm-muted); }

/* general prose links */
html[data-theme="dark"] .t4-content a:not(.btn),
html[data-theme="dark"] article a:not(.btn) { color: var(--dm-link); }

/* tables */
html[data-theme="dark"] .table { color: var(--dm-text); border-color: var(--dm-border); }
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td { border-color: var(--dm-border); }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255,255,255,.03);
  color: var(--dm-text);
}

/* pagination */
html[data-theme="dark"] .pagination .page-link {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .pagination .page-item.active .page-link {
  background-color: var(--dm-accent);
  border-color: var(--dm-accent);
  color: #fff;
}

/* alerts keep bootstrap semantic colors; just soften default */
html[data-theme="dark"] .alert { border-color: var(--dm-border); }

/* ------------------------------------------------------------------ *
 * 9. Masthead (photo bg + light text) — keep overlay, ensure dark tint
 * ------------------------------------------------------------------ */
html[data-theme="dark"] .ja-masthead::before,
html[data-theme="dark"] .ja-masthead .masthead-overlay {
  background-color: rgba(10,11,15,.45);
}

/* ------------------------------------------------------------------ *
 * 9b. Page-specific white surfaces (from per-page audit)
 * ------------------------------------------------------------------ */
/* Typography / article content slab */
html[data-theme="dark"] .core-typo,
html[data-theme="dark"] .com-users-profile.profile,
html[data-theme="dark"] .profile-edit,
html[data-theme="dark"] .com-finder,
html[data-theme="dark"] .finder,
html[data-theme="dark"] .contact .plain-style .contact-information .inner,
html[data-theme="dark"] .acm-members .mem-item,
html[data-theme="dark"] .acm-members.style-1 .mem-item {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text);
}
/* their text/headings */
html[data-theme="dark"] .core-typo p,
html[data-theme="dark"] .contact .plain-style .contact-information .inner,
html[data-theme="dark"] .contact-information .inner dt,
html[data-theme="dark"] .contact-information .inner dd,
html[data-theme="dark"] .contact-information .inner span,
html[data-theme="dark"] .contact-information .inner a,
html[data-theme="dark"] .com-users-profile.profile dd,
html[data-theme="dark"] .com-users-profile.profile dt,
html[data-theme="dark"] .acm-members .mem-item .mem-info { color: var(--dm-text); }
html[data-theme="dark"] .acm-members .mem-item .mem-name,
html[data-theme="dark"] .acm-members .mem-item .mem-name a { color: var(--dm-heading); }
/* member social pills (#ebebeb light chip → dark chip on dark card) */
html[data-theme="dark"] .acm-members .mem-item .link-icon a,
html[data-theme="dark"] .mem-item .link-icon ul li a,
html[data-theme="dark"] .acm-members .social a { background-color: var(--dm-surface-2) !important; }
html[data-theme="dark"] .acm-members .mem-item .link-icon a i,
html[data-theme="dark"] .mem-item .link-icon ul li a { color: var(--dm-text) !important; }
html[data-theme="dark"] .acm-members .mem-item .link-icon a:hover { background-color: var(--dm-accent) !important; }
html[data-theme="dark"] .acm-members .mem-item .link-icon a:hover i { color:#fff !important; }

/* contact-info values (txt-day / show / jicons still black on dark) */
html[data-theme="dark"] .contact-information .inner .txt-day,
html[data-theme="dark"] .contact-information .inner .show-1,
html[data-theme="dark"] .contact-information .inner .jicons-text,
html[data-theme="dark"] .contact-information .txt-day,
html[data-theme="dark"] .contact-information dt,
html[data-theme="dark"] .contact-information dd,
html[data-theme="dark"] .contact-information span,
html[data-theme="dark"] .jaquickcontact .txt-day,
html[data-theme="dark"] .plain-style .contact-information *,
html[data-theme="dark"] .contact .contact-misc,
html[data-theme="dark"] .contact .contact-misc .inner,
html[data-theme="dark"] .contact .contact-misc .txt-day,
html[data-theme="dark"] .contact .contact-misc li,
html[data-theme="dark"] .contact .list-info li,
html[data-theme="dark"] .contact .list-info .txt-day,
html[data-theme="dark"] .txt-day { color: var(--dm-text) !important; }
html[data-theme="dark"] .contact-information .inner h1,
html[data-theme="dark"] .contact-information .inner h2,
html[data-theme="dark"] .contact-information .inner h3,
html[data-theme="dark"] .contact-information .inner h4 { color: var(--dm-heading); }

/* feature icon boxes: blend with the card (owner: don't show a second shade) */
html[data-theme="dark"] .acm-features .info-img,
html[data-theme="dark"] .acm-features.style-4 .features-detail .info-img,
html[data-theme="dark"] .acm-features .features-detail .info-img { background-color: transparent !important; border-color: transparent !important; }

/* form input-group addon icons (#ebebeb) */
html[data-theme="dark"] .input-group-text { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-field) !important; }

/* <mark> highlight — dark amber tint instead of light-yellow block */
html[data-theme="dark"] mark { background-color: rgba(245,186,72,.22); color: var(--dm-heading); }

/* .btn-light (MDB cream/#fff light button) → dark surface */
html[data-theme="dark"] .btn-light {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

/* com_finder search-terms label + campaign amount titles (near-black → readable) */
html[data-theme="dark"] .com-finder label,
html[data-theme="dark"] .com-finder .form-label,
html[data-theme="dark"] .finder label,
html[data-theme="dark"] .ptl-title,
html[data-theme="dark"] .view-campaign .campaign-info .ptl-title,
html[data-theme="dark"] .campaign-info .ptl-title { color: var(--dm-heading); }

/* Blue template style: its #3633be brand is too dark to read as TEXT on the dark page.
   Keep brand on FILLS (CTAs), but lift accent-as-text to the companion light blue.
   NOTE (owner review): this lift is NARROWED to genuine accent text / article prose
   links only. It used to also list `.menu-item-title` and `.t4-content a:not(.btn)`,
   which repainted EVERY nav label, title, footer link and meta value indigo. Those
   are removed so they fall back to white/grey (mirroring light); nav/title/footer
   handled by the dedicated rules below + the site-wide title/footer rules. */
html[data-theme="dark"] body.theme-blue .text-primary,
html[data-theme="dark"] body.theme-blue .campaign-info .ptl-title,
html[data-theme="dark"] body.theme-blue .t4-navbar .navbar-nav > li > a:hover,
html[data-theme="dark"] body.theme-blue .t4-megamenu .mega-col-nav .mega-nav > li > a:hover,
html[data-theme="dark"] body.theme-blue article a:not(.btn) { color: #8f8bff !important; }

/* profile field-value table dividers */
html[data-theme="dark"] .com-users-profile.profile .dl-horizontal dt,
html[data-theme="dark"] .com-users-profile.profile .dl-horizontal dd,
html[data-theme="dark"] .com-users-profile.profile table,
html[data-theme="dark"] .com-users-profile.profile th,
html[data-theme="dark"] .com-users-profile.profile td { border-color: var(--dm-border); }

/* off-canvas / secondary bootstrap nav links (dark-on-dark guard) */
html[data-theme="dark"] .nav-header.nav-link,
html[data-theme="dark"] .nav-header.nav-link.dropdown-toggle { color: var(--dm-text); }

/* light hairline row dividers */
html[data-theme="dark"] .acm-stats .row,
html[data-theme="dark"] .acm-features .row { border-color: var(--dm-border) !important; }

/* <pre>/<code> article code blocks — near-white in light → dark surface */
html[data-theme="dark"] pre,
html[data-theme="dark"] .core-typo pre {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text);
  border-color: var(--dm-border);
}

/* alerts — tone the light Bootstrap fills to dark tints (keep the semantic hue on text/border) */
html[data-theme="dark"] .alert-info    { background-color: rgba(13,202,240,.10); color:#8fd6e8; }
html[data-theme="dark"] .alert-success { background-color: rgba(76,175,80,.10);  color:#8fce93; }
html[data-theme="dark"] .alert-warning { background-color: rgba(245,186,72,.12);  color:#f0cf8a; }
html[data-theme="dark"] .alert-danger  { background-color: rgba(244,67,54,.10);   color:#ef9a93; }

/* ------------------------------------------------------------------ *
 * 9c. Blog / category / tagged / article / campaign detail
 * ------------------------------------------------------------------ */
/* leading blog/featured card white slab (source 0,4,0) */
html[data-theme="dark"] .items-leading .blog-item .blog-item-content .item-content,
html[data-theme="dark"] .blog .item-content,
html[data-theme="dark"] .blog-featured .item-content {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text);
}
/* tagged-items list-group white panel */
html[data-theme="dark"] .list-group,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .com-tags-tag__category.list-group,
html[data-theme="dark"] .list-group-item-action {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text);
}
html[data-theme="dark"] .com-tags-tag.tag-category .category li a,
html[data-theme="dark"] .list-group-item-action { color: var(--dm-text) !important; }
html[data-theme="dark"] .com-tags-tag.tag-category .category li a:hover,
html[data-theme="dark"] .list-group-item-action:hover { color: var(--dm-accent) !important; background-color: rgba(255,255,255,.04) !important; }

/* article check-list labels (near-black on dark) */
html[data-theme="dark"] .com-content-article .list-info ul li { color: var(--dm-text); }

/* .lead intro / donor names (source color:#000) */
html[data-theme="dark"] .lead { color: var(--dm-text); }

/* sidebar tag pills (light-grey #ebebeb → dark chip) */
html[data-theme="dark"] .tags li,
html[data-theme="dark"] .tagspopular li { background-color: var(--dm-surface-2) !important; }
html[data-theme="dark"] .tags li a,
html[data-theme="dark"] .tagspopular li a { color: var(--dm-text) !important; }
html[data-theme="dark"] .tags li a:hover,
html[data-theme="dark"] .tagspopular li a:hover { color: var(--dm-accent) !important; }

/* pagination counter bright border */
html[data-theme="dark"] .counter,
html[data-theme="dark"] p.counter { border-color: var(--dm-border) !important; color: var(--dm-muted); }

/* module/dropdown sidebar-menu submenu links low-contrast + white hover pill */
html[data-theme="dark"] .moduletable .nav li a,
html[data-theme="dark"] .module_menu .nav li a { color: var(--dm-text); }
html[data-theme="dark"] .moduletable .nav li a:hover,
html[data-theme="dark"] .module_menu .nav li a:hover,
html[data-theme="dark"] .t4-megamenu .moduletable .nav li.nav-item a:hover {
  color: var(--dm-accent) !important;
  background-color: rgba(255,255,255,.04) !important;
}

/* ------------------------------------------------------------------ *
 * 9d. Standalone 404 (error.php) — its own white card (#errorboxoutline)
 * ------------------------------------------------------------------ */
html[data-theme="dark"] .page-error #errorboxoutline,
html[data-theme="dark"] .page-error #outline,
html[data-theme="dark"] .page-error .error {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text);
}
html[data-theme="dark"] .page-error .error-message h2,
html[data-theme="dark"] .page-error .error-message span,
html[data-theme="dark"] .page-error #errorboxbody { color: var(--dm-heading); }
html[data-theme="dark"] .page-error #errorboxbody p { color: var(--dm-text); }

/* ------------------------------------------------------------------ *
 * 10. Theme toggle button (visible in BOTH modes — the one unscoped block)
 *     Solid header → transparent button, icon = header text colour.
 * ------------------------------------------------------------------ */
.t4-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #212529;                 /* dark icon on the light header */
  cursor: pointer;
  position: relative;
  transition: background-color .2s ease, color .2s ease;
}
.t4-theme-toggle:hover { background-color: rgba(0,0,0,.06); }
.t4-theme-toggle svg { position: absolute; transition: opacity .2s ease, transform .2s ease; }
.t4-theme-toggle__moon { opacity: 1; }
.t4-theme-toggle__sun  { opacity: 0; }

html[data-theme="dark"] .t4-theme-toggle { color: var(--dm-heading); }
html[data-theme="dark"] .t4-theme-toggle:hover { background-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .t4-theme-toggle__moon { opacity: 0; }
html[data-theme="dark"] .t4-theme-toggle__sun  { opacity: 1; }

/* ==================================================================== *
 * REV2 — per-page deep-audit findings (all pages, subagent verified)
 * ==================================================================== */

/* --- Bright #ebebeb borders on feature cards + stat bands (About, Home2) ---
 * Source ships literal #ebebeb 1px frames that stay light on the dark page. */
html[data-theme="dark"] .acm-features .features-detail { border-color: var(--dm-border); }
html[data-theme="dark"] .acm-features.run-number .item + .item { border-left-color: var(--dm-border) !important; }
html[data-theme="dark"] .acm-features.run-number .features-item { border-top-color: var(--dm-border) !important; }

/* --- Home2 (blue style) off-canvas / collapsed-mega ACTIVE item ------------
 * --dm-accent is raw indigo #3633be on the blue style (~1.9:1 as text). Lift
 * the off-canvas + collapsed-megamenu active link to the readable #8f8bff. */
html[data-theme="dark"] body.theme-blue .t4-megamenu > ul > li.active > a,
html[data-theme="dark"] body.theme-blue .t4-megamenu > ul > li.active > .nav-link,
html[data-theme="dark"] body.theme-blue .t4-megamenu > ul > li.show > a,
html[data-theme="dark"] body.theme-blue .t4-megamenu > ul > li.show > .nav-link,
html[data-theme="dark"] body.theme-blue .t4-offcanvas .active > .nav-link,
html[data-theme="dark"] body.theme-blue .t4-offcanvas .current > .nav-link,
html[data-theme="dark"] body.theme-blue .off-canvas-right .active > .nav-link { color: #8f8bff !important; }

/* --- Blockquote (single article + typography): bright left-bar + dim cite --- */
html[data-theme="dark"] blockquote { border-left-color: var(--dm-border); }
html[data-theme="dark"] blockquote small,
html[data-theme="dark"] blockquote .small,
html[data-theme="dark"] blockquote cite { color: var(--dm-muted); }

/* --- Inline <code> (typography): #bd4147 fails AA on #14151a → lifted brand -- */
html[data-theme="dark"] code { color: var(--dm-link); }

/* --- Standalone 404: the big "404" number (.error-code #151515) is invisible - */
html[data-theme="dark"] .page-error .error-code { color: var(--dm-heading); }

/* --- com_users Password-Reset + Username-Reminder: near-white #f8f9fa card ---- */
html[data-theme="dark"] div.com-users-remind,
html[data-theme="dark"] div.com-users-reset { background-color: var(--dm-surface); }

/* ==================================================================== *
 * REV2 — T4 frontend edit-layout (profile edit / article submit) rules.
 *
 * KNOWN LIMITATION (not currently active): the T4 "edit" document
 * (body.t4-edit-layout) renders through LayoutHelper::render('/t4/edit') and
 * bypasses BOTH the template layout-override chain AND the T4 {t4:*}/{t4post:*}
 * head-token pipeline — so index.php never runs, css/darkmode.css is never
 * enqueued, and even {t4:language} is left unparsed. A template layout override
 * (html/layouts/t4/edit.php) and the T4 system_advancedCodeBeforeHead global
 * param were both verified NOT to reach this view. The only injection point that
 * does is a system plugin on onBeforeCompileHead — out of scope for a template
 * package, and unsolved across all sibling JoomlArt templates. These rules are
 * kept, correct + ready: if darkmode.css is ever enqueued on the edit document
 * (plugin/future T4 hook), the whole form themes with no further work. Until
 * then this one authenticated form renders in Joomla's default light chrome.
 * ==================================================================== */
html[data-theme="dark"] body.t4-edit-layout { background-color: var(--dm-bg); color: var(--dm-text); }
html[data-theme="dark"] .t4-edit-layout legend,
html[data-theme="dark"] .t4-edit-layout label,
html[data-theme="dark"] .t4-edit-layout .control-label { color: var(--dm-text); }
html[data-theme="dark"] .t4-edit-layout fieldset,
html[data-theme="dark"] .t4-edit-layout fieldset.adminform { border-color: var(--dm-border); }
/* Choices.js select widget */
html[data-theme="dark"] .t4-edit-layout .choices__inner {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-field) !important;
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .t4-edit-layout .choices__input { background-color: transparent !important; border-color: transparent !important; color: var(--dm-text) !important; }
html[data-theme="dark"] .t4-edit-layout .choices__list--dropdown,
html[data-theme="dark"] .t4-edit-layout .choices__list[aria-expanded] {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-field) !important;
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .t4-edit-layout .choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: var(--dm-surface-2) !important; }
html[data-theme="dark"] .t4-edit-layout .choices__list--single .choices__item,
html[data-theme="dark"] .t4-edit-layout .choices__placeholder,
html[data-theme="dark"] .t4-edit-layout .choices__list--multiple .choices__item { color: var(--dm-text) !important; }
/* Joomla switcher (radio toggle) + toggle-editor track */
html[data-theme="dark"] .t4-edit-layout .switcher label,
html[data-theme="dark"] .t4-edit-layout fieldset.switcher label,
html[data-theme="dark"] .t4-edit-layout fieldset.radio.btn-group label.btn {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .t4-edit-layout .switcher input:checked + label,
html[data-theme="dark"] .t4-edit-layout fieldset.radio.btn-group input:checked + label.btn {
  background-color: var(--dm-accent) !important;
  border-color: var(--dm-accent) !important;
  color: #fff !important;
}
html[data-theme="dark"] .t4-edit-layout .toggle-outside { background-color: var(--dm-surface-2) !important; }
/* Joomla media/action buttons render light-grey → subtle dark button */
html[data-theme="dark"] .t4-edit-layout .btn.button-select,
html[data-theme="dark"] .t4-edit-layout .btn.button-clear,
html[data-theme="dark"] .t4-edit-layout .field-media-input,
html[data-theme="dark"] .t4-edit-layout .field-media-preview {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-field) !important;
  color: var(--dm-text) !important;
}

/* ==================================================================== *
 * REV3 — live owner review (default style)
 * ==================================================================== */

/* --- Footer links: keep the LIGHT footer colours (footer is dark already).
 * The generic prose-link rule (.t4-content a) was tinting them coral; footer
 * sits inside .t4-content, so restore the light grey (#828282). Phone number
 * is .text-primary → stays brand coral in both, leave it. --- */
html[data-theme="dark"] .t4-palette-footer a:not(.btn):not(.text-primary),
html[data-theme="dark"] .t4-footnav a:not(.btn):not(.text-primary) { color: #828282; }
html[data-theme="dark"] .t4-palette-footer a:not(.btn):not(.text-primary):hover,
html[data-theme="dark"] .t4-footnav a:not(.btn):not(.text-primary):hover { color: var(--dm-accent); }
/* copyright / GNU bar (separate .mod-footer section) — light grey #585858 */
html[data-theme="dark"] .mod-footer a:not(.btn),
html[data-theme="dark"] .footer2 a:not(.btn) { color: #585858; }
html[data-theme="dark"] .mod-footer a:not(.btn):hover,
html[data-theme="dark"] .footer2 a:not(.btn):hover { color: var(--dm-accent); }
/* footer module blocks: light leaves them transparent (no card) — the generic
 * .t4-module .module-inner surface rule was boxing them a lighter shade than the
 * footer. Keep them transparent so they match the footer bg exactly. */
html[data-theme="dark"] .t4-palette-footer .module-inner,
html[data-theme="dark"] .t4-footnav .module-inner { background-color: transparent !important; }

/* --- Home1 campaign hero card (.campaign-item): white in light AND dark, but
 * dark repaints the text near-white → invisible on white. It sits beside/over
 * the photo, so make it an opaque dark surface (text is already light). --- */
html[data-theme="dark"] .campaign-item { background-color: var(--dm-surface) !important; }

/* --- Title / heading LINKS (blog, category, featured, module article lists,
 * any heading-element link in the content). A heading reads as a heading:
 * WHITE at rest, and on hover stays WHITE with just an underline (owner
 * request — no red). Mirrors light's near-black title with a subtle hover. --- */
html[data-theme="dark"] .heading-link,
html[data-theme="dark"] .mod-articles-category-title-link,
html[data-theme="dark"] .item-title a,
html[data-theme="dark"] .article-header h1 a,
html[data-theme="dark"] .article-header h2 a,
html[data-theme="dark"] .page-header h1 a,
html[data-theme="dark"] .page-header h2 a,
html[data-theme="dark"] .t4-content h1 > a,
html[data-theme="dark"] .t4-content h2 > a,
html[data-theme="dark"] .t4-content h3 > a,
html[data-theme="dark"] .t4-content h4 > a,
html[data-theme="dark"] .t4-content h5 > a,
html[data-theme="dark"] .t4-content h6 > a {
  color: var(--dm-heading) !important;
  text-decoration: none;
}
html[data-theme="dark"] .heading-link:hover,
html[data-theme="dark"] .mod-articles-category-title-link:hover,
html[data-theme="dark"] .item-title a:hover,
html[data-theme="dark"] .article-header h1 a:hover,
html[data-theme="dark"] .article-header h2 a:hover,
html[data-theme="dark"] .page-header h1 a:hover,
html[data-theme="dark"] .page-header h2 a:hover,
html[data-theme="dark"] .t4-content h1 > a:hover,
html[data-theme="dark"] .t4-content h2 > a:hover,
html[data-theme="dark"] .t4-content h3 > a:hover,
html[data-theme="dark"] .t4-content h4 > a:hover,
html[data-theme="dark"] .t4-content h5 > a:hover,
html[data-theme="dark"] .t4-content h6 > a:hover {
  color: var(--dm-heading) !important;
  text-decoration: underline;
}

/* --- Pagination: inactive numbers/arrows were coral (looked pre-pressed) via
 * the prose-link rule. Only the ACTIVE page is the coral fill; the rest are
 * neutral with a real hover state — mirroring light. --- */
html[data-theme="dark"] .pagination .page-item:not(.active) .page-link {
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .pagination .page-item:not(.active) .page-link:hover {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-field) !important;
  color: var(--dm-heading) !important;
}

/* --- List / nav links (blog categories module, campaign "more" lists, login
 * page links). Coral via the prose-link rule; owner wants them WHITE with a
 * plain underline on hover (no colour shift) — calmer than light's grey. --- */
html[data-theme="dark"] .mod-articlescategories a,
html[data-theme="dark"] .categories-module a,
html[data-theme="dark"] .com-content-category-blog__links a,
html[data-theme="dark"] .com-content-category-blog__link,
html[data-theme="dark"] .login-wrap .other-links a,
html[data-theme="dark"] .com-users-login a:not(.btn),
html[data-theme="dark"] .login a:not(.btn),
html[data-theme="dark"] .mod-login a:not(.btn) {
  color: var(--dm-heading) !important;
  text-decoration: none;
}
html[data-theme="dark"] .mod-articlescategories a:hover,
html[data-theme="dark"] .categories-module a:hover,
html[data-theme="dark"] .com-content-category-blog__links a:hover,
html[data-theme="dark"] .com-content-category-blog__link:hover,
html[data-theme="dark"] .login-wrap .other-links a:hover,
html[data-theme="dark"] .com-users-login a:not(.btn):hover,
html[data-theme="dark"] .login a:not(.btn):hover,
html[data-theme="dark"] .mod-login a:not(.btn):hover {
  color: var(--dm-heading) !important;
  text-decoration: underline;
}

/* ==================================================================== *
 * REV3 — Home2 (theme-blue) owner review
 * ==================================================================== */

/* --- Issue 1: top nav + megamenu dropdown text is indigo at rest. -----------
 * Root cause: the broad theme-blue indigo text-lift catch-all
 * (`body.theme-blue .t4-content a:not(.btn)`, line ~424) matches every link
 * on the page — including nav items and dropdown items — because the whole
 * page (header included) sits inside .t4-content. Restore WHITE at rest
 * (mirrors light: solid nav bar + dark text there maps to solid dark bar +
 * light text here). Hover/active keep the existing indigo-lift (line
 * ~419-421 for top-level nav; added below for dropdown items, which had no
 * theme-blue-specific hover of their own). --- */
html[data-theme="dark"] body.theme-blue .t4-navbar .navbar-nav > li > a,
html[data-theme="dark"] body.theme-blue .t4-megamenu .mega-col-nav .mega-nav > li > a,
html[data-theme="dark"] body.theme-blue .t4-megamenu .dropdown-item,
html[data-theme="dark"] body.theme-blue .t4-navbar .dropdown-menu .dropdown-item {
  color: var(--dm-heading) !important;
}
html[data-theme="dark"] body.theme-blue .t4-megamenu .dropdown-item:hover,
html[data-theme="dark"] body.theme-blue .t4-megamenu .dropdown-item:focus,
html[data-theme="dark"] body.theme-blue .nav-item.active > .dropdown-item,
html[data-theme="dark"] body.theme-blue .nav-item.current > .dropdown-item {
  color: #8f8bff !important;
}

/* --- Issue 2: filled "MAKE A DONATION" CTA (a T4 menu item) has its label
 * wrapped in <span class="menu-item-title">, which the same indigo-lift
 * catch-all above also repaints purple — even though it sits on a solid
 * indigo button fill. Filled buttons keep WHITE text (mirrors light: white
 * label on filled button). Plain menu links are handled by Issue 1 above. --- */
html[data-theme="dark"] body.theme-blue .btn .menu-item-title,
html[data-theme="dark"] body.theme-blue .btn-primary .menu-item-title {
  color: #fff !important;
}

/* --- Issue 3: Home2 "We Need Your Help" (.acm-features.style-2) icon-row
 * cards. Light ships this row with NO card background (fully transparent;
 * only hairline borders separate the 3 columns — see home2 screenshot). The
 * generic ACM white-panel rule (~line 204,
 * `.acm-features .features-detail { background-color: var(--dm-surface); }`)
 * is written for the style-8 variant and unintentionally boxes style-2 too,
 * producing a mismatched seam against the page background. Blend style-2's
 * cards back into the section/page background. --- */
html[data-theme="dark"] .acm-features.style-2 .features-detail {
  background-color: transparent;
}

/* --- Issue 4: Home2 campaign slider (.camp-slide owl-carousel: "A resilient
 * logistics sector can save lives and livelihoods"). --- */
/* a) title — the theme-blue indigo-lift catch-all (line ~424) beats the
 *    site-wide .heading-link fix (line ~673) for this element; needs a
 *    theme-blue-scoped, higher-specificity override. Mirrors light's
 *    near-black-on-light-panel with near-white-on-dark-panel. */
html[data-theme="dark"] body.theme-blue .camp-slide .item .mod-articles-category-title a,
html[data-theme="dark"] body.theme-blue .camp-slide .item .heading-link {
  color: var(--dm-heading) !important;
}
/* b) description — light source ships this literal #585858 grey with its
 *    own !important (scoped `.camp-slide .item .mod-articles-category-introtext`),
 *    which beats the generic dark <p> rule (line ~64). Lift to --dm-text so
 *    it stays legible once the card is dark instead of light. */
html[data-theme="dark"] .camp-slide .item .mod-articles-category-introtext {
  color: var(--dm-text) !important;
}
/* c) indigo stats panel (CURRENT / GOAL / DAYS LEFT / DONORS POST) — panel
 *    fill stays brand indigo (mirrors light); light renders the numbers
 *    pure white, but the theme-blue indigo-lift catch-all explicitly lists
 *    `.campaign-info .ptl-title` and repaints them low-contrast lavender in
 *    dark. Force white back on the solid indigo fill. Labels already
 *    inherit light's own translucent white unchanged — no fix needed. */
html[data-theme="dark"] body.theme-blue .article-fields.bg-primary .campaign-info .ptl-title {
  color: #fff !important;
}

/* ==== REV3b — Home2 theme-blue owner review, round 2 ====
 * The two indigo-lift catch-alls (.menu-item-title + .t4-content a) were
 * NARROWED in the REV2 block above. Restore each element that relied on the
 * fallback: nav LABEL spans, hero title, all content titles, footer, badge. */

/* Nav labels are in <span class="menu-item-title"> inside the <a> — the <a> is
 * white (Issue 1) but the span was still indigo. White at rest, readable indigo
 * (#8f8bff, NOT the raw #3633be) on hover. */
html[data-theme="dark"] body.theme-blue .t4-navbar .menu-item-title,
html[data-theme="dark"] body.theme-blue .t4-megamenu .dropdown-item .menu-item-title {
  color: var(--dm-heading) !important;
}
html[data-theme="dark"] body.theme-blue .t4-navbar .navbar-nav > li > a:hover .menu-item-title,
html[data-theme="dark"] body.theme-blue .t4-megamenu .dropdown-item:hover .menu-item-title {
  color: #8f8bff !important;
}
/* Dropdown + megamenu-COLUMN item labels (.dropdown-item / .mega-nav .nav-link):
 * their .menu-item-title span is pinned white at rest, and the hover rule above
 * only reaches top-level nav — so submenu items showed NO hover colour. Scope to
 * .t4-navbar (there is no .t4-megamenu wrapper on this header). */
html[data-theme="dark"] body.theme-blue .t4-navbar .dropdown-item:hover .menu-item-title,
html[data-theme="dark"] body.theme-blue .t4-navbar .dropdown-item:focus .menu-item-title,
html[data-theme="dark"] body.theme-blue .t4-navbar .mega-nav .nav-link:hover .menu-item-title,
html[data-theme="dark"] body.theme-blue .t4-navbar .mega-nav .nav-link:focus .menu-item-title {
  color: #8f8bff !important;
}

/* Hero slide-title link (over the photo) — white like light. */
html[data-theme="dark"] body.theme-blue .slide-title .heading-link,
html[data-theme="dark"] body.theme-blue .slide-title a { color: #fff !important; }

/* All content title links on theme-blue → white, white underline on hover
 * (owner request; higher specificity than the remaining `article a` lift). */
html[data-theme="dark"] body.theme-blue .t4-content .heading-link,
html[data-theme="dark"] body.theme-blue .t4-content .mod-articles-category-title-link,
html[data-theme="dark"] body.theme-blue .t4-content .item-title a,
html[data-theme="dark"] body.theme-blue .t4-content h1 > a,
html[data-theme="dark"] body.theme-blue .t4-content h2 > a,
html[data-theme="dark"] body.theme-blue .t4-content h3 > a,
html[data-theme="dark"] body.theme-blue .t4-content h4 > a,
html[data-theme="dark"] body.theme-blue .t4-content h5 > a,
html[data-theme="dark"] body.theme-blue .t4-content h6 > a {
  color: var(--dm-heading) !important;
  text-decoration: none;
}
html[data-theme="dark"] body.theme-blue .t4-content .heading-link:hover,
html[data-theme="dark"] body.theme-blue .t4-content .mod-articles-category-title-link:hover,
html[data-theme="dark"] body.theme-blue .t4-content .item-title a:hover,
html[data-theme="dark"] body.theme-blue .t4-content h1 > a:hover,
html[data-theme="dark"] body.theme-blue .t4-content h2 > a:hover,
html[data-theme="dark"] body.theme-blue .t4-content h3 > a:hover,
html[data-theme="dark"] body.theme-blue .t4-content h4 > a:hover,
html[data-theme="dark"] body.theme-blue .t4-content h5 > a:hover,
html[data-theme="dark"] body.theme-blue .t4-content h6 > a:hover {
  color: var(--dm-heading) !important;
  text-decoration: underline;
}

/* Campaign slider category badge (green pill): label is .menu-item-title — keep
 * it readable (white) on the green fill. */
html[data-theme="dark"] body.theme-blue .camp-slide .menu-item-title { color: #fff !important; }

/* --- Stats row (.acm-features.style-9): 4 stat cards merged into 2 blocks.
 * Light keeps the col wrapper (.features-detail) TRANSPARENT and only the
 * .inner.bg-light box is the cream card. The generic ACM white-panel rule
 * (~line 202) boxed .features-detail too, so the surface filled the gutters and
 * fused adjacent cards. Make the col transparent (mirror light) → the .inner
 * cards read as 4 distinct surfaces with the page showing between them. --- */
html[data-theme="dark"] .acm-features.style-9 .features-detail { background-color: transparent !important; }

/* --- Campaign list rows (.info-desc.bg-light): light ships them cream
 * (#faf4ed) which is ~invisible on the white page (blends). Dark turned it into
 * a #1e2028 card that stands out — not mirroring light's blend. Make it
 * transparent so the row sits flush on the main background (owner request). --- */
html[data-theme="dark"] .info-desc.bg-light { background-color: transparent !important; }

/* --- Campaign LIST items (.camp-list-items .item, "We Arrange Many Social
 * Events" — date badge + title + meta). Light ships each .item as a white card
 * (#fff) that is ~invisible on the white page; dark turned it into a #1e2028
 * card, so the row read as two backgrounds (surface card vs the main-bg strip
 * behind the indigo date badge). Blend the item into the main background. --- */
html[data-theme="dark"] .camp-list-items .item { background-color: transparent !important; }

/* ==== REV3 — Tagged-items owner review ==== */
/* White-leak row on hover: com_tags renders a component-scoped rule
 * `.com-tags-tag.tag-category .category li:hover { background-color:#e9ecef !important }`
 * (source: media/t4/optimize/css/*.css, from templates/ja_helple/css/template.css).
 * It targets the same <li class="list-group-item list-group-item-action"> rows
 * and, at (0,4,1) with !important, out-specifies our REV2 hover fix at
 * `html[data-theme="dark"] .list-group-item-action:hover` (0,3,1) — so on
 * hover the row still painted #e9ecef (near-white) even though the
 * REV2 rule's rgba(255,255,255,.04) "won" for color. Verified live:
 * before fix, computed background-color on hover = rgb(233,236,239).
 * Beat it with an equal/higher-specificity dark-scoped selector. */
html[data-theme="dark"] .com-tags-tag.tag-category .category li:hover {
  background-color: var(--dm-surface-2) !important;
}

/* Title links must not flip to accent/coral on hover here: light keeps the
 * title link locked to its own near-black `#0d0f22 !important` in BOTH
 * hover and non-hover states (verified live — computed color identical
 * before/during hover in light). REV2's combined
 * `.com-tags-tag.tag-category .category li a:hover { color: var(--dm-accent) }`
 * deviates from that (adds a color light never uses here). Re-pin to the
 * same heading tone used site-wide for titles so hover reads like the rest
 * of the site (white/light text), not coral. Same selector as REV2's rule,
 * declared later in the cascade so it wins at equal specificity. */
html[data-theme="dark"] .com-tags-tag.tag-category .category li a:hover,
html[data-theme="dark"] .com-tags-tag.tag-category .category li a:focus {
  color: var(--dm-heading) !important;
}