/*
 * Header Menu Styles
 * CSS-only dropdown navigation for desktop and mobile
 */

/* ==========================================================================
   Desktop Dropdown Menu
   ========================================================================== */
.dropdown {
  position: relative;

  /* Dropdown menu container */
  .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 12rem;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    padding: 0.5rem 0;
  }

  /* Show dropdown on hover */
  &:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Reset list styles */
  ul,
  li {
    margin: 0;
    padding: 0;
  }

  /* Dropdown item styles */
  .dropdown-item {
    list-style: none;

    &:last-child a {
      border-bottom: none;
    }
  }
}

/* ==========================================================================
   Mobile Menu
   ========================================================================== */

/* Mobile navigation toggle */
#mobileNav {
  &.active {
    display: block !important;
  }
}

/* Mobile menu toggle button */
.mobile-menu-toggle {
  &.active {
    .hamburger-line {
      &:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
      }
      &:nth-child(2) {
        opacity: 0;
      }
      &:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
      }
    }
  }
}

/* Mobile menu container */
.mobile-menu-container {
  width: 100%;

  ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  a,
  button {
    width: 100%;
    display: block;
    text-align: right;
  }

  .mobile-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    text-align: right;

    .toggle-arrow {
      transition: transform 0.2s ease;
    }

    &.active .toggle-arrow {
      transform: rotate(180deg);
    }
  }
}

/* Mobile submenu */
.mobile-submenu {
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
  margin-top: 0.5rem;
  padding: 0;
  padding-right: 1rem;
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;

  &.show {
    max-height: 500px;
    padding: 0.5rem 0;
  }

  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

/* ==========================================================================
   RTL Support
   ========================================================================== */
html[dir='rtl'] {
  .dropdown {
    .dropdown-menu {
      right: 0;
      left: auto;
    }

    svg {
      margin-right: 0;
      margin-left: 0.25rem;
    }
  }
}