/* Mobile menu toggle icons */
.mobile-menu-btn .icon-menu,
.mobile-menu-btn .icon-close {
   position: absolute;
   inset: 0;
   width: 1.25rem;
   height: 1.25rem;
   margin: auto;
   pointer-events: none;
   transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.mobile-menu-btn .icon-menu {
   opacity: 1;
   visibility: visible;
   transform: rotate(0deg);
}

.mobile-menu-btn .icon-close {
   opacity: 0;
   visibility: hidden;
   transform: rotate(-90deg);
}

#site-header.is-open .mobile-menu-btn {
   border-color: rgba(245, 158, 11, 0.7);
   background-color: rgba(245, 158, 11, 0.15);
   color: #fcd34d;
}

#site-header.is-open .mobile-menu-btn .icon-menu {
   opacity: 0;
   visibility: hidden;
   transform: rotate(90deg);
}

#site-header.is-open .mobile-menu-btn .icon-close {
   opacity: 1;
   visibility: visible;
   transform: rotate(0deg);
}

/* Mobile navigation panel */
.mobile-nav {
   overflow: hidden;
   max-height: 0;
   opacity: 0;
   transform: translateY(-6px);
   border-top: 1px solid transparent;
   background-color: transparent;
   transition:
      max-height 0.35s ease,
      opacity 0.3s ease,
      transform 0.3s ease,
      border-color 0.3s ease,
      background-color 0.3s ease;
}

#site-header.is-open .mobile-nav {
   max-height: 22rem;
   opacity: 1;
   transform: translateY(0);
   border-top-color: rgba(245, 158, 11, 0.2);
   background-color: rgba(2, 6, 23, 0.98);
}

.mobile-nav-link {
   -webkit-tap-highlight-color: transparent;
   outline: none;
}

@media (min-width: 768px) {
   .mobile-nav {
      display: none !important;
   }
}