/* breadcrumbs.css — the SINGLE SOURCE of breadcrumb vertical rhythm, site-wide (BREADCRUMB-UNIFY1, 2026-07-17).
   Director: "fix this site wide so the spacing is balanced site wide."

   Before this, SEVEN breadcrumb classes each baked their own vertical spacing inline, per page, from
   whichever generator built that page family — and they disagreed badly:
     .crumbs      margin:18–20px auto 0  (top-only, and one variant margin-bottom:18px)   — 344 pages
     .cx-crumb    padding:14px 24px 0    (14 top, 0 bottom)                                —  62 pages
     .tp-crumb    padding:14px 24px 0                                                      —  15 pages
     .hpp-crumbs  inline style= padding:12px 24px 0                                        —  14 pages
     .breadcrumb  margin-bottom:16px     (0 top, 16 bottom)                                —  12 pages
     .tp-crumbs / .pd-crumbs  padding:16px 24px 0                                          —   3 pages
   Five different top values (0/12/14/16/18/20/26), bottom either 0/16/18/22 — visibly unbalanced
   from page to page. This file is the ONE place breadcrumb vertical spacing is now decided.

   MECHANISM — this is not a new invention: it mirrors PRODUCT-CARD1 (product-card.css), which the
   codebase already uses to unify five divergent inline card styles. build_public.py injects this sheet
   LAST before </head>, so it loads AFTER each page's own inline <style> and wins the cascade with no
   !important. It sets ONLY the vertical rhythm (equal top and bottom) and neutralises any margin-based
   vertical spacing; each family keeps its own horizontal layout (max-width, centering, gutter, colour,
   font) exactly as its generator emits it. Injected UNCONDITIONALLY (not gated on the nav sweep), so it
   reaches every page family — including the cx-crumb condition pages, which have no mega-nav and would
   otherwise be skipped.

   Tune the whole site's breadcrumb rhythm from the one token below. */
:root { --hpp-crumb-gap: 16px; }

nav.crumbs, div.crumbs,
nav.cx-crumb,
nav.tp-crumb,
nav.tp-crumbs,
nav.pd-crumbs,
nav.hpp-crumbs,
nav.breadcrumb, div.breadcrumb {
  padding-top: var(--hpp-crumb-gap);
  padding-bottom: var(--hpp-crumb-gap);
  margin-top: 0;
  margin-bottom: 0;
}

/* .hpp-crumbs had NO stylesheet rule — its ENTIRE look lived in an inline style= attribute (which,
   being an attribute, would beat this sheet on specificity). gen_category_hubs.py now emits a bare
   class="hpp-crumbs" with no style= attribute, so its full styling lives here — the single source. */
nav.hpp-crumbs {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  font-size: 13px;
  color: #6b7280;
}
nav.hpp-crumbs a { color: var(--teal, #0f5257); text-decoration: none; }
nav.hpp-crumbs a:hover { text-decoration: underline; }

/* Keep breadcrumb links flowing INLINE on one line at every width. A pre-existing mobile rule flips
   these <nav> anchors to display:flex (they're plain text — "Home", "Shop" — so flex only makes each
   a full-width block), which stacked the whole breadcrumb into a ~150px vertical column on phones.
   Scoped to breadcrumb anchors only, so the real nav menu is untouched. Not caused by this change —
   confirmed by toggling the sheet — but this is the single place breadcrumb layout now lives, so the
   fix belongs here. */
nav.crumbs a, div.crumbs a,
nav.cx-crumb a,
nav.tp-crumb a,
nav.tp-crumbs a,
nav.pd-crumbs a,
nav.hpp-crumbs a,
nav.breadcrumb a, div.breadcrumb a {
  display: inline;
}