/* ------------------------------------------------------------------
 * Block style variants for `core/list`.
 *
 * is-style-vmi-numbered : the numbered overview (Figma: Coast Guard "AUP Overview").
 *
 * The author writes an ORDINARY ordered list. The numerals and the rules between items
 * are drawn with a CSS counter, so the content stays semantic (a real <ol>, with a real
 * nested <ul> where the design has sub-bullets) and there is nothing for an author to
 * lay out by hand.
 *
 * Figma: numeral Trajan 60px / 63px line, 50px gutter + 24px gap, rule 1px #BCBCBC,
 * 32px of air either side of the rule. The numeral colour is #AE122A on Coast Guard,
 * which is that page's BRANCH ACCENT - so it reads var(--rotc-accent) and follows the
 * branch rather than being typed. Falls back to VMI red off a themed page.
 * ------------------------------------------------------------------ */

.wp-block-list.is-style-vmi-numbered {
  margin: 0;
  padding: 0;
  counter-reset: vmi-numbered;
}

/*
 * Kill the default "1." marker, or it renders alongside the counter.
 *
 * This needs the theme's own selector shape to win: vmi.sass sets
 * `.entry-content ol.wp-block-list { list-style-type: decimal }` at (0,2,1), which
 * outranks a plain `.wp-block-list.is-style-vmi-numbered` at (0,2,0). Matching its shape
 * lands at (0,3,1) and wins on merit rather than with !important. The editor half mirrors
 * the theme's own `:is(.entry-content, .editor-styles-wrapper)` convention, so the style
 * looks the same to an author as it does on the page.
 */
:is(.entry-content, .editor-styles-wrapper) ol.wp-block-list.is-style-vmi-numbered {
  list-style: none;
}

.wp-block-list.is-style-vmi-numbered > li {
  counter-increment: vmi-numbered;
  position: relative;
  padding-left: 74px; /* 50px numeral + 24px gap */
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #BCBCBC;
}

.wp-block-list.is-style-vmi-numbered > li:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.wp-block-list.is-style-vmi-numbered > li::before {
  content: counter(vmi-numbered);
  position: absolute;
  left: 0;
  top: 32px; /* clears the li's padding-top so the numeral sits on the first text line */
  width: 50px;
  font-family: "Trajan Pro", serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 63px;
  color: var(--rotc-accent, #AE122A);
}

.wp-block-list.is-style-vmi-numbered > li:first-child::before {
  top: 0;
}

/*
 * `list-style` inherits, so the `none` above would strip the sub-bullets from the nested
 * list in item 4. Put them back.
 */
.wp-block-list.is-style-vmi-numbered ul {
  list-style: disc;
}

/*
 * Mobile (Figma node 4264:22830): the desktop side-by-side layout (numeral in a
 * 74px left column) leaves the copy a very narrow measure at 393px. Figma instead
 * STACKS the numeral — centered above each item, with the copy full-width beneath —
 * keeping the numeral at its full 60px. Component-scoped, so it follows the list to
 * any page.
 */
@media (max-width: 768px) {
  .wp-block-list.is-style-vmi-numbered > li {
    padding-left: 0;
    padding-top: 87px; /* 63px numeral + 24px gap to the copy */
    margin-top: 32px;
  }

  .wp-block-list.is-style-vmi-numbered > li:first-child {
    padding-top: 63px;
  }

  .wp-block-list.is-style-vmi-numbered > li::before {
    left: 50%;
    transform: translateX(-50%);
    top: 24px; /* sits just below the top rule */
    width: auto;
    text-align: center;
  }

  .wp-block-list.is-style-vmi-numbered > li:first-child::before {
    top: 0;
  }
}