/* Placement for the Sienna accessibility trigger.
   Desktop (>=992px, the site's nav breakpoint): the trigger sits inline at the
   far right of the primary navigation bar, sized to match the other nav controls.
   Below that: it stays fixed at the bottom-left, inside the safe area. No dynamic
   offsets — if it overlaps the sticky CTA in that corner, that is intended. */

/* Fixed bottom-left. Inert once the trigger is placed in the nav (position: static). */
.asw-widget .asw-menu-btn {
  left: calc(16px + env(safe-area-inset-left, 0px)) !important;
  right: auto !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  top: auto !important;
}

/* The nav slot is only used at desktop widths; the nav collapses below 992px. */
.leap-a11y-nav-slot {
  display: none;
}

@media (min-width: 992px) {
  .leap-a11y-nav-slot {
    align-items: center;
    display: flex;
    margin-left: 1rem;
  }

  /* Blog bar is a two-item space-between row; keep the phone at the right edge
     so adding the trigger after it does not re-space the bar. */
  .leap-blog__bar .leap-blog__phone {
    margin-left: auto;
  }

  .leap-blog__bar .leap-a11y-nav-slot {
    margin-left: 14px;
  }

  .leap-a11y-nav-slot .asw-widget {
    align-items: center;
    display: flex;
  }

  .leap-a11y-nav-slot .asw-menu-btn {
    position: static !important;
    width: 40px !important;
    min-width: 40px;
    height: 40px !important;
    border-width: 2px !important;
    outline-width: 0 !important;
    box-shadow: none;
  }

  .leap-a11y-nav-slot .asw-menu-btn svg {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
  }
}

/* The trigger is an <a role="button">; give it an explicit, always-visible focus ring
   (the widget's default ring is dropped in the nav slot above). */
.asw-widget .asw-menu-btn:focus-visible {
  outline: 3px solid #0848ca !important;
  outline-offset: 3px !important;
}

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

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