/* ============================================================================
   JA Vital — Dark mode
   ----------------------------------------------------------------------------
   Light mode is the original, approved design and is NOT modified here. Every
   rule below is scoped under html[data-theme="dark"]. Dark MIRRORS light — it
   reproduces the same relationships (subtle bands, faint dividers, brand accent)
   rather than adding contrast light does not have.

   This file is loaded AFTER template.css (via addCustomTag in index.php) so it
   wins equal-specificity ties. It lives in its OWN file — never custom.css
   (that is the site owner's "Edit Custom CSS" slot).

   Brand accent (KEEP): --color-primary #26b0eb (cyan-blue). Secondary #323183.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1) Dark palette — one source of truth. Tuned to mirror light's relationships.
   2) Token remap — JA Vital serves T4 base color tokens at runtime; re-pointing
      them under the dark hook fixes whole swaths of the UI in one place.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;

  /* dark palette */
  --dm-bg:        #10151d;   /* page background          */
  --dm-band:      #161c26;   /* .bg-light / alt sections */
  --dm-surface:   #1a212d;   /* cards / panels           */
  --dm-surface-2: #222b39;   /* elevated / hover         */
  --dm-border:    #2b3543;   /* dividers / frames        */
  --dm-hairline:  #1c2531;   /* faint decorative dividers (FAQ/team/section) */
  --dm-field-border: #3a4658;/* form fields (one step up)*/
  --dm-heading:   #eef2f8;   /* headings / strong text   */
  --dm-text:      #c2cad6;   /* body copy                */
  --dm-text-muted:#8b95a5;   /* meta / muted             */

  /* brand accent — keep the template's primary; lighter hover for dark */
  --dm-accent:       #26b0eb;
  --dm-accent-hover: #59c6f2;
  /* navy links (#323183) go nearly black on dark — lift to a readable blue */
  --dm-link:         #6ea8ff;
  --dm-link-hover:   #9cc4ff;

  /* ---- remap the T4 base tokens (the big lever) ---- */
  --body-bg-color:            var(--dm-bg);
  --body-text-color:          var(--dm-text);
  --color-dark:               var(--dm-heading);   /* #333 → drives headings */
  --color-light:              var(--dm-band);       /* #f8f9fa → bg-light bands */
  --body-link-color:          var(--dm-link);
  --body-link-hover-color:    var(--dm-link-hover);
  --mainnav-link-color:       var(--dm-text);
  --mainnav-text-color:       var(--dm-text);
  --footer-bg-color:          var(--dm-band);
  --footer-text-color:        var(--dm-text-muted);
  --footer-link-color:        var(--dm-text-muted);
  --footer-link-hover-color:  var(--dm-heading);
  /* KEEP: --color-primary / --primary / --color-secondary (brand) */
}

/* ---------------------------------------------------------------------------
   Page shell
   --------------------------------------------------------------------------- */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--dm-bg);
  color: var(--dm-text);
}
html[data-theme="dark"] .t4-wrapper,
html[data-theme="dark"] #t4-body,
html[data-theme="dark"] .t4-mainbody,
html[data-theme="dark"] .t4-content,
html[data-theme="dark"] .site-content {
  background-color: var(--dm-bg);
}

/* Header: ONE uniform dark band. The outer section paints --dm-bg; every inner
   wrapper stays transparent so no second (lighter) navy shade can show through.
   Light mode has NO visible line under the header (its #f4f4f4 hairline is
   imperceptible on white), so dark must not draw one either — see the
   #t4-header hairline neutralize further down. */
html[data-theme="dark"] .t4-header,
html[data-theme="dark"] .t4-section.t4-header,
html[data-theme="dark"] .t4-palette-mainnav {
  background-color: var(--dm-bg);
}
html[data-theme="dark"] #t4-header-wrap,
html[data-theme="dark"] .t4-header-inner,
html[data-theme="dark"] .t4-navbar {
  background-color: transparent;
}

/* Headings mirror light's dark headings */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .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 {
  color: var(--dm-heading);
}

/* Body links */
html[data-theme="dark"] a { color: var(--dm-link); }
html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus { color: var(--dm-link-hover); }

/* ============================================================================
   Theme toggle button — the ONE block visible in BOTH light and dark.
   Header bar is transparent/white → transparent button, icon follows header
   text color (dark icon on light header). Icons cross-fade on the dark hook.
   ========================================================================== */
.t4-theme-toggle {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; margin: 0 .25rem;
  border: 0; border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  position: relative;
  line-height: 0;
  transition: background-color .2s ease, color .2s ease;
}
.t4-theme-toggle:hover,
.t4-theme-toggle:focus-visible {
  background: rgba(0, 0, 0, .06);
  color: var(--color-primary, #26b0eb);
}
.t4-theme-toggle svg { width: 20px; height: 20px; display: block; }
/* Toggle placement: desktop lives in .t4-action next to the "Book Appointment"
   button; the mobile copy stays in the navbar (its parent .t4-action is hidden
   below lg). Only one is visible per breakpoint. */
.theme-toggle-slot { display: inline-flex; align-items: center; }
.theme-toggle-slot--desktop { margin-right: .25rem; }
/* stack the two icons, cross-fade */
.t4-theme-toggle__sun,
.t4-theme-toggle__moon {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .2s ease;
}
.t4-theme-toggle__sun  { opacity: 0; }
.t4-theme-toggle__moon { opacity: 1; }
html[data-theme="dark"] .t4-theme-toggle__sun  { opacity: 1; }
html[data-theme="dark"] .t4-theme-toggle__moon { opacity: 0; }
/* In dark, the header is dark → hover wash lightens */
html[data-theme="dark"] .t4-theme-toggle:hover,
html[data-theme="dark"] .t4-theme-toggle:focus-visible {
  background: rgba(255, 255, 255, .10);
  color: var(--dm-accent-hover);
}

/* ===========================================================================
   GLOBAL LAYOUT FIXES (NOT dark-specific — apply in light AND dark). These are
   pre-existing T4 template layout bugs; placed here because custom.css and the
   compiled template.css are off-limits. They are unscoped on purpose.
   =========================================================================== */
/* [LAYOUT] Collapsed mega-menu (≤lg): the parent-item caret is display:flex
   (block-level) so it drops onto its own line below the item text. Make it
   inline so it sits to the right of the label. Desktop (flex anchor) unaffected. */
.t4-megamenu .dropdown-toggle .item-caret {
  display: inline-flex;
  vertical-align: middle;
}
/* [LAYOUT] Off-canvas drawer: the nav list has -36px side margins but the drawer
   body pads 32px, so each row is 4px too wide and the absolutely-positioned
   submenu chevron (right:0) sits flush against / 4px past the drawer edge. Inset
   the chevron so it clears the edge. */
.t4-offcanvas .t4-off-canvas-body .sub-menu-toggle.btn-toggle,
.t4-offcanvas .sub-menu-toggle.btn-toggle {
  right: 10px;
}

/* ---------------------------------------------------------------------------
   Dark-text sweep cleanup — literal #333/#495057 spots the token remap missed.
   --------------------------------------------------------------------------- */
/* Home FAQ accordion headers (.acm-accordion .card-header a) */
html[data-theme="dark"] .acm-accordion .card-header a { color: var(--dm-heading); }
/* Home "Department Facilities" tab feature list (Medical Quality, …) */
html[data-theme="dark"] .features-list li { color: var(--dm-text); }
/* Sidebar tag-module links carry #495057 !important */
html[data-theme="dark"] .tags li a,
html[data-theme="dark"] .tagspopular li a { color: var(--dm-text) !important; }
/* Latest-users module pills */
html[data-theme="dark"] .latestusers li {
  background: var(--dm-surface-2);
  color: var(--dm-text);
}
/* Required-field asterisk (#c00/#cc0000) is too dark on the dark surface.
   Redden the ASTERISK only (.star / span.required) — NOT a whole label.required
   (com_users profile-edit labels carry class="required"; light keeps them gray
   and reddens only the <span class="star">, so mirror that). */
html[data-theme="dark"] .star,
html[data-theme="dark"] #row_term_condition .required,
html[data-theme="dark"] span.required { color: #ff6b6b; }
/* Contact form legend + misc-info link */
html[data-theme="dark"] .contact legend { color: var(--dm-text); }
html[data-theme="dark"] .contact .contact-miscinfo a,
html[data-theme="dark"] .contact-info a,
html[data-theme="dark"] .contact-address a { color: var(--dm-link); }

/* ============================================================================
   Standalone docs (error.php / offline.php) — own <html>, load darkmode.css +
   their own css/error.css|offline.css. Make the white centre card a dark surface
   so the whole doc reads dark (pre-paint already darkened the outer body).
   ========================================================================== */
html[data-theme="dark"] #errorboxoutline {
  background: var(--dm-surface);
}
html[data-theme="dark"] .error-code,
html[data-theme="dark"] .error-message h2 {
  color: var(--dm-heading);
}
html[data-theme="dark"] #errorboxbody p,
html[data-theme="dark"] body.page-error { color: var(--dm-text); }
/* keep the cyan Home button's label white (global link remap tinted it) */
html[data-theme="dark"] a.button-home,
html[data-theme="dark"] .button-home { color: #fff; }
/* Offline login doc: darken its frame + fields */
html[data-theme="dark"] #frame,
html[data-theme="dark"] .outline > #frame {
  background: var(--dm-surface);
}

/* ============================================================================
   Component overrides (probe→fix→verify loop, Phase 5)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Mobile collapsed megamenu panel (.navbar-toggler target, distinct from the
   slide-out off-canvas) — white #fff panel → dark surface.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] [class*="nav-breakpoint"] div.t4-megamenu {
  background: var(--dm-surface);
  border-color: var(--dm-border);
}
/* …but the nav-breakpoint-* wrapper class persists at DESKTOP too, so the rule
   above leaked a --dm-surface fill onto the expanded inline nav bar → a lighter
   navy strip behind the menu (two-tone header, user-reported). At the expand
   breakpoint (navbar-expand-lg = ≥992px) the bar is inline and must be
   transparent so only the header's --dm-bg shows. Mobile (<992px) collapsed
   panel keeps its surface. */
@media (min-width: 992px) {
  html[data-theme="dark"] .t4-navbar .t4-megamenu.navbar-collapse {
    background: transparent;
  }
}

/* ---------------------------------------------------------------------------
   Pagination (blog / featured / category) — white pills + #ddd borders → dark;
   keep the cyan ACTIVE page.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .pagination .page-link,
html[data-theme="dark"] .page-link {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .pagination .page-link:hover {
  background-color: var(--dm-surface-2);
  color: var(--dm-heading);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .page-item.active .page-link,
html[data-theme="dark"] .pagination .active .page-link,
html[data-theme="dark"] .pagination .active > .page-link {
  background-color: var(--dm-accent);
  border-color: var(--dm-accent);
  color: #fff;
}
html[data-theme="dark"] .pagination .page-link.disabled,
html[data-theme="dark"] .pagination .disabled .page-link {
  color: var(--dm-text-muted);
  background-color: var(--dm-surface);
}

/* ---------------------------------------------------------------------------
   Content body — literal #333 lists/links/citations never remapped.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .item-page .list-info ul li { color: var(--dm-text); }
html[data-theme="dark"] .article-index ul li a,
html[data-theme="dark"] .contact .contact-articles ul li a { color: var(--dm-text); }
html[data-theme="dark"] .article-index ul li a:hover,
html[data-theme="dark"] .contact .contact-articles ul li a:hover { color: var(--dm-accent); }
html[data-theme="dark"] blockquote small { color: var(--dm-text-muted); }

/* ---------------------------------------------------------------------------
   Sidebar modules — titles (.module-title span #333), Latest links, Tag pills.
   (colored-band/footer module titles keep their #fff via higher-specificity rules)
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .module-title span { color: var(--dm-heading); }
html[data-theme="dark"] ul.latestnews li a { color: var(--dm-text); }
html[data-theme="dark"] ul.latestnews li a:hover { color: var(--dm-accent); }
html[data-theme="dark"] .tags li,
html[data-theme="dark"] .tagspopular li,
html[data-theme="dark"] .tagspopular ul > li {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .tags li a,
html[data-theme="dark"] .tagspopular li a { color: var(--dm-text); }

/* ---------------------------------------------------------------------------
   Smart Search (com_finder) — the whole form is a white 900px card → surface.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .com-finder { background: var(--dm-surface); }
html[data-theme="dark"] .com-finder .form-inline label { color: var(--dm-heading); }
html[data-theme="dark"] .com-finder #search-results .badge {
  background: rgba(255, 255, 255, .08);
  color: var(--dm-text);
}

/* ---------------------------------------------------------------------------
   Info callouts (registration terms, contact miscinfo) — light cyan → dark teal.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .contact .contact-miscinfo {
  background-color: #10303a;
  border-color: #1c4a58;
  color: #9fd8e4;
}
/* Warning callout (e.g. com_users profile-edit "Joomla API Token") — light cream
   → dark amber, mirroring the light amber-on-cream relationship. */
html[data-theme="dark"] .alert-warning {
  background-color: #2c2610;
  border-color: #4a3f18;
  color: #e8cf7a;
}

/* ---------------------------------------------------------------------------
   Choices.js multi-select (com_users profile-edit "Events to Email", "Time
   Zone", etc.) — the widget ships literal white surfaces. Mirror the light
   field relationship on dark. Selected item pills keep their accent tint.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .choices__inner {
  background-color: var(--dm-band);
  border-color: var(--dm-field-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .choices__list--dropdown,
html[data-theme="dark"] .choices__list[aria-expanded] {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-field-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .choices__input,
html[data-theme="dark"] .choices__inner .choices__input,
html[data-theme="dark"] input.choices__input.choices__input--cloned {
  background-color: var(--dm-band) !important;
  color: var(--dm-text);
}
html[data-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted,
html[data-theme="dark"] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: var(--dm-surface);
}
html[data-theme="dark"] .choices[data-type*="select-one"]::after { border-color: var(--dm-text-muted) transparent transparent; }

/* --- List groups (tags, sidebar lists), input-group icons (login module),
       com_tags category links. --- */
html[data-theme="dark"] .list-group-item:not(.active) {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .input-group-text {
  background-color: var(--dm-band);
  border-color: var(--dm-field-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .com-tags-tag.tag-category .category li a {
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .com-tags-tag.tag-category .category li:hover {
  background-color: var(--dm-surface-2) !important;
}

/* --- Article/blog item titles: literal #333 link (blog, category, featured,
       single-article) → heading colour; hover → accent (not a #333 underline). --- */
html[data-theme="dark"] h2.item-title a,
html[data-theme="dark"] .item-title h2 a,
html[data-theme="dark"] .item-title a,
html[data-theme="dark"] .article-title a {
  color: var(--dm-heading);
}
html[data-theme="dark"] h2.item-title a:hover,
html[data-theme="dark"] h2.item-title a:focus,
html[data-theme="dark"] h2.item-title a:active,
html[data-theme="dark"] .item-title h2 a:hover,
html[data-theme="dark"] .item-title a:hover {
  color: var(--dm-accent);
  border-bottom-color: var(--dm-accent);
}
/* Blog/featured/category list titles use .page-header h2 a (not .item-title). */
html[data-theme="dark"] .blog .item-content .page-header h2 a,
html[data-theme="dark"] .blog-featured .item-content .page-header h2 a,
html[data-theme="dark"] .page-header h2 a,
html[data-theme="dark"] .categories-list h2 a,
html[data-theme="dark"] .page-header h2,
html[data-theme="dark"] .categories-list h2 {
  color: var(--dm-heading);
}
/* Hover must MIRROR each rest selector's specificity or the high-specificity rest
   rule (e.g. .blog-featured .item-content .page-header h2 a = 0,4,3) out-ranks a
   lower hover and the title stays white on hover. Same chains + :hover. */
html[data-theme="dark"] .blog .item-content .page-header h2 a:hover,
html[data-theme="dark"] .blog .item-content .page-header h2 a:focus,
html[data-theme="dark"] .blog-featured .item-content .page-header h2 a:hover,
html[data-theme="dark"] .blog-featured .item-content .page-header h2 a:focus,
html[data-theme="dark"] .page-header h2 a:hover,
html[data-theme="dark"] .page-header h2 a:focus,
html[data-theme="dark"] .categories-list h2 a:hover,
html[data-theme="dark"] .categories-list h2 a:focus {
  color: var(--dm-accent);
}
/* "More Articles …" link list (base gray-700). */
html[data-theme="dark"] .com-content-category-blog__links a,
html[data-theme="dark"] .items-more a { color: var(--dm-text); }
html[data-theme="dark"] .com-content-category-blog__links a:hover,
html[data-theme="dark"] .items-more a:hover { color: var(--dm-accent); }

/* Module + generic content title LINKS — latest-news / articles-category module
   (.mod-articles-category-title, .heading-link) and any `.title h1..h6 a` used by
   ACM blog blocks / related-articles. Light = dark heading, hover = accent; the
   global `a` remap tinted them blue. Mirror light: white at rest, accent hover.
   Applies sitewide wherever these title classes appear. */
html[data-theme="dark"] .mod-articles-category-title,
html[data-theme="dark"] a.heading-link,
html[data-theme="dark"] .heading-link,
html[data-theme="dark"] .title h1 a,
html[data-theme="dark"] .title h2 a,
html[data-theme="dark"] .title h3 a,
html[data-theme="dark"] .title h4 a,
html[data-theme="dark"] .title h5 a,
html[data-theme="dark"] .title h6 a {
  color: var(--dm-heading);
}
html[data-theme="dark"] .mod-articles-category-title:hover,
html[data-theme="dark"] .mod-articles-category-title:focus,
html[data-theme="dark"] a.heading-link:hover,
html[data-theme="dark"] a.heading-link:focus,
html[data-theme="dark"] .heading-link:hover,
html[data-theme="dark"] .heading-link:focus,
html[data-theme="dark"] .title h1 a:hover,
html[data-theme="dark"] .title h2 a:hover,
html[data-theme="dark"] .title h3 a:hover,
html[data-theme="dark"] .title h4 a:hover,
html[data-theme="dark"] .title h5 a:hover,
html[data-theme="dark"] .title h6 a:hover,
html[data-theme="dark"] .title h4 a:focus {
  color: var(--dm-accent);
}

/* --- Home hero: the phone-number block sits under a #f4f4f4 top divider. --- */
html[data-theme="dark"] .phone-wrap { border-top-color: var(--dm-border); }

/* --- Home: "Various Directions" white panel sits on the KEPT blue section →
       it must contrast, so make it an opaque dark surface (not transparent).
       (source rule is .acm-features.style-1 .features-details = 0,3,0) --- */
html[data-theme="dark"] .acm-features.style-1 .features-details,
html[data-theme="dark"] .features-details {
  background-color: var(--dm-surface);
  color: var(--dm-text);
}

/* --- FAQ / contact form panel: a floating white card w/ soft shadow → surface
       (source rule is div#ja-form .form-wrap = ID specificity, must beat it) --- */
html[data-theme="dark"] #ja-form .form-wrap,
html[data-theme="dark"] .form-wrap {
  background-color: var(--dm-surface);
  color: var(--dm-text);
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, .35);
}
/* text inputs were white in light → band; textarea is dark #3b3b3b BY DESIGN in
   light (keep it a distinct darker field); retone both borders off the bright #f4f4f4 */
html[data-theme="dark"] .form-wrap .form-control,
html[data-theme="dark"] .form-wrap input[type="text"],
html[data-theme="dark"] .form-wrap input[type="email"],
html[data-theme="dark"] .form-wrap input[type="tel"] {
  background-color: var(--dm-band);
  color: var(--dm-text);
  border-color: var(--dm-field-border);
}
html[data-theme="dark"] .form-wrap textarea,
html[data-theme="dark"] .form-wrap textarea.form-control {
  background-color: var(--dm-surface-2);
  color: var(--dm-heading);
  border-color: var(--dm-field-border);
}
html[data-theme="dark"] .form-wrap ::placeholder { color: var(--dm-text-muted); opacity: 1; }
/* Home FAQ form field wrappers (#ja-form .input-box) + generic .form-list inputs
   carry literal #f4f4f4 / #ddd borders. */
html[data-theme="dark"] #ja-form li .input-box input,
html[data-theme="dark"] #ja-form li .input-box textarea,
html[data-theme="dark"] ul.form-list li .input-box input,
html[data-theme="dark"] ul.form-list li .input-box textarea {
  background-color: var(--dm-band);
  color: var(--dm-text);
  border-color: var(--dm-field-border);
}
/* Accordion / card dividers (#f4f4f4). */
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-footer {
  border-color: var(--dm-border);
}
/* FAQ accordion dividers. The VISIBLE line is the .card-header border-bottom —
   a generic `.card-header { border-bottom:1px solid #f4f4f4 }` (bright white on
   dark) that the token remap missed; the .card-body carries the same #f4f4f4.
   Both → faint hairline (light shows them imperceptibly on white). */
html[data-theme="dark"] .acm-accordion .card-header,
html[data-theme="dark"] .acm-accordion .card-body {
  border-bottom-color: var(--dm-hairline);
}
/* Generic card-header/footer #f4f4f4 hairline (contact accordion, etc.) → token. */
html[data-theme="dark"] .card-header {
  border-bottom-color: var(--dm-border);
}
/* Pagination counter box + sidebar separator (#f4f4f4). */
html[data-theme="dark"] .counter { border-color: var(--dm-border); }
html[data-theme="dark"] .sidebar-r { border-left-color: var(--dm-border); }

/* --- Specialist ("Meet Our Specialist") cards: white, no border/shadow in light
       → they blend on the white page, so keep them TRANSPARENT in dark. --- */
html[data-theme="dark"] .teams-item {
  background-color: transparent;
}
/* Team carousel top divider: .acm-teams .teams-item:before is a literal 2px
   #f4f4f4 bar → glaring on dark. Sink to the faint hairline (mirrors light). */
html[data-theme="dark"] .acm-teams .teams-item:before { background: var(--dm-hairline); }

/* --- FAQ accordion panels (.acm-accordion .card): transparent with hairline
       border dividers to mirror the light accordion's thin separators. --- */
html[data-theme="dark"] .acm-accordion .card,
html[data-theme="dark"] .acm-accordion .panel {
  background-color: transparent;
  border-color: var(--dm-border);
}
html[data-theme="dark"] .acm-accordion .card-header,
html[data-theme="dark"] .acm-accordion .panel-heading {
  background-color: transparent;
}

/* --- Tabs ("Department Facilities"): the active tab merges with the content area
       below (white in light) → make it read as the dark page, keep the cyan accent. --- */
html[data-theme="dark"] .acm-container-tabs .nav-tabs {
  border-bottom-color: var(--dm-border);
}
html[data-theme="dark"] .acm-container-tabs .nav-link {
  color: var(--dm-text);
}
html[data-theme="dark"] .acm-container-tabs .nav-link.active {
  background-color: var(--dm-bg);
  color: var(--color-primary);
  border-color: var(--dm-border) var(--dm-border) var(--color-primary);
}

/* --- Off-canvas mobile menu: body was white → dark; keep the cyan header. --- */
html[data-theme="dark"] .t4-offcanvas {
  background-color: var(--dm-bg);
  color: var(--dm-text);
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-content {
  background-color: var(--dm-bg);
}

/* --- White CTA button (btn-white sits on the blue sections by design): keep the
       white pill but restore DARK text (the global link remap tinted it blue). --- */
html[data-theme="dark"] .btn.btn-white,
html[data-theme="dark"] a.btn.btn-white {
  background-color: #fff;
  color: #212529;
}
html[data-theme="dark"] .btn.btn-white:hover,
html[data-theme="dark"] a.btn.btn-white:hover {
  background-color: #eef1f5;
  color: #000;
}

/* --- Outline CTA (btn-default = hero "Contact us"): light is a transparent
       outline — mid-grey border (#9e9e9e) + strong dark text (#333), hover just
       darkens the border toward the text. The global `a` remap tinted the label
       + arrow blue; mirror light instead: light text/icon on a mid-grey border,
       hover brightens the border to match the text. Transparent throughout. --- */
html[data-theme="dark"] .btn.btn-default,
html[data-theme="dark"] a.btn.btn-default {
  background-color: transparent;
  border-color: var(--dm-text-muted);
  color: var(--dm-heading);
}
html[data-theme="dark"] .btn.btn-default:hover,
html[data-theme="dark"] .btn.btn-default:focus,
html[data-theme="dark"] .btn.btn-default:active,
html[data-theme="dark"] a.btn.btn-default:hover,
html[data-theme="dark"] a.btn.btn-default:focus,
html[data-theme="dark"] a.btn.btn-default:active {
  background-color: transparent;
  border-color: var(--dm-heading);
  color: var(--dm-heading);
}

/* --- Logo has a navy "Vital" wordmark baked into the PNG → invisible on the dark
       header. Swap to a recolored variant (cyan cross kept, light wordmark). --- */
html[data-theme="dark"] .t4-logo-wrap img,
html[data-theme="dark"] .logo img,
html[data-theme="dark"] #t4-logo img {
  content: url("/images/joomlart/logo/logo-dark.png");
}

/* --- Pseudo divider bar: .section-border-top::before paints a 1px #f4f4f4 line
       (home "Meet Our Specialist" seam) → bright on dark; retint to the border token. --- */
html[data-theme="dark"] .section-border-top::before {
  background-color: var(--dm-border) !important;
}

/* --- Services testimonial panel (light-blue #e4f7ff card) → darken to a band;
       keep the cyan name/quote accent. (source .acm-testimonial.style-1 .item) --- */
html[data-theme="dark"] .acm-testimonial.style-1 .item,
html[data-theme="dark"] .acm-testimonial .item {
  background-color: var(--dm-band);
  color: var(--dm-text);
}
html[data-theme="dark"] .acm-testimonial .item p,
html[data-theme="dark"] .acm-testimonial .item .testimonial-content {
  color: var(--dm-text);
}

/* --- Feature-grid cell dividers (#f4f4f4) on home "Various Directions" (style-1)
       and Services 6-up (style-3) → retint to the border token. --- */
html[data-theme="dark"] .acm-features.style-1 .features-details .row > div,
html[data-theme="dark"] .acm-features.style-1 .features-details .row > div + div,
html[data-theme="dark"] .acm-features.style-3 .row + .row,
html[data-theme="dark"] .acm-features.style-3 .row > div + div {
  border-color: var(--dm-border);
}

/* --- Round arrow action button (light-grey #f8f9fa circle) → dark surface. --- */
html[data-theme="dark"] .acm-features .action,
html[data-theme="dark"] .action {
  background-color: var(--dm-surface-2);
}

/* --- Progress/skill-bar labels are literal #000 → invisible on dark.
       (source .acm-stats.style-2 .stats-list li .stats-item-subject = 0,4,1) --- */
html[data-theme="dark"] .acm-stats.style-2 .stats-list li .stats-item-subject,
html[data-theme="dark"] .stats-item-subject {
  color: var(--dm-text);
}

/* --- Tables (typography / article): literal light border + dark text. --- */
html[data-theme="dark"] table,
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);
  color: var(--dm-text);
}
html[data-theme="dark"] .table thead th { color: var(--dm-heading); 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);
}
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered th,
html[data-theme="dark"] .table-bordered td { border-color: var(--dm-border); }

/* --- Blockquote: literal #f4f4f4 border, muted text. --- */
html[data-theme="dark"] blockquote,
html[data-theme="dark"] .blockquote {
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .blockquote-footer { color: var(--dm-text-muted); }

/* --- !important color utilities (typography QA band exposes them all). Beat with
       !important; mirror light's INTENT, not the literal light hue. --- */
html[data-theme="dark"] .bg-light   { background-color: var(--dm-band) !important; }
html[data-theme="dark"] .bg-white   { background-color: var(--dm-surface) !important; }
html[data-theme="dark"] .text-dark  { color: var(--dm-heading) !important; }
html[data-theme="dark"] .text-body  { color: var(--dm-text) !important; }
html[data-theme="dark"] .text-muted { color: var(--dm-text-muted) !important; }
/* .bg-dark / .text-white / .text-light already read correctly on dark — leave them. */
/* Navy .text-secondary (#323183) is unreadable on dark → lift to a light lavender.
   .text-primary (cyan) and .text-danger/success/etc read fine — leave them. */
html[data-theme="dark"] .text-secondary { color: #9a98e0 !important; }
html[data-theme="dark"] a.text-secondary:hover,
html[data-theme="dark"] a.text-secondary:focus { color: #b7b5ec !important; }

/* Bootstrap border utilities are literal #f4f4f4 !important (header uses .border-top,
   typography example boxes, etc.) → retint with !important to the border token. */
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;
}
/* Typography example frames + inline code colour. */
html[data-theme="dark"] .t4-typo-example { border-color: var(--dm-border); }
html[data-theme="dark"] code { color: #ff8a8a; }

/* --- Tag pills (blog / tag pages): gray pill, gray hover BACKGROUND (color-only
       override would leak the light hover bg → carry the bg). --- */
html[data-theme="dark"] .tag-category .btn,
html[data-theme="dark"] .tags .btn,
html[data-theme="dark"] .tagged-items .btn {
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .tag-category .btn:hover,
html[data-theme="dark"] .tags .btn:hover,
html[data-theme="dark"] .tagged-items .btn:hover {
  background-color: var(--dm-surface);
  color: var(--dm-heading);
}
/* Tags page: the #adminForm .category box (white) + filter button group. */
html[data-theme="dark"] .tag-category #adminForm .category {
  background: var(--dm-surface);
}
html[data-theme="dark"] .tag-category .filters .btn-group .btn {
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .tag-category .filters .btn-group .btn:hover,
html[data-theme="dark"] .tag-category .filters .btn-group .btn:active,
html[data-theme="dark"] .tag-category .filters .btn-group .btn.active {
  background-color: var(--dm-surface);
  color: var(--dm-heading);
  border-color: var(--dm-border);
}

/* ---------------------------------------------------------------------------
   Global form fields — every plain input/textarea/select was white with a
   near-white #f4f4f4 border in light. Give them a dark field surface. (The home
   FAQ form's own .form-wrap rules are more specific and still win where set.)
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--dm-band);
  color: var(--dm-text);
  border-color: var(--dm-field-border);
}
/* Native checkbox/radio render as bright OS controls on dark (their bg is
   ignored). accent-color themes the native control to the dark palette. */
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
  accent-color: var(--dm-accent);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  background-color: var(--dm-surface);
  color: var(--dm-heading);
  border-color: var(--dm-accent);
}
html[data-theme="dark"] ::placeholder { color: var(--dm-text-muted); opacity: 1; }
html[data-theme="dark"] label,
html[data-theme="dark"] .control-label { color: var(--dm-text); }

/* Login / registration / reset / remind form cards (white + soft shadow → surface) */
html[data-theme="dark"] .login-wrap,
html[data-theme="dark"] .registration,
html[data-theme="dark"] .com-users-reset,
html[data-theme="dark"] .com-users-remind {
  background-color: var(--dm-surface);
  color: var(--dm-text);
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, .35);
}
/* Registration fieldset legend sits as a white "notch" over the card edge → match surface. */
html[data-theme="dark"] .registration fieldset legend {
  background-color: var(--dm-surface);
  color: var(--dm-heading);
}
/* Profile view + edit + privacy request panels (white cards → surface). */
html[data-theme="dark"] .com-users-profile,
html[data-theme="dark"] .com-users-profile.profile,
html[data-theme="dark"] .profile,
html[data-theme="dark"] .profile-edit,
html[data-theme="dark"] .request-confirm,
html[data-theme="dark"] .request-form {
  background-color: var(--dm-surface);
  color: var(--dm-text);
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, .35);
}
/* Profile field-row dividers + edit inputs (#ced4da light gray). */
html[data-theme="dark"] .com-users-profile legend,
html[data-theme="dark"] .com-users-profile dt,
html[data-theme="dark"] .com-users-profile dd,
html[data-theme="dark"] .profile-edit legend {
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .profile-edit #member-profile input.form-control,
html[data-theme="dark"] .profile-edit #member-profile input.inputbox,
html[data-theme="dark"] .profile-edit #member-profile input.form-select {
  background: var(--dm-band);
  color: var(--dm-text);
  border-color: var(--dm-field-border);
}
/* The #member-profile fieldset <legend> ("Edit Your Profile") carries a literal
   #333 via an ID rule — match that specificity to lift it to a light heading. */
html[data-theme="dark"] #member-profile legend {
  color: var(--dm-heading);
  border-color: var(--dm-border);
}

/* ---------------------------------------------------------------------------
   Header nav + breadcrumb chrome
   --------------------------------------------------------------------------- */
/* Top-level nav link labels carry a literal #333 that reads dark on the dark
   header (only the home palette-nav overrode it to cyan). Lift to body text. */
/* Top-nav REST label = --dm-text (grey). The visible text is the .menu-item-title
   span; the anchor's own #333 is never seen (all menu items render the span) and
   the light rule pins it with !important, so we don't chase it. Active/current
   and hover accent are handled by the ID-anchored span rules below. */
html[data-theme="dark"] .t4-header .menu-item-title,
html[data-theme="dark"] .t4-header .nav-link,
html[data-theme="dark"] #t4-header-wrap .menu-item-title {
  color: var(--dm-text);
}
/* Hover accent on the nav-link label MUST be ID-anchored (#t4-header-wrap) or the
   ID-specificity rest rule `#t4-header-wrap .menu-item-title` (1,1,1) pins it grey
   and the hover never shows. Covers top-nav links AND mega/dropdown item hover.
   (active/current labels are accented by the child-combinator rule further down.) */
html[data-theme="dark"] #t4-header-wrap .nav-link:hover .menu-item-title,
html[data-theme="dark"] #t4-header-wrap .nav-link:focus .menu-item-title {
  color: var(--dm-accent);
}
/* Breadcrumb literal #f4f4f4 hairline → border token (light keeps this one). */
html[data-theme="dark"] .t4-section.t4-breadcrumbs,
html[data-theme="dark"] .t4-breadcrumbs {
  border-color: var(--dm-border);
}
/* #t4-header carries an ID-specificity #f4f4f4 bottom border. Light's #f4f4f4 is
   imperceptible on white, so mirror that by sinking the hairline into the page
   bg — NO visible line under the header (user-reported). */
html[data-theme="dark"] .t4-section.t4-header,
html[data-theme="dark"] #t4-header { border-bottom-color: var(--dm-bg); }
html[data-theme="dark"] .t4-wrapper.c-offcanvas-content-wrap,
html[data-theme="dark"] .c-offcanvas-content-wrap { border-color: var(--dm-border); }
/* Nav dropdown caret (▾) rest colour is a literal #333 → dark on the dark header;
   hover/active already flip to cyan. */
html[data-theme="dark"] .t4-palette-mainnav .t4-navbar .navbar-nav > li > a .item-caret::before {
  border-top-color: var(--dm-text) !important;
}

/* --- Desktop megamenu dropdown panel: white #fff + light ring → dark surface;
       items carry rgba(0,0,0,.7) (dark) → lift to body text, hover → accent. --- */
html[data-theme="dark"] .t4-megamenu .dropdown-menu {
  background-color: var(--dm-surface);
  box-shadow: 0 0 0 1px var(--dm-border);
}
html[data-theme="dark"] .t4-megamenu .dropdown-menu li > a,
html[data-theme="dark"] .t4-megamenu .dropdown-menu li > .nav-link,
html[data-theme="dark"] .t4-megamenu .dropdown-menu li .dropdown-item {
  color: var(--dm-text);
}
html[data-theme="dark"] .t4-megamenu .dropdown-menu li > a:hover,
html[data-theme="dark"] .t4-megamenu .dropdown-menu li > a:focus,
html[data-theme="dark"] .t4-megamenu .dropdown-menu li > a:active,
html[data-theme="dark"] .t4-megamenu .dropdown-menu li > .nav-link:hover,
html[data-theme="dark"] .t4-megamenu .dropdown-menu li .dropdown-item:hover,
html[data-theme="dark"] .t4-megamenu .dropdown-menu li .dropdown-item:focus,
html[data-theme="dark"] .t4-megamenu .dropdown-menu li .dropdown-item:active {
  color: var(--dm-accent);
}
/* Active/current child mirrors light (only the CURRENT item highlights — the
   rest stay --dm-text; prevents the whole open dropdown reading as "all active"). */
html[data-theme="dark"] .t4-megamenu .dropdown-menu li.active > a,
html[data-theme="dark"] .t4-megamenu .dropdown-menu li.current > a,
html[data-theme="dark"] .t4-megamenu .dropdown-menu li.active > .dropdown-item,
html[data-theme="dark"] .t4-megamenu .dropdown-menu li.current > .dropdown-item {
  color: var(--dm-accent);
}
html[data-theme="dark"] .t4-megamenu .dropdown-menu .nav-header,
html[data-theme="dark"] .t4-megamenu .dropdown-menu .menu-item-title {
  color: var(--dm-heading);
}

/* --- Off-canvas (mobile) menu links + drilldown submenu items (#333) → light. --- */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-link,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .menu-item-title,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu li > a,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu li > span {
  color: var(--dm-text);
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header {
  /* keep the cyan header — nothing to change; body handled above */
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-item {
  border-color: var(--dm-border);
}
/* Off-canvas drilldown chevron chip (#f2f4f6 light pill) → dark. */
html[data-theme="dark"] .btn-toggle,
html[data-theme="dark"] .t4-offcanvas .btn-toggle,
html[data-theme="dark"] .sub-menu-toggle.btn-toggle {
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle:hover,
html[data-theme="dark"] .btn-toggle:hover {
  background-color: var(--dm-surface);
  color: var(--dm-heading);
}
/* Solid brand button (.btn-primary) is a by-design blue pill with WHITE text in
   light — mirror it EVERYWHERE in dark. The global `a` remap, the header
   .nav-link / .menu-item-title remaps otherwise tint the label span + arrow icon
   (header "Book Appointment", hero "Learn more", "View More", CTA links, …).
   Keep the anchor, its label span and its icon white at rest AND hover/focus/
   active. Background stays the template's accent (unchanged, light==dark). */
html[data-theme="dark"] .btn.btn-primary,
html[data-theme="dark"] a.btn.btn-primary,
html[data-theme="dark"] .btn.btn-primary .menu-item-title,
html[data-theme="dark"] .btn.btn-primary .icon,
html[data-theme="dark"] .btn.btn-primary span,
html[data-theme="dark"] .btn.btn-primary:hover,
html[data-theme="dark"] .btn.btn-primary:focus,
html[data-theme="dark"] .btn.btn-primary:active,
html[data-theme="dark"] a.btn.btn-primary:hover,
html[data-theme="dark"] a.btn.btn-primary:focus,
html[data-theme="dark"] .btn.btn-primary:hover .menu-item-title,
html[data-theme="dark"] .btn.btn-primary:hover .icon,
html[data-theme="dark"] .btn.btn-primary:hover span {
  color: #fff;
}
/* The header "Book Appointment" label span loses to the ID-specificity rule
   `#t4-header-wrap .menu-item-title { color: --dm-text }` (1,2,1). Beat it with
   an ID-scoped chain (1,4,1) so the label mirrors light's white btn-primary. */
html[data-theme="dark"] #t4-header-wrap .btn.btn-primary .menu-item-title,
html[data-theme="dark"] #t4-header .btn.btn-primary .menu-item-title,
html[data-theme="dark"] #t4-header-wrap .btn.btn-primary:hover .menu-item-title {
  color: #fff;
}

/* --- Inner-page photo masthead: the title is dark #333 on a LIGHT photo (that is
       the light design). --color-dark got remapped to a light value, which would make
       the title low-contrast on the light photo. Pin the masthead title dark so it
       mirrors light exactly. --- */
html[data-theme="dark"] .ja-masthead .masthead-title,
html[data-theme="dark"] .ja-masthead .ja-masthead-title,
html[data-theme="dark"] .ja-masthead h1,
html[data-theme="dark"] .ja-masthead .page-title,
html[data-theme="dark"] .ja-masthead .title {
  color: #333333;
}

/* ---------------------------------------------------------------------------
   Contact view — section headings carry literal #333, social/link pills are
   #f4f4f4 chips, sidebar module titles are #333.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .contact .plain-style .contact-title h2,
html[data-theme="dark"] .contact .plain-style .title-link h3,
html[data-theme="dark"] .moduletable > h3,
html[data-theme="dark"] .moduletable > h2 {
  color: var(--dm-heading);
}
html[data-theme="dark"] .contact .contact-links ul.nav li a {
  background: var(--dm-surface-2);
  color: var(--dm-text);
}
html[data-theme="dark"] .contact .contact-links ul.nav li a:hover,
html[data-theme="dark"] .contact .contact-links ul.nav li a:focus,
html[data-theme="dark"] .contact .contact-links ul.nav li a:active {
  background: var(--dm-surface);
  color: var(--dm-heading);
}
/* Contact table header/stripe literals */
html[data-theme="dark"] .com_contact table.category th,
html[data-theme="dark"] .com_contact table.category tr:nth-child(2n) {
  background-color: var(--dm-band);
  border-color: var(--dm-border);
}

/* ===========================================================================
   Phase-9 full-site review pass (6 parallel auditors, probe→verify→prove).
   Every rule below was proven live (inject + re-measure) and mirrors light.
   =========================================================================== */

/* Navy secondary buttons are links (<a class="btn btn-secondary">): the global
   `a` remap tinted the label blue — restore white like .btn-white. (pager
   prev/next, profile "Edit Profile" button.) */
html[data-theme="dark"] .btn.btn-secondary,
html[data-theme="dark"] a.btn.btn-secondary { color: #fff; }

/* Typography demo: .bg-warning band stays yellow (kept) → its .text-dark label
   must stay dark; the global .text-dark→heading lift wrongly whitened it. */
html[data-theme="dark"] .bg-warning.text-dark { color: #212529 !important; }

/* com_finder "Search Tips" card (Advanced Search) — Bootstrap .card #fff leaked
   under the light-gray body text. */
html[data-theme="dark"] .com-finder__tips.card,
html[data-theme="dark"] .com-finder .card,
html[data-theme="dark"] .com-finder__tips {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

/* Joomla system-message alerts (<joomla-alert> web-component + .alert-*). The
   component carries no .alert-* class, so the earlier info/warning rules missed
   success/danger/message. Mirror the existing dark callout treatment. */
html[data-theme="dark"] joomla-alert[type="success"],
html[data-theme="dark"] .alert-success {
  background-color: #12281c; border-color: #1f4630; color: #8fd3a8;
}
html[data-theme="dark"] joomla-alert[type="danger"],
html[data-theme="dark"] joomla-alert[type="error"],
html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] .alert-error {
  background-color: #2c1616; border-color: #4a2020; color: #f0a0a0;
}
html[data-theme="dark"] joomla-alert[type="info"],
html[data-theme="dark"] joomla-alert[type="message"] {
  background-color: #10303a; border-color: #1c4a58; color: #9fd8e4;
}
html[data-theme="dark"] joomla-alert[type="warning"] {
  background-color: #2c2610; border-color: #4a3f18; color: #e8cf7a;
}
html[data-theme="dark"] joomla-alert .joomla-alert--close { color: inherit; }

/* Tagged-items list-group. Light: transparent rows (blend on page) split by a
   #f4f4f4 hairline, links #333 → hover #0056b3. Mirror in dark: transparent
   rows, faint hairline, --dm-text links → --dm-accent on hover. The link colors
   beat the source (0,5,1) chain / the global `a` remap. */
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item {
  background-color: transparent;
  border-bottom-color: var(--dm-hairline);
}
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item:hover {
  background-color: transparent;
}
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item a,
html[data-theme="dark"] .tag-category ul.list-group li h3 a {
  color: var(--dm-text);
}
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item a:hover,
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item a:focus,
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item a:active {
  color: var(--dm-accent);
}

/* The dark-mode toggle's own sun icon inherited #333 → invisible on the dark
   header (desktop + mobile). */
html[data-theme="dark"] .t4-theme-toggle { color: var(--dm-text); }

/* Off-canvas expanded (active-parent) submenu-toggle chip stayed light #f2f4f6
   at (0,4,0) — beat with (0,5,1). Collapsed toggles remain transparent. */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle {
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
}

/* ---------------------------------------------------------------------------
   Front-end article-submit / edit form (com_content view=form layout=edit).
   Now rendered in full template chrome (system_t4frontendedit=0) but the form
   markup uses T4's frontend-edit.css + Joomla joomla-tab + TinyMCE, none of
   which the theme covered. (The TinyMCE CONTENT iframe body cannot be themed
   from here — it's a separate document; that needs a TinyMCE dark-skin config,
   not template CSS.)
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .edit.item-page fieldset { background-color: var(--dm-surface); }
html[data-theme="dark"] .edit.item-page #editor { background-color: transparent; }
html[data-theme="dark"] joomla-tab > joomla-tab-element,
html[data-theme="dark"] joomla-tab-element { background-color: var(--dm-surface); }
html[data-theme="dark"] joomla-tab[view="tabs"] > div[role="tablist"] {
  background-color: var(--dm-band); border-color: var(--dm-border);
}
html[data-theme="dark"] joomla-tab [role="tablist"] button[role="tab"] {
  color: var(--dm-text) !important; background-color: transparent !important;
}
html[data-theme="dark"] joomla-tab [role="tablist"] button[aria-selected="true"] {
  color: var(--dm-accent) !important; border-bottom-color: var(--dm-accent) !important;
}
/* TinyMCE outer chrome (toolbar/menubar/statusbar — NOT the content iframe). */
html[data-theme="dark"] .tox-tinymce { border-color: var(--dm-border) !important; }
html[data-theme="dark"] .tox .tox-editor-header,
html[data-theme="dark"] .tox .tox-menubar,
html[data-theme="dark"] .tox .tox-toolbar,
html[data-theme="dark"] .tox .tox-toolbar__primary,
html[data-theme="dark"] .tox .tox-toolbar-overlord,
html[data-theme="dark"] .tox .tox-promotion {
  background-color: var(--dm-surface-2) !important; background: var(--dm-surface-2) !important;
}
html[data-theme="dark"] .tox .tox-mbtn { color: var(--dm-text) !important; background-color: transparent !important; }
html[data-theme="dark"] .tox .tox-mbtn:hover:not(:disabled),
html[data-theme="dark"] .tox .tox-mbtn--active { background-color: var(--dm-surface) !important; }
html[data-theme="dark"] .tox .tox-tbtn { color: var(--dm-text) !important; }
/* Toolbar button FACES ship white — let the dark toolbar band show through
   (icons/labels already light; hover uses --dm-surface below). */
html[data-theme="dark"] .tox .tox-tbtn,
html[data-theme="dark"] .tox .tox-tbtn--select,
html[data-theme="dark"] .tox .tox-split-button,
html[data-theme="dark"] .tox .tox-tbtn--bespoke { background-color: transparent !important; }
html[data-theme="dark"] .tox .tox-tbtn svg { fill: var(--dm-text) !important; }
html[data-theme="dark"] .tox .tox-tbtn:hover,
html[data-theme="dark"] .tox .tox-tbtn--select:hover,
html[data-theme="dark"] .tox .tox-split-button:hover { background-color: var(--dm-surface) !important; }
html[data-theme="dark"] .tox .tox-tbtn__select-label { color: var(--dm-text) !important; }
html[data-theme="dark"] .tox .tox-statusbar {
  background-color: var(--dm-surface-2) !important; color: var(--dm-text-muted) !important; border-top-color: var(--dm-border) !important;
}
/* Edit-layout native <select>: frontend-edit.css paints a 116rem light-face SVG
   arrow that covers the whole control — must replace the background-image, not
   just the color. */
html[data-theme="dark"] .t4-edit-layout select.custom-select,
html[data-theme="dark"] .t4-edit-layout select.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%238b95a5' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !important;
  background-position: right 0.75rem center !important;
  background-size: 8px 10px !important;
  background-repeat: no-repeat !important;
  background-color: var(--dm-band) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-field-border) !important;
}
html[data-theme="dark"] .t4-edit-layout .custom-select option,
html[data-theme="dark"] .t4-edit-layout .form-select option {
  background-color: var(--dm-surface-2); color: var(--dm-text);
}
html[data-theme="dark"] .t4-edit-layout joomla-field-fancy-select .choices__inner .choices__button_joomla {
  background-color: var(--dm-surface-2); border-color: var(--dm-field-border);
}

/* Bootstrap modal (Joomla field-help popovers, media modal, etc.) — dark surface
   so any modal opened in dark mode isn't a white flash. */
html[data-theme="dark"] .modal-content {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--dm-border); }

/* ===========================================================================
   Checklist review pass (6 parallel probe-verified auditors). Each rule mirrors
   light and beats the winning source specificity noted in build-docs findings.
   =========================================================================== */

/* [HIGH] Mobile hamburger / off-canvas toggle icons kept a literal #333 → dark-on-
   dark on the dark header (the sibling sun toggle was lifted; these were missed). */
html[data-theme="dark"] .navbar-toggler,
html[data-theme="dark"] .navbar-toggler i,
html[data-theme="dark"] .t4-offcanvas-toggle,
html[data-theme="dark"] .t4-offcanvas-toggle i,
html[data-theme="dark"] .toggle-bars,
html[data-theme="dark"] i.fa-bars.toggle-bars {
  color: var(--dm-heading);
}

/* [HIGH] Megamenu column headings (.mega-col-title "JOOMLA CONTENT" …) kept a
   literal #333 (dark-on-dark, ~1.3:1) + a bright #f4f4f4 underline. Distinct class
   from the .nav-header / .menu-item-title rules, so it was missed. */
html[data-theme="dark"] .t4-megamenu .mega-dropdown-menu .mega-col-title,
html[data-theme="dark"] .t4-megamenu .mega-col-title,
html[data-theme="dark"] .mega-col-title,
html[data-theme="dark"] .mega-col-title > span {
  color: var(--dm-heading);
  border-bottom-color: var(--dm-border);
}

/* [MAJOR] Active nav leaf lost its cyan accent: the ID-specificity rest rule
   (#t4-header-wrap .menu-item-title = 1,2,1) out-ranked the (0,4,1) active rule.
   Anchor the active/current accent with the same ID so it wins; cover off-canvas. */
/* CHILD combinator (> .nav-link) is REQUIRED: a descendant combinator here made
   `.nav-item.active .menu-item-title` match EVERY dropdown item's label when an
   ancestor nav-item is active (e.g. on /login, "Pages" is active) → the whole
   open mega panel turned blue. Only the active/current item's OWN label accents;
   the dropdown children fall back to the --dm-text rest rule. */
html[data-theme="dark"] #t4-header-wrap .nav-item.active > .nav-link .menu-item-title,
html[data-theme="dark"] #t4-header-wrap .nav-item.current > .nav-link .menu-item-title,
html[data-theme="dark"] #t4-header-wrap .active > .nav-link .menu-item-title,
html[data-theme="dark"] #t4-header-wrap .current > .nav-link .menu-item-title,
html[data-theme="dark"] .t4-offcanvas .navbar .active > .nav-link .menu-item-title,
html[data-theme="dark"] .t4-offcanvas .navbar .current > .nav-link .menu-item-title {
  color: var(--dm-accent);
}

/* [MAJOR] Megamenu submenu label hover: light cascades cyan onto the visible
   .menu-item-title span, but dark only colored the <a>; the span stayed grey.
   Cover BOTH the simple dropdown and the mega-column (.mega-nav) variants. */
/* ID-anchored (#t4-header-wrap) so it beats the #t4-header-wrap .menu-item-title
   rest rule (1,1,1) that otherwise pins the span grey on hover. */
html[data-theme="dark"] #t4-header-wrap .dropdown-menu li > a:hover .menu-item-title,
html[data-theme="dark"] #t4-header-wrap .dropdown-menu li > a:focus .menu-item-title,
html[data-theme="dark"] #t4-header-wrap .mega-nav a:hover .menu-item-title,
html[data-theme="dark"] #t4-header-wrap .mega-nav a:focus .menu-item-title,
html[data-theme="dark"] #t4-header-wrap .mega-dropdown-menu a:hover .menu-item-title {
  color: var(--dm-accent);
}

/* [MED] Semantic .btn-danger (Registration "Cancel" = <a class="btn btn-danger">):
   the global `a` remap tinted its white label blue on the red fill → restore white. */
html[data-theme="dark"] .btn.btn-danger,
html[data-theme="dark"] a.btn.btn-danger { color: #fff; }

/* [MED] Bootstrap .btn-close (Terms modal X, etc.) is a black-fill SVG → invisible
   on the dark modal surface. Invert to a light glyph. */
html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(1) brightness(1.8);
}

/* [MOD] Skill-progress TRACK — ONLY the style-2 progress bar (.stats-item-counter
   is a 10px #f4f4f4 pill there). Scope to .style-2: in .style-1 the SAME class is
   the big number text sitting on the blue .stats-asset, which must stay
   transparent (a surface here paints a black box behind the numbers). */
html[data-theme="dark"] .acm-stats.style-2 .stats-item-counter {
  background-color: var(--dm-surface-2);
}

/* [MOD] Light-cyan accent badge/pill (#e4f7ff) reads as a bright chip on dark:
   section eyebrow pill + article category badge. Tone to a sky-tint, keep accent. */
html[data-theme="dark"] .acm-stats .section-title.style-1 span,
html[data-theme="dark"] .section-title.style-1 > span {
  background-color: rgba(38, 176, 235, .14);
  color: var(--dm-accent);
}
/* Category badge: source chain `.blog .item-content .article-info .category-name a`
   is (0,4,1) — beat it with a 4-class dark chain (0,4,2). Covers blog + featured. */
html[data-theme="dark"] .item-content .article-info .category-name a {
  background-color: rgba(38, 176, 235, .14);
  color: var(--dm-accent);
}

/* [MINOR-MAJOR] Footer credit/copyright links (.footer2: "Joomla!", GPL) sit on the
   KEPT-navy footer and were white in light; the global `a` remap tinted them blue.
   The footnav MENU links have their own rule and stay untouched. Restore white. */
html[data-theme="dark"] .t4-footer .footer2 a,
html[data-theme="dark"] .t4-footer .footer2 a:hover { color: #fff; }

/* [MINOR] Hero phone-wrap top hairline: source .acm-hero .hero-item .phone-wrap
   (0,3,0) out-specified the dark .phone-wrap (0,2,1) → match the source chain. */
html[data-theme="dark"] .acm-hero .hero-item .phone-wrap { border-top-color: var(--dm-border); }