/*
 * Mercure Breadcrumbs — Styling
 *
 * Wird nur auf /zimmer-apartments/[slug]/ geladen
 * (siehe inc/breadcrumbs.php → mercure_breadcrumbs_is_zimmer_page).
 *
 * Visuelle Referenz: mercure-breadcrumb-mockup.html
 */

.mc-breadcrumbs {
	background: var(--c-cream, #f4efe8);
	border-bottom: 0;
	padding: 14px 0;
	margin: 0;
}

.mc-breadcrumbs__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 32px);
}

/*
 * Desktop-Override.
 *
 * 1) Header-Overlap-Kompensation: Theme reserviert `body { padding-top:
 *    var(--mc-header-h, 92px) }` fuer den fixed Header, aber der echte
 *    Header ist auf Desktop ~116px hoch. Differenz = 24px Overlap auf dem
 *    ersten Sichtbaren Inhaltselement. Mit `padding-top: 38px` (= 14 + 24)
 *    sitzt der Bar-Background unter dem Header-Overlap und die Breadcrumb-
 *    Liste startet sichtbar.
 *
 * 2) Inner-Container an das Hero-Container-Maß angleichen, damit die
 *    Breadcrumb-Liste auf derselben Vertikallinie startet wie der
 *    Page-Content (.zd-hero-inner: max-width var(--mc-content-max),
 *    Section-Padding clamp(20px, 5vw, 60px)).
 *
 * Diese Regel MUSS nach der Default-Regel oben stehen — beide haben
 * gleiche Spezifitaet, also gewinnt die spaeter deklarierte.
 */
@media (min-width: 981px) {
	.mc-breadcrumbs {
		padding-top: 38px;
	}

	.mc-breadcrumbs__inner {
		max-width: var(--mc-content-max, 1440px);
		padding-inline: clamp(20px, 5vw, 60px);
	}
}

.mc-breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	font-family: var(--wp--preset--font-family--montserrat, 'Montserrat', system-ui, sans-serif);
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.mc-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.mc-breadcrumbs__link {
	color: rgba(20, 16, 12, 0.55);
	text-decoration: none;
	font-weight: 400;
	transition: color 0.2s ease;
	position: relative;
}

.mc-breadcrumbs__link:hover,
.mc-breadcrumbs__link:focus-visible {
	color: var(--wp--preset--color--purple-hover, #8D74AE);
}

.mc-breadcrumbs__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.mc-breadcrumbs__link:hover::after,
.mc-breadcrumbs__link:focus-visible::after {
	transform: scaleX(1);
}

.mc-breadcrumbs__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--purple-hover, #8D74AE);
	outline-offset: 4px;
	border-radius: 1px;
}

.mc-breadcrumbs__home {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mc-breadcrumbs__icon {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}

.mc-breadcrumbs__current {
	/* Theme-Token `--dark` ist #53514F (Mittel-Grau) — fuer den aktiven
	 * Breadcrumb-Eintrag wollen wir das dunkle Ink (#2B2826) wie im Mockup. */
	color: var(--wp--preset--color--ink, #1b1a1a);
	font-weight: 500;
}

.mc-breadcrumbs__sep {
	color: rgba(20, 16, 12, 0.40);
	font-size: 11px;
	line-height: 1;
	user-select: none;
	transform: translateY(0.5px);
}

/* ─── Mobile (≤560px) ─── */
@media (max-width: 560px) {
	.mc-breadcrumbs {
		padding: 12px 0;
	}

	.mc-breadcrumbs__inner {
		padding: 0 20px;
	}

	.mc-breadcrumbs__list {
		font-size: 11px;
		gap: 4px 8px;
	}

	.mc-breadcrumbs__icon {
		width: 12px;
		height: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mc-breadcrumbs__link,
	.mc-breadcrumbs__link::after {
		transition: none;
	}
}