/**
 * Reusable breadcrumb component.
 *
 * Add `pp-breadcrumb` to a native Divi text module and `pp-breadcrumb-row` to
 * its row. This asset is enqueued only when the current singular page contains
 * a supported breadcrumb marker.
 */

body #page-container :is(.pp-breadcrumb-row, .pp-divi-case-breadcrumb-row) {
	margin-bottom: 14px !important;
}

/*
 * A case breadcrumb is the first row of the hero. Keep that row close to the
 * site header without changing spacing on pages that do not use breadcrumbs.
 */
body #page-container .et_pb_section.pp-divi-home.pp-portfolio-case.pp-divi-case-hero {
	padding-top: 30px !important;
}

body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) {
	margin: 0 !important;
	max-width: 100%;
	padding: 0 !important;
}

body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) .et_pb_text_inner > p,
body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) > p {
	align-items: center;
	background: linear-gradient(180deg, #fff, #fffaf3);
	border: 1px solid rgba(17, 24, 32, 0.1);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(17, 24, 32, 0.06);
	color: #626a73;
	display: flex;
	flex-wrap: wrap;
	font-size: 13px !important;
	font-weight: 650;
	gap: 5px 7px;
	line-height: 1.4 !important;
	margin: 0 !important;
	max-width: 100%;
	padding: 7px 10px !important;
	width: fit-content;
}

body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) a {
	background: rgba(255, 144, 0, 0.1);
	border: 1px solid rgba(255, 144, 0, 0.2);
	border-radius: 7px;
	color: #b85f00 !important;
	font-weight: 850;
	padding: 3px 7px;
	text-decoration: none !important;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) a:hover {
	background: #ff9000;
	border-color: #ff9000;
	color: #111820 !important;
}

body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) a:focus-visible {
	background: #ff9000;
	border-color: #ff9000;
	box-shadow: 0 0 0 3px rgba(255, 144, 0, 0.24);
	color: #111820 !important;
	outline: none;
}

body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) [aria-hidden="true"] {
	color: #a1a7ad;
	font-weight: 600;
}

body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) [aria-current="page"],
body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) .pp-breadcrumb__current,
body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) p > span:last-child {
	color: #222a33;
	font-weight: 750;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Optional variant for breadcrumb modules placed on a dark section. */
body #page-container .pp-breadcrumb.pp-breadcrumb--dark .et_pb_text_inner > p,
body #page-container .pp-breadcrumb.pp-breadcrumb--dark > p {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: none;
	color: rgba(255, 255, 255, 0.68);
}

body #page-container .pp-breadcrumb.pp-breadcrumb--dark :is([aria-current="page"], .pp-breadcrumb__current),
body #page-container .pp-breadcrumb.pp-breadcrumb--dark p > span:last-child {
	color: #fff;
}

body #page-container .pp-breadcrumb.pp-breadcrumb--dark a {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.9) !important;
}

body #page-container .pp-breadcrumb.pp-breadcrumb--dark a:hover,
body #page-container .pp-breadcrumb.pp-breadcrumb--dark a:focus-visible {
	background: #ff9000;
	border-color: #ff9000;
	color: #111820 !important;
}

/* Compact variant for dense service and article headers. */
body #page-container .pp-breadcrumb.pp-breadcrumb--compact .et_pb_text_inner > p,
body #page-container .pp-breadcrumb.pp-breadcrumb--compact > p {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0 !important;
}

@media (max-width: 1080px) {
	body #page-container .et_pb_section.pp-divi-home.pp-portfolio-case.pp-divi-case-hero {
		padding-top: 24px !important;
	}
}

@media (max-width: 640px) {
	body #page-container :is(.pp-breadcrumb-row, .pp-divi-case-breadcrumb-row) {
		margin-bottom: 10px !important;
	}

	body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) .et_pb_text_inner > p,
	body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) > p {
		border-radius: 10px;
		font-size: 12px !important;
		gap: 4px 6px;
		line-height: 1.35 !important;
		padding: 6px 8px !important;
	}

	body #page-container .pp-breadcrumb--case .et_pb_text_inner > p,
	body #page-container .pp-breadcrumb--case > p {
		display: grid;
		gap: 8px;
		grid-template-columns: auto minmax(0, 1fr);
		padding: 6px !important;
		width: 100%;
	}

	body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) a {
		padding: 3px 6px;
	}

	body #page-container .pp-breadcrumb--case a {
		align-items: center;
		display: inline-flex;
		gap: 6px;
		white-space: nowrap;
	}

	body #page-container .pp-breadcrumb--case a::before {
		border-color: currentColor;
		border-style: solid;
		border-width: 0 0 1.5px 1.5px;
		content: "";
		display: block;
		height: 5px;
		transform: rotate(45deg);
		width: 5px;
	}

	body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) [aria-hidden="true"] {
		display: none;
	}

	body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) [aria-current="page"],
	body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) .pp-breadcrumb__current,
	body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) p > span:last-child {
		flex-basis: 100%;
	}

	body #page-container .pp-breadcrumb--case :is([aria-current="page"], .pp-breadcrumb__current),
	body #page-container .pp-breadcrumb--case p > span:last-child {
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		flex-basis: auto;
		font-size: 11.5px;
		line-height: 1.28;
		overflow: hidden;
	}
}


/* Semantic nav/ol markup used by new pages; paragraph rules above remain as a legacy fallback. */
body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) :is(.et_pb_text_inner > nav, > nav) {
	background: linear-gradient(180deg, #fff, #fffaf3);
	border: 1px solid rgba(17, 24, 32, 0.1);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(17, 24, 32, 0.06);
	color: #626a73;
	margin: 0;
	max-width: 100%;
	padding: 7px 10px;
	width: fit-content;
}

body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) .pp-breadcrumb__list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	font-weight: 650;
	gap: 5px 7px;
	line-height: 1.4;
	list-style: none;
	margin: 0;
	max-width: 100%;
	padding: 0;
}

body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) .pp-breadcrumb__list li {
	align-items: center;
	display: inline-flex;
	min-width: 0;
}

body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) .pp-breadcrumb__list li + li::before {
	color: #a1a7ad;
	content: "/";
	font-weight: 600;
	margin-right: 7px;
}

body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) .pp-breadcrumb__list [aria-current="page"] {
	max-width: min(62vw, 620px);
}

@media (max-width: 640px) {
	body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) :is(.et_pb_text_inner > nav, > nav) {
		border-radius: 10px;
		padding: 6px;
		width: 100%;
	}

	body #page-container .pp-breadcrumb--case .pp-breadcrumb__list {
		display: grid;
		font-size: 12px;
		gap: 8px;
		grid-template-columns: auto minmax(0, 1fr);
		line-height: 1.35;
	}

	body #page-container .pp-breadcrumb--case .pp-breadcrumb__list li:first-child {
		display: none;
	}

	body #page-container .pp-breadcrumb--case .pp-breadcrumb__list li + li::before {
		display: none;
	}

	body #page-container .pp-breadcrumb--case .pp-breadcrumb__list li:nth-child(2) a {
		align-items: center;
		display: inline-flex;
		gap: 6px;
		white-space: nowrap;
	}

	body #page-container .pp-breadcrumb--case .pp-breadcrumb__list li:nth-child(2) a::before {
		border-color: currentColor;
		border-style: solid;
		border-width: 0 0 1.5px 1.5px;
		content: "";
		display: block;
		height: 5px;
		transform: rotate(45deg);
		width: 5px;
	}

	body #page-container .pp-breadcrumb--case .pp-breadcrumb__list [aria-current="page"] {
		max-width: 100%;
	}

	body #page-container .pp-breadcrumb--case .pp-breadcrumb__current {
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		font-size: 11.5px;
		line-height: 1.28;
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	body #page-container :is(.pp-breadcrumb, .pp-divi-case-breadcrumb, .pp-portfolio-breadcrumb) a {
		transition: none;
	}
}