/* Header Navigation - Premium Redesign (v2) */

/* Container Adjustment in style.css will be needed to allow centering */
/* But we can force it here if flex-grow is managed */

.top-bar .nav-menu {
  display: flex;
  flex-direction: row;
  list-style: none;
  gap: 30px;
  /* More spacing for elegance */
  padding: 0;
  margin: 0;
  /* Centering logic handled by parent or auto margins */
}

.top-bar .nav-item {
  width: auto;
  height: auto;
  min-height: 44px;
  flex-direction: row;
  padding: 8px 20px;
  background: transparent;
  /* Clean look */
  border-radius: 50px;
  /* Pill shape */
  gap: 10px;
  border: 2px solid transparent;
  /* Prevent layout shift */
  opacity: 0.7;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Icon Styling */
.top-bar .nav-item .icon-circle {
  width: auto;
  height: auto;
  font-size: 22px;
  color: inherit;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
}

/* Text Styling */
.top-bar .nav-item .nav-label {
  position: static;
  opacity: 1;
  background: transparent;
  padding: 0;
  border: none;
  pointer-events: all;
  transform: none;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  display: block;
  letter-spacing: 0.5px;
}

/* Hover State */
.top-bar .nav-item:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

/* Active State */
.top-bar .nav-item.active {
  opacity: 1;
  background: #fff;
  /* White pill for high contrast premium feel */
  transform: scale(1.05);
  /* Slight pop */
  box-shadow: 0 5px 20px rgba(255, 255, 255, 0.2);
}

/* Focus State */
.top-bar .nav-item:focus {
  opacity: 1;
  transform: scale(1.05);
  /* Slight pop */
  background: linear-gradient(135deg, rgba(64, 196, 255, 0.4) 0%, rgba(30, 30, 40, 0.9) 100%);
  border-color: rgba(64, 196, 255, 0.8);
  box-shadow: 0 10px 25px rgba(64, 196, 255, 0.4);
}

/* Text Color Swaps on Active (Dark text on White bg) */
.top-bar .nav-item.active .nav-label,
.top-bar .nav-item.active .icon-circle {
  color: #000;
  /* Black text on white pill */
}

/* White text for Focus (Blue gradient) */
.top-bar .nav-item:focus .nav-label,
.top-bar .nav-item:focus .icon-circle {
  color: #fff;
}

/* Optional: Gold Accent for 'Live TV' specifically if desired, but White is cleaner for general nav */
.top-bar .nav-item[data-target="live-tv"].active {
  /* You can enable this if you want specific color branding */
  /* background: var(--accent-yellow); */
}

/* Remove old overrides */
.top-bar .nav-item::before {
  display: none !important;
}

/* Focus Ring for accessibility/TV navigation visibility */
.top-bar .nav-item:focus {
  border: 2px solid rgba(64, 196, 255, 0.8);
}

/* Search Pill Specific Styling */
.top-bar .nav-item.search-pill {
  width: min(300px, 30vw);
  /* Responsive width */
  justify-content: space-between;
  /* Icons on far ends */
  background: rgba(255, 255, 255, 0.1);
  /* Slightly filled to look like input */
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0 20px;
  /* Internal spacing */
}

/* Ensure icons in search pill are visible and colored correctly */
.top-bar .nav-item.search-pill i {
  font-size: 1.125rem;
  /* 18px */
  color: #fff;
  opacity: 0.8;
}

/* Hover/Focus states for Search Pill */
.top-bar .nav-item.search-pill:hover,
.top-bar .nav-item.search-pill:focus {
  background: rgba(255, 255, 255, 0.2);
  border-color: #fff;
  width: min(320px, 35vw);
  /* Slight expansion animation */
}

.top-bar .nav-item.search-pill:focus {
  background: #fff;
}

.top-bar .nav-item.search-pill:focus i {
  color: #000;
}