/*
Theme Name: ZD
Template: Divi
*/

/* ===== L&G brand adjustments ===== */
:root {
	--lg-green: #016230;
	--lg-gold: #F0CB44;
	--lg-gold-dark: #D9B43A;
	--lg-dark: #04291a;
}

/* --- Contact form: visible field borders --- */
.et_pb_contact_form .input,
.et_pb_contact_form input[type="text"],
.et_pb_contact_form textarea,
.et_pb_contact_form textarea.et_pb_contact_message {
	border: 1px solid #c7cdc7 !important;
	border-radius: 4px !important;
	padding: 12px 14px !important;
	background-color: #fff !important;
}

.et_pb_contact_form .input:focus,
.et_pb_contact_form textarea:focus {
	border-color: var(--lg-gold) !important;
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(240, 203, 68, 0.35);
}

.et_pb_contact_form .input::placeholder,
.et_pb_contact_form .input::-webkit-input-placeholder {
	color: #6b6b6b;
	opacity: 1;
}

.et_pb_contact_form .et_pb_contact_field_options_title {
	color: #333;
}

/* --- Buttons: yellow fill, dark text ---
   Divi styles "custom" buttons through
   `body #page-container .et_pb_section .et_pb_button_N.et_pb_button`,
   so these selectors have to outrank that or the per-button colour wins
   (which left yellow text sitting on the yellow fill). */
html body #page-container .et_pb_section .et_pb_button.et_pb_button.et_pb_button,
html body #page-container .et_pb_section .et_pb_contact_submit.et_pb_contact_submit,
html body .et_pb_button.et_pb_button.et_pb_button,
html body .et_pb_contact_submit.et_pb_contact_submit,
html body .et_pb_promo_button.et_pb_promo_button,
html body .et_pb_more_button.et_pb_more_button {
	color: var(--lg-dark) !important;
	background-color: var(--lg-gold) !important;
	border-color: var(--lg-gold) !important;
	border-width: 2px !important;
	/* one shape for every button; some were pills at 100px */
	border-radius: 4px !important;
}

/* the arrow/icon Divi appends should follow the text colour */
html body #page-container .et_pb_section .et_pb_button.et_pb_button.et_pb_button:after,
html body .et_pb_button.et_pb_button.et_pb_button:after {
	color: var(--lg-dark) !important;
}

/* invert on hover: dark green fill, yellow text */
html body #page-container .et_pb_section .et_pb_button.et_pb_button.et_pb_button:hover,
html body #page-container .et_pb_section .et_pb_contact_submit.et_pb_contact_submit:hover,
html body .et_pb_button.et_pb_button.et_pb_button:hover,
html body .et_pb_contact_submit.et_pb_contact_submit:hover,
html body .et_pb_promo_button.et_pb_promo_button:hover,
html body .et_pb_more_button.et_pb_more_button:hover {
	color: var(--lg-gold) !important;
	background-color: var(--lg-dark) !important;
	border-color: var(--lg-dark) !important;
}

html body #page-container .et_pb_section .et_pb_button.et_pb_button.et_pb_button:hover:after,
html body .et_pb_button.et_pb_button.et_pb_button:hover:after {
	color: var(--lg-gold) !important;
}

/* --- "Get in touch" call-to-action: contact details as aligned pills --- */
@media (min-width: 981px) {
	.et_pb_row_0_tb_footer {
		display: flex;
		align-items: center;
	}

	.et_pb_row_0_tb_footer > .et_pb_column {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 0 !important;
	}
}

.et_pb_blurb_0_tb_footer,
.et_pb_blurb_1_tb_footer {
	display: inline-flex;
	width: fit-content;
	max-width: 100%;
	align-items: center;
	margin-bottom: 14px !important;
	padding: 12px 20px !important;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.05);
	transition: border-color 200ms ease, background-color 200ms ease;
}

/* Divi flips these to a white background on hover, so everything inside
   has to go dark or it disappears against it. */
.et_pb_blurb_0_tb_footer.et_pb_blurb:hover,
.et_pb_blurb_1_tb_footer.et_pb_blurb:hover {
	background-color: #fff !important;
	border-color: var(--lg-gold) !important;
}

.et_pb_blurb_0_tb_footer.et_pb_blurb:hover .et-pb-icon,
.et_pb_blurb_1_tb_footer.et_pb_blurb:hover .et-pb-icon {
	color: var(--lg-green) !important;
}

.et_pb_blurb_0_tb_footer .et-pb-icon,
.et_pb_blurb_1_tb_footer .et-pb-icon {
	color: var(--lg-gold) !important;
	font-size: 22px !important;
}

.et_pb_blurb_0_tb_footer .et_pb_module_header,
.et_pb_blurb_1_tb_footer .et_pb_module_header,
.et_pb_blurb_0_tb_footer .et_pb_module_header a,
.et_pb_blurb_1_tb_footer .et_pb_module_header a {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 17px !important;
	line-height: 1.4 !important;
	color: #fff !important;
	word-break: break-word;
}

.et_pb_blurb_0_tb_footer.et_pb_blurb:hover .et_pb_module_header,
.et_pb_blurb_1_tb_footer.et_pb_blurb:hover .et_pb_module_header,
.et_pb_blurb_0_tb_footer.et_pb_blurb:hover .et_pb_module_header a,
.et_pb_blurb_1_tb_footer.et_pb_blurb:hover .et_pb_module_header a,
.et_pb_blurb_0_tb_footer.et_pb_blurb:hover .et_pb_module_header span,
.et_pb_blurb_1_tb_footer.et_pb_blurb:hover .et_pb_module_header span {
	color: var(--lg-green) !important;
}

@media (max-width: 980px) {
	.et_pb_blurb_0_tb_footer,
	.et_pb_blurb_1_tb_footer {
		width: 100%;
	}
}

/* --- Footer: white text on the dark background --- */
.et-l--footer,
.et-l--footer p,
.et-l--footer span,
.et-l--footer li,
.et-l--footer h1,
.et-l--footer h2,
.et-l--footer h3,
.et-l--footer h4,
.et-l--footer h5,
.et-l--footer h6 {
	color: #fff !important;
}

.et-l--footer a,
.et-l--footer .et_pb_menu a,
.et-l--footer .et_pb_blurb h5,
.et-l--footer .et_pb_blurb .et_pb_module_header a {
	color: #fff !important;
}

.et-l--footer a:hover,
.et-l--footer .et_pb_menu a:hover {
	color: var(--lg-gold) !important;
}

/* keep the footer buttons gold rather than inheriting the white link colour */
.et-l--footer .et_pb_button {
	color: var(--lg-dark) !important;
}

/* --- Header logo: compact and centred in its column --- */
.et-l--header .et_pb_image {
	text-align: center !important;
}

.et-l--header .et_pb_image .et_pb_image_wrap {
	display: inline-block;
	float: none;
}

.et-l--header .et_pb_image img {
	max-height: 72px;
	width: auto;
	margin-left: auto;
	margin-right: auto;
}

/* --- The L&G mark inside page sections: centred on every screen size ---
   The <span class="et_pb_image_wrap"> is inline, so centring has to happen
   on the module, not just the <img>. */
html body .et_pb_image.lg-mark,
html body .et_pb_module.et_pb_image.lg-mark {
	text-align: center !important;
	/* the module itself is only 39px wide in Divi, so the larger image
	   overflowed to the right instead of sitting centred */
	width: 100% !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

html body .et_pb_image.lg-mark .et_pb_image_wrap {
	display: inline-block !important;
	float: none !important;
}

html body .et_pb_image.lg-mark img,
.et_pb_image img[src*="lg-favicon-transparent"] {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

@media (max-width: 980px) {
	.et-l--header .et_pb_image img {
		max-height: 56px;
	}
}

/* --- L&G mark used inside page sections: keep it modest --- */
.et_pb_image img[src*="lg-favicon-transparent"] {
	max-width: 170px;
	height: auto;
}

@media (max-width: 980px) {
	.et_pb_image img[src*="lg-favicon-transparent"] {
		max-width: 130px;
	}
}

/* --- Header top bar: keep contact details readable on dark --- */
.et-l--header .et_pb_blurb h5,
.et-l--header .et_pb_blurb .et_pb_module_header,
.et-l--header .et_pb_blurb .et_pb_module_header a {
	color: #fff !important;
}

/* top bar: icon and text on one aligned line, same size in every column */
.et-l--header .et_pb_blurb .et_pb_blurb_content {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.et-l--header .et_pb_blurb .et_pb_main_blurb_image {
	display: flex;
	align-items: center;
	margin-bottom: 0 !important;
	line-height: 1 !important;
}

.et-l--header .et_pb_blurb .et_pb_blurb_container {
	padding-left: 0;
}

.et-l--header .et_pb_blurb .et_pb_module_header {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
}

/* --- Mobile menu ---
   The burger glyph was black on the dark header, and the dropdown panel is
   white, so the white link colour used elsewhere made the items invisible. */
@media (max-width: 980px) {
	/* Divi writes `.et_pb_menu_N_tb_header.et_pb_menu .et_mobile_menu a`,
	   and the child stylesheet loads first, so ties go to Divi. These
	   selectors are deliberately heavier. */
	html body .et-l--header .et_pb_menu.et_pb_menu .mobile_menu_bar:before,
	html body .et-l--header .mobile_nav.mobile_nav .mobile_menu_bar:before {
		color: #fff !important;
	}

	html body .et-l--header .et_pb_menu.et_pb_menu .et_mobile_menu a,
	html body .et-l--header .et_pb_menu.et_pb_menu .et_mobile_menu li a,
	html body .et-l--footer .et_pb_menu.et_pb_menu .et_mobile_menu a,
	html body .et-l--footer .et_pb_menu.et_pb_menu .et_mobile_menu li a {
		color: var(--lg-dark) !important;
		opacity: 1 !important;
	}

	html body .et-l--header .et_pb_menu.et_pb_menu .et_mobile_menu a:hover,
	html body .et-l--footer .et_pb_menu.et_pb_menu .et_mobile_menu a:hover {
		color: var(--lg-green) !important;
	}

	html body .et-l--header .et_pb_menu.et_pb_menu .et_mobile_menu li a {
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	}

	/* the open panel itself */
	html body .et-l--header .et_pb_menu.et_pb_menu .et_mobile_menu,
	html body .et-l--header .et_pb_menu.et_pb_menu .et_mobile_menu ul {
		background-color: #fff !important;
	}
}

/* --- Mobile: stop empty columns and stacked gaps eating the page --- */
@media (max-width: 980px) {
	/* Divi keeps empty columns in the flow; on phones they are pure blank space */
	.et_pb_column_empty {
		display: none !important;
		margin-bottom: 0 !important;
	}
}

/* --- Page title --- */
.et_pb_title_container h1 {
	font-size: 35px !important;
	font-weight: 700 !important;
}

/* --- Diagonal split section (green / yellow) ---
   The left half is dark green, so its text stays white. The right-hand
   columns sit on the yellow half and need dark text to stay readable. */
.lg-split .et_pb_column:nth-child(3),
.lg-split .et_pb_column:nth-child(3) *,
.lg-split .et_pb_column:nth-child(4),
.lg-split .et_pb_column:nth-child(4) * {
	color: var(--lg-dark) !important;
}

.lg-split .et_pb_column:nth-child(3) a:hover,
.lg-split .et_pb_column:nth-child(4) a:hover {
	color: var(--lg-green) !important;
}

/* --- Small section labels on dark backgrounds ---
   Divi does not emit this module's colour rule, so set it here. */
.lg-eyebrow h4,
.lg-eyebrow h3 {
	color: var(--lg-gold) !important;
}

/* --- Top bar: Divi only emits the spacing rule for the first blurb,
       which left the email sitting ~17px higher than the phone. --- */
.et-l--header .et_pb_blurb.et_pb_blurb_1_tb_header,
.et-l--header .et_pb_blurb.et_pb_blurb_2_tb_header,
.et-l--header .et_pb_blurb.et_pb_blurb_3_tb_header {
	padding-top: 4px !important;
	padding-bottom: 0 !important;
	margin-top: 13px !important;
	margin-bottom: 6px !important;
}

/* --- Header main row: line the menu and social icons up with the logo --- */
@media (min-width: 981px) {
	.et-l--header .et_pb_row_1_tb_header {
		display: flex;
		align-items: center;
	}

	.et-l--header .et_pb_row_1_tb_header > .et_pb_column {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 0 !important;
	}

	.et-l--header .et_pb_row_1_tb_header .et_pb_menu,
	.et-l--header .et_pb_row_1_tb_header .et_pb_image,
	.et-l--header .et_pb_row_1_tb_header .et_pb_social_media_follow {
		margin-bottom: 0 !important;
	}
}

/* --- Header menu: white links, gold on hover --- */
.et-l--header .et_pb_menu .nav li a,
.et-l--header .et_pb_menu .nav li.current-menu-item a {
	color: #fff !important;
}

.et-l--header .et_pb_menu .nav li a:hover {
	color: var(--lg-gold) !important;
	opacity: 1;
}

/* dropdown items sit on a white panel, so keep them dark */
.et-l--header .et_pb_menu .nav li ul.sub-menu a {
	color: var(--lg-dark) !important;
}

.et-l--header .et_pb_menu .nav li ul.sub-menu a:hover {
	color: var(--lg-gold) !important;
}