/* =========================================================================
   JA Morgan — Dark Mode  (darkmode.css)
   -------------------------------------------------------------------------
   Separate file, loaded by tpls/blocks/head.php AFTER custom.css so these
   rules win the cascade. custom.css stays the site owner's own file; the dark
   theme lives here so owner edits never collide with (or overwrite) it.

   Light mode is the original, approved design and is NOT modified here.
   Every rule below is scoped under html[data-theme="dark"] so it only
   applies when dark mode is active. The .theme-toggle button styles (and a few
   documented layout fixes) are the only rules that apply in both modes.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Theme toggle button (both modes)
   ------------------------------------------------------------------------- */
.theme-toggle {
	background: transparent;
	border: 0;
	border-radius: 0;
	width: 36px;
	height: 40px;
	padding: 0;
	margin-left: 6px;
	cursor: pointer;
	color: #1b3060;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	transition: color 200ms ease, opacity 200ms ease;
}

/* Neutral hover (a subtle fade) — matches the other header icons, no red.
   Only on :hover, NOT :focus, so the icon doesn't stay dimmed after a click. */
.theme-toggle:hover {
	opacity: 0.6;
}
.theme-toggle:focus,
.theme-toggle:active {
	opacity: 1;
	outline: none;
}

.theme-toggle .theme-toggle-icon {
	font-size: 18px;
	line-height: 1;
	display: inline-block;
	transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Smooth swap between sun/moon when toggling (JS adds .is-switching briefly) */
.theme-toggle.is-switching .theme-toggle-icon {
	animation: themeIconSwap 500ms ease;
}
@keyframes themeIconSwap {
	0%   { transform: rotate(-150deg) scale(0.3); opacity: 0; }
	55%  { opacity: 1; }
	100% { transform: rotate(0) scale(1); opacity: 1; }
}

.headright {
	display: flex;
	align-items: center;
}

/* The toggle icon is navy by default (default header sits on white). On a navy
   nav bar (.head-menu) or over a dark hero (.t3-header.has-hero) make it light.
   Applies in BOTH modes (those surfaces are dark regardless of theme). */
.head-menu .theme-toggle,
.t3-header.has-hero .theme-toggle {
	color: #ffffff;
}
/* When such a header becomes sticky/solid on scroll it turns white again. */
.t3-wrapper.affix .t3-header.has-hero .theme-toggle {
	color: #1b3060;
}

/* Style-2 navy bar: make the toggle a full-height 60px column with the SAME
   left divider as the search / hamburger, so the cadence stays consistent. */
.head-menu .headright .theme-toggle {
	width: 60px;
	height: 60px;
	margin: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* -------------------------------------------------------------------------
   Head search (template's .head-search "magnifier that expands on focus", as
   in the original demo). The template already styles it for a white header; we
   only adapt it to DARK surfaces, where the dark PNG magnifier + white field
   would be invisible/jarring — swap to a light SVG magnifier on a transparent
   field that expands to a translucent input on focus.
   ------------------------------------------------------------------------- */
/* Collapsed = just the magnifier icon on a transparent field (matches the bare
   toggle icon). !important overrides the generic dark form-control rule, whose
   many :not() clauses give it a higher specificity. */
html[data-theme="dark"] .head-search .form-control,
html[data-theme="dark"] .head-search .search-query,
.head-menu .head-search .form-control,
.head-menu .head-search .search-query,
.t3-header.has-hero .head-search .form-control,
.t3-header.has-hero .head-search .search-query {
	background-color: transparent !important;
	border-color: transparent !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23cdd4e0' stroke-width='1.4'%3E%3Ccircle cx='6.8' cy='6.8' r='4.6'/%3E%3Cline x1='10.4' y1='10.4' x2='14' y2='14'/%3E%3C/svg%3E");
	color: #e6e9ef;
}
html[data-theme="dark"] .head-search .form-control::placeholder,
.head-menu .head-search .form-control::placeholder,
.t3-header.has-hero .head-search .form-control::placeholder {
	color: rgba(255, 255, 255, 0.7);
}
/* Expanded (focus): the field MUST be OPAQUE. The search input is
   position:absolute and expands LEFTWARD; on header layouts where the nav sits
   right next to the search (home-4 / style-4 puts the nav inside .headright)
   the expanded field overlaps the menu. A translucent fill let the menu text
   ("Contact Us") bleed through — looking broken in BOTH modes. Restore an opaque
   field: light navy/hero gets the original solid-white box + dark magnifier
   (matches the stock light demo); dark surfaces get a solid dark box + light
   magnifier. !important re-beats the collapsed `transparent !important` above. */
/* Hero headers (home-3/4) in LIGHT mode → solid WHITE box + dark magnifier,
   exactly like the stock light demo (the box overlays the hero photo). */
.t3-header.has-hero .head-search .form-control:focus,
.t3-header.has-hero .head-search .search-query:focus {
	background-color: #ffffff !important;
	border-color: rgba(0, 0, 0, 0.08) !important;
	background-image: url('../images/ico/search.png') !important;
	color: #777777;
}
/* Navy bar (home-2, .head-menu) is a dark surface in BOTH modes → solid DARK
   box + light magnifier (a white box would punch a hole in the navy bar). */
.head-menu .head-search .form-control:focus,
.head-menu .head-search .search-query:focus,
html[data-theme="dark"] .head-search .form-control:focus,
html[data-theme="dark"] .head-search .search-query:focus,
html[data-theme="dark"] .t3-header.has-hero .head-search .form-control:focus,
html[data-theme="dark"] .t3-header.has-hero .head-search .search-query:focus {
	background-color: #161c2b !important;
	border-color: #2a3247 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23cdd4e0' stroke-width='1.4'%3E%3Ccircle cx='6.8' cy='6.8' r='4.6'/%3E%3Cline x1='10.4' y1='10.4' x2='14' y2='14'/%3E%3C/svg%3E") !important;
	color: #e6e9ef;
}

/* Spacing between the header controls on the default / hero headers. The solid
   red hamburger reads heavier than the bare icons, so give it a touch more room
   than the search→toggle gap. (The style-2 navy bar keeps its 60px columns.) */
.headright .navbar-navigation {
	margin-left: 14px;
}
.head-menu .headright .navbar-navigation {
	margin-left: 0;
}

/* The off-canvas (hamburger) button carries a 30px left margin meant to clear
   the responsive nav-toggle — but that toggle is hidden on desktop, leaving a
   big gap before the hamburger. Drop it on desktop and let the wrapper shrink so
   the hamburger sits at the same 6px gap as the other controls.
   (The style-2 navy bar keeps its own seamless 60px column system.) */
@media (min-width: 992px) {
	.headright .navbar-navigation {
		width: auto;
	}
	.headright .navbar-navigation .off-canvas-toggle {
		margin-left: 0;
	}
	.head-menu .headright .navbar-navigation {
		width: 60px;
	}
}

/* Restore the navy-bar search's left divider — the dark/transparent-border rule
   below (needed to de-box the search on white/hero headers) must NOT strip the
   style-2 column divider. */
.head-menu .headright .head-search .form-control,
.head-menu .headright .head-search .search-query {
	border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Hero headers (home-3 / home-4) are bare-icon headers like the default one, but
   style-3 leaves a stray left divider on the hamburger only — drop it so the
   three controls stay a consistent evenly-spaced icon set (no half-dividers).
   The style-2 navy bar keeps its full column-divider system untouched. */
.t3-header.has-hero .headright .navbar-navigation .off-canvas-toggle,
.t3-header.has-hero .headright .navbar-navigation .navbar-toggle {
	border-left: 0;
	/* The hero variant sets the hamburger button its OWN margin-left:10px (on top
	   of the wrapper's gap), so the hamburger sits ~16px from the toggle while the
	   toggle sits only 6px from search — two stacked gaps. Zero the button margin
	   so the single 6px wrapper gap is the only spacing (matches the other icons).
	   This selector is (0,5,0) — it outranks the variant's (0,4,0) rule. */
	margin-left: 0;
}
/* On hero headers the hamburger is a bare icon (NOT the default header's solid
   red box), so all three controls should sit at the SAME gap. The default rule
   gives the navbar wrapper a 14px left margin (heavier-box allowance) while the
   toggle uses 6px — uneven here. Match the wrapper to the toggle's 6px. */
.t3-header.has-hero .headright .navbar-navigation {
	margin-left: 6px;
}

/* When a hero header becomes sticky/solid (white) on scroll, restore the
   template's default dark-on-white search. */
.t3-wrapper.affix .t3-header.has-hero .head-search .form-control {
	background-color: #ffffff;
	background-image: url('../images/ico/search.png');
	color: #777777;
}

/* Avoid crowding the mobile header — hide the search there (toggle stays). */
@media (max-width: 991px) {
	.head-search { display: none; }
}

/* =========================================================================
   DARK MODE
   ========================================================================= */

/* -------------------------------------------------------------------------
   Per-home accent colour (--ja-accent)
   -------------------------------------------------------------------------
   Light mode gives each home page its own primary (via the style-N theme
   variant): home-1/5 = red, home-2/4 = green, home-3 = gold. Dark mode must
   honour the SAME per-home colour for every accent (links, nav/off-canvas
   hover+active, buttons, tags, pagination...). The template uses no CSS
   variable and <body> carries no per-page class, so we key off the menu-item
   class on <html> (itemid-N) for the coloured home pages; every other page
   (home-1/5 + all inner pages) keeps the default dark-friendly red. The hex
   values are dark-tuned (bright enough on #0f1320) rather than the template's
   darker light-mode hover shades. If a home's menu item id changes, update
   the selectors below. */
html[data-theme="dark"] {
	--ja-accent: #e0463f;            /* default red (home-1, home-5, inner pages) */
	--ja-accent-hover: #f06b64;      /* lighter red for hover/focus */
}
html.itemid-128[data-theme="dark"],  /* home-2 */
html.itemid-155[data-theme="dark"] { /* home-4 */
	--ja-accent: #21c674;            /* green */
	--ja-accent-hover: #45d98c;      /* lighter green */
}
html.itemid-153[data-theme="dark"] { /* home-3 */
	--ja-accent: #c5b48f;            /* gold */
	--ja-accent-hover: #d8caa6;      /* lighter gold */
}

/* -------------------------------------------------------------------------
   2. Base: page background + body text
   ------------------------------------------------------------------------- */
html[data-theme="dark"] body {
	background-color: #0f1320;
	color: #a7b0c2;
}

/* The T3 content wrapper paints an opaque white background on top of body;
   mod-bg-white sections are transparent and rely on it, so it must go dark too. */
html[data-theme="dark"] .t3-wrapper {
	background: #0f1320;
}

html[data-theme="dark"] .theme-toggle {
	color: #cdd4e0; /* same tone as the nav links + search magnifier icon */
}
/* hover is the neutral opacity fade from the base rule — no red here either */

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

/* Coloured solid buttons must keep white text — the generic link colour above
   would otherwise tint button labels (e.g. red "View Demo" on a red button). */
html[data-theme="dark"] a.btn-primary,
html[data-theme="dark"] a.btn-success,
html[data-theme="dark"] a.btn-info,
html[data-theme="dark"] a.btn-warning,
html[data-theme="dark"] a.btn-danger,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-info,
html[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .btn-danger {
	color: #ffffff;
}
html[data-theme="dark"] a.btn-primary:hover,
html[data-theme="dark"] a.btn-primary:focus,
html[data-theme="dark"] a.btn-success:hover,
html[data-theme="dark"] a.btn-success:focus,
html[data-theme="dark"] a.btn-info:hover,
html[data-theme="dark"] a.btn-info:focus,
html[data-theme="dark"] a.btn-warning:hover,
html[data-theme="dark"] a.btn-warning:focus,
html[data-theme="dark"] a.btn-danger:hover,
html[data-theme="dark"] a.btn-danger:focus {
	color: #ffffff;
}

/* Headings */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .h1,
html[data-theme="dark"] .h2,
html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4,
html[data-theme="dark"] .h5,
html[data-theme="dark"] .h6 {
	color: #f2f4f8;
}

/* -------------------------------------------------------------------------
   3. Header + navigation
   ------------------------------------------------------------------------- */
/* Solid headers go dark. Hero-overlay headers (home-3/4) stay transparent so the
   hero image shows through — exactly like light mode. (When such a header sticks
   on scroll it gains .affix and is handled below.) */
html[data-theme="dark"] .t3-header:not(.has-hero) {
	background: #0f1320;
	border-bottom: 1px solid #1d2436;
}
/* Sticky/scrolled hero header turns solid — keep it dark in dark mode (the
   template forces it white via an #id rule, so match that specificity). */
html[data-theme="dark"] .t3-wrapper.affix #t3-header.has-hero {
	background: #0f1320;
	border-bottom: 1px solid #1d2436;
}

/* Logo text */
html[data-theme="dark"] .logo-text a {
	color: #f2f4f8;
}
html[data-theme="dark"] .logo-text a b {
	color: var(--ja-accent);
}

/* Main nav links.
   ONLY the solid default header (home-1) has dark #333 links in light mode that
   vanish on dark — lift just its INACTIVE links. The active link + hover are left
   to each home's own theme primary (red on home-1, green on home-2, white on the
   hero headers home-3/4), so dark mode matches light mode. The navy bar (home-2)
   and hero (home-3/4) already use white links and aren't touched here. */
html[data-theme="dark"] .t3-header:not(.has-hero) .header-inner .navbar-default .navbar-nav > li:not(.active):not(.current) > a,
html[data-theme="dark"] .t3-header:not(.has-hero) .header-inner .navbar-default .navbar-nav > li:not(.active):not(.current) > span,
html[data-theme="dark"] .t3-header:not(.has-hero) .header-inner .navbar-default .navbar-nav > li > .nav-header {
	color: #cdd4e0;
}

/* Mega/dropdown menu panels */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .mega-dropdown-menu,
html[data-theme="dark"] .nav-child.dropdown-menu {
	background-color: #1a2032;
	border-color: #2a3247;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .dropdown-menu > li > a,
html[data-theme="dark"] .mega-nav > li > a,
html[data-theme="dark"] .mega-nav > li > span {
	color: #cdd4e0;
}
html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus,
html[data-theme="dark"] .mega-nav > li > a:hover,
html[data-theme="dark"] .mega-nav > li > a:focus {
	background-color: #20283c;
	color: var(--ja-accent);
}

/* Navbar toggle (mobile hamburger) */
html[data-theme="dark"] .navbar-default .navbar-toggle {
	border-color: #2a3247;
}
html[data-theme="dark"] .navbar-default .navbar-toggle .fa {
	color: #cdd4e0;
}

/* Topbar */
html[data-theme="dark"] .t3-topbar {
	background: #0c1019;
	color: #a7b0c2;
	border-bottom: 1px solid #1d2436;
}

/* -------------------------------------------------------------------------
   4. Section backgrounds
   ------------------------------------------------------------------------- */
/* "Check Out All The Pages" sits on the body (mod-bg-white) -> dark page bg */
html[data-theme="dark"] .t3-section-wrap .mod-bg-gray {
	background: #141927;
}

/* Section titles / sub headings */
html[data-theme="dark"] .section-title h3,
html[data-theme="dark"] .section-title .h3,
html[data-theme="dark"] .section-title h2,
html[data-theme="dark"] .section-title .lead {
	color: #f2f4f8;
}

/* -------------------------------------------------------------------------
   5. "Check Out All The Pages" — acm-teams cards
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .acm-teams .teams-item {
	background: #1a2032;
}
html[data-theme="dark"] .mod-bg-white .acm-teams .member-info {
	border-color: #2a3247;
}
html[data-theme="dark"] .acm-teams h4 a {
	color: #f2f4f8;
}
html[data-theme="dark"] .acm-teams h4 a:hover,
html[data-theme="dark"] .acm-teams h4 a:focus {
	color: var(--ja-accent);
}
html[data-theme="dark"] .acm-teams .position {
	color: #8b93a4;
}
/* .action-link-icon a is a coloured (red/green) square with a WHITE arrow in the
   original design. Re-assert white so the generic dark link colour doesn't tint
   the arrow (grey/red on the coloured square = looks like a blank block). */
html[data-theme="dark"] .action-link-icon a {
	color: #ffffff;
}

/* -------------------------------------------------------------------------
   6. Features — acm-features cards
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .acm-features.style-2.style-box .features-item {
	background: #1a2032;
}
html[data-theme="dark"] .acm-features.style-2 .font-icon {
	color: #6f8fd6;
}
/* style-5 puts content in a white card */
html[data-theme="dark"] .acm-features.style-5 .features-item .group-item {
	background: #1a2032;
}
/* Feature-card icons are baked navy PNGs (.img-icon img) that nearly vanish on
   the dark bg. A plain brightness boost lifts them into view while PRESERVING
   their hue — so the owner can still swap the PNG for another colour and it'll
   simply be brightened (unlike a recolour filter, which forces a fixed colour). */
html[data-theme="dark"] .acm-features .img-icon img,
html[data-theme="dark"] .features-item .img-icon img {
	filter: brightness(2.8) saturate(1.15);
}
html[data-theme="dark"] .acm-features h4,
html[data-theme="dark"] .acm-features .features-item h4 {
	color: #f2f4f8;
}
html[data-theme="dark"] .acm-features .features-item p {
	color: #a7b0c2;
}

/* -------------------------------------------------------------------------
   7. Hero / CTA (mod-bg-secondary) / Footer — already dark; minor polish
   ------------------------------------------------------------------------- */
/* CTA navy section already reads as dark; keep as-is.
   Footer (#111111) already dark; keep as-is. */

/* Footer: keep it identical to light mode. The generic dark link colour above
   would tint every footer link red, so re-assert the footer's native grey. */
html[data-theme="dark"] .t3-footer a,
html[data-theme="dark"] .t3-footnav .t3-module ul > li > a,
html[data-theme="dark"] .t3-copyright a {
	color: #888888;
}
html[data-theme="dark"] .t3-footer a:hover,
html[data-theme="dark"] .t3-footer a:active,
html[data-theme="dark"] .t3-footer a:focus,
html[data-theme="dark"] .t3-footnav .t3-module ul > li > a:hover,
html[data-theme="dark"] .t3-footnav .t3-module ul > li > a:focus,
html[data-theme="dark"] .t3-copyright a:hover,
html[data-theme="dark"] .t3-copyright a:focus {
	color: #ffffff;
}
html[data-theme="dark"] .t3-footer .logo-footer {
	color: #ffffff;
}

/* Back-to-top button */
html[data-theme="dark"] .back-to-top {
	background: #1a2032;
	border-color: #2a3247;
	color: #cdd4e0;
}

/* Contact page info section (light-gray band) + cards */
html[data-theme="dark"] .plain-style .box-info {
	background: #141927;
}
html[data-theme="dark"] .plain-style .box-info .wrap-content .header-title h2 {
	color: #f2f4f8;
}
html[data-theme="dark"] .plain-style .box-info .wrap-content .contact-info .contact-address .address-detail .item {
	background: #1a2032;
}
html[data-theme="dark"] .contact .contact-address .address-detail .item a {
	color: #a7b0c2;
}
html[data-theme="dark"] .contact .contact-address .address-detail .item a:hover {
	color: var(--ja-accent);
}

/* -------------------------------------------------------------------------
   8. Off-canvas mobile menu
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .t3-off-canvas {
	background: #141927;
	color: #a7b0c2;
}
html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-header {
	background: #0c1019;
	color: #f2f4f8;
}
html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body a {
	color: #cdd4e0;
}
html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body a:hover,
html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body a:focus {
	color: var(--ja-accent);
}
/* Off-canvas group labels — the module titles ("JOOMLA PAGES") and the menu
   separator headings ("J! Pages", "Other Pages"...) are #333 and vanish on dark.
   Lift them to a visible (slightly muted vs the items) tone. The !important keeps
   them neutral even when their group is in the active trail (the template would
   otherwise turn the active group's heading brand-red). */
html[data-theme="dark"] .t3-off-canvas .module-title,
html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .nav-header,
html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body li.active > .nav-header {
	color: #a7b0c2 !important;
}
/* Off-canvas menu item hover/active — match LIGHT mode (a text-colour change
   only, NO filled box). The global mega/dropdown rule above paints a navy
   #20283c box on .dropdown-menu > li > a:hover/:focus, which is right for the
   desktop mega-menu but looks like a cramped box hugging the text in the
   narrow off-canvas. Light mode uses a transparent background + red text for
   active/hover items, so mirror that here. */
html[data-theme="dark"] .t3-off-canvas .dropdown-menu > li > a:hover,
html[data-theme="dark"] .t3-off-canvas .dropdown-menu > li > a:focus,
html[data-theme="dark"] .t3-off-canvas .dropdown-menu > li.active > a,
html[data-theme="dark"] .t3-off-canvas .dropdown-menu > li.open > a,
html[data-theme="dark"] .t3-off-canvas .menu > li > a:hover,
html[data-theme="dark"] .t3-off-canvas .menu > li > a:focus,
html[data-theme="dark"] .t3-off-canvas .menu > li.active > a {
	background-color: transparent;
	color: var(--ja-accent);
}

/* Off-canvas close button */
html[data-theme="dark"] .t3-off-canvas .close,
html[data-theme="dark"] .t3-off-canvas-toggle {
	color: #cdd4e0;
}

/* Generic cards / panels that may appear on inner pages */
html[data-theme="dark"] .well,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-default,
html[data-theme="dark"] .thumbnail {
	background-color: #1a2032;
	border-color: #2a3247;
	color: #a7b0c2;
}
html[data-theme="dark"] .panel-default > .panel-heading {
	background-color: #20283c;
	border-color: #2a3247;
	color: #f2f4f8;
}
html[data-theme="dark"] .panel-body {
	color: #a7b0c2;
}
html[data-theme="dark"] .panel-title > a {
	color: #f2f4f8;
}

/* -------------------------------------------------------------------------
   9. Forms (inputs / textarea / select)
   ------------------------------------------------------------------------- */
html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="reset"]):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"] .inputbox,
html[data-theme="dark"] .chzn-single,
html[data-theme="dark"] .chzn-drop {
	background-color: #1a2032;
	border-color: #2a3247;
	color: #e6e9ef;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
	color: #6f7892;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus {
	border-color: #6f8fd6;
}
/* Joomla list "Display #" limit selector (tagged-items, search results, ...).
   The template gives it only 5px horizontal padding, so the value ("20") is
   crammed hard against the box edges and the native arrow. Add comfortable
   left/right breathing room (extra on the right to clear the dropdown arrow).
   Applies in BOTH modes — the cramped padding is a template bug present in
   light mode too, and the user wants the comfortable spacing everywhere. */
select[name="limit"],
#limit.form-select {
	padding-left: 16px;
	padding-right: 34px;
}
/* Input-group add-on icon box (login module's user / lock icon). The template
   gives it asymmetric 30px horizontal padding that overflows the fixed-width
   box, shoving the glyph off-centre — a wide gap on the left, cramped on the
   right. Flex-centre the icon in a comfortably wide box so both sides get the
   same generous spacing. LAYOUT applies in BOTH modes (the off-centre glyph is
   a template bug present in light too); only the dark colours are scoped. */
.login .input-group-addon,
.login-wrap .input-group-addon,
.input-group-addon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 0;
	padding-right: 0;
	min-width: 60px;
}
/* Dark colours only — box sits a touch darker than the field, like the light
   theme's grey (#eee) addon recessed against the white input. */
html[data-theme="dark"] .input-group-addon {
	background-color: #141927;
	border-color: #2a3247;
	color: #8b93a4;
}

/* Default (white) buttons — e.g. Joomla search-tools / filter toggles.
   Coloured buttons (btn-primary/success/etc.) are left untouched. */
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .js-stools-btn-filter,
html[data-theme="dark"] .filter-search .btn {
	background-color: #20283c;
	border-color: #2a3247;
	color: #cdd4e0;
}
html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-default:focus,
html[data-theme="dark"] .js-stools-btn-filter:hover {
	background-color: #283150;
	border-color: #2a3247;
	color: #f2f4f8;
}
/* com_tags / com_finder filter button groups (Search / Clear) */
html[data-theme="dark"] .com-tags-tags__filter .btn,
html[data-theme="dark"] .filter-search-bar .btn,
html[data-theme="dark"] .btn-toolbar .btn-group > .btn {
	background-color: #20283c;
	border-color: #2a3247;
	color: #cdd4e0;
}
html[data-theme="dark"] .com-tags-tags__filter .btn:hover,
html[data-theme="dark"] .filter-search-bar .btn:hover {
	background-color: #283150;
	color: #f2f4f8;
}

/* -------------------------------------------------------------------------
   10. Content components (article body, code, tables, tabs, lists)
   ------------------------------------------------------------------------- */
/* Code & pre */
html[data-theme="dark"] code {
	background-color: #20283c;
	color: #f06b64;
}
html[data-theme="dark"] pre {
	background-color: #20283c;
	border-color: #2a3247;
	color: #cdd4e0;
}

/* Blockquote */
html[data-theme="dark"] blockquote {
	border-left-color: #2a3247;
}
html[data-theme="dark"] blockquote.pull-right {
	border-right-color: #2a3247;
}

/* Horizontal rule */
html[data-theme="dark"] hr {
	border-top-color: #2a3247;
}

/* Tables */
html[data-theme="dark"] table,
html[data-theme="dark"] .table {
	color: #a7b0c2;
}
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .table > tfoot > tr > th,
html[data-theme="dark"] .table > thead > tr > td,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tfoot > tr > td {
	border-color: #2a3247;
}
html[data-theme="dark"] .table > thead > tr > th {
	border-bottom-color: #2a3247;
	color: #f2f4f8;
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
	background-color: #161b2a;
}
html[data-theme="dark"] .table-hover > tbody > tr:hover {
	background-color: #20283c;
}
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > thead > tr > th,
html[data-theme="dark"] .table-bordered > tbody > tr > td {
	border-color: #2a3247;
}

/* Nav tabs */
html[data-theme="dark"] .nav-tabs {
	border-bottom-color: #2a3247;
}
html[data-theme="dark"] .nav-tabs > li > a {
	color: #a7b0c2;
}
html[data-theme="dark"] .nav-tabs > li > a:hover {
	border-color: #2a3247 #2a3247 #2a3247;
	background-color: #20283c;
}
html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover,
html[data-theme="dark"] .nav-tabs > li.active > a:focus {
	background-color: #1a2032;
	border-color: #2a3247 #2a3247 transparent;
	color: #f2f4f8;
}

/* Default label / badge fallbacks (keep coloured variants intact) */
html[data-theme="dark"] .label-default {
	background-color: #2a3247;
	color: #cdd4e0;
}

/* Popular tags module (sidebar tag pills) */
html[data-theme="dark"] .tagspopular ul > li {
	color: #a7b0c2;
}
html[data-theme="dark"] .tagspopular ul > li > a {
	background: #20283c;
	color: #cdd4e0;
}
html[data-theme="dark"] .tagspopular ul > li > a:hover,
html[data-theme="dark"] .tagspopular ul > li > a:focus,
html[data-theme="dark"] .tagspopular ul > li > a:active {
	background: var(--ja-accent);
	color: #ffffff;
}
/* Inline article tags */
html[data-theme="dark"] .tags > span .label {
	background: #20283c;
	color: #cdd4e0;
}

/* Breadcrumb */
html[data-theme="dark"] .breadcrumb {
	background-color: transparent;
	color: #8b93a4;
}
html[data-theme="dark"] .breadcrumb > li + li:before {
	color: #6f7892;
}

/* Pagination */
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
	background-color: #1a2032;
	border-color: #2a3247;
	color: #cdd4e0;
}
html[data-theme="dark"] .pagination > li > a:hover {
	background-color: #20283c;
	border-color: #2a3247;
}

/* List group */
html[data-theme="dark"] .list-group-item {
	background-color: #1a2032;
	border-color: #2a3247;
	color: #a7b0c2;
}

/* Definition / generic bordered blocks used in JA demos */
html[data-theme="dark"] .module-ct .well,
html[data-theme="dark"] .item-page,
html[data-theme="dark"] .blog,
html[data-theme="dark"] .blog-featured {
	color: #a7b0c2;
}

/* -------------------------------------------------------------------------
   11. ACM accordion (FAQ panels)
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .acm-accordion.panel-group .panel {
	background: #1a2032;
}
html[data-theme="dark"] .acm-accordion .panel-default > .panel-heading + .panel-collapse > .panel-body {
	border-color: #2a3247;
	color: #a7b0c2;
}
/* Collapsed (closed) accordion header: dark panel background + readable text.
   The text colour is applied only when NOT hovered (:not(:hover)) so that on
   hover each home's own theme primary shows through (red on home-1, green on
   home-2, gold on home-3) — instead of a forced red that clashes. */
html[data-theme="dark"] .acm-accordion .panel-title a.collapsed {
	background: #20283c;
}
html[data-theme="dark"] .acm-accordion .panel-title a.collapsed:not(:hover) {
	color: #cdd4e0;
}
/* Open accordion header keeps each home's brand accent — leave as-is. */

/* -------------------------------------------------------------------------
   12. ACM testimonials
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .acm-testimonial.style-1 .testimonial-content .owl-carousel .testimonial-item {
	background: #1a2032;
}
html[data-theme="dark"] .acm-testimonial.style-3 .testimonial-item-wrap .testimonial-item-inner .lead-desc {
	background: #1a2032;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .acm-testimonial.style-3 .testimonial-item-wrap .testimonial-item-inner .lead-desc:after {
	border-top-color: #1a2032;
}

/* -------------------------------------------------------------------------
   13. Offline / maintenance page (offline.php — uses its own offline.css)
   ------------------------------------------------------------------------- */
html[data-theme="dark"] body.offline,
html[data-theme="dark"] .offline-wrap {
	background: #0f1320;
	color: #a7b0c2;
}
html[data-theme="dark"] .outline {
	background: #1a2032;
	border-color: #2a3247;
}
html[data-theme="dark"] .outline h1 {
	color: #f2f4f8;
}
html[data-theme="dark"] #form-login-secretkey input,
html[data-theme="dark"] #form-login-username input,
html[data-theme="dark"] #form-login-password input {
	background: #141927;
	border-color: #2a3247;
	color: #e6e9ef;
}
html[data-theme="dark"] #form-login-secretkey input:focus,
html[data-theme="dark"] #form-login-username input:focus,
html[data-theme="dark"] #form-login-password input:focus {
	border-color: #6f8fd6;
}

/* =========================================================================
   14. Review-pass fixes (forms, alerts, panels, contact card, calendar)
   ========================================================================= */

/* ---- Login page ---- */
html[data-theme="dark"] .login-wrap {
	border-color: #2a3247;
}
html[data-theme="dark"] .login-wrap .page-header h1 {
	color: #f2f4f8;
}
html[data-theme="dark"] .login-wrap form label {
	color: #cdd4e0;
}
html[data-theme="dark"] .login-wrap .other-links ul li a {
	color: #a7b0c2;
}
html[data-theme="dark"] .login-wrap .other-links ul li a:hover,
html[data-theme="dark"] .login-wrap .other-links ul li a:focus {
	color: var(--ja-accent);
}

/* ---- Registration / profile forms ---- */
html[data-theme="dark"] .registration legend,
html[data-theme="dark"] .profile-edit legend,
html[data-theme="dark"] .profile legend {
	color: #f2f4f8;
}
html[data-theme="dark"] .registration .form-group .control-label label,
html[data-theme="dark"] .profile-edit .form-group .control-label label,
html[data-theme="dark"] .profile .form-group .control-label label,
html[data-theme="dark"] .registration .control-label label,
html[data-theme="dark"] .profile-edit .control-label label,
html[data-theme="dark"] .profile .control-label label {
	color: #cdd4e0;
}

/* ---- Contact info cards (icon + title were navy/#333, invisible on dark) ---- */
html[data-theme="dark"] .plain-style .box-info .wrap-content .contact-info .contact-address .address-detail .item > span .fa,
html[data-theme="dark"] .contact .contact-address .address-detail .item .fa {
	color: #6f8fd6;
}
html[data-theme="dark"] .plain-style .box-info .wrap-content .contact-info .contact-address .address-detail .item > span > span.title,
html[data-theme="dark"] .contact .contact-address .address-detail .item .title {
	color: #f2f4f8;
}

/* ---- Contextual alerts: dark-tinted instead of pale pastel ---- */
html[data-theme="dark"] .alert-success {
	background-color: #15271b;
	border-color: #2f5a34;
	color: #86d48c;
}
html[data-theme="dark"] .alert-info {
	background-color: #112630;
	border-color: #2c5870;
	color: #74c4e6;
}
html[data-theme="dark"] .alert-warning {
	background-color: #2a2410;
	border-color: #5a4d20;
	color: #e6c46a;
}
html[data-theme="dark"] .alert-danger {
	background-color: #2a1515;
	border-color: #5a2d2d;
	color: #e88a86;
}
html[data-theme="dark"] .alert .alert-link {
	color: #ffffff;
}

/* ---- Contextual panel headings: dark-tinted ---- */
html[data-theme="dark"] .panel-success > .panel-heading {
	background-color: #1c3a24;
	border-color: #2f5a34;
	color: #86d48c;
}
html[data-theme="dark"] .panel-info > .panel-heading {
	background-color: #143444;
	border-color: #2c5870;
	color: #74c4e6;
}
html[data-theme="dark"] .panel-warning > .panel-heading {
	background-color: #3a3214;
	border-color: #5a4d20;
	color: #e6c46a;
}
html[data-theme="dark"] .panel-danger > .panel-heading {
	background-color: #3a1d1d;
	border-color: #5a2d2d;
	color: #e88a86;
}
html[data-theme="dark"] .panel-success,
html[data-theme="dark"] .panel-info,
html[data-theme="dark"] .panel-warning,
html[data-theme="dark"] .panel-danger {
	background-color: #1a2032;
	border-color: #2a3247;
}

/* ---- Date-picker calendar popup (registration DOB etc.) ---- */
html[data-theme="dark"] {
	--calendar-bg: #1a2032;
	--calendar-select-bg-color: #20283c;
	--calendar-select-color: #e6e9ef;
	--calendar-week-bg: #141927;
}

/* =========================================================================
   15. Per-page home tuning (dark mode)
   NOTE: scoped by JA Builder section IDs (body has no page-specific class).
   If a home layout's sections are rebuilt and IDs change, update these.
   ========================================================================= */

/* ---- Home Style 2: restore the light/dark "rhythm" of alternating bands ----
   In light mode its sections alternate white / grey / navy. In dark mode the
   white & grey bands were near-identical, flattening the page. Give the
   "was-white" bands a raised surface and the "was-grey" bands a recessed one so
   the cadence returns. Cards (#1a2032) still sit above both. */
html[data-theme="dark"] #Section115,
html[data-theme="dark"] #Section135,
html[data-theme="dark"] #Section141,
html[data-theme="dark"] #Section118 {
	background-color: #161d2c;
}
html[data-theme="dark"] #Section128,
html[data-theme="dark"] #Section137,
html[data-theme="dark"] #Section142 {
	background-color: #0d1118;
}

/* ---- Home Style 3: the hero meets the first section seamlessly via the notch,
   so no divider line here (it would break the seamless connection). ---- */

/* ---- Home Style 3: the calligraphic signature is dark ink — invert for dark ----
   (decorative graphic, not a UI icon, so a filter here is appropriate) */
html[data-theme="dark"] img[src*="sign-icon"] {
	filter: invert(1) brightness(1.7) contrast(0.9);
}

/* -------------------------------------------------------------------------
   16. Hero slideshow tab bar (acm-slideshow .owl-dots) — home-style-1/2
   In light mode the tabs sit on a WHITE bar: dark #333 text reads fine and the
   white ::before arrows are invisible (white-on-white), only the active one
   shows as a notch into the hero. In dark mode the bar goes dark, so the text
   became unreadable and the white arrows showed up. Fix: elevated dark bar,
   light text, and arrows coloured to MATCH the bar (inactive vanish, active
   stays a notch pointing into the hero).
   ------------------------------------------------------------------------- */
/* Keep the bar on the SAME background as the section below it (no raised fill →
   no heavy shade "shelf"), and separate it with a thin 1px line that matches the
   vertical dividers between the tabs. */
html[data-theme="dark"] .acm-slideshow .owl-dots {
	background: transparent;
	border-bottom: 1px solid #2a3247;
}
/* Brighter, higher-contrast label text. */
html[data-theme="dark"] .acm-slideshow .owl-carousel .owl-dots > div {
	color: #dfe4ec;
}
html[data-theme="dark"] .acm-slideshow .owl-carousel .owl-dots > div.active {
	color: #ffffff;
}
html[data-theme="dark"] .acm-slideshow .owl-carousel .owl-dots > div + div {
	border-left-color: #2a3247;
}
/* Arrows match the (now body-coloured) bar: inactive vanish, active = a dark
   notch pointing into the hero. */
html[data-theme="dark"] .acm-slideshow .owl-carousel .owl-dots > div:before {
	border-bottom-color: #0f1320;
}

/* -------------------------------------------------------------------------
   17. Check list (.list-check) — the red tick stays, but the label text is
   #333 (invisible on dark). Lift it to a readable light tone.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .list-check li {
	color: #cdd4e0;
}

/* -------------------------------------------------------------------------
   18. Home-style-2 header (topbar + "Head Info" Call Us / Email / Hours)
   The style-2 theme borders everything in #eaeaea (white) and uses #aaa / #333
   text — far too bright/invisible on the dark header. Soften the borders and
   lift the text.
   ------------------------------------------------------------------------- */
/* Topbar frame + item dividers */
html[data-theme="dark"] .t3-topbar {
	border-color: #1d2436;
}
html[data-theme="dark"] .t3-topbar ul.list-info {
	border-left-color: #2a3247;
}
html[data-theme="dark"] .t3-topbar ul.list-info li {
	border-right-color: #2a3247;
}
/* Head Info: "Call Us:" labels + their values */
html[data-theme="dark"] .head-info .wrap-info ul li h5 {
	color: #8b93a4;
}
html[data-theme="dark"] .head-info .wrap-info ul li span,
html[data-theme="dark"] .head-info .wrap-info ul li a {
	color: #e6e9ef;
}
html[data-theme="dark"] .head-info .wrap-info ul li a {
	border-bottom-color: #2a3247;
}

/* -------------------------------------------------------------------------
   19. Home-style-3 hero "scroll down" notch (.acm-hero.style-1 .icon-bottom)
   It's a white triangle that blends into the white section below in light mode.
   In dark mode the section below is dark, so colour the notch to match it (and
   lift the chevron, which is #333 and would vanish on the dark notch).
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .acm-hero.style-1 .icon-bottom {
	border-bottom-color: #0f1320; /* = the page/section base, so the notch blends in */
	color: #cdd4e0;
}

/* -------------------------------------------------------------------------
   20. Section divider lines (.border-top / .border-bottom)
   The template draws them in #eaeaea (white) — far too heavy on a dark page.
   Replace with a faint hairline like the other dark-mode dividers.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .t3-section-wrap .border-top {
	border-top-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .t3-section-wrap .border-bottom {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* -------------------------------------------------------------------------
   21. Blog / latest-news lists (home-4 "Our Blog", article lists, sidebars)
   Post titles + "View all" links are #333 and vanish on dark. Lift them.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .latest-news .article-detail .article-content h3 a {
	color: #f2f4f8;
}
html[data-theme="dark"] .latest-news .article-detail .article-content h3 a:hover {
	color: #ffffff;
}
html[data-theme="dark"] .mostread .title a {
	color: #e6e9ef;
}
html[data-theme="dark"] .mostread .title a:hover {
	color: #ffffff;
}
html[data-theme="dark"] .view-all a {
	color: #cdd4e0;
}
html[data-theme="dark"] .view-all a:hover {
	color: #ffffff;
}
/* Categories module list links (sidebar) are #777 — too faint on dark. */
html[data-theme="dark"] .mod-articlescategories li a,
html[data-theme="dark"] .mod-articlescategories h4 a,
html[data-theme="dark"] .mod-articlescategories ul a {
	color: #cdd4e0 !important;
}
html[data-theme="dark"] .mod-articlescategories li a:hover,
html[data-theme="dark"] .mod-articlescategories h4 a:hover {
	color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   22. Blog list cards (.items-row .item article) — the #eaeaea (white) border
   is heavy on dark. Soften to a subtle dark border.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .items-row .item article {
	border-color: #2a3247;
}

/* -------------------------------------------------------------------------
   23. User-account form containers (registration / profile / edit-profile)
   The template frames them with a #eaeaea (white) border — heavy on dark.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .registration,
html[data-theme="dark"] .profile-edit,
html[data-theme="dark"] .profile,
html[data-theme="dark"] .reset,
html[data-theme="dark"] .remind {
	border-color: #2a3247;
}

/* -------------------------------------------------------------------------
   24. Joomla Choices.js widgets (Time Zone select, "Events to Email" multi-
   select on edit-profile, etc.) — default white box/dropdown is jarring on dark.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .choices__inner {
	background-color: #1a2032;
	border-color: #2a3247;
	color: #e6e9ef;
}
html[data-theme="dark"] .choices.is-focused .choices__inner,
html[data-theme="dark"] .choices.is-open .choices__inner {
	border-color: #6f8fd6;
}
html[data-theme="dark"] .choices__input {
	background-color: transparent;
	color: #e6e9ef;
}
html[data-theme="dark"] .choices__placeholder {
	color: #6f7892;
	opacity: 1;
}
/* Dropdown panel */
html[data-theme="dark"] .choices__list--dropdown,
html[data-theme="dark"] .choices__list[aria-expanded] {
	background-color: #1a2032;
	border-color: #2a3247;
	color: #cdd4e0;
}
html[data-theme="dark"] .choices__list--dropdown .choices__item,
html[data-theme="dark"] .choices__list[aria-expanded] .choices__item {
	color: #cdd4e0;
}
html[data-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted,
html[data-theme="dark"] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
	background-color: #20283c;
	color: #ffffff;
}
/* Selected pills in a multi-select */
html[data-theme="dark"] .choices__list--multiple .choices__item {
	background-color: #2a3247;
	border-color: #39425c;
	color: #e6e9ef;
}
html[data-theme="dark"] .choices__list--multiple .choices__item .choices__button {
	border-left-color: rgba(255, 255, 255, 0.25);
}
/* The single-select chosen-value text + the dropdown arrow area */
html[data-theme="dark"] .choices[data-type*="select-one"]::after {
	border-color: #cdd4e0 transparent transparent transparent;
}

/* -------------------------------------------------------------------------
   25. Joomla switcher (yes/no toggle, e.g. "Email Notifications" on edit-profile)
   Default off-track is light grey (#d3d3d3) + white knob — jarring on dark.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .switcher .toggle-outside {
	background: #2a3247;
}
html[data-theme="dark"] .switcher .toggle-inside {
	background: #cdd4e0;
}
/* (the green "on" state stays as a status colour) */

/* Choices.js multi-select item remove buttons. Joomla uses .choices__button_joomla
   (a wide #efefef block) plus the stock .choices__button (× icon) — darken both. */
html[data-theme="dark"] .choices__button_joomla {
	background-color: #2a3247;
	border-color: #39425c;
	color: #cdd4e0;
}
html[data-theme="dark"] .choices__button_joomla:hover {
	background-color: #39425c;
	color: #ffffff;
}
html[data-theme="dark"] .choices__button {
	background-color: transparent !important;
	border-left-color: rgba(255, 255, 255, 0.25);
	filter: brightness(0) invert(0.8);
}
/* Selected pills (any list type) stay dark with light text. */
html[data-theme="dark"] .choices__list .choices__item--selectable {
	background-color: #2a3247;
	color: #e6e9ef;
}

/* -------------------------------------------------------------------------
   26. Profile view (.dl-horizontal dt/dd on profile / contact pages)
   Both label and value inherit the muted body grey, so the data reads faint.
   Make the VALUES prominent and keep the labels muted for clear hierarchy.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .dl-horizontal dd {
	color: #e6e9ef;
}
html[data-theme="dark"] .dl-horizontal dt {
	color: #a7b0c2;
}

/* -------------------------------------------------------------------------
   27. Category list / blog (list-all-categories) + pagination
   Template uses heavy #eaeaea borders on the cards and the pagination
   counter, and a dark navy (#1b3060) for the title links — all of which
   read as harsh/illegible on the dark page. Soften the borders to the
   theme border and lighten the title links.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .category-item .category-item-inner {
	border-color: #2a3247;
}
/* Category / item title links -> light heading colour. Covers BOTH the
   list-all-categories view (.category-item-inner .item-title a, navy #1b3060)
   AND the category-blog view, whose sub-category cards use .category-name a
   and blog article titles use .items-row .item .item-title a (these otherwise
   fall back to the generic accent-red link colour). */
html[data-theme="dark"] .category-item .item-title a,
html[data-theme="dark"] .category-item-inner h3 a,
html[data-theme="dark"] .category-item-inner .item-title a,
html[data-theme="dark"] .category-item-inner h2 a,
html[data-theme="dark"] .category-name a,
html[data-theme="dark"] .items-row .item .category-name a,
html[data-theme="dark"] .items-row .item .item-title a,
html[data-theme="dark"] .blog .item-title a {
	color: #f2f4f8;
}
html[data-theme="dark"] .category-item .item-title a:hover,
html[data-theme="dark"] .category-item-inner h3 a:hover,
html[data-theme="dark"] .category-item-inner .item-title a:hover,
html[data-theme="dark"] .category-item-inner h2 a:hover,
html[data-theme="dark"] .category-name a:hover,
html[data-theme="dark"] .items-row .item .category-name a:hover,
html[data-theme="dark"] .items-row .item .item-title a:hover,
html[data-theme="dark"] .blog .item-title a:hover {
	color: var(--ja-accent);
}

/* Pagination "Page X of Y" counter box: heavy #eaeaea border -> theme border. */
html[data-theme="dark"] .counter {
	border-color: #2a3247;
	color: #a7b0c2;
}
/* Pagination links (Bootstrap default = white bg + light border). */
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
	background-color: #1a2032;
	border-color: #2a3247;
	color: #a7b0c2;
}
html[data-theme="dark"] .pagination > li > a:hover,
html[data-theme="dark"] .pagination > li > span:hover,
html[data-theme="dark"] .pagination > li > a:focus,
html[data-theme="dark"] .pagination > li > span:focus {
	background-color: #2a3247;
	border-color: #2a3247;
	color: #e6e9ef;
}
html[data-theme="dark"] .pagination > .active > a,
html[data-theme="dark"] .pagination > .active > span,
html[data-theme="dark"] .pagination > .active > a:hover,
html[data-theme="dark"] .pagination > .active > span:hover {
	background-color: var(--ja-accent);
	border-color: var(--ja-accent);
	color: #ffffff;
}

/* -------------------------------------------------------------------------
   28. Offline-page DEMO (/other-pages/offline-page)
   This page is NOT live markup — it embeds a baked JPG screenshot of the
   light offline page (images/.../page-offline.jpg), so its colours can't be
   themed. Frame it + gently dim it so the white screenshot reads as an
   intentional preview panel rather than a glaring white block on the dark
   page. (The REAL offline page, offline.php, is already dark-mode aware.)
   ------------------------------------------------------------------------- */
html[data-theme="dark"] img[src*="page-offline"] {
	border: 1px solid #2a3247;
	border-radius: 6px;
	filter: brightness(0.85) contrast(0.96);
}

/* -------------------------------------------------------------------------
   29. Sidebar divider (the vertical line between main content and the
   right/left sidebar). Template draws it as 1px solid #eaeaea, which is a
   harsh white seam on the dark page. Soften it to the theme border on EVERY
   page that has a sidebar (blog, categories, contact, search results, ...).
   The html[data-theme] prefix outranks the template's media-query rule.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .t3-mainbody > .row > div.t3-sidebar-right {
	border-left-color: #2a3247;
}
html[data-theme="dark"] .t3-mainbody > .row > div.t3-sidebar-left {
	border-right-color: #2a3247;
}

/* -------------------------------------------------------------------------
   30. Home-4 video play button (.acm-features.style-3 .img-icon)
   The play disc is a hard #fff circle. In light mode it sits on a white
   section so only the arrow reads; in dark mode the section is dark, so the
   solid white circle becomes a harsh blob. Soften it to a frosted translucent
   disc so it reads as an elegant play button (the arrow glyph is untouched).
   Dark-scoped — light mode keeps its original white disc.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .acm-features.style-3 .img-icon {
	background-color: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.35);
}