/* ===================================================================
   HomePezzo shared breadcrumb (NAV1, v0.1.161)
   Markup comes from hp_breadcrumb_render() in includes/hp-breadcrumb.php.

   Visual baseline is the ED2 guide breadcrumb this replaces — same 13px
   scale, same restrained grays, same › separator, same 14px space below
   — but the selectors are now shared (.hp-breadcrumb*) instead of being
   scoped to .hp-guide-editorial, so every surface renders identically.

   Only HomePezzo-owned class names are targeted. No Bricks, GeoDirectory,
   Rank Math, or theme selector is touched, and nothing here can affect the
   header, cards, hero, or any other element.

   Contrast (v0.1.164, Phase 2): the muted crumb colour is --hp-ink-muted
   (#565D69) — 6.63:1 on a white surface, 5.93:1 on the warm canvas.

   It was #6B7280, chosen when every surface was white (4.83:1). Phase 2
   introduced --hp-canvas (#F4F2ED) as the page ground, and #6B7280 measures
   only 4.32:1 there — below AA. Inside a Bricks archive header the crumb
   still sits on white and was unaffected, but the AUTO-INJECTED bar
   (.hp-breadcrumb-bar, used on any page with no archive-header template —
   /vendors/ is the live example) sits directly on the canvas, where it
   failed. Moving to --hp-ink-muted makes the crumb correct on BOTH grounds
   instead of correct on whichever one it happens to land on.

   The current crumb is #111827 (15.9:1 on canvas). The › separator is
   decorative and carries aria-hidden in the markup, so its lower-contrast
   #9CA3AF is presentational only.
   =================================================================== */

.hp-breadcrumb {
    font-size:   13px;
    line-height: 1.5;
    margin:      0 0 14px;
    /* Crumb count is data-driven; every rule below works at any depth. */
}

.hp-breadcrumb__list {
    list-style:  none;
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         2px 0;
    margin:      0;
    padding:     0;
}

.hp-breadcrumb__item {
    color:         var(--hp-ink-muted, #565D69);
    min-width:     0;
    /* Long product/guide titles must wrap inside the column rather than
       push the page wide — see the overflow test at 320px. */
    overflow-wrap: anywhere;
    word-break:    break-word;
}

.hp-breadcrumb__sep {
    margin: 0 8px;
    color:  #9CA3AF;
}

.hp-breadcrumb__link {
    color:           var(--hp-ink-muted, #565D69);
    text-decoration: none;
}

.hp-breadcrumb__link:hover,
.hp-breadcrumb__link:focus {
    color:           var(--hpg-guide-ink, var(--hp-accent, #315E9E));
    text-decoration: underline;
}

/* Keyboard focus must stay obvious even where a theme resets outlines. */
.hp-breadcrumb__link:focus-visible {
    outline:        2px solid var(--hp-blue, #315E9E);
    outline-offset: 2px;
    border-radius:  3px;
}

.hp-breadcrumb__item--current,
.hp-breadcrumb__item--current .hp-breadcrumb__label {
    color:       #111827;
    font-weight: 500;
}

/* -------------------------------------------------------------------
   Auto-injected bar (standard Bricks pages, which have no shared
   template container to inherit width from). Matches the 1200px /
   24px gutter the Bricks containers give the shortcode elsewhere.
   ------------------------------------------------------------------- */
.hp-breadcrumb-bar {
    width: 100%;
}

.hp-breadcrumb-bar__inner {
    max-width:    1200px;
    margin:       0 auto;
    padding:      16px 24px 0;
    box-sizing:   border-box;
}

.hp-breadcrumb-bar .hp-breadcrumb {
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .hp-breadcrumb {
        font-size: 12.5px;
    }

    .hp-breadcrumb__sep {
        margin: 0 6px;
    }

    /* Comfortable tap targets once the trail wraps to several lines,
       without adding vertical space on desktop. */
    .hp-breadcrumb__link {
        display:     inline-block;
        padding:     3px 0;
        line-height: 1.45;
    }

    .hp-breadcrumb-bar__inner {
        padding: 12px 16px 0;
    }
}