/* ===== Modern Breadcrumb as Buttons (for Blog Articles) ===== */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: transparent;
    padding: 0;
    margin-bottom: 2.2rem;
    gap: 0.5rem;
    font-size: 1.08rem;
    border-radius: 0.6rem;
}
.breadcrumb-item {
    display: flex;
    align-items: center;
    padding: 0;
    background: none;
}
.breadcrumb-item > a, .breadcrumb-item.active {
    display: inline-block;
    padding: 0.55em 1.3em;
    background: var(--accent-color, #ffc107);
    color: #fff;
    border-radius: 2em;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s;
    position: relative;
    margin-right: 0.1em;
    border: none;
}
.breadcrumb-item > a {
    background: var(--primary-gradient, linear-gradient(90deg, #0d6efd 0%, #00b894 100%));
    color: #fff;
}
.breadcrumb-item > a:hover, .breadcrumb-item > a:focus {
    background: var(--accent-gradient, linear-gradient(90deg, #ffc107 0%, #0d6efd 100%));
    color: #fff;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 4px 16px rgba(13,110,253,0.13);
    text-decoration: none;
}
.breadcrumb-item.active {
    background: var(--accent-color, #ffc107);
    color: #fff;
    cursor: default;
    box-shadow: 0 2px 8px rgba(255,193,7,0.10);
}
.breadcrumb-item + .breadcrumb-item::before {
    content: '\f105'; /* FontAwesome angle-left */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--accent-color, #ffc107);
    margin: 0 0.3em;
    font-size: 1.1em;
    vertical-align: middle;
}
:root.dark-mode .breadcrumb-item > a {
    background: var(--primary-gradient-dark, linear-gradient(90deg, #1e293b 0%, #00b894 100%));
    color: #fff;
}
:root.dark-mode .breadcrumb-item.active {
    background: var(--accent-color-dark, #ffb300);
    color: #fff;
}
/* --- END OF FILE breadcrumb.css --- */