/**
 * MKM Bix - Breadcrumbs
 * Breadcrumb navigation styles
 * @package MKM_Bix
 */

/* ==================== BREADCRUMBS WRAPPER ==================== */
.mkm-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mkm-space-2);
    padding: var(--mkm-space-4) 0;
    font-size: var(--mkm-fs-sm);
    color: var(--mkm-gray-600);
}

/* ==================== BREADCRUMB LINK ==================== */
.mkm-breadcrumbs a {
    color: var(--mkm-gray-600);
    transition: color var(--mkm-transition-fast);
}

.mkm-breadcrumbs a:hover {
    color: var(--mkm-primary);
}

/* ==================== BREADCRUMB SEPARATOR ==================== */
.mkm-breadcrumbs .mkm-sep {
    color: var(--mkm-gray-400);
    margin: 0 var(--mkm-space-1);
}

/* ==================== BREADCRUMB CURRENT ==================== */
.mkm-breadcrumbs span:last-child {
    color: var(--mkm-gray-900);
    font-weight: var(--mkm-fw-medium);
}

/* ==================== BREADCRUMB HOME ICON ==================== */
.mkm-breadcrumbs-home-icon {
    display: flex;
    align-items: center;
}

.mkm-breadcrumbs-home-icon svg {
    width: 16px;
    height: 16px;
}

/* ==================== BREADCRUMB VARIANTS ==================== */

/* With Background */
.mkm-breadcrumbs-bg {
    padding: var(--mkm-space-3) var(--mkm-space-4);
    background: var(--mkm-white);
    border-radius: var(--mkm-radius);
    box-shadow: var(--mkm-shadow-sm);
}

/* Bordered */
.mkm-breadcrumbs-bordered {
    padding: var(--mkm-space-3) var(--mkm-space-4);
    border: 1px solid var(--mkm-gray-200);
    border-radius: var(--mkm-radius);
}

/* Arrow Separator */
.mkm-breadcrumbs-arrow .mkm-sep {
    display: inline-flex;
    align-items: center;
}

.mkm-breadcrumbs-arrow .mkm-sep::before {
    content: '›';
    font-size: var(--mkm-fs-lg);
}

/* Slash Separator */
.mkm-breadcrumbs-slash .mkm-sep::before {
    content: '/';
}

/* Dot Separator */
.mkm-breadcrumbs-dot .mkm-sep::before {
    content: '•';
}

/* ==================== BREADCRUMB SCHEMA ==================== */
.mkm-breadcrumbs[itemscope] {
    /* Schema.org breadcrumb styling */
}

.mkm-breadcrumbs [itemprop="itemListElement"] {
    display: inline-flex;
    align-items: center;
}

/* ==================== BREADCRUMB ON DARK BACKGROUND ==================== */
.mkm-breadcrumbs-light {
    color: rgba(255, 255, 255, 0.7);
}

.mkm-breadcrumbs-light a {
    color: rgba(255, 255, 255, 0.7);
}

.mkm-breadcrumbs-light a:hover {
    color: var(--mkm-white);
}

.mkm-breadcrumbs-light .mkm-sep {
    color: rgba(255, 255, 255, 0.4);
}

.mkm-breadcrumbs-light span:last-child {
    color: var(--mkm-white);
}