/*
 * Default look for the Breadcrumbs module, matching the small inline
 * "Home | Section | Page" trail style used across the site's page headers.
 * Font family/size/weight/color are intentionally NOT set here -- they're
 * exposed as native Divi Design-tab options (module.json's "font"
 * decoration group) so they're fully configurable per instance; these
 * rules are just structural layout.
 */

.cvpu_breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	/*
	 * !important is deliberate. This is an <ol>, and themes style ordered
	 * lists with higher specificity than a single class -- Divi does, which
	 * rendered "1." / "2." markers inside the trail. A plugin resetting the
	 * list styling of its own component is the one case where this is fair.
	 */
	list-style: none !important;
}

.cvpu_breadcrumbs__list > li {
	list-style: none !important;
}

.cvpu_breadcrumbs__item {
	display: inline-flex;
	align-items: center;
}

.cvpu_breadcrumbs__item a {
	color: inherit;
	text-decoration: none;
}

.cvpu_breadcrumbs__item a:hover {
	text-decoration: underline;
}

.cvpu_breadcrumbs__item.is-current {
	color: inherit;
	opacity: 0.7;
}

/*
 * The separator sits inside the crumb it follows, so it carries its own
 * horizontal spacing. (The list itself deliberately has no `gap` -- that
 * would double up with this margin.)
 */
.cvpu_breadcrumbs__separator {
	margin: 0 0.45em;
	opacity: 0.5;
}

/* ---------------- Image watermark ----------------
 * Small caption overlaid on a module's image or background image, switched on
 * per module in the Builder (Design > Watermark).
 *
 * Placement comes from CSS custom properties written inline by PHP, one set
 * per breakpoint. The markup is rendered once server-side and cannot know the
 * viewport, so the media queries below pick the right set -- and each falls
 * back to the wider breakpoint, mirroring how Divi's own responsive options
 * inherit (phone -> tablet -> desktop).
 */
.cvpu_watermark {
	position: absolute;
	/*
	 * Above Divi's header (z-index 99999). On a hero with a transparent nav
	 * the header overlays the top of the section, so a lower value leaves the
	 * badge rendered but hidden behind empty header space.
	 */
	z-index: 100000;
	display: var( --wm-display, block );
	top: var( --wm-top, auto );
	right: var( --wm-right, auto );
	bottom: var( --wm-bottom, auto );
	left: var( --wm-left, auto );
	max-width: 8em;
	padding: 0.5em 0.7em;
	border-radius: 3px;
	background: rgba(237, 237, 237, 0.85);
	color: #1a1a1a;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.25;
	text-align: center;
	pointer-events: none;
	/*
	 * Set on the whole badge rather than baked into the background colour, so
	 * the text fades with the panel and the two stay in balance at any value.
	 * Editable per breakpoint in the Builder (Design > Watermark > Opacity).
	 */
	opacity: var( --wm-opacity, 0.7 );
}

/* the module must be a positioning context, or the badge escapes to the page */
:where( .et_pb_module, .et_pb_section, .et_pb_row, .et_pb_column ):has( > .cvpu_watermark ) {
	position: relative;
}

/*
 * Divi's mobile menu drops down out of the header, which grows to cover the
 * top of the hero -- exactly where the badge usually sits. Because the badge
 * deliberately outranks the header (see the z-index note above), it would
 * otherwise float on top of the open menu's links.
 *
 * Standing the badge down below the header is enough: the menu then covers
 * it, but it stays visible on any part of the image the menu does not reach.
 * It is not hidden outright because the caption is a disclaimer about the
 * image it sits on, so it should not disappear while that image is on screen.
 *
 * Scoped to the width where Divi actually swaps in the mobile nav: the
 * `opened` class is left on the element after a resize, so unscoped this
 * would keep the badge stood down on desktop too.
 */
@media ( max-width: 980px ) {
	body:has( .mobile_nav.opened ) .cvpu_watermark {
		z-index: 1;
	}
}

@media ( max-width: 980px ) {
	.cvpu_watermark {
		display: var( --wm-display-t, var( --wm-display, block ) );
		top: var( --wm-top-t, var( --wm-top, auto ) );
		right: var( --wm-right-t, var( --wm-right, auto ) );
		bottom: var( --wm-bottom-t, var( --wm-bottom, auto ) );
		left: var( --wm-left-t, var( --wm-left, auto ) );
		opacity: var( --wm-opacity-t, var( --wm-opacity, 0.7 ) );
	}
}

@media ( max-width: 767px ) {
	.cvpu_watermark {
		display: var( --wm-display-p, var( --wm-display-t, var( --wm-display, block ) ) );
		top: var( --wm-top-p, var( --wm-top-t, var( --wm-top, auto ) ) );
		right: var( --wm-right-p, var( --wm-right-t, var( --wm-right, auto ) ) );
		bottom: var( --wm-bottom-p, var( --wm-bottom-t, var( --wm-bottom, auto ) ) );
		left: var( --wm-left-p, var( --wm-left-t, var( --wm-left, auto ) ) );
		opacity: var( --wm-opacity-p, var( --wm-opacity-t, var( --wm-opacity, 0.7 ) ) );
	}
}