/* ==========================================================================
   Breadcrumb — Webflow code component styles (rendered inside its Shadow DOM)

   Figma Hero eyebrow: "Why airCFO / TEAM", Inter 14px / 700 / 164%,
   uppercase, Text-Secondary. Made for the Hero's Eyebrow slot, and works
   anywhere else on its own.
   ========================================================================== */

:host {
  display: block;

  /* ===== Webflow variables (value matches Figma) ===== */

  --crumb-font:  var(--fonts--secondary, "Inter");
  /* A parent component can recolour it by setting --breadcrumb-color /
     --breadcrumb-hover (they inherit through the slot), e.g. Profile Hero */
  --crumb-color: var(--breadcrumb-color, var(--colors--market-slate, #3c6e82));  /* Figma Text-Secondary */
  --crumb-hover: var(--breadcrumb-hover, var(--colors--equity-blue, #132c3a));   /* Figma Text-Primary   */

  /* ===== Fixed Figma values (no matching variable) ===== */

  --crumb-size: 0.875rem;         /* 14px / 700 / 164%, uppercase */
  --crumb-lh:   164%;
  --crumb-sep-gap: 0.5em;         /* space either side of the "/" */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.crumbs {
  margin: 0;
  color: var(--crumb-color);
  font-family: var(--crumb-font), system-ui, sans-serif;
  font-size: var(--crumb-size);
  font-weight: 700;
  line-height: var(--crumb-lh);
  text-transform: uppercase;
}

.crumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumbs-item {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
}

/* "/" between items, drawn by CSS so screen readers don't read it */
.crumbs-item + .crumbs-item::before {
  content: "/";
  margin-inline: var(--crumb-sep-gap);
}

.crumbs-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.crumbs-link:hover {
  color: var(--crumb-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.crumbs-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}