/**
 * components/breadcrumbs.css — Reusable Breadcrumb Component
 *
 * Usage:
 *   <nav class="mjc-breadcrumb" aria-label="Breadcrumb">
 *     <a href="...">Home</a>
 *     <span class="mjc-breadcrumb__sep">›</span>
 *     <span class="mjc-breadcrumb__current">Page Name</span>
 *   </nav>
 *
 * OR use PHP helper:
 *   <?php mjc_breadcrumb([
 *     ['label' => 'Home', 'url' => '/'],
 *     ['label' => 'Services', 'url' => '/services'],
 *     ['label' => 'Cloud Accounting'],
 *   ]); ?>
 *
 * @package MJC_Fintech_Child
 */

/* ===================================================
   BREADCRUMB — Base
   =================================================== */

.mjc-breadcrumb {
	display: flex;
	gap: 8px;
	align-items: center;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.5;
	margin-bottom: 12px;
}

.mjc-breadcrumb a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color 0.2s ease;
}

.mjc-breadcrumb a:hover {
	color: rgba(255, 255, 255, 0.95);
}

.mjc-breadcrumb__sep {
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	opacity: 0.8;
}

.mjc-breadcrumb__current {
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
}

/* ===================================================
   VARIANT: Dark Breadcrumbs (on light backgrounds)
   =================================================== */

.mjc-breadcrumb--dark {
	color: rgba(10, 37, 64, 0.6);
}

.mjc-breadcrumb--dark a {
	color: rgba(10, 37, 64, 0.7);
}

.mjc-breadcrumb--dark a:hover {
	color: rgba(10, 37, 64, 0.95);
}

.mjc-breadcrumb--dark .mjc-breadcrumb__sep {
	color: rgba(10, 37, 64, 0.5);
}

.mjc-breadcrumb--dark .mjc-breadcrumb__current {
	color: rgba(10, 37, 64, 0.9);
}