/* The accessibility trigger's look (#1159). Placement is leap-a11y.js: the
   one Sienna trigger (a.asw-menu-btn) moves into the navigation bar's right
   edge at every width and gains .leap-a11y-nav there. The widget writes its
   own offsets, size and blue disc as inline style and as rules on
   .asw-widget, so every rule below carries !important to win.

   In the nav the trigger is the bare accessibility figure in the site's
   accent — no filled disc or square — sized to the controls beside it. The
   figure is the widget's own SVG; its inline fill:white is overridden so the
   glyph takes the button's colour. */

.asw-menu-btn.leap-a11y-nav {
  --asw-widget-size: 2.5rem;
  --asw-icon-size: 1.5rem;
  position: static !important;
  flex: none;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--leap-secondary-text, var(--color-brand-blue, #2d62ff));
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: var(--radius-small, 0.625rem) !important;
  transform: none !important;
  transition: background-color 160ms ease;
}

/* Phones and tablets: the trigger sits between the brand and the menu
   button in the flex row; pull it to the right, a breath before the
   button. */
.site-nav__inner > .asw-menu-btn.leap-a11y-nav {
  margin-left: auto !important;
  margin-right: 0.25rem !important;
}

.asw-menu-btn.leap-a11y-nav svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  min-width: 1.5rem !important;
  min-height: 1.5rem !important;
  max-width: 1.5rem !important;
  max-height: 1.5rem !important;
  display: block;
}

.asw-menu-btn.leap-a11y-nav svg,
.asw-menu-btn.leap-a11y-nav svg path:not([fill="none"]),
.asw-menu-btn.leap-a11y-nav .asw-fill-white {
  fill: currentColor !important;
}

@media (hover: hover) {
  .asw-menu-btn.leap-a11y-nav:hover {
    background: color-mix(in srgb, currentColor 10%, transparent) !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

.asw-menu-btn.leap-a11y-nav:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
}

/* Before the script has moved it (or on a page with no nav bar) the widget's
   own fixed corner stands: level with the Leap badge (42px, not the 58px
   disc), inside the safe-area insets, and left where the widget puts it. */
.asw-container .asw-widget .asw-menu-btn:not(.leap-a11y-nav) {
  --asw-off-x: calc(0.75rem + env(safe-area-inset-left, 0px)) !important;
  --asw-off-y: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
  --asw-icon-size: 22px !important;
  width: 42px !important;
  height: 42px !important;
}

.asw-widget .asw-menu-btn:not(.leap-a11y-nav):focus-visible {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 7px currentColor !important;
}

@media (prefers-reduced-motion: reduce) {
  .asw-menu-btn,
  .asw-menu {
    transition: none !important;
  }

  .asw-menu-btn:hover {
    transform: none !important;
  }
}