/* Custom CSS for FAQ section */

/* Base styles for FAQ item container */
.faq-item-container {
  margin-bottom: 0.10rem; /* mb-4 */
  border-radius: 0.5rem; /* rounded-lg */
  overflow: hidden;
  border: 1px solid #374151; /* border border-gray-700 */
  transition: border-color 300ms ease-in-out; /* transition-all duration-300 ease-in-out */
}

.faq-item-container:hover {
  border-color: #ffffff; /* hover:border-purple-500 */
}

/* Styles for the FAQ question button */
.faq-question-button {
  width: 100%; /* w-full */
  text-align: left; /* text-left */
  padding: 1.5rem; /* p-6 */
  background-color: #004687; /* bg-gray-800 */
  display: flex; /* flex */
  justify-content: space-between; /* justify-between */
  align-items: center; /* items-center */
  font-size: 1rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  color: #ffffff; /* text-purple-400 */
  transition: background-color 300ms ease-in-out, color 300ms ease-in-out; /* transition-colors duration-300 */
  outline: none; /* focus:outline-none */
  cursor: pointer;
}

.faq-question-button:hover {
  background-color: #002b53; /* hover:bg-gray-700 */
  color: #fff; /* hover:text-white */
}

/* Styles for the FAQ answer content */
.faq-answer-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 500ms ease-in-out, padding 500ms ease-in-out; /* transition-max-height duration-500 ease-in-out */
  color: #d1d5db; /* text-gray-300 */
  background-color: #001d38; /* bg-gray-850, custom color defined in previous iteration */
}

.faq-answer-content p {
  padding: 1.0rem; /* p-6 */
  line-height: 2.5;
}

/* Show state for the FAQ answer */
.faq-answer-content.show {
  max-height: 400px; /* Adjust based on expected content height */
  padding-top: 0; /* Remove padding if added by the default p-6. The p tag inside handles it. */
  padding-bottom: 0; /* Same as above */
}

/* Rotate arrow when FAQ is open */
.faq-arrow-icon {
  width: 1.5rem; /* w-6 */
  height: 1.5rem; /* h-6 */
  transform: rotate(0deg);
  transition: transform 300ms ease-in-out; /* transform transition-transform duration-300 */
}

.faq-question-button.active .faq-arrow-icon {
  transform: rotate(180deg);
}