/* Shared submenu appearance; the phone selector and entrance animations are unchanged. */
@media (min-width: 600px) {
  #sub_navi,
  .section-nav.ws-management-tabs { --ws-submenu-gap: 8px; }

  #sub_navi div.vg_sub_area,
  .section-nav.ws-management-tabs [role=tablist] {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #sub_navi:not(.fixed) .sub_tab,
  #sub_navi.fixed .sub_tab,
  .section-nav.ws-management-tabs [role=tablist] {
    column-gap: var(--ws-submenu-gap);
  }

  #sub_navi .sub_tab li.tab_list > a,
  .section-nav.ws-management-tabs button {
    border-radius: 10em;
    transition: background-color .2s ease;
  }

  #sub_navi .sub_tab li.tab_list > a:not(.selected),
  .section-nav.ws-management-tabs button:not([aria-selected=true]) {
    background-color: transparent;
  }

  #sub_navi:not(.fixed) .sub_tab li.tab_list > a:not(.selected):focus-visible,
  .section-nav.ws-management-tabs button:not([aria-selected=true]):focus-visible {
    background-color: rgba(255,255,255,.25);
  }

  #sub_navi.fixed .sub_tab li.tab_list > a:not(.selected):focus-visible {
    background-color: rgba(0,0,0,.06);
  }
}

@media (min-width: 600px) and (max-width: 1100px) {
  #sub_navi,
  .section-nav.ws-management-tabs { --ws-submenu-gap: 6px; }
}

@media (min-width: 600px) and (hover: hover) {
  #sub_navi:not(.fixed) .sub_tab li.tab_list > a:not(.selected):hover,
  .section-nav.ws-management-tabs button:not([aria-selected=true]):hover {
    background-color: rgba(255,255,255,.25);
  }

  /* Preserve contrast on the existing white sticky navigation. */
  #sub_navi.fixed .sub_tab li.tab_list > a:not(.selected):hover {
    background-color: rgba(0,0,0,.06);
  }
}

@media (min-width: 600px) and (prefers-reduced-motion: reduce) {
  #sub_navi .sub_tab li.tab_list > a,
  .section-nav.ws-management-tabs button { transition: none; }
}