/* Navigation Enhancement Styles - Aggressive Overrides */

/* Target navigation search container more specifically */
nav .relative.ml-4 {
  position: relative !important;
  width: auto !important;
  margin-left: 1rem !important;
}

/* Compact Navigation Search Bar - Non-homepage pages only */
nav .relative.ml-4 input[type="text"],
nav .relative.ml-4 input[placeholder*="Search"] {
  width: 9rem !important;
  max-width: 9rem !important;
  padding: 0.375rem 1.75rem 0.375rem 0.5rem !important;
  height: 1.75rem !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  background-color: rgba(229, 231, 235, 0.8) !important;
  border: 1px solid rgba(209, 213, 219, 0.8) !important;
  border-radius: 0.375rem !important;
}

nav .relative.ml-4 input[type="text"]:focus,
nav .relative.ml-4 input[placeholder*="Search"]:focus {
  border-color: var(--p) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(var(--p), 0.1) !important;
}

/* Navigation Search Button - More specific targeting */
nav .relative.ml-4 button {
  position: absolute !important;
  width: 1rem !important;
  height: 1rem !important;
  right: 0.375rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

nav .relative.ml-4 button ion-icon {
  font-size: 0.75rem !important;
  width: 0.75rem !important;
  height: 0.75rem !important;
}

/* Dark theme adjustments */
[data-theme="forest"] nav .relative.ml-4 input.input-xs,
html.dark nav .relative.ml-4 input.input-xs {
  background-color: rgba(55, 65, 81, 0.5) !important;
  border-color: rgba(75, 85, 99, 0.8) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="forest"] nav .relative.ml-4 input.input-xs::placeholder,
html.dark nav .relative.ml-4 input.input-xs::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Ensure search bar doesn't break layout */
nav .hidden.sm\\:flex {
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* Mobile navigation search item styling */
.dropdown-content .group.inline-flex ion-icon[name="search"] {
  margin-right: 0.5rem;
}

/* Prevent navigation items from wrapping */
nav section.hidden.sm\\:flex > * {
  flex-shrink: 0;
}

/* Add proper spacing between nav items and search */
nav .relative.ml-4 {
  margin-left: 1rem !important;
  flex-shrink: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  nav .relative.ml-4 input.input-xs {
    border: 2px solid var(--bc) !important;
  }
}

/* Ensure proper alignment on all screen sizes */
@media (min-width: 640px) and (max-width: 1024px) {
  nav .relative.ml-4 input.input-xs {
    width: 8rem !important; /* Even smaller on medium screens */
  }
}