/*
 * Foundation's menu builders (MenuBuilderAbstract): what makes a branch open beside its parent, a
 * panel stack as an accordion, and a flyout's tab sit at the edge of the screen. Mechanics only,
 * keyed on the data-pal-menu-* attributes the capsules emit -- colour, type and spacing are the
 * template's definitions of each level (the section.css split). Bootstrap's own stylesheet still
 * hides every .dropdown-menu and shows one carrying .show, which is how menu.js opens a level --
 * by hover, by the caret segment or from the keyboard, all the same way, so this file never needs
 * to know how a level came to be open: data-pal-menu-open on the branch is the one state it reads.
 *
 * Two kinds of rule. The LOOK-ADJACENT ones (a segment's size, the chevron, where a flyout lands,
 * the tab's place) are wrapped in :where(), so they carry no specificity at all and a template's
 * savant on any level -- one class -- outranks them whichever stylesheet loads last. The one that
 * must BEAT BOOTSTRAP (flattening a .dropdown-menu into an accordion row inside a panel, where
 * Bootstrap's own box and a template's dropdown theme would otherwise paint a floating menu inside
 * the panel) carries real specificity on purpose: at equal weight the order of stylesheets decides,
 * and Bootstrap's comes after this one.
 */

/* A branch is the containing block its own flyout is positioned against. */
:where([data-pal-menu-branch]) {
  position: relative;
}

/* A branch's row is two segments: the item itself (its link, or a caption) and beside it the caret
   segment that opens the level -- separate controls on purpose, so following a link and opening its
   level stay two different clicks, and so a header's words are never the thing you press. */
:where([data-pal-menu-row]) {
  display: flex;
  align-items: stretch;
}

:where([data-pal-menu-row] > .dropdown-item) {
  flex: 1 1 auto;
  min-width: 0;
}

:where([data-pal-menu-submenu-toggle]) {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0 0.5rem;
  border: 0;
  border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* A caption is a label that goes nowhere: no pointer promising an interaction that will not happen. */
:where([data-pal-menu-caption]) {
  cursor: default;
}

/* The chevron, drawn by the capsule as an inline SVG from currentColor, and turned by the branch's
   state alone -- the same turn whether the level was opened by hover, by the segment or from the
   keyboard, and back the moment it closes. Closed it points the way the level opens: right beside a
   bar, down inside a panel. Open it has turned around: left, or up. */
:where([data-pal-menu-caret]) {
  display: inline-flex;
  line-height: 0;
  transition: transform 160ms ease;
}

:where([data-pal-menu-caret] svg) {
  display: block;
}

:where([data-pal-menu-open] > [data-pal-menu-row] [data-pal-menu-caret]) {
  transform: rotate(180deg);
}

/* --- Outside a panel: a deeper level flies out beside its parent ---------------------------------
   85%, not 100%: the flyout overlaps the parent row by ~15% of its own width and sits on top of it.
   Butted exactly against the parent's edge, the pointer has to cross a seam with no forgiveness.
   -6px lifts it by its own top padding, so its first row lines up with the row it came from (top,
   not margin-top: Bootstrap's .dropdown-menu zeroes the margin at the same weight, after this). */
:where([data-pal-menu-branch] [data-pal-menu-branch]) > .dropdown-menu {
  position: absolute;
  top: -6px;
  left: 85%;
}

/* menu.js flips only the levels that actually overflow the viewport, after measuring. */
:where([data-pal-menu-branch] [data-pal-menu-branch][data-pal-menu-opens-left]) > .dropdown-menu {
  left: auto;
  right: 85%;
}

/* --- Inside a panel: the same levels become an accordion ------------------------------------------
   Static, not absolutely positioned: an open level pushes the rows beneath it down instead of
   floating over them, which is the whole difference between a flyout and an accordion. And no box:
   Bootstrap's border, padding and background, and whatever dark theme a template gives its
   dropdowns, belong to a floating menu, not to rows stacked inside a panel. */
[data-pal-menu-panel] [data-pal-menu-branch] > .dropdown-menu {
  position: static !important;
  float: none;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none !important;
}

/* A stacked row's chevron points down when closed and up when open. */
:where([data-pal-menu-panel] [data-pal-menu-caret]) {
  transform: rotate(90deg);
}

:where([data-pal-menu-panel] [data-pal-menu-open] > [data-pal-menu-row] [data-pal-menu-caret]) {
  transform: rotate(-90deg);
}

/* --- A flyout's tab sits at the right edge of the screen until a definition places it elsewhere. -- */
:where([data-pal-menu="flyout"] [data-pal-menu-toggle]) {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1030;
}