/**
 * Breadcrumbs — canonical shared component (A-04a)
 * ----------------------------------------------------------------------------
 * `.tr-breadcrumbs` is the canonical breadcrumb component for the theme, per
 * CLAUDE.md §9.4a and impeccable/DESIGN.md §6.
 *
 * The PHP layers were already canonical before this file existed:
 *   - data    inc/navigation/breadcrumbs.php  (tiora_get_breadcrumb_items)
 *   - markup  template-parts/shared/breadcrumbs.php
 *   - schema  inc/schema/breadcrumb.php       (BreadcrumbList, same array)
 * The missing layer was canonical CSS ownership, which this file supplies.
 *
 * Ported from the `.tiorai-breadcrumb` block in theme-unified.css with four
 * deliberate corrections:
 *   1. The base is alignment-neutral. Alignment is opt-in via `--center` /
 *      `--start`, so a consumer never has to fight a baked-in default. The
 *      shared renderer applies `--center`, which is what every page rendered
 *      before this change.
 *   2. Hover/focus no longer uses `--color-accent` (#f6e96a). On the light
 *      surface that measured 1.25:1 — a WCAG 2.2 AA 1.4.3 failure on every
 *      indexed page. It now uses the semantic link-hover token.
 *   3. `:focus-visible`, not bare `:focus`, so a pointer click does not recolor
 *      the label. The A-02 focus ring is untouched — no `outline` is set here.
 *   4. Long-title handling for the current crumb, which is a full post title on
 *      30,000+ URLs.
 *
 * `.tiorai-breadcrumb*` is retained in the markup alongside this component so
 * the seven live module overrides keep working. Retiring it is A-04b, deferred.
 *
 * @package TiorAI
 * @since 1.8.0
 */

/* ============================================================================
   BASE
   ========================================================================== */

/* Alignment-neutral. Use a modifier to position the trail. */
.tr-breadcrumbs {
  margin-bottom: var(--space-6);
}

.tr-breadcrumbs--center {
  display: flex;
  justify-content: center;
}

.tr-breadcrumbs--start {
  display: flex;
  justify-content: flex-start;
}

/* ============================================================================
   LIST + ITEMS
   ========================================================================== */

.tr-breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  font-size: var(--font-size-sm);
  gap: var(--space-2);
}

.tr-breadcrumbs__item {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Separator is drawn in CSS, never in the DOM. */
.tr-breadcrumbs__item:not(:last-child)::after {
  content: '\203A';
  margin-inline-start: var(--space-2);
  color: var(--color-text-tertiary);
  font-size: 1rem;
  line-height: 1;
}

/* ============================================================================
   LINK + CURRENT
   ========================================================================== */

.tr-breadcrumbs__link {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: var(--transition-fast);
  display: inline-block;
}

/*
 * `:focus-visible` rather than `:focus` — pointer interaction stays silent,
 * matching the A-02 contract. No `outline` is declared here, so the global
 * focus ring continues to paint.
 */
.tr-breadcrumbs__link:hover,
.tr-breadcrumbs__link:focus-visible {
  color: var(--color-text-link-hover, var(--color-primary-dark));
  text-decoration: underline;
}

.tr-breadcrumbs__current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  min-width: 0;
  /* The last crumb is a full post title; never let one long token overflow. */
  overflow-wrap: anywhere;
}

/* ============================================================================
   RESPONSIVE — canonical breakpoint only (DESIGN.md §6)
   ========================================================================== */

/*
 * At phone width a long title would otherwise wrap to four or five lines and
 * push the H1 below the fold. Clamp to two lines. CSS-only: the DOM text and
 * the accessible name are unchanged, as is the BreadcrumbList schema.
 */
@media (max-width: 480px) {
  .tr-breadcrumbs__current {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ============================================================================
   PRINT
   ========================================================================== */

/*
 * `!important` is required: the live module overrides target
 * `.single-tool__breadcrumbs .tiorai-breadcrumb` (0,2,0) and would otherwise
 * beat this rule and keep the trail visible on printed pages.
 */
@media print {
  .tr-breadcrumbs {
    display: none !important;
  }
}