/* marina-breadcrumb — Framework-native breadcrumb navigation
 * Spec: .claude/marina-design/navigation/breadcrumb.md
 * Strategy: Framework-native (not form-associated)
 * ─────────────────────────────────────────────────────────── */

/* ── Host ── */

.marina-breadcrumb {
  display: block;
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
}

/* Text-sm variant */
.marina-breadcrumb--text-sm {
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
}

/* ── List ── */

.marina-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm1);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Item ── */

.marina-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm1);
}

/* ── Separator ── */

.marina-breadcrumb__separator {
  color: var(--cds-theme-text);
  user-select: none;
  flex-shrink: 0;
}

/* ── Sub-item link ── */

.marina-breadcrumb__link {
  color: var(--cds-color-utility-wcag-inline-link);
  text-decoration: none;
  cursor: pointer;
  outline: none;
}

.marina-breadcrumb__link:hover {
  color: var(--cds-color-utility-wcag-inline-link);
  text-decoration: underline;
}

.marina-breadcrumb__link:focus-visible {
  color: var(--cds-color-utility-wcag-inline-link);
  text-decoration: underline;
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: 2px;
}

.marina-breadcrumb__link:active {
  color: var(--cds-color-utility-wcag-inline-link);
  text-decoration: underline;
}

/* ── Current page (non-interactive) ── */

.marina-breadcrumb__current {
  color: var(--cds-theme-text);
  text-decoration: none;
  cursor: default;
}

/* ── Overflow trigger button ── */

.marina-breadcrumb__overflow {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--cds-color-utility-wcag-inline-link);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  outline: none;
  position: relative;
}

.marina-breadcrumb__overflow:hover {
  color: var(--cds-color-utility-wcag-inline-link);
  text-decoration: underline;
}

.marina-breadcrumb__overflow:focus-visible {
  color: var(--cds-color-utility-wcag-inline-link);
  text-decoration: underline;
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: 2px;
}

.marina-breadcrumb__overflow:active {
  color: var(--cds-color-utility-wcag-inline-link);
  text-decoration: underline;
}

/* ── Overflow menu dropdown ── */

.marina-breadcrumb__overflow-menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--spacing-sm1));
  left: 0;
  z-index: 100;
  width: max-content;
  max-width: 328px;           /* per dropdown-menu spec */
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--cds-theme-bg, var(--cds-color-neutral-white));
  box-shadow: var(--cds-shadow-m3);
  border-radius: var(--cds-radius-small);
  overflow: hidden;
}

.marina-breadcrumb__overflow-menu--open {
  display: block;
}

/* ── Overflow menu item ── */

.marina-breadcrumb__overflow-item {
  display: block;
  width: 100%;
  padding: var(--spacing-sm1) var(--spacing-sm2);
  color: var(--cds-color-neutral-black);
  text-decoration: none;
  background: var(--cds-color-neutral-200);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.marina-breadcrumb__overflow-item:hover {
  background: var(--cds-color-neutral-300);
  text-decoration: none;
}

.marina-breadcrumb__overflow-item:focus-visible {
  background: var(--cds-color-neutral-200);
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: -2px;
}

.marina-breadcrumb__overflow-item:active {
  background: var(--cds-color-neutral-500);
  color: var(--cds-color-neutral-white);
}

/* ── Dark mode ── */

[data-mode="dark"] .marina-breadcrumb__link,
[data-mode="dark"] .marina-breadcrumb__overflow {
  /* Link color unchanged across modes — spec: "utility token, not brand accent token" */
  color: var(--cds-color-utility-wcag-inline-link);
}

[data-mode="dark"] .marina-breadcrumb__link:hover,
[data-mode="dark"] .marina-breadcrumb__overflow:hover {
  color: var(--cds-color-utility-wcag-inline-link);
}

[data-mode="dark"] .marina-breadcrumb__current {
  /* --cds-theme-text resolves to --cds-color-neutral-white in dark mode */
  color: var(--cds-theme-text);
}

[data-mode="dark"] .marina-breadcrumb__separator {
  color: var(--cds-theme-text);
}

[data-mode="dark"] .marina-breadcrumb__overflow-item {
  color: var(--cds-color-neutral-white);
  background: var(--cds-color-neutral-500);
}

[data-mode="dark"] .marina-breadcrumb__overflow-item:hover {
  background: var(--cds-color-neutral-400);
}