/* Navbar stability fix.
   Divi's mirrored header has three flicker triggers on Windows:
     1. A 0.4s transition on background-color/transform/opacity on #main-header.
        Any class flip (e.g. .et-fixed-header) re-animates the bar, and on
        Windows the wheel-step scroll repeatedly crosses the trigger, so the
        bar fades in/out continuously.
     2. #et-top-navigation animates its padding-top between 33px and 20px
        between the top/fixed states — causes layout shift in the header.
     3. body.et_smooth_scroll enables Divi's JS inertial scroll, which fights
        the native scroll on Windows and produces visible jitter that reads
        as nav flicker.
   We don't toggle any classes — we just kill the transitions, lock the
   geometry, and promote the header to its own GPU layer so paints are
   cheap. Disabling smooth-scroll is the JS counterpart (see main.js shim
   loaded after this file). */

#main-header,
#main-header *,
#et-top-navigation,
#et-top-navigation * {
  transition: none !important;
  -webkit-transition: none !important;
  animation: none !important;
}

#main-header {
  /* Stable compositing layer — prevents per-pixel repaint on scroll. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  /* Lock the bar against scroll-driven hide/show animations Divi sometimes
     applies via the fadeOutTop keyframe. */
  opacity: 1 !important;
}

/* Lock the bar to its "scrolled / et-fixed-header" state at every scroll
   position. The two designed states (transparent-over-hero vs solid-white)
   were being toggled rapidly by Divi's scroll JS, producing the white-flash
   flicker. We force the solid-white state always — readable on every page
   and consistent across scroll position. */
#main-header,
#main-header.et-fixed-header,
#main-header .nav li ul,
.et-search-form {
  background-color: rgba(255, 255, 255, 0.99) !important;
}
#main-header {
  /* Slight shadow so the bar reads as elevated against page content. */
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) !important;
}
/* Menu text → dark, current page → brand teal. */
#top-menu a,
#et-top-navigation .et-cart-info,
#et_search_icon:before,
.et_search_form_container input,
.et_close_search_field:after {
  color: #222222 !important;
}
#top-menu li.current-menu-ancestor > a,
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a {
  color: #01b1ae !important;
}
/* Logo → green/dark variant (the one Divi was swapping in on scroll). */
#logo {
  content: url(/_assets/emat.me/wp-content/uploads/2023/02/completoWebVerde.png) !important;
}

/* Lock nav padding to a single value so the fixed-header padding swap
   can't shift the header height under us. */
@media all and (min-width: 981px) {
  .et_header_style_left #et-top-navigation,
  .et_header_style_left #main-header.et-fixed-header #et-top-navigation {
    padding-top: 33px !important;
  }
  .et_header_style_left #et-top-navigation nav > ul > li > a,
  .et_header_style_left #main-header.et-fixed-header #et-top-navigation nav > ul > li > a {
    padding-bottom: 33px !important;
  }
}

/* Native scrolling only — Divi's smooth-scroll JS produces jitter on
   Windows mouse wheels. */
html {
  scroll-behavior: auto !important;
  /* Reserve scrollbar space so opening/closing modals or the cookie banner
     doesn't shift the viewport (Windows scrollbar is 15-17px and visible). */
  scrollbar-gutter: stable;
}

/* Mobile hamburger menu. The original Divi JS that toggles "opened" doesn't
   run on the mirror, so we wire it ourselves in nav-fix.js. Divi's stock CSS
   has no .mobile_nav.opened rule either — define the show state here. */
.mobile_nav.opened .et_mobile_menu {
  display: block !important;
}
.mobile_menu_bar,
.mobile_menu_bar_toggle {
  /* Ensure the hamburger has a real hit target — :before pseudo content is the
     icon but pointer events should reach the span itself. */
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}