/* =====================================================
   24K Living - Breadcrumb Navigation Styles
   Design: Matches 24K luxury gold theme
   ===================================================== */

/* Base breadcrumb wrapper */
.breadcrumb-nav {
    padding: 10px 0 8px;
    font-family: 'Filosofia', Georgia, serif;
    font-size: 13px;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 10;
}

/* Left alignment */
.breadcrumb-nav.align-left {
    text-align: left;
    padding-left: 40px;
}

/* Right alignment */
.breadcrumb-nav.align-right {
    text-align: right;
    padding-right: 40px;
}

/* Blog pages breadcrumb */
.breadcrumb-nav.blog-breadcrumb {
    text-align: left;
    padding: 14px 40px 12px;
    background: transparent;
}

/* The ordered list */
.breadcrumb-nav ol {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.breadcrumb-nav li {
    display: inline-flex;
    align-items: center;
    color: #b09454;
    font-size: 13px;
    line-height: 1.4;
}

/* Separator between items */
.breadcrumb-nav li + li::before {
    content: '\203A';
    color: #b09454;
    margin: 0 7px;
    font-size: 16px;
    line-height: 1;
    opacity: 0.7;
}

/* Links */
.breadcrumb-nav a {
    color: #b09454;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.25s ease, color 0.25s ease;
    font-family: 'Filosofia', Georgia, serif;
}

.breadcrumb-nav a:hover {
    opacity: 1;
    color: #8a7240;
    text-decoration: underline;
}

/* Current page */
.breadcrumb-nav li[aria-current="page"],
.breadcrumb-nav li:last-child span {
    color: #b09454;
    opacity: 1;
    font-weight: 600;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 767px) {
    .breadcrumb-nav {
        padding: 10px 20px 8px;
        font-size: 12px;
    }
    .breadcrumb-nav.align-left,
    .breadcrumb-nav.blog-breadcrumb {
        padding-left: 20px;
    }
    .breadcrumb-nav.align-right {
        padding-right: 20px;
    }
    .breadcrumb-nav li[aria-current="page"],
    .breadcrumb-nav li:last-child span {
        max-width: 180px;
    }
}