/* ============================================================
   CalculatorFix.com — Breadcrumb Styles (assets/css/breadcrumb.css)
   ============================================================ */

/* ── Breadcrumb Nav Wrapper ── */
.breadcrumb {
  padding-block: var(--space-3);
}

/* ── List ── */
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;               /* gaps handled by separator + padding */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── Individual Item ── */
.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  line-height: 1.4;
  /* Smooth out paint on long crumb lists */
  contain: layout style;
}

/* ── Links ── */
.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  transition:
    color       var(--transition-fast),
    background  var(--transition-fast);
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb__link:hover {
  color:      var(--accent-primary);
  background: var(--brand-blue-pale);
}

/* Home link gets a tiny bit more padding for the icon */
.breadcrumb__link--home {
  padding: 3px 8px 3px 6px;
}

/* Home icon */
.breadcrumb__home-icon {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color var(--transition-fast);
  margin-bottom: 1px; /* optical alignment with text */
}

.breadcrumb__link--home:hover .breadcrumb__home-icon {
  color: var(--accent-primary);
}

/* ── Separator ── */
.breadcrumb__sep {
  display: inline-flex;
  align-items: center;
  color: var(--border-medium);
  flex-shrink: 0;
  margin-inline: 1px;
  pointer-events: none;
  user-select: none;
}

/* ── Current Page (last crumb) ── */
.breadcrumb__item--current {
  /* no separator after it */
}

.breadcrumb__current {
  color: var(--text-primary);
  font-weight: 600;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Non-linked middle crumb ── */
.breadcrumb__plain {
  color: var(--text-secondary);
  font-weight: 500;
  padding: 3px 4px;
  white-space: nowrap;
}

/* ── Ellipsis (mobile collapse) ── */
.breadcrumb__item--ellipsis {
  /* always hidden on desktop — shown on mobile */
  display: none;
}

.breadcrumb__ellipsis {
  color: var(--text-muted);
  font-weight: 700;
  font-size: var(--text-xs);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  cursor: default;
  letter-spacing: 0.05em;
}

/* ── Structured data <meta> elements (invisible) ── */
.breadcrumb__list meta {
  display: none;
}

/* ════════════════════════════════
   FULL-PAGE BREADCRUMB BAR
   (optional wrapper for pages that
   want a full-width bg strip)
════════════════════════════════ */
.breadcrumb-bar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  padding-block: 0;   /* breadcrumb padding handled inside */
}

.breadcrumb-bar .breadcrumb {
  padding-block: var(--space-3);
}

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */

/* Tablet: tighten up */
@media (max-width: 767px) {
  .breadcrumb__link {
    max-width: 140px;
  }

  .breadcrumb__current {
    max-width: 160px;
  }
}

/* Mobile: collapse middle crumbs, show ellipsis */
@media (max-width: 479px) {
  /* Hide long middle items */
  .breadcrumb__item--hidden-xs {
    display: none;
  }

  /* Show the ellipsis placeholder */
  .breadcrumb__item--ellipsis {
    display: inline-flex;
  }

  .breadcrumb__link {
    max-width: 110px;
    font-size: 11px;
  }

  .breadcrumb__current {
    max-width: 130px;
    font-size: 11px;
  }
}

/* ════════════════════════════════
   DARK SURFACE VARIANT
   Use class="breadcrumb breadcrumb--on-dark"
   for breadcrumbs on coloured/dark backgrounds
════════════════════════════════ */
.breadcrumb--on-dark .breadcrumb__link {
  color: rgba(255, 255, 255, 0.65);
}

.breadcrumb--on-dark .breadcrumb__link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.breadcrumb--on-dark .breadcrumb__home-icon,
.breadcrumb--on-dark .breadcrumb__sep {
  color: rgba(255, 255, 255, 0.4);
}

.breadcrumb--on-dark .breadcrumb__current {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* ════════════════════════════════
   PRINT
════════════════════════════════ */
@media print {
  .breadcrumb__sep,
  .breadcrumb__item--ellipsis {
    display: none;
  }

  .breadcrumb__link::after {
    content: ' > ';
    color: #666;
  }
}