/* Autocomplete styles */

/* Autocomplete results container */
.autocomplete-results {
  background-color: var(--color-neutral-primary-medium);
  z-index: 2147483647 !important; /* Maximum possible z-index */
  border-color: var(--color-default-medium);
}

/* Autocomplete item text colors */
.autocomplete-item {
  color: var(--color-heading);
}

.autocomplete-item span:first-child {
  color: var(--color-heading);
}

.autocomplete-item span:last-child {
  color: var(--color-body-subtle);
}

/* Highlight selected item during keyboard navigation */
[role="listbox"] [role="option"][aria-selected="true"] {
  background-color: var(--color-blue-50);
}

.dark [role="listbox"] [role="option"][aria-selected="true"] {
  background-color: color-mix(in srgb, var(--color-blue-500) 18%, transparent);
}

/* Smooth transitions */
[role="listbox"] [role="option"] {
  transition: background-color 0.15s ease;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

[role="listbox"] [role="option"] > a {
  color: inherit;
  text-decoration: none;
}

[role="listbox"] [role="option"]:active {
  background-color: var(--color-blue-100);
}

.dark [role="listbox"] [role="option"]:active {
  background-color: color-mix(in srgb, var(--color-blue-500) 18%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  [role="listbox"] [role="option"]:hover {
    background-color: var(--color-neutral-secondary-soft);
  }

  .dark [role="listbox"] [role="option"]:hover {
    background-color: var(--color-neutral-tertiary-medium);
  }

  [role="listbox"] [role="option"][aria-selected="true"]:hover {
    background-color: var(--color-blue-100);
  }

  .dark [role="listbox"] [role="option"][aria-selected="true"]:hover {
    background-color: color-mix(in srgb, var(--color-blue-500) 24%, transparent);
  }
}

@media (hover: none), (pointer: coarse) {
  [role="listbox"] [role="option"] > a > * {
    pointer-events: none;
  }
}

/* Mark highlighting for search matches */
[role="listbox"] [role="option"] mark {
  background-color: rgb(254 240 138); /* bg-yellow-200 */
  color: inherit;
  font-weight: 600;
  padding: 0;
}

.dark [role="listbox"] [role="option"] mark {
  background-color: rgb(161 98 7); /* bg-yellow-700 */
  color: inherit;
}

/* Search field expansion styles */
.search-expanded .search-field-wrapper {
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

/* Smooth transition for search field */
.search-field-wrapper {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide nav items smoothly when search expands */
.search-expanded [data-layout--navbar--component-target="navItems"] {
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
}

/* Transition for nav items */
[data-layout--navbar--component-target="navItems"] {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Ensure hamburger is visible when search is expanded */
.search-expanded [data-layout--navbar--component-target="hamburger"] {
  display: flex !important;
}

/* Dropdown animation classes */
[data-layout--navbar--component-target="dropdown"] {
  transform-origin: top right;
}