/* Breadcrumbs (customized/breadcrumbs.php).
   Same look as the hand-made one on /services/data-automation-and-ai/
   (Bootstrap .breadcrumb). Repeated here so Elementor pages without
   Bootstrap look the same. */
.msk-bc { position: relative; z-index: 1; padding-top: 1rem; padding-bottom: 1rem; text-align: left; }
.msk-bc .breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 0 1.5rem;
	padding: 0;
	list-style: none;
}
/* Font = the breadcrumb on /services/data-automation-and-ai/ (Titillium Web 16px / 26px). */
.msk-bc .breadcrumb,
.msk-bc .breadcrumb-item,
.msk-bc .breadcrumb-item a {
	font-family: "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
	font-size: 16px !important;
	line-height: 26px !important;
	letter-spacing: .1px !important;
}
.msk-bc .breadcrumb-item { margin: 0; padding: 0; list-style: none; color: #212529; }
.msk-bc .breadcrumb-item + .breadcrumb-item { padding-left: .5rem; }
.msk-bc .breadcrumb-item + .breadcrumb-item::before {
	float: left;
	padding-right: .5rem;
	color: rgba(33, 37, 41, .75);
	content: ">" !important;
}
.msk-bc .breadcrumb-item a { color: #212529; font-weight: 400; text-decoration: none; }
.msk-bc .breadcrumb-item.active { color: #212529; font-weight: 600; }

/* Elementor / other heroes: sits over the top-left of the first section. */
.msk-bc-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	pointer-events: none;
}
.msk-bc-overlay .msk-bc { pointer-events: auto; padding-top: 16px; padding-bottom: 0; }
/* Readable on photo / dark banners: soft white pill behind the dark text. */
.msk-bc-overlay .breadcrumb {
	display: inline-flex;
	padding: 5px 12px;
	background: rgba(255, 255, 255, .88);
	border-radius: 4px;
}
.msk-bc-overlay .container-xl,
.msk-bc-bar .container-xl {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding-left: 12px;
	padding-right: 12px;
}

/* Pages without a hero: slim line right under the header. */
.msk-bc-bar { position: relative; z-index: 2; }

/* Banner with a container (contact pages): top of the banner, lined up with the heading. */
.msk-bc-inhero .msk-bc { padding-top: 0; padding-bottom: 0; }
.msk-bc-inhero .breadcrumb { margin-left: 0 !important; }

/* Dark photo hero (Women in AI): white text. */
.msk-bc-light .breadcrumb-item,
.msk-bc-light .breadcrumb-item a,
.msk-bc-light .breadcrumb-item.active { color: #fff !important; }
.msk-bc-light .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .8) !important; }

/* Elementor banners: just above the heading, same column (lined up with it). */
.msk-bc-el { width: 100%; max-width: 100%; }
/* Full-width banners: keep inside the normal site width (1320px, like other pages). */
.msk-bc-el .msk-bc { padding-top: 12px; padding-bottom: 12px; padding-left: max(0px, calc((100% - 1320px) / 2 + 12px)); }
.msk-bc-el .breadcrumb {
	display: inline-flex;
	margin-left: 0 !important;
	padding: 5px 12px;
	background: rgba(255, 255, 255, .88);
	border-radius: 4px;
}

/* /blogs/ (blog.php, hero without the top strip): a bit lower, away from the menu. */
.page-id-159634 .hero-section .msk-bc { margin-top: 24px; }