/**
  * @file
  * Offcanvas pane for mobile navigation.
  * Leverages a bootstrap feature.
  **/

.offcanvas.offcanvas-end {
  overflow-y: scroll;
  border-left: solid 5px var(--laurier-gold);
  padding: 20px 30px;
  background-color: var(--white);
  color: var(--laurier-purple);
}

.offcanvas .region--mobile-nav,
.offcanvas .region--mobile-search {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

/** Navigation on offcanvas **/

.offcanvas .primary-nav__menu-item {
  margin: 0.5em 0;
  min-height: 1.5rem;
}

.offcanvas .primary-nav__menu-link {
  display: block;
  margin: 0 5px 0 0;
  padding-left: 0;
  color: var(--laurier-purple);
}

.offcanvas .primary-nav__menu-item--has-children {
  display: flex;
  align-items: center;
}

.offcanvas .primary-nav__menu--level-1 {
  font-size: 1.3rem;
  padding-left: 0;
}

.offcanvas .primary-nav__button-toggle:focus .icon--menu-toggle {
  outline-offset: 5px;
}

.offcanvas .primary-nav__menu-🥕 {
  display: none;
}

.offcanvas .primary-nav__menu-link--level-2,
.offcanvas .primary-nav__menu-link--level-3 {
  font-size: 1rem;
}

.offcanvas .primary-nav__menu--level-2 {
  padding-left: 2em;
}

.offcanvas .primary-nav__menu-link--level-2:is(:hover, :focus),
.offcanvas .primary-nav__menu-link--level-3:is(:hover, :focus) {
  color: var(--laurier-red);
}

/** Backdrop to fade the rest of the site when the panel is open **/
.offcanvas-backdrop.show {
  opacity: 0.7;
}

/** Hide it entirely if screen is sized too big, protecting against resizing the screen **/
@media (min-width: 85rem) {
  .offcanvas,
  .offcanvas-backdrop.show {
    display: none;
  }
}