/*
 * Custom Breadcrumbs for Elementor - Base structural CSS
 * ค่าที่ปรับได้ผ่าน Elementor controls (สี, ขนาดตัวอักษร, ระยะห่าง ฯลฯ)
 * จะถูก inject โดย Elementor เองแบบ inline/scoped ต่อ widget instance
 */

.ecb-breadcrumbs {
	width: 100%;
	overflow-wrap: break-word;
}

.ecb-breadcrumbs .ecb-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ecb-breadcrumbs .ecb-item {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
}

.ecb-breadcrumbs .ecb-item a {
	text-decoration: none;
	transition: color 0.2s ease-in-out;
	max-width: 100%;
}

.ecb-breadcrumbs .ecb-item span {
	max-width: 100%;
}

.ecb-breadcrumbs .ecb-separator {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	user-select: none;
}

.ecb-breadcrumbs .ecb-separator i {
	display: inline-block;
	line-height: 1;
}

.ecb-breadcrumbs .ecb-separator svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/*
 * เมื่อพื้นที่ในบรรทัดปัจจุบันไม่พอ (เช่น รายการสุดท้ายที่เป็นชื่อหน้ายาวๆ)
 * .ecb-list ที่เป็น flex-wrap: wrap จะดันรายการนั้นทั้งก้อนลงบรรทัดใหม่ให้เองอยู่แล้ว
 * และรายการที่ตกไปบรรทัดใหม่จะใช้ความกว้างเต็มพื้นที่ที่มีตามธรรมชาติของ flex (ไม่ถูกบีบให้แคบ)
 * จึงไม่จำเป็นต้องบังคับ flex-basis/width เพิ่ม — ปัญหาที่พบก่อนหน้านี้เกิดจากกฎ max-width: 45vw
 * ที่บีบความกว้างของรายการบนจอมือถือ ซึ่งถูกลบออกไปแล้วด้านบน
 */