/* Rem and em do not depend on browser font-size in media queries
1 rem = 1 em = 16px 
In some browsers rem is not working correctly for media queries, so we 
will use always "em" as measure unit*/

/* Disable hover on touch devices */
@media (pointer: coarse) {
  .dropdown:hover .dropdown-menu {
    display: none !important;
  }

  .dropdown:hover .arrow-down {
    transform: rotate(0deg) !important;
  }

  .dropdown.dropdown-open .dropdown-menu {
    display: block !important;
  }

  .dropdown.dropdown-open .arrow-down {
    transform: rotate(180deg) !important;
  }
}

/* 1008px*/
@media (max-width: 63em) {
  /* NAVIGATION-MOBILE*/
  .main-nav {
    background-color: #fff9e9; /* Align with site background */
    position: fixed; /* Use fixed to stay in place */
    top: 0;
    right: 0;
    width: 30rem; /* Sidebar width */
    height: 100vh;
    display: flex;
    align-items: flex-start; /* Align items to the top */
    justify-content: flex-start; /* Align content to the start */
    transition: all 0.5s ease-in-out;
    transform: translateX(100%);
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1); /* Softer shadow */
    padding-top: 9.6rem; /* Add padding to clear the header */
    overflow-y: auto; /* Allow vertical scrolling */

    /* HOW TO HIDE THE MENU */
    /* 1) Hide it visually */
    opacity: 0;

    /* 2) Make it unaccessible to mouse and keyboard*/
    pointer-events: none;

    /* 3) Hide it from screen readers */
    visibility: hidden;
  }

  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0%);
  }

  .nav-open .hamburger-icon::before {
    transform: rotate(45deg) ;
  }

  .nav-open .hamburger-icon::after {
    transform: rotate(-45deg);
  }

  .nav-open .hamburger-icon {
    background-color: transparent;
  }

  .main-nav-list {
    flex-direction: column;
    gap: 0; /* Remove gap to use full width */
    align-items: flex-start;
    width: 100%;
  }

  .nav-item {
    width: 100%;
  }

  .nav-item-link:link,
  .nav-item-link:visited {
    font-size: 2rem;
    color: #333; /* Standard text color */
    display: block;
    width: 100%;
    text-align: left;
    border-radius: 0;
    box-shadow: none;
    background: none;
    border-bottom: 1px solid #e6cb81; /* Separator with theme color */
  }

  .nav-item-link:hover,
  .nav-item-link:active {
    background-color: #e6cb81;
  }

  .nav-item-link.nav-cta:link,
  .nav-item-link.nav-cta:visited {
    background-color: #e68181 !important;
    color: #fff !important;
  }

  .dropdown .nav-item-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dropdown-menu {
    position: static;
    display: none; /* Hide by default */
    background-color: #fff; /* Lighter background for sub-menu */
    box-shadow: none;
    width: 100%;
    padding: 0;
    border-radius: 0;
    list-style: none;
  }
  
  /* removes the hovering when mobile */
  .dropdown:hover .dropdown-menu {
    display: none;
  }
  .dropdown:hover .arrow-down {
    transform: rotate(0deg);
  }

  .dropdown-menu a {
    padding-left: 4rem; /* Indent sub-items */
    font-size: 1.8rem;
    color: #555;
  }

  .dropdown .dropdown-menu {
    display: none;
  }

  .dropdown.dropdown-open .dropdown-menu {
    display: block; /* Show on .open class */
  }

  .dropdown.dropdown-open .arrow-down {
    transform: rotate(180deg);
  }

  .btn-mobile-nav {
    display: flex !important; /* Override the display: none from main CSS */
    z-index: 1000; /* Ensure it's above the overlay */
    justify-content: center;
    align-content: center;
    width: 6rem;
  }

  .btn-mobile-nav:hover {
    background-color: #f0f0f0;
  }

  .hamburger-icon {
    width: 3rem;
    height: 2px;
    background-color: #333;
    display: block;
    position: relative;
    transition: background-color 0.3s;
  }

  .hamburger-icon::before,
  .hamburger-icon::after {
    content: "";
    width: 3rem;
    height: 2px;
    background-color: #333;
    display: block;
    position: absolute;
    left: 0;
    transition: transform 0.3s;
  }

  .hamburger-icon::before {
    transform: translateY(-8px);
  }

  .hamburger-icon::after {
    transform: translateY(8px);
  }

  .search-item {
    order: -1;
    padding: 0.4rem;
    border-bottom: 1px solid #e6cb81;
  }
  
  .search-form {
    display: flex;
    width: 100%;
  }

  .search-input-nav {
    width: 100%;
    font-size: 1.6rem;
    font-family: inherit;
    color: inherit;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    border-radius: 9px;
    box-shadow: none;
    transition: border-color 0.3s, box-shadow 0.3s;
  }
  
}