/* Powershift bulleted lists: ruled, with an orange square (web catch-up, 23 Oct 2026).
   Front end AND editor canvas (enqueue_block_assets).

   "Bulleted lists site-wide get one treatment": the one the product page's Key applications
   and the case study's "What needed to be powered" already wear — each item a row on a
   hairline rule, an 8px orange square for the bullet. Here it reaches every core List block
   (the articles, the Service Model steps), so a list typed in the editor matches the ones the
   blocks draw. Ordered lists keep their numbers; a list nested inside another keeps the
   square but not the rules, so a sub-point reads as part of its row.

   The square sits on the FIRST line, not the item's middle: article bullets run to three or
   four lines, and a square halfway down a paragraph reads as a stray mark. The rule is mixed
   from the text colour, so it holds on the dark ground and on the articles' white paper. */

ul.wp-block-list {
	list-style: none;
	padding-inline-start: 0;
}
ul.wp-block-list > li {
	position: relative;
	margin: 0;
	padding: var(--wp--preset--spacing--s) 0 var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
ul.wp-block-list > li:last-child { border-bottom: 0; }
/* A list that OPENS its column or group starts flush, so its first line sits level with the
   copy beside it (Applications intro, 2 Nov — the same misalignment the application and
   product intros had on 28 Oct, fixed then in blocks.css for those blocks only). The first row
   loses its top padding and its square follows the type up. A list further down a column
   keeps the padding, which is the space between it and what is above. */
:is(.wp-block-column, .wp-block-group) > ul.wp-block-list:first-child { margin-top: 0; }
:is(.wp-block-column, .wp-block-group) > ul.wp-block-list:first-child > li:first-child { padding-top: 0; }
:is(.wp-block-column, .wp-block-group) > ul.wp-block-list:first-child > li:first-child::before { top: 0.5lh; }
ul.wp-block-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	/* half a line down from the row's top padding: centred on the first line of type */
	top: calc(var(--wp--preset--spacing--s) + 0.5lh);
	width: 8px;
	height: 8px;
	transform: translateY(-50%);
	background: var(--wp--preset--color--orange);
}
ul.wp-block-list ul.wp-block-list { margin-top: var(--wp--preset--spacing--xs); }
ul.wp-block-list ul.wp-block-list > li {
	padding-block: var(--wp--preset--spacing--xs);
	border-bottom: 0;
}
ul.wp-block-list ul.wp-block-list > li::before { top: calc(var(--wp--preset--spacing--xs) + 0.5lh); }

/* ---------- an icon beside a heading and its list (Website To-Do 161, 3 Nov) ----------
   The Benefits article sets each benefit as two columns: a resized icon (or, since 3 Nov, a
   glyph) on its own in the
   narrow one, a heading and a list in the wide one. The heading should sit level with the
   icon's middle and the list straight under the heading. In the editor a line break was put
   before each heading to push it down, which left a big gap above the list, so here: the
   leading break is ignored, the heading keeps no bottom margin, the list's first row loses
   most of its top padding, and on desktop (where the columns sit side by side) the icon is
   lifted so its middle meets the heading's first line. Stacked on a phone, nothing moves.
   The icons are ~100px tall and an h4 line ~22px, hence 11 − 50. */
:root { --pwr-iconrow-shift: calc(11px - 50px); }
.wp-block-columns:has(> .wp-block-column:first-child > :is(.wp-block-image.is-resized, .wp-block-powershift-glyph):only-child) > .wp-block-column:last-child > .wp-block-heading:first-child { margin-bottom: 0; }
.wp-block-columns:has(> .wp-block-column:first-child > :is(.wp-block-image.is-resized, .wp-block-powershift-glyph):only-child) > .wp-block-column:last-child > .wp-block-heading:first-child > br:first-child { display: none; }
.wp-block-columns:has(> .wp-block-column:first-child > :is(.wp-block-image.is-resized, .wp-block-powershift-glyph):only-child) > .wp-block-column:last-child > .wp-block-heading:first-child + ul.wp-block-list { margin-top: var(--wp--preset--spacing--xs); }
.wp-block-columns:has(> .wp-block-column:first-child > :is(.wp-block-image.is-resized, .wp-block-powershift-glyph):only-child) > .wp-block-column:last-child > .wp-block-heading:first-child + ul.wp-block-list > li:first-child { padding-top: var(--wp--preset--spacing--xs); }
.wp-block-columns:has(> .wp-block-column:first-child > :is(.wp-block-image.is-resized, .wp-block-powershift-glyph):only-child) > .wp-block-column:last-child > .wp-block-heading:first-child + ul.wp-block-list > li:first-child::before { top: calc(var(--wp--preset--spacing--xs) + 0.5lh); }
@media (min-width: 782px) {
	.wp-block-columns:has(> .wp-block-column:first-child > :is(.wp-block-image.is-resized, .wp-block-powershift-glyph):only-child):has(> .wp-block-column:last-child > .wp-block-heading:first-child) > .wp-block-column:first-child > .wp-block-image { margin-top: var(--pwr-iconrow-shift); }
	/* a glyph (md, 80px) in place of a legacy icon: half of 80 rather than half of 100 */
	.wp-block-columns:has(> .wp-block-column:first-child > :is(.wp-block-image.is-resized, .wp-block-powershift-glyph):only-child):has(> .wp-block-column:last-child > .wp-block-heading:first-child) > .wp-block-column:first-child > .wp-block-powershift-glyph { margin-top: calc(11px - 40px); margin-bottom: 0; }
}
/* Stacked (phone): the icon sits at the start of the line, not floated right, a little smaller,
   and close over its heading. */
@media (max-width: 781px) {
	.wp-block-columns:has(> .wp-block-column:first-child > :is(.wp-block-image.is-resized, .wp-block-powershift-glyph):only-child):has(> .wp-block-column:last-child > .wp-block-heading:first-child) { gap: var(--wp--preset--spacing--xs); }
	.wp-block-columns:has(> .wp-block-column:first-child > :is(.wp-block-image.is-resized, .wp-block-powershift-glyph):only-child):has(> .wp-block-column:last-child > .wp-block-heading:first-child) > .wp-block-column:first-child > :is(.wp-block-image, .wp-block-powershift-glyph) { float: none; margin: 0; }
	.wp-block-columns:has(> .wp-block-column:first-child > :is(.wp-block-image.is-resized, .wp-block-powershift-glyph):only-child):has(> .wp-block-column:last-child > .wp-block-heading:first-child) > .wp-block-column:first-child > .wp-block-powershift-glyph { --pwr-glyph-size: 64px !important; } /* the block prints its size inline */
	.wp-block-columns:has(> .wp-block-column:first-child > :is(.wp-block-image.is-resized, .wp-block-powershift-glyph):only-child):has(> .wp-block-column:last-child > .wp-block-heading:first-child) > .wp-block-column:first-child > .wp-block-powershift-glyph .pwr-glyph-frame { margin-inline-start: 0; }
	.wp-block-columns:has(> .wp-block-column:first-child > :is(.wp-block-image.is-resized, .wp-block-powershift-glyph):only-child):has(> .wp-block-column:last-child > .wp-block-heading:first-child) > .wp-block-column:first-child > .wp-block-image img { width: 64px !important; }
}