/* =========================================================
   Royal Blocks — Core List Styles (core/list)
   Select a List block → Sidebar → Styles
   - Marker color can be controlled via --royal-marker-color (wrapper block sets it)
========================================================= */

/* If a List is inside Royal List Wrapper, color the native bullets/numbers too */
.royal-list-wrapper :where(ul, ol) > li::marker {
	color: var(--royal-marker-color, currentColor);
}

/* Base reset for custom marker styles */
.wp-block-list[class*="is-style-royal-"] {
	list-style: none;
	margin-left: 0;
	padding-left: 21px;
}

.wp-block-list[class*="is-style-royal-"] > li {
	position: relative;
	padding-left: calc(var(--royal-bullet-size, 18px) + 14px);
	margin: 0;
}

.wp-block-list[class*="is-style-royal-"] > li + li {
	margin-top: var(--royal-list-gap, 10px);
}

/* Nested lists: keep readable */
.wp-block-list[class*="is-style-royal-"] li > ul,
.wp-block-list[class*="is-style-royal-"] li > ol {
	margin-top: 10px;
	margin-left: 24px;
}

/* ---------------------------------------------------------
   UL: Icon bullets (Check / Arrow / Star)
--------------------------------------------------------- */
.wp-block-list.is-style-royal-check-bullets > li::before,
.wp-block-list.is-style-royal-arrow-bullets > li::before,
.wp-block-list.is-style-royal-star-bullets > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: var(--royal-bullet-size, 18px);
	height: var(--royal-bullet-size, 18px);
	display: inline-block;

	/* uses wrapper var (fallback to text color) */
	background: var(--royal-marker-color, currentColor);

	border-radius: 6px;

	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

/* Check icon */
/* Check icon: rounded circle + check */
.wp-block-list.is-style-royal-check-bullets > li::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M7.5 12.5l3 3 6-7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M7.5 12.5l3 3 6-7'/%3E%3C/svg%3E");
}

/* Filled circle bullet (was arrow) */
/* Arrow: colored circle + white chevron-right */
.wp-block-list.is-style-royal-arrow-bullets > li::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M10 7l5 5-5 5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M10 7l5 5-5 5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Star icon */
.wp-block-list.is-style-royal-star-bullets > li::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------
   OL: Number badges
--------------------------------------------------------- */
.wp-block-list.is-style-royal-number-badge { counter-reset: royalList; }

.wp-block-list.is-style-royal-number-badge > li {
	padding-left: calc(var(--royal-badge-size, 28px) + 14px);
	min-height: 32px;
	padding-top: 2px;
}

.wp-block-list.is-style-royal-number-badge > li::before {
	counter-increment: royalList;
	content: counter(royalList);
	position: absolute;
	left: 0;
	top: 0;
	width: var(--royal-badge-size, 28px);
	height: var(--royal-badge-size, 28px);
	display: grid;
	place-items: center;
	border-radius: 999px;

	background: var(--royal-badge-bg, rgba(15, 23, 42, 0.08));
	border: 1px solid var(--royal-badge-border, rgba(15, 23, 42, 0.14));

	color: var(--royal-marker-color, currentColor);

	font-weight: 700;
	font-size: 13px;
	line-height: 1;
}

/* ---------------------------------------------------------
   OL: Big numbers (01, 02...)
--------------------------------------------------------- */
.wp-block-list.is-style-royal-big-numbers { counter-reset: royalBig; }

.wp-block-list.is-style-royal-big-numbers > li { padding-left: 40px; }
.wp-block-list.is-style-royal-big-numbers > li::before {
	counter-increment: royalBig;
	content: counter(royalBig, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 500;
	color: var(--royal-marker-color, currentColor);
}

/* ---------------------------------------------------------
   OL: Steps (number column + subtle divider)
--------------------------------------------------------- */
.wp-block-list.is-style-royal-steps { counter-reset: royalSteps; }

.wp-block-list.is-style-royal-steps > li {
	padding-left: 62px;
	padding-top: 10px;
	min-height: 37px;
}

.wp-block-list.is-style-royal-steps > li::before {
	counter-increment: royalSteps;
	content: counter(royalSteps);
	position: absolute;
	left: 0;
	top: .1em;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;

	background: var(--royal-badge-bg, rgb(255, 255, 255));
	border: 1px solid var(--royal-badge-border, rgba(15, 23, 42, 0.14));

	color: var(--royal-marker-color, currentColor);

	font-weight: 600;
}

.wp-block-list.is-style-royal-steps > li::after {
	content: "";
	position: absolute;
	left: 22px;
	top: calc(.1em + 45px);
	width: 1px;
	height: calc(100% + var(--royal-list-gap, 10px));
	background: var(--royal-badge-border, rgba(15, 23, 42, 0.14));
}

.wp-block-list.is-style-royal-steps > li:last-child::after { display: none; }

/* Mobile tweaks */
@media (max-width: 782px) {
	.wp-block-list.is-style-royal-big-numbers > li { padding-left: 30px; }
	.wp-block-list.is-style-royal-big-numbers > li::before { font-size: 1rem; }
	.wp-block-list[class*="is-style-royal-"]{padding: 0;}
	.wp-block-list.is-style-royal-steps > li::before{
		width: 32px;
		height: 32px;
	}
	.wp-block-list.is-style-royal-steps > li::after {
		left: 16px;
		height: calc(100% + var(--royal-list-gap, 10px));
		top: calc(.1em + 32px);
	}
	.wp-block-list.is-style-royal-steps > li {
		padding-left: 44px;
		padding-top: 6px;
		min-height: 30px;
	}
}