/**
 * Priority menu styling - for desktop navigation with "More" dropdown
 */

/* "More" dropdown container */
.priority-menu__more {
  position: relative;
}

/* "More" button styling */
.priority-menu__more-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.priority-menu__more-button svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.priority-menu__more-button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Active link styles */
.priority-menu__active-link,
.priority-menu__dropdown-link.priority-menu__active-link {
  position: relative;
}

/* Using text-decoration to underline just the text */
.priority-menu__active-link {
  text-decoration: underline !important;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

.priority-menu__dropdown-link.priority-menu__active-link {
  text-decoration: underline !important;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

/* Dropdown menu styling */
.priority-menu__dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 200px;
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 50;
  padding: 0.5rem 0;
}

/* Dark mode dropdown styles */
.tw-dark .priority-menu__dropdown {
  background-color: #1E293B; /* slate-800 */
  border-color: #475569; /* slate-600 */
}

/* Dropdown item styling */
.priority-menu__dropdown-link {
  display: block;
  padding: 0.5rem 1rem;
  color: #111827 !important;
  white-space: nowrap;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
}

.priority-menu__dropdown-link:hover {
  background-color: #f3f4f6;
}

/* Dark mode dropdown link styles */
.tw-dark .priority-menu__dropdown-link {
  color: #f9fafb !important; /* gray-50 */
}

.tw-dark .priority-menu__dropdown-link:hover {
  background-color: #334155; /* slate-700 */
}

/* Animation for dropdown */
.priority-menu__dropdown {
  transform-origin: top center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.priority-menu__dropdown.tw-hidden {
  display: block !important;
  transform: scaleY(0);
  opacity: 0;
  pointer-events: none;
}

.priority-menu__dropdown:not(.tw-hidden) {
  transform: scaleY(1);
  opacity: 1;
}

/* Fix for priority menu in responsive layouts */
@media (max-width: 768px) {
  .priority-menu__more {
    display: none !important;
  }
}