/* ==========================================================================
   FAQ — a heading over questions that open in place.

   Measured off the live Overviews at 1440, 810 and 390, 2026-09-24. The
   heading is 360px wide; the questions sit 50px under it, the full column
   wide, ruled apart, the plus at the end (2026-10-10). Native <details>.
   ========================================================================== */

.vv-r-faq__body {
  display: flex;
  flex-direction: column;
  gap: var(--vv-section-head-gap);
}

/* The heading centred over the questions, on every page and width, and
   on one line: its live break is dropped (user, 2026-10-10). */
.vv-r-faq__heading {
  max-width: var(--vv-measure-800);
  margin-inline: auto;
  text-align: center;
}

/* The whole section on one centre line: the questions an 800 column
   centred under the heading (user, 2026-10-10). */
.vv-r-faq__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--vv-measure-800);
  margin-inline: auto;
}

/* Rows between separators, a line over the first and under each
   (user, 2026-10-10, after constancehotels.com). */
.vv-r-faq__item {
  border-block-end: 1px solid var(--vv-color-line);
}
.vv-r-faq__item:first-child { border-block-start: 1px solid var(--vv-color-line); }

/* The question, then the plus at the row's end. */
.vv-r-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vv-gap-20);
  padding-block: var(--vv-gap-10);
  cursor: pointer;
  list-style: none;
}

.vv-r-faq__question::-webkit-details-marker { display: none; }

.vv-r-faq__item[open] > .vv-r-faq__question { padding-block-end: var(--vv-gap-5); }

.vv-r-faq__question:focus-visible {
  outline: 2px solid var(--vv-color-focus);
  outline-offset: 2px;
}

/* Plus when closed, minus when open: two 2px bars, 14px long, in a 40px box. */
.vv-r-faq__icon {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
}

.vv-r-faq__icon::before,
.vv-r-faq__icon::after {
  content: "";
  position: absolute;
  background-color: var(--vv-color-icon-quiet);
}

.vv-r-faq__icon::before { top: 19px; left: 13px; width: 14px; height: 2px; border-radius: 1px; }
.vv-r-faq__icon::after { top: 13px; left: 19px; width: 2px; height: 14px; border-radius: 10px; }
.vv-r-faq__item[open] .vv-r-faq__icon::after { display: none; }

/* The answer lines up under the question, clear of the plus. */
.vv-r-faq__answer {
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-10);
  padding: 0 var(--vv-gap-40) var(--vv-gap-20) 0;
}

/* Links inside an answer, as live: the rust colour, underlined 1px, 4px
   below, their text semibold. Live has no hover change. */
.vv-r-faq__answer a {
  color: var(--vv-color-text-link-inline);
  text-decoration: underline 1px;
  text-underline-offset: 4px;
}