/**
 * Front-end FAQ styles.
 *
 * Every colour is a custom property with a theme-derived fallback, so an unset
 * option inherits from the active theme instead of hard-coding a value. The
 * renderer sets only the properties the admin actually chose.
 *
 * Fonts are deliberately never declared here: the heading is a real <h2> and so
 * picks up the theme's heading styles, and the rest inherits the body font.
 */

.gtwo-faq {
  --gtwo-faq-accent: var(--wp--preset--color--accent-3, currentColor);
  --gtwo-faq-card-bg: var(--wp--preset--color--base, #fff);
  --gtwo-faq-border: color-mix(in srgb, currentColor 15%, transparent);
  --gtwo-faq-radius: 0.75rem;

  background-color: var(--gtwo-faq-bg, transparent);
  padding-block: var(--wp--preset--spacing--50, 3.5rem);
  padding-inline: var(--wp--custom--spacing--outer, 1.25rem);
  color: var(--wp--preset--color--contrast, inherit);
}

.gtwo-faq__inner {
  max-width: 900px;
  margin-inline: auto;
}

.gtwo-faq__heading {
  margin: 0 0 1.5rem;
  color: var(--gtwo-faq-title-color, inherit);
  text-align: center;
}

/* Cards */

.gtwo-faq__item {
  margin-bottom: 1.25rem;
  background-color: var(--gtwo-faq-card-bg);
  border: 1px solid var(--gtwo-faq-border);
  border-inline-start: 5px solid var(--gtwo-faq-accent);
  /* border-start-end-radius: var( --gtwo-faq-radius );
	border-end-end-radius: var( --gtwo-faq-radius ); */
  overflow: hidden;
}

.gtwo-faq__item:last-child {
  margin-bottom: 0;
}

.gtwo-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  color: var(--gtwo-faq-question-color, inherit);
  font-weight: var(--gtwo-faq-question-weight, 600);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

/* Hide the native marker so the chevron below is the only indicator. */
.gtwo-faq__question::-webkit-details-marker {
  display: none;
}

.gtwo-faq__question::after {
  content: "";
  flex: 0 0 auto;
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid var(--gtwo-faq-accent);
  border-bottom: 2px solid var(--gtwo-faq-accent);
  transform: rotate(45deg) translate(-0.12em, -0.12em);
  transition: transform 0.2s ease;
}

.gtwo-faq__item[open] > .gtwo-faq__question::after {
  transform: rotate(-135deg) translate(-0.12em, -0.12em);
}

.gtwo-faq__answer {
  padding: 1.05rem 1.25rem;
  background-color: color-mix(
    in srgb,
    var(--gtwo-faq-accent) 6%,
    var(--gtwo-faq-card-bg)
  );
  border-top: 1px solid var(--gtwo-faq-border);
  color: var(--gtwo-faq-answer-color, inherit);
}

.gtwo-faq__answer > :first-child {
  margin-top: 0;
}

.gtwo-faq__answer > :last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .gtwo-faq__question::after {
    transition: none;
  }
}