/**
 * Content List - Frontend Styles
 *
 * Padding, gaps, colours, sizes, typography, alignment and justification all
 * come from the widget controls. This file only sets structure and fallback
 * defaults for the border custom properties, so the per-item bottom border
 * and the optional first-item top / last-item bottom borders stay in sync
 * from the same pair of colour/size controls.
 */

/* Elementor flex containers do not stretch a child widget to full width by default. */
.elementor-widget-content_list_c7e2a915,
.elementor-widget-content_list_c7e2a915 > .elementor-widget-container {
	width: 100%;
}

.cl-list-c7e2a915 {
	--cl-border-color-c7e2a915: #d0cbc3;
	--cl-border-size-c7e2a915: 1px;
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* ---------- Item: content on the left, icon on the right, vertically centred ---------- */
.cl-item-c7e2a915 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	color: inherit;
	text-decoration: none;
	border-bottom: var( --cl-border-size-c7e2a915 ) solid var( --cl-border-color-c7e2a915 );
}

/* Keep theme link styles from recolouring or underlining a linked row. */
a.cl-item-c7e2a915:hover,
a.cl-item-c7e2a915:focus {
	color: inherit;
	text-decoration: none;
}

/* Visible keyboard focus for the whole-row link. */
a.cl-item-c7e2a915:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Optional border above the first item, same colour and size as the item borders. */
.cl-first-top-c7e2a915 > .cl-item-c7e2a915:first-child {
	border-top: var( --cl-border-size-c7e2a915 ) solid var( --cl-border-color-c7e2a915 );
}

/* Every item is bordered on the bottom by default; this removes it from the last item when the toggle is off. */
.cl-no-last-border-c7e2a915 > .cl-item-c7e2a915:last-child {
	border-bottom: none;
}

/* ---------- Content column: direction (Align Items) and justify-content (Justify Content) come from controls, default vertical/start ---------- */
.cl-content-c7e2a915 {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex: 1 1 auto;
	min-width: 0;
}

.cl-title-c7e2a915,
.cl-description-c7e2a915 {
	margin: 0;
}

/* wpautop() wraps the (possibly dynamic-tag-resolved) description in <p> tags, and Elementor's
   global typography puts a bottom margin on every <p>. That's fine when rows stack vertically
   (the default), but when Align Items is Horizontal it throws off vertical centring against the
   title, so it's zeroed only under the row-direction class the widget adds in that case. */
.cl-direction-row-c7e2a915 .cl-description-c7e2a915 p {
	margin-bottom: 0;
}

/* ---------- Icon column: fixed 20px gap from the content ---------- */
.cl-icon-c7e2a915 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin-left: 20px;
	line-height: 1;
}

.cl-icon-c7e2a915 i {
	display: block;
	line-height: 1;
}

.cl-icon-c7e2a915 svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Uploaded SVG: mask technique so Icon Colour tints the artwork, circle included. */
.cl-icon-mask-c7e2a915 {
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* ---------- Editor-only placeholder notice ---------- */
.cl-editor-notice-c7e2a915 {
	padding: 24px 20px;
	background: #fff4e5;
	border: 1px dashed #d9822b;
	color: #7a4a05;
	font-size: 14px;
}