/* ICS header menu: mobile full-screen yellow overlay (design B 'all yellow') and the shared sub-menu card
   (desktop dropdown + mobile inline). Scope: header 243 nav #brxe-noa29x. Overrides the header _cssCustom and
   tear-guard.css mobile-menu rules by specificity; nothing is deleted from those files.
   Tokens only. Literal values only where no token exists: 1.25rem card padding, 3.75rem item height,
   3rem sub-link height, 1px dot grid geometry. */

/* 1. Shared sub-menu card (one rule set for desktop and mobile). */
html body #brxe-noa29x#brxe-noa29x :is(.bricks-nav-menu, .bricks-mobile-menu) .sub-menu {
  list-style: none;
  margin: var(--sp-2xs) 0 var(--sp-s);
  padding: var(--sp-2xs) 1.25rem;
  background: var(--yellow-0) !important;
  color: var(--neutral-850) !important;
  border: 0 !important;
  border-radius: var(--radius-m) !important;
  box-shadow: var(--sp-2xs) var(--sp-2xs) 0 var(--ics-pink-brand) !important;
  transition: none !important;
  animation: none !important;
}
html body #brxe-noa29x#brxe-noa29x :is(.bricks-nav-menu, .bricks-mobile-menu) .sub-menu li {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}
html body #brxe-noa29x#brxe-noa29x :is(.bricks-nav-menu, .bricks-mobile-menu) .sub-menu li + li {
  border-top: 1px solid var(--border-separator);
}
html body #brxe-noa29x#brxe-noa29x :is(.bricks-nav-menu, .bricks-mobile-menu) .sub-menu li a {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  min-height: 3rem;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--ff-mono) !important;
  font-size: var(--fs-body) !important;
  font-weight: 400 !important;
  line-height: var(--lh-body) !important;
  color: var(--neutral-850) !important;
  text-decoration: none !important;
  white-space: normal;
}
html body #brxe-noa29x#brxe-noa29x :is(.bricks-nav-menu, .bricks-mobile-menu) .sub-menu li a::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: var(--sp-m);
  height: var(--sp-m);
  background-color: currentColor;
  opacity: .35;
  -webkit-mask: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M5%2012h14M13%206l6%206-6%206%27/%3E%3C/svg%3E) center / contain no-repeat;
          mask: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M5%2012h14M13%206l6%206-6%206%27/%3E%3C/svg%3E) center / contain no-repeat;
}
html body #brxe-noa29x#brxe-noa29x :is(.bricks-nav-menu, .bricks-mobile-menu) .sub-menu li a[aria-current=page] {
  text-decoration: underline !important;
  text-decoration-color: var(--ics-pink-brand);
  text-underline-offset: var(--sp-2xs);
}
@media (hover: hover) and (pointer: fine) {
  html body #brxe-noa29x#brxe-noa29x :is(.bricks-nav-menu, .bricks-mobile-menu) .sub-menu li a:hover {
    color: var(--ics-pink-brand) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--ics-pink-brand);
    text-underline-offset: var(--sp-2xs);
  }
  html body #brxe-noa29x#brxe-noa29x :is(.bricks-nav-menu, .bricks-mobile-menu) .sub-menu li a:hover::after {
    background-color: var(--ics-pink-brand);
    opacity: 1;
  }
}
html body #brxe-noa29x#brxe-noa29x :is(.bricks-nav-menu, .bricks-mobile-menu) .sub-menu li a:focus-visible,
html body #brxe-noa29x#brxe-noa29x .brx-submenu-toggle button:focus-visible,
html body #brxe-noa29x#brxe-noa29x .bricks-mobile-menu-toggle:focus-visible {
  outline: 2px solid var(--ics-pink-brand) !important;
  outline-offset: 2px !important;
}

/* 2. Desktop dropdown placement: directly below the parent item, 8px gap, min 280px, instant (no fade). */
@media (min-width: 992px) {
  html body #brx-header #brxe-noa29x#brxe-noa29x .bricks-nav-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1002;
    min-width: 17.5rem;
    margin: var(--sp-xs) 0 0;
  }
  html body #brx-header #brxe-noa29x#brxe-noa29x .bricks-nav-menu .sub-menu::before {
    top: calc(var(--sp-xs) * -1);
    height: var(--sp-xs);
  }
}

/* 3. Mobile full-screen overlay (<= 991px). Header pill (logo, language, X) stays on top from the header itself. */
@media (max-width: 991px) {
  html body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu-overlay {
    display: none !important;
  }
  html body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu-wrapper {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: var(--yellow-500) !important;
    background-image: radial-gradient(color-mix(in srgb, var(--neutral-850) 12%, transparent) 1px, transparent 1.2px), radial-gradient(color-mix(in srgb, var(--neutral-850) 12%, transparent) 1px, transparent 1.2px) !important;
    background-size: 6px 6px !important;
    background-position: 0 0, 3px 3px !important;
    padding: calc(var(--sp-m) + 4rem + var(--sp-l) + var(--sp-2xs)) 1.5rem calc(var(--sp-l) + 3.5rem + var(--sp-l) + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    animation: none !important;
    transition: none !important;
  }
  html body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xs);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  html body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu > li {
    margin: 0;
    padding: 0;
    border: 0 !important;
  }
  html body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu > li > a,
  html body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu .brx-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.75rem;
    margin: 0;
    padding: 0 !important;
    border: 0;
  }
  html body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu > li > a,
  html body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu .brx-submenu-toggle > a {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-height: 3.75rem;
    padding: 0 !important;
    font-family: var(--font-menu, var(--ff-mono)) !important;
    letter-spacing: var(--menu-track, 0.02em) !important;
    font-size: var(--fs-display) !important;
    font-weight: 500 !important;
    line-height: var(--lh-display) !important;
    color: var(--neutral-850) !important;
    text-decoration: none !important;
  }
  html body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu .brx-submenu-toggle button {
    flex: none;
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  html body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu .brx-submenu-toggle button::after {
    width: var(--sp-s);
    height: var(--sp-s);
    border-color: var(--neutral-850);
    opacity: .35;
    transition: transform .2s ease;
  }
  html body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu .brx-submenu-toggle button[aria-expanded=true]::after {
    opacity: .35;
  }
  html body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu > li > a:focus-visible,
  html body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu .brx-submenu-toggle > a:focus-visible {
    outline: 2px solid var(--ics-pink-brand) !important;
    outline-offset: 2px !important;
  }
  /* CTA: pinned bottom, 24px side and bottom margins, safe-area aware. */
  html body.no-scroll #brxe-ed8mhp#brxe-ed8mhp {
    left: 1.5rem;
    right: 1.5rem;
    bottom: calc(var(--sp-l) + env(safe-area-inset-bottom, 0px));
    z-index: 1003;
    min-height: 3.5rem;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-mono) !important;
    font-size: var(--fs-body) !important;
    font-weight: 500 !important;
    letter-spacing: .04em !important;
  }
}

/* 4. Bricks paints a white ::before layer over the mobile wrapper background (cover the full screen, hides the yellow). Hide it; the wrapper background above is the only layer. */
html body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu-wrapper::before {
  display: none !important;
}

/* 5. Sub-menu card surface. Bricks frontend-layer (a CSS layer) sets background none !important on the mobile .sub-menu, and layered !important beats unlayered !important. The white surface is drawn by ::after instead (Bricks does not target it). Desktop keeps its ::before hover bridge. */
html body #brxe-noa29x#brxe-noa29x :is(.bricks-nav-menu, .bricks-mobile-menu) .sub-menu {
  position: relative;
  isolation: isolate;
}
html body #brxe-noa29x#brxe-noa29x :is(.bricks-nav-menu, .bricks-mobile-menu) .sub-menu::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--yellow-0);
}