/**
 * Loads last: tra-menu glass — almost no paint color; blur samples whatever is behind (per page).
 * Optional: #header[data-nav-glass="dark"] for pages that need a darker frost over dark heroes.
 */
@media only screen and (max-width: 991px) {
  html body .wsmenucontainer {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  html body #header.tra-menu:not(.white-menu) .header-wrapper {
    background: transparent !important;
    pointer-events: none;
  }

  html body #header.tra-menu:not(.white-menu) .header-wrapper > * {
    pointer-events: auto;
  }

  html body #header.tra-menu:not(.white-menu) .wsmobileheader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 10004 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    /* Near-transparent veil — page bg shows through blurred */
    background-color: var(--nav-glass-mobile-veil, rgba(255, 255, 255, 0.06)) !important;
    -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
    backdrop-filter: blur(28px) saturate(170%) !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    box-shadow: none !important;
  }

  html body #header.tra-menu.navbar-dark:not(.white-menu) .wsmobileheader,
  html body #header.tra-menu[data-nav-glass="dark"]:not(.white-menu) .wsmobileheader {
    background-color: var(--nav-glass-mobile-veil-dark, rgba(8, 18, 22, 0.28)) !important;
    -webkit-backdrop-filter: blur(28px) saturate(140%) !important;
    backdrop-filter: blur(28px) saturate(140%) !important;
    box-shadow: none !important;
  }

  html body #header.tra-menu:not(.white-menu) .wsmobileheader::before {
    content: none !important;
    display: none !important;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    mask: none !important;
    -webkit-mask: none !important;
  }

  html body #header.tra-menu.is-scrolled:not(.white-menu) .wsmobileheader {
    background-color: var(--nav-glass-mobile-veil-scrolled, rgba(255, 255, 255, 0.12)) !important;
    -webkit-backdrop-filter: blur(32px) saturate(175%) !important;
    backdrop-filter: blur(32px) saturate(175%) !important;
  }

  html body #header.tra-menu.is-scrolled.navbar-dark:not(.white-menu) .wsmobileheader,
  html body #header.tra-menu.is-scrolled[data-nav-glass="dark"]:not(.white-menu) .wsmobileheader {
    background-color: var(--nav-glass-mobile-veil-dark-scrolled, rgba(8, 18, 22, 0.4)) !important;
  }

  /* Mobile drawer: opaque white (glass vars + blur load after pink-theme and read as “empty”) */
  html body #header.tra-menu:not(.white-menu) .wsmenu > .wsmenu-list,
  html body #header.tra-menu.navbar-dark:not(.white-menu) .wsmenu > .wsmenu-list,
  html body #header.tra-menu[data-nav-glass="dark"]:not(.white-menu) .wsmenu > .wsmenu-list {
    background: #ffffff !important;
    background-color: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Drawer open: glass mobile bar rules above use higher base specificity than
     menu.css `body.wsactive .wsmobileheader`; without this the frosted strip stays visible. */
  html body.wsactive #header.tra-menu:not(.white-menu) .wsmobileheader,
  html body.wsactive #header.tra-menu.is-scrolled:not(.white-menu) .wsmobileheader,
  html body.wsactive #header.tra-menu.navbar-dark:not(.white-menu) .wsmobileheader,
  html body.wsactive #header.tra-menu[data-nav-glass="dark"]:not(.white-menu) .wsmobileheader,
  html body.wsactive #header.tra-menu.is-scrolled.navbar-dark:not(.white-menu) .wsmobileheader,
  html body.wsactive #header.tra-menu.is-scrolled[data-nav-glass="dark"]:not(.white-menu) .wsmobileheader,
  html body.wsactive #header.tra-menu.white-menu .wsmobileheader,
  html body.wsactive #header.tra-menu.is-scrolled.white-menu .wsmobileheader {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
}

html body #header.tra-menu:not(.white-menu) .wsmainfull {
  background-color: transparent !important;
}

html body #header.tra-menu:not(.white-menu) .wsmainfull::before {
  background-color: rgba(255, 255, 255, 0.08);
}

html body #header.tra-menu.is-scrolled:not(.white-menu) .wsmainfull::before {
  background-color: rgba(255, 255, 255, 0.14);
}

html body #header.tra-menu.navbar-dark:not(.white-menu) .wsmainfull::before,
html body #header.tra-menu[data-nav-glass="dark"]:not(.white-menu) .wsmainfull::before {
  background-color: rgba(6, 16, 20, 0.32);
}

html body #header.tra-menu.is-scrolled.navbar-dark:not(.white-menu) .wsmainfull::before,
html body #header.tra-menu.is-scrolled[data-nav-glass="dark"]:not(.white-menu) .wsmainfull::before {
  background-color: rgba(6, 16, 20, 0.48);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  @media only screen and (max-width: 991px) {
    html body #header.tra-menu:not(.white-menu) .wsmobileheader {
      background-color: rgba(255, 255, 255, 0.92) !important;
    }
    html body #header.tra-menu.navbar-dark:not(.white-menu) .wsmobileheader,
    html body #header.tra-menu[data-nav-glass="dark"]:not(.white-menu) .wsmobileheader {
      background-color: rgba(18, 32, 36, 0.94) !important;
    }
    html body.wsactive #header.tra-menu:not(.white-menu) .wsmobileheader,
    html body.wsactive #header.tra-menu.navbar-dark:not(.white-menu) .wsmobileheader,
    html body.wsactive #header.tra-menu[data-nav-glass="dark"]:not(.white-menu) .wsmobileheader {
      background-color: transparent !important;
    }
  }
}