/* Mobile header fixes - show hamburger menu on small screens only */

/* Hide the ion icon completely */
.nav__icon-menu {
  display: none !important;
}

/* Add hamburger icon via CSS, only visible on screens < 1024px */
@media only screen and (max-width: 1024px) {
  .nav-button::before {
    content: "☰";
    font-size: 28px;
    line-height: 1;
    color: inherit;
    display: block;
  }

  /* Position nav-button at top-right of viewport */
  .nav-button {
    position: fixed !important;
    top: 20px;
    right: 20px;
    z-index: 1001;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Fix close button positioning to align with burger menu */
  .nav__icon-close {
    top: 20px !important;
    right: 20px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* On very small screens, adjust positioning */
@media only screen and (max-width: 576px) {
  .nav-button {
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
  }
  
  .nav-button::before {
    font-size: 24px;
  }

  /* Adjust nav-button and close button for very small screens */
  .nav-button {
    top: 15px !important;
    right: 15px !important;
    width: 40px;
    height: 40px;
  }

  .nav-button::before {
    font-size: 24px;
  }

  .nav__icon-close {
    top: 15px !important;
    right: 15px !important;
    width: 40px !important;
    height: 40px !important;
  }
}