/* ja_vega dark mode — scoped under html[data-theme="dark"]; light mode untouched */
/* ── Palette + global base ───────────────────────────────────────── */
html[data-theme="dark"]{
  --dm-bg:#0f141c;--dm-surface:#161d28;--dm-raised:#1d2530;--dm-border:#2a323d;
  --dm-text:#c7ccd4;--dm-heading:#f1f3f6;--dm-muted:#8b94a3;--dm-primary:#3b8bff;
  /* remap T4/Bootstrap tokens the template reads */
  --headings-color:var(--dm-heading);
  --t4-heading-color:var(--dm-heading);
  --t4-body-bg:var(--dm-bg);
  --bs-body-bg:var(--dm-bg);--bs-body-color:var(--dm-text);
  --bs-border-color:var(--dm-border);
  --bs-link-color:var(--dm-primary);--bs-link-hover-color:#5fa0ff;
  --bs-link-color-rgb:59,139,255;
  /* Template accent used for highlight TEXT (not button bg, which uses --bs-primary)
     -> brighten so primary-coloured text stays readable on the dark background. */
  --color-primary:var(--dm-primary);
  background-color:var(--dm-bg);
}
html[data-theme="dark"] body{background-color:var(--dm-bg);color:var(--dm-text);}
/* Main content wrapper is hard-coded white in the template — let the navy body show. */
html[data-theme="dark"] .t4-content,
html[data-theme="dark"] .t4-content-inner,
html[data-theme="dark"] .t4-wrapper,
html[data-theme="dark"] .t4-mainbody{background-color:transparent!important;}
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);}
html[data-theme="dark"] a:not(.btn){color:var(--dm-primary);}
html[data-theme="dark"] a:not(.btn):hover{color:#5fa0ff;}
/* Buttons keep their own text colour (don't let the link rule tint them) */
html[data-theme="dark"] .btn-primary{color:#fff;}
/* Title links (card/post/article titles are headings) keep heading colour,
   not the blue body-link colour. */
html[data-theme="dark"] h1 a,html[data-theme="dark"] h2 a,
html[data-theme="dark"] h3 a,html[data-theme="dark"] h4 a,
html[data-theme="dark"] h5 a,html[data-theme="dark"] h6 a,
html[data-theme="dark"] .item-title a,
html[data-theme="dark"] .article-title a{color:var(--dm-heading)!important;}
html[data-theme="dark"] h1 a:hover,html[data-theme="dark"] h2 a:hover,
html[data-theme="dark"] h3 a:hover,html[data-theme="dark"] h4 a:hover,
html[data-theme="dark"] .item-title a:hover{color:var(--dm-primary);}
html[data-theme="dark"] .text-muted,html[data-theme="dark"] .text-gray{color:var(--dm-muted)!important;}
html[data-theme="dark"] hr,html[data-theme="dark"] .border,
html[data-theme="dark"] [class*="border-"]{border-color:var(--dm-border)!important;}

/* ── Surfaces ─────────────────────────────────────────────────────
   ONLY the elements the template itself gives a light background in light
   mode. Selectors mirror template.css exactly, so originally-transparent
   containers (the hero .item, portfolio .item, home ACM .item-inner/.inner,
   etc.) are never repainted — they stay transparent over the navy body. */
html[data-theme="dark"] .features-item,
html[data-theme="dark"] .testimonials-item,
html[data-theme="dark"] .acm-teams.style-1 .teams-item-inner,
html[data-theme="dark"] .teams-text,
html[data-theme="dark"] .blog-item-content,
html[data-theme="dark"] .box-inner,
html[data-theme="dark"] .card:not([class*="bg-"]),
html[data-theme="dark"] .blog.type-services .items-row .item,
html[data-theme="dark"] .acm-hero .feature-list-wrap .item,
html[data-theme="dark"] .services-benefits .item .inner,
html[data-theme="dark"] .relateditems .item-inner,
html[data-theme="dark"] .author-posts .item,
html[data-theme="dark"] .contact #slide-contact .card-body,
html[data-theme="dark"] .pagination-wrap .counter,
html[data-theme="dark"] .mod-portfolio-list .item-inner,
html[data-theme="dark"] .portfolio-item{
  background-color:var(--dm-surface)!important;
  border-color:var(--dm-border)!important;
}

/* Eyebrow pill badges (e.g. "WHAT WE DO", "TESTIMONIALS") — the pill is the
   inner span (border:1px solid #000; color:#000 in light → invisible on dark). */
html[data-theme="dark"] .section-title span{
  border-color:var(--dm-muted)!important;
  color:var(--dm-text)!important;
}
html[data-theme="dark"] .section-title span:before{
  background-color:var(--dm-primary)!important;
}
html[data-theme="dark"] .badge{
  background-color:var(--dm-raised)!important;
  border-color:var(--dm-border)!important;
  color:var(--dm-muted)!important;
}

/* Decorative photos ship with a baked-in white rounded corner (~13px radius)
   from being composited on white. The template only rounds them 8px, so the
   white ring shows on the dark background. Bump the radius past the baked
   corner so it gets clipped. Round avatars (.author-avatar) are excluded. */
html[data-theme="dark"] .t4-content .item-image img,
html[data-theme="dark"] .t4-content .intro-img img,
html[data-theme="dark"] .t4-content .video-intro img,
html[data-theme="dark"] .t4-content .teams-img,
html[data-theme="dark"] .t4-content .teams-img img,
html[data-theme="dark"] .t4-content .contact-image img,
html[data-theme="dark"] .t4-content .blog-item-content .item-image img,
html[data-theme="dark"] .t4-content .gallery-wrap li img{border-radius:16px!important;}

/* Decorative light "wave" background images sit at inline opacity:1 (set by the
   layout) and would wash out the section → fade to a barely-there light sheen.
   !important is required to beat the inline opacity. */
html[data-theme="dark"] .bg-overlay-image{opacity:.05!important;filter:none!important;}

/* Card titles & body text legibility on dark surfaces */
html[data-theme="dark"] .features-item .features-title,
html[data-theme="dark"] .testimonials-item *,
html[data-theme="dark"] .teams-item-inner *,
html[data-theme="dark"] .features-item p{color:var(--dm-text);}
html[data-theme="dark"] .features-item .features-title,
html[data-theme="dark"] .teams-item-inner .teams-name{color:var(--dm-heading)!important;}

/* Icons drawn with currentColor / dark fills inside cards */
html[data-theme="dark"] .features-item svg,
html[data-theme="dark"] .features-icon,
html[data-theme="dark"] .features-item .features-icon *{color:var(--dm-heading);}
/* Dark monochrome SVG icons loaded as <img> → lift to light grey
   (scoped to icon images only, never photos). */
html[data-theme="dark"] .features-item .img-icon img,
html[data-theme="dark"] .features-icon img{filter:brightness(0) invert(.72);}

/* Carousel arrows */
html[data-theme="dark"] .cw-owl-next,
html[data-theme="dark"] .cw-owl-prev{
  background-color:var(--dm-raised)!important;color:var(--dm-heading)!important;
  border-color:var(--dm-border)!important;
}

/* Form fields */
html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select{
  background-color:var(--dm-raised);color:var(--dm-text);border-color:var(--dm-border);
}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:var(--dm-muted);}

/* Body module wrappers sometimes carry a light (#fafafa) background (e.g. the
   client-logo strip) — let the navy body show through in dark mode. */
html[data-theme="dark"] .t4-content .t4-mod-wrap{background-color:transparent!important;}

/* ── Inner-page card details ─────────────────────────────────────── */
/* Small icon chips inside contact info box (light #fafafa chips) */
html[data-theme="dark"] .t4-content .box-inner .icon{background-color:var(--dm-raised)!important;color:var(--dm-heading)!important;}
/* Tags (#F5F7FA pills) + pagination links (#FAFAFA) */
html[data-theme="dark"] .t4-content .tags > li > a{background-color:var(--dm-raised)!important;color:var(--dm-text)!important;border-color:var(--dm-border)!important;}
html[data-theme="dark"] .t4-content .pagenavigation .pagination a.page-link,
html[data-theme="dark"] .t4-content .pagenavigation .pagination a.btn{background-color:var(--dm-raised)!important;color:var(--dm-text)!important;border-color:var(--dm-border)!important;}
/* Recolour ONLY monochrome icon images — SVG icons + PNGs in an /icons/ folder.
   Photos (.jpg) and brand logos (/logo/) are never touched. Scoped to body
   content so header/footer logos are safe. */
html[data-theme="dark"] .t4-content .img-icon img,
html[data-theme="dark"] .t4-content img[src*=".svg"],
html[data-theme="dark"] .t4-content img[src*="/icons/"]{filter:brightness(0) invert(.72);}
/* Footer is dark in BOTH light and dark mode → keep it identical to the
   light-mode footer. The only thing the global rules change here is link colour
   (turned blue); restore it to the muted white the footer uses. Card bg, input,
   copyright and headings already match, so they're left untouched. */
html[data-theme="dark"] .t4-footer a:not(.btn),
html[data-theme="dark"] .t4-footer .nav-link{color:rgba(255,255,255,.6)!important;}
html[data-theme="dark"] .t4-footer a:not(.btn):hover,
html[data-theme="dark"] .t4-footer .nav-link:hover{color:#fff!important;}

/* Back-to-top button: outer frame is white (#fafafa) → use a dark surface so it
   blends with the dark page (the inner blue arrow icon is kept). */
html[data-theme="dark"] #back-to-top{
  background-color:var(--dm-surface)!important;
  border-color:var(--dm-border)!important;
}

/* Partner/client logo strip — dark monochrome PNGs made for light backgrounds.
   Invert to a muted light grey so they read on the navy background, matching the
   subtle look they have in light mode. */
html[data-theme="dark"] .client-img img,
html[data-theme="dark"] .clients-list img,
html[data-theme="dark"] .info-task-inner img{filter:brightness(0) invert(.62);}

/* Inline <svg> icons with hard-coded near-black strokes/fills (not currentColor)
   → recolour to heading. Attribute selectors match the exact icon colour only,
   so coloured logos/illustrations are never affected. */
html[data-theme="dark"] .t4-content svg [stroke="#050505"],
html[data-theme="dark"] .t4-content svg [stroke="#000"],
html[data-theme="dark"] .t4-content svg [stroke="#000000"],
html[data-theme="dark"] .t4-content svg [stroke="black"]{stroke:var(--dm-heading)!important;}
html[data-theme="dark"] .t4-content svg [fill="#050505"],
html[data-theme="dark"] .t4-content svg [fill="#000"],
html[data-theme="dark"] .t4-content svg [fill="#000000"],
html[data-theme="dark"] .t4-content svg [fill="black"]{fill:var(--dm-heading)!important;}
/* Headings on inner cards */
html[data-theme="dark"] .t4-content .box-inner .box-title{color:var(--dm-heading)!important;}

/* Blog/category list: author meta text, card borders, pagination */
html[data-theme="dark"] .t4-content .article-info .createdby span,
html[data-theme="dark"] .t4-content .article-info .createdby a,
html[data-theme="dark"] .t4-content .article-info .createdby{color:var(--dm-muted)!important;}
html[data-theme="dark"] .t4-content .item{border-color:var(--dm-border)!important;}
html[data-theme="dark"] .t4-content .page-link{
  background-color:var(--dm-surface)!important;
  border-color:var(--dm-border)!important;
  color:var(--dm-text)!important;
}
html[data-theme="dark"] .t4-content .page-item.active .page-link,
html[data-theme="dark"] .t4-content .page-link:hover{
  background-color:var(--dm-primary)!important;
  border-color:var(--dm-primary)!important;
  color:#fff!important;
}

/* Article blockquotes (#FAFAFA) */
html[data-theme="dark"] .t4-content blockquote,
html[data-theme="dark"] .t4-content .blockquote{
  background-color:var(--dm-surface)!important;
  color:var(--dm-text);
  border-color:var(--dm-border)!important;
}
/* .bg-light / .bg-white utility surfaces (e.g. logo strip) → let navy show */
html[data-theme="dark"] .t4-content .bg-light,
html[data-theme="dark"] .t4-content .bg-white{background-color:transparent!important;}
/* Tables */
html[data-theme="dark"] .t4-content table,
html[data-theme="dark"] .t4-content .table{color:var(--dm-text);border-color:var(--dm-border);}
html[data-theme="dark"] .t4-content .table>:not(caption)>*>*{background-color:var(--dm-surface);border-color:var(--dm-border);color:var(--dm-text);}
/* Rich-text editor shell (TinyMCE) — best-effort on the outer chrome */
html[data-theme="dark"] .t4-content .mce-tinymce,
html[data-theme="dark"] .t4-content .tox-tinymce{border-color:var(--dm-border)!important;}

/* ── Standalone error.php / offline.php pages ────────────────────── */
html[data-theme="dark"] body.error-page,
html[data-theme="dark"] body.offline{background-color:var(--dm-bg)!important;color:var(--dm-text)!important;}
html[data-theme="dark"] body.error-page .error-code,
html[data-theme="dark"] body.error-page .error-msg h2,
html[data-theme="dark"] body.offline h1,
html[data-theme="dark"] body.offline .offline-header h1{color:var(--dm-heading)!important;}
html[data-theme="dark"] body.error-page .error-other-info p,
html[data-theme="dark"] body.offline .offline-message,
html[data-theme="dark"] body.offline label{color:var(--dm-text)!important;}
html[data-theme="dark"] body.offline #frame,
html[data-theme="dark"] body.offline .form-wrap{background-color:var(--dm-surface)!important;border-color:var(--dm-border)!important;}

/* ── Mega menu / nav dropdowns (header — outside .t4-content) ─────── */
html[data-theme="dark"] .t4-megamenu .dropdown-menu,
html[data-theme="dark"] .mega-dropdown-menu{
  background-color:var(--dm-surface)!important;
  border-color:var(--dm-border)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.45)!important;
}
/* Column titles → heading colour */
html[data-theme="dark"] .mega-dropdown-menu .mega-col-title,
html[data-theme="dark"] .mega-dropdown-menu .mega-col-title span,
html[data-theme="dark"] .mega-dropdown-menu h2,
html[data-theme="dark"] .mega-dropdown-menu h3,
html[data-theme="dark"] .mega-dropdown-menu h4{color:var(--dm-heading)!important;}
/* Links */
html[data-theme="dark"] .t4-megamenu .dropdown-menu .nav-link,
html[data-theme="dark"] .mega-dropdown-menu .nav-link,
html[data-theme="dark"] .mega-dropdown-menu a{color:var(--dm-text)!important;}
html[data-theme="dark"] .t4-megamenu .dropdown-menu .nav-link:hover,
html[data-theme="dark"] .mega-dropdown-menu .nav-link:hover,
html[data-theme="dark"] .mega-dropdown-menu a:hover{color:var(--dm-primary)!important;}
/* Any light wrapper/column inside the dropdown → transparent (let panel show) */
html[data-theme="dark"] .mega-dropdown-menu .mega-inner,
html[data-theme="dark"] .mega-dropdown-menu .mega-col-nav,
html[data-theme="dark"] .mega-dropdown-menu .mega-group{background-color:transparent!important;border-color:var(--dm-border)!important;}
/* Featured column has a light-blue gradient drawn via a 2000px-wide ::before that
   fills the right side of the panel. Recolour it to a distinctly lighter, faintly
   blue dark panel so the right section stays visible (not blended into the panel). */
html[data-theme="dark"] .mega-dropdown-menu [class*="mega-sub"]::before{
  background:linear-gradient(-180deg, #232e45 0%, #1a2331 100%)!important;
}

/* ════════ Multi-page audit fixes ════════════════════════════════ */
/* FAQ accordion toggle: collapsed circle is light grey (#F0F1F2) with a light
   '+' icon → invisible. Darken the circle (only the collapsed state, so the
   open blue '−' circle is untouched). */
html[data-theme="dark"] .accordion-button.collapsed::after{
  background:var(--dm-raised)!important;color:var(--dm-heading)!important;
}
/* Decorative step numbers (01/02/03): the number fades into the card via a
   ::before gradient that was hard-coded to #fafafa (a bright chip on dark).
   Fade into the dark surface instead, and give the number a soft primary tint. */
html[data-theme="dark"] .services-benefits .item .number{color:#5b9dff!important;}
html[data-theme="dark"] .services-benefits .item .number::before{
  background:linear-gradient(to top, var(--dm-surface) 0%, transparent 70%)!important;
}


/* Light borders on cards / dividers / sections → dark border */
html[data-theme="dark"] .t4-content .list-special li,
html[data-theme="dark"] .t4-content .item-page ul.list-special li + li,
html[data-theme="dark"] .t4-content .section-accordion,
html[data-theme="dark"] .t4-content .accordion-item,
html[data-theme="dark"] .t4-content .t4-typo-example,
html[data-theme="dark"] .t4-content .testimonials-statics,
html[data-theme="dark"] .t4-content .info-task-inner,
html[data-theme="dark"] .t4-content .info-detail > li + li,
html[data-theme="dark"] .t4-content .login-wrap,
html[data-theme="dark"] .t4-content .com-users-registration.registration,
html[data-theme="dark"] .t4-content .author-about-me{border-color:var(--dm-border)!important;}

/* com_users reset / remind views: white card → dark surface */
html[data-theme="dark"] .t4-content .com-users-reset,
html[data-theme="dark"] .t4-content .com-users-remind{
  background-color:var(--dm-surface)!important;border-color:var(--dm-border)!important;
}

/* Social share buttons (white bg pills) */
html[data-theme="dark"] .t4-content .ja-button-share a,
html[data-theme="dark"] .t4-content .ja-button-list a,
html[data-theme="dark"] .t4-content a.button-facebook,
html[data-theme="dark"] .t4-content a.button-twitter,
html[data-theme="dark"] .t4-content a.button-linkedin,
html[data-theme="dark"] .t4-content a.button-whatsapp{
  background-color:var(--dm-surface)!important;border-color:var(--dm-border)!important;color:var(--dm-text)!important;
}

/* Finder/search module: the search-submit icon renders faint grey on dark and
   ignores colour overrides (Joomla icon quirk) → brighten via filter so it's
   clearly visible. */
html[data-theme="dark"] .mod-finder .btn,
html[data-theme="dark"] .mod-finder .icon-search,
html[data-theme="dark"] .finder .icon-search{
  color:var(--dm-heading)!important;opacity:1!important;
  filter:brightness(2.2) contrast(1.1)!important;
}

/* Popular Tags module pills */
html[data-theme="dark"] .t4-content .tagspopular ul li{background:var(--dm-raised)!important;border-color:var(--dm-border)!important;}
html[data-theme="dark"] .t4-content .tagspopular ul li a{color:var(--dm-text)!important;}

/* Author listing cards, name overlay, share circle */
html[data-theme="dark"] .t4-content .author{background-color:var(--dm-surface)!important;border-color:var(--dm-border)!important;}
html[data-theme="dark"] .t4-content .author-other-info{background-color:rgba(15,20,28,.82)!important;}
html[data-theme="dark"] .t4-content .ic-share{background-color:var(--dm-raised)!important;color:var(--dm-heading)!important;}

/* Bootstrap .form-control beats the generic input rule (login/registration) */
html[data-theme="dark"] .t4-content input.form-control,
html[data-theme="dark"] .t4-content textarea.form-control,
html[data-theme="dark"] .t4-content select.form-control{
  background-color:var(--dm-raised)!important;color:var(--dm-text)!important;border-color:var(--dm-border)!important;
}
/* Registration fieldset legend + TinyMCE status bar */
html[data-theme="dark"] .t4-content legend{background-color:var(--dm-bg)!important;color:var(--dm-heading)!important;}
html[data-theme="dark"] .t4-content .tox-statusbar{background-color:var(--dm-surface)!important;border-color:var(--dm-border)!important;color:var(--dm-muted)!important;}
html[data-theme="dark"] .t4-content .tox-statusbar__wordcount,
html[data-theme="dark"] .t4-content .tox-statusbar a{color:var(--dm-muted)!important;}

/* Low-contrast / dark text */
html[data-theme="dark"] .t4-content .createdby [itemprop="name"]{color:var(--dm-muted)!important;}
html[data-theme="dark"] .t4-content .author-title{color:var(--dm-muted)!important;}
html[data-theme="dark"] .t4-content .statics-number,
html[data-theme="dark"] .t4-content .btn-readmore{color:var(--dm-primary)!important;}

/* Bootstrap utility buttons that turn light / near-black in dark mode */
html[data-theme="dark"] .btn-light{background-color:var(--dm-surface)!important;border-color:var(--dm-border)!important;color:var(--dm-text)!important;}
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-dark,
html[data-theme="dark"] .btn-outline-light{color:var(--dm-text)!important;border-color:var(--dm-border)!important;}
html[data-theme="dark"] .btn-close{filter:invert(1) grayscale(1) brightness(1.6)!important;}
/* Demo .bg-light cards (typography) keep a readable surface */
html[data-theme="dark"] .card.bg-light{background-color:var(--dm-surface)!important;}
html[data-theme="dark"] .card.bg-light .text-dark,
html[data-theme="dark"] .card.bg-light.text-dark{color:var(--dm-text)!important;}

/* ── Toggle button — visible in BOTH modes ───────────────────────── */
/* No border; a soft round chip that adapts to any header context. Icon colour
   follows the nav-link colour (white over the home hero, dark on solid headers). */
.t4-theme-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:.5rem;padding:0;border:0;border-radius:50%;background:rgba(127,140,160,.12);color:var(--mainnav-link-color,#212529);cursor:pointer;line-height:0;flex:0 0 auto;overflow:hidden;transition:background .25s ease,transform .2s ease;}
.t4-theme-toggle:hover{background:rgba(127,140,160,.22);transform:translateY(-1px);}
.t4-theme-toggle:active{transform:scale(.9);}
.t4-theme-toggle:focus-visible{outline:2px solid var(--dm-primary,#3b8bff);outline-offset:2px;}
/* Both icons stacked & cross-fade with a rotate/scale spring when theme flips */
.t4-theme-toggle svg{position:absolute;width:20px;height:20px;transition:opacity .3s ease,transform .5s cubic-bezier(.34,1.56,.64,1);}
.t4-theme-toggle__moon{opacity:1;transform:rotate(0) scale(1);}
.t4-theme-toggle__sun{opacity:0;transform:rotate(-90deg) scale(.3);}
html[data-theme="dark"] .t4-theme-toggle__moon{opacity:0;transform:rotate(90deg) scale(.3);}
html[data-theme="dark"] .t4-theme-toggle__sun{opacity:1;transform:rotate(0) scale(1);}