/* Two-row Warp-style Navbar Layout */

.navbarWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
}

/* Top row: logo + search + color toggle */
.topRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 0;
}

.topLeft {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.topCenter {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 480px;
  margin: 0 2rem;
  position: relative;
  z-index: 10;
}

/* Search bar fills the top-center area */
.topCenter :global(.navbar__search) {
  width: 100%;
  margin-left: 0 !important;
}

.topCenter :global(.navbar__search-input) {
  width: 100% !important;
  transition: none !important;
}

.topRight {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Bottom row: navigation items */
.bottomRow {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-bottom: 0;
  width: 100%;
  border-top: 1px solid var(--uc-border-color);
}

/* Icon + label wrapper for each nav item */
.navItemWithIcon {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
}

.navItemWithIcon:hover {
  color: var(--ifm-color-primary);
}

/* Active state: apply underline to the wrapper when it contains an active link */
.navItemWithIcon:has(:global(.navbar__link--active)) {
  border-bottom-color: var(--ifm-color-primary);
}

.navIcon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.6;
}

.navItemWithIcon:hover .navIcon,
.navItemWithIcon:has(:global(.navbar__link--active)) .navIcon {
  opacity: 1;
  color: var(--ifm-color-primary);
}

/* Reset default navbar item styles inside our wrapper */
.navItemWithIcon :global(.navbar__item) {
  padding: 0;
  margin: 0;
}

.navItemWithIcon :global(.navbar__link) {
  padding: 0;
  border-radius: 0;
  font-size: 0.875rem;
  font-weight: 500;
}

.navItemWithIcon :global(.navbar__link--active) {
  color: var(--ifm-color-primary);
  font-weight: 600;
}

.navItemWithIcon :global(.navbar__link:hover) {
  background: none;
  color: var(--ifm-color-primary);
}

/* Hide color mode toggle on mobile */
@media (max-width: 996px) {
  .colorModeToggle {
    display: none;
  }

  .topCenter {
    display: none;
  }

  .bottomRow {
    display: none;
  }
}
