/**
 * Harvest — Breadcrumbs (C10).
 *
 * Styles Magento core `.breadcrumbs` (emitted on catalog/CMS pages) and the
 * theme's own `.hrv-breadcrumbs`. Comp reference: 12px, muted text, "/"
 * separators, current crumb in full text colour.
 */

.breadcrumbs,
.hrv-breadcrumbs {
  max-width: var(--hrv-container);
  margin-inline: auto;
  padding: 22px var(--hrv-page-pad) 0;
  font-size: 12px;
  color: var(--hrv-text-muted);
}
/* THE `color` HERE IS LOAD-BEARING, NOT A DUPLICATE OF THE WRAPPER RULE ABOVE.
   Blank's compiled bundle carries `.breadcrumbs .items { color: #a3a3a3 }` — a hardcoded
   grey at (0,2,0), set on the <ul> INSIDE the wrapper. The rule above is `.breadcrumbs`
   at (0,2,0)... on a different element, one level up, so it never contests it: Luma simply
   overwrites the inherited value on the child, and `.breadcrumbs a { color: inherit }`
   below then faithfully inherits Luma's grey.

   MEASURED BEFORE THE FIX, on the deployed basil build at 1440: every breadcrumb link
   painted rgb(163,163,163) on rgb(243,246,239) = 2.31:1, against WCAG AA's 4.5 for 12px
   regular text. Not one page — an EIGHT-route sweep found breadcrumbs on four of them
   (T4 grid, T5 list, T10 PDP, T7 search) and ALL FOUR measured 2.31, while the other four
   render no breadcrumbs at all. Stated precisely, because an earlier draft of this comment
   said "a 4-route sweep": eight routes probed, four carrying breadcrumbs, all four failing —
   and those four span THREE distinct documents, since T4 and T5 are the same URL in two
   list modes and breadcrumbs are mode-invariant.

   THE TIE IS WON ON SOURCE ORDER, AND THAT IS EMPIRICAL, NOT ASSUMED: the rule below,
   `.breadcrumbs a { color: inherit }` at (0,1,1), already beats Blank's
   `.breadcrumbs a { color: #333 }` at the identical (0,1,1) on this page — which is the
   proof that this theme's bundle loads after styles-m.css and wins equal-specificity ties.
   This rule matches Luma's (0,2,0) exactly and needs no !important.

   NO NEW DESIGN DECISION IS MADE HERE. The token is the one the wrapper rule above
   already chose; this only lets that existing choice reach the element that paints.
   The comp draws crumbs at `color-mix(in oklab, var(--tx) 52%, var(--bg))`, which is
   `--hrv-text-subtle` — and register #39 records that token failing AA in all five
   palettes, so the theme's existing 65% `--hrv-text-muted` is deliberately kept. */
.breadcrumbs .items,
.hrv-breadcrumbs .items {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--hrv-text-muted);
}
.breadcrumbs .item,
.hrv-breadcrumbs .item { display: inline-flex; align-items: center; gap: 9px; }
/* `:visited` IS NOT DECORATION HERE — WITHOUT IT BLANK WINS OUTRIGHT ON MOST CRUMBS.
   Blank's compiled bundle carries `.breadcrumbs a:visited { color: #333 }` at (0,2,1); this
   rule without the pseudo-class is (0,1,1), so it loses on specificity and source order is
   irrelevant. Every crumb a returning shopper has already clicked — which on a breadcrumb
   trail is most of them — painted #333 while the unvisited ones painted the token, giving
   one trail two colours.

   NO PROBE IN THIS REPO COULD HAVE FOUND IT, and that is why it is written down at length:
   Chrome deliberately returns the UNVISITED style from `getComputedStyle` for `:visited`
   links as an anti-history-sniffing measure, so the rendered sweeps read a clean single
   colour and would keep reading one however wrong the page looked. Found by reading the
   compiled Blank rules in the S1 code review, not by measuring. It is not an AA failure —
   all five Harvest palettes are light-grounded, so #333 is high-contrast — it is an
   inconsistency, and it stays fixed rather than filed because the fix is two selectors. */
.breadcrumbs a,
.breadcrumbs a:visited,
.hrv-breadcrumbs a,
.hrv-breadcrumbs a:visited { color: inherit; text-decoration: none; }
.breadcrumbs a:hover,
.hrv-breadcrumbs a:hover { color: var(--hrv-text); }

/* Separator — replace Magento's default with a slim slash. */
.breadcrumbs .item:not(:last-child)::after,
.hrv-breadcrumbs .item:not(:last-child)::after {
  content: "/";
  color: var(--hrv-text-subtle);
}
.breadcrumbs .item:last-child,
.breadcrumbs .item.cms_page,
.hrv-breadcrumbs .item--current {
  color: var(--hrv-text);
}

@media (max-width: 767px) {
  .breadcrumbs,
  .hrv-breadcrumbs { padding-top: 16px; }

  /* TAP TARGETS. The breadcrumb links measured 35x14 and appear on 35 of the 47 swept routes -
     by a wide margin the most common control under the 44px mobile bar, and invisible as a
     defect precisely because it is one small link per page rather than a pile on one page.
     Padding rather than min-height: the row must stay a row, and vertical padding grows the
     hit area without changing the type or the baseline. */
  .breadcrumbs .items > .item > a,
  .hrv-breadcrumbs .items > .item > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* BOTH dimensions, because the first version set only min-height and the link still
       failed: "Home" is 32px wide, so the box went to 32x44 and the SMALLER dimension is the
       one a thumb has to hit. The rule was in the stylesheet, matched, and applied - and the
       control was still too small, which is a more useful kind of wrong than a rule that never
       ran. Short labels centre inside 44px; longer ones keep their natural width. */
    min-width: 44px;
    min-height: 44px;
  }
}