/* Enhanced FAQ Section Styles - Full Item Clickable */
.faq-section {
  background-color: var(--color-bg-primary, #ffffff);
}

.faq-list {
  max-width: var(--container-lg, 1024px);
  margin: 0 auto;
}

/* Make entire FAQ item clickable with enhanced styling */
.faq-item {
  border-bottom: 1px solid var(--color-border-light, #f2f4f7);
  margin-bottom: var(--spacing-2, 0.5rem);
  transition: background-color var(--transition-normal, 300ms) var(--transition-ease, cubic-bezier(0.4, 0, 0.2, 1)),
              transform var(--transition-fast, 150ms) var(--transition-ease, cubic-bezier(0.4, 0, 0.2, 1)),
              box-shadow var(--transition-normal, 300ms) var(--transition-ease, cubic-bezier(0.4, 0, 0.2, 1));
  cursor: pointer;
  padding: var(--spacing-6, 1.5rem);
  background-color: transparent;
}

.faq-item:last-child {
  border-bottom: none;
}

/* Style the question div as a flex container */
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-family-brand, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif);
  font-weight: var(--font-weight-semibold, 600);
  font-size: var(--font-size-xl, 1.125rem);
  color: var(--color-text-primary, #111827);
  cursor: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color var(--transition-normal, 300ms) var(--transition-ease, cubic-bezier(0.4, 0, 0.2, 1));
  pointer-events: none;
  margin: 0;
}

.faq-item:hover .faq-question {
  color: var(--color-primary-hover, #29323f);
}

/* Plus/minus icon styling */
.faq-question::after {
  content: '+';
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: var(--font-weight-normal, 400);
  transition: transform var(--transition-normal, 300ms) var(--transition-ease, cubic-bezier(0.4, 0, 0.2, 1)),
              color var(--transition-normal, 300ms) var(--transition-ease, cubic-bezier(0.4, 0, 0.2, 1));
  color: var(--color-text-secondary, #4b5563);
  flex-shrink: 0;
  margin-left: var(--spacing-4, 1rem);
}

.faq-item.open .faq-question::after {
  transform: rotate(45deg);
  color: var(--color-primary, #111827);
}

/* FAQ Answer Styles */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0;
  color: var(--color-text-secondary, #4b5563);
  opacity: 0;
  transform: translateY(-10px);
  transition: max-height var(--transition-normal, 300ms) var(--transition-ease, cubic-bezier(0.4, 0, 0.2, 1)),
              opacity var(--transition-normal, 300ms) var(--transition-ease, cubic-bezier(0.4, 0, 0.2, 1)),
              transform var(--transition-normal, 300ms) var(--transition-ease, cubic-bezier(0.4, 0, 0.2, 1)),
              padding var(--transition-normal, 300ms) var(--transition-ease, cubic-bezier(0.4, 0, 0.2, 1));
  line-height: 1.6;
}

.faq-item.open .faq-answer {
  max-height: 500px;
  padding-top: var(--spacing-6, 1.5rem);
  opacity: 1;
  transform: translateY(0);
}

/* Focus styles for accessibility */
.faq-item:focus {
  outline: 2px solid var(--color-primary, #111827);
  outline-offset: 2px;
}

.faq-item:focus:not(:focus-visible) {
  outline: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .faq-item {
    padding: var(--spacing-4, 1rem);
  }
  
  .faq-question {
    font-size: var(--font-size-base, 1rem);
  }
  
  .faq-question::after {
    font-size: var(--font-size-lg, 1.125rem);
  }
}