/* 
 * BUILD SCITECH Category Filter Visibility Fix
 * ==================================================
 * This file specifically addresses the issue where category filters
 * appear blank/white until hovered over.
 */

/* Force visibility for all category filters */
.it_solution_hero_images .categories li a {
  background-color: var(--bs-secondary) !important;
  color: var(--bs-white) !important;
  border: 1px solid var(--bs-white) !important;
  position: relative;
  z-index: 1;
}

.it_solution_hero_images .categories li a span {
  background-color: transparent !important;
  color: var(--bs-white) !important;
  border: 1px solid var(--bs-white) !important;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  font-weight: 500;
  display: inline-block;
}

.it_solution_hero_images .categories li a i {
  background-color: transparent !important;
  color: var(--bs-white) !important;
  border: 1px solid var(--bs-white) !important;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Hover states */
.it_solution_hero_images .categories li a:hover {
  background-color: var(--bs-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 68, 235, 0.3);
}

.it_solution_hero_images .categories li a:hover span {
  background-color: var(--bs-white) !important;
  color: var(--bs-primary) !important;
  border-color: var(--bs-white) !important;
}

.it_solution_hero_images .categories li a:hover i {
  background-color: var(--bs-white) !important;
  color: var(--bs-primary) !important;
  border-color: var(--bs-white) !important;
}

/* Active state */
.it_solution_hero_images .categories li a.active {
  background-color: var(--bs-primary) !important;
}

.it_solution_hero_images .categories li a.active span {
  background-color: var(--bs-white) !important;
  color: var(--bs-primary) !important;
}

.it_solution_hero_images .categories li a.active i {
  background-color: var(--bs-white) !important;
  color: var(--bs-primary) !important;
}

/* Focus states for accessibility */
.it_solution_hero_images .categories li a:focus {
  outline: 2px solid var(--bs-white);
  outline-offset: 2px;
}

/* Ensure proper contrast in all states */
.it_solution_hero_images .categories li a * {
  color: inherit !important;
}

/* Mobile-specific fixes */
@media (max-width: 767px) {
  .it_solution_hero_images .categories li a {
    margin: 8px 0;
    padding: 12px 16px;
    border-radius: 12px;
  }
  
  .it_solution_hero_images .categories li a span {
    font-size: 14px;
    padding: 8px 12px 4px;
  }
  
  .it_solution_hero_images .categories li a i {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .it_solution_hero_images .categories li a {
    border-width: 2px;
  }
  
  .it_solution_hero_images .categories li a span,
  .it_solution_hero_images .categories li a i {
    text-shadow: none;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .it_solution_hero_images .categories li a,
  .it_solution_hero_images .categories li a span,
  .it_solution_hero_images .categories li a i {
    transition: none;
  }
  
  .it_solution_hero_images .categories li a:hover {
    transform: none;
  }
}