/**
 * HomeGear Insider Breadcrumb Styles
 * ==================================
 * Responsive and accessible breadcrumb navigation
 */

/* Breadcrumb Container */
.breadcrumb-nav {
    margin: 15px 0 20px 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.4;
}

/* Override any theme colors with stronger selectors */
.homegear-breadcrumb-wrapper .breadcrumb-nav,
.homegear-breadcrumb-wrapper .breadcrumb,
.homegear-breadcrumb-wrapper .breadcrumb-item,
.homegear-breadcrumb-wrapper .breadcrumb-item a,
.homegear-breadcrumb-wrapper .breadcrumb-item span,
.homegear-breadcrumb-wrapper a:link,
.homegear-breadcrumb-wrapper a:visited,
.homegear-breadcrumb-wrapper a:active {
    color: #000 !important;
    text-decoration: none !important;
}

.homegear-breadcrumb-wrapper a:hover,
.homegear-breadcrumb-wrapper .breadcrumb-item a:hover {
    color: #888 !important;
    text-decoration: none !important;
}

/* FORCE BLACK - Override theme teal/green color (#0be6af) */
.breadcrumb-item * {
  color: #000 !important;
}

.homegear-breadcrumb-wrapper * {
  color: #000 !important;
}

/* Super specific selectors to override theme's broad a, a:visited rule */
.homegear-breadcrumb-wrapper a,
.homegear-breadcrumb-wrapper a:link,
.homegear-breadcrumb-wrapper a:visited,
.homegear-breadcrumb-wrapper a:active,
.homegear-breadcrumb-wrapper .breadcrumb-item a,
.homegear-breadcrumb-wrapper .breadcrumb-item a:link,
.homegear-breadcrumb-wrapper .breadcrumb-item a:visited,
.homegear-breadcrumb-wrapper .breadcrumb-item a:active {
  color: #000 !important;
  text-decoration: none !important;
}

.homegear-breadcrumb-wrapper a:hover,
.homegear-breadcrumb-wrapper .breadcrumb-item a:hover {
  color: #888 !important;
  text-decoration: none !important;
}

.homegear-breadcrumb-wrapper a:hover * {
  color: #888 !important;
}

/* Container for injected breadcrumbs */
/* .homegear-breadcrumb-container,
.homegear-breadcrumb-wrapper {
    margin: 20px 0;
    padding: 15px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
} */

/* Test breadcrumb styling */
.homegear-js-breadcrumbs {
    margin: 15px 0;
}

.hub-link-container {
    margin-top: 10px;
}

.homegear-breadcrumb-container .breadcrumb-nav {
    margin: 0 0 10px 0;
}

.homegear-breadcrumb-container .hub-cta {
    margin-top: 10px;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Breadcrumb Items */
.breadcrumb-item {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.breadcrumb-item a {
    color: #000 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    font-weight: 400;
}

.breadcrumb-item a:hover {
    color: #888 !important;
    text-decoration: none !important;
}

.breadcrumb-item a:visited {
    color: #000 !important;
    text-decoration: none !important;
}

.breadcrumb-item a:visited:hover {
    color: #888 !important;
    text-decoration: none !important;
}

.breadcrumb-item a:focus {
    color: #000 !important;
    text-decoration: none !important;
    outline: 2px solid #007cba;
    outline-offset: 2px;
    border-radius: 2px;
}

.breadcrumb-item a:active {
    color: #000 !important;
    text-decoration: none !important;
}

.breadcrumb-item .current {
    color: #000 !important;
    font-weight: 600;
}

/* Separators */
.breadcrumb-separator {
    color: #999;
    margin: 0 8px;
    font-size: 12px;
    user-select: none;
}

/* Hub Link (Back to Category) */
.hub-cta {
    display: inline-block;
    margin: 10px 0 15px 0;
    padding: 8px 15px;
    background: #f8f9fa;
    color: #000 !important;
    text-decoration: none !important;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.hub-cta:hover {
    background: #e9ecef;
    color: #888 !important;
    text-decoration: none !important;
    border-color: #dee2e6;
}

.hub-cta:visited {
    color: #000 !important;
    text-decoration: none !important;
}

.hub-cta:visited:hover {
    color: #888 !important;
    text-decoration: none !important;
}

.hub-cta:focus {
    color: #000 !important;
    text-decoration: none !important;
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.hub-cta:active {
    color: #000 !important;
    text-decoration: none !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .breadcrumb-nav {
        margin: 10px 0 15px 0;
        font-size: 13px;
    }
    
    .breadcrumb-separator {
        margin: 0 6px;
    }
    
    .hub-cta {
        padding: 6px 12px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .breadcrumb-nav {
        font-size: 12px;
    }
    
    .breadcrumb {
        /* KEEP HORIZONTAL - no stacking */
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .breadcrumb-item {
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .breadcrumb-separator {
        margin: 0 4px;
        flex-shrink: 0;
    }
    
    /* Truncate long breadcrumb items on tiny screens */
    .breadcrumb-item a,
    .breadcrumb-item span {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }
}

/* Dark Mode Support (if theme supports it) */
@media (prefers-color-scheme: dark) {
    .breadcrumb-item a {
        color: #ccc;
    }
    
    .breadcrumb-item a:hover {
        color: #fff;
    }
    
    .breadcrumb-item .current {
        color: #fff;
    }
    
    .hub-cta {
        background: #2d3748;
        color: #cbd5e0;
        border-color: #4a5568;
    }
    
    .hub-cta:hover {
        background: #4a5568;
        color: #fff;
        border-color: #718096;
    }
}

/* Accessibility Improvements */
.breadcrumb-nav[aria-label] {
    /* Ensure screen readers announce this as navigation */
}

.breadcrumb-item a:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
    border-radius: 2px;
}

.hub-cta:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Integration with Zox News Theme */
.mvp-main-wrapper .breadcrumb-nav {
    /* Match theme's content spacing */
    margin-left: 0;
    margin-right: 0;
}

/* Post Content Integration */
.post-content .breadcrumb-nav {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

/* Archive Page Integration */
.archive .breadcrumb-nav,
.category .breadcrumb-nav,
.tax-product_category .breadcrumb-nav {
    margin-bottom: 25px;
}