/*
 * CCS Breadcrumb NavXT for Twenty Twenty-Five
 * Uses TT5 CSS custom properties for consistent spacing and color.
 */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.ccs-breadcrumb-wrap {
	width: 100%;
	background-color: var( --wp--preset--color--base, #fff );
	border-bottom: 1px solid var( --wp--preset--color--contrast-3, #e0e0e0 );

	/* Match TT5's content padding */
	padding-block:  0.5rem;
	padding-inline: var( --wp--style--root--padding-right, 2rem );

	/* Sit just below the sticky header without z-index fights */
	position: relative;
	z-index: 9;
}

/* ── Inner container — keeps crumbs aligned with content max-width ───────── */

.ccs-breadcrumb-inner {
	max-width: var( --wp--style--global--content-size, 620px );
	margin-inline: auto;
}

/* ── Breadcrumb NavXT default list/span output ───────────────────────────── */

.ccs-breadcrumb-wrap .bcn-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var( --wp--preset--font-size--small, 0.875rem );
	line-height: 1.5;
	color: var( --wp--preset--color--contrast-2, #555 );
}

/* Separator between crumbs (NavXT outputs " » " by default via aria-hidden) */
.ccs-breadcrumb-wrap .bcn-wrap span[aria-hidden="true"] {
	color: var( --wp--preset--color--contrast-3, #aaa );
	user-select: none;
}

/* All crumb links */
.ccs-breadcrumb-wrap a {
	color: var( --wp--preset--color--contrast, #111 );
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ccs-breadcrumb-wrap a:hover,
.ccs-breadcrumb-wrap a:focus-visible {
	color: var( --wp--preset--color--contrast, #111 );
	text-decoration-thickness: 2px;
	outline-offset: 2px;
}

/* Current page crumb — NavXT adds aria-current="page" */
.ccs-breadcrumb-wrap [aria-current="page"] {
	color: var( --wp--preset--color--contrast-2, #555 );
	text-decoration: none;
	font-weight: 500;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.ccs-breadcrumb-wrap * {
		transition: none !important;
	}
}

/* ── Responsive: tighten padding on small screens ────────────────────────── */

@media ( max-width: 600px ) {
	.ccs-breadcrumb-wrap {
		padding-inline: var( --wp--style--root--padding-right, 1rem );
		font-size: var( --wp--preset--font-size--small, 0.8125rem );
	}
}