/* 
 * FAQ Page Specific Styles
 */ 

/* Style for active accordion buttons */
.accordion-button:not(.collapsed) {
  background-color: var(--primary) !important;
  color: white !important;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}

/* Change the arrow color to white when active */
.accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1) !important;
}

/* Ensure the focus outline is consistent with the primary color */
.accordion-button:focus {
  /* Remove the purple/pink border */
  box-shadow: none !important;
  border-color: rgba(var(--primary-rgb), 0.5);
  outline: none;
}

/* Ensure the hover state has a slight color change */
.accordion-button:hover {
  background-color: rgba(var(--primary-rgb), 0.1);
}

/* Active button hover should maintain primary color */
.accordion-button:not(.collapsed):hover {
  background-color: var(--primary) !important;
}

/* Light theme specific overrides */
:root.light-theme .accordion-button:not(.collapsed) {
  background-color: var(--primary) !important;
  color: white !important;
}

:root.light-theme .accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1) !important;
}

/* Ensure focus styles are consistent across themes */
:root.light-theme .accordion-button:focus {
  box-shadow: none !important;
  border-color: rgba(var(--primary-rgb), 0.5);
  outline: none;
}

.accordion-button:hover {
  background-color: white !important;
}

/* Content styling for better readability */
.faq-content p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.faq-content ul {
  margin-bottom: 1rem;
}

.faq-content li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* Strong text styling */
.faq-content strong {
  color: var(--primary);
  font-weight: 600;
}

/* FAQ Page - Remove top margin from accordion headers */
.accordion .accordion-item .accordion-header,
.accordion-item .accordion-header,
.accordion-header,
.faq-section .accordion .accordion-item .accordion-header {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}