/**
 * Category copy block: container width, and the FAQ accordion.
 *
 * The copy renders below the testimonials section, outside the WooCommerce loop wrapper,
 * so it has no container of its own. The width here is the same one the rest of the
 * archive uses (.evolve-woo-loop-toolbar / .page-header in the theme's app.css):
 * max-width 1440px, 20px gutters, 32px from the sm breakpoint, flush at lg.
 *
 * The accordion reproduces the nested-accordion widget on the contact page so the two
 * read as one component. Every value is taken from that widget's saved Elementor
 * settings — black rows turning green on hover and when open, 1rem radius,
 * 1rem/3.25rem padding, 1.25rem/600 titles, #F3F3F3 answer panel at 2rem/3.25rem,
 * 0.25rem below the title, 1rem between items.
 *
 * The chevrons are the same two SVGs the widget points at, inlined as data URIs. The
 * widget stores them as absolute production URLs, which would 404 on any other
 * environment; inlining keeps the component environment-agnostic and saves two requests.
 */

.evolve-category-copy {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 1.25rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 640px) {
  .evolve-category-copy {
    padding-inline: 2rem;
  }
}

@media (min-width: 1024px) {
  .evolve-category-copy {
    padding-inline: 0;
  }
}

/* ---------------------------------------------------------------- FAQ -- */

.evolve-category-copy .evolve-faq__item {
  margin: 0 0 1rem;
  border: 0;
  padding: 0;
}

.evolve-category-copy .evolve-faq__item:last-child {
  margin-bottom: 0;
}

.evolve-category-copy .evolve-faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 3.25rem;
  border-radius: 1rem;
  background: #000;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Both are needed: WebKit draws a marker element, everything else uses ::marker. */
.evolve-category-copy .evolve-faq__item > summary::-webkit-details-marker {
  display: none;
}

.evolve-category-copy .evolve-faq__item > summary::marker {
  content: '';
}

.evolve-category-copy .evolve-faq__item > summary:hover,
.evolve-category-copy .evolve-faq__item[open] > summary {
  background: #00be59;
  color: #000;
}

/* The chevron is a fixed 36px block in the flex row, matching the widget's icon. */
.evolve-category-copy .evolve-faq__item > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  opacity: 1;
  float: none;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><rect width="36" height="36" rx="9" fill="%2300BE59"/><path d="M12.5 15.25L18 20.75L23.5 15.25" stroke="black" stroke-width="1.5" stroke-linecap="round"/></svg>');
  background-repeat: no-repeat;
  background-size: 36px 36px;
}

.evolve-category-copy .evolve-faq__item[open] > summary::after {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><rect width="36" height="36" rx="9" transform="matrix(1 0 0 -1 0 36)" fill="black"/><path d="M12.5 20.75L18 15.25L23.5 20.75" stroke="%2300BE59" stroke-width="1.5" stroke-linecap="round"/></svg>');
}

.evolve-category-copy .evolve-faq__item > summary:focus-visible {
  outline: 2px solid #00be59;
  outline-offset: 3px;
}

/* Answer panel: its own rounded block, 0.25rem below the title. */
.evolve-category-copy .evolve-faq__item > :not(summary) {
  margin: 0;
  padding: 2rem 3.25rem;
  border-radius: 1rem;
  background: #f3f3f3;
  color: #000;
}

.evolve-category-copy .evolve-faq__item > summary + :not(summary) {
  margin-top: 0.25rem;
}

@media (max-width: 767px) {
  .evolve-category-copy .evolve-faq__item > summary,
  .evolve-category-copy .evolve-faq__item > :not(summary) {
    padding: 1rem;
  }

  .evolve-category-copy .evolve-faq__item > summary {
    font-size: 1.0625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .evolve-category-copy .evolve-faq__item > summary {
    transition: none;
  }
}