/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Global focus visible styles for accessibility */
*:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  *:focus-visible {
    outline-width: 4px;
  }
}

/* Legislators Simple Page Styling */
#legislators-container {
  animation: fadeIn 0.3s ease-out;
}

#legislators-container .service-box {
  animation: slideUp 0.4s ease-out;
  animation-fill-mode: both;
}

#legislators-container .service-box:nth-child(1) { animation-delay: 0ms; }
#legislators-container .service-box:nth-child(2) { animation-delay: 80ms; }
#legislators-container .service-box:nth-child(3) { animation-delay: 160ms; }
#legislators-container .service-box:nth-child(4) { animation-delay: 240ms; }
#legislators-container .service-box:nth-child(5) { animation-delay: 320ms; }
#legislators-container .service-box:nth-child(n+6) { animation-delay: 400ms; }

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Search suggestions dropdown styling */
#legislator-simple-listbox li {
  user-select: none;
}

#legislator-simple-listbox li:hover {
  background-color: #eff6ff;
}

/* Empty state styling */
#empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}