/* FAQ content-only alignment with the existing Legal page design system.
 * The ResourceHero banner and all FAQ content/behaviour remain untouched.
 */
section:has([data-faq-group]) {
  background: #f2f2f2;
  color: var(--efp-deep-wine, #2d0b1a);
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

section:has([data-faq-group]) > div {
  gap: 2rem;
}

section:has([data-faq-group]) > div > aside {
  overflow: hidden;
  border-color: rgba(45, 11, 26, 0.12);
  border-radius: 1.5rem;
  background: #fff;
  color: var(--efp-deep-wine, #2d0b1a);
}

section:has([data-faq-group]) > div > aside > div {
  border-color: rgba(45, 11, 26, 0.12);
  color: #fff;
}

section:has([data-faq-group]) > div > aside > a {
  border-color: rgba(45, 11, 26, 0.12);
  background: #fff;
  color: var(--efp-deep-wine, #2d0b1a);
  font-size: 1rem;
  font-weight: 600;
}

section:has([data-faq-group]) > div > aside > a:hover,
section:has([data-faq-group]) > div > aside > a:focus-visible {
  background: #f8e8ee;
}

section:has([data-faq-group]) > div > div:last-child {
  overflow: hidden;
  border-top: 0;
  border-radius: 1.5rem;
  background: #fff;
  padding: 2rem 1.5rem;
  box-shadow: 0 18px 45px rgba(45, 11, 26, 0.08);
}

section:has([data-faq-group]) [data-faq-group] {
  border-color: rgba(45, 11, 26, 0.12);
}

section:has([data-faq-group]) [data-faq-group] > button {
  color: var(--efp-deep-wine, #2d0b1a);
}

section:has([data-faq-group]) [data-faq-group] > button > span {
  border-color: rgba(45, 11, 26, 0.3);
  color: var(--efp-deep-wine, #2d0b1a);
}

section:has([data-faq-group]) [data-faq-group] > button[aria-expanded="true"] > span {
  background: var(--efp-deep-wine, #2d0b1a);
  color: #fff;
}

section:has([data-faq-group]) .resource-faq-body {
  color: rgba(45, 11, 26, 0.76);
}

section:has([data-faq-group]) .resource-faq-body h2 {
  color: var(--efp-deep-wine, #2d0b1a);
}

section:has([data-faq-group]) .resource-faq-body a {
  color: var(--efp-rose, #98345f);
}

@media (min-width: 640px) {
  section:has([data-faq-group]) {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  section:has([data-faq-group]) > div > div:last-child {
    padding: 3rem 2.5rem;
  }
}

@media (min-width: 1024px) {
  section:has([data-faq-group]) > div {
    gap: 3rem;
  }

  section:has([data-faq-group]) > div > div:last-child {
    padding-right: 3.5rem;
    padding-left: 3.5rem;
  }
}