/**
 * Breadcrumb bar chrome (urwebsol_breadcrumbs() in inc/template-tags.php).
 *
 * Every per-template bundle (about.css, contact.css, blog.css, ...)
 * duplicates these same rules internally, but only loads when that
 * template's default design is what's rendering. When a Page/Course has
 * real Elementor/plugin content instead, none of those bundles load (see
 * inc/enqueue.php) — yet the breadcrumb trail is this theme's own chrome,
 * not part of that content, so it still needs to render correctly. This
 * file is registered once and enqueued on every template that calls
 * urwebsol_breadcrumbs(), independent of which content-styling branch fired.
 *
 * Scoped to .breadcrumbs/.home rather than a blanket `ul { list-style:none }`
 * reset (as the per-page bundles use) so it can safely load alongside real
 * admin-authored content without stripping bullets from unrelated lists.
 */

.home {
	position: relative;
	width: 100%;
	padding: 14px 0;
	background: #EEEEEE;
	border-bottom: solid 1px #edeff0;
	/*
	 * Pins the whole bar's inherited font metrics to the same values the
	 * "about"/"contact"/... bundles set on `body` (font-size:14px, and
	 * Bootstrap4's line-height:1.5) — without this, a page that loads NO
	 * bundle (real Elementor content, see inc/enqueue.php) inherits the
	 * browser's own 16px/"normal" line-height instead, inflating every
	 * unstyled element inside this bar (a taller `li` strut, etc.) versus
	 * a page where a bundle happens to load alongside this file. See the
	 * `.breadcrumbs ul` / `.container` comments below for the same class
	 * of gap — confirmed via computed-style diffing, 2026-09-03, progress.md.
	 */
	font-size: 14px;
	line-height: 1.5;
}
.breadcrumbs_container {
	position: static;
	width: 100%;
	padding-left: 3px;
}
/*
 * Applied by urwebsol_breadcrumbs() only when a real plugin Header template
 * is rendering instead of header.php's own default chrome — the boxed
 * content around this bar is then Elementor's own container/column, which
 * on this site's actual templates sits flush against the boxed edge (no
 * left inset), not the 15px+3px Bootstrap padding this bar otherwise
 * reproduces for header.php's own container/row/col chain. Left unchanged
 * (3px/15px) for that default-chrome case — this modifier only overrides
 * the real-Elementor-header case, via higher selector specificity so
 * source order can't flip it. Confirmed by on-page inspection against the
 * live header/content alignment, 2026-09-04.
 */
.breadcrumbs_container.breadcrumbs_container--elementor {
	padding-left: 0;
}
.breadcrumbs_container.breadcrumbs_container--elementor .container {
	padding-left: 0;
}
/*
 * `.container`/`.row`/`.col` below normally come from the `urwebsol-bootstrap4`
 * vendor stylesheet — but that's deliberately NOT loaded on a page with real
 * Elementor content (see inc/enqueue.php), same reasoning as this file's own
 * header comment. Without it `.container` has no max-width/centering at all,
 * so the breadcrumb bar renders flush against the browser edge instead of
 * aligned with the boxed content around it. Reproducing just Bootstrap 4's
 * own `.container` breakpoints here (scoped, so it can't affect anything
 * else on the page) restores that alignment without pulling in the rest of
 * Bootstrap's CSS reset, which would fight with Elementor's own styling.
 *
 * `box-sizing: border-box` is part of that reproduction too, not a generic
 * reset choice: Bootstrap4's real Reboot (`*,*::before,*::after{box-sizing:
 * border-box}`) and about.css's own `div{box-sizing:border-box}` both make
 * `max-width` include the element's own padding. Without either loaded, the
 * browser default `content-box` model adds this rule's 15px+15px padding ON
 * TOP of `max-width:1140px`, rendering an unintended 1170px-wide bar that
 * no longer lines up with the 1140px-wide content around it (confirmed via
 * computed-style diffing between an Elementor-only page and a bundle-loaded
 * page, both otherwise identical — 2026-09-03, progress.md).
 */
.breadcrumbs_container .container {
	box-sizing: border-box;
	width: 100%;
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}
@media (min-width: 576px) {
	.breadcrumbs_container .container { max-width: 540px; }
}
@media (min-width: 768px) {
	.breadcrumbs_container .container { max-width: 720px; }
}
@media (min-width: 992px) {
	.breadcrumbs_container .container { max-width: 960px; }
}
@media (min-width: 1200px) {
	.breadcrumbs_container .container { max-width: 1140px; }
}
.breadcrumbs ul {
	list-style: none;
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0;
}
.breadcrumbs ul li {
	display: inline-block;
	position: relative;
	font-family: var(--e-global-typography-primary-font-family, inherit);
	color: #14bdee;
}
.breadcrumbs ul li:not(:last-child)::after {
	display: inline-block;
	font-family: 'FontAwesome';
	content: '\f105';
	margin-left: 7px;
	margin-right: 4px;
	color: #14bdee;
}
.breadcrumbs ul li a {
	font-size: 14px;
	font-weight: 400;
	color: #14bdee;
	transition: all 200ms ease;
}
.breadcrumbs ul li a:hover {
	color: #14bdee;
}