/**
 * PowerX Breadcrumbs Component Styles
 *
 * SEO breadcrumbs navigation trail styling supporting inline flex layout,
 * component-based separators, dark pill badge, and glassmorphism presets.
 *
 * Architecture (Task 375):
 * - Simplified component-level separator contract.
 * - Zero hover lift: transforms and scales strictly removed.
 * - Single Source of Truth radius tokens (var(--powerx-radius-pill, 9999px)).
 *
 * =========================================================================
 * TABLE OF CONTENTS
 * =========================================================================
 * 1.0 - Main Wrapper & Alignments
 * 2.0 - Breadcrumbs List & Items
 * 3.0 - Links, Home Icon & Universal Separator Contract
 * 4.0 - Current Page & Preset Pills
 * =========================================================================
 *
 * @package PowerX_Core
 * @version 0.0.1
 */

/* =========================================================================
 * 1.0 - MAIN WRAPPER & ALIGNMENTS
 * ========================================================================= */
.elementor-widget-px-breadcrumbs,
.elementor-widget-px-breadcrumbs-v2 {
	width: 100%;
}

.powerx-breadcrumbs {
	display: flex;
	align-items: center;
	width: 100%;
	font-family: inherit;
}

.powerx-breadcrumbs.px-align-left {
	justify-content: flex-start;
}

.powerx-breadcrumbs.px-align-center {
	justify-content: center;
}

.powerx-breadcrumbs.px-align-right {
	justify-content: flex-end;
}

/* =========================================================================
 * 2.0 - BREADCRUMBS LIST & ITEMS
 * ========================================================================= */
.powerx-breadcrumbs .px-breadcrumbs-list {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}

.powerx-breadcrumbs .px-breadcrumb-item {
	display: inline-flex;
	align-items: center;
}

/* =========================================================================
 * 3.0 - LINKS, HOME ICON & UNIVERSAL SEPARATOR CONTRACT (TASK 375)
 * ========================================================================= */
.powerx-breadcrumbs .px-breadcrumb-link {
	color: var(--powerx-neutral-600, #666687);
	text-decoration: none;
	transition: color 0.2s ease;
	display: inline-flex;
	align-items: center;
}

.powerx-breadcrumbs .px-breadcrumb-link:hover {
	color: var(--powerx-primary-500, #4945ff);
	text-decoration: none;
}

.powerx-breadcrumbs .px-home-icon {
	display: inline-block;
	vertical-align: middle;
	margin-inline-end: 4px;
	fill: currentColor;
	transition: color 0.2s ease;
}

/* Zero hover lift: scale/translate forbidden on hover */
.powerx-breadcrumbs .px-breadcrumb-link:hover .px-home-icon {
	color: var(--powerx-primary-500, #4945ff);
}

/* Component-level Separator Contract */
.powerx-breadcrumbs .px-breadcrumb-separator {
	color: var(--powerx-neutral-400, #a5a5ba);
	font-size: 14px;
	user-select: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* =========================================================================
 * 4.0 - CURRENT PAGE & PRESET PILLS
 * ========================================================================= */
.powerx-breadcrumbs .px-breadcrumb-current {
	color: var(--powerx-neutral-900, #212134);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
}

.powerx-breadcrumbs.px-preset-pill_dark .px-breadcrumbs-list {
	background: var(--powerx-overlay-navy, rgba(15, 23, 42, 0.75));
	padding: 6px 18px;
	border-radius: var(--powerx-radius-pill, 9999px);
	border: 1px solid var(--powerx-overlay-light, rgba(255, 255, 255, 0.12));
	backdrop-filter: blur(8px);
}

.powerx-breadcrumbs.px-preset-pill_glass .px-breadcrumbs-list {
	background: var(--powerx-overlay-light, rgba(255, 255, 255, 0.12));
	padding: 6px 18px;
	border-radius: var(--powerx-radius-pill, 9999px);
	border: 1px solid var(--powerx-overlay-light, rgba(255, 255, 255, 0.2));
	backdrop-filter: blur(12px);
}