/* ═══════════════════════════════════════════════════════════
   FP-C-012 — CATEGORY BREADCRUMB
   Shared by all seven category landing pages.
   Version: v1.0 (theme v3.12.0)

   SYSTEM-LEVEL ONLY. No category-specific rule. The trail comes
   from the registry, so adding a category needs no CSS at all.

   Every value below is an existing token from base.css.
   ═══════════════════════════════════════════════════════════ */

.fp-breadcrumb {
    background-color: var(--fp-color-white);
    padding-top: var(--fp-space-s);       /* 16px */
    padding-bottom: 0;
}

/* Same axis as the hero: identical max-width and margins, so the trail lines
   up exactly with the left edge of Card 1 at every breakpoint. */
.fp-breadcrumb__container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 var(--fp-margin-mobile);   /* 20px */
    box-sizing: border-box;
}

.fp-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;                      /* never forces horizontal overflow */
    align-items: center;
    gap: var(--fp-space-xs);              /* 8px */
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--fp-font-caption);    /* 13px */
    line-height: var(--fp-line-heading);  /* 1.20 */
}

.fp-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--fp-space-xs);
}

/* Separator is generated, not authored into the markup, so it is never read
   aloud and never copied with the text. */
.fp-breadcrumb__item + .fp-breadcrumb__item::before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid var(--fp-color-gray-300);
    border-bottom: 1.5px solid var(--fp-color-gray-300);
    transform: rotate(-45deg);
    flex: 0 0 auto;
}

/* Colour is re-asserted on every state: GeneratePress emits its own
   a:hover/:focus/:active colour at equal specificity and later in source
   order - the cascade trap documented in coding-standards.md. */
.fp-breadcrumb__link {
    color: var(--fp-color-gray-500);
    text-decoration: none;
    /* v3.57.79 - colour only. The shorthand transitioned ALL properties, so the focus outline grew from 0px and the
       keyboard ring was invisible at the moment focus arrived (Work QA of v3.57.78, F1). */
    transition: color var(--fp-button-transition);
}

.fp-breadcrumb__link:hover {
    color: var(--fp-color-blue);
    text-decoration: underline;
}

.fp-breadcrumb__link:active  { color: var(--fp-color-blue-pressed); }
.fp-breadcrumb__link:visited { color: var(--fp-color-gray-500); }

.fp-breadcrumb__link:focus-visible {
    outline: 2px solid var(--fp-color-blue);
    outline-offset: 3px;
    border-radius: 2px;
}

.fp-breadcrumb__current {
    color: var(--fp-color-navy);
    font-weight: var(--fp-weight-label);   /* 600 */
}

/* Margins step with the hero container so the two stay on one axis. */
@media (min-width: 640px) {
    .fp-breadcrumb__container { padding: 0 var(--fp-margin-tablet); }   /* 24px */
}

@media (min-width: 1280px) {
    .fp-breadcrumb { padding-top: var(--fp-space-m); }                  /* 24px */
}

@media (min-width: 1440px) {
    .fp-breadcrumb__container { padding: 0 var(--fp-margin-desktop); }  /* 32px */
}

/* v3.57.147 (G03, Work 2026-10-29): GeneratePress's inline `a:focus` #222222 ((0,1,1), loaded later) recoloured a keyboard-focused
   breadcrumb link. Focus keeps the gray-500 rest colour; the blue ring above is the focus indicator. Only while the link is neither
   hovered nor pressed, so the hover, active and :visited rules above are unchanged. */
a.fp-breadcrumb__link:focus:not(:hover):not(:active) { color: var(--fp-color-gray-500); }