/* =========================================
   SHARED BREADCRUMBS
========================================= */

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 0 0 28px;
    font-family: var(--title-font);
    font-size: 13px;
    letter-spacing: .4px;
    color: rgba(244,212,124,.48);
}


    .breadcrumbs a {
        position: relative;
        color: var(--gold-light);
        text-decoration: none;
        transition: color .25s ease, text-shadow .25s ease, transform .25s ease;
    }


        .breadcrumbs a::after {
            content: "";
            position: absolute;
            left: 50%;
            right: 50%;
            bottom: -5px;
            height: 1px;
            background: linear-gradient( 90deg, transparent, var(--gold-light), transparent );
            transition: left .3s ease, right .3s ease;
        }


        .breadcrumbs a:hover {
            color: #fff0ad;
            transform: translateY(-1px);
            text-shadow: 0 0 7px rgba(244,212,124,.65), 0 0 18px rgba(198,156,74,.28);
        }


            .breadcrumbs a:hover::after {
                left: 0;
                right: 0;
            }


        .breadcrumbs a:focus-visible {
            outline: 2px solid var(--gold-light);
            outline-offset: 5px;
            border-radius: 2px;
        }


    .breadcrumbs span {
        margin: 0;
        color: rgba(244,212,124,.38);
    }


        /* Current page */

        .breadcrumbs span:last-child {
            color: rgba(255,255,255,.72);
        }


    /* =========================================
   LIGHT / PARCHMENT VERSION
========================================= */

    .breadcrumbs.breadcrumbs-light {
        color: rgba(111,76,36,.55);
    }


        .breadcrumbs.breadcrumbs-light a {
            color: #8b5d1f;
        }


            .breadcrumbs.breadcrumbs-light a:hover {
                color: #b27722;
                text-shadow: 0 0 8px rgba(198,156,74,.25);
            }


        .breadcrumbs.breadcrumbs-light span {
            color: rgba(111,76,36,.45);
        }


            .breadcrumbs.breadcrumbs-light span:last-child {
                color: #5d4631;
            }


/* =========================================
   MOBILE
========================================= */

@media(max-width: 700px) {

    .breadcrumbs {
        gap: 6px;
        margin-bottom: 22px;
        font-size: 11px;
        line-height: 1.5;
    }
}


/* =========================================
   REDUCED MOTION
========================================= */

@media(prefers-reduced-motion: reduce) {

    .breadcrumbs a {
        transition: none;
    }
}