/*
 * Misterdot Divi Bridge -- base style layer
 * =========================================
 *
 * Reusable primitives for the shapes Divi modules cannot make on their own:
 * circular crops, overlapping badges, icon circles, connector lines,
 * full-bleed images. Written once and verified, so a page only needs its
 * own colours, fonts and deviations on top.
 *
 * USAGE
 *   Put tokens and per-project overrides in a code module at the top of the
 *   page. Put class names in each module's cssClass. Nothing here targets a
 *   specific project.
 *
 * TOKENS -- override these in the page's own <style>:
 *   --mdb-ink          body and heading colour
 *   --mdb-muted        secondary text
 *   --mdb-accent       brand colour (rules, badges, icon strokes)
 *   --mdb-on-accent    text on top of --mdb-accent
 *   --mdb-line         hairline separators
 *   --mdb-radius       default corner radius
 *   --mdb-row-max      the row's max-width; REQUIRED for mdb-bleed-* to work
 *   --mdb-font-head    heading family
 *
 * PER-MODULE DATA -- pass through the customCss property, so an icon or a
 * connector is data on the module rather than a new CSS rule per instance:
 *   --mdb-icon         url("data:image/svg+xml,...") for mdb-icon
 *   --mdb-badge-size   overrides badge diameter on one badge
 */

:root {
	--mdb-ink: #1a1a1a;
	--mdb-muted: #5a6b7d;
	--mdb-accent: #1f6a3b;
	--mdb-on-accent: #fff;
	--mdb-line: #d8ddd2;
	--mdb-radius: 14px;
	--mdb-row-max: 1240px;
	--mdb-font-head: Georgia, serif;
}

/* --------------------------------------------------------------- utilities */

/* Divi puts a bottom margin on every module. Removes it. */
.mdb-flush { margin-bottom: 0 !important; }

/* Small letterspaced label above a heading. */
.mdb-eyebrow h1, .mdb-eyebrow h2, .mdb-eyebrow h3 {
	font-weight: 600;
	letter-spacing: .18em;
	font-size: 15px;
	color: var(--mdb-ink);
	margin: 0;
}

/* ------------------------------------------------------------------- rules */

/*
 * Short accent line. Put on a divider module.
 * A divider draws its line with a border on ::before, so that is overridden
 * rather than fought with; the element itself becomes the line.
 */
.mdb-rule.et_pb_divider::before { border: 0 !important; }
.mdb-rule {
	height: 3px !important;
	max-width: 92px;
	background: var(--mdb-accent);
	border-radius: 2px;
}
.mdb-rule--center { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ images */

/* Circular crop. Put on an image module. */
.mdb-circle img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 50%;
}

/* One oversized organic corner. Put on an image module. */
.mdb-round img { width: 100%; display: block; border-radius: var(--mdb-radius); }
.mdb-round--bl img { border-radius: 0 0 0 170px; }
.mdb-round--br img { border-radius: 0 0 170px 0; }
.mdb-round--tl img { border-radius: 170px 0 0 0; }
.mdb-round--tr img { border-radius: 0 170px 0 0; }

/*
 * Image runs from its column to the viewport edge.
 *
 * The image is widened rather than the column: widening the column makes it
 * wrap below its sibling, and a negative margin loses to Divi's own
 * "margin-right: 0 !important" on the last column. Requires overflow
 * clipping on the section (mdb-clip) or the page gains a scrollbar.
 */
@media (min-width: 1300px) {
	.mdb-bleed-right .et_pb_image,
	.mdb-bleed-left .et_pb_image { overflow: visible; }

	.mdb-bleed-right img,
	.mdb-bleed-left img {
		width: calc(100% + (100vw - var(--mdb-row-max)) / 2) !important;
		max-width: none !important;
	}

	.mdb-bleed-left img { margin-left: calc((var(--mdb-row-max) - 100vw) / 2); }
}

/* Put on the section wrapping any mdb-bleed-*. */
.mdb-clip { overflow: hidden; }

/* ------------------------------------------------------------------ badges */

/*
 * Circular badge overlapping a neighbouring element.
 * Put mdb-overlay on the COLUMN, mdb-badge + a corner on the TEXT module.
 */
.mdb-overlay { position: relative; }

.mdb-badge {
	position: absolute !important;
	width: var(--mdb-badge-size, 215px);
	height: var(--mdb-badge-size, 215px);
	border-radius: 50%;
	background: var(--mdb-accent);
	z-index: 3;
	margin: 0 !important;
}
.mdb-badge .et_pb_text_inner {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 26px;
}
.mdb-badge p {
	margin: 0;
	color: var(--mdb-on-accent);
	text-align: center;
	font-family: var(--mdb-font-head);
	font-style: italic;
	line-height: 1.55;
}
.mdb-badge--br { right: -6%; bottom: 2%; }
.mdb-badge--bl { left: -6%; bottom: 2%; }
.mdb-badge--tr { right: -6%; top: 2%; }
.mdb-badge--tl { left: -6%; top: 2%; }

/* ------------------------------------------------------------------- icons */

/*
 * Icon in a circle on a blurb. The icon itself comes from --mdb-icon, set
 * per module via customCss, so a new icon needs no new CSS rule.
 */
.mdb-icon .et_pb_blurb_content { position: relative; z-index: 1; max-width: none; }

.mdb-icon .et_pb_blurb_content::before {
	content: '';
	background: var(--mdb-icon-bg, #fff) var(--mdb-icon) no-repeat center / 42% 42%;
	border-radius: 50%;
}

/* Circle above the text, centred. */
.mdb-icon--top .et_pb_blurb_content { text-align: center; }
.mdb-icon--top .et_pb_blurb_content::before {
	display: block;
	width: 98px;
	height: 98px;
	margin: 0 auto 44px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .09);
}

/* Circle beside the text. */
.mdb-icon--left .et_pb_blurb_content {
	display: flex;
	align-items: center;
	gap: 16px;
	text-align: left;
}
.mdb-icon--left .et_pb_blurb_content::before {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border: 1px solid var(--mdb-accent);
	background-color: transparent;
	background-size: 46% 46%;
}

/* ------------------------------------------------------------------ counts */

/*
 * Numbered badges. Put mdb-steps on the ROW and mdb-count on each blurb;
 * a CSS counter numbers them, so reordering or inserting a step needs no
 * edit anywhere.
 */
.mdb-steps { counter-reset: mdb-step; position: relative; }

.mdb-count .et_pb_blurb_content::after {
	counter-increment: mdb-step;
	content: counter(mdb-step);
	position: absolute;
	top: 80px;
	left: 50%;
	transform: translateX(-50%);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--mdb-accent);
	color: var(--mdb-on-accent);
	font: 700 14px/32px inherit;
	text-align: center;
	z-index: 2;
}

/*
 * Connector drawn behind the icon circles. Supply the artwork in
 * --mdb-connector on the row; the SVG needs preserveAspectRatio='none'
 * or it scales to fit the height and stops short of the last column.
 * --mdb-connector-inset defaults to a quarter of a 4-column row.
 */
.mdb-steps::before {
	content: '';
	position: absolute;
	top: 44px;
	left: var(--mdb-connector-inset, 12.5%);
	right: var(--mdb-connector-inset, 12.5%);
	height: 78px;
	z-index: 0;
	opacity: var(--mdb-connector-opacity, .5);
	background: var(--mdb-connector) no-repeat center / 100% 100%;
}

/* Keeps headings of differing length from pushing their body text out of line. */
.mdb-equal-title h4 {
	min-height: 2.5em;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin-bottom: .4em;
}

/* -------------------------------------------------------------- containers */

/* Hairlines between the columns of a row. */
.mdb-divide .et_pb_column { border-right: 1px solid var(--mdb-line); }
.mdb-divide .et_pb_column:last-child { border-right: 0; }

/* Rounded panel with vertically centred columns. Put on a row. */
.mdb-card { border-radius: var(--mdb-radius); position: relative; }
.mdb-card .et_pb_column { display: flex; flex-direction: column; justify-content: center; }

/*
 * Decorative artwork hanging off a container's edge. Supply --mdb-ornament.
 */
.mdb-ornament { overflow: visible; }
.mdb-ornament::before {
	content: '';
	position: absolute;
	left: var(--mdb-ornament-x, -46px);
	bottom: var(--mdb-ornament-y, -6px);
	width: var(--mdb-ornament-w, 110px);
	height: var(--mdb-ornament-h, 130px);
	background: var(--mdb-ornament) no-repeat center / contain;
	pointer-events: none;
}


/* -------------------------------------------------------------- composition */

/*
 * Soft drop shadow. Lifts an image off the background instead of letting it
 * sit flat in its column -- one of the things that most separates a designed
 * page from a laid-out one.
 */
.mdb-lift img, .mdb-lift.et_pb_row { box-shadow: var(--mdb-shadow, 0 30px 60px rgba(0, 0, 0, .16)); }

/*
 * Pulls a module up so it overlaps whatever sits above it. This is how a
 * portrait crosses into the hero above it rather than starting a new band.
 */
.mdb-pull-up { margin-top: var(--mdb-pull, -120px) !important; }

/* Soft radial wash behind a section, instead of a flat fill. */
.mdb-glow {
	background: radial-gradient(
		circle at var(--mdb-glow-at, 38% 30%),
		var(--mdb-glow-from, #fff) 0%,
		var(--mdb-glow-mid, #fbf9f3) 42%,
		var(--mdb-glow-to, #f3eadc) 100%
	) !important;
}

/*
 * Vertically centred columns with a real gap. Divi rows are float-based with
 * a clearfix, so the pseudo-elements have to go or flex counts them as items.
 */
.mdb-flexrow.et_pb_row { display: flex; align-items: center; gap: var(--mdb-gap, 44px); }
.mdb-flexrow.et_pb_row::before, .mdb-flexrow.et_pb_row::after { display: none; }
.mdb-flexrow .et_pb_column { margin-right: 0 !important; }
.mdb-flexrow--top { align-items: flex-start; }

@media (max-width: 980px) {
	.mdb-flexrow.et_pb_row { display: block; }
	.mdb-pull-up { margin-top: 0 !important; }
}

/* ------------------------------------------------------------- small screens */

@media (max-width: 980px) {
	.mdb-round--bl img { border-radius: 0 0 0 90px; }
	.mdb-round--br img { border-radius: 0 0 90px 0; }
	.mdb-round--tl img { border-radius: 90px 0 0 0; }
	.mdb-round--tr img { border-radius: 0 90px 0 0; }

	.mdb-badge { --mdb-badge-size: 150px; }
	.mdb-badge p { font-size: 13px; line-height: 1.45; }
	.mdb-badge--br, .mdb-badge--bl { bottom: -4%; }
	.mdb-badge--br { right: 0; }
	.mdb-badge--bl { left: 0; }

	.mdb-steps::before { display: none; }
	.mdb-equal-title h4 { min-height: 0; display: block; }

	.mdb-divide .et_pb_column {
		border-right: 0;
		border-bottom: 1px solid var(--mdb-line);
		padding-bottom: 18px;
	}
	.mdb-divide .et_pb_column:last-child { border-bottom: 0; }

	.mdb-ornament::before { display: none; }
}