/*
  category-head.css
  Breadcrumb, category name and intro line at the top of a category page.
  No background colour on purpose: it sits on the page wash.
  Needs css/base.css.
*/

.fm-category-head { padding-block: 1rem 1.25rem; }

/* ---------- Breadcrumb: Home / News / Poultry ---------- */
.fm-breadcrumb { margin-bottom: 1.1rem; font-size: var(--fm-t-xs); color: var(--fm-muted); }
.fm-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
/* The slash between items is added here, so the HTML is just a list */
.fm-breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: #9fb0bc; }
.fm-breadcrumb a { color: var(--fm-blue); font-weight: 600; }
.fm-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Title block: coloured heading, muted intro ---------- */
.fm-category-head h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); line-height: 1.05; color: var(--fm-blue); }
.fm-category-head__lead { max-width: 46rem; margin-top: 0.7rem; font-size: 1.0625rem; line-height: 1.55; color: var(--fm-muted); }