/* =========================================================================
   Belver theme layer
   Palette + typography derived from belver.com.au:
     --black #101010   --white #ffffff   --belo-green #dde8c9
   Loaded last. Structure, layout and motion are untouched; this file only
   corrects colour roles that flip when the site goes from light to dark.
   ========================================================================= */

/* ---- 1. Page ground -------------------------------------------------- */
html,
body {
  background-color: var(--blv-black);
  color: var(--tj-color-text-body);
}

/* ---- 2. Typography --------------------------------------------------- */
/* Belver sets headings at weight 600 with -0.02em tracking and 130% leading.
   Body leading is deliberately NOT tightened here: the methodology, privacy
   and report pages carry long prose and need their existing looser measure. */
h1, h2, h3, h4, h5, h6,
.sec-title,
.title {
  letter-spacing: -0.02em;
}

/* ---- 3. Dark text on accent fills ------------------------------------
   #dde8c9 is a pale sage. Bexon used a mid-tone teal here and put white text
   on it; on sage that would be ~1.3:1 and unreadable. The selectors below are
   every place in main.css where a now-light foreground sits on an accent fill
   AND the component actually renders on one of the seven live pages.
   Contrast after the flip: 15.2:1. */
.blog-item .blog-content .categories a:hover,
.blog-item.style-3 .blog-meta .categories a:hover,
.categories a:hover,
.choose-box:hover .btn-text,
.choose-box:hover .choose-icon,
.choose-box:hover .desc,
.choose-box:hover .title,
.client-content .client-numbers,
.cta-area .cta-content .title,
.customers ul li:last-child span,
.customers-box.style-2 .customers-text,
.h5-maquee-inner .h5-maquee-slider-item .marquee-box .marquee-icon,
.h5-maquee-inner .h5-maquee-slider-item .marquee-box .marquee-title .title,
.h9-choose-box.choose-box .choose-icon,
.h9-cta-section .cta-content .title .cta-img a i,
.h9-testimonial-heading .sec-heading .sec-title,
.h9-testimonial-heading .sec-heading .sub-title,
.mainmenu ul > li > .mega-menu .mega-menu-badge,
.mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .feature-contact i,
.mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .feature-contact span,
.mainmenu ul > li > .mega-menu-service-single:hover .mega-menu-service-icon,
.mobile_menu ul > li > .mega-menu .mega-menu-badge,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .feature-contact i,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .feature-contact span,
.mobile_menu ul > li > .mega-menu-service-single:hover .mega-menu-service-icon,
.project-slider .project-item .project-content .categories a:hover,
.rating-box .rating-text,
.rating-box .star-ratings .fill-ratings,
.rating-box .title,
.service-item.style-3:hover .service-icon i,
.service-item.style-3:hover .title,
.slider-next:hover,
.slider-prev:hover,
.social-links ul li a:hover i,
.social-links.style-3 ul li a:hover i,
.team-item .mail-at:hover,
.team-item .social-links ul li a:hover i,
.tj-choose-section .countup-item.style-2 .count-icon,
.tj-faq.style-2 .accordion-item.active .accordion-body p,
.tj-faq.style-2 .accordion-item.active .faq-title,
.tj-faq.style-2 .accordion-item.active .faq-title::after,
.tj-primary-btn .btn-icon i,
.tj-primary-btn .btn-text,
.tji-icon-btn:hover i,
.widget-nav-menu ul li a .badge {
  color: var(--blv-black);
}

/* SVG icons inside the primary button need telling explicitly. */
.tj-primary-btn .btn-icon svg [stroke]:not([stroke="none"]) {
  stroke: var(--blv-black);
}
.tj-primary-btn .btn-icon svg [fill]:not([fill="none"]) {
  fill: var(--blv-black);
}

/* ---- 4. Accent hover state ------------------------------------------- */
.tj-primary-btn:hover {
  background-color: #c9d9ab;
  border-color: #c9d9ab;
}

/* ---- 5. Preloader ---------------------------------------------------- */
.preloader,
#preloader {
  background-color: var(--blv-black);
}

/* ---- 6. Form controls ------------------------------------------------ */
/* Native controls default to a light UA palette; opt them into dark so
   dropdowns, checkboxes and autofill do not flash white. */
input,
select,
textarea {
  color-scheme: dark;
}

/* ---- 7. Selection + scrollbar ---------------------------------------- */
::selection {
  background: var(--blv-sage);
  color: var(--blv-black);
}
::-webkit-scrollbar-track {
  background: var(--blv-black);
}

/* ---- 8. Focus visibility --------------------------------------------- */
/* Sage on near-black is the most legible focus indicator available here. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blv-sage);
  outline-offset: 3px;
}

/* ---- 9. Foreground restores ------------------------------------------
   grey-1 (#ecf0f0), theme-bg (#d8e5e5) and theme-dark-2 were LIGHT values in
   the original light theme, used both as pale chip backgrounds and as pale
   text on dark bands. They are now dark surfaces, which is right for the
   background role but would render these foregrounds invisible. */
.h9-header.header-absolute .header-search .search,
.h9-header.header-absolute .header-search .search_close_btn,
.blog-item.style-3 .blog-meta span a,
.social-links ul li a i,
.hamburger_close_btn:hover,
.tj-copyright-area-2 .copyright-text a:hover,
.customers-box.style-3 .customers-text span,
.copyright-content-area .copyright-text a,
.slider-next .anim-icon i,
.slider-prev .anim-icon i,
.hero-navigation .slider-next .anim-icon i:last-child,
.hero-navigation .slider-prev .anim-icon i:last-child {
  color: var(--blv-white);
}

/* Those arrow chips gain a sage fill on hover, so the glyph must flip back to
   dark. Higher specificity than the restore above, so order is not relied on. */
.slider-next:hover .anim-icon i,
.slider-prev:hover .anim-icon i,
.hero-navigation .slider-next:hover .anim-icon i:last-child,
.hero-navigation .slider-prev:hover .anim-icon i:last-child {
  color: var(--blv-black);
}

/* ---- 10. White surfaces -> dark surfaces -----------------------------
   main.css uses --tj-color-common-white as a CARD background in 52 live
   places, and fills many of those cards with sage or dark content. Left
   white they would be blank tiles on a dark page (sage on white is ~1.3:1).
   1px rules, hamburger bars and chips that hold dark icons stay white. */

/* page-level header bars sit on the ground */
.header-area,
.header-area.header-1 .header-wrapper,
.header-area.header-duplicate {
  background-color: var(--blv-black);
}

/* cards and panels */
.blog-item .blog-content,
.blog-item.style-2,
.choose-box,
.client-logo,
.contact-item.style-2,
.countup-item.style-2,
.customers-box,
.h5-maquee-inner-rtl,
.h9-blog-wrapper .blog-item.h5-blog-item .blog-date,
.h9-choose-box.choose-box,
.h9-choose-box.customers-box,
.h9-project-wrapper .project-item .project-content,
.h9-team-item-wrap .team-item,
.h9-team-item-wrap .team-item:hover .designation,
.h9-testimonial .testimonial-item,
.mainmenu ul > li > .sub-menu,
.mission-vision-box,
.process-item,
.project-item,
.sec-heading.style-2 .sub-title,
.service-item,
.social-links.style-2 ul li a,
.social-links.style-3 ul li a,
.team-item .mail-at,
.testimonial-slider-2 .testimonial-item,
.tj-blog-section-2 .sec-heading-wrap .sub-title,
.tj-working-process .sec-heading-wrap .sub-title {
  background-color: var(--blv-surface);
}

/* form fields read as inset */
.h9-header.header-absolute .search_popup .tj_search_wrapper .search_form form .search_input .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]),
.h9-header.header-absolute .search_popup .tj_search_wrapper .search_form form .search_input .search-box input[type=text],
.hamburger_search input,
.hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox]),
.hamburger_search select,
.header-area.header-2.header-absolute .search_popup .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]),
.header-area.header-2.header-absolute .search_popup .search-box input[type=text],
.search_popup {
  background-color: var(--blv-surface-2);
  color: var(--blv-white);
}

/* Left white deliberately: 1px rules -> .h6-client-title::after, .h6-client-title::before, .h9-hero-desc-area .desc-inner .desc a::after, .h9-testimonial-heading .sec-heading .sub-title::before, .process-item:not(:last-child)::after */
/* Left white deliberately: dark-content chips -> .customers ul li img, .h9-team-item-wrap .team-item:hover .text-btn .btn-icon, .header-2.header-absolute .menu_bar span, .hero-navigation .slider-next:hover, .hero-navigation .slider-prev:hover, .menu_bar.mobile_menu_bar span, .process-item .process-step, .tj-demo-button .tj-primary-btn, .tj-primary-btn.btn-dark .btn-icon */

/* ---- 11. Decorative template artwork ---------------------------------
   Everything the template used for "depth" was a gradient in disguise: the
   teal blur-blobs, the soft-shaded isometric artwork, the page-header
   texture and two 50px-blurred sage rectangles. On a flat design they are
   gradients that CSS alone could not reach, so they are switched off rather
   than recoloured. What remains is the flat #101010 ground.
   Real photography under assets/images/integrated/ is untouched. */
.h9-hero-bg-image,
.h9-choose-box.h9-choose-bg,
.cta-bg,
.page-header-overlay,
.research-template-page .tj-page-header {
  background-image: none;
  background-color: var(--blv-black);
}
.page-header-overlay {
  display: none;
}

/* Two sage rectangles blurred to 50px: the bloom behind the off-canvas menu
   and the one behind the footer's first column. */
.hamburger_wrapper::before,
.tj-footer-section.footer-2 .footer-col-1::before,
.footer-widget.footer-col-1::before {
  display: none;
}

/* Catch-all: any decorative element blurred into a soft bloom is, visually,
   a radial gradient. Kept to decorative layers only so real UI blur (the
   sticky-header backdrop) is unaffected. */
[class*="shape"],
[class*="blur"],
[class*="glow"] {
  filter: none;
}

/* .cta-img is an <img>, not a background layer, so it needs a filter. */
.cta-area .cta-img img {
  filter: grayscale(1);
}

/* ---- 12. Corrections found by the rendered contrast audit -------------
   Three cases where an accent fill is NOT actually present, so the dark
   text applied in section 3 would have been dark-on-dark. */

/* (a) The second marquee row carries both .h5-maquee-inner and
   .h5-maquee-inner-rtl. The -rtl rule wins the background (a surface, not
   the accent), so its label must stay light. Original design put the accent
   colour on this row's text, which is exactly right on a dark band. */
.h5-maquee-inner.h5-maquee-inner-rtl .h5-maquee-slider-item .marquee-box .marquee-title .title,
.h5-maquee-inner.h5-maquee-inner-rtl .h5-maquee-slider-item .marquee-box .marquee-icon {
  color: var(--blv-sage);
}

/* (b) research-template pages give .cta-area a lifted surface rather than
   the accent, so its heading stays white. */
.research-template-page .cta-area .cta-content .title,
.research-template-page .cta-area .title {
  color: var(--blv-white);
}

/* (c) Bootstrap's accordion is driven by its own custom properties, which
   default to a white panel with a pale-blue active state. Retint them. */
.accordion {
  --bs-accordion-color: var(--tj-color-text-body);
  --bs-accordion-bg: transparent;
  --bs-accordion-btn-color: var(--blv-white);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-color: var(--blv-white);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-border-color: var(--blv-line);
  --bs-accordion-btn-focus-border-color: var(--blv-sage);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(221, 232, 201, 0.28);
}
.accordion-body,
.accordion-body p {
  color: var(--tj-color-text-body);
}

/* ---- 13. /ampt header nav -------------------------------------------
   index-9's header shipped a Bexon mega menu: 130 links to demo pages that
   are never deployed. ampt-research.css already hid that menu from users
   (.h9-header .menu-area { display:none }), so the links were invisible but
   still present in the HTML and followed by crawlers. The markup is now the
   same three AMPT links the other pages use, kept as a ul/li list so
   meanmenu can build the mobile drawer from #mobile-menu.

   The container stays hidden, as the original AMPT build intended: /ampt is
   a landing page whose header is deliberately just the wordmark and the
   survey CTA. Methodology, Privacy and Report remain reachable from the
   footer on every page. Styling is defined here so the nav is correct if it
   is ever shown. */
.ampt-menu-area .mainmenu > ul {
  align-items: center;
  display: flex;
  gap: clamp(18px, 2.4vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ampt-menu-area .mainmenu > ul > li {
  margin: 0;
  padding: 0;
}
.ampt-menu-area .mainmenu > ul > li > a {
  color: var(--blv-muted);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition: color 140ms ease;
}
.ampt-menu-area .mainmenu > ul > li > a:hover,
.ampt-menu-area .mainmenu > ul > li > a[aria-current="page"] {
  color: var(--blv-sage);
}

/* ---- 14. Soft shadows -> flat hairlines -------------------------------
   A blurred drop-shadow is a radial gradient painted outside the box. The
   sticky headers and the off-canvas panel used one to separate themselves
   from the page; a 1px line does the same job with no gradation. */
.header-area.header-2,
.header-area.header-3,
.header-area.header-duplicate {
  box-shadow: none;
  border-bottom: 1px solid var(--blv-line);
}
.tj-offcanvas-area {
  box-shadow: none;
  border-left: 1px solid var(--blv-line);
}

/* ---- 15. Breadcrumb link ---------------------------------------------
   .tj-page-link sits on a 10%-white chip. Its link colour was 45% white,
   which lands at 4.20:1 — under the 4.5:1 AA floor for body text. It was
   previously unmeasurable because the page-header carried a background
   image; flattening that header exposed it. */
.tj-page-link span a {
  color: var(--blv-muted);
}
.tj-page-link span a:hover {
  color: var(--blv-white);
}