/*
 * Rotaflow FAQ accordion — collapsible Question/Answer sections inside
 * journal post_content (rotaflow_faq_items meta rendered inline).
 *
 * HOW TO CUSTOMIZE:
 * Every visual knob lives in the --rf-faq-* custom properties below. Override
 * them by redeclaring any subset on `.rf-faq` in a child CSS file, Elementor's
 * Custom CSS panel, or the Customizer's Additional CSS — no need to touch the
 * rules further down. Example:
 *
 *   .rf-faq { --rf-faq-accent: #ff6a00; --rf-faq-radius: 4px; }
 */

.rf-faq {
  --rf-faq-border-color: #e3e6ea;
  --rf-faq-radius: 10px;
  --rf-faq-spacing: 0.5rem;          /* gap between accordion items */
  --rf-faq-bg: #ffffff;
  --rf-faq-bg-hover: #f7f9fb;
  --rf-faq-question-color: #0b2545;
  --rf-faq-question-size: 1.05rem;
  --rf-faq-question-weight: 700;
  --rf-faq-question-padding-y: 1.1rem;
  --rf-faq-question-padding-x: 1.25rem;
  --rf-faq-answer-color: #45505c;
  --rf-faq-answer-padding-x: 1.25rem;
  --rf-faq-answer-padding-b: 1.25rem;
  --rf-faq-icon-color: #252B37;
  --rf-faq-icon-size: 1.5rem;
  --rf-faq-transition: 0.25s ease;
}

.rf-faq {
  margin: 1.5rem 0;
}

.rf-faq__item {
  border: 1px solid var(--rf-faq-border-color);
  border-radius: var(--rf-faq-radius);
  background: var(--rf-faq-bg);
  margin-bottom: var(--rf-faq-spacing);
  overflow: hidden;
}

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

.rf-faq__question {
  margin: 0;
}

.rf-faq__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: var(--rf-faq-question-padding-y) var(--rf-faq-question-padding-x);
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: var(--rf-faq-question-color);
  font-size: var(--rf-faq-question-size);
  font-weight: var(--rf-faq-question-weight);
  font-family: inherit;
  transition: background var(--rf-faq-transition);
}

.rf-faq__toggle:hover,
.rf-faq__toggle:focus-visible {
  background: var(--rf-faq-bg-hover);
}

.rf-faq__toggle:focus-visible {
  outline: 2px solid var(--rf-faq-question-color);
  outline-offset: -2px;
}

/* Chevron (design 1124-6635): a down-chevron when collapsed, rotating 180deg to
   an up-chevron when open. Drawn as a CSS mask so it recolours with the icon var. */
.rf-faq__icon {
  flex: none;
  width: var(--rf-faq-icon-size);
  height: var(--rf-faq-icon-size);
  background-color: var(--rf-faq-icon-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.66667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2014L16%2022L24%2014%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.66667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2014L16%2022L24%2014%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  transition: transform var(--rf-faq-transition);
}

/* open: flip to an up-chevron and deepen to navy (design uses #001D36 when open) */
.rf-faq__item.is-open .rf-faq__icon {
  transform: rotate(180deg);
  background-color: #001D36;
}

.rf-faq__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--rf-faq-transition);
}

.rf-faq__item.is-open .rf-faq__answer-wrap {
  grid-template-rows: 1fr;
}

.rf-faq__answer {
  min-height: 0;
  overflow: hidden;
}

.rf-faq__answer-inner {
  padding: 0 var(--rf-faq-answer-padding-x) var(--rf-faq-answer-padding-b);
  color: var(--rf-faq-answer-color);
}

.rf-faq__answer-inner > *:first-child {
  margin-top: 0;
}

.rf-faq__answer-inner > *:last-child {
  margin-bottom: 0;
}

.rf-faq__answer-inner img {
  max-width: 100%;
  height: auto;
}