/* ARJO — FAQ section.
   Values come from theme.json (--wp--preset--* / --wp--custom--*) only. */

.arjo-faq__layout {
  display: grid;
  gap: var(--wp--preset--spacing--80);
}
.arjo-faq__aside {
  display: grid;
  gap: var(--wp--preset--spacing--50);
  align-content: start;
}

.arjo-faq__item {
  border-bottom: var(--wp--custom--border-hairline) solid var(--wp--preset--color--line);
}
.arjo-faq__item:first-child {
  border-top: var(--wp--custom--border-hairline) solid var(--wp--preset--color--line);
}

/* The question is a heading AND the accordion trigger, so the h3 carries no
   type of its own — everything is set on the button inside it. */
.arjo-faq__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.arjo-faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--50);
  width: 100%;
  margin: 0;
  padding: var(--wp--preset--spacing--50) 0;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: left;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  font-weight: var(--wp--custom--weight-medium);
  letter-spacing: var(--wp--custom--tracking-snug);
  line-height: var(--wp--custom--leading-snug);
  color: var(--wp--preset--color--contrast);
  cursor: pointer;
  transition: color var(--wp--custom--duration-base) var(--wp--custom--ease-standard);
}
.arjo-faq__question:hover,
.arjo-faq__question:focus-visible {
  color: var(--wp--preset--color--accent);
}

/* A plus that rotates into a minus. */
.arjo-faq__sign {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.35em;
}
.arjo-faq__sign::before,
.arjo-faq__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: var(--wp--custom--border-hairline);
  background-color: currentColor;
  transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-standard);
}
.arjo-faq__sign::after { transform: rotate(90deg); }
.arjo-faq__question[aria-expanded="true"] .arjo-faq__sign::after { transform: rotate(0deg); }

/* Open by default so the answers are never stranded invisible if the script
   fails; the script adds .is-ready, which is what actually collapses them. */
.arjo-faq__answer {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--wp--custom--duration-base) var(--wp--custom--ease-standard);
}
.arjo-faq.is-ready .arjo-faq__answer { grid-template-rows: 0fr; }
.arjo-faq__answer > div { overflow: hidden; }
.arjo-faq.is-ready .arjo-faq__item.is-open .arjo-faq__answer { grid-template-rows: 1fr; }
.arjo-faq__answer p {
  margin: 0;
  padding-bottom: var(--wp--preset--spacing--60);
  max-width: var(--wp--custom--layout-measure);
  color: var(--wp--preset--color--ink-secondary);
  text-wrap: pretty;
}
.arjo-faq__answer p + p { padding-top: var(--wp--preset--spacing--30); }

@media (prefers-reduced-motion: reduce) {
  .arjo-faq__answer,
  .arjo-faq__sign::before,
  .arjo-faq__sign::after { transition: none; }
}

@media (min-width: 62rem) {
  .arjo-faq__layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--wp--custom--layout-gap);
    align-items: start;
  }
  .arjo-faq__aside {
    grid-column: 1 / span 4;
    position: sticky;
    top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--80));
  }
  .arjo-faq__list { grid-column: 6 / -1; }
}

/* The editor canvas scrolls independently, so sticky would strand the aside. */
.editor-styles-wrapper .arjo-faq__aside { position: static; }
.editor-styles-wrapper .arjo-faq .arjo-faq__answer { grid-template-rows: 1fr; }