/* ==========================================================================
   LWALA BREADCRUMBS — card, home circle, soft chevrons, highlighted current page
   ========================================================================== */

.lwala-crumbs-bar {
    --lwala-crumbs-width: 1350px; /* matches the header's content width so the card lines up with the logo */
    background: #F7F7F7;
    border-bottom: 1px solid #EAEAEA;
    padding: 14px 24px;
}
.lwala-crumbs-bar .lwala-crumbs {
    max-width: var(--lwala-crumbs-width);
    margin: 0 auto;
}

.lwala-crumbs {
    --crumb-bg: transparent;
    --crumb-border: transparent;
    --crumb-shadow: none;
    --crumb-home-bg: #000000;
    --crumb-home-fg: #FFFFFF;
    --crumb-link: #3A3A3A;
    --crumb-link-hover: #000000;
    --crumb-sep: #C9C9C9;
    --crumb-current: #000000;
    font-family: 'Lato', -apple-system, sans-serif;
}

.lwala-crumbs--dark {
    --crumb-bg: #111111;
    --crumb-border: #222222;
    --crumb-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --crumb-home-bg: rgba(255, 255, 255, 0.12);
    --crumb-home-fg: #FFFFFF;
    --crumb-link: #B5B5B5;
    --crumb-link-hover: #FFFFFF;
    --crumb-sep: #5C5C5C;
    --crumb-current: #FFFFFF;
}

.lwala-crumbs__list {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--crumb-bg);
    border: 1px solid var(--crumb-border);
    border-radius: 16px;
    box-shadow: var(--crumb-shadow);
    overflow-x: auto;
    scrollbar-width: none;
}
.lwala-crumbs__list::-webkit-scrollbar { display: none; }

.lwala-crumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

/* The dark variant keeps its card */
.lwala-crumbs--dark .lwala-crumbs__list { padding: 8px 22px 8px 8px; }

/* Chevron separator */
.lwala-crumbs__item + .lwala-crumbs__item::before {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--crumb-sep);
    border-right: 2px solid var(--crumb-sep);
    border-radius: 1px;
    transform: rotate(45deg);
    margin-right: 4px;
    flex: 0 0 auto;
}

/* Home circle */
.lwala-crumbs .lwala-crumbs__home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--crumb-home-bg);
    color: var(--crumb-home-fg);
    text-decoration: none;
    transition: transform 0.25s ease, background-color 0.25s ease;
}
.lwala-crumbs .lwala-crumbs__home:hover { transform: scale(1.06); }
.lwala-crumbs--dark .lwala-crumbs__home:hover { background: rgba(255, 255, 255, 0.2); }
.lwala-crumbs__home svg { display: block; }

/* Links + current */
.lwala-crumbs .lwala-crumbs__link {
    color: var(--crumb-link);
    text-decoration: none;
    transition: color 0.2s ease;
}
.lwala-crumbs .lwala-crumbs__link:hover,
.lwala-crumbs .lwala-crumbs__link:focus-visible { color: var(--crumb-link-hover); }

.lwala-crumbs__current {
    color: var(--crumb-current);
    max-width: 38ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lwala-crumbs a:focus-visible {
    outline: 2px solid var(--crumb-current);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Mobile: tighter, and the list scrolls sideways instead of wrapping */
@media (max-width: 767px) {
    .lwala-crumbs-bar { padding: 10px 16px; }
    .lwala-crumbs__list { gap: 10px; padding: 0; display: flex; }
    .lwala-crumbs__item { gap: 10px; font-size: 13.5px; }
    .lwala-crumbs .lwala-crumbs__home { width: 34px; height: 34px; }
    .lwala-crumbs__current { max-width: 22ch; }
}