/* ============================================================================
   JA Sport — 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. The toggle button is the ONE block that
   applies in both modes; its icon swap is scoped to dark.
   Brand: primary navy #1b265c (kept) + accent red-pink #ff2850 (kept).
   ============================================================================ */

/* ------------------------------------------------------------------ *
 * 1) Palette + TOKEN REMAP (the big lever)
 * ------------------------------------------------------------------ */
html[data-theme="dark"] {
  /* dark palette — one source of truth */
  --dm-bg:#10141f;            /* page */
  --dm-band:#161c28;          /* subtle band vs page (.bg-light / --color-light) */
  --dm-surface:#1a2130;       /* cards / panels */
  --dm-surface-2:#232c3d;     /* elevated / inputs / hovered rows */
  --dm-border:#2c3547;        /* every divider / frame */
  --dm-field-border:#465066;  /* form fields + outline buttons (one step lighter) */
  --dm-text:#c3cad6;          /* body copy */
  --dm-text-muted:#8b96a8;    /* meta / muted */
  --dm-heading:#eef1f6;       /* headings */
  --dm-link:#6f8bff;          /* navy-brand used as a text link, lifted for the dark page */

  /* brand — KEEP. Only define lighter hovers for the dark page. */
  --ja-accent:#ff2850;
  --ja-accent-hover:#ff5573;
  --ja-navy:#1b265c;

  /* --- remap the template's own color TOKENS --- */
  --heading-color: var(--dm-heading);
  --body-text-color: var(--dm-text);
  --body-color: var(--dm-text);
  --border-color: var(--dm-border);
  --color-border: var(--dm-border);
  --border-input: var(--dm-field-border);   /* form field borders (inc. textarea) */
  --body-bg-color: var(--dm-bg);
  --color-light: var(--dm-band);
  /* NOTE: do NOT remap --color-white — it doubles as white text over the navy
     bands (e.g. "FEATURED VIDEO" title). White-surface cards are handled per-element. */
  --body-link-color: var(--dm-link);
  --body-link-hover-color: var(--ja-accent);
  --mainnav-link-color: var(--dm-text);
  --mainnav-link-hover-color: var(--ja-accent);
  --mainnav-link-active-color: var(--ja-accent);

  /* Bootstrap-as-T4 surface/border/text vars */
  --t4-body-bg: var(--dm-bg);
  --t4-body-color: var(--dm-text);
  --t4-light: var(--dm-band);
  --t4-light-rgb: 22,28,40;
  --t4-border-color: var(--dm-border);
  --t4-emphasis-color: var(--dm-heading);
  --t4-secondary-color: var(--dm-text-muted);
  --t4-secondary-bg: var(--dm-surface);
  --t4-tertiary-bg: var(--dm-surface-2);
  --t4-tertiary-color: var(--dm-text-muted);
  --t4-heading-color: var(--dm-heading);

  /* Bootstrap 5 native (data-bs-theme=dark also set, but pin these to our palette) */
  --bs-body-bg: var(--dm-bg);
  --bs-body-color: var(--dm-text);
  --bs-border-color: var(--dm-border);
  --bs-secondary-bg: var(--dm-surface);
  --bs-tertiary-bg: var(--dm-surface-2);
  --bs-emphasis-color: var(--dm-heading);

  /* Bootstrap card + pagination tokens */
  --t4-card-bg: var(--dm-surface);
  --t4-card-color: var(--dm-text);
  --t4-card-border-color: var(--dm-border);
  --t4-card-cap-bg: var(--dm-surface-2);
  --t4-card-cap-color: var(--dm-heading);
  --t4-pagination-bg: var(--dm-surface);
  --t4-pagination-color: var(--dm-link);
  --t4-pagination-border-color: var(--dm-border);
  --t4-pagination-hover-bg: var(--dm-surface-2);
  --t4-pagination-hover-color: var(--dm-heading);
  --t4-pagination-hover-border-color: var(--dm-border);
  --t4-pagination-disabled-bg: var(--dm-surface);
  --t4-pagination-disabled-border-color: var(--dm-border);

  /* Popover (validation tooltips) + list-group tokens */
  --t4-popover-bg: var(--dm-surface-2);
  --t4-popover-body-color: var(--dm-text);
  --t4-popover-header-bg: var(--dm-surface);
  --t4-popover-header-color: var(--dm-heading);
  --t4-popover-border-color: var(--dm-border);
  --t4-list-group-bg: var(--dm-surface);
  --t4-list-group-color: var(--dm-text);
  --t4-list-group-border-color: var(--dm-border);
  --t4-list-group-action-color: var(--dm-text);
  --t4-list-group-action-hover-bg: var(--dm-surface-2);
  --t4-list-group-action-hover-color: var(--dm-heading);

  color-scheme: dark;
}

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

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 { color: var(--dm-heading); }

/* ------------------------------------------------------------------ *
 * 3) Theme toggle button — the ONE block visible in both modes.
 *    JA Sport header is a solid (white in light) bar → transparent button,
 *    icon follows header text colour. Icon swaps on the dark hook.
 * ------------------------------------------------------------------ */
.t4-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0 2px;
  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 { background: rgba(127,140,160,.14); }
.t4-theme-toggle:focus-visible { outline: 2px solid var(--ja-accent); outline-offset: 2px; }
.t4-theme-toggle svg { width: 20px; height: 20px; display: block; }
/* light (default): show moon, hide sun. Selectors are svg-qualified so they
   outrank the generic `.t4-theme-toggle svg` rule above (0,1,1). */
.t4-theme-toggle svg.t4-theme-toggle__sun { display: none; }
/* dark: show sun, hide moon */
html[data-theme="dark"] .t4-theme-toggle__moon { display: none; }
html[data-theme="dark"] .t4-theme-toggle__sun { display: block; }
/* on the dark page the header itself is dark → icon light */
html[data-theme="dark"] .t4-theme-toggle { color: var(--dm-text); }
html[data-theme="dark"] .t4-theme-toggle:hover { color: var(--dm-heading); background: rgba(255,255,255,.08); }
/* Balance the header action trio (toggle · search · cart). The search+cart group
   (span.d-none.d-lg-flex) carries a 1.5rem (24px) left margin off the toggle, but
   only ~16px internally to the cart — so the toggle→search gap looked wider than
   search→cart. Tighten the group's left margin so the three icons sit evenly. */
.t4-header-r > span.d-none.d-lg-flex { margin-left: 4px; }

/* ------------------------------------------------------------------ *
 * 4) CHROME — header bar, logo, search, cart
 * ------------------------------------------------------------------ */
/* Header bar was white (#t4-mainnav,#t4-header{background:#fff}) → dark surface */
html[data-theme="dark"] #t4-header,
html[data-theme="dark"] #t4-mainnav { background: var(--dm-surface); }
html[data-theme="dark"] .not-at-top #t4-header.t4-sticky { background-color: var(--dm-surface); box-shadow: 0 3px 5px rgba(0,0,0,.4); }
html[data-theme="dark"] #t4-header { border-bottom: 1px solid var(--dm-border); }

/* Logo: PNG has a navy wordmark → swap to the light variant in dark only */
html[data-theme="dark"] .logo-image .logo-img,
html[data-theme="dark"] .t4-logo .logo-img,
html[data-theme="dark"] .logo-img { content: url("../images/joomlart/logo/logo-1-dark.png"); }

/* Header search: dark magnifier PNG → light SVG; fix focus fill/text/border */
html[data-theme="dark"] .t4-header-r .search .form-control,
html[data-theme="dark"] .t4-header-r .form-search .form-control,
html[data-theme="dark"] .t4-header-r .search .search-query {
  /* Default (unfocused) state must blend into the header like it does in light —
     transparent surface + no border, so only the magnifier icon shows. The generic
     `input:not([type=submit])…` dark rule has specificity (0,5,2) (four :not() attr
     selectors). The site ships TWO header variants — the T4 mega header (#t4-header)
     and header.header-default (inner pages) — so we can't lean on an id; use
     !important with the variant-agnostic .t4-header-r so BOTH headers are covered. */
  background-color: transparent !important;
  border-color: transparent !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c3cad6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  color: var(--dm-text);
}
/* On focus the field expands to 300px — it MUST be opaque, or the menu items behind
   it (e.g. "NEWS") bleed through. Higher specificity than the resting rule (.form-control:focus
   adds a class) AND !important, so it beats both the resting transparent and the generic rule. */
html[data-theme="dark"] .t4-header-r .search .form-control:focus,
html[data-theme="dark"] .t4-header-r .form-search .form-control:focus,
html[data-theme="dark"] .t4-header-r .search .search-query:focus {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-field-border) !important;
  color: var(--dm-text);
}
/* Cart / header-r module icons follow the light text colour */
html[data-theme="dark"] .t4-header-r,
html[data-theme="dark"] .t4-header-r a,
html[data-theme="dark"] .t4-header-r .search a { color: var(--dm-text); }

/* Dropdowns (megamenu panels, cart, any BS dropdown) — remap the t4-dropdown tokens
   + the panel bg/border so every dropdown goes dark at once. */
html[data-theme="dark"] {
  --t4-dropdown-bg: var(--dm-surface);
  --t4-dropdown-color: var(--dm-text);
  --t4-dropdown-border-color: var(--dm-border);
  --t4-dropdown-link-color: var(--dm-text);
  --t4-dropdown-link-hover-color: var(--dm-heading);
  --t4-dropdown-link-hover-bg: var(--dm-surface-2);
  --t4-dropdown-divider-bg: var(--dm-border);
  --t4-dropdown-header-color: var(--dm-text-muted);
}
html[data-theme="dark"] .t4-megamenu div.dropdown-menu,
html[data-theme="dark"] .head-cart .dropdown-menu {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  box-shadow: 0 5px 12px rgba(0,0,0,.45);
}
html[data-theme="dark"] .mega-col-title span,
html[data-theme="dark"] .t4-megamenu .mega-col-title span { color: var(--dm-heading); }
html[data-theme="dark"] .t4-megamenu .mega-col-title { border-bottom-color: var(--dm-border); }

/* ------------------------------------------------------------------ *
 * 5) HOME — surface cards
 * ------------------------------------------------------------------ */
/* Player cards were opaque white boxes → dark surface + border */
html[data-theme="dark"] .mod-player-1 .item-inner,
html[data-theme="dark"] .mod-player-2 .item-inner {
  background: var(--dm-surface);
  border: 1px solid var(--dm-border);
}
/* Player card inner short-info block already sets light text over its own bg;
   keep its meta legible on the surface */
html[data-theme="dark"] .mod-player-2 .item-inner .short-info-player { --body-text-color: var(--dm-text); }

/* Match-card internal dividers + carousel nav borders were light (#f2f2f2 / white)
   → route through the divider token so they don't read as bright hairlines on dark. */
html[data-theme="dark"] .livematches-item .info-item,
html[data-theme="dark"] .livematches-item .info-bottom,
html[data-theme="dark"] .livematches-item img,
html[data-theme="dark"] .livematches-item .item-image { border-color: var(--dm-border); }
html[data-theme="dark"] .owl-nav button,
html[data-theme="dark"] .owl-prev,
html[data-theme="dark"] .owl-next { border-color: var(--dm-field-border); color: var(--dm-text); }
/* Player-profiles carousel arrows: .mod-player-2 .owl-carousel .owl-nav>button is
   (0,3,1) white 2px on the dark page above the red band → subtle divider tone. */
html[data-theme="dark"] .mod-player-2 .owl-carousel .owl-nav > button { border-color: var(--dm-field-border); color: var(--dm-text); }

/* Section titles (navy #1B265C in light) → light heading on the dark page */
html[data-theme="dark"] { --section-title-color: var(--dm-heading); }

/* Blog/category list: item cards (.items-row .item{background:#fff}) → surface;
   count badge + list container. */
html[data-theme="dark"] .items-row .item { background-color: var(--dm-surface); border-color: var(--dm-border); }
html[data-theme="dark"] .com-content-category-blog__items,
html[data-theme="dark"] .blog-items { background: transparent; }
html[data-theme="dark"] .counter { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); }

/* Card bodies that are solid white boxes in light → dark surface.
   Over-photo article cards (.item-inner.item-1..5 and the overflow:hidden grid
   variant) have a photo covering this bg, so a surface here is harmless. */
html[data-theme="dark"] .item-inner { background: var(--dm-surface); }
/* …but ACM "features" blocks (Team "Technical staff" = .features-item .item-inner;
   Tickets "Sport Member Benefits" = .acm-features .feature-list .item-inner) are
   transparent in light — the blanket rule above wrongly gives them a surface box
   that reads as a double background. Keep them transparent to match the page. */
html[data-theme="dark"] .features-item .item-inner,
html[data-theme="dark"] .acm-features .item-inner,
html[data-theme="dark"] .feature-list .item-inner { background: transparent; }
/* Match-result cards: .acm-livematches.style-N .livematches-item{background:#fff}
   is (0,3,0) — beat it; keep the red accent border-left/top (brand). */
html[data-theme="dark"] .acm-livematches .livematches-item { background: var(--dm-surface); }
html[data-theme="dark"] .acm-livematches .livematches-countdown { background: var(--dm-surface-2); }
html[data-theme="dark"] .item.width25 .item-inner,
html[data-theme="dark"] .mod-virtuemart-product .item-inner { border: 1px solid var(--dm-border); }

/* ------------------------------------------------------------------ *
 * 6) FORMS — inputs, selects, textareas (fields get a lighter border)
 * ------------------------------------------------------------------ */
html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .choices__inner {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-field-border);
  color: var(--dm-text);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--dm-text-muted); }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] .form-control:focus {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-field-border);
  color: var(--dm-text);
}

/* ------------------------------------------------------------------ *
 * 7) OFF-CANVAS (mobile drawer)
 * ------------------------------------------------------------------ */
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); border-bottom: 1px solid var(--dm-border); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close { background-color: var(--dm-surface-2); color: var(--dm-text); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close:hover,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close:focus { background-color: rgba(255,255,255,.08); }
/* submenu drill arrows: light circle → transparent, chevron light */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle { background-color: transparent; color: var(--dm-text-muted); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle::after { color: var(--dm-text-muted); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle:hover { background-color: rgba(255,255,255,.06); color: var(--dm-heading); }
/* off-canvas nav dividers */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-item { border-bottom-color: var(--dm-border); }

/* ------------------------------------------------------------------ *
 * 8) SIDEBAR modules + module titles + content components
 * ------------------------------------------------------------------ */
/* Sidebar module boxes were white (.sidebar-* .t4-module{background:#fff}) */
html[data-theme="dark"] .sidebar-l .t4-module,
html[data-theme="dark"] .sidebar-r .t4-module {
  background-color: var(--dm-surface);
  border: 1px solid var(--dm-border);
}
/* Module titles: navy #1b265c / near-black #212529 span → light heading + dark divider.
   (Colored .bg-* modules keep their white title — higher specificity, untouched.) */
html[data-theme="dark"] .module-title { color: var(--dm-heading); border-bottom-color: var(--dm-border); }
html[data-theme="dark"] .module-title span { color: var(--dm-heading); }

/* Article prev/next pager (light #e9ecef box, dark text) → dark surface + light text */
html[data-theme="dark"] .pagenav li a,
html[data-theme="dark"] .com-content-article nav.pagenavigation ul li.page-item a,
html[data-theme="dark"] .pagenavigation .pagination a.btn {
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
}
html[data-theme="dark"] .pagenav li a:hover,
html[data-theme="dark"] .com-content-article nav.pagenavigation ul li.page-item a:hover,
html[data-theme="dark"] .pagenavigation .pagination a.btn:hover { background-color: var(--ja-accent); color: #fff; }

/* Author block (Reporter box) was #fff / #f8f9fa → dark surface */
html[data-theme="dark"] .author-block,
html[data-theme="dark"] .author-block.author-block-post-detail,
html[data-theme="dark"] .author-block.author-block-post-detail.pos-after-content,
html[data-theme="dark"] .author-block.author-block-posts {
  background-color: var(--dm-surface);
  border: 1px solid var(--dm-border);
}
html[data-theme="dark"] .author-block.author-block-posts .author-other-info > div:not(.author-name) { border-bottom-color: var(--dm-border); }

/* Bootstrap light-utility islands (.bg-light/.bg-white are literal light demos on the
   typography page + real "light card" utilities) stay LIGHT with DARK text — same as
   light mode (by-design). Reset the remapped text tokens inside them so headings/body
   don't go light-on-light. (Do NOT blanket-override .text-dark — it belongs on these
   light islands; the real dark-on-dark links are lifted by the specific rules below.) */
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white {
  --heading-color: #1A1A1A;
  --body-text-color: #4f4f4f;
  --meta-color: #6c757d;
  color: #212529;
}
html[data-theme="dark"] .bg-light .card-title,
html[data-theme="dark"] .bg-white .card-title,
html[data-theme="dark"] .bg-light h1, html[data-theme="dark"] .bg-light h2,
html[data-theme="dark"] .bg-light h3, html[data-theme="dark"] .bg-light h4,
html[data-theme="dark"] .bg-light h5, html[data-theme="dark"] .bg-light h6 { color: #1A1A1A; }

/* Outline-primary buttons use navy --color-primary for text+border → invisible on
   dark. Lift to the dark-page link blue; keep light-mode's diamond-fill ::before
   animation but recolour the diamond to --dm-link so it's visible on dark. The
   button's own bg is transparent!important on hover (base rule), so the diamond
   does the fill; dark text (--dm-bg) sits readable on the bright diamond. */
html[data-theme="dark"] .btn-outline-primary {
  color: var(--dm-link);
  border-color: var(--dm-link);
}
html[data-theme="dark"] .btn-outline-primary::before {
  background: var(--dm-link);
}
html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:focus,
html[data-theme="dark"] .btn-outline-primary:active {
  border-color: var(--dm-link);
  color: var(--dm-bg);
}

/* Near-black (#212529) list/menu links inside modules & content → light text */
html[data-theme="dark"] .categories-module a,
html[data-theme="dark"] .article-index ul li a,
html[data-theme="dark"] .tags-tag.tag-category .list-group .list-group-item a,
html[data-theme="dark"] .nav li ul > li.active > a,
html[data-theme="dark"] .module_menu .nav li ul > li.active > a { color: var(--dm-text); }
html[data-theme="dark"] .categories-module a:hover,
html[data-theme="dark"] .article-index ul li a:hover,
html[data-theme="dark"] .tags-tag.tag-category .list-group .list-group-item a:hover { color: var(--ja-accent); }
html[data-theme="dark"] .moduletable > h3,
html[data-theme="dark"] .moduletable > .h3 { color: var(--dm-heading); }

/* ------------------------------------------------------------------ *
 * 9) VIRTUEMART shop / product / cart
 * ------------------------------------------------------------------ */
html[data-theme="dark"] .com_virtuemart,
html[data-theme="dark"] .productdetails-view,
html[data-theme="dark"] .category-view { color: var(--dm-text); }

/* product tiles + category caption (white spacer) → surface */
html[data-theme="dark"] .category-view .category-view .category .spacer,
html[data-theme="dark"] .browse-view .product .spacer { background: var(--dm-surface); }
html[data-theme="dark"] .browse-view .product,
html[data-theme="dark"] .category-view .category .spacer { border-color: var(--dm-border); }

/* Add-to-cart box (Size / Quantity / button) — white slab → surface */
html[data-theme="dark"] .productdetails-view .vm-product-info .addtocart-area { background: var(--dm-surface); }
html[data-theme="dark"] .addtocart-area .quantity-input,
html[data-theme="dark"] .addtocart-area .quantity-box input,
html[data-theme="dark"] .com_virtuemart table.cart-summary tr td.vm-cart-item-quantity .quantity-input {
  background: var(--dm-surface-2); border-color: var(--dm-field-border); color: var(--dm-text);
}

/* Cart component: white billing/summary slabs + light header cells */
html[data-theme="dark"] .com_virtuemart .billto-shipto,
html[data-theme="dark"] .com_virtuemart table.cart-summary { background: var(--dm-surface); }
html[data-theme="dark"] .com_virtuemart table.cart-summary tr th {
  background: var(--dm-surface-2); background-image: none;
  color: var(--dm-heading); border-color: var(--dm-border);
}
html[data-theme="dark"] .com_virtuemart table.cart-summary td { border-color: var(--dm-border); color: var(--dm-text); }
html[data-theme="dark"] .com_virtuemart table.cart-summary td > h3:first-child,
html[data-theme="dark"] .com_virtuemart table.cart-summary td > .h3:first-child { background: var(--dm-surface-2); color: var(--dm-heading); }
/* Article accordion (pane-sliders) panel headers use the same #f8f9fa bar */
html[data-theme="dark"] .com-content-article__body .pane-sliders .panel h3.title,
html[data-theme="dark"] .com-content-article__body .pane-sliders .panel .title.h3 { background-color: var(--dm-surface-2); color: var(--dm-heading); }

/* VM ordering-controls box (.activeOrder) → dark */
html[data-theme="dark"] .com_virtuemart .activeOrder,
html[data-theme="dark"] .activeOrder { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); }

/* Per-page + ordering selects (native inputbox / #limit) — white → dark field */
html[data-theme="dark"] .category-view .browse-view .orderby-displaynumber .display-number #limit,
html[data-theme="dark"] .tag-category .filters .btn-group select.inputbox,
html[data-theme="dark"] select.inputbox {
  background: var(--dm-surface-2); border-color: var(--dm-field-border); color: var(--dm-text);
}

/* VM section headings using navy --color-primary → lift to heading */
html[data-theme="dark"] .product-related-products h2,
html[data-theme="dark"] .related-products-view .title,
html[data-theme="dark"] .productdetails-view h2,
html[data-theme="dark"] .com_virtuemart h2 { color: var(--dm-heading); }
/* "MAYBE YOU LIKE" related heading has a deep (0,4,1) navy chain — match/beat it */
html[data-theme="dark"] .productdetails-view .product-related-products .product-fields-title-wrapper .product-fields-title h2,
html[data-theme="dark"] .productdetails-view .product-related-products .product-fields-title-wrapper .product-fields-title .h2 { color: var(--dm-heading); }
/* Product prev/next navigation links (#212529) → light */
html[data-theme="dark"] .previous-page,
html[data-theme="dark"] .next-page { color: var(--dm-text); }
html[data-theme="dark"] .previous-page:hover,
html[data-theme="dark"] .next-page:hover { color: var(--ja-accent); }

/* ------------------------------------------------------------------ *
 * 10) BOOTSTRAP components + video cards + pagination
 * ------------------------------------------------------------------ */
/* Plain .card → dark surface. Skip Bootstrap colored/utility cards (.bg-*), which
   keep their own bg + text (by-design, same as light). */
html[data-theme="dark"] .card:not([class*="bg-"]) { background-color: var(--dm-surface); color: var(--dm-text); border-color: var(--dm-border); }

/* Video list card bodies (white) → surface */
html[data-theme="dark"] .video-list .article-inner { background: var(--dm-surface); }

/* Schedule/fixtures match cards may render outside .acm-livematches → catch generally */
html[data-theme="dark"] .livematches-item { background: var(--dm-surface); }
html[data-theme="dark"] .livematches-countdown { background: var(--dm-surface-2); }

/* Pagination links: navy/BS-blue on dark → lifted; template may hardcode the color */
html[data-theme="dark"] .pagination .page-link,
html[data-theme="dark"] .page-link { color: var(--dm-link); background-color: var(--dm-surface); border-color: var(--dm-border); }
html[data-theme="dark"] .pagination .page-item.active .page-link { background-color: var(--ja-accent); border-color: var(--ja-accent); color: #fff; }
html[data-theme="dark"] .pagination .page-link:hover { background-color: var(--dm-surface-2); color: var(--dm-heading); }

/* btn-light / btn-outline-light: --color-light is remapped dark → fix their text.
   (Dual-use --color-light: light surfaces go dark, but these buttons need legible text.) */
html[data-theme="dark"] .btn-light {
  --t4-btn-color: var(--dm-heading); --t4-btn-hover-color: var(--dm-heading);
  background-color: var(--dm-surface-2); border-color: var(--dm-field-border); color: var(--dm-heading);
}
html[data-theme="dark"] .btn-outline-light {
  color: var(--dm-text); border-color: var(--dm-field-border);
}
html[data-theme="dark"] .btn-outline-light:hover,
html[data-theme="dark"] .btn-outline-light:focus { background-color: var(--dm-surface-2); color: var(--dm-heading); border-color: var(--dm-field-border); }

/* ------------------------------------------------------------------ *
 * 11) Misc: read-more, list-group, search-empty, validation UI
 * ------------------------------------------------------------------ */
/* Blog "Read more" btn uses navy --color-primary (may paint via -webkit-text-fill) → lift */
html[data-theme="dark"] .btn-readmore,
html[data-theme="dark"] .item-readmore a {
  color: var(--dm-link) !important;
  -webkit-text-fill-color: var(--dm-link) !important;
}
html[data-theme="dark"] .btn-readmore:hover,
html[data-theme="dark"] .item-readmore a:hover { color: var(--ja-accent) !important; -webkit-text-fill-color: var(--ja-accent) !important; }

/* Tag page list-group rows (white) → surface */
html[data-theme="dark"] .list-group-item { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); }

/* Smart-search "No results" box (#search-result-empty #f8f9fa) → dark */
html[data-theme="dark"] #search-result-empty { background-color: var(--dm-surface); color: var(--dm-text); }
html[data-theme="dark"] #search-result-empty p { color: var(--dm-text-muted); }

/* Form validation: white label pill + white feedback popover → dark */
html[data-theme="dark"] label.invalid { background-color: var(--dm-surface-2); color: #ff6b6b; }
html[data-theme="dark"] .form-control-feedback,
html[data-theme="dark"] .popover { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-border); }

/* Offline page (offline.php → jpages.css): left panel uses var(--background-color)
   (white) → dark; title/message follow the dark palette. */
html[data-theme="dark"] .offline,
html[data-theme="dark"] .offline .content-left { background-color: var(--dm-bg); }
html[data-theme="dark"] .offline .content-left h2 { color: var(--dm-heading); }
html[data-theme="dark"] .offline .content-left .offline-message { color: var(--dm-text); }

/* Contact: navy section title / detail values / accordion open-state on white */
html[data-theme="dark"] .t4-map .t4-mod-wrap .section-title-wrap .section-title { color: var(--dm-heading); }
html[data-theme="dark"] .contact dd { color: var(--dm-text); }
html[data-theme="dark"] .contact #slide-contact .accordion-button:not(.collapsed) { color: var(--dm-heading); background-color: var(--dm-surface); }

/* ------------------------------------------------------------------ *
 * 12) Fresh-review fixes (2026-07 full re-audit)
 * ------------------------------------------------------------------ */

/* [B1] Article-title & category-link HOVER states fall back to navy --color-primary
   (#1b265c) → invisible on dark. Light lifts them to accent-on-hover; mirror that. */
html[data-theme="dark"] .blog-items .page-header h2 a:hover,
html[data-theme="dark"] .blog.author-posts .page-header h2 a:hover,
html[data-theme="dark"] .latestnews li .item-body .item-title a:hover,
html[data-theme="dark"] .category a:hover,
html[data-theme="dark"] .category-name a:hover { color: var(--ja-accent); }
html[data-theme="dark"] .category a:hover:before,
html[data-theme="dark"] .category-name a:hover:before { background: var(--ja-accent); }
/* These VM/shop title & category-title hovers resolve to navy --color-primary via
   very high-specificity compiled selectors (0,5,1)–(0,5,2) that outrank the plain
   `.category a:hover` above — so navy-on-dark leaks through. Force the accent with
   !important (same tactic as the read-more hover fix). Covers product-card titles,
   category-view titles, category list-titles, and tag-category list-titles. */
html[data-theme="dark"] .title-product a:hover,
html[data-theme="dark"] .pd-detail-item .item-inner .box-inner .title-product a:hover,
html[data-theme="dark"] .product-related-products .title-product a:hover,
html[data-theme="dark"] .name-category a:hover,
html[data-theme="dark"] .pd-detail-item .item-inner .name-category a:hover,
html[data-theme="dark"] .category-view .category .spacer a:hover,
html[data-theme="dark"] .category .list-title a:hover,
html[data-theme="dark"] .tag-category .category.table .list-title a:hover {
  color: var(--ja-accent) !important;
}

/* [B2] Videos list divider hardcoded #D9D9D9 → route through the divider token. */
html[data-theme="dark"] .ja-videos-list-wrap { border-bottom-color: var(--dm-border); }

/* [C1] Full-width "bg-white" FEATURE bands (e.g. Tickets "Sport Member Benefits",
   .acm-features style-5) read as a jarring white slab mid-dark-page, and the §8
   light-island text colors collide with the §5 blanket .item-inner darken → both the
   title span and the .desc go invisible. Darken the WHOLE band (mirrors the rest of the
   dark page). Scoped with :has(.acm-features) so the typography/404 .bg-white *demo*
   islands stay light (they carry no .acm-features). */
html[data-theme="dark"] .bg-white:has(.acm-features) {
  background-color: var(--dm-bg) !important;
  --heading-color: var(--dm-heading);
  --body-text-color: var(--dm-text);
  --meta-color: var(--dm-text-muted);
  color: var(--dm-text);
}
html[data-theme="dark"] .bg-white:has(.acm-features) .section-title,
html[data-theme="dark"] .bg-white:has(.acm-features) .section-title span,
html[data-theme="dark"] .bg-white:has(.acm-features) h1,
html[data-theme="dark"] .bg-white:has(.acm-features) h2,
html[data-theme="dark"] .bg-white:has(.acm-features) h3,
html[data-theme="dark"] .bg-white:has(.acm-features) h4,
html[data-theme="dark"] .bg-white:has(.acm-features) h5,
html[data-theme="dark"] .bg-white:has(.acm-features) h6 { color: var(--dm-heading); }
html[data-theme="dark"] .bg-white:has(.acm-features) .desc,
html[data-theme="dark"] .bg-white:has(.acm-features) p { color: var(--dm-text); }

/* [C2] .btn-outline-dark uses BS #212529 text+border → invisible on the dark page.
   Mirror the outline-light treatment. */
html[data-theme="dark"] .btn-outline-dark { color: var(--dm-text); border-color: var(--dm-field-border); }
html[data-theme="dark"] .btn-outline-dark:hover,
html[data-theme="dark"] .btn-outline-dark:focus,
html[data-theme="dark"] .btn-outline-dark:active { background-color: var(--dm-surface-2); color: var(--dm-heading); border-color: var(--dm-field-border); }

/* [C3][C4] Hardcoded #d9d9d9 hairline dividers (team stat band + pricing plan lists) →
   subtle on white, bright on dark. Route through the divider token. */
html[data-theme="dark"] .acm-features.style-4 .row.g-0.v-gutters,
html[data-theme="dark"] .acm-pricing.style-1 .pricing-item .pricing-plan-list,
html[data-theme="dark"] .pricing-plan-list { border-color: var(--dm-border); }

/* [A1] Mobile off-canvas DRILLDOWN submenu: the expanded .dropdown-menu carries an
   element-local --t4-dropdown-bg:#fff that defeats the root remap, and §7 never themed
   the expanded panel or the "‹ BACK" bar → white panel + near-white text (invisible). */
html[data-theme="dark"] .t4-offcanvas .dropdown-menu {
  background: var(--dm-surface);
  --t4-dropdown-bg: var(--dm-surface);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .t4-offcanvas .dropdown-menu .dropdown-item,
html[data-theme="dark"] .t4-offcanvas .dropdown-menu a { color: var(--dm-text); }
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 a {
  background: var(--dm-band);
  color: var(--dm-heading);
  border-color: var(--dm-border);
}

/* [A2] Partners strip: monochrome demo sponsor logos are dark PNGs → invisible on the
   dark page. In light they sit on the white page, so a light chip in dark MIRRORS that. */
html[data-theme="dark"] .client-img,
html[data-theme="dark"] .clients-item .client-img {
  background: #fff;
  border-radius: 6px;
  padding: 10px 14px;
}

/* [A3] AcyMailing newsletter validation error pill is white (hidden until a bad submit
   flashes it white-on-dark). */
html[data-theme="dark"] .acym__field__error__block { background: var(--dm-surface-2); color: #ff6b6b; }

/* [D1] VirtueMart browse-view page title (e.g. "Accessories") uses raw --color-primary
   (kept navy) → illegible on dark. The other VM h1 titles use --heading-color and lift
   fine; only this browse title regresses. (0,4,1 beats the 0,3,1 source.) */
html[data-theme="dark"] .category-view .browse-view .orderby-displaynumber + h1 { color: var(--dm-heading); }

/* [D3] VM cart "already registered" login inputs keep #212529 text on the dark field
   (dark-on-dark; typed credentials invisible). ID-scoped (2,1,2) source → match it. */
html[data-theme="dark"] .com_virtuemart #com-form-login #com-form-login-username input,
html[data-theme="dark"] .com_virtuemart #com-form-login #com-form-login-password input { color: var(--dm-text); }

/* ------------------------------------------------------------------ *
 * 13) Round-2 fresh-audit fixes (6 parallel opus auditors)
 * ------------------------------------------------------------------ */

/* [F1] Pricing "check" bullets (.list-plan>li:before, FA \f058) paint with
   --color-primary (navy #1b265c) → ~1.1:1 near-invisible on the dark pricing card
   (#1a2130). Light shows navy-on-white ~12:1 → genuine mirror-break, not by-design.
   Lift to the brand accent (red pops on dark). Source (0,1,2); this (0,2,3) wins. */
html[data-theme="dark"] .list-plan > li:before { color: var(--ja-accent); }

/* [F2] ACM timeline vertical SPINE hardcoded #D9D9D9 (.timeline-list:before) — a subtle
   1px connector on the white page becomes a bright full-height seam down the dark page.
   Route through the divider token (mirrors light's subtlety). Source (0,2,2); this (0,3,3)
   wins. The .item-body:before node dot uses --color-secondary (red) and stays visible. */
html[data-theme="dark"] .acm-timeline.style-1 .timeline-list:before { background: var(--dm-border); }

/* [F3] Header cart dropdown "Cart empty" / VM cart-module text inherits near-black
   #212529 → dark-on-dark on the themed #1a2130 panel when the empty-cart dropdown is
   opened. Lift the plain VM cart text (the priced rows already route via --heading-color). */
html[data-theme="dark"] .head-cart .dropdown-menu .vmCartModule,
html[data-theme="dark"] .head-cart .dropdown-menu .total_products { color: var(--dm-text); }

/* [F4] Mobile off-canvas DRILLDOWN expanded-submenu item dividers hardcoded #D9D9D9 at
   (0,6,0) BEAT §7's .nav-item token remap (0,4,0) → bright hairlines on the dark panel.
   Match the full chain (0,7,0). (§7 handles the collapsed top-level list; this is the
   expanded child list only.) */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .nav-item .dropdown-menu .nav-item { border-bottom-color: var(--dm-border); }

/* [F6] Article <pre> code blocks: text flips to --dm-text via inheritance but the #f8f9fa
   surface never remaps → light-gray on near-white (illegible). No shipped demo article
   ships a <pre>, but any author-added code block breaks the moment it's pasted. Give it a
   dark editor surface + light text (dark-scoped only — light mode untouched). */
html[data-theme="dark"] .item-page pre,
html[data-theme="dark"] .com-content-article__body pre {
  background: var(--dm-surface-2);
  color: var(--dm-text);
  border-color: var(--dm-border);
}

/* [F7] Match-card image bottom-border: .acm-livematches …  .livematches-item .img sets
   an ELEMENT-LOCAL --border-color:#f2f2f2 then draws border-bottom with it — the local
   var defeats the root --border-color remap, so a subtle-on-white hairline becomes a
   bright #f2f2f2 line on the dark card. (§5 targeted the `img` tag, not this `.img`
   wrapper.) Re-point the local var. (Scanner-caught; home + schedule match cards.) */
html[data-theme="dark"] .acm-livematches .livematches-item .img { --border-color: var(--dm-border); }

/* [F8] .mod-player-2 sets an ELEMENT-LOCAL --border-color:#F2F2F2 at the module root, so
   every descendant border drawn with var(--border-color) (the .info-bottom>div stat
   dividers, top+left) inherits #f2f2f2 → bright hairlines on the dark player card. The
   root remap can't reach a closer local definition. Re-point the module's local var. */
html[data-theme="dark"] .mod-player-2 { --border-color: var(--dm-border); }

/* ------------------------------------------------------------------ *
 * 14) Round-3 fresh-audit fixes (5 parallel sonnet auditors, computed-value probes)
 * ------------------------------------------------------------------ */

/* [G1] Header CART icon (#head-cart-dropdown) paints a dark raster PNG bag via
   background-image (bgSize:100% 100%, 19x20 button) → near-invisible on the dark header
   (only the red count badge shows). Mirror the search-icon fix: swap the dark PNG for a
   light inline-SVG bag using the header text tone. The red .total-product badge is a
   separately absolute-positioned child → untouched. ID source (1,0,0); this beats it. */
html[data-theme="dark"] #head-cart-dropdown {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3cad6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% 100%;
}

/* [G2] Off-canvas drilldown BACK row: §12[A1] lifted the .sub-menu-back label + bg, but the
   "‹" icon (.fas.fa-chevron-left) keeps its navy #1b265c (luma 40) on the dark #161c28 bar
   → ~invisible. Light shows navy-on-#f8f9fa (high contrast) → mirror-break. The adjacent
   forward drill chevron already themes to the muted token; match it. */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back i { color: var(--dm-text); }

/* [G3] Form-field :focus loses its affordance in dark. Light changes the field border to
   brand navy on focus (clear focus ring); dark left it at the resting --dm-field-border
   with no shadow/outline → zero visible focus change. Mirror light: lift the focus border
   + add a subtle ring. (Appended after §6 so it wins on source order.) */
html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .choices__inner:focus {
  border-color: var(--dm-link);
  box-shadow: 0 0 0 .2rem rgba(111,139,255,.25);
}

/* [G4] <mark>/.mark inline highlight keeps its cream #fcf8e3 bg (luma 249) on the dark page
   → a bright leak island. Every sibling semantic surface (.alert-warning) was dimmed; this
   was missed. Reuse the warning-dark tone. */
html[data-theme="dark"] mark,
html[data-theme="dark"] .mark { background-color: #3a2e05; color: #ffda6a; }

/* [G5] Pricing card wrapper (.acm-pricing.style-1 .pricing-item) hardcodes bg:#fff with no
   dark override — currently only masked edge-to-edge by the §5 blanket .item-inner darken.
   Make the surface explicit so any sub-pixel/scope drift can't expose a white card. */
html[data-theme="dark"] .acm-pricing.style-1 .pricing-item { background: var(--dm-surface); }

/* [G6] Google Maps error placeholder (.gm-err-container) ships an inline light bg (#e5e3df)
   → solid light box on the dark Contact page. Scoped to Google's OWN error class so a
   working map (which never renders .gm-err-container) is unaffected. Dev/no-API-key safety. */
html[data-theme="dark"] .gm-err-container { background-color: var(--dm-surface) !important; }
html[data-theme="dark"] .gm-err-title,
html[data-theme="dark"] .gm-err-message { color: var(--dm-text) !important; }

/* [G7] VM cart line-item action buttons (.vm2-add_quantity_cart / .vm2-remove_from_cart)
   use only a ::before font-icon (icon color already remaps), but native button chrome was
   never reset → the browser paints a light OS button face UNDER them = glaring white box on
   the dark cart row (invisible-by-coincidence on light). Reset appearance (dark-scoped, so
   light's look is untouched). */
html[data-theme="dark"] .vmicon.vm2-add_quantity_cart,
html[data-theme="dark"] .vmicon.vm2-remove_from_cart {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
}

/* [G8] Checkboxes & radios. In LIGHT they are native controls (appearance:auto). The
   previous dark-only appearance:none custom pattern broke: the generic `input{width:100%}`
   + form-control padding inflated each control to a 34×20 box, and border-radius:50% turned
   radios into ellipses. Restore NATIVE rendering everywhere and theme them the reliable way
   — color-scheme:dark (dark control chrome, no FOUC) + accent-color (checked tint). This
   fixes cart/checkout (Terms, shipment, "Same as billing") AND com_users (Remember me),
   and matches the light-mode native look. Reset the padding/size/border the custom pattern
   (and generic input rules) left behind. */
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--dm-link);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ *
 * 15) com_users password-reset / remind cards
 * ------------------------------------------------------------------ */
/* [T14] Reset & Remind forms sit in a card that hardcodes a WHITE surface
   (div.com-users-reset,div.com-users-remind{background:#fff}, (0,1,1)) → a
   glaring white slab mid-dark-page. Darken to the card surface; intro copy +
   labels ride the dark text token (readable once the card is dark). Login
   (custom .login-wrap layout) + Registration carry no such card. (0,2,1) beats
   the (0,1,1) source. */
html[data-theme="dark"] .com-users-reset,
html[data-theme="dark"] .com-users-remind {
  background-color: var(--dm-surface);
  color: var(--dm-text);
}
html[data-theme="dark"] .com-users-reset p,
html[data-theme="dark"] .com-users-remind p,
html[data-theme="dark"] .com-users-reset label,
html[data-theme="dark"] .com-users-remind label { color: var(--dm-text); }

/* ------------------------------------------------------------------ *
 * 16) VirtueMart shop "Sort by" / "Manufacturer" orderby dropdown
 * ------------------------------------------------------------------ */
/* The OPEN dropdown panel was white (.orderlistcontainer div.orderlist{background:#FFF},
   0,2,1) with low-contrast #6f8bff links → dark surface + readable links + hover. */
html[data-theme="dark"] .orderlistcontainer div.orderlist {
  background: var(--dm-surface-2);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .orderlistcontainer div.orderlist div a { color: var(--dm-text); }
html[data-theme="dark"] .orderlistcontainer div.orderlist div:hover { background: var(--dm-surface); }
html[data-theme="dark"] .orderlistcontainer div.orderlist div:hover a { color: var(--ja-accent); }

/* ------------------------------------------------------------------ *
 * 17) com_content pagination (ul.pagination) — inner .fa chevron icons
 * ------------------------------------------------------------------ */
/* Base rule paints page-links AND their inner icon <span class="fa"> navy
   (var(--color-primary)) → chevron arrows low-contrast on dark. The existing
   .pagination rules don't reach the inner .fa icons. Lift icons + inactive
   numbers to link colour; keep the active (red) box untouched. */
html[data-theme="dark"] ul.pagination .page-item:not(.active) .page-link,
html[data-theme="dark"] ul.pagination .page-item .page-link .fa { color: var(--dm-link); }
html[data-theme="dark"] ul.pagination .page-item .page-link:hover,
html[data-theme="dark"] ul.pagination .page-item .page-link:hover .fa { color: var(--ja-accent); }
html[data-theme="dark"] ul.pagination .page-item.disabled .page-link,
html[data-theme="dark"] ul.pagination .page-item.disabled .page-link .fa { color: var(--dm-text-muted); }

/* ------------------------------------------------------------------ *
 * 18) Blog / news / video article-card TITLES → white at rest
 * ------------------------------------------------------------------ */
/* News & video list cards (.item-article .page-header h2 a) carry NO title colour
   rule — they only inherit the generic `a{color:var(--body-link-color)}` → dm-link
   BLUE at rest → low contrast on dark. Article titles should read as headings, so
   lift them (and the blog-items / latestnews / blog-list title patterns) to the
   heading token. Hover already resolves to the accent via --body-link-hover-color. */
html[data-theme="dark"] .item-article .page-header h2 a,
html[data-theme="dark"] .item-article .page-header .h2 a,
html[data-theme="dark"] .item-content .page-header h2 a,
html[data-theme="dark"] .blog-items .page-header h2 a,
html[data-theme="dark"] .blog-items .page-header .h2 a,
html[data-theme="dark"] .blog.author-posts .page-header h2 a,
html[data-theme="dark"] .latestnews li .item-body .item-title a,
html[data-theme="dark"] .blog-list .item-title a { color: var(--dm-heading); }
/* …and on hover they must go to the accent (red) like the other cards. The default
   rule above (0,3,3) outranks the generic a:hover, so give each title an explicit
   :hover that outranks it. */
html[data-theme="dark"] .item-article .page-header h2 a:hover,
html[data-theme="dark"] .item-article .page-header .h2 a:hover,
html[data-theme="dark"] .item-content .page-header h2 a:hover,
html[data-theme="dark"] .blog-items .page-header h2 a:hover,
html[data-theme="dark"] .blog-items .page-header .h2 a:hover,
html[data-theme="dark"] .blog.author-posts .page-header h2 a:hover,
html[data-theme="dark"] .latestnews li .item-body .item-title a:hover,
html[data-theme="dark"] .blog-list .item-title a:hover { color: var(--ja-accent); }

/* Task 8 hardening — VM "Related Products" / "maybe you like" custom-field heading
   (compiled .product-related-products …product-fields-title h2 → navy --color-primary).
   Existing §9 rules already cover the .productdetails-view chain; this also covers the
   category-view div.pd-detail-item variant and guarantees the win. */
html[data-theme="dark"] .product-related-products .product-fields-title h2,
html[data-theme="dark"] .product-related-products .product-fields-title .h2 { color: var(--dm-heading) !important; }

/* ------------------------------------------------------------------ *
 * 19) Author profile name
 * ------------------------------------------------------------------ */
/* The author card name (.author-name) is painted navy --color-primary (0,4,0) in both
   themes — fine on the light card, invisible on the dark one. Lift to heading. (0,4,1). */
html[data-theme="dark"] .author-block .author-other-info .author-name { color: var(--dm-heading); }