/* ESG Rated — Yoast FAQ accordion
   Styles every Yoast FAQ block (.schema-faq) like the site accordion: thin
   dividers, big question rows, a +/- toggle, collapsible answers.
   The collapse only kicks in once faq-accordion.js adds the `faq-ready` class,
   so with JS disabled the FAQ is still a readable styled list (never stuck shut). */

.schema-faq,
.wp-block-yoast-faq-block {
  border-top: 1px solid #e6e8e8;
  /* no max-width - the FAQ fills the full width of whatever row/column it sits in */
}

.schema-faq-section {
  border-bottom: 1px solid #e6e8e8;
}

.schema-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 22px 4px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  color: #0a2e2e;
}

.schema-faq-answer {
  margin: 0;
  padding: 0 4px 22px;
  font-size: 16px;
  line-height: 1.65;
  color: #555b5d;
}

/* interactive accordion — active only once the JS marks the block ready */
.faq-ready .schema-faq-question {
  cursor: pointer;
  user-select: none;
  transition: color .15s;
}

.faq-ready .schema-faq-question:hover {
  color: #00c43b;
}

.faq-ready .schema-faq-question::after {
  content: "+";
  flex: none;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: #9aa3a3;
  transition: color .15s;
}

.faq-ready .schema-faq-question:hover::after {
  color: #00c43b;
}

.faq-ready .schema-faq-section.open .schema-faq-question::after {
  content: "\2212"; /* minus sign */
  color: #00c43b;
}

.faq-ready .schema-faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height .35s ease, opacity .25s ease, padding .35s ease;
}

.faq-ready .schema-faq-section.open .schema-faq-answer {
  max-height: 1500px;
  opacity: 1;
  padding-bottom: 24px;
}