/*
 * The trail above every page inside a roaster (TC_Crumbs,
 * templates/parts/crumbs.php), as the owner signed it off.
 *
 * A phone (under 48em) shows only "‹ {parent}": one 44px link, 15px, green.
 * A desk shows the whole line instead: a quiet 14px row under the header,
 * muted, links green, the page itself in ink at 500. The same markup for
 * both; nothing here needs script.
 *
 * Selectors carry the component class twice over the page's own
 * `#tapper-cafe-app .tc-{page} :where(a)` resets, which load after this.
 * The colours are home.css's tokens written out: the brew pages have no
 * .tc-cards, and storefront.css's own --tc-green and --tc-ink differ.
 */

#tapper-cafe-app .tc-crumbs {
	margin: 0 0 0.75rem;
	font-size: 15px;
	line-height: 1.4;
}

#tapper-cafe-app .tc-crumbs .tc-crumbs__list {
	display: none;
}

#tapper-cafe-app .tc-crumbs .tc-crumbs__back,
#tapper-cafe-app .tc-crumbs .tc-crumbs__back:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 44px;
	color: #29594B;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

#tapper-cafe-app .tc-crumbs .tc-crumbs__back:hover,
#tapper-cafe-app .tc-crumbs .tc-crumbs__back:focus-visible {
	color: #29594B;
	text-decoration: underline;
}

#tapper-cafe-app .tc-crumbs .tc-crumbs__chev {
	font-size: 1.25em;
	line-height: 1;
}

@media (min-width: 48em) {
	#tapper-cafe-app .tc-crumbs {
		margin: 0 0 1rem;
	}

	#tapper-cafe-app .tc-crumbs .tc-crumbs__back {
		display: none;
	}

	#tapper-cafe-app .tc-crumbs .tc-crumbs__list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.25rem 0.5rem;
		margin: 0;
		padding: 0;
		color: #6B6660;
		font-size: 14px;
		line-height: 1.5;
		list-style: none;
	}

	#tapper-cafe-app .tc-crumbs .tc-crumbs__item {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-width: 0;
		margin: 0;
		padding: 0;
	}

	#tapper-cafe-app .tc-crumbs .tc-crumbs__item::before {
		content: none;
	}

	#tapper-cafe-app .tc-crumbs .tc-crumbs__sep {
		color: #6B6660;
	}

	#tapper-cafe-app .tc-crumbs .tc-crumbs__link,
	#tapper-cafe-app .tc-crumbs .tc-crumbs__link:visited {
		color: #29594B;
		text-decoration: none;
	}

	#tapper-cafe-app .tc-crumbs .tc-crumbs__link:hover,
	#tapper-cafe-app .tc-crumbs .tc-crumbs__link:focus-visible {
		color: #29594B;
		text-decoration: underline;
	}

	#tapper-cafe-app .tc-crumbs .tc-crumbs__current {
		color: #121111;
		font-weight: 500;
	}
}