/* Make every first-level dropdown shrink-to-fit its contents */
#menu-main-menu > li > .wd-dropdown-menu {
  /* cancel the theme’s fixed width */
  width: auto !important;
  /* but enforce a sensible minimum */
  min-width: 250px !important;
  /* and a max so it never goes off-screen */
  max-width: 80vw !important;
}


/* 2-column style for long lists */
ul.dpcm-two-column {
  column-count: 3;
  column-gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 3px;
}

/* make sure each <li> flows correctly into columns */
ul.dpcm-two-column > li {
  break-inside: avoid;
  padding: 0.25rem 0;
}

/* Center the first‐level dropdown panel under its parent <li> */
#menu-main-menu > li > .wd-dropdown-menu {
  /* cancel any right‐oriented positioning */
  right: auto         !important;
  /* move the left edge to 50% of the parent */
  left: 50%           !important;
  /* pull it back by half its own width */
  transform: translateX(-50%) !important;
}
/* When we’ve marked this item to flip… */
#menu-main-menu li.menu-item-has-children.dpcm-flip-left > .wd-dropdown-menu {
  left:  auto !important;   /* override the default 100% */
  right: 100% !important;   /* open to the left instead */
}

#menu-main-menu li.menu-item-has-children > .wd-dropdown-menu {
  left:  100% !important;
  right: auto   !important;
}

/* When on a flipped <li>, open to the left instead */
#menu-main-menu li.menu-item-has-children.dpcm-flip-left > .wd-dropdown-menu {
  left:  auto   !important;
  right: 100%   !important;
}