/* Navigation */
burger-menu {
  display: inline-block;
  vertical-align: top;
  z-index: 1;
  /* Mobile menu in brand gold with white links, as on adit.ch. */
  --panel-background-color: var(--color-primary);
  /* Burger (mobile) look, as on adit.ch: square bars, a two-phase X, the first
     link well below the header, links 24/30 uppercase with tight spacing. */
  --burger-bar-thickness: 4px;
  --burger-bar-gap: 9px;
  --burger-panel-offset: 6.5rem;
  --burger-link-size: 1.5rem;
  --burger-link-leading: 1.25;
  --burger-link-padding: 0.5rem;
  --burger-link-gap: 0.3125rem;
  --burger-link-color: var(--color-light);
  --burger-link-transform: uppercase;
}
burger-menu nav.navigation>ul>li {
  font-size: var(--burger-link-size);
}
burger-menu nav.navigation>ul>li>a {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: inherit;
  /* Context can set the weight (the footer menu is regular). */
  font-weight: var(--menu-link-weight, var(--font-bold));
}
burger-menu nav.navigation>ul>li>ul>li>a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
burger-menu nav.navigation a svg.navigation-item__icon {
  flex-shrink: 0;
  block-size: .8lh;
}
burger-menu nav.navigation a span {
  padding-block-start: .05em;
  white-space: nowrap;
}
/* menu items spacing */
burger-menu nav.navigation>ul>*+* {
  margin-block-start: var(--burger-link-gap);
}
/* submenu items spacing */
burger-menu nav.navigation>ul>li>ul>li:first-child {
  margin-block-start: var(--space-l);
}
burger-menu nav.navigation>ul>li {
  position: relative;
}
burger-menu nav.navigation>ul>li>ul {
  visibility: hidden;
  position: absolute;
  opacity: 0;
  --slide: var(--space-3xl);
  transform: translateY(calc(var(--slide) * -1));
  transition: transform var(--transition-movement),
    clip-path var(--transition-movement),
    opacity var(--transition-movement),
    visibility var(--transition-movement);
  clip-path: inset(var(--slide) 0 0 0);
}
burger-menu nav.navigation>ul>li>ul>*+* {
  margin-block-start: var(--space-l);
}
/* submenu items */
burger-menu nav.navigation>ul>li>ul>li>a {
  font-size: var(--size-heading-l);
}
/* has submenu */
burger-menu nav.navigation>ul>li:has(ul)>a {
  display: flex;
  align-items: center;
  gap: var(--space-m);

  &:after {
    transform: rotate(90deg);
    display: inline-block;
    width: .75rem;
    content: '';
    block-size: .6lh;
    width: .6lh;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url(../../assets/icons/chevron-top.svg) center / contain no-repeat;
    mask: url(../../assets/icons/chevron-top.svg) center / contain no-repeat;
  }
}
/* desktop menu styling */
burger-menu:not([enabled]) nav.navigation ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
burger-menu:not([enabled]) nav.navigation ul>*+* {
  margin-block-start: 0;
}
burger-menu:not([enabled]) nav.navigation>ul>li {
  /* Context can set the size (the footer menu uses the small body size). */
  font-size: var(--menu-font-size, var(--size-body));
}
burger-menu:not([enabled]) nav.navigation>ul>li>ul {
  display: block;
}
burger-menu nav.navigation>ul>li>ul>li>a {
  font-size: var(--size-body);
}
burger-menu:not([enabled]) nav.navigation>ul>li>ul {
  display: block;
}
burger-menu:not([enabled]) nav.navigation>ul>li>ul>li:first-child {
  margin-block-start: 0;
}
burger-menu:not([enabled]) nav.navigation>ul>li>ul {
  padding-block-start: var(--offset-top);
  position: fixed;
  /*
    Above the items that follow it. Every <li> is position: relative with
    z-index auto, and positioned elements with auto paint in tree order — so
    without this the items after this one paint on top of its submenu. Only
    visible once the bar wraps onto more than one row, which is where the
    submenu has siblings underneath it to cover: narrow viewports, and any
    viewport with JavaScript off, where the burger never takes over.
  */
  z-index: 1;
  position-anchor: --nav-item;
  min-width: anchor-size(--nav-item width);
  position-area: block-end span-inline-end;
  position-try-fallbacks: flip-inline;

  --slide: var(--space-3xl);
  transform: translateY(calc(var(--slide) * -1));
  /*
    Clips exactly the distance the panel is displaced, so its visible top edge
    stays at its final position and it never paints over the nav item on the way
    down. The inset is a fixed length, not the 100% this used to be: that is
    what keeps the travel — and therefore the speed — independent of how tall
    the panel is.
  */
  clip-path: inset(var(--slide) 0 0 0);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--transition-movement),
    clip-path var(--transition-movement),
    opacity var(--transition-movement),
    visibility var(--transition-movement);
}
/* fake background for submenu */
burger-menu:not([enabled]) nav.navigation>ul>li>ul::before {
  content: '';
  position: absolute;
  inset: var(--offset-top) 0 0 0;
  background-color: var(--color-neutral-0);
  z-index: -1;
}
/*
  :focus-visible, not :focus-within: focus has to open the submenu or a keyboard
  user cannot reach its links at all — they are visibility:hidden while closed,
  so they are out of the tab order. Restricting it to keyboard focus keeps mouse
  focus out of it, the same distinction the burger panel needs to stay closable.

  .is-dismissed is what lets Escape work here. Nothing holds this submenu open in
  state — CSS does, for as long as focus sits inside the item — so there is no
  class for Escape to remove, and focusing the parent link cannot help either
  because that link is inside the same <li>. The class suppresses the rule until
  the pointer or the focus leaves, which view.js then clears.
*/
burger-menu:not([enabled]):not([open-on-click]) nav.navigation>ul>li:is(:hover, :has(:focus-visible)):not(.is-dismissed)>ul {
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  opacity: 1;
  visibility: visible;
}
/*
  Open-on-click. The item is the control in both modes, so hover is switched off
  above and `is-open` drives the dropdown here — the same class the burger panel
  already uses, set by view.js on the item itself rather than by a button.
*/
burger-menu[open-on-click]:not([enabled]) nav.navigation>ul>li.is-open>ul {
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  opacity: 1;
  visibility: visible;
}
burger-menu[open-on-click]:not([enabled]) nav.navigation>ul>li.is-open>a::after {
  transform: rotate(180deg);
}
burger-menu:not([enabled]) nav.navigation>ul>li>a::after {
  transition: var(--transition-movement);
}
burger-menu:not([enabled]):not([open-on-click]) nav.navigation>ul>li:is(:hover, :has(:focus-visible)):not(.is-dismissed)>a::after {
  transform: rotate(180deg);
}
burger-menu:not([enabled]) nav.navigation>ul>li {
  --offset-top: var(--space-m);
  anchor-scope: --nav-item;
  anchor-name: --nav-item;
  position: relative;
}
burger-menu:not([enabled]) nav.navigation>ul>li:last-child {
  padding-inline-end: 0;
}
burger-menu:not([enabled]) nav.navigation a {
  padding-inline: var(--space-l);
  padding-block: var(--space-m);
}
/* navigation item with a submenu */
burger-menu:not([enabled]) nav.navigation>ul>li:has(ul)>a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
}
/*
  Vertical orientation.

  Only the wide layout has a direction to choose, so these stay inside
  :not([enabled]) — the burger panel stacks either way. There is deliberately no
  .is-horizontal rule to match: the base list above is already a row, and the
  class is emitted on both so the markup says which state it is in.
*/
burger-menu:not([enabled]) nav.navigation>ul.is-vertical {
  flex-direction: column;
  align-items: start;
  flex-wrap: nowrap;
}
/*
  A row spaces its items with the anchors' inline padding; in a column that same
  padding reads as an indent and pushes every label off the content edge. The
  block padding is what keeps the tap target, so only the inline side goes.
*/
burger-menu:not([enabled]) nav.navigation>ul.is-vertical>li>a {
  padding-inline: 0;
}
/** 
 * Burger menu enabled styles 
 * 
 **/
.burger-menu[enabled='true'] .burger-menu__trigger {
  /* One above the panel — the close button has to stay reachable. */
  z-index: 2;
  display: block;
  width: var(--burger-size);
  height: var(--burger-size);
  /* No UA padding: the bars span the trigger, so they end exactly on the page inset. */
  padding: 0;
  /* Nice big tap target */
  position: relative;
  background: transparent;
  border: none;
  /* The bars are drawn in currentColor: light over the hero and on the dark panel. */
  color: inherit;
  cursor: pointer;
}
.burger-menu[enabled='true'] .burger-menu__panel {
  background: var(--panel-background-color);
  /*
    Fixed, not absolute. Absolute tied the panel to .site-head, which is
    position: relative but sets no z-index, so the panel ended up competing
    with the page's own content in the root stacking context. Fixed gives it
    the viewport as its containing block and a stacking context of its own.

    1 is enough: nothing in the content sets a positive z-index any more, and
    1 beats every `auto` positioned element regardless of tree order.
  */
  z-index: 1;
  position: fixed;
  inset: 0;
  padding: var(--burger-panel-offset) var(--page-inset) var(--space-4xl);
  visibility: hidden;
  opacity: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.burger-menu[enabled='true'] .navigation ul {
  display: block;
}
/* Burger links: regular weight, block padding as tap target (values on burger-menu). */
.burger-menu[enabled='true'] {
  --menu-link-weight: var(--font-regular);
}
.burger-menu[enabled='true'] .navigation>ul>li {
  line-height: var(--burger-link-leading);
}
.burger-menu[enabled='true'] .navigation>ul>li>a {
  padding-block: var(--burger-link-padding);
  text-transform: var(--burger-link-transform);
  color: var(--burger-link-color);
}
/*
  Submenu disclosure in the burger panel.

  The shared closed state above takes the submenu out of flow and hides it,
  which is right for the desktop dropdown but leaves the panel with no way in.
  Here the submenu belongs in flow, pushing the items below it down, and it is
  opened by the `is-open` class that view.js toggles on click — hover and focus
  are the desktop affordance and are no use on a touch screen.
*/
.burger-menu[enabled='true'] .navigation>ul>li>ul {
  /*
    Collapsed to nothing rather than taken out of flow: height 0 reserves no
    space, and interpolate-size on :root (variables.css) lets it animate to
    `auto`. overflow keeps the content inside the shrinking box.

    The desktop dropdown's transform and clip-path have to be neutralised here
    — they come from the shared rule above. The slide itself sits on the items
    below, not on this list; see there for why.
  */
  position: relative;
  overflow: hidden;
  height: 0;
  opacity: 0;
  visibility: hidden;
  transform: none;
  clip-path: none;
  transition:
    height var(--transition-movement),
    opacity var(--transition-movement),
    visibility var(--transition-movement);
}
/*
  Keyboard focus alongside the class, the same exception the desktop dropdown
  makes with :is(:hover, :has(:focus-visible)). A submenu that only opens on click
  cannot be tabbed into at all: its links are visibility:hidden while collapsed,
  so they are out of the tab order and the keyboard dead-ends. Revealing on
  focus lets Tab carry straight on into the submenu.

  :has(:focus-visible), not :focus-within, because clicking the disclosure
  button focuses it too — mouse focus counts for :focus-within. The click would
  clear `is-open` while the focus held the submenu open, so it could never be
  closed by pointer. :focus-visible matches keyboard focus only, which is
  exactly the distinction wanted here.
*/
.burger-menu[enabled='true'] .navigation>ul>li:is(.is-open, :has(:focus-visible))>ul {
  height: auto;
  opacity: 1;
  visibility: visible;
}
/*
  Disclosure opted out: with no buttons in the panel nothing could open a
  submenu, so they are all shown expanded instead. No chevron either — the
  burger-mode chevron rides on the button, and the link's own ::after is
  already hidden in this mode.
*/
burger-menu:not([disclosure]) .burger-menu[enabled='true'] .navigation>ul>li>ul {
  height: auto;
  opacity: 1;
  visibility: visible;
}
burger-menu:not([disclosure]) .burger-menu[enabled='true'] .navigation>ul>li>ul>li {
  translate: 0 0;
}
/*
  The slide sits on the items, not on the list. overflow: hidden clips to the
  list's own box, so translating the list moves its clipping window with it and
  the whole thing rides up over the parent link. Keeping the list still and
  moving its children means they emerge from underneath that link instead.
*/
.burger-menu[enabled='true'] .navigation>ul>li>ul>li {
  translate: 0 calc(var(--slide) * -1);
  transition: translate var(--transition-movement);
}
.burger-menu[enabled='true'] .navigation>ul>li:is(.is-open, :has(:focus-visible))>ul>li {
  translate: 0 0;
}
/* Point the chevron down once the item is open, as the desktop one does. */
/*
  The disclosure button burger-menu.js builds for each item with a submenu.

  display: none on desktop is doing real work: it keeps the button out of the
  tab order and the accessibility tree, so the hover affordance there is not
  shadowed by a control nobody can see. The chevron stays on the link's ::after
  for that mode.
*/
burger-menu:not([enabled]) .navigation-item__disclosure {
  display: none;
}
.burger-menu[enabled='true'] button.navigation-item__disclosure {
  block-size: 1lh;
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: grid;
  place-content: center;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}
.burger-menu[enabled='true'] .navigation-item__disclosure::before {
  content: '';
  display: block;
  inline-size: .6lh;
  block-size: .6lh;
  background-color: currentColor;
  transform: rotate(90deg);
  transition: transform var(--transition-movement);
  -webkit-mask: url(../../assets/icons/chevron-top.svg) center / contain no-repeat;
  mask: url(../../assets/icons/chevron-top.svg) center / contain no-repeat;
}
.burger-menu[enabled='true'] .navigation>ul>li.has-child:is(.is-open, :has(:focus-visible))>.navigation-item__disclosure::before {
  transform: rotate(180deg);
}
/* The link keeps its own chevron only on desktop; here the button carries it. */
.burger-menu[enabled='true'] .navigation>ul>li.has-child>a::after {
  display: none;
}
/* …except with open-on-click, where there is no button to carry it. */
burger-menu[open-on-click] .burger-menu[enabled='true'] .navigation>ul>li.has-child>a::after {
  display: block;
  transition: transform var(--transition-movement);
}
burger-menu[open-on-click] .burger-menu[enabled='true'] .navigation>ul>li.has-child.is-open>a::after {
  transform: rotate(180deg);
}
.burger-menu[enabled='true'][status='open'] .burger-menu__panel {
  visibility: visible;
  opacity: 1;
  transition: opacity 300ms ease;
}
.burger-menu[enabled='true'][status='closed'] .burger-menu__panel>* {
  opacity: 0;
  transform: translateY(5rem);
}
.burger-menu[enabled='true'][status='open'] .burger-menu__panel>* {
  transform: translateY(0);
  opacity: 1;
  transition: transform 400ms cubic-bezier(0.17, 0.67, 0, 0.87) 150ms, opacity 300ms ease 200ms;
}
.burger-menu[enabled='true'][status='open'] .burger-menu__bar::before,
.burger-menu[enabled='true'][status='open'] .burger-menu__bar::after {
  transition: top 0.2s ease-out 0s, transform 0.2s ease-out 0.2s;
}
.burger-menu[enabled='true'][status='open'] .burger-menu__bar::before {
  top: 0;
  transform: rotate(45deg);
}
.burger-menu[enabled='true'][status='open'] .burger-menu__bar::after {
  top: 0;
  transform: rotate(-45deg);
}
.burger-menu[enabled='true'][status='open'] .burger-menu__bar {
  background: transparent;
}
/* Scroll lock on the root, not body: html sets overflow-x (global-styles.css),
   so body's overflow is no longer passed on to the viewport. */
html:has(burger-menu[enabled][status='open']) {
  overflow: hidden;
}
/* 
  Burger menu triggerstyles
*/
.burger-menu__trigger {
  display: none;
}
.burger-menu__bar,
.burger-menu__bar::before,
.burger-menu__bar::after {
  /* adit.ch hamburger: three square 4px bars, 9px apart, as wide as the trigger. */
  display: block;
  width: 100%;
  height: var(--burger-bar-thickness);
  background: currentColor;
  position: absolute;
  left: 0;
}
.burger-menu__bar {
  top: 50%;
  transform: translateY(-50%);
}
.burger-menu__bar::before,
.burger-menu__bar::after {
  content: '';
}
/*
  Two-phase X as on adit.ch: opening slides the outer bars to the middle, then
  turns them; closing turns them back, then slides them apart. The middle bar
  vanishes once the outer ones have met.
*/
.burger-menu__bar {
  transition: background-color 0s 0.2s;
}
.burger-menu__bar::before,
.burger-menu__bar::after {
  transition: top 0.2s ease-out 0.2s, transform 0.2s ease-out 0s;
}
.burger-menu__bar::before {
  top: calc(var(--burger-bar-gap) * -1);
}
.burger-menu__bar::after {
  top: var(--burger-bar-gap);
}