/* Frontend Breadcrumbs Styles */

.bw-breadcrumbs {
    margin: 20px 0;
    padding: 0;
}

.bw-breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
}

.bw-breadcrumb-item {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.bw-breadcrumb-item:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 10px;
    background-image: url('../img/breadcrumb.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.bw-breadcrumb-item a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: 12px;
}

.bw-breadcrumb-item a:hover {
    color: #0052a3;
    text-decoration: underline;
}

.bw-breadcrumb-item.active span {
    color: #333;
    font-size: 12px;
}

/* Home icon styles */
.bw-breadcrumb-home a {
    display: inline-flex;
    align-items: center;
}

.bw-breadcrumb-home-icon {
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: middle;
    transition: opacity 0.2s ease;
}

.bw-breadcrumb-home a:hover .bw-breadcrumb-home-icon {
    opacity: 0.7;
}

.bw-breadcrumb-home a:hover {
    text-decoration: none;
}

/* Anleitung, Vergleich and Page Builder templates specific styling with blue background */
.single-anleitung .bw-breadcrumbs,
.single-vergleich .bw-breadcrumbs,
.single-page-builder .bw-breadcrumbs {
    margin: 0;
    padding: 20px 0;
    background: #111EEE;
}

.single-anleitung .bw-breadcrumbs-list,
.single-vergleich .bw-breadcrumbs-list,
.single-page-builder .bw-breadcrumbs-list {
    margin: 0 auto;
    padding: 0 2rem;
    max-width: 1280px;
}

@media (min-width: 640px) {
    .single-anleitung .bw-breadcrumbs-list,
    .single-vergleich .bw-breadcrumbs-list,
    .single-page-builder .bw-breadcrumbs-list {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .single-anleitung .bw-breadcrumbs-list,
    .single-vergleich .bw-breadcrumbs-list,
    .single-page-builder .bw-breadcrumbs-list {
        padding: 0 2rem;
    }
}

.single-anleitung .bw-breadcrumb-item:not(:last-child)::after,
.single-vergleich .bw-breadcrumb-item:not(:last-child)::after,
.single-page-builder .bw-breadcrumb-item:not(:last-child)::after {
    filter: brightness(0) invert(1);
}

.single-anleitung .bw-breadcrumb-item a,
.single-vergleich .bw-breadcrumb-item a,
.single-page-builder .bw-breadcrumb-item a {
    color: rgba(255, 255, 255, 0.9);
}

.single-anleitung .bw-breadcrumb-item a:hover,
.single-vergleich .bw-breadcrumb-item a:hover,
.single-page-builder .bw-breadcrumb-item a:hover {
    color: #ffffff;
}

.single-anleitung .bw-breadcrumb-item.active span,
.single-vergleich .bw-breadcrumb-item.active span,
.single-page-builder .bw-breadcrumb-item.active span {
    color: rgba(255, 255, 255, 0.7);
}

.single-anleitung .bw-breadcrumb-home-icon,
.single-vergleich .bw-breadcrumb-home-icon,
.single-page-builder .bw-breadcrumb-home-icon {
    filter: brightness(0) invert(1);
}

.single-anleitung .bw-breadcrumb-home a:hover .bw-breadcrumb-home-icon,
.single-vergleich .bw-breadcrumb-home a:hover .bw-breadcrumb-home-icon,
.single-page-builder .bw-breadcrumb-home a:hover .bw-breadcrumb-home-icon {
    opacity: 0.8;
}

/* Author template specific styling with custom background */
.author .bw-breadcrumbs {
    margin: 0;
    padding: 20px 0;
    background: #2b3b5b;
}

.author .bw-breadcrumbs-list {
    margin: 0 auto;
    padding: 0 2rem;
    max-width: 80rem;
}

@media (min-width: 640px) {
    .author .bw-breadcrumbs-list {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .author .bw-breadcrumbs-list {
        padding: 0 2rem;
    }
}

@media (min-width: 1280px) {
    .author .bw-breadcrumbs-list {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.author .bw-breadcrumb-item:not(:last-child)::after {
    filter: brightness(0) invert(1);
}

.author .bw-breadcrumb-item a {
    color: rgba(255, 255, 255, 0.9);
}

.author .bw-breadcrumb-item a:hover {
    color: #ffffff;
}

.author .bw-breadcrumb-item.active span {
    color: rgba(255, 255, 255, 0.7);
}

.author .bw-breadcrumb-home-icon {
    filter: brightness(0) invert(1);
}

.author .bw-breadcrumb-home a:hover .bw-breadcrumb-home-icon {
    opacity: 0.8;
}