/* ==========================================================================
   MOBILE MENU  -  drawer nav for the Bootstrap 3 navbar
   Loaded after style.css. Desktop (>=992px) is untouched.
   ========================================================================== */

/* leftover theme "menu-trigger" icon (flaticon-interface) - unused, our own
   .navbar-toggle hamburger + inline nav replace it. Previously only hidden
   below 991px, so it floated visible at the far right of the header on
   desktop. Hide it everywhere. */
.menu-trigger { display: none !important; }

/* --- hamburger button ---------------------------------------------------- */
.navbar-default .navbar-toggle {
  position: relative;
  z-index: 1060;
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 8px 0 8px 0;
  border: 0;
  background: none;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
}

.navbar-default .navbar-toggle:focus-visible {
  outline: 2px solid #cc9f52;
  outline-offset: 2px;
}

/* hide the old icon-font glyph inside the toggle */
.navbar-toggle .flaticon-interface { display: none !important; }

.nav-burger {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 18px;
  margin: -9px 0 0 -13px;
  display: block;
}

.nav-burger span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease, background-color .2s ease;
}

.nav-burger span:nth-child(1) { top: 0; }
.nav-burger span:nth-child(2) { top: 8px; }
.nav-burger span:nth-child(3) { top: 16px; }

.navbar-toggle:not(.collapsed) .nav-burger span { background: #cc9f52; }
.navbar-toggle:not(.collapsed) .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.navbar-toggle:not(.collapsed) .nav-burger span:nth-child(2) { opacity: 0; }
.navbar-toggle:not(.collapsed) .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --- drawer -------------------------------------------------------------- */
@media (max-width: 991px) {

  .navbar-default .navbar-collapse {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 360px);
    max-height: 100vh;
    margin: 0;
    padding: 84px 0 32px;
    background: #0F101B;
    border: 0;
    box-shadow: -18px 0 40px rgba(0, 0, 0, .45);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.22, .61, .36, 1);
    z-index: 1050;
  }

  /* Bootstrap toggles .in / .collapsing - we drive the slide ourselves */
  .navbar-default .navbar-collapse.collapse { display: block !important; height: auto !important; }
  .navbar-default .navbar-collapse.in,
  .navbar-default .navbar-collapse.collapsing { transform: translateX(0); background: #0F101B; }

  .navbar-collapse .menu-trigger { display: none; }

  .navbar-nav { margin: 0; }

  .navbar-default .navbar-nav > li { border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .navbar-default .navbar-nav > li:last-child { border-bottom: 0; }

  /* generous tap targets */
  .navbar-default .navbar-nav > li > a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 14px 24px;
    font-size: 15px;
    line-height: 1.3;
    color: #fff;
  }

  .navbar-default .navbar-nav > li > a:active { background: rgba(204, 159, 82, .12); }

  /* dropdowns open in place */
  .navbar-default .navbar-nav .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    background: #08090f;
    border: 0;
    box-shadow: none;
    display: none;
  }

  .navbar-default .navbar-nav .open > .dropdown-menu { display: block; }

  .navbar-default .navbar-nav .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 24px 12px 40px;
    font-size: 14px;
    color: #cfcfcf;
    white-space: normal;
  }

  .navbar-default .navbar-nav .dropdown-menu > li > a:active { color: #cc9f52; }

  /* caret rotates when its section is open */
  .navbar-default .navbar-nav > li.dropdown > a .caret {
    margin-left: auto;
    border-top-width: 5px;
    border-right-width: 5px;
    border-left-width: 5px;
    transition: transform .25s ease;
  }
  .navbar-default .navbar-nav > li.dropdown.open > a .caret { transform: rotate(180deg); }

  /* backdrop */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 1040;
  }
  .nav-open .nav-backdrop { opacity: 1; visibility: visible; }

  /* lock the page behind the drawer */
  body.nav-open { overflow: hidden; }

  /* keep the bar itself above the drawer so the X stays reachable */
  .navbar-default .navbar-header { position: relative; z-index: 1060; }

  /* Bootstrap gives .navbar-fixed-top z-index:1030, which would trap the drawer
     in a stacking context *below* the backdrop. Lift the whole bar while open. */
  body.nav-open .navbar-fixed-top { z-index: 1050; }
}

@media (prefers-reduced-motion: reduce) {
  .navbar-default .navbar-collapse,
  .nav-burger span,
  .nav-backdrop,
  .navbar-default .navbar-nav > li.dropdown > a .caret { transition: none !important; }
}