/* =============================================================================
   JA Agrivita — Dark mode (vega standard)
   -----------------------------------------------------------------------------
   This is the dedicated dark-mode stylesheet. It is loaded AFTER template.css by
   index.php (via addCustomTag('<link …darkmode.css>')) so it wins equal-specificity
   ties. Do NOT put these rules in custom.css — that is the site owner's file.

   Light mode is the original, approved design and is NOT modified. Every rule here
   is scoped under the dark hook `html[data-theme="dark"]`. The only rules that
   apply in BOTH modes are the theme-toggle control (static markup lives in
   html/layouts/t4/block/mainnav.html; js/darkmode.js just wires the click).

   Strategy: the template is CSS-custom-property driven, so dark mode is mostly a
   REMAP of the template's own color tokens under html[data-theme="dark"]. The brand green
   accent (--color-primary #8cb866) is kept unchanged. Per-component overrides
   below handle elements that hardcode colors or need surface/transparent
   decisions. Dark MIRRORS light — same relationships, never extra contrast.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1) Palette + TOKEN REMAP (the big lever)
   --------------------------------------------------------------------------- */
html[data-theme="dark"] {
  /* Dark palette — one source of truth (tune here / hand off to the GUI) */
  --dm-bg:        #14181c;   /* page background                              */
  --dm-band:      #191e23;   /* tinted section bands (was --color-light)      */
  --dm-surface:   #1e242a;   /* cards / panels                               */
  --dm-surface-2: #262d34;   /* elevated surfaces (dropdowns, hovers)        */
  --dm-border:    #2e353d;   /* dividers / frames                            */
  --dm-field-border: #3c454e;/* form fields + outline buttons (one step up)  */
  --dm-text:      #c2c9d0;   /* body copy                                    */
  --dm-text-muted:#8c97a0;   /* muted / meta text                            */
  --dm-heading:   #eef1f4;   /* headings                                     */

  /* Brand accent — KEEP the template green; lighter hover for the dark page */
  --ja-accent:       #8cb866;
  --ja-accent-hover: #a3cd7d;

  /* Remap the template's own tokens */
  --body-bg-color:   var(--dm-bg);
  --body-text-color: var(--dm-text);
  --heading-color:   var(--dm-heading);
  --color-light:     var(--dm-band);
  --color-dark:      var(--dm-heading);   /* used as "dark text" → flip light */
  --color-secondary: #aeb6bf;
  --body-link-color: var(--ja-accent);
  --body-link-hover-color: var(--ja-accent-hover);

  --mainnav-text-color:        var(--dm-text);
  --mainnav-link-color:        var(--dm-text);
  --mainnav-link-hover-color:  var(--ja-accent);
  --mainnav-link-active-color: var(--ja-accent);

  /* Footer is already dark in light mode — keep it dark, sit it slightly
     deeper than the page so the seam reads, mirror light's relationship. */
  --footer-bg-color:   #0f1316;
  --footer-text-color: #ffffff;
  --footer-link-color: #9aa3ac;

  /* Bootstrap-as-T4 tokens that components read directly */
  --bs-body-bg:        var(--dm-bg);
  --bs-body-color:     var(--dm-text);
  --bs-border-color:   var(--dm-border);
  --bs-emphasis-color: var(--dm-heading);
  --bs-secondary-bg:   var(--dm-surface);
  --bs-tertiary-bg:    var(--dm-surface-2);
  --bs-secondary-color: var(--dm-text-muted);
  --bs-heading-color:  var(--dm-heading);

  /* .text-muted uses `color: var(--t4-secondary-color) !important` — in light it's
     a dark ~75%-alpha grey, invisible on the dark page (e.g. the registration
     "Minimum Requirements …" hint). Point it at the muted token. */
  --t4-secondary-color: var(--dm-text-muted);

  /* List-group separators use rgba(0,0,0,.1) — invisible on dark; use the divider token. */
  --t4-list-group-border-color: var(--dm-border);

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   2) Base surfaces
   --------------------------------------------------------------------------- */
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"] .body-wrap,
html[data-theme="dark"] #t4-body,
html[data-theme="dark"] .t4-section { background-color: transparent; }

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 { color: var(--dm-heading); }

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] span:not([class*="icon"]):not(.badge),
html[data-theme="dark"] dd, html[data-theme="dark"] dt { color: inherit; }

/* Blockquotes / captions hardcode #212529 in the source → lighten */
html[data-theme="dark"] blockquote,
html[data-theme="dark"] blockquote p,
html[data-theme="dark"] .blockquote,
html[data-theme="dark"] figcaption,
html[data-theme="dark"] cite { color: var(--dm-text); }

html[data-theme="dark"] a { color: var(--body-link-color); }
html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus { color: var(--body-link-hover-color); }

/* Tinted "light" bands become dark bands */
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .color-light-bg,
html[data-theme="dark"] [class*="bg-light"] { background-color: var(--dm-band) !important; }

/* Generic white surfaces → dark surface */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-body,
html[data-theme="dark"] [class*="bg-white"] { background-color: var(--dm-surface) !important; }

/* ---------------------------------------------------------------------------
   3) Header / navigation
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .t4-header,
html[data-theme="dark"] .header-block,
html[data-theme="dark"] .header-wrap { background-color: var(--dm-bg); }
html[data-theme="dark"] .t4-header.header-overlap { background-color: transparent; }

/* Logo: the header/off-canvas logo (item-1.png) has dark "Agrivita" wordmark
   that vanishes on the dark header. Swap to a recolored light-text variant
   (the colored shield is preserved). The footer uses item-2.png (already
   light) — left untouched. Absolute path to survive optimize bundling. */
html[data-theme="dark"] .logo-image .logo-img,
html[data-theme="dark"] .t4-off-canvas-header .logo-img {
  /* content: url('/images/joomlart/logo/item-1-dark.png'); */
}

html[data-theme="dark"] .navbar-nav .nav-link { color: var(--dm-text); }
html[data-theme="dark"] .navbar-nav .nav-link:hover,
html[data-theme="dark"] .navbar-nav .nav-item.active > .nav-link { color: var(--ja-accent); }
/* Top-level dropdown caret triangle is a hardcoded `border-top:4px solid #212529`
   in source — invisible on the dark inner-page header. Re-point it to the nav-link
   colour token, which is already --dm-text (light) on inner pages and #212529 on
   the home-pinned light header, so it stays correct in both contexts. */
html[data-theme="dark"] .t4-megamenu .dropdown-toggle .item-caret::before {
  border-top-color: var(--mainnav-link-color);
}

/* Dropdown / megamenu panels */
html[data-theme="dark"] .t4-megamenu .dropdown-menu,
html[data-theme="dark"] .t4-megamenu .mega-dropdown-menu,
html[data-theme="dark"] .dropdown-menu {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .dropdown-item { color: var(--dm-text); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--dm-surface);
  color: var(--ja-accent);
}
/* Mega-menu items: light mode hovers with NO background (transparent), just an
   accent text colour (.t4-megamenu .dropdown-menu a:hover{background:transparent}).
   Mirror that — drop the surface fill the generic rule above adds. */
html[data-theme="dark"] .t4-megamenu .dropdown-menu a:hover,
html[data-theme="dark"] .t4-megamenu .dropdown-menu a:focus,
html[data-theme="dark"] .t4-megamenu .dropdown-menu li > a:hover,
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 .nav-link:hover {
  background-color: transparent;
  color: var(--ja-accent);
}

/* ---------------------------------------------------------------------------
   4) Cards / generic panels / borders
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .well {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] hr { border-color: var(--dm-border); }

/* White card surfaces (solid, rounded, visible in light → visible in dark).
   Scoped through the ACM container classes to beat the source specificity
   (.acm-*.style-N .card = 0,3,0). Brand-colored accent borders are kept. */
html[data-theme="dark"] .wrap-inner,
html[data-theme="dark"] .acm-features.style-1 .features-item,
html[data-theme="dark"] .acm-features.style-3 .features-inner,
html[data-theme="dark"] .acm-hero.style-2 .feature-list-wrap .item,
html[data-theme="dark"] .acm-hero.style-2 .item {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
/* .sub-info keeps its green accent border (by design); only repaint the fill.
   Its decorative light background-image is dropped so it doesn't glow. */
html[data-theme="dark"] .acm-features.style-1 .sub-info {
  background-color: var(--dm-surface);
  background-image: none;
  color: var(--dm-text);
}

/* Hero decorative backdrop panel (mint frosted in light → dark band) */
html[data-theme="dark"] .acm-hero.style-1 .bg-backdrop {
  background-color: rgba(25, 30, 35, 0.9);
}

/* Projects list-item content (hardcoded #343a40 text → light) */
html[data-theme="dark"] .list-item .item-content,
html[data-theme="dark"] .list-item .item-content p { color: var(--dm-text); }
html[data-theme="dark"] .list-item .item-content h1,
html[data-theme="dark"] .list-item .item-content h2,
html[data-theme="dark"] .list-item .item-content h3,
html[data-theme="dark"] .list-item .item-content h4 { color: var(--dm-heading); }

/* ---------------------------------------------------------------------------
   5) Forms
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-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"] textarea {
  background-color: var(--dm-surface);
  border-color: var(--dm-field-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--dm-text-muted); }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] textarea:focus {
  background-color: var(--dm-surface);
  border-color: var(--ja-accent);
  color: var(--dm-text);
}
/* ID-scoped form rules in the source (#contact-form, #member-registration,
   #member-profile, VirtueMart) hardcode background:#fff and beat the base
   rule — match their specificity here. */
html[data-theme="dark"] .contact #contact-form .form-control,
html[data-theme="dark"] .contact #contact-form input.form-control,
html[data-theme="dark"] .contact #contact-form textarea.form-control,
html[data-theme="dark"] .registration #member-registration input.form-control,
html[data-theme="dark"] #member-profile .form-control,
html[data-theme="dark"] div.com-users-remind .controls .form-control,
html[data-theme="dark"] div.com-users-reset .controls .form-control,
html[data-theme="dark"] .com_virtuemart input[type="text"],
html[data-theme="dark"] .com_virtuemart input[type="email"],
html[data-theme="dark"] .com_virtuemart input[type="password"],
html[data-theme="dark"] .com_virtuemart input[type="tel"],
html[data-theme="dark"] .com_virtuemart textarea,
html[data-theme="dark"] .com_virtuemart .quantity-input {
  background-color: var(--dm-surface);
  border: 1px solid var(--dm-field-border);
  color: var(--dm-text);
}

/* ---------------------------------------------------------------------------
   6) Buttons
   --------------------------------------------------------------------------- */
/* .btn-secondary is a near-black, high-contrast button in light. On the dark
   page that vanishes, so mirror it as a visible neutral surface button. */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] a.btn-secondary,
html[data-theme="dark"] input.btn-secondary {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-field-border);
  color: var(--dm-heading);
}
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-secondary:focus {
  background-color: var(--dm-surface);
  border-color: var(--ja-accent);
  color: var(--dm-heading);
}
/* btn-primary / addtocart use the brand green — by design, keep. Ensure the
   text on the green stays readable (it is dark-on-green in light too). */

/* btn-light / btn-dark read from --color-light / --color-dark, which the token
   remap flipped — restore readable neutral buttons (mirrors their light role). */
html[data-theme="dark"] .btn-light {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-field-border);
  color: var(--dm-heading);
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-light:focus {
  background-color: var(--dm-surface);
  color: var(--dm-heading);
}
html[data-theme="dark"] .btn-dark {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-field-border);
  color: var(--dm-heading);
}
html[data-theme="dark"] .btn-dark:hover,
html[data-theme="dark"] .btn-dark:focus {
  background-color: var(--dm-surface);
  color: var(--dm-heading);
}

/* ---------------------------------------------------------------------------
   7) Off-canvas (mobile menu) — uniform dark surface
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .t4-offcanvas,
html[data-theme="dark"] .t4-offcanvas .offcanvas-inner,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
}
/* Off-canvas header (light #f8f9fa in source) */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header h3,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .h3 { color: var(--dm-heading); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close { background-color: transparent; }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close span { color: var(--dm-text); }
/* Off-canvas nav links (source: .t4-offcanvas .t4-off-canvas-body .navbar .nav-link, 0,4,0) */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-link,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .separator,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-header { color: var(--dm-text); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-link:hover,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-item.active > .nav-link { color: var(--ja-accent); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-item,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu { border-color: var(--dm-border); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .btn-toggle { color: var(--dm-text); }

/* The off-canvas "push" effect paints .t4-content cream (#f3efe0) — keep dark */
html[data-theme="dark"] .t4-content { background-color: var(--dm-bg); }

/* Latest-users / tag chips (#e9ecef bg, #343a40 text → dark chip) */
html[data-theme="dark"] .latestusers li,
html[data-theme="dark"] .tagscloud .tag,
html[data-theme="dark"] .badge.bg-secondary {
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
}

/* ---------------------------------------------------------------------------
   7b) Content components — filter tabs, pagination, badges
   --------------------------------------------------------------------------- */
/* Blog / category filter tabs (literal #F0F9F4 mint in source → dark surface) */
html[data-theme="dark"] .tabs-category #nav-tab .nav-link,
html[data-theme="dark"] .nav-tabs .nav-link {
  background-color: var(--dm-surface);
  color: var(--dm-text);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .tabs-category #nav-tab .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
  background-color: var(--ja-accent);
  color: #14181c;
  border-color: var(--ja-accent);
}
/* VirtueMart product-detail tabs (.productdetails-view .section-tabs) are plain
   underline text-tabs in light — NOT mint chips like the blog filter tabs above.
   The generic .nav-tabs chip rule wrongly filled them ("2 màu nền"). Mirror light:
   desktop = transparent text + green active/hover underline; mobile keeps chips. */
html[data-theme="dark"] .productdetails-view .section-tabs ul.nav-tabs li a {
  background-color: transparent;
  border: none;
  color: var(--dm-heading);
}
html[data-theme="dark"] .productdetails-view .section-tabs ul.nav-tabs li a.active,
html[data-theme="dark"] .productdetails-view .section-tabs ul.nav-tabs li a:hover {
  background-color: transparent;
  border-bottom: 1px solid var(--ja-accent);
  color: var(--ja-accent) !important;
}
@media (max-width: 991.98px) {
  html[data-theme="dark"] .productdetails-view .section-tabs ul.nav-tabs li a {
    background-color: var(--dm-surface);
  }
  html[data-theme="dark"] .productdetails-view .section-tabs ul.nav-tabs li a.active,
  html[data-theme="dark"] .productdetails-view .section-tabs ul.nav-tabs li a:hover {
    background-color: var(--ja-accent);
    color: #fff;
    border: none;
  }
}

/* Pagination — paginationjs (JS lib: .paginationjs-pages ul li a) + standard BS.
   Source sets the number colour to #1D3677 !important (navy) — invisible on the
   dark chip — so the rest-state colour needs !important to win. */
html[data-theme="dark"] .paginationjs-pages ul li a,
html[data-theme="dark"] .paginationjs li a,
html[data-theme="dark"] ul.pagination .page-link,
html[data-theme="dark"] .pagination .page-link {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .paginationjs-pages ul li.active a,
html[data-theme="dark"] .paginationjs li.active a,
html[data-theme="dark"] ul.pagination li.active > a,
html[data-theme="dark"] .pagination .page-item.active .page-link {
  background-color: var(--ja-accent);
  border-color: var(--ja-accent);
  color: #fff !important;
}
html[data-theme="dark"] .paginationjs-pages ul li a:hover,
html[data-theme="dark"] .paginationjs-pages ul li a:focus,
html[data-theme="dark"] .paginationjs li a:hover,
html[data-theme="dark"] ul.pagination .page-link:hover,
html[data-theme="dark"] .pagination .page-link:hover {
  background-color: var(--ja-accent);
  border-color: var(--ja-accent);
  color: #fff !important;
}
html[data-theme="dark"] .paginationjs-prev a,
html[data-theme="dark"] .paginationjs-next a { color: var(--dm-text); }
html[data-theme="dark"] .paginationjs li.disabled a,
html[data-theme="dark"] .paginationjs-prev.disabled a,
html[data-theme="dark"] .paginationjs-next.disabled a { color: var(--dm-text-muted); }

/* Small mint badges → dark chip */
html[data-theme="dark"] .blog .cat-children .cat-child h3 .badge,
html[data-theme="dark"] .blog-featured .cat-children .cat-child h3 .badge {
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
}

/* VirtueMart "related products" full-bleed mint band (#F0F9F4 literal) */
html[data-theme="dark"] .pd-detail-item.product-related-products,
html[data-theme="dark"] .product-related-products { background-color: var(--dm-band); }

/* VirtueMart category browse controls (sort bar / spacer / selects — white).
   The product card .spacer uses .category-view .category-view .category .spacer
   (0,4,0) in VM's CSS — match/beat it. */
/* Only .activeOrder (the sort-by select control) is a white box in light → dark
   surface. .orderlistcontainer (Manufacturer) and .vm-pagination are TRANSPARENT
   in light — leaving them surface added boxes light doesn't have ("2 màu nền"). */
html[data-theme="dark"] .com_virtuemart .activeOrder {
  background-color: var(--dm-surface);
  color: var(--dm-text);
}
html[data-theme="dark"] .com_virtuemart .orderlistcontainer,
html[data-theme="dark"] .com_virtuemart .browse-view .vm-pagination {
  background-color: transparent;
  color: var(--dm-text);
}
html[data-theme="dark"] .category-view .category-view .category .spacer,
html[data-theme="dark"] .com_virtuemart .category .spacer {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] select.inputbox,
html[data-theme="dark"] .com_virtuemart select,
html[data-theme="dark"] .com_virtuemart .display-number select.inputbox,
html[data-theme="dark"] .control-group .controls select.inputbox {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-field-border) !important;
  color: var(--dm-text) !important;
}

/* Utility fills: .bg-dark / .bg-secondary are near-black fills with white text
   in light. The token remap lightened them — restore a dark fill so the white
   text stays readable (mirrors light's high-contrast chip). */
html[data-theme="dark"] .bg-dark,
html[data-theme="dark"] .badge.bg-dark {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-heading) !important;
}
html[data-theme="dark"] .bg-secondary,
html[data-theme="dark"] .badge.bg-secondary {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}

/* Progress track (light #e9ecef → dark) */
html[data-theme="dark"] .progress { background-color: var(--dm-surface-2); }

/* Bootstrap list-group (tagged items, etc.): in light the items are white = the
   white page, so they BLEND (no card) with just a 1px separator. Mirror that —
   transparent fill (blend with the dark page) + a --dm-border separator. */
html[data-theme="dark"] .list-group-item {
  background-color: transparent;
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .list-group-item a,
html[data-theme="dark"] .list-group-item-action { color: var(--dm-text); }
html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
  background-color: var(--dm-surface-2);
  color: var(--ja-accent);
}

/* alert-light is near-white and glares on dark; mirror it as a subtle dark box.
   The semantic colored alerts (primary/success/danger/warning/info) keep their
   pastel fills — they read like light and are by design. */
html[data-theme="dark"] .alert-light {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

/* ---------------------------------------------------------------------------
   8) Footer (already dark in light — keep relationships)
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .t4-footer,
html[data-theme="dark"] footer { background-color: var(--footer-bg-color); }

/* ---------------------------------------------------------------------------
   9) Standalone documents — error.php (404) + offline.php
   These load custom.css directly (own pre-paint script). jpages.css hardcodes
   white backgrounds for them, so override here.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] body.error-page,
html[data-theme="dark"] body.offline {
  background-color: var(--dm-bg);
  color: var(--dm-text);
}
html[data-theme="dark"] body.error-page .error-page-wrap,
html[data-theme="dark"] .form-wrap { background-color: var(--dm-surface); }
html[data-theme="dark"] body.error-page .error-code,
html[data-theme="dark"] body.error-page .error-info h2,
html[data-theme="dark"] .form-wrap h1 { color: var(--dm-heading); }
html[data-theme="dark"] .form-wrap #form-login input,
html[data-theme="dark"] body.offline input.inputbox,
html[data-theme="dark"] body.offline .inputbox {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-field-border);
  color: var(--dm-text);
}
/* T4-fallback error page (error-t4.php) */
html[data-theme="dark"] .t4-error-page { background-color: var(--dm-bg); color: var(--dm-text); }
html[data-theme="dark"] .t4-error-page h1 { color: var(--dm-heading); }
html[data-theme="dark"] .t4-error-page .cta-wrap a {
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
}
/* .page-redirect a (error) keeps brand green by design */

/* =============================================================================
   THEME TOGGLE CONTROL — single compact icon button (applies in BOTH modes)
   Sits in the header-right zone next to search / cart / hamburger and mirrors
   their plain-icon treatment + 16px spacing. Moon icon = light mode (click to
   go dark); sun icon = dark mode (click to go light).
   ========================================================================== */
.ja-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;          /* match the sibling header icons */
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--body-text-color, #6c757d);  /* track the search / cart icon colour */
  cursor: pointer;
  line-height: 0;
  transition: color .15s ease;
}
.ja-theme-toggle:hover,
.ja-theme-toggle:focus { color: var(--color-primary, #8cb866); }
/* Size + stroke weight tuned to match the sibling cart icon (24px outline SVG,
   ~2px stroke) so the toggle reads as part of the same icon set. */
.ja-theme-toggle .ja-tt-svg { display: block; width: 24px; height: 24px; stroke-width: 2px; }
.ja-theme-toggle .ja-tt-icon { display: inline-flex; }
.ja-theme-toggle .ja-tt-sun { display: none; }
/* In dark mode show the sun (click to return to light) */
html[data-theme="dark"] .ja-theme-toggle .ja-tt-moon { display: none; }
html[data-theme="dark"] .ja-theme-toggle .ja-tt-sun { display: inline-flex; }

/* =============================================================================
   HOME — hero section + overlapping header stay in the LIGHT design in BOTH
   modes (owner request). Only the hero + its header are pinned; every section
   below the hero switches to dark normally. The header is position:relative
   with .header-overlap (it only ever sits over the light hero, never over
   scrolled dark content), so this is safe. Achieved by re-pointing the colour
   TOKENS back to light on the two containers (cascades to nav links, header
   icons, the theme toggle) + a few explicit resets.
   ========================================================================== */
html[data-theme="dark"] body.layout-home #t4-hero,
html[data-theme="dark"] body.layout-home .t4-header {
  --heading-color: #212529;
  --body-text-color: #6c757d;
  --body-bg-color: #ffffff;
  --color-light: #f0f9f4;
  --color-dark: #212529;
  --mainnav-link-color: #212529;
  --mainnav-text-color: #212529;
}
/* Header (overlap) and its inner wrappers transparent so the hero shows through */
html[data-theme="dark"] body.layout-home .t4-header,
html[data-theme="dark"] body.layout-home .t4-header .header-block,
html[data-theme="dark"] body.layout-home .t4-header .header-wrap { background-color: transparent; }

/* Hero mint backdrop + text — exactly as light */
html[data-theme="dark"] body.layout-home #t4-hero .bg-backdrop { background-color: rgba(212, 233, 226, .9); }
html[data-theme="dark"] body.layout-home #t4-hero,
html[data-theme="dark"] body.layout-home #t4-hero .hero-content-wrap { color: #212529; }
html[data-theme="dark"] body.layout-home #t4-hero h1,
html[data-theme="dark"] body.layout-home #t4-hero h2,
html[data-theme="dark"] body.layout-home #t4-hero h3,
html[data-theme="dark"] body.layout-home #t4-hero .h1,
html[data-theme="dark"] body.layout-home #t4-hero .h2 { color: #212529; }
html[data-theme="dark"] body.layout-home #t4-hero p,
html[data-theme="dark"] body.layout-home #t4-hero .lead,
html[data-theme="dark"] body.layout-home #t4-hero .hero-desc { color: #6c757d; }
/* "Discover more" stays the dark pill of the light design */
html[data-theme="dark"] body.layout-home #t4-hero .btn-secondary {
  background-color: #212529;
  border-color: #212529;
  color: #fff;
}

/* Header logo: original dark-wordmark version (not the dark-mode light variant) */
html[data-theme="dark"] body.layout-home .t4-header .logo-image .logo-img,
html[data-theme="dark"] body.layout-home .t4-header .logo-img {
  /* content: url('/images/joomlart/logo/item-1.png'); */
}
/* Header-right icons sit over the hero photo, so the light design renders them
   WHITE (cart SVG stroke:#fff, hamburger #fff, search). Keep them white in dark
   mode too, and force the theme toggle white to match (it would otherwise follow
   --body-text-color which the hero reset sets to grey). Both modes — these icons
   are always over the photo on home. */
html[data-theme="dark"] body.layout-home .t4-header .t4-header-r,
html[data-theme="dark"] body.layout-home .t4-header .t4-header-r .finder,
html[data-theme="dark"] body.layout-home .t4-header .t4-header-r .dropdownCart-btn { color: #fff; }
body.layout-home .t4-header .t4-header-r .ja-theme-toggle { color: #fff; }
body.layout-home .t4-header .t4-header-r .ja-theme-toggle:hover,
body.layout-home .t4-header .t4-header-r .ja-theme-toggle:focus { color: var(--color-primary, #8cb866); }

/* Header nav links (token reset covers colour; restate active/hover) */
html[data-theme="dark"] body.layout-home .t4-header .navbar-nav .nav-link { color: #212529; }
html[data-theme="dark"] body.layout-home .t4-header .navbar-nav .nav-link:hover,
html[data-theme="dark"] body.layout-home .t4-header .navbar-nav .nav-item.active > .nav-link { color: var(--color-primary, #8cb866); }

/* Dropdowns opened from the (light) home header → light panels, dark items */
html[data-theme="dark"] body.layout-home .t4-header .dropdown-menu,
html[data-theme="dark"] body.layout-home .t4-header .mega-dropdown-menu {
  background-color: #fff;
  border-color: rgba(0, 0, 0, .12);
}
html[data-theme="dark"] body.layout-home .t4-header .dropdown-item,
html[data-theme="dark"] body.layout-home .t4-header .dropdown-menu .nav-link,
html[data-theme="dark"] body.layout-home .t4-header .dropdown-menu .menu-item-title,
html[data-theme="dark"] body.layout-home .t4-header .mega-dropdown-menu .mega-col-title,
html[data-theme="dark"] body.layout-home .t4-header .mega-dropdown-menu .mega-col-title span { color: #212529; }
/* hover mirrors light: text → green, NO background (light keeps the bg transparent) */
html[data-theme="dark"] body.layout-home .t4-header .dropdown-item:hover,
html[data-theme="dark"] body.layout-home .t4-header .dropdown-item:focus,
html[data-theme="dark"] body.layout-home .t4-header .dropdown-menu .nav-link:hover,
html[data-theme="dark"] body.layout-home .t4-header .dropdown-menu .nav-link:focus {
  background-color: transparent;
  color: var(--color-primary, #8cb866);
}
/* the visible label is the .menu-item-title span (pinned #212529 above); turn it
   green when its link is hovered so the green effect actually shows on home. */
html[data-theme="dark"] body.layout-home .t4-header .dropdown-item:hover .menu-item-title,
html[data-theme="dark"] body.layout-home .t4-header .dropdown-item:focus .menu-item-title,
html[data-theme="dark"] body.layout-home .t4-header .dropdown-menu .nav-link:hover .menu-item-title,
html[data-theme="dark"] body.layout-home .t4-header .dropdown-menu .nav-link:focus .menu-item-title {
  color: var(--color-primary, #8cb866);
}

/* =============================================================================
   CONTRAST FIXES (dark) — elements whose LIGHT-mode colour stayed put after the
   token remap and ended up dark-on-dark (or too dim). Each mirrors light.
   ========================================================================== */

/* Section "lead" description (e.g. the "Membership is the opportunity…"
   paragraph) was hardcoded #343a40 → light body text on the dark page. */
html[data-theme="dark"] .section-bottom-desc,
html[data-theme="dark"] .section-bottom-desc.lead { color: var(--dm-text); }

/* Big decorative watermark numbers (.count-item, e.g. the "01" on the
   Our-mission card) are a faint DARK wash in light (rgba(0,0,0,.1)) → mirror as
   a faint LIGHT wash so they read as a subtle watermark, not vanish. Source rule
   is `.acm-features.style-1 .count-item` (0,3,0) so match through the container;
   the "02" on the photo card (.has-bg) keeps its own white wash. */
html[data-theme="dark"] .acm-features.style-1 .features-item:not(.has-bg) .count-item {
  color: rgba(255, 255, 255, 0.12);
}

/* "How we work on quality?" section (.bg-linear, unique) sits over a LIGHT
   hills/sky photo in BOTH modes, so mirror light: keep its heading dark. NOTE the
   heading is a <span class="h2 main-title">, which the generic
   `span:not(...){color:inherit}` base rule (0,3,2) catches — so this needs ≥0,3,2;
   the extra .section-title-wrap class takes it to 0,4,1. */
html[data-theme="dark"] .bg-linear .section-title-wrap .main-title { color: #212529; }

/* Its steps accordion is a dark box over the photo; the inactive steps kept the
   light-mode dark text (#343a40) on the now-dark band → make them readable. */
html[data-theme="dark"] .bg-linear .nav-link.h4:not(.active) { color: var(--dm-text); }
html[data-theme="dark"] .bg-linear .nav-link.h4:not(.active) .count-item { color: var(--dm-text-muted); }

/* =============================================================================
   Header-right icon glyphs with BAKED-IN dark colours — they ignore `color`:
   the search magnifier is a base64 SVG bg-image (stroke #181D24) on the input,
   and the cart SVG path has an inline stroke="#212529". On a dark header both
   render dark-on-dark. Recolour to the header icon colour: light (--dm-text) on
   inner pages, white over the home hero photo. (Hamburger + toggle already light.)
   ========================================================================== */
/* Cart — a CSS `stroke` overrides the inline stroke attribute */
html[data-theme="dark"] .t4-header-r .dropdownCart-icon svg path,
html[data-theme="dark"] .t4-header-r .dropdownCart-icon svg [stroke] { stroke: var(--dm-text); }
html[data-theme="dark"] body.layout-home .t4-header .dropdownCart-icon svg path,
html[data-theme="dark"] body.layout-home .t4-header .dropdownCart-icon svg [stroke] { stroke: #fff; }

/* Search magnifier — swap the dark base64 SVG bg-image for a light-stroke one */
html[data-theme="dark"] .t4-header-r .js-finder-searchform input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath d='M10.875 19.25C15.2242 19.25 18.75 15.7242 18.75 11.375C18.75 7.02576 15.2242 3.5 10.875 3.5C6.52576 3.5 3 7.02576 3 11.375C3 15.7242 6.52576 19.25 10.875 19.25Z' stroke='%23c2c9d0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.4431 16.9438L20.9994 21.5001' stroke='%23c2c9d0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
html[data-theme="dark"] body.layout-home .t4-header .js-finder-searchform input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath d='M10.875 19.25C15.2242 19.25 18.75 15.7242 18.75 11.375C18.75 7.02576 15.2242 3.5 10.875 3.5C6.52576 3.5 3 7.02576 3 11.375C3 15.7242 6.52576 19.25 10.875 19.25Z' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.4431 16.9438L20.9994 21.5001' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
/* The collapsed search field has bg rgba(255,255,255,.05): invisible on a light
   header but a grey box on the dark one. Blend it (transparent) like light, and
   only show a surface fill once focused/expanded (when you actually type). */
html[data-theme="dark"] .t4-header-r .form-search .js-finder-search-query,
html[data-theme="dark"] .t4-header-r .form-search .search-query {
  background-color: transparent;
}
html[data-theme="dark"] .t4-header-r .form-search .js-finder-search-query:focus,
html[data-theme="dark"] .t4-header-r .form-search .search-query:focus {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-field-border);
  color: var(--dm-text);
  /* source :focus reverts the magnifier to the dark search-dark.svg — keep light */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath d='M10.875 19.25C15.2242 19.25 18.75 15.7242 18.75 11.375C18.75 7.02576 15.2242 3.5 10.875 3.5C6.52576 3.5 3 7.02576 3 11.375C3 15.7242 6.52576 19.25 10.875 19.25Z' stroke='%23c2c9d0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.4431 16.9438L20.9994 21.5001' stroke='%23c2c9d0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
/* Placeholder in the expanded field — source sets rgba(0,0,0,.3) (dark on dark) */
html[data-theme="dark"] .t4-header-r .form-search .js-finder-search-query:focus::placeholder,
html[data-theme="dark"] .t4-header-r .form-search .search-query:focus::placeholder,
html[data-theme="dark"] .t4-header-r .form-search .js-finder-search-query::placeholder,
html[data-theme="dark"] .t4-header-r .form-search .search-query::placeholder {
  color: var(--dm-text-muted);
}

/* Cart count badge (.total_products): light mode is a dark bubble (#212529) with
   a green number. The --color-secondary remap turned the bubble light grey
   (#aeb6bf) → green-on-grey, unreadable. Mirror light: dark bubble + green number.
   NOTE: the badge is height:20px/line-height:19px with NO border in light — do
   NOT add a border here (it grows the box and shifts the number vs light). */
html[data-theme="dark"] .vmCartModule.dropdownCart .total_products,
html[data-theme="dark"] .total_products {
  background-color: var(--dm-surface-2);
  color: var(--ja-accent);
}

/* Blog category meta pill: on hover the source fills it with the brand green and
   sets white text (.category-name a:hover → background:var(--color-primary);
   color:#fff) — white on the light green is only ~2.3:1. Mirror the green fill but
   use dark text for contrast (~7.9:1). Also covers the highlight-module variant
   (higher-specificity source). */
html[data-theme="dark"] .category-name a:hover,
html[data-theme="dark"] .category-name a:focus,
html[data-theme="dark"] .category-name [itemprop="genre"]:hover,
html[data-theme="dark"] .mod-article-highlight .item-highlight .article-content .category-name a:hover {
  background: var(--ja-accent);
  color: #14181c;
}

/* Blog/category meta pill (rest state): source sets .category-name a colour #6c757d,
   which is only ~3.8:1 on the dark page (faint). Lift to the muted token (~5:1) so
   the category reads while staying meta-muted. (Hover still fills green — see above;
   the date uses the brand green already.) */
html[data-theme="dark"] .category-name a,
html[data-theme="dark"] .category-name [itemprop="genre"] {
  color: var(--dm-text-muted);
}

/* Form validation popover (.form-control-feedback, e.g. "Please fill in this field"):
   the source is a white box + pure-red text + white arrow — harsh on the dark form.
   Make it a dark surface with a softer light-red text and dark arrows. */
html[data-theme="dark"] .control-label .form-control-feedback {
  --t4-popover-bg: var(--dm-surface-2);
  --t4-popover-body-color: #ff8a8a;
  --t4-popover-arrow-border: var(--dm-border);
  background-color: var(--dm-surface-2);
  border-color: var(--dm-border);
  color: #ff8a8a !important; /* beats the red inherited from label.invalid / the var */
}
html[data-theme="dark"] .control-label .form-control-feedback:after { border-top-color: var(--dm-surface-2); }
html[data-theme="dark"] .control-label .form-control-feedback:before { border-top-color: var(--dm-border); }

/* Joomla validation gives the invalid field LABEL a white background + red text
   (from core CSS) — the white strip looks bad on the dark form. Make the label
   background transparent with soft light-red text. */
html[data-theme="dark"] .control-label label.invalid,
html[data-theme="dark"] label.invalid {
  background-color: transparent !important;
  color: #ff8a8a;
}

/* Article Previous/Next nav buttons (.pagenavigation .pagination a.btn): source is
   navy #1D3677 text on a faint rgba(0,0,0,.05) pill — only ~1.6:1 on the dark page.
   Mirror light's subtle button: a dark surface pill with light text; hover keeps
   the green fill but uses dark text for contrast (white-on-green was ~2.3:1). */
html[data-theme="dark"] .pagenavigation .pagination a.btn {
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
}
html[data-theme="dark"] .pagenavigation .pagination a.btn:hover,
html[data-theme="dark"] .pagenavigation .pagination a.btn:focus {
  background-color: var(--ja-accent);
  color: #14181c;
}

/* White-on-green hover/active states (background:var(--color-primary); color:#fff)
   are low-contrast — white on the light brand green is only ~2.3:1. Keep the green
   fill but switch the text to dark (~7.9:1). Covers tags, read-more, latest-articles,
   calendar buttons and VirtueMart product tabs / pagination. (Category pill, blog
   pager and nav-tabs are handled in their own blocks above.) */
html[data-theme="dark"] .tags > li > a:hover,
html[data-theme="dark"] .tags > li > a:focus,
html[data-theme="dark"] p.readmore .btn:hover,
html[data-theme="dark"] p.readmore .btn:focus,
html[data-theme="dark"] .mod-articles-highlight .mod-articleslatest a:hover,
html[data-theme="dark"] .js-calendar .buttons-wrapper .btn:hover,
html[data-theme="dark"] .productdetails-view .section-tabs ul.nav-tabs li a.active,
html[data-theme="dark"] .category-view .vm-pagination ul li .pagenav:hover {
  color: #14181c;
}

/* Read-more button rest state: source bg #e9ecef (light grey) is a leak on dark +
   green text on it is ~1.9:1. Mirror light's subtle pill: dark surface + green text
   (hover → green fill + dark text is handled in the white-on-green block above). */
html[data-theme="dark"] p.readmore .btn {
  background-color: var(--dm-surface-2);
  color: var(--ja-accent);
}

/* Read-more hover: the rest rule above out-specifies the source :hover background,
   so restate the green fill here (with dark text) — otherwise hover would be dark
   text on the rest surface (dark-on-dark). */
html[data-theme="dark"] p.readmore .btn:hover,
html[data-theme="dark"] p.readmore .btn:focus {
  background-color: var(--ja-accent);
  color: #14181c;
}

/* Tagged-items list (com-tags-tag): the item title LINK is hardcoded #212529
   (.com-tags-tag.tag-category .list-group .list-group-item a) — dark-on-dark, so the
   whole list looked empty. Light text at rest, accent on hover (mirrors light: dark
   link on a white card → light link on the dark card). */
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,
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item a:active {
  color: var(--ja-accent);
}

/* =============================================================================
   Off-canvas (mobile) drilldown — ONE consistent style:
   - submenu panels blend with the off-canvas (no lighter surface-2 box)
   - toggle chevrons are a light arrow with no light pill (source: #f2f4f6 circle
     + #adb5bd / black arrow), so they read on the dark panel
   ========================================================================== */
html[data-theme="dark"] .t4-offcanvas .dropdown-menu {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
html[data-theme="dark"] .t4-offcanvas .btn-toggle,
html[data-theme="dark"] .t4-offcanvas .sub-menu-toggle,
html[data-theme="dark"] .t4-offcanvas .menu-back,
html[data-theme="dark"] .t4-offcanvas .drilldown-back {
  background-color: transparent;
  color: var(--dm-text);
}
html[data-theme="dark"] .t4-offcanvas .btn-toggle::before,
html[data-theme="dark"] .t4-offcanvas .btn-toggle::after,
html[data-theme="dark"] .t4-offcanvas .sub-menu-toggle::before,
html[data-theme="dark"] .t4-offcanvas .sub-menu-toggle::after {
  color: var(--dm-text);
  border-color: var(--dm-text);
}

/* Scroll-to-top (#back-to-top): rgba(0,0,0,.5) box blends into the dark page, so it
   reads as a floating arrow with no button. Give it the brand-green chip + dark
   arrow — clearly visible and on-brand (~7.8:1). */
html[data-theme="dark"] #back-to-top {
  background-color: var(--ja-accent);
  color: #14181c;
}
html[data-theme="dark"] #back-to-top i { color: #14181c; }

/* Off-canvas drilldown DEEPER levels (2nd/3rd submenu): the links resolve to
   #343a40 (dark-on-dark) — level 1 was light but nested .dropdown-menu links were
   not. Force every nested off-canvas link to the light nav colour so all levels
   match (hover already uses the light --body-link-hover-color). */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .nav-link,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .dropdown-item,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .menu-item-title {
  color: var(--dm-text);
}
/* …but the rest rule above (0,6,1) out-specifies the source :hover (0,6,0), so the
   nested levels lost their green hover. Re-add it at 0,7,1 (the trailing :hover/:focus
   raises specificity past the rest rule) so deeper items match level 1's green hover. */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .nav-link:hover,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .nav-link:focus,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .nav-link:active,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .dropdown-item:hover,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .dropdown-item:focus,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .dropdown-item:active {
  color: var(--ja-accent);
}
/* the title <span> inside the link is a child, so colour it on the link's hover too */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .nav-link:hover .menu-item-title,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .dropdown-item:hover .menu-item-title {
  color: var(--ja-accent);
}

/* =============================================================================
   Off-canvas drilldown — match light mode (earlier fixes lost on specificity):
   - chevron toggle arrow is `color:#000` (source 0,5,1) → black on dark
   - the "‹ About" back-breadcrumb label is #212529 → invisible
   - the dashed item dividers are rgba(0,0,0,.1) → invisible
   Override all with the source's specificity (+ !important for the recolors).
   ========================================================================== */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle::after,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .btn-toggle,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .btn-toggle::after {
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .sub-menu-back,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .sub-menu-back i,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back i {
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-item {
  border-bottom-color: var(--dm-border) !important;
}