/*
 * Breadcrumbs on every page of the STAS theme, 16px below the navbar. This file replaces Luma's breadcrumb look
 * everywhere (Luma: blue #006bb4 links, underlined on hover; hidden below 768px), so a new page inherits it.
 * Plain pages: grey links, the current page in dark text; the breadcrumb sits in the page flow and pushes the
 * content down. Hover: the site-wide text-link effect (orange fill, satrunner-links.css).
 * Pages that open with a hero or banner: the breadcrumb takes no space, so the hero starts flush under
 * the navbar, and it is drawn over the hero in white. Heroes are recognised by class: the home video
 * hero (.sr-hero), the Prepaid hero (.sr-pp__hero), and .sr-crumbs-overlay, which any new CMS banner
 * can add to get the same treatment.
 * Shown on Desktop and Tablet, hidden on Mobile (448px and narrower; breakpoints in satrunner-layout.css).
 * Selectors start with body .page-wrapper to win over Luma's styles-l.css, which loads after this file.
 */
body .page-wrapper .breadcrumbs {
    margin: 16px 0 24px;
}

body .page-wrapper .breadcrumbs .items {
    font-size: 1.2rem;
    line-height: 1.5;
    color: #333333;
}

/* ---------- Plain pages (every page; the hero rules below override) ---------- */
body .page-wrapper .breadcrumbs a,
body .page-wrapper .breadcrumbs a:visited,
body .page-wrapper .breadcrumbs a:active {
    color: #757575;
    text-decoration: none;
}

body .page-wrapper .breadcrumbs strong {
    font-weight: 500;
}

body .page-wrapper .breadcrumbs .item:not(:last-child)::after {
    color: rgba(0, 0, 0, 0.35);
}

/* Luma hides breadcrumbs below 768px; here only Mobile does */
@media (min-width: 449px) and (max-width: 767px) {
    body .page-wrapper .breadcrumbs {
        display: block;
    }
}

/* ---------- Over a hero ---------- */
body:has(.sr-hero, .sr-pp__hero, .sr-crumbs-overlay) .page-wrapper .breadcrumbs {
    position: relative;
    z-index: 2;
    height: 0;
    min-height: 0; /* Luma sets 24px */
    margin: 0;
    overflow: visible;
}

body:has(.sr-hero, .sr-pp__hero, .sr-crumbs-overlay) .page-wrapper .breadcrumbs .items {
    padding-top: 16px;
    color: #ffffff;
}

body:has(.sr-hero, .sr-pp__hero, .sr-crumbs-overlay) .page-wrapper .breadcrumbs a,
body:has(.sr-hero, .sr-pp__hero, .sr-crumbs-overlay) .page-wrapper .breadcrumbs a:visited {
    color: rgba(255, 255, 255, 0.75);
}

body:has(.sr-hero, .sr-pp__hero, .sr-crumbs-overlay) .page-wrapper .breadcrumbs a:hover {
    color: #ffffff;
}

body:has(.sr-hero, .sr-pp__hero, .sr-crumbs-overlay) .page-wrapper .breadcrumbs .item:not(:last-child)::after {
    color: rgba(255, 255, 255, 0.5);
}