/**
 * vBriefings Staircase System
 * v1.2.8-css
 *
 * - details nesting staircase
 * - details CONTENT indents to align with summary text (via --vb-details-content-extra)
 * - bulleted paragraphs via display:list-item (EXCLUDES .vbNote)
 * - h4 does NOT indent following content
 * - h5 heading is indented one step under h4
 * - h5 following content indents via .vbH5Section wrapper (created by JS)
 * - vbNumberedContent adds an additional offset (--vb-numbered-extra)
 * - lists after bulleted paragraphs indent one extra step
 * - vbNote aligns to its level (and can nest under a bulleted paragraph)
 *
 * Scope: .vbContentGroup only
 */

.vbContentGroup {
  --vb-step: 20px;
  --vb-level: 0;
  --vb-base-indent: calc(var(--vb-level) * var(--vb-step));

  /* h5 section indent (enabled by JS wrapper) */
  --vb-h5-extra: 0px;

  /* Numbered content: additional offset (default 0 unless inside .vbNumberedContent) */
  --vb-numbered-extra: 0px;

  /* Details content indent (aligns content with summary text, past the caret) */
  --vb-details-content-extra: 0px;

  /* Bulleted paragraph offset */
  --vb-bullet-offset: var(--vb-step);
}

/* If .vbContentGroup is inside .vbNumberedContent, apply the additional offset */
.vbNumberedContent .vbContentGroup {
  --vb-numbered-extra: 10px; /* change this if desired */
}

/* ---------------------------------------------------------
   DETAILS LEVEL MAP
   --------------------------------------------------------- */

.vbContentGroup details.wp-block-details { --vb-level: 1; }
.vbContentGroup details.wp-block-details details.wp-block-details { --vb-level: 2; }
.vbContentGroup details.wp-block-details details.wp-block-details details.wp-block-details { --vb-level: 3; }
.vbContentGroup details.wp-block-details details.wp-block-details details.wp-block-details details.wp-block-details { --vb-level: 4; }
.vbContentGroup details.wp-block-details details.wp-block-details details.wp-block-details details.wp-block-details details.wp-block-details { --vb-level: 5; }
.vbContentGroup details.wp-block-details details.wp-block-details details.wp-block-details details.wp-block-details details.wp-block-details details.wp-block-details { --vb-level: 6; }

/* ---------------------------------------------------------
   DETAILS: CONTENT ALIGNMENT
   - Inside any details block, indent content one step so it aligns
     with summary text (not the caret)
   --------------------------------------------------------- */

.vbContentGroup details.wp-block-details {
  --vb-details-content-extra: var(--vb-step);
}

/* ---------------------------------------------------------
   DETAILS STAIRCASE
   --------------------------------------------------------- */

.vbContentGroup details.wp-block-details {
  margin-inline-start: calc(
    var(--vb-base-indent) +
    var(--vb-numbered-extra) +
    var(--vb-details-content-extra)
  );
}

.vbContentGroup details.wp-block-details > summary {
  margin-inline-start: 0;
}

/* ---------------------------------------------------------
   h5 SECTION WRAPPER (inserted by JS)
   --------------------------------------------------------- */

.vbContentGroup .vbH5Section {
  --vb-h5-extra: var(--vb-step);
}

/* ---------------------------------------------------------
   HEADINGS
   --------------------------------------------------------- */

.vbContentGroup :is(h4) {
  margin-inline-start: calc(var(--vb-base-indent) + var(--vb-numbered-extra)) !important;
  margin-left: calc(var(--vb-base-indent) + var(--vb-numbered-extra)) !important;
}

/* h5 heading itself is nested one step under h4 */
.vbContentGroup :is(h5) {
  margin-inline-start: calc(var(--vb-base-indent) + var(--vb-numbered-extra) + var(--vb-step)) !important;
  margin-left: calc(var(--vb-base-indent) + var(--vb-numbered-extra) + var(--vb-step)) !important;
}

/* ---------------------------------------------------------
   PARAGRAPHS
   --------------------------------------------------------- */

/* vbNote aligns like a non-bulleted paragraph at its current level */
.vbContentGroup p.vbNote {
  margin-inline-start: calc(
    var(--vb-base-indent) +
    var(--vb-numbered-extra) +
    var(--vb-h5-extra) +
    var(--vb-details-content-extra)
  ) !important;

  margin-left: calc(
    var(--vb-base-indent) +
    var(--vb-numbered-extra) +
    var(--vb-h5-extra) +
    var(--vb-details-content-extra)
  ) !important;
}

.vbContentGroup .vbNoBullet p,
.vbContentGroup p.vbNoBullet {
  display: block !important;

  margin-inline-start: calc(
    var(--vb-base-indent) +
    var(--vb-numbered-extra) +
    var(--vb-h5-extra) +
    var(--vb-details-content-extra)
  ) !important;

  margin-left: calc(
    var(--vb-base-indent) +
    var(--vb-numbered-extra) +
    var(--vb-h5-extra) +
    var(--vb-details-content-extra)
  ) !important;
}

/* Bulleted paragraphs (EXCLUDES vbNote) */
.vbContentGroup p:not(.vbNoBullet):not(.vbNoIndent):not(.vbNote) {
  display: list-item;
  list-style-type: square;

  margin-inline-start: calc(
    var(--vb-base-indent) +
    var(--vb-numbered-extra) +
    var(--vb-h5-extra) +
    var(--vb-details-content-extra) +
    var(--vb-bullet-offset)
  ) !important;

  margin-left: calc(
    var(--vb-base-indent) +
    var(--vb-numbered-extra) +
    var(--vb-h5-extra) +
    var(--vb-details-content-extra) +
    var(--vb-bullet-offset)
  ) !important;
}

/* If vbNote immediately follows a bulleted paragraph, align under its text column */
.vbContentGroup p:not(.vbNoBullet):not(.vbNoIndent):not(.vbNote) + p.vbNote {
  margin-inline-start: calc(
    var(--vb-base-indent) +
    var(--vb-numbered-extra) +
    var(--vb-h5-extra) +
    var(--vb-details-content-extra) +
    var(--vb-bullet-offset)
  ) !important;

  margin-left: calc(
    var(--vb-base-indent) +
    var(--vb-numbered-extra) +
    var(--vb-h5-extra) +
    var(--vb-details-content-extra) +
    var(--vb-bullet-offset)
  ) !important;
}

/* ---------------------------------------------------------
   vbNoIndent
   --------------------------------------------------------- */

.vbContentGroup p.vbNoIndent,
.vbContentGroup .vbNoIndent p {
  display: block !important;

  margin-inline-start: calc(
    var(--vb-base-indent) +
    var(--vb-numbered-extra) +
    var(--vb-details-content-extra)
  ) !important;

  margin-left: calc(
    var(--vb-base-indent) +
    var(--vb-numbered-extra) +
    var(--vb-details-content-extra)
  ) !important;
}

/* ---------------------------------------------------------
   LISTS
   Baseline:
   - ul/ol starts at the current content column
   - padding adds one step so list item TEXT is indented
   --------------------------------------------------------- */

.vbContentGroup :where(ul, ol) {
  margin-inline-start: calc(
    var(--vb-base-indent) +
    var(--vb-numbered-extra) +
    var(--vb-h5-extra) +
    var(--vb-details-content-extra)
  ) !important;

  margin-left: calc(
    var(--vb-base-indent) +
    var(--vb-numbered-extra) +
    var(--vb-h5-extra) +
    var(--vb-details-content-extra)
  ) !important;

  padding-inline-start: var(--vb-step);
}

/* If a list follows a BULLETED paragraph, indent list ONE MORE step (nested sub-list feel). */
.vbContentGroup p:not(.vbNoBullet):not(.vbNoIndent):not(.vbNote) + :where(ul, ol) {
  margin-inline-start: calc(
    var(--vb-base-indent) +
    var(--vb-numbered-extra) +
    var(--vb-h5-extra) +
    var(--vb-details-content-extra) +
    var(--vb-step)
  ) !important;

  margin-left: calc(
    var(--vb-base-indent) +
    var(--vb-numbered-extra) +
    var(--vb-h5-extra) +
    var(--vb-details-content-extra) +
    var(--vb-step)
  ) !important;
}

/* Prevent nested list compounding */
.vbContentGroup :where(ul, ol) :where(ul, ol) {
  margin-inline-start: 0 !important;
  margin-left: 0 !important;
}