﻿/* Breadcrumb Section */
.breadcrumb-section {
    background: linear-gradient(135deg, #0d1b2a, #162133);
    padding: 20px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .breadcrumb-section .container {
        position: relative;
        z-index: 1;
    }

    /* Soft overlay glow */
    .breadcrumb-section::after {
        pointer-events: none; /* ✅ THIS FIXES CLICK ISSUE */
        z-index: 0;
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%2314b98c' fill-opacity='0.05'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

/* Breadcrumb list */
.custom-breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 10px;
}

    /* Links */
    .custom-breadcrumb .breadcrumb-item a {
        color: #8fa3b1;
        text-decoration: none;
        font-size: 0.85rem;
        transition: color 0.3s ease;
    }

        .custom-breadcrumb .breadcrumb-item a:hover {
            color: var(--primary) !important;
        }

    /* Active item */
    .custom-breadcrumb .breadcrumb-item.active {
        color: #ffffff;
        font-weight: 500;
    }

/* Divider */
.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: #5e7a89;
    padding: 0 6px;
}

/* Title */
.breadcrumb-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    margin-top: 5px;
}

/* MOBILE FIX - Keep breadcrumb in single line */
@media (max-width: 576px) {

    .custom-breadcrumb {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

        .custom-breadcrumb .breadcrumb-item {
            flex: 0 0 auto;
        }

        /* Optional: hide scrollbar for clean UI */
        .custom-breadcrumb::-webkit-scrollbar {
            display: none;
        }

    .custom-breadcrumb {
        scrollbar-width: none; /* Firefox */
    }
}