/* ==========================================================================
   Location bar / breadcrumb (layout/location-bar.jsp)
   Loaded globally via header-default.jsp — applies to every page that uses
   the dspace:layout tag (which includes location-bar.jsp as a component).
   Previously these rules lived only in display-item.css.
   ========================================================================== */

.locationBar {
    padding: 14px 0 8px;
    width: calc(100% - 195px);
    white-space: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #3e8291 rgba(93,163,165,0.15);
}

/* The space kept free on the right is for #user-profile-btn (header-default.jsp),
   which is positioned over the breadcrumb row when a user is logged in. With the
   first name it is up to ~176px wide (+10px margin of this <p>), so the old 145px
   let it overlap by ~19px. Below 900px it shows only the avatar (66px). Logged
   out there is no button, so the breadcrumb takes the full width (at 375px it
   had only ~150px and the first link was cut). */
@media (max-width: 900px) {
    .locationBar {
        width: calc(100% - 82px);
    }
}
body:not(:has(#user-profile-btn)) .locationBar {
    width: auto;
}

/* Chrome / Safari / Edge */
.locationBar::-webkit-scrollbar {
    height: 4px;
}
.locationBar::-webkit-scrollbar-track {
    background: rgba(93,163,165,0.15);
    border-radius: 99px;
}
.locationBar::-webkit-scrollbar-thumb {
    background: #3e8291;
    border-radius: 99px;
    transition: background 0.2s;
}
.locationBar::-webkit-scrollbar-thumb:hover {
    background: #315758;
}

/* Breadcrumb links: truncate at 50ch */
.locationBar a {
    display: inline-block;
    text-decoration: none;
    font-size: 16px;
    max-width: 50ch;
    color: #315758;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Breadcrumb separator dot */
.breadcrumb-sep {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #315758;
    border-radius: 50%;
    vertical-align: middle;
    margin: 0 8px;
}

/* Phones: no breadcrumb (hidden, not read). Its top padding stays as the gap
   under the header, else the page title touched it. Logged in, the whole row
   stays (empty) because #user-profile-btn (header-default.jsp) is positioned
   over it; without the row the button would cover the page title. */
@media (max-width: 640px) {
    p.locationBar {
        visibility: hidden;
        height: 0;
        padding-bottom: 0;
        overflow: hidden;
    }
    body:has(#user-profile-btn) p.locationBar {
        height: auto;
        padding-bottom: 8px;
    }
}