/*
 * Breadcrumbs — the .hs-crumbs block.
 *
 * One block, used by every template that shows a trail (see inc/breadcrumbs.php
 * for which those are). It is deliberately its own small file rather than a
 * section in components.css: breadcrumbs are not global chrome, they are a
 * component that several templates opt into, and components.css must stay the
 * header/footer's own ground.
 *
 * Nothing here may reach the global chrome. Every selector starts at .hs-crumbs,
 * a name no other stylesheet uses. The older .hs-breadcrumbs rules in
 * content.css / reparatie.css / product.css belong to the Yoast markup this
 * block replaces and can go once the last call site is switched over.
 *
 * Restyled 27-10-2026 (Janyar): one calm trail on every page. Lato 14px, grey
 * links that turn teal and underline on hover, small drawn chevrons between the
 * crumbs (no typed ">" or "»" any more), the current page in the dark text
 * colour. Before: Poppins 15.64px #4d4d4d with ">" (the old Elementor widget),
 * and Lato 16px with "»" inside the mint title band. The band lost its mint fill
 * the same day (content.css), so the trail now looks the same wherever it is.
 *
 * Contrast, measured against #ffffff (and re-checked on --bg-2 #f8fafb):
 *   links        --fg-2        #474747   9.29:1
 *   link hover   --accent-text #006e7c   5.97:1  (5.70:1 on --bg-2)
 *   current page --fg-1        #252525  15.3:1
 * All well past the 4.5:1 that 14px text needs. The chevrons are decorative
 * (empty content), so they may sit lighter, at --hs-ink-4.
 */

.hs-crumbs {
	margin: 0 0 var(--sp-5);
	color: var(--fg-2);
	font-family: var(--font-sans);
	font-size: var(--fs-14);
	line-height: var(--lh-base);
	letter-spacing: 0.01em;
}

/*
 * Section-built templates (the flexible page, /verkopen/, /reparaties/) open
 * straight into a band and have no .wrap to give the page its top rhythm, so the
 * crumb brings its own. Same token layout.css uses on .wrap.
 */
.hs-crumbs--lead {
	margin-top: var(--sp-8);
}

.hs-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-1) var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The full trail on every width, wrapping when it has to — as on the old site,
 * which shows "Home > Smartphones > Apple > iPhone > product" on a phone too
 * (measured 11-10-2026). An earlier version showed only a back link below 40em.
 */
.hs-crumbs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-width: 0;
}

/* A small chevron between the crumbs, drawn (Phosphor caret-right, the theme's
 * own icon set) and tinted through a mask. The content is empty, so nothing is
 * read out between the crumbs. */
.hs-crumbs__item + .hs-crumbs__item::before {
	content: "";
	flex: 0 0 auto;
	width: 0.625rem;
	height: 0.625rem;
	background: var(--hs-ink-4);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Target size on touch screens: the padding lifts the tap area to ~29px
 * (WCAG 2.5.8 asks 24px) without changing the line. The underline is there
 * from the start but transparent, so hover only fades it in. */
.hs-crumbs__link {
	display: inline-block;
	padding-block: var(--sp-1);
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color var(--dur-fast) var(--ease-standard), text-decoration-color var(--dur-fast) var(--ease-standard);
}

.hs-crumbs__link:hover,
.hs-crumbs__link:focus-visible {
	color: var(--accent-text);
	text-decoration-color: currentColor;
}

.hs-crumbs__link:focus-visible {
	border-radius: 2px;
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.hs-crumbs__step {
	color: inherit;
	overflow-wrap: anywhere;
}

/* The page you are on: dark and bold, never a link. A long title (an article,
 * a product name) is cut off with "…" at 30 characters, or sooner when the
 * line is narrower (Janyar, 29-10-2026; first 40, then 30); it was wrapped over several lines.
 * The full text stays in the markup, so screen readers read all of it, and in
 * the title attribute for a mouse hover. */
.hs-crumbs__item:last-child {
	flex: 0 1 auto;
	max-width: 100%;
}

.hs-crumbs__current {
	display: block;
	max-width: 30ch;
	overflow: hidden;
	color: var(--fg-1);
	font-weight: var(--fw-bold);
	white-space: nowrap;
	text-overflow: ellipsis;
}

@media (min-width: 40em) {
	.hs-crumbs__link {
		padding-block: 0;
	}
}