/**
 * The few things Divi can't do natively.
 *
 * Everything else — colours, type, spacing, cards, buttons, layout — lives in
 * Divi: global colours, number variables and element presets, edited in the
 * Visual Builder. Hooks used here: by-hero__visual, by-hero__image,
 * by-hero__meta, by-header__menu, by-legal-sidebar, by-legal-nav,
 * by-footer-legal (module CSS classes) and by-nav-cta (menu item class).
 */

/* Divi's antialiased smoothing renders DM Sans lighter than the design. */
body {
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}

/*
 * Divi drops the bottom padding of a text module's last paragraph but not of a
 * last heading. Doing the same for headings lets preset margins match the design.
 */
.et_pb_text_inner > :is(h1, h2, h3, h4, h5, h6):last-child {
	padding-bottom: 0;
}

/*
 * Divi 5.15 doesn't detect phone column widths set on hyphenated modules (e.g.
 * contact-field), so its phone width CSS never loads. Same rule as Divi's own.
 */
@media only screen and (max-width: 767px) {
	.et_flex_module.et_flex_column_24_24_phone {
		width: 100%;
	}
}

/* Emphasis in headings is lavender italic. */
.et_pb_text_inner :is(h1, h2, h3) em {
	color: var(--gcid-by-lavender);
	font-style: italic;
}

/* --- Hero: organic blob + decorative dots --------------------------------- */

.by-hero__visual {
	position: relative;
}

.by-hero__visual::before,
.by-hero__visual::after {
	content: '';
	position: absolute;
	z-index: 2;
	border-radius: 50%;
	pointer-events: none;
}

.by-hero__visual::before {
	top: -10px;
	right: 10%;
	width: 70px;
	height: 70px;
	background: var(--gcid-by-peach);
	opacity: 0.5;
}

.by-hero__visual::after {
	bottom: 5%;
	left: -20px;
	width: 40px;
	height: 40px;
	background: var(--gcid-by-lavender);
	opacity: 0.4;
}

/* Replace the photo in the Visual Builder — the shape stays. */
.by-hero__image .et_pb_image_wrap {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
}

.by-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.by-hero__meta p::before {
	content: '● ';
	color: var(--gcid-by-lavender);
}

/* --- Header menu ----------------------------------------------------------- */

/* Divi has no menu item spacing setting. */
.by-header__menu .et-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
}

.by-header__menu .et_pb_menu__menu .et-menu > li {
	margin: 0;
	padding: 0;
}

.by-header__menu .et_pb_menu__menu .et-menu > li > a {
	padding-bottom: 0;
}

/* Give a menu item the CSS class "by-nav-cta" to render it as the pill button. */
.by-header__menu .et_pb_menu__menu .et-menu > li.by-nav-cta > a {
	margin: -11px 0;
	padding: 11px 24px;
	border-radius: var(--gvid-by-radius-pill, 30px);
	background-color: var(--gcid-by-lavender);
	color: var(--gcid-by-navy) !important;
	font-weight: 500;
	transition: background-color 0.25s;
}

.by-header__menu .et_pb_menu__menu .et-menu > li.by-nav-cta > a:hover {
	background-color: var(--gcid-by-lavender-hover);
	opacity: 1;
}

@media (max-width: 980px) {
	/* Anchor the dropdown to the header section so it spans the full width. */
	.et-l--header .et_pb_section {
		position: relative;
		z-index: 99;
	}

	.et-l--header .et_pb_row,
	.et-l--header .et_pb_column,
	.by-header__menu,
	.by-header__menu .et_pb_menu_inner_container,
	.by-header__menu .et_pb_menu__wrap,
	.by-header__menu .et_mobile_nav_menu,
	.by-header__menu .mobile_nav {
		position: static;
	}

	.by-header__menu .et_mobile_menu {
		top: 100%;
		right: 0;
		left: 0;
		width: 100%;
		border-top: 3px solid var(--gcid-by-lavender);
		border-radius: 0 0 12px 12px;
		box-shadow: 0 16px 40px rgba(27, 59, 91, 0.12);
	}

	.by-header__menu .et_mobile_menu li a {
		padding: 12px 6%;
		border-bottom: 1px solid var(--gcid-by-border);
		font-size: 0.95rem;
	}

	.by-header__menu .et_mobile_menu li.by-nav-cta a {
		margin: 14px 6% 6px;
		padding: 12px 24px;
		border: 0;
		border-radius: var(--gvid-by-radius-pill, 30px);
		background-color: var(--gcid-by-lavender);
		color: var(--gcid-by-navy) !important;
		font-weight: 500;
		text-align: center;
	}
}

/* --- Legal pages: sidebar menu --------------------------------------------- */

/* The [menu] shortcode outputs a plain WordPress menu; Divi can't style its items. */
.by-legal-nav li {
	margin-bottom: 4px;
	padding-bottom: 0;
}

.by-legal-nav a {
	display: block;
	padding: 9px 14px;
	border-radius: 10px;
	transition: background-color 0.2s, color 0.2s;
}

.by-legal-nav a:hover,
.by-legal-nav .current-menu-item > a {
	background-color: var(--gcid-by-lavender-soft);
	color: var(--gcid-by-navy);
}

.by-legal-nav .current-menu-item > a {
	font-weight: 500;
}

@media (min-width: 981px) {
	.by-legal-sidebar {
		position: sticky;
		top: 30px;
	}
}

/* --- Footer: policy links ------------------------------------------------- */

.by-footer-legal ul {
	display: flex;
	flex-wrap: wrap;
	column-gap: 10px;
	padding: 0;
}

.by-footer-legal li {
	padding: 0;
}

.by-footer-legal li + li::before {
	content: "·";
	margin-right: 10px;
}

/* The links wrap on phones, where a separator would start a line. */
@media only screen and (max-width: 767px) {
	.by-footer-legal ul {
		column-gap: 18px;
	}

	.by-footer-legal li + li::before {
		content: none;
	}
}