/* EPC Breadcrumbs — matches the page-hero band on the interior page templates.
   Scoped with .epc- prefix so it won't collide with Divi or theme styles. */

.epc-breadcrumb {
	/* Defaults assume a dark background (the navy/photo page-hero band).
	   If this shortcode is ever placed on a light-background page instead,
	   override these three custom properties in that page's Custom CSS —
	   see readme.txt for a copy-paste example. */
	--epc-breadcrumb-color: rgba(250, 247, 240, 0.8);
	--epc-breadcrumb-link-color: rgba(250, 247, 240, 0.95);
	--epc-breadcrumb-current-color: rgba(250, 247, 240, 0.9);

	font-size: 0.92rem;
	margin: 0 0 16px;
	font-family: 'DM Sans', Helvetica, Arial, sans-serif;
}

.epc-breadcrumb ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

.epc-breadcrumb li {
	display: flex;
	align-items: center;
	/* !important: Divi's own global styles set every <a> to navy
	   (#003566), which is unreadable on this dark banner. This beats
	   that fight outright instead of relying on a specificity tie. */
	color: var(--epc-breadcrumb-color) !important;
}

.epc-breadcrumb li:not(:first-child)::before {
	content: "/";
	margin: 0 8px;
	opacity: 0.5;
}

.epc-breadcrumb a,
.epc-breadcrumb a:visited {
	color: var(--epc-breadcrumb-link-color) !important;
	text-decoration: none;
}
.epc-breadcrumb a:hover {
	text-decoration: underline;
}

.epc-breadcrumb li:last-child span {
	color: var(--epc-breadcrumb-current-color) !important;
}