/* ------------------------------------------------ Responsive menu (UberMenu mobile modal, ≤ 900px)
 * Loaded after style.css: several rules there (`right: 0 !important` on the arrows,
 * 12px item text, the `top: 150px` nav offset when scrolled) are overridden here.
 */
@media screen and (max-width: 900px) {

  /* ---------- MENU button in the header */
  #header-menu-container .ubermenu-responsive-toggle.ubermenu-responsive-toggle-main {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto !important;
    height: 44px;
    padding: 0 18px !important;
    border-radius: 6px;
    background: #cac7b7 !important;
    color: #222 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: .6px;
    line-height: 1;
  }
  #header-menu-container .ubermenu-responsive-toggle.ubermenu-responsive-toggle-main:hover,
  #header-menu-container .ubermenu-responsive-toggle.ubermenu-responsive-toggle-main:focus {
    background: #bdb9a6 !important;
    color: #222 !important;
  }
  #header-menu-container .ubermenu-responsive-toggle .ubermenu-icon {
    display: flex;
    margin: 0 !important;
  }
  #header-menu-container .ubermenu-responsive-toggle .ubermenu-icon svg {
    width: 18px;
    height: 18px;
  }

  /* ---------- No fade / slide when opening the menu or a submenu: open instantly */
  .ubermenu.ubermenu-mobile-modal,
  .ubermenu.ubermenu-mobile-modal * {
    transition: none !important;
    animation: none !important;
  }
  /* ...and no blue flash from the browser's tap highlight (Android Chrome) */
  .ubermenu.ubermenu-mobile-modal *,
  #header-menu-container .ubermenu-responsive-toggle {
    -webkit-tap-highlight-color: transparent;
  }

  /* ---------- Open menu (full-screen modal) */
  nav.ubermenu-main.ubermenu-mobile-modal:not(.ubermenu-responsive-collapse) {
    /* The sticky header (#header.sticky) has z-index 192383912 and covered the menu when scrolled */
    z-index: 2147483000 !important;
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
    background: #fff !important;
  }
  .ubermenu.ubermenu-mobile-modal .ubermenu-nav,
  body.is-scrolled .ubermenu.ubermenu-mobile-modal .ubermenu-nav {
    position: relative !important;
    top: auto !important;
    flex: 1;
    padding: 8px 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  /* One item per row at every width (tablets were splitting into two columns) */
  .ubermenu.ubermenu-mobile-modal .ubermenu-nav > .ubermenu-item-level-0 {
    float: none !important;
    width: 100% !important;
    border-bottom: 1px solid #ecebe4;
  }
  .ubermenu.ubermenu-mobile-modal .ubermenu-nav > .ubermenu-item-level-0 > .ubermenu-target {
    position: relative;
    padding: 17px 56px 17px 22px !important;
  }
  .ubermenu.ubermenu-mobile-modal .ubermenu-item-level-0 > .ubermenu-target .ubermenu-target-text {
    font-size: 15px !important;
    font-weight: 600;
    letter-spacing: .3px;
    color: #222;
  }

  /* Arrows (SVG icons): away from the screen edge and big enough to see */
  .ubermenu.ubermenu-mobile-modal.ubermenu-sub-indicators .ubermenu-has-submenu-drop > .ubermenu-target > .ubermenu-sub-indicator {
    top: 0 !important;
    bottom: 0;
    right: 22px !important;
    left: auto !important;
    margin-top: 0 !important;
    display: flex;
    align-items: center;
    color: #444;
  }
  .ubermenu.ubermenu-mobile-modal .ubermenu-sub-indicator .ubermenu-icon {
    flex: none;
    width: 18px !important;
  }
  .ubermenu.ubermenu-mobile-modal .ubermenu-sub-indicator .ubermenu-icon-svg-angle {
    flex: none;
    width: 18px;
    min-width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: .6px;
  }

  /* × on an open item (replaces its arrow): dark on the beige bar and off the edge */
  .ubermenu.ubermenu-mobile-modal .ubermenu-item-level-0.ubermenu-active > .ubermenu-target > .ubermenu-sub-indicator {
    display: none !important;
  }
  .ubermenu.ubermenu-mobile-modal .ubermenu-item-level-0.ubermenu-active > .ubermenu-target > .ubermenu-sub-indicator-close {
    right: 10px !important;
    width: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #222 !important;
    font-size: 20px !important;
  }

  /* Open submenu: no empty "retractor" rows (the × above closes it) and no floating-card look */
  .ubermenu.ubermenu-mobile-modal .ubermenu-retractor-mobile {
    display: none !important;
  }
  .ubermenu.ubermenu-mobile-modal .ubermenu-submenu {
    border: 0 !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
  }

  /* Submenu items */
  .ubermenu.ubermenu-mobile-modal .ubermenu-submenu .ubermenu-target {
    padding: 13px 22px 13px 34px !important;
  }
  .ubermenu.ubermenu-mobile-modal .ubermenu-submenu .ubermenu-target-text {
    font-size: 15px !important;
    color: #333;
  }

  /* Close button */
  .ubermenu.ubermenu-mobile-modal .ubermenu-mobile-footer {
    flex: none;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #ecebe4;
    background: #fff;
  }
  .ubermenu.ubermenu-mobile-modal .ubermenu-mobile-footer .ubermenu-mobile-close-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    border-radius: 6px;
    background: #cac7b7;
    color: #222;
    font-size: 15px;
    font-weight: 600;
  }

  /* Floating widgets sit above the menu, so hide them while it is open */
  body:has(.ubermenu-responsive-toggle-open) .uwy,
  body:has(.ubermenu-responsive-toggle-open) #userwayAccessibilityIcon,
  body:has(.ubermenu-responsive-toggle-open) #webchat-comp,
  body:has(.ubermenu-responsive-toggle-open) .progress-wrap,
  body:has(.ubermenu-responsive-toggle-open) #Ntext,
  body:has(.ubermenu-responsive-toggle-open) #cookie-law-info-bar {
    display: none !important;
  }
}