/*
 * Loaded after css/color/color-2.css so home hero nav is transparent on first paint.
 * (custom.css loads before the color skin; late JS alone leaves a visible flash.)
 */
html.js body.page-home:not(.hh-home-nav-fixed) #menu-1:not(:has(.menu-mobile-collapse-trigger.active)) > .menu-list-items,
html.js body.page-home:not(.hh-home-nav-fixed) #menu-1:not(:has(.menu-mobile-collapse-trigger.active)) > .menu-list-items .container-fluid,
html.js body.page-home:not(.hh-home-nav-fixed) #menu-1:not(:has(.menu-mobile-collapse-trigger.active)) > .menu-list-items .container-fluid .row,
html.js body.page-home:not(.hh-home-nav-fixed) #menu-1:not(:has(.menu-mobile-collapse-trigger.active)) > .menu-list-items .container-fluid .col-sm-12 {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.js body.page-home:not(.hh-home-nav-fixed):not(:has(#menu-1 .menu-mobile-collapse-trigger.active)) header.header-01.white-transparent,
html.js body.page-home:not(.hh-home-nav-fixed):not(:has(#menu-1 .menu-mobile-collapse-trigger.active)) #menu-1.mega-menu {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/*
 * Inner pages: color-2.css (loads before this file) paints link :before/:after and hover states
 * teal (#09767c) on .mega-menu — reads as “brand color over white”. Home hides pseudos in custom.css;
 * repeat for non-home and pin an opaque white bar after the skin.
 */
/* Use header.header-01 (not only .white-transparent) so AR pages match too */
html.js body:not(.page-home) header.header-01 .mega-menu > .menu-list-items,
html.js body:not(.page-home) header.header-01 .mega-menu > .menu-list-items .container-fluid,
html.js body:not(.page-home) header.header-01 .mega-menu > .menu-list-items .container-fluid .row,
html.js body:not(.page-home) header.header-01 .mega-menu > .menu-list-items .container-fluid [class*="col-"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

html.js body:not(.page-home) header.header-01 .mega-menu .menu-links > li > a:before,
html.js body:not(.page-home) header.header-01 .mega-menu .menu-links > li > a:after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
}

/* Mobile: color-2 @media max-width 992px — keep bar opaque white */
html.js body:not(.page-home) header.header-01 .mega-menu:not(.desktopTopFixed):not(.mobileTopFixed) > .menu-list-items {
  background: #ffffff !important;
}

/*
 * Inner pages: theme breadcrumb blocks use ~200px+ top padding for a header that overlaps the banner.
 * Our header sits in normal document flow, so that reads as a huge empty strip (often wrong color
 * because .iq-over-black-70:before uses z-index:-1 without a containing stacking context).
 */
body:not(.page-home) section.iq-breadcrumb1,
body:not(.page-home) section.iq-breadcrumb2,
body:not(.page-home) section.iq-breadcrumb3 {
  margin-top: 0 !important;
  position: relative;
  z-index: 0;
  isolation: isolate;
}

body:not(.page-home) section.iq-breadcrumb1 {
  padding-top: 88px !important;
  padding-bottom: 40px !important;
}

body:not(.page-home) section.iq-breadcrumb2 {
  padding-top: 88px !important;
  padding-bottom: 80px !important;
}

body:not(.page-home) section.iq-breadcrumb3 {
  padding-top: 88px !important;
  padding-bottom: 80px !important;
}

@media (max-width: 990px) {
  body:not(.page-home) section.iq-breadcrumb1 {
    padding-top: 144px !important;
  }
  body:not(.page-home) section.iq-breadcrumb2,
  body:not(.page-home) section.iq-breadcrumb3 {
    padding-top: 144px !important;
  }
}

@media (max-width: 767.98px) {
  /*
   * responsive.css sets header { position: relative } here; .hero-social / .search are fixed and
   * do not occupy flow, but the engine still leaves ~8px of body between header and the first
   * in-flow section — reads as a white hairline under the menu.
   */
  body:not(.page-home) section.iq-breadcrumb1,
  body:not(.page-home) section.iq-breadcrumb2,
  body:not(.page-home) section.iq-breadcrumb3 {
    margin-top: -8px !important;
  }
  body:not(.page-home) section.iq-breadcrumb1 {
    padding-top: 132px !important;
  }
  body:not(.page-home) section.iq-breadcrumb2,
  body:not(.page-home) section.iq-breadcrumb3 {
    padding-top: 132px !important;
    padding-bottom: 48px !important;
  }
}