/**
 * Global CSS
 * -----------------------------------------------------------------------
 * Site-wide styles loaded on every page.
 * Covers: header, sticky nav, inner-page anchor nav, misc page overrides.
 * -----------------------------------------------------------------------
 */


/* ==========================================================================
   Header & Navigation
   Used on: every page — .header-main-nav is the sticky top header section
   ========================================================================== */

/* Nav title color override — colors "Products" label orange in the header DCE widget (rendering ID 9) */
.dce-elementor-rendering-id-9 .nav-title { color: var(--e-global-color-secondary) !important; }

/* Header height + background — 80px default, shrinks to 55px + dark bg when sticky */
.header-main-nav { background-color: #fff; height: 80px; transition: height .45s cubic-bezier(.4, 0, .2, 1), background-color 0.3s ease; }
.header-main-nav.elementor-sticky--effects { height: 55px; background-color: var(--e-global-color-primary) !important; }

/* Invert logo, hamburger, and nav icons to white when header turns dark on scroll */
.header-main-nav.elementor-sticky--effects .micro-logo-header { filter: invert(100%) saturate(0%) brightness(100%) contrast(1000%) !important; }
.header-main-nav.elementor-sticky--effects .hamburger { filter: invert(100%) saturate(0%) brightness(100%) contrast(1000%) !important; }
.header-main-nav.elementor-sticky--effects .main-nav { filter: invert(100%) saturate(0%) brightness(100%) contrast(1000%) !important; }

/* Logo sizing — full size default, crops to icon-only when sticky */
.micro-logo-header img { max-width: 100%; transition: all 0.5s ease; }
.header-main-nav.elementor-sticky--effects .micro-logo-header img { max-width: 54px !important; min-height: 60px !important; overflow: hidden !important; object-fit: cover !important; object-position: 0% 12px; }

/* Nav text colors when header is dark */
.header-main-nav.elementor-sticky--effects .e-n-menu-title-text { color: #fff !important; }
.header-main-nav.elementor-sticky--effects .e-n-menu-title-text:hover { color: var(--e-global-color-secondary) !important; }

/* Mobile mega menu — removes top/bottom margin on icon box titles, hides descriptions to save space */
@media only screen and (max-width: 600px) {
    .main-mega-container .elementor-icon-box-title { margin-block-start: 0em !important; margin-block-end: 0em !important; }
    .elementor-icon-box-description { display: none; }
}

/* Mobile Resources accordion — hides the expand/collapse icon in the mobile nav Resources section */
#mobile-nav-resources .e-n-accordion-item-title-icon { display: none !important; }


/* ==========================================================================
   Inner Page Anchor Navigation
   Used on: product pages and any page using Elementor Menu Anchor widget
   — creates offset so anchor links scroll to the correct position below the sticky header
   ========================================================================== */

/* Raises z-index so anchor is above other elements */
body:not(.elementor-editor-active) .elementor-widget-menu-anchor { position: relative; z-index: 80; }

/* Creates 200px invisible block above the anchor to offset the sticky header height */
body:not(.elementor-editor-active) .elementor-menu-anchor:before { content: ""; display: block; height: 200px; margin: -200px 0 0; visibility: hidden; pointer-events: none; }

/* Products sub-nav — horizontal pill nav used on single product pages */
.products-sub-nav li { float: left; margin-right: 30px; }
.products-sub-nav .e-font-icon-svg { display: none !important; }

/* .box card — glow/shadow effect used on product and home cards */
.box:before { content: ""; z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(75deg, rgba(255,255,255,0) 0, rgba(0,0,0,0.5), rgba(255,255,255,0) 100%); transform: translate3d(0, 20px, 0); filter: blur(10px); opacity: 0.7; transition: opacity 0.3s; border-radius: inherit; }
.box::after { content: ""; z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: inherit; border-radius: inherit; }

/* Table of Contents widget — indent for list items inside TOC (used on long documentation pages) */
.elementor-toc__list-item { margin: 5px 30px; }


/* ==========================================================================
   Global Utilities
   Used on: all pages
   ========================================================================== */

/* Hero sections — full cover background used across page heroes site-wide */
.page-hero { background-size: cover !important; background-position: center center !important; }

/* h3 reset — removes Elementor default top margin from all h3 headings globally */
h3 { margin-block-start: 0em !important; }

/* Swiper overflow fix — prevents horizontal scroll bleed on swiper/carousel containers */
.swiper-backface-hidden,
.swiper-container { overflow: hidden !important; }

/* VWO A/B testing tool — removes border-radius added by VWO scripts */
.vwo_loaded { border-radius: 0 !important; }
.acc_head { background: none !important; }

/* Weglot language selector — inverts the dropdown arrow to white so it's visible on dark backgrounds */
.country-selector.weglot-dropdown .wgcurrent:after { filter: invert(1) brightness(2); }


/* ==========================================================================
   Misc Page Overrides
   ========================================================================== */

/* Net Zero — page #3807 (/net-zero/)
   Fixes the side-scroll nav item colors and underline width */
.page-id-3807 .nav__item-title { color: #fff; opacity: 1 !important; padding: 0 50px 0 0 !important; }
.page-id-3807 .nav__item,
.page-id-3807 .nav__item--current,
.page-id-3807 .nav__item--current:active,
.page-id-3807 .nav__item:active { color: rgba(250, 156, 28, 0) !important; }
.page-id-3807 .nav__item::before { width: 30% !important; }

/* Takeback & Recycle — page #4223 (/takeback/)
   List indent, heading color, and country link color */
.page-id-4223 ul { padding-inline-start: 18px; }
.page-id-4223 h3 { color: var(--e-global-color-primary); }
.page-id-4223 .take-countries a { color: var(--e-global-color-primary); }

/* Services & Repairs — page #2063 (/services-repairs/)
   Mobile only: forces the 2-tab widget into a side-by-side row (50% each) instead of stacking */
@media (max-width: 600px) {
    .page-id-2063 .e-n-tabs-heading { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; }
    .page-id-2063 .e-n-tab-title { max-width: 50% !important; }
}

/* Technology Pages — /density/, /gas-adsorption/, etc.
   .density-flip-box — reduces flip card image size on mobile for the Density technology page */
@media (max-width: 768px) {
    .density-flip-box .elementor-flip-box__image { width: 120px; }
}


/* Smart Prep Systems — .smart-prep-hero class used on the Smart Prep page hero section
   Shifts background image position at smaller viewports so the instrument stays visible */
@media (max-width: 1024px) { .smart-prep-hero { background-position: -900px !important; } }
@media (max-width: 768px)  { .smart-prep-hero { background-position: -1080px !important; } }
@media (max-width: 600px)  {
    .smart-prep-hero .elementor-widget-container,
    .smart-prep-hero h1 { color: #fff !important; }
    .smart-prep-hero { background-position: -1400px !important; }
}