/* ==========================================================================
   JA Phio — Dark mode
   Light mode is the original design and is NOT modified. Every rule below is
   scoped under html[data-theme="dark"]. Dark MIRRORS light — same relationships,
   never adds contrast light lacks. Brand accent (#df4040 red) is KEPT.
   The toggle button block is the ONE rule set that applies in both modes.
   ========================================================================== */

/* --- 1) Dark palette (single source of truth) --------------------------- */
html[data-theme="dark"] {
  --dm-bg:#141414;          /* page                         */
  --dm-band:#1b1b1b;        /* subtle bands / .bg-light     */
  --dm-surface:#1e1e1e;     /* cards / dropdowns / panels   */
  --dm-surface-2:#262626;   /* inputs / elevated            */
  --dm-border:#2e2e2e;      /* every divider / frame        */
  --dm-field-border:#484848;/* form-field / outline borders */
  --dm-text:#c9c9c9;        /* body copy                    */
  --dm-text-muted:#8f8f8f;  /* meta / secondary             */
  --dm-heading:#f1f1f1;     /* headings                     */

  /* Brand accent — KEEP the red; lift text-links a touch for legibility on dark */
  --dm-accent:#df4040;
  --dm-accent-hover:#f16a6a;
  --dm-link:#ef5b5b;
  --dm-link-hover:#f78585;

  color-scheme: dark;

  /* --- 2) REMAP the template's own JA color TOKENS ---------------------- */
  --body-bg-color: var(--dm-bg);
  --body-text-color: var(--dm-text);
  --heading-color: var(--dm-heading);
  /* NOTE: --color-light is DUAL-USE (template does .text-light{color:var(--color-light)!important});
     remapping it inverts .text-light. Leave it; darken real .bg-light sections directly if any appear. */
  --color-white: var(--dm-surface);
  --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);
  /* hover/active stay brand accent (unchanged): --mainnav-link-hover-color, --mainnav-link-active-color */

  --footer-bg-color: var(--dm-bg);
  --footer-text-color: var(--dm-text);
  --footer-link-color: var(--dm-text);
  --footer-link-hover-color: var(--dm-link-hover);

  /* --- 3) REMAP Bootstrap-as-T4 surface tokens (data-bs-theme=dark base) - */
  --t4-body-bg: var(--dm-bg);
  --t4-body-bg-rgb: 20,20,20;
  --t4-body-color: var(--dm-text);
  --t4-body-color-rgb: 201,201,201;
  --t4-emphasis-color: var(--dm-heading);
  --t4-border-color: var(--dm-border);
  --t4-secondary-bg: var(--dm-surface);
  --t4-tertiary-bg: var(--dm-band);
  /* NOTE: do NOT remap --t4-light / --t4-light-rgb — it is DUAL-USE (drives both
     .bg-light AND .text-light); remapping it inverts .text-light. Style-guide
     .bg-white/.bg-light/.bg-dark swatches are by-design demos. */

  /* Tables (var --t4-table-color is hardcoded #252525 in the .table rule) */
  --t4-table-color: var(--dm-text);
  --t4-table-border-color: var(--dm-border);
}

/* --- Base surfaces ------------------------------------------------------- */
html[data-theme="dark"] body { background: var(--dm-bg); color: var(--dm-text); }
html[data-theme="dark"] .t4-wrapper,
html[data-theme="dark"] .t4-section,
html[data-theme="dark"] .t4-masthead { background-color: transparent; }

/* Logo — the shipped logo has a dark "hio" wordmark; swap to a light-text variant */
html[data-theme="dark"] .logo-img { content: url("../images/logo-dark.png"); }

/* Headings inherit the remapped --heading-color; ensure the very common ones read light */
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);
}

/* --- Home: client-logo strip (dark PNG wordmarks/icons → lighten) -------- */
html[data-theme="dark"] .acm-clients img { filter: invert(1) brightness(1.15); }

/* --- Topbar: mirror light's faint band + lift hardcoded text/dividers ----- */
html[data-theme="dark"] .t4-topbar { background: var(--dm-band); border-bottom-color: var(--dm-border); }
html[data-theme="dark"] .t4-topbar ul { border-left-color: var(--dm-border); }
html[data-theme="dark"] .t4-topbar ul li a { color: var(--dm-text); border-right-color: var(--dm-border); }
html[data-theme="dark"] .t4-topbar ul li a:hover,
html[data-theme="dark"] .t4-topbar ul li a:focus { color: var(--dm-accent); }

/* --- Social-follow (topbar) icons + dividers ----------------------------- */
html[data-theme="dark"] .social-follow-wrap { border-right-color: var(--dm-border); }
html[data-theme="dark"] .social-follow-wrap a { border-left-color: var(--dm-border); color: var(--dm-text); }
html[data-theme="dark"] .social-follow-wrap a:hover { color: var(--dm-accent); }

/* --- 2px "anchor" dividers use var(--heading-color): a strong DARK bar on
       white must NOT mirror to a bright bar on dark (gotcha §41). Route to a
       controlled, slightly-lifted border token. --------------------------- */
html[data-theme="dark"] .acm-slideshow.style-1 { border-top-color: var(--dm-field-border); border-bottom-color: var(--dm-field-border); }
html[data-theme="dark"] .t4-footer-info > div { border-top-color: var(--dm-field-border); }

/* Misc light 2px dividers → border token (typography demo boxes, article meta) */
html[data-theme="dark"] .t4-typo-example { border-color: var(--dm-border); }
html[data-theme="dark"] .article-info.text-muted { border-color: var(--dm-border); }

/* ==========================================================================
   Components
   ========================================================================== */

/* --- Section divider pseudo-bars (::before) — mirror light, don't go bright */
html[data-theme="dark"] .section-border-top::before,
html[data-theme="dark"] .section-border-bottom::before { background: var(--dm-border); }
html[data-theme="dark"] div[class*="section-border-"].border-dark::before { background: var(--dm-field-border); }

/* --- CTA block hairline dividers: BS gray-200 (#e9ecef) is invisible on white
       but a bright line on dark → route to the border token (mirror light). --- */
html[data-theme="dark"] .acm-cta.style-1 { border-top-color: var(--dm-border); border-bottom-color: var(--dm-border); }

/* --- Mainnav link hover: the BS .nav-link:hover var resolves to a dark muted
       red (#633838) — too low-contrast on the dark header. Lift to brand red. */
html[data-theme="dark"] .t4-megamenu .nav-link:hover,
html[data-theme="dark"] .t4-megamenu .nav-link:focus,
html[data-theme="dark"] .t4-megamenu .nav > li > a:hover,
html[data-theme="dark"] .t4-megamenu .nav > li > a:focus { color: var(--dm-link); }

/* --- Mega menu dropdown panel ------------------------------------------- */
html[data-theme="dark"] .t4-megamenu .dropdown-menu {
  background: var(--dm-surface);
  box-shadow: 0 0 0 1px var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .t4-megamenu .t4-module .module-title,
html[data-theme="dark"] .t4-megamenu .mega-col-nav .mega-col-title,
html[data-theme="dark"] .t4-megamenu .mega-col-module .mega-col-title { border-bottom-color: var(--dm-border); color: var(--dm-heading); }
/* …but the title TEXT lives in a nested <span> that carries its own hardcoded
   #252525 (0,3,1), defeating the h3-level remap → the mega-column titles ("Our
   Work", "Users", "J! Pages", "J! Content") were invisible dark-on-dark. */
html[data-theme="dark"] .t4-megamenu .t4-module .module-title span,
html[data-theme="dark"] .t4-megamenu .mega-col-nav .mega-col-title span,
html[data-theme="dark"] .t4-megamenu .mega-col-module .mega-col-title span { color: var(--dm-heading); }
html[data-theme="dark"] .t4-megamenu .t4-module .nav li.nav-item a:hover,
html[data-theme="dark"] .t4-megamenu .t4-module .nav li.nav-item a:focus,
html[data-theme="dark"] .t4-megamenu .t4-module .nav li.nav-item a:active,
html[data-theme="dark"] .t4-megamenu .mega-col-module .nav li.nav-item a:hover,
html[data-theme="dark"] .t4-megamenu .mega-col-module .nav li.nav-item a:focus { background-color: var(--dm-surface-2); }

/* --- Off-canvas (mobile) panel ----------------------------------------- */
html[data-theme="dark"] .t4-offcanvas { background: var(--dm-surface); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header { background-color: var(--dm-band); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close { background-color: var(--dm-surface-2); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close span { color: var(--dm-text); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close:hover { background-color: rgba(255,255,255,.08); }
/* Off-canvas submenu chevron toggles: light-grey circle → transparent + light chevron */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle { background-color: transparent; color: var(--dm-text); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle::after { color: var(--dm-text); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle:hover,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle:focus { background-color: var(--dm-surface-2); color: var(--dm-heading); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back i { color: var(--dm-text); }

/* --- Pagination pills (light: bold #333 chip → dark: visible elevated chip) */
html[data-theme="dark"] ul.pagination > li.page-item > a,
html[data-theme="dark"] ul.pagination > li.page-item > span { background: var(--dm-field-border); color: #fff; }
html[data-theme="dark"] ul.pagination > li.page-item.disabled span { background: var(--dm-surface-2); color: var(--dm-text-muted); }
/* active/hover already brand red (var(--color-primary)) — unchanged */

/* --- Forms ------------------------------------------------------------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  color: var(--dm-text);
  background-color: var(--dm-surface-2);
  border-color: var(--dm-field-border);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  color: var(--dm-text);
  background-color: var(--dm-surface-2);
  border-color: var(--dm-accent);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--dm-text-muted); }
html[data-theme="dark"] label,
html[data-theme="dark"] .control-label { color: var(--dm-text); }
/* Bare / third-party text inputs (Acymailing .cell, search boxes) not carrying .form-control */
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="url"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] textarea {
  color: var(--dm-text);
  background-color: var(--dm-surface-2);
  border-color: var(--dm-field-border);
}

/* --- Display headings + hardcoded #252525 descriptions ------------------- */
html[data-theme="dark"] .display-1, html[data-theme="dark"] .display-2,
html[data-theme="dark"] .display-3, html[data-theme="dark"] .display-4 { color: var(--dm-heading); }
html[data-theme="dark"] .acm-features .item-inner .desc { color: var(--dm-text); }

/* Table header cells read light */
html[data-theme="dark"] .table > :not(caption) > * > *,
html[data-theme="dark"] .table th { color: var(--dm-text); }

/* --- Light-grey utility buttons (#e9ecef bg + heading-color text → invisible
       in dark). Registration Cancel + JS calendar buttons. ---------------- */
html[data-theme="dark"] .registration div.com-users-registration__submit .controls .com-users-registration__cancel,
html[data-theme="dark"] .btn-clear,
html[data-theme="dark"] .btn-today,
html[data-theme="dark"] .btn-exit { background: var(--dm-surface-2); color: var(--dm-text); }
html[data-theme="dark"] .registration div.com-users-registration__submit .controls .com-users-registration__cancel:hover { background: var(--dm-surface); color: var(--dm-heading); }

/* --- Contact: misc-info block (blends-on-white → transparent) + detail text */
html[data-theme="dark"] .contact .plain-style .contact-miscinfo { background: transparent; }
html[data-theme="dark"] .contact-miscinfo,
html[data-theme="dark"] .contact-address span,
html[data-theme="dark"] .contact-street,
html[data-theme="dark"] .contact-suburb,
html[data-theme="dark"] .contact-state,
html[data-theme="dark"] .contact-country,
html[data-theme="dark"] .contact-postcode,
html[data-theme="dark"] .contact-telephone,
html[data-theme="dark"] .contact-mobile,
html[data-theme="dark"] .contact-fax,
html[data-theme="dark"] .contact-email,
html[data-theme="dark"] .contact-email a { color: var(--dm-text); }
html[data-theme="dark"] .contact .contact-address dd > span a,
html[data-theme="dark"] .contact .contact-address dd a { color: var(--dm-text); }

/* --- Author listing: white info bar blends on white → transparent -------- */
html[data-theme="dark"] .author-lists .author-other-info { background: transparent; }

/* --- Single article: author bio panel (#F2F2F2 → dark surface) + meta ---- */
html[data-theme="dark"] .author-block.author-block-post-detail { background-color: var(--dm-surface); }
html[data-theme="dark"] .article-info .createdby a,
html[data-theme="dark"] .article-info dd a,
html[data-theme="dark"] .item-page .article-aside .createdby [itemprop="name"],
html[data-theme="dark"] .com-content-article .share-social .txt,
html[data-theme="dark"] .item-page .share-social span.txt { color: var(--dm-text); }

/* Smart Search: finder submit button (#e9ecef grey → dark surface) */
html[data-theme="dark"] .com-finder .form-inline .input-group button.btn-secondary { background: var(--dm-surface-2); }

/* --- Smart Search: tips card ------------------------------------------- */
html[data-theme="dark"] .com-finder__tips.card { background: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); }

/* --- Smart Search: "No Results Found" empty box (id #search-result-empty →
       near-white #f2f2f2 slab; its H2 already reads light → invisible). Make
       it a dark surface so the light heading is legible (mirror light's grey). */
html[data-theme="dark"] #search-result-empty,
html[data-theme="dark"] .com-finder__empty {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

/* --- Tagged items (com_tags) list links -------------------------------- */
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item 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 { color: var(--dm-link); }

/* Tagged/list filter toolbar buttons (search + clear icons): source
   `div.tag-category .filters .input-group-* button` forces #ced4da light-grey +
   #333 icon → light chips on the dark form. Match its 0,3,2 chain and darken. */
html[data-theme="dark"] div.tag-category .filters .input-group-append button,
html[data-theme="dark"] div.tag-category .filters .input-group-addon button {
  background: var(--dm-surface-2);
  color: var(--dm-text);
  border-color: var(--dm-field-border);
}

/* --- User profile: field labels + avatar thumbnail --------------------- */
html[data-theme="dark"] .profile.profile fieldset dt,
html[data-theme="dark"] .com-users-profile dt,
html[data-theme="dark"] .com-users-profile__list dt { color: var(--dm-text); }
html[data-theme="dark"] .img-thumbnail { background-color: var(--dm-surface); border-color: var(--dm-border); }

/* ==========================================================================
   Deep-audit round — per-page subagent findings (probe→inject→verify each)
   ========================================================================== */

/* Home 1 hero: hand-drawn "decor.png" squiggle has a #333 stroke → near-invisible
   on the dark page. Lighten the PNG (mirrors the client-logos invert approach). */
html[data-theme="dark"] .acm-hero.style-1 .hero-item > div:nth-child(2):before { filter: invert(1) brightness(1.6); }

/* Home 1 CTA heading: inline arrow SVG carries a hardcoded stroke="#333" attribute
   (no class targets it) → invisible on dark. Lift the stroke to the heading color. */
html[data-theme="dark"] h2.has-arrow svg path { stroke: var(--dm-heading); }

/* Mega-menu "demo-layout" preview thumbnails (Our Work): #e9ecef frame + caption
   divider are a subtle hairline on white but glare on the dark dropdown surface. */
html[data-theme="dark"] .t4-megamenu .demo-layout .item { border-color: var(--dm-border); }
html[data-theme="dark"] .t4-megamenu .demo-layout .item span { border-top-color: var(--dm-border); }

/* Header dropdown/mega links: home-2 (<1400px, media-query) and home-3 (unconditional)
   locally SHADOW `--mainnav-link-color:#333` inside `#t4-header .dropdown-menu`, defeating
   the root dark remap → dark-on-dark link text. Re-point the var in that same scope. */
html[data-theme="dark"] .layout-home-2 #t4-header .dropdown-menu,
html[data-theme="dark"] .layout-home-3 #t4-header .dropdown-menu { --mainnav-link-color: var(--dm-text); }

/* Off-canvas drilldown (mobile): the "back" bar (.sub-menu-back) is a #f2f2f2 chip whose
   label inherits the remapped near-white heading color → white-on-white (only the chevron
   showed); and the drilled sub-menu item dividers are a bright #e9ecef hairline. */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back {
  background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-border);
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back:hover,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back:focus,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back:active {
  background-color: var(--dm-surface);
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav .nav-item .dropdown-menu .nav-item {
  border-bottom-color: var(--dm-border);
}

/* Home 3 FAQ/awards accordion: 2px hardcoded #F2F2F2 row dividers (declared !important)
   → glaring bars on dark. Same 2px-anchor-divider pattern; beat with matching !important. */
html[data-theme="dark"] .acm-accordion .row { border-top-color: var(--dm-field-border) !important; }
html[data-theme="dark"] .acm-accordion .row:last-child { border-bottom-color: var(--dm-field-border) !important; }

/* Native checkboxes (Acymailing newsletter "I agree", consent boxes) are unstyled → a
   solid white square on dark. Theme the box + use accent-color for the checked state. */
html[data-theme="dark"] input[type="checkbox"] {
  background-color: var(--dm-surface-2); border-color: var(--dm-field-border); accent-color: var(--dm-accent);
}

/* Portfolio DETAIL: category eyebrow label is a hardcoded #4F4F4F (only this instance) →
   too dark on the page; and the gallery owl-carousel INACTIVE dots are #e9ecef → glowing
   white dots (active dot stays brand red). Route both to muted/field-border tokens. */
html[data-theme="dark"] .view-project-detail .project-type { color: var(--dm-text-muted); }
html[data-theme="dark"] .view-project-detail .owl-dots > button { background: var(--dm-field-border); }
/* Same #e9ecef divider pattern on the style-2 detail sub-layout (dark-scoped no-op if unused) */
html[data-theme="dark"] .view-project-detail.style-2 .project-info .project-list { border-top-color: var(--dm-border); }

/* Services hero frosted-white overlay cards (.acm-features.style-2): the card bg stays a
   literal rgba(255,255,255,.9) frosted panel over a photo (correct), but its heading link +
   "Learn More" action use --heading-color which was remapped near-white → invisible on the
   still-white card. Frosted-over-photo rule: KEEP the card, pin text back to light's dark. */
html[data-theme="dark"] .acm-features.style-2 .features-item h4 a,
html[data-theme="dark"] .acm-features.style-2 .features-item .action { color: #333; }

/* Team "Join Our Team" add-member card: plus-icon inline SVG has a hardcoded
   stroke="#333" (no class) → invisible on dark. Same pattern as the CTA arrow. */
html[data-theme="dark"] .more-link svg path { stroke: var(--dm-heading); }

/* Tagged items (com_tags): list-group row divider #e9ecef → glowing line on dark. */
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item { border-bottom-color: var(--dm-border); }

/* Author detail (author-posts list): category link hardcoded #333 → near-invisible. */
html[data-theme="dark"] div.author-posts .item .item-content .article-info a { color: var(--dm-text); }

/* joomla-alert (Joomla 6 flash-message web component: login-failure, registration
   validation, etc.): its --jui-alert-* tokens are hardcoded LIGHT values, outside
   Bootstrap's data-bs-theme cascade → the message card stayed pale cream/pink on
   the dark page. Reuse Bootstrap 5.3's dark-alert palette for parity. */
html[data-theme="dark"] joomla-alert {
  --jui-alert-button-color-dark: var(--dm-heading);
  --jui-alert-button-color-light: var(--dm-bg);
  --jui-alert-success-color: #75b798;
  --jui-alert-success-background-color: #051b11;
  --jui-alert-success-border-color: #0f5132;
  --jui-alert-success-link-color: #a3cfbb;
  --jui-alert-info-color: #6edff6;
  --jui-alert-info-background-color: #032830;
  --jui-alert-info-border-color: #087990;
  --jui-alert-info-link-color: #9eeaf9;
  --jui-alert-warning-color: #ffda6a;
  --jui-alert-warning-background-color: #332701;
  --jui-alert-warning-border-color: #997404;
  --jui-alert-warning-link-color: #ffe69c;
  --jui-alert-danger-color: #ea868f;
  --jui-alert-danger-background-color: #2c0b0e;
  --jui-alert-danger-border-color: #842029;
  --jui-alert-danger-link-color: #f1aeb5;
}

/* Bootstrap .modal chrome (T4's own --t4-modal-* tokens — a separate namespace from
   the --t4-body and --t4-secondary-bg tokens remapped above, so it was missed): used
   by the core iframe/lightbox modal (e.g. Registration's "Terms & Conditions"). The
   card stayed white with a #333 title. NOTE: the modal's IFRAME body (tmpl=component)
   is a separate document no parent CSS can reach — that is a PHP/asset gap, not here. */
html[data-theme="dark"] .modal {
  --t4-modal-bg: var(--dm-surface);
  --t4-modal-color: var(--dm-text);
  --t4-modal-border-color: var(--dm-border);
  --t4-modal-header-border-color: var(--dm-border);
  --t4-modal-footer-border-color: var(--dm-border);
}
html[data-theme="dark"] body.modal-open .modal .modal-header h3,
html[data-theme="dark"] body.modal-open .modal .modal-header .h3 { color: var(--dm-heading); }

/* User profile (view): "Edit Profile" toolbar button (#e9ecef + remapped white
   heading text = light-on-light) + section legend/dt/dd hairlines (#e9ecef). */
html[data-theme="dark"] .profile.profile .btn-toolbar a.btn { background: var(--dm-surface-2); color: var(--dm-text); }
html[data-theme="dark"] .profile.profile .btn-toolbar a.btn:hover { background: var(--dm-surface); color: var(--dm-heading); }
html[data-theme="dark"] .profile.profile fieldset legend,
html[data-theme="dark"] .profile.profile fieldset dt,
html[data-theme="dark"] .profile.profile fieldset dd { border-bottom-color: var(--dm-border); }

/* Smart Search results: list hairlines (#e9ecef → glow) + taxonomy badge
   (#252525 text on a translucent chip → dark-on-dark). */
html[data-theme="dark"] #search-results { border-top-color: var(--dm-border); }
html[data-theme="dark"] #search-results .result-item { border-bottom-color: var(--dm-border); }
html[data-theme="dark"] .com-finder #search-results .badge { background: var(--dm-surface-2); color: var(--dm-text); }

/* Smart Search advanced filters: the date labels ("Start Date"/"End Date") get a
   hardcoded #333 from `.com-finder #finder-filter-window .filter-date label` (spec
   1,2,1) → dark-on-dark. Mirror+beat that exact chain, and route the other advanced
   labels too (the .control-label ones are already --dm-text — no-op for them). */
html[data-theme="dark"] .com-finder #finder-filter-window .filter-date label,
html[data-theme="dark"] .com-finder #finder-filter-window label,
html[data-theme="dark"] .com-finder__advanced label { color: var(--dm-text); }

/* com_users "Username Reminder" (.com-users-remind) + "Password Reset"
   (.com-users-reset): the view container is the FULL-WIDTH white content-area bg
   (blends invisibly on the white page in light, like the login form does) — it kept
   a hardcoded #fff → a white slab on the dark page. Blend it back (§1 row 1): make it
   transparent so the dark page shows through, matching the transparent login form. */
html[data-theme="dark"] .com-users-remind,
html[data-theme="dark"] .com-users-reset { background: transparent; }

/* Joomla core date-picker popup (advanced search, registration DOB, etc.): the
   --calendar-bg var has no dark value → stark white card. Its Clear/Today/Close
   buttons are matched by a MORE specific T4 rule (.js-calendar .buttons-wrapper
   .btn, 0,3,0) than the existing .btn-clear/.btn-today/.btn-exit override (0,2,0). */
html[data-theme="dark"] .calendar-container,
html[data-theme="dark"] .calendar-container table { --calendar-bg: var(--dm-surface); }
html[data-theme="dark"] .calendar-container table tbody td.day.wn { --calendar-week-bg: var(--dm-surface-2); }
html[data-theme="dark"] .js-calendar .buttons-wrapper .btn { background: var(--dm-surface-2); color: var(--dm-text); }
html[data-theme="dark"] .js-calendar .buttons-wrapper .btn:hover { background: var(--dm-surface); color: var(--dm-heading); }

/* Contact: address/phone/email FontAwesome icons inherit a literal #333 from
   their dd parent → near-invisible on dark. */
html[data-theme="dark"] .contact .contact-address dd { color: var(--dm-text); }

/* Standalone error doc (error.php/error-t4.php): the giant 320px ".error-code"
   "404" glyph is a <div>, so the h1–h6 heading remap misses it → it kept
   error.css's #333 (invisible on the dark page) while its sibling ".error-message
   h2" correctly went light. In light BOTH are #333; mirror that relationship by
   routing the code to the same heading token. (darkmode.css is linked on the doc.) */
html[data-theme="dark"] .error-code { color: var(--dm-heading); }

/* ==========================================================================
   Theme toggle button (the ONE block visible in BOTH modes — solid header,
   so transparent bg + icon follows header text colour). Icon cross-fades.
   ========================================================================== */
.t4-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: .35rem;
  padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
  position: relative; -webkit-appearance: none; appearance: none;
  transition: background-color .2s ease, color .2s ease;
}
.t4-theme-toggle:hover { background: rgba(127,127,127,.14); }
.t4-theme-toggle:focus-visible { outline: 2px solid var(--dm-accent); outline-offset: 2px; }
.t4-theme-toggle svg { position: absolute; transition: opacity .2s ease, transform .3s ease; }
.t4-theme-toggle__moon { opacity: 1; }        /* light mode shows the moon (switch TO dark) */
.t4-theme-toggle__sun  { opacity: 0; }
html[data-theme="dark"] .t4-theme-toggle__moon { opacity: 0; }
html[data-theme="dark"] .t4-theme-toggle__sun  { opacity: 1; }
html[data-theme="dark"] .t4-theme-toggle { color: var(--dm-text); }
html[data-theme="dark"] .t4-theme-toggle:hover { background: rgba(255,255,255,.08); color: var(--dm-heading); }

/* Home-3 header is transparent OVER a dark hero photo → its top-level nav text is
   white. The toggle uses color:inherit which resolves to the page's #4f4f4f → the
   icon is near-invisible on the photo. Match it to the white header text. LIGHT-mode
   only: the dark rule above (0,2,1) outranks this (0,2,0), so dark keeps --dm-text. */
.layout-home-3 .t4-theme-toggle { color: #fff; }