/* See ./breadcrumb.md for the Figma extraction (LG frame 22895:5711,
 * MD frame 22895:6325 - LifeLock theme), the surface-palette contract,
 * and the icon-canvas ratio note. */

/* Non-render states: `breadcrumb.js` stamps data-state on the block so
 * author mode + EDS mode can key off it independently.
 *   - "empty"     -> no <li> href matches the current pathname
 *   - "root-only" -> matched <li> is a top-level rung (single-item
 *                    trail; redundant on the page it points to)
 * Both collapse to zero visual space on served pages so we don't
 * leave a phantom gap in a flex/grid section. breadcrumb.author.css
 * un-hides both under body[data-ue-mode]. */
.breadcrumb[data-state="empty"],
.breadcrumb[data-state="root-only"] {
  display: none;
}

/* Component-scoped surface palette. Default resolves to the light-bg
 * treatment (project-standard neutral text tokens, not Figma-pinned -
 * Figma only spec'd the dark-footer variant). The .breadcrumb--in-footer
 * modifier below swaps to the Figma-pinned dark palette. The chevron
 * paints via background-color: currentColor, so it inverts with the
 * link color for free - no per-surface chevron override needed. */
.breadcrumb {
  --bc-color-link: var(--ll-color-text-secondary);
  --bc-color-current: var(--ll-color-text-primary);
  --bc-sep-icon-url: url("/icons/arrows-navigation/simple-chevron-right.svg");
}

.breadcrumb--in-footer {
  /* Rhythm trim only - placement-driven, applies at every footer theme.
   * Trims 8px off the flex-gap distance to the next sibling so the
   * breadcrumb sits at Figma's inner-Container gap (space-12 at LG,
   * space-8 at SM) instead of the outer-Footer gap (space-13 at LG,
   * space-9 at SM) that .footer__inner applies uniformly to all
   * children. Flex gap + negative margin compose additively, so
   * 64 + (-8) = 56 at LG, 40 + (-8) = 32 at SM. MD is extrapolated
   * (no Figma frame). Delta is exactly one space step at every
   * breakpoint we have Figma data for. See breadcrumb.md
   * "Footer rhythm trim". */
  margin-block-end: calc(-1 * var(--ll-space-3));
}

/* Dark-theme footer: apply the Figma-pinned dark palette. Scoped to
 * .footer--theme-dark (stamped by blocks/footer/footer.js applyTheme)
 * so light-theme footers (.footer--theme-light) fall through to the
 * base .breadcrumb light-surface palette above - painting the Figma
 * dark palette on a white footer would render white current-rung
 * text on white bg (invisible) and washed-out brand-light links.
 * Note the selector matches BOTH the footer cascade (footer element
 * ancestor via footer.js) and the source-page authored case where
 * .footer.footer--theme-dark lives directly in <main>; see
 * blocks/footer/footer.md "Rule 1b". */
.footer--theme-dark .breadcrumb--in-footer {
  --bc-color-link: var(--ll-color-highlight-brand-light);
  --bc-color-current: var(--ll-color-text-inverse);
}

/* Full-width claim when `breadcrumb.js` moves the block into the footer's
 * flex column. Kept alongside the color override so both surface hooks
 * live in one place. */
.footer__inner > .breadcrumb--in-footer {
  width: 100%;
}

/* Mobile-first: MD- values (Figma frame 22895:6325, body-xs 12/18/0.24,
 * gap 4px, chevron opacity 1). @media (width >= 1024px) upgrades to
 * LG+ values (frame 22895:5711, body-base 16/24/0.32, gap 8px, chevron
 * opacity 0.7). Canonical breakpoint per lledsue-atomic-design.mdc. */
.breadcrumb__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ll-space-2);
  color: var(--bc-color-link);
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  font-weight: var(--ll-text-body-xs-weight);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
}

.breadcrumb__link {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--ll-motion-hover-duration) var(--ll-motion-hover-easing);
}

/* Opacity-only hover matches .footer__mega-menu-link:hover so both
 * surfaces (light-bg dark text, dark-bg light text) get the same
 * "muted on hover" affordance without a per-surface color override. */
.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
  opacity: 0.7;
}

.breadcrumb__link:focus-visible {
  outline: 2px solid var(--ll-color-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.breadcrumb__current {
  color: var(--bc-color-current);
}

/* Chevron-right glyph painted via mask-image + currentColor. mask
 * container is 16x16 (matches Figma's icon-canvas size); the SVG's
 * chevron path occupies ~35%x64% of the 24x24 viewBox, yielding a
 * ~5.5px x ~10px visible stroke - the standard slim breadcrumb
 * separator proportion. See breadcrumb.md "Icon canvas vs visible
 * stroke". */
.breadcrumb__sep {
  display: inline-block;
  flex-shrink: 0;
  inline-size: 16px;
  block-size: 16px;
  background-color: currentcolor;
  opacity: 1;
  mask: var(--bc-sep-icon-url) center / contain no-repeat;

  /* stylelint-disable-next-line property-no-vendor-prefix --
     Safari < 15.4 still requires the -webkit-mask shorthand. */
  -webkit-mask: var(--bc-sep-icon-url) center / contain no-repeat;
}

@media (width >= 1024px) {
  .breadcrumb__nav {
    gap: var(--ll-space-3);
    font-family: var(--ll-text-body-base-family);
    font-size: var(--ll-text-body-base-size);
    font-weight: var(--ll-text-body-base-weight);
    line-height: var(--ll-text-body-base-line-height);
    letter-spacing: var(--ll-text-body-base-letter-spacing);
  }

  .breadcrumb__sep {
    opacity: 0.7;
  }
}