/* ───────────────────────────────────────────
   Breadcrumb — shared partial (single source of truth)
   Used by:
     • /planning/<section>/                      wrapper .planning-breadcrumb
       (rendered by js/planning-nav.js)
     • /procedures/<concern>/                     wrapper .procedure-breadcrumb
       (static HTML in each concern page)
     • /procedures/<concern>/<procedure>/         wrapper .procedure-breadcrumb
       (rendered by js/procedures-data.js)

   The two wrappers share one rule set below (grouped selector). The
   inner dropdown pieces (.breadcrumb-dropdown / -current / -caret /
   -menu / -menu-item) are common to both. JS wiring keys off those
   inner classes, never the wrapper, so the wrapper names can differ.

   Tokens (--color-*, --radius-*) come from partials/header.css :root,
   which is loaded first on every page.
   ─────────────────────────────────────────── */

/* ─── Wrapper (the breadcrumb row) ─── */
.planning-breadcrumb,
.procedure-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    font-size: 15px;
    color: var(--color-text-faint);
}
.planning-breadcrumb a,
.procedure-breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}
.planning-breadcrumb a:not(.breadcrumb-menu-item):hover,
.procedure-breadcrumb a:not(.breadcrumb-menu-item):hover { color: var(--color-brand); }
.planning-breadcrumb svg,
.procedure-breadcrumb svg {
    width: 13px;
    height: 13px;
    color: var(--color-text-disabled);
    flex: none;
}

/* ─── Dropdown — switch between sibling pages ─── */
.breadcrumb-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.breadcrumb-current {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    /* 400 to match the plain breadcrumb links (e.g. "All concerns"); the
       <button> default isn't guaranteed across browsers, so set it explicitly. */
    font-weight: 400;
    /* Same secondary tone as the plain breadcrumb links, so every step in the
       trail reads uniformly (no color-based hierarchy). */
    color: var(--color-text-secondary);
    cursor: pointer;
}
.breadcrumb-current svg {
    width: 8px;
    height: 5px;
    fill: var(--color-text-faint);
}
.breadcrumb-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    padding: 6px;
    background: var(--color-bg);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 20;
}
.breadcrumb-dropdown.is-open .breadcrumb-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.breadcrumb-menu-item {
    display: block;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-xs);
    transition: background 0.15s ease, color 0.15s ease;
}
.breadcrumb-menu-item:hover {
    background: var(--color-surface);
    color: var(--color-text);
}
.breadcrumb-menu-item.is-current {
    background: var(--color-surface-dark);
    color: var(--color-bg);
}
.breadcrumb-menu-item.is-current:hover {
    background: var(--color-surface-dark);
    color: var(--color-bg);
}