/* Guide renderer UI (TOC + accordion sections + FAQ)
   Goal: single unified block with internal dividers, not separate cards.
*/

.vb-guide__toc {
  margin: 14px 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  background: rgba(0,0,0,.02);
}
.vb-guide__tocTitle {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
}
.vb-guide__tocList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.vb-guide__tocLink {
  text-decoration: none;
  border-bottom: 1px dashed rgba(0,0,0,.25);
}
.vb-guide__tocLink:hover {
  border-bottom-style: solid;
}

/* Sections: ONE unified container */
.vb-guide__sections {
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  overflow: hidden; /* keeps rounded corners on internal rows */
  background: #fff;
  margin: 10px 0 16px;
}

/* Keep anchor jumps comfortable under sticky header */
.vb-guide__section {
  scroll-margin-top: 90px;
}

/* Remove card-like styling from each details row */
.vb-guide__details {
  border: 0;
  border-radius: 0;
  margin: 0;
  background: transparent;
}

/* Row separators */
.vb-guide__section + .vb-guide__section .vb-guide__details {
  border-top: 1px solid rgba(0,0,0,.08);
}

.vb-guide__summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 650;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Hide the default disclosure marker so we can use our own chevron */
.vb-guide__summary::-webkit-details-marker {
  display: none;
}

/* Left-side chevron (match FAQ) */
.vb-guide__summaryText {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.vb-guide__summaryText::before {
  content: "›";
  font-size: 24px;
  line-height: 1;
  opacity: .6;
  transition: transform .2s ease, opacity .2s ease;
}

/* Match FAQ: closed = right, open = down */
.vb-guide__details[open] > .vb-guide__summary .vb-guide__summaryText::before {
  transform: rotate(90deg);
  opacity: .85;
}

/* Return link aligned right, like the reference */
.vb-guide__return {
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px dashed rgba(0,0,0,.25);
  white-space: nowrap;
  opacity: .9;
}
.vb-guide__return:hover {
  border-bottom-style: solid;
  opacity: 1;
}

.vb-guide__content {
  padding: 0 16px 14px;
}

/* --- FAQ: ONE unified container with expandable rows --- */
.vb-feature--faq.guide-faq {
  margin: 18px 0;
}

/* Make the entire FAQ section the single outer block */
.vb-feature--faq.guide-faq {
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* Keep the FAQ title inside the block with consistent padding */
.vb-feature--faq.guide-faq > h2 {
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Support either structure:
   A) details are inside .vb-faq__list
   B) details are direct children of the section
*/
.vb-feature--faq.guide-faq .vb-faq__list {
  /* if present, it just acts as an inner wrapper */
}

.vb-feature--faq.guide-faq details,
.vb-feature--faq.guide-faq .vb-faq__item {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Row separators (works for both structures) */
.vb-feature--faq.guide-faq details + details,
.vb-feature--faq.guide-faq .vb-faq__item + .vb-faq__item {
  border-top: 1px solid rgba(0,0,0,.08);
}

.vb-faq__q {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 650;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

/* Hide the browser’s default disclosure marker (prevents double-arrow) */
.vb-faq__q::-webkit-details-marker { display: none; }
.vb-faq__q::marker { content: ""; }

/* Left-side chevron (match guide) */
.vb-faq__q::before {
  content: "›";
  display: inline-block; /* required so transform rotates reliably */
  font-size: 24px;
  line-height: 1;
  opacity: .6;
  transition: transform .2s ease, opacity .2s ease;
}

/* Closed = right, open = down */
.vb-faq__item[open] > .vb-faq__q::before {
  transform: rotate(90deg);
  opacity: .85;
}

/* Remove any right-side chevron from global styles (force off) */
.vb-feature--faq.guide-faq summary.vb-faq__q::after {
  content: none !important;
  display: none !important;
}
.vb-feature--faq.guide-faq summary::after {
  content: none !important;
  display: none !important;
}

.vb-faq__a {
  padding: 0 16px 14px;
}