/* Help/FAQ section — responsive two-column layout from 777px */
.faq { padding: 32px 0; }
.faq .container { max-width: var(--container-max); }
.faq .section-title h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.faq-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.faq-item {
  background: #fff;
  border: 1px solid rgba(12,35,64,0.14);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(12,35,64,0.10);
  /* Theme accent for project color structure */
  border-left: 4px solid var(--faq-accent, var(--tg-pine));
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.faq-question h3 { margin: 0; font-size: 1.05rem; color: var(--tg-navy); }
.faq-question i { color: var(--faq-accent, var(--tg-pine)); transition: transform .2s ease; }

.faq-answer { display: none; margin-top: 10px; color: var(--tg-charcoal); }
.faq-item.active .faq-answer { display: block; }
.faq-item.active { border-color: var(--faq-accent, var(--tg-pine)); box-shadow: 0 10px 28px rgba(12, 35, 64, 0.12); }
.faq-item.active .faq-question i { transform: rotate(180deg); }

/* Project theme structure colors mapped to brand tokens */
.faq-item.pine { --faq-accent: var(--tg-pine); }
.faq-item.beer { --faq-accent: var(--tg-beer); }
.faq-item.navy { --faq-accent: var(--tg-navy); }
.faq-item.teal { --faq-accent: var(--tg-teal); }
.faq-item.coral { --faq-accent: var(--tg-coral); }

/* Two columns on 777px and up */
@media (min-width: 777px) {
  .faq-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ultra-small stability */
@media (max-width: 370px) {
  .faq-item { padding: 12px; }
  .faq-question h3 { font-size: 1rem; }
}