/**
 * Norse Breadcrumb — Stylesheet
 *
 * Semantic layout, responsive wrapping, separators, and entrance animation styles.
 *
 * @package NorseBreadcrumb
 * @version 1.0.0
 */

/* ==========================================================================
   1. Base Navigation & Trail Layout
   ========================================================================== */

.norse-breadcrumb-nav {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.norse-breadcrumb-trail {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
	line-height: 1.4;
}

.norse-breadcrumb-nav.has-wrap-mobile .norse-breadcrumb-trail {
	flex-wrap: wrap;
}

.norse-breadcrumb-nav.no-wrap-mobile .norse-breadcrumb-trail {
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   2. Breadcrumb Items & Links
   ========================================================================== */

.norse-breadcrumb-item {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	position: relative;
}

.norse-breadcrumb-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	text-decoration: none;
	transition-property: color, background-color, border-color, box-shadow;
	transition-timing-function: ease;
	cursor: pointer;
}

.norse-breadcrumb-current {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	cursor: default;
}

/* Home Icon & Text Elements */
.norse-breadcrumb-home-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.norse-breadcrumb-home-icon i {
	line-height: 1;
}

.norse-breadcrumb-home-icon svg {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
}

.norse-breadcrumb-home-text {
	display: inline-block;
	line-height: inherit;
}

/* ==========================================================================
   3. Separators
   ========================================================================== */

.norse-breadcrumb-separator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	line-height: 1;
	box-sizing: border-box;
}

.norse-breadcrumb-separator-text {
	display: inline-block;
	line-height: 1;
}

.norse-breadcrumb-separator i,
.norse-breadcrumb-separator svg {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	transition: transform 0.2s ease;
}

/* Screen reader text helper */
.norse-breadcrumb-nav .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* ==========================================================================
   4. Entrance Animations
   ========================================================================== */

/* Preparation state before animation starts */
.norse-breadcrumb-nav[data-animation]:not([data-animation="none"]) .norse-anim-prep {
	opacity: 0;
	will-change: transform, opacity, max-width;
}

/* Slide Right Initial */
.norse-breadcrumb-nav[data-animation="slide_right_sequential"] .norse-anim-prep {
	transform: translateX(-18px);
}

/* Slide Up Initial */
.norse-breadcrumb-nav[data-animation="slide_up_sequential"] .norse-anim-prep {
	transform: translateY(14px);
}

/* Slide Down Initial */
.norse-breadcrumb-nav[data-animation="slide_down_sequential"] .norse-anim-prep {
	transform: translateY(-14px);
}

/* Scale In Initial */
.norse-breadcrumb-nav[data-animation="scale_in_sequential"] .norse-anim-prep {
	transform: scale(0.75);
}

/* Typewriter Initial */
.norse-breadcrumb-nav[data-animation="typewriter"] .norse-anim-prep {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
}

/* Entering transition state */
.norse-anim-enter {
	opacity: 1 !important;
	transform: none !important;
	transition-property: opacity, transform, max-width;
}

/* Typewriter Entering */
.norse-breadcrumb-nav[data-animation="typewriter"] .norse-anim-enter {
	max-width: 600px !important;
	opacity: 1 !important;
}

/* Fade In (All Together) */
.norse-breadcrumb-nav[data-animation="fade_in"].is-animating .norse-breadcrumb-trail {
	animation-fill-mode: both;
}

@keyframes norseFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ==========================================================================
   5. Accessibility & Motion Preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.norse-breadcrumb-nav,
	.norse-breadcrumb-nav *,
	.norse-breadcrumb-nav .norse-anim-prep,
	.norse-breadcrumb-nav .norse-anim-enter {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
		max-width: none !important;
	}
}