/*
 * Breadcrumbs Component Styling
 * Reusable styling for breadcrumb navigation across different pages
 */

/* Breadcrumbs container */
.cmp_breadcrumbs {
    margin: 0 0 1rem 0;
    display: flex;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;

    .breadcrumb {
        background: transparent;
        padding: 0.5rem 0;
        margin: 0;
        border: none;
        font-size: 1rem;
        max-width: 1200px;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        list-style: none;
        flex-wrap: wrap;

        > li {
            color: #666;
            display: inline-block;
            margin-right: 0.5rem;

            + li:before {
                content: " / ";
                color: #999;
                padding: 0 0.5rem;
                font-weight: normal;
            }
        }

        a {
            color: #2c5aa0;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;

            &:hover {
                color: #1e3f6b;
                text-decoration: underline;
            }
        }

        > .active {
            color: #333;
            font-weight: 600;
        }
    }
}

/* Responsive design for breadcrumbs */
@media (max-width: 768px) {
    .cmp_breadcrumbs {
        .breadcrumb {
            font-size: 0.9rem;
            padding: 0.25rem 0;

            > li {
                margin-right: 0.25rem;

                + li:before {
                    padding: 0 0.25rem;
                }
            }
        }
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .cmp_breadcrumbs {
        .breadcrumb {
            font-size: 0.95rem;
        }
    }
}

/* Large screen enhancements */
@media (min-width: 1200px) {
    .cmp_breadcrumbs {
        .breadcrumb {
            font-size: 1.05rem;
        }
    }
}