/*
 * Breadcrumb — uses the Shopify wrapper class names (.breadcrumb-main,
 * .breadcrumb-container, .breadcrumb) so it sits alongside the rest of the
 * Shopify-port styling. Markup is emitted by:
 *   - hw_farm_woocommerce_breadcrumbs() — WC pages (shop, category, product)
 *   - hw_farm_render_page_breadcrumbs() — regular WP pages
 *
 *   <div class="breadcrumb-main">
 *     <div class="breadcrumb-container">
 *       <nav class="breadcrumb">
 *         <span><a href="/">Home</a></span>
 *         <span class="breadcrumb__separator">/</span>
 *         <span><a href="/shop/">Categories</a></span>
 *         <span class="breadcrumb__separator">/</span>
 *         <span class="breadcrumb__current">Grass-Fed Beef</span>
 *       </nav>
 *     </div>
 *   </div>
 *
 * Note: WC's default breadcrumb template (templates/global/breadcrumb.php)
 * doesn't tag the current/last item with .breadcrumb__current — it just
 * wraps it in the same <span> as everything else. So we also style
 * `.breadcrumb > span:last-child` as the current item, which works for both
 * WC output AND our manually-rendered page breadcrumbs.
 */

/* BREADCRUMB-CRITICAL: this is the Shopify "Local" model — absolute + NEGATIVE top,
   so the breadcrumb tucks into the slot opened by the first content container's
   top margin (.container--vertical-space-small) collapsing up through .main-content.
   Do NOT convert this to position:relative / normal flow, and don't let the shell be
   a flex column (overrides.css) — both were the breadcrumb regression we fixed. */
.breadcrumb-main {
    background: transparent;
    position: absolute;
    z-index: 9;
    top: calc(clamp(2.5rem, var(--container-vertical-space), 5rem) * -1);
    height: clamp(2.5rem, var(--container-vertical-space), 5rem);
    width: 100%;
}
html[dir="ltr"] .breadcrumb-main { left: 0; }
html[dir="rtl"] .breadcrumb-main { right: 0; }

/* Edge fade overlays for the scrollable breadcrumb. Original Shopify rules had
   `left: -var(--gutter-regular)` which is invalid CSS — `-` can't negate a
   var() directly, so the rule was silently ignored upstream. Fixed to
   `calc(var(--gutter-regular) * -1)`. */
.breadcrumb-main::before,
.breadcrumb-main::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--color-background-main);
    pointer-events: none;
}
.breadcrumb-main::before {
    left: calc(var(--gutter-regular) * -1);
    width: var(--gutter-regular);
    background: linear-gradient(90deg, var(--color-background-main) 50%, var(--color-opacity-background-main) 100%);
}
.breadcrumb-main::after {
    right: 0;
    width: calc(var(--gutter-regular) * 2);
    background: linear-gradient(-90deg, var(--color-background-main) 50%, var(--color-opacity-background-main) 100%);
}

.breadcrumb-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    height: 100%;
    width: 100%;
    max-width: var(--theme-max-width);
    padding: 0 var(--gutter-container);
    margin: auto;
}
.breadcrumb-container::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--bs-body-font-size);
    line-height: 1.2;
    background: transparent;
}

.breadcrumb__link a {
    border-bottom: none !important;
    transition: all 0.1s linear;
}

.breadcrumb > span {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.breadcrumb a {
    text-decoration: none;
    transition: color 0.15s linear;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
    color: var(--color-accent-main);
}

.breadcrumb__separator {
    padding: 0 0.6rem;
    font-size: 0.9rem;
    user-select: none;
}

/* Current item — works whether the markup uses .breadcrumb__current
   (our hw_farm_render_page_breadcrumbs) or just the last <span> with no
   class (WC's default template). */
.breadcrumb__current,
.breadcrumb > span:last-child:not(.breadcrumb__separator) {
    cursor: default;
}

.breadcrumb span:not(:last-child) {
    margin-inline-end: 0.6875rem;
}

.breadcrumb span:last-child {
    margin-inline-end: var(--gutter-regular);
}

/* Breadcrumb inside a product/category card — use the card's text color on
   hover instead of the page accent (so it reads correctly inside dark cards). */
.card__text .breadcrumb__link a:hover {
    color: var(--color-text-cards);
}