/* Dual Breadcrumbs CSS */
.dual-breadcrumbs {
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 0.9em;
}

.dual-breadcrumbs .breadcrumb-section {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.dual-breadcrumbs .breadcrumb-section:last-child {
    margin-bottom: 0;
}

/* Hide second breadcrumb section on postal code pages */
.postal-code-page .dual-breadcrumbs .breadcrumb-section:last-child {
    display: none;
}

.dual-breadcrumbs .breadcrumb-label {
    font-weight: bold;
    margin-right: 10px;
    min-width: 70px;
    color: #666;
}

.dual-breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.dual-breadcrumbs ol li {
    display: flex;
    align-items: center;
}

.dual-breadcrumbs ol li:not(:last-child)::after {
    content: "/";
    margin: 0 8px;
    color: #ccc;
}

.dual-breadcrumbs ol li a {
    color: #0038a8;
    text-decoration: none;
}

.dual-breadcrumbs ol li a:hover {
    color: #ce1126;
    text-decoration: underline;
}

.dual-breadcrumbs ol li:last-child {
    color: #333;
    font-weight: 500;
}

/* Standard Breadcrumbs */
.breadcrumbs {
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 0.9em;
}

.breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.breadcrumbs ol li {
    display: flex;
    align-items: center;
}

.breadcrumbs ol li:not(:last-child)::after {
    content: "/";
    margin: 0 8px;
    color: #ccc;
}

.breadcrumbs ol li a {
    color: #0038a8;
    text-decoration: none;
}

.breadcrumbs ol li a:hover {
    color: #ce1126;
    text-decoration: underline;
}

.breadcrumbs ol li:last-child {
    color: #333;
    font-weight: 500;
}

/* Responsive styles */
@media (max-width: 768px) {
    /* Reduce font size on mobile to prevent wrapping */
    .dual-breadcrumbs,
    .breadcrumbs {
        font-size: 0.75em; /* Reduced from 0.9em */
        padding: 8px 12px; /* Slightly smaller padding */
    }
    
    .dual-breadcrumbs .breadcrumb-label {
        min-width: 50px; /* Reduced from 70px */
        margin-right: 5px; /* Reduced from 10px */
        font-size: 0.85em; /* Slightly smaller label */
    }
    
    .dual-breadcrumbs ol li:not(:last-child)::after,
    .breadcrumbs ol li:not(:last-child)::after {
        margin: 0 5px; /* Reduced from 8px */
    }
}

/* For very small screens */
@media (max-width: 480px) {
    .dual-breadcrumbs,
    .breadcrumbs {
        font-size: 0.7em; /* Further reduced */
        padding: 6px 10px;
    }
    
    .dual-breadcrumbs .breadcrumb-label {
        min-width: 40px;
        font-size: 0.8em;
    }
    
    .dual-breadcrumbs ol li:not(:last-child)::after,
    .breadcrumbs ol li:not(:last-child)::after {
        margin: 0 4px;
    }
}