/* Custom minisite color overrides */

/* Override Tailwind default blue colors with minisite colors */
.bg-blue-50 {
  background-color: var(--color-blue-50) !important;
}
.bg-blue-100 {
  background-color: var(--color-blue-100) !important;
}
.bg-blue-200 {
  background-color: var(--color-blue-200) !important;
}
.bg-blue-300 {
  background-color: var(--color-blue-300) !important;
}
.bg-blue-400 {
  background-color: var(--color-blue-400) !important;
}
.bg-blue-500 {
  background-color: var(--color-blue-500) !important;
}
.bg-blue-600 {
  background-color: var(--color-blue-600) !important;
}
.bg-blue-700 {
  background-color: var(--color-blue-700) !important;
}
.bg-blue-800 {
  background-color: var(--color-blue-800) !important;
}
.bg-blue-900 {
  background-color: var(--color-blue-900) !important;
}

/* Override custom color classes from tailwind config */
.bg-primary-blue {
  background-color: var(--color-primary) !important;
}
.bg-secondary-blue {
  background-color: var(--color-primary-dark) !important;
}
.bg-tertiary {
  background-color: var(--color-accent) !important;
}

.text-primary-blue {
  color: var(--color-primary) !important;
}
.text-secondary-blue {
  color: var(--color-primary-dark) !important;
}
.text-tertiary {
  color: var(--color-accent) !important;
}

.border-primary-blue {
  border-color: var(--color-primary) !important;
}
.border-secondary-blue {
  border-color: var(--color-primary-dark) !important;
}
.border-tertiary {
  border-color: var(--color-accent) !important;
}

/* Override hover states for custom colors */
.hover\:bg-primary-blue:hover {
  background-color: var(--color-primary) !important;
}
.hover\:bg-secondary-blue:hover {
  background-color: var(--color-primary-dark) !important;
}
.hover\:bg-tertiary:hover {
  background-color: var(--color-accent) !important;
}

.hover\:text-primary-blue:hover {
  color: var(--color-primary) !important;
}
.hover\:text-secondary-blue:hover {
  color: var(--color-primary-dark) !important;
}
.hover\:text-tertiary:hover {
  color: var(--color-accent) !important;
}

.hover\:border-primary-blue:hover {
  border-color: var(--color-primary) !important;
}
.hover\:border-secondary-blue:hover {
  border-color: var(--color-primary-dark) !important;
}
.hover\:border-tertiary:hover {
  border-color: var(--color-accent) !important;
}

/* Also add focus states for custom colors */
.focus\:ring-primary-blue:focus {
  --tw-ring-color: var(--color-primary) !important;
}
.focus\:border-primary-blue:focus {
  border-color: var(--color-primary) !important;
}

.text-blue-50 {
  color: var(--color-blue-50) !important;
}
.text-blue-100 {
  color: var(--color-blue-100) !important;
}
.text-blue-200 {
  color: var(--color-blue-200) !important;
}
.text-blue-300 {
  color: var(--color-blue-300) !important;
}
.text-blue-400 {
  color: var(--color-blue-400) !important;
}
.text-blue-500 {
  color: var(--color-blue-500) !important;
}
.text-blue-600 {
  color: var(--color-blue-600) !important;
}
.text-blue-700 {
  color: var(--color-blue-700) !important;
}
.text-blue-800 {
  color: var(--color-blue-800) !important;
}
.text-blue-900 {
  color: var(--color-blue-900) !important;
}

.border-blue-50 {
  border-color: var(--color-blue-50) !important;
}
.border-blue-100 {
  border-color: var(--color-blue-100) !important;
}
.border-blue-200 {
  border-color: var(--color-blue-200) !important;
}
.border-blue-300 {
  border-color: var(--color-blue-300) !important;
}
.border-blue-400 {
  border-color: var(--color-blue-400) !important;
}
.border-blue-500 {
  border-color: var(--color-blue-500) !important;
}
.border-blue-600 {
  border-color: var(--color-blue-600) !important;
}
.border-blue-700 {
  border-color: var(--color-blue-700) !important;
}
.border-blue-800 {
  border-color: var(--color-blue-800) !important;
}
.border-blue-900 {
  border-color: var(--color-blue-900) !important;
}

/* Also override focus ring colors for default blue */
.focus\:ring-blue-500:focus {
  --tw-ring-color: var(--color-blue-500) !important;
}
.focus\:border-blue-500:focus {
  border-color: var(--color-blue-500) !important;
}

/* Override hover states for default blue */
.hover\:bg-blue-500:hover {
  background-color: var(--color-blue-500) !important;
}
.hover\:bg-blue-600:hover {
  background-color: var(--color-blue-600) !important;
}
.hover\:bg-blue-700:hover {
  background-color: var(--color-blue-700) !important;
}

.hover\:text-blue-500:hover {
  color: var(--color-blue-500) !important;
}
.hover\:text-blue-600:hover {
  color: var(--color-blue-600) !important;
}
.hover\:text-blue-700:hover {
  color: var(--color-blue-700) !important;
}

.hover\:border-blue-500:hover {
  border-color: var(--color-blue-500) !important;
}
.hover\:border-blue-600:hover {
  border-color: var(--color-blue-600) !important;
}
.hover\:border-blue-700:hover {
  border-color: var(--color-blue-700) !important;
}

/* Override button styles */
.btn-primary {
  background-color: var(--color-primary) !important;
}

.btn-primary:hover,
.btn-primary:active {
  filter: brightness(120%) !important;
}

.btn-secondary {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.btn-secondary:hover,
.btn-secondary:active {
  background-color: var(--color-primary) !important;
}

/* Override link styles */
.linking {
  color: var(--color-primary) !important;
}

/* Override InstantSearch components */
.ais-SearchBox-input:focus {
  --tw-ring-color: var(--color-primary) !important;
}

.ais-RefinementList-checkbox {
  color: var(--color-primary) !important;
}

.ais-RefinementList-checkbox:focus {
  --tw-ring-color: var(--color-primary) !important;
}

.ais-RangeSlider .rheostat-progress {
  background-color: var(--color-primary) !important;
}

.ais-RangeSlider .rheostat-handle:focus {
  --tw-ring-color: var(--color-primary) !important;
}

.ais-RangeSlider .rheostat-handle:hover {
  border-color: var(--color-primary) !important;
}

.ais-RangeSlider .rheostat-tooltip {
  background-color: var(--color-primary) !important;
}

.ais-RangeSlider .rheostat-tooltip::after {
  background-color: var(--color-primary) !important;
}

.ais-Pagination-item--selected .ais-Pagination-link {
  background-color: var(--color-primary) !important;
}

.ais-Pagination-link:hover:not(
    .ais-Pagination-item--disabled .ais-Pagination-link
  ) {
  background-color: color-mix(
    in srgb,
    var(--color-primary) 10%,
    white
  ) !important;
  color: var(--color-primary) !important;
}

/* Override nav-link styles */
.nav-link:hover {
  color: var(--color-primary) !important;
}

.dropdown-item:hover {
  color: var(--color-primary) !important;
}

.mobile-nav-link:hover {
  color: var(--color-primary) !important;
}

.mobile-dropdown-item:hover {
  color: var(--color-primary) !important;
}