/* Team listing specific styles */

/* Ensure 4 people per row in grid layout */
.quarto-listing-grid .quarto-grid-item {
  flex: 0 0 calc(25% - 1rem) !important;
  max-width: calc(25% - 1rem) !important;
  margin-bottom: 2rem !important;
}

/* Responsive design for smaller screens */
@media (max-width: 1200px) {
  .quarto-listing-grid .quarto-grid-item {
    flex: 0 0 calc(50% - 1rem) !important;
    max-width: calc(50% - 1rem) !important;
  }
}

@media (max-width: 768px) {
  .quarto-listing-grid .quarto-grid-item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Team card styling */
.quarto-listing-grid .card {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease-in-out;
}

.quarto-listing-grid .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.quarto-listing-grid .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.quarto-listing-grid .card-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.quarto-listing-grid .card-subtitle {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.quarto-listing-grid .card-text {
  font-size: 0.9rem;
  line-height: 1.4;
  flex: 1;
}

/* Category filter styling */
.quarto-listing .listing-categories {
  margin-top: 0.5rem;
}

.quarto-listing .listing-categories .listing-category {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 12px !important; /* Force consistent font size */
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
  display: inline-block;
  border: 1px solid #dee2e6;
  color: #6c757d;
  background-color: transparent;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.quarto-listing .listing-categories .listing-category:hover {
  background-color: #7f8c8d;
  color: #fff !important;
  border-color: #7f8c8d;
}

/* Active state for individual category tags */
.quarto-listing .listing-categories .listing-category.active {
  background-color: #7f8c8d !important;
  color: #fff !important;
  border-color: #7f8c8d !important;
}

/* Dark mode support for category styling */
body.quarto-dark .quarto-listing .listing-categories .listing-category {
  border-color: #495057 !important;
  color: #adb5bd !important;
  background-color: transparent !important;
  font-size: 12px !important; /* Force consistent font size in dark mode */
}

body.quarto-dark .quarto-listing .listing-categories .listing-category:hover {
  background-color: #343a40 !important;
  border-color: #6c757d !important;
  color: #e9ecef !important;
}

body.quarto-dark .quarto-listing .listing-categories .listing-category.active {
  background-color: #343a40 !important;
  border-color: #6c757d !important;
  color: #e9ecef !important;
}

/* Force consistent font size for all category elements regardless of theme inheritance */
.quarto-listing .listing-categories .listing-category,
body.quarto-light .quarto-listing .listing-categories .listing-category,
body.quarto-dark .quarto-listing .listing-categories .listing-category {
  font-size: 12px !important;
}

/* Additional high-specificity rules to override any conflicting styles */
body .quarto-listing .listing-categories .listing-category,
html body .quarto-listing .listing-categories .listing-category,
.quarto-listing-container .quarto-listing .listing-categories .listing-category,
.quarto-listing-container-default .quarto-listing .listing-categories .listing-category {
  font-size: 12px !important;
}

/* Force font size for all possible category variations in team listings */
.quarto-listing [class*="category"],
.quarto-listing [class*="Category"] {
  font-size: 12px !important;
}

/* Category Spacing Consistency Fix for Team Listings */
/* Ensure consistent spacing and layout for categories across themes */

/* Consistent padding and margins for team category elements */
.quarto-listing .listing-categories .listing-category {
  padding: 0.25rem 0.5rem !important;
  margin: 0.25rem !important;
  line-height: 1.2 !important;
  display: inline-block !important;
  border-radius: 0.25rem !important;
}

/* Ensure consistent spacing in both light and dark themes for team listings */
body.quarto-light .quarto-listing .listing-categories .listing-category,
body.quarto-dark .quarto-listing .listing-categories .listing-category {
  padding: 0.25rem 0.5rem !important;
  margin: 0.25rem !important;
  line-height: 1.2 !important;
}

/* Force consistent spacing for team category containers */
.quarto-listing .listing-categories .listing-category {
  margin-right: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

/* Vertical Alignment and Positioning Fix for Team Listings */
/* Ensure categories are positioned consistently across themes */

/* Consistent vertical alignment for team category elements */
.quarto-listing .listing-categories .listing-category {
  vertical-align: baseline !important;
  line-height: 1.2 !important;
  position: relative !important;
  top: 0 !important;
}

/* Force consistent vertical positioning in both themes for team listings */
body.quarto-light .quarto-listing .listing-categories .listing-category,
body.quarto-dark .quarto-listing .listing-categories .listing-category {
  vertical-align: baseline !important;
  line-height: 1.2 !important;
  position: relative !important;
  top: 0 !important;
}

/* Fix for any floating or positioning issues in team listings */
.quarto-listing .listing-categories .listing-category {
  float: none !important;
  position: relative !important;
  top: 0 !important;
  transform: none !important;
}

body.quarto-dark .quarto-listing-grid .card-subtitle {
  color: #a0aec0;
} 

/* Add "From" before dates in team listings */
.quarto-listing .listing-date::before {
  content: "From ";
}

/* Reorder sections to put Alumni at the bottom */
main.content {
  display: flex;
  flex-direction: column;
}

/* Move the listing (team member cards) to the top */
.quarto-listing-container-grid {
  order: 2;
}

/* Move the Current Team section to the middle */
section#current-team {
  order: 1;
}

/* Move the Alumni section to the bottom */
section#alumni {
  order: 3;
} 

/* Redesigned styling for sort and filter UI elements */

/* Light theme styling - refined colors */
.quarto-listing-sort,
.quarto-listing-filter {
  background-color: #f8f6f2 !important;
  border: 2px solid #d4c8b8 !important;
  border-radius: 6px !important;
  color: #2c3e50 !important;
  transition: all 0.3s ease !important;
}

.quarto-listing-sort .form-select,
.quarto-listing-filter .form-control {
  background-color: #f8f6f2 !important;
  border: 1px solid #d4c8b8 !important;
  color: #2c3e50 !important;
  font-weight: 500 !important;
}

.quarto-listing-sort .input-group-text {
  background-color: #34495e !important;
  border: 1px solid #34495e !important;
  color: #f8f6f2 !important;
  font-weight: 600 !important;
}

.quarto-listing-sort .form-select:focus,
.quarto-listing-filter .form-control:focus {
  background-color: #f8f6f2 !important;
  border-color: #3498db !important;
  box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.15) !important;
  color: #2c3e50 !important;
}

/* Dark theme styling - refined colors */
body.quarto-dark .quarto-listing-sort,
body.quarto-dark .quarto-listing-filter {
  background-color: #1a1a1a !important;
  border: 2px solid #3a3a3a !important;
  border-radius: 6px !important;
  color: #e8e0d8 !important;
  transition: all 0.3s ease !important;
}

body.quarto-dark .quarto-listing-sort .form-select,
body.quarto-dark .quarto-listing-filter .form-control {
  background-color: #1a1a1a !important;
  border: 1px solid #3a3a3a !important;
  color: #e8e0d8 !important;
  font-weight: 500 !important;
}

body.quarto-dark .quarto-listing-sort .input-group-text {
  background-color: #e8e0d8 !important;
  border: 1px solid #e8e0d8 !important;
  color: #1a1a1a !important;
  font-weight: 600 !important;
}

body.quarto-dark .quarto-listing-sort .form-select:focus,
body.quarto-dark .quarto-listing-filter .form-control:focus {
  background-color: #1a1a1a !important;
  border-color: #e8e0d8 !important;
  box-shadow: 0 0 0 0.2rem rgba(232, 224, 216, 0.15) !important;
  color: #e8e0d8 !important;
}

/* Enhanced hover effects */
.quarto-listing-sort:hover,
.quarto-listing-filter:hover {
  border-color: #3498db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2) !important;
}

body.quarto-dark .quarto-listing-sort:hover,
body.quarto-dark .quarto-listing-filter:hover {
  border-color: #e8e0d8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(232, 224, 216, 0.2) !important;
}

/* Dropdown styling for better visibility */
.quarto-listing-sort .form-select option,
.quarto-listing-filter .form-control option {
  background-color: #f8f6f2 !important;
  color: #2c3e50 !important;
}

body.quarto-dark .quarto-listing-sort .form-select option,
body.quarto-dark .quarto-listing-filter .form-control option {
  background-color: #1a1a1a !important;
  color: #e8e0d8 !important;
}

/* Magnifying glass icon styling for filter */
.quarto-listing-filter .input-group-text i,
.quarto-listing-filter .input-group-text svg,
.quarto-listing-filter .input-group-text .bi,
.quarto-listing-filter .input-group-text .fas,
.quarto-listing-filter .input-group-text .far,
.quarto-listing-filter .input-group-text .fab {
  color: #2c3e50 !important;
  opacity: 1 !important;
}

body.quarto-dark .quarto-listing-filter .input-group-text i,
body.quarto-dark .quarto-listing-filter .input-group-text svg,
body.quarto-dark .quarto-listing-filter .input-group-text .bi,
body.quarto-dark .quarto-listing-filter .input-group-text .fas,
body.quarto-dark .quarto-listing-filter .input-group-text .far,
body.quarto-dark .quarto-listing-filter .input-group-text .fab {
  color: #1a1a1a !important;
  opacity: 1 !important;
}

/* Additional icon visibility fixes */
.quarto-listing-filter .input-group-text * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

body.quarto-dark .quarto-listing-filter .input-group-text * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Fix sidebar border in dark mode */
body.quarto-dark .sidebar,
body.quarto-dark .margin-sidebar,
body.quarto-dark #quarto-margin-sidebar {
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Ensure sidebar background matches dark theme */
body.quarto-dark .sidebar,
body.quarto-dark .margin-sidebar,
body.quarto-dark #quarto-margin-sidebar {
  background-color: #141414 !important;
}

/* Comprehensive TOC border fixes for both light and dark modes */
#quarto-margin-sidebar,
.margin-sidebar,
.sidebar {
  border: none !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* TOC specific styling to remove any borders */
#TOC,
#quarto-toc,
.quarto-toc {
  border: none !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Additional fixes for TOC container elements */
#quarto-margin-sidebar .quarto-listing-category {
  border: none !important;
  background: var(--bs-body-bg) !important;
  z-index: 10 !important;
  position: relative !important;
  padding: 15px !important;
  border-radius: 5px !important;
  margin-bottom: 10px !important;
}

#quarto-margin-sidebar .quarto-listing-category-title {
  border: none !important;
  background: var(--bs-body-bg) !important;
}

#quarto-margin-sidebar .quarto-listing-category .category {
  border: none !important;
  background: transparent !important;
}

/* Fix for any remaining border issues in TOC area */
body.quarto-dark #quarto-margin-sidebar,
body.quarto-dark .margin-sidebar,
body.quarto-dark .sidebar {
  border: none !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background-color: #141414 !important;
}

/* Dark mode category menu background */
body.quarto-dark #quarto-margin-sidebar .quarto-listing-category {
  border: none !important;
  background: #141414 !important;
  z-index: 10 !important;
  position: relative !important;
  padding: 10px !important;
  border-radius: 5px !important;
}

/* Dark mode category title background */
body.quarto-dark #quarto-margin-sidebar .quarto-listing-category-title {
  border: none !important;
  background: #141414 !important;
}

/* Ensure TOC elements don't have any borders */
body.quarto-dark #TOC,
body.quarto-dark #quarto-toc,
body.quarto-dark .quarto-toc {
  border: none !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}