/* FAQ page-specific styles (minimal, complementary to base.css) */

.breadcrumb a { color: var(--color-primary-light); }
.breadcrumb a:hover { color: var(--color-accent); }

.faq-hero {
  background: linear-gradient(180deg, var(--color-background-elevated), var(--color-background-card));
}

/* FAQ items */
.faq-item details { position: relative; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.faq-item summary::-webkit-details-marker { display: none; }

/* Botanical caret */
.faq-item summary::before {
  content: '\25B6'; /* ▶ */
  color: var(--color-accent);
  transition: transform var(--duration-base) var(--ease-out);
}
.faq-item details[open] summary::before { transform: rotate(90deg); }

.faq-answer { color: var(--color-neutral-800); }
.faq-answer p + p { margin-top: var(--space-3); }

.faq-figure img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}

/* Controls */
.faq-controls .input { max-width: 520px; }
#faq-status { min-height: 1.25rem; }

/* Responsive tweaks */
@media (max-width: 768px) {
  .faq-controls .input { max-width: 100%; }
}