/* =============================================
   WP Smart Breadcrumb – Frontend Styles
   ============================================= */

/* CSS Variable defaults (will be overridden by inline style) */
.wpsb-breadcrumb {
    --wpsb-bg:         #f8f9fa;
    --wpsb-text:       #555555;
    --wpsb-link:       #0073aa;
    --wpsb-link-hover: #005177;
    --wpsb-active:     #222222;
    --wpsb-fs:         14px;
    --wpsb-pv:         10px;
    --wpsb-ph:         16px;
    --wpsb-br:         4px;
}

/* Container */
.wpsb-breadcrumb {
    display:          block;
    width:            100%;
    box-sizing:       border-box;
    margin-bottom:    1.25em;
    font-size:        var(--wpsb-fs);
    color:            var(--wpsb-text);
    background-color: var(--wpsb-bg);
    border-radius:    var(--wpsb-br);
    padding:          var(--wpsb-pv) var(--wpsb-ph);
    line-height:      1.5;
}

/* List reset */
.wpsb-breadcrumb .wpsb-list {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    list-style:      none;
    margin:          0;
    padding:         0;
    gap:             .25em;
}

/* Each item */
.wpsb-breadcrumb .wpsb-item {
    display:     flex;
    align-items: center;
    gap:         .25em;
}

/* Links */
.wpsb-breadcrumb .wpsb-link {
    color:           var(--wpsb-link);
    text-decoration: none;
    transition:      color .2s ease;
}

.wpsb-breadcrumb .wpsb-link:hover,
.wpsb-breadcrumb .wpsb-link:focus {
    color:           var(--wpsb-link-hover);
    text-decoration: underline;
}

/* Current (last) item */
.wpsb-breadcrumb .wpsb-current {
    color:       var(--wpsb-active);
    font-weight: 500;
}

/* Separator */
.wpsb-breadcrumb .wpsb-sep {
    color:       var(--wpsb-text);
    opacity:     .5;
    font-size:   1em;
    user-select: none;
}

/* Home icon */
.wpsb-breadcrumb .wpsb-home-icon {
    display:        inline-block;
    vertical-align: middle;
    margin-right:   .15em;
    font-style:     normal;
}

/* Responsive */
@media (max-width: 600px) {
    .wpsb-breadcrumb {
        font-size: calc(var(--wpsb-fs) - 1px);
    }
}