/**
 * Frontend Styling for the Subpages List Element
 *
 * This stylesheet provides the visual presentation for the dynamic subpages
 * list on the public-facing side of the website. It includes styles for
 * different list icons (bullet, arrow, check) and the hierarchical indentation
 * of sub-lists. The use of CSS Custom Properties makes it easy to adjust
 * the styling globally.
 *
 * Icons dependency: The icon variants use pseudo-elements with Font Awesome
 * glyphs (font-family: FontAwesome). Ensure Font Awesome is loaded globally
 * by your theme or enqueue it yourself. If Font Awesome is not available,
 * either select "None" for the List Icon option in the element settings, or
 * override the selectors `.list-arrow li:before`, `.list-bullet li:before`,
 * and `.list-check li:before` with your own SVG/CSS icons.
 *
 * @package   Clinton_WPBakery_Elements
 * @version   2.1.3
 * @since     2.0.0
 */

:root {
	--icon-font-size: 0.8em;
	--bullet-font-size: 0.4em;
	--icon-margin-right: 10px;
	--sublist-indent: 20px;
}

.subpages-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.subpages-list li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	list-style: none;
}

.subpages-list li:before {
	top: -1px;
	margin-right: var(--icon-margin-right);
	font-family: FontAwesome;
	font-size: var(--icon-font-size);
	line-height: inherit;
	position: relative;
}

.subpages-sublist {
	width: 100%;
	margin-left: var(--sublist-indent);
}

.list-bullet li:before {
	content: "\f111";
	font-size: var(--bullet-font-size);
}

.list-arrow li:before {
	content: "\f105";
}

.list-check li:before {
	content: "\f00c";
}