/* Mobile navigation fixes.
 *
 * Webflow's .w-nav-menu floats right and shrink-wraps to its content, so on a
 * phone the menu rendered as a ~200px box pinned to the right edge, running off
 * screen and covering the page. Its dropdowns also never expanded, because they
 * are positioned for a desktop hover menu.
 *
 * Loaded as its own file rather than an inline <style> block, so an edit here
 * can never break the surrounding HTML. */

@media screen and (max-width: 991px) {

  /* Full-screen overlay, after Resend's mobile menu: the panel covers the page
     rather than floating under the header.
     NOTE: never force `display` here. Webflow hides the closed menu with
     display:none, so an !important display:block pins it permanently open. */
  .nav-menu-2.w-nav-menu {
    float: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #100F0D !important;
    border-radius: 0 !important;
    padding: 96px 22px 40px !important;
    text-align: left !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
  }

  /* Every row is a full-width tap target with a hairline under it.
     NOTE: no `display` here. Memberstack injects
     [href*="#/ms/logout"]{display:none} to hide member-only links, and an
     !important display:block un-hides Logout/Profile for logged-out visitors. */
  .nav-menu-2 .nav-link,
  .nav-menu-2 .w-nav-link,
  .nav-menu-2 .w-dropdown {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    margin: 0 !important;
    border-bottom: 1px solid #2A2620;
  }

  /* .nav-link carries its own 15px/20px padding; on a dropdown that stacks with
     the toggle's padding and leaves a dead 30px gap. Let the toggle own it. */
  .nav-menu-2 .w-dropdown.nav-link { padding: 0 !important; }

  /* The wrapper is display:flex, which lays the toggle and its list out side by
     side and squeezes the list to ~164px floating on the right. Block stacks
     them. Safe to set display here: .w-dropdown is a div, never one of the
     Memberstack-hidden member links. */
  .nav-menu-2 .w-dropdown { display: block !important; }

  .nav-menu-2 .w-nav-link,
  .nav-menu-2 .dropdown-toggle,
  .nav-menu-2 .w-dropdown-toggle {
    padding: 20px 2px !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
    color: #B7A98F !important;
  }

  /* Arrow on the rows that open something, like the reference.
     The toggle must be a full-width block or the absolute arrow lands beside
     the text instead of at the right edge. */
  .nav-menu-2 .w-dropdown-toggle {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 32px !important;
  }
  .nav-menu-2 .w-dropdown-toggle::after {
    content: "\2192";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    color: #6F6555;
    transition: transform .2s;
  }
  .nav-menu-2 .w-dropdown-toggle.w--open::after { transform: translateY(-50%) rotate(90deg); }

  /* Dropdowns expand inline instead of floating beside the menu. */
  .nav-menu-2 .w-dropdown-list {
    position: static !important;
    /* Webflow ships .dropdown-list.w--open{margin-left:-196px} under 479px to
       drag the desktop dropdown leftwards; it threw the panel off screen. */
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 0 8px !important;
  }
  .nav-menu-2 .w-dropdown-list:not(.w--open) { display: none !important; }
  .nav-menu-2 .w-dropdown-list.w--open { display: block !important; }

  .nav-menu-2 .dropdown-link-wrap { display: block !important; width: 100% !important; }

  .nav-menu-2 .dropdown-link,
  .nav-menu-2 .w-dropdown-link {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 13px 2px 13px 18px !important;
    font-size: 15px !important;
    text-align: left !important;
    color: #6F6555 !important;
  }

  /* The hamburger sits above the panel it opens. */
  .navbar-2 .w-nav-button { position: relative; z-index: 3; }
  .navbar-2 .w-nav-brand { position: relative; z-index: 3; }

  /* Hide the duplicate logged-out/profile links that only apply to members. */
  .nav-menu-2 .nav-link.hide { display: none !important; }
}