/*
 * Muli, self-hosted. Google renamed it Mulish in 2020 and redrew the letter
 * shapes, so Mulish is not the same typeface the live site renders. Serving the
 * original from our own server also keeps visitor IPs away from Google, which
 * matters because the fonts load before any cookie consent is given.
 *
 * One variable file per subset covers every weight in use (400-700).
 */
@font-face {
	font-display: swap;
	font-family: "Muli";
	font-style: normal;
	font-weight: 200 1000;
	src: url("fonts/muli-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-display: swap;
	font-family: "Muli";
	font-style: normal;
	font-weight: 200 1000;
	src: url("fonts/muli-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * Honeypot. Kept out of sight without display:none, which some bots check for,
 * and out of the tab order so it never reaches a keyboard or screen-reader user.
 */
.forestex-hp {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

/* Single source for the site face. */
:root {
	--forestex-font: "Muli", sans-serif;
}

.forestex-hero {
	align-items: center;
	background: var(--forestex-hero-color, #306f4b);
	display: flex;
	height: var(--forestex-hero-height, 240px);
	justify-content: center;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.forestex-hero__background,
.forestex-hero__shade {
	inset: 0;
	position: absolute;
}

.forestex-hero__background {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0;
	transition: opacity 1s ease;
}

.forestex-hero__background.is-active {
	opacity: 1;
}

.forestex-hero__shade {
	background: rgba(0, 0, 0, 0.06);
}

/*
 * The custom hero replaces the Elementor Pro slider, so it inherits nothing
 * from the global typography. The live slide heading runs at 80px/80px w700.
 */
.forestex-hero__title {
	color: #fff;
	font-family: var(--forestex-font);
	font-size: clamp(3rem, 5.6vw, 5rem);
	font-weight: 700;
	line-height: 1;
	margin: 0;
	max-width: 1140px;
	padding: 0 30px;
	position: relative;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
	z-index: 1;
}

/*
 * This site has no Elementor kit (the Site Settings post was never created when
 * Elementor went 2.5 -> 4.2), so nothing overrides the 1140px boxed-container
 * default in frontend.min.css and every section is narrower than on the live
 * site. 1620px is the width the legacy elementor_container_width option holds.
 * The body prefix keeps this ahead of Elementor regardless of enqueue order.
 */
body .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1620px;
}

/*
 * Astra 1.8 set the body line height to 1.857 and Astra 4 no longer does, which
 * packs the migrated text blocks together. Headings run at 1.0 on the live site.
 */
body,
body .elementor-widget-text-editor,
body .elementor-widget-text-editor p,
body .elementor-widget-text-editor li {
	line-height: 1.857;
}

/*
 * Astra 4 injects `.elementor-widget-heading h2.elementor-heading-title{line-height:1.3em}`
 * as inline CSS, which outranks a plain `.elementor-heading-title` rule. Naming the
 * tag matches that specificity and wins without !important.
 */
body .elementor-widget-heading h1.elementor-heading-title,
body .elementor-widget-heading h2.elementor-heading-title,
body .elementor-widget-heading h3.elementor-heading-title,
body .elementor-widget-heading h4.elementor-heading-title,
body .elementor-widget-heading h5.elementor-heading-title,
body .elementor-widget-heading h6.elementor-heading-title {
	line-height: 1;
}

/*
 * Contact Form 7 stands in for the old Elementor Pro form. Its controls default
 * to taller boxes than the originals: the live site renders the text inputs and
 * the submit button at 40px and the message box at 96px (rows="4"), while the
 * migrated form carries rows="10" and Astra's 42px/120px minimums.
 */
body .forestex-contact-form input.wpcf7-text,
body .forestex-contact-form input.wpcf7-email,
body .forestex-contact-form input.wpcf7-tel {
	height: 40px;
	min-height: 0;
}

body .forestex-contact-form textarea.wpcf7-textarea {
	height: 96px;
	min-height: 0;
}

/*
 * Contact Form 7 controls default to the system font at 16px; the Elementor
 * Pro form they replace ran the site face at 15px.
 */
body .forestex-contact-form input.wpcf7-form-control,
body .forestex-contact-form textarea.wpcf7-form-control {
	font-family: var(--forestex-font);
	font-size: 15px;
}

/*
 * The 5px field padding narrows every control by 10px against the live form
 * (input 265 not 260, textarea 540 not 530). The row gap supplies the spacing.
 */
body .forestex-contact-form .forestex-form-field {
	padding: 0;
}

body .forestex-contact-form .forestex-form-row {
	gap: 10px;
}

/* Halves share the row minus the gap: (540 - 10) / 2 = 265, as on the live form. */
body .forestex-contact-form .forestex-form-field-half {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}

/*
 * The field colours must not ride on Elementor's global palette. Global
 * "primary" is rgba(48,111,75,0) on the live site — deliberately transparent —
 * and letting the placeholder inherit it makes the hint text invisible. The
 * live form paints the box white with #323232 text and hint.
 */
body .forestex-contact-form input.wpcf7-text,
body .forestex-contact-form input.wpcf7-email,
body .forestex-contact-form input.wpcf7-tel,
body .forestex-contact-form textarea.wpcf7-textarea {
	background-color: #fff !important;
	color: #323232;
}

body .forestex-contact-form input.wpcf7-text::placeholder,
body .forestex-contact-form input.wpcf7-email::placeholder,
body .forestex-contact-form input.wpcf7-tel::placeholder,
body .forestex-contact-form textarea.wpcf7-textarea::placeholder {
	color: #323232;
	opacity: 0.6;
}

body .elementor .elementor-element.elementor-element-16ee6cc {
	flex-basis: 100% !important;
	max-width: 100% !important;
	width: 100% !important;
}

.elementor-element-16ee6cc,
.elementor-element-16ee6cc > .elementor-widget-container,
.elementor-element-16ee6cc .elementor-shortcode,
.elementor-element-16ee6cc .wpcf7,
.elementor-element-16ee6cc .wpcf7-form {
	box-sizing: border-box;
	max-width: none !important;
	width: 100% !important;
}

.forestex-contact-form,
.forestex-contact-form .forestex-form-row,
.forestex-contact-form .forestex-form-field {
	box-sizing: border-box;
	width: 100%;
}

/*
 * Contact Form 7 wraps every control in a <p>, and those paragraphs plus the
 * inline spinner and the textarea's baseline gap add ~157px that the Elementor
 * Pro form it replaces never had. The live form runs 40/96/40 with 10px gaps.
 */
body .forestex-contact-form .forestex-form-row {
	position: relative;
}

body .forestex-contact-form .forestex-form-row + .forestex-form-row {
	margin-top: 10px;
}

body .forestex-contact-form p {
	margin: 0;
}

/* The field already carries a 10px bottom margin; the row gap above supplies it. */
body .forestex-contact-form .forestex-form-field {
	margin-bottom: 0;
}

/* CF7's own wrapper margin has no counterpart in the Elementor Pro form. */
body .forestex-contact-form,
body .forestex-contact-form form.wpcf7-form {
	margin-bottom: 0 !important;
}

body .forestex-contact-form textarea.wpcf7-textarea {
	display: block;
}

body .forestex-contact-form .wpcf7-spinner {
	margin: 0;
	position: absolute;
}

.forestex-contact-form input.wpcf7-submit {
	background-color: #306f4b !important;
	border: 0 !important;
	border-radius: 0;
	box-sizing: border-box;
	color: #fff !important;
	cursor: pointer;
	display: block !important;
	font-family: var(--forestex-font);
	font-size: 15px;
	font-weight: 500;
	min-height: 40px;
	transition: background-color 0.2s ease;
	width: 100% !important;
}

.forestex-contact-form input.wpcf7-submit:hover,
.forestex-contact-form input.wpcf7-submit:focus {
	background-color: #24583b !important;
	color: #fff !important;
}

/*
 * The notice is fixed to the top of the viewport, so the document has to be
 * pushed down by its height. Without this the notice covers the header: the
 * logo starts 30px from the top and the notice is 62px tall.
 * The height is measured at runtime and written into the custom property.
 */
body.forestex-has-cookie-notice {
	padding-top: var(--forestex-cookie-notice-height, 62px);
}

.forestex-cookie-notice {
	align-items: center;
	background: #303030;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
	box-sizing: border-box;
	color: #fff;
	display: flex;
	font-size: 14px;
	gap: 20px;
	justify-content: center;
	left: 0;
	line-height: 1.45;
	padding: 12px 24px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 100000;
}

.forestex-cookie-notice p {
	color: inherit;
	margin: 0;
}

.forestex-cookie-notice a {
	color: #fff;
	margin-left: 0.4em;
	text-decoration: underline;
}

.forestex-cookie-notice[hidden] {
	display: none;
}

/* Withdrawal link, matched to the footer copyright line. */
.forestex-consent-footer {
	background: #fff;
	font-size: 11px;
	letter-spacing: 1px;
	padding: 0 20px 22px;
	text-align: center;
	text-transform: uppercase;
}

.forestex-consent-footer a {
	color: #7a7a7a;
	text-decoration: none;
}

.forestex-consent-footer a:hover,
.forestex-consent-footer a:focus {
	color: #306f4b;
	text-decoration: underline;
}

.forestex-cookie-notice__actions {
	display: flex;
	flex: 0 0 auto;
	gap: 10px;
}

/*
 * Declining has to be as easy as accepting, so both buttons carry the same
 * geometry and weight — only the colour differs.
 */
.forestex-cookie-btn {
	border: 0;
	border-radius: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	min-height: 38px;
	min-width: 116px;
	padding: 8px 22px;
}

.forestex-cookie-btn[data-forestex-consent="granted"] {
	background: #306f4b;
	color: #fff;
}

.forestex-cookie-btn[data-forestex-consent="granted"]:hover,
.forestex-cookie-btn[data-forestex-consent="granted"]:focus {
	background: #3d865d;
}

.forestex-cookie-btn[data-forestex-consent="denied"] {
	background: #fff;
	color: #303030;
}

.forestex-cookie-btn[data-forestex-consent="denied"]:hover,
.forestex-cookie-btn[data-forestex-consent="denied"]:focus {
	background: #e2e2e2;
}

.forestex-cookie-btn:focus-visible {
	outline: 2px solid #a3cf3a;
	outline-offset: 2px;
}

/*
 * Astra Pro 1.8 used to give the header menu items their vertical rhythm.
 * Astra 4 with the free HFE menu leaves the links at padding 0, which collapses
 * the menu to its 16px line height. The live site uses 13px/20px with a 20px
 * line height, giving each link a 46px box.
 */
/*
 * Menu links are dark green on the live site; Astra 4 leaves them at the body
 * colour. The current item and hover keep the lighter accent.
 */
.ehf-header .hfe-nav-menu a.hfe-menu-item {
	color: #306f4b !important;
}

.ehf-header .hfe-nav-menu .current-menu-item > a.hfe-menu-item,
.ehf-header .hfe-nav-menu .current_page_item > a.hfe-menu-item,
.ehf-header .hfe-nav-menu a.hfe-menu-item:hover,
.ehf-header .hfe-nav-menu a.hfe-menu-item:focus {
	color: #a3cf3a !important;
}

@media (min-width: 768px) {
	.ehf-header .hfe-nav-menu a.hfe-menu-item {
		line-height: 20px;
		padding: 13px 20px;
		position: relative;
	}

	/*
	 * The live header slides a 3px bar under the link on hover and keeps it
	 * under the current page.
	 */
	.ehf-header .hfe-nav-menu a.hfe-menu-item::after {
		background: #a3cf3a;
		bottom: 0;
		content: "";
		display: block;
		height: 3px;
		left: 0;
		position: absolute;
		transition: width 0.3s cubic-bezier(0.58, 0.3, 0.005, 1);
		width: 0;
	}

	.ehf-header .hfe-nav-menu a.hfe-menu-item:hover::after,
	.ehf-header .hfe-nav-menu a.hfe-menu-item:focus::after,
	.ehf-header .hfe-nav-menu .current-menu-item > a.hfe-menu-item::after,
	.ehf-header .hfe-nav-menu .current_page_item > a.hfe-menu-item::after {
		width: 100%;
	}
}

/*
 * Elementor 4 spaces stacked widgets by 20px; Elementor 2.5 did not, so the
 * live site runs every widget at margin-bottom 0 and the design supplies its
 * own spacing. Per-element rules stay ahead of this and keep their values.
 */
body .elementor-widget:not(:last-child) {
	margin-bottom: 0;
}

/*
 * Elementor 2.5 held a 150px width on each contact portrait widget. Elementor 4
 * dropped it, so the photos stretch to the full 171px column and every card row
 * grows by 31px. Listed by widget id so the header logo keeps its own size.
 */
body .elementor-element-bf8a84e,
body .elementor-element-325003e,
body .elementor-element-58dffc4,
body .elementor-element-23af8d2,
body .elementor-element-53c9ea4 {
	width: 150px !important;
}

/* Contact details are plain links on the live site, not underlined. */
body .elementor-widget-text-editor a {
	text-decoration: none !important;
}

.hfe-nav-menu__toggle .hfe-nav-menu-icon i {
	background: none;
	display: block;
	font-size: 0 !important;
	height: 20px;
	position: relative;
	width: 26px;
}

.hfe-nav-menu__toggle .hfe-nav-menu-icon i.fas.fa-align-justify {
	background:
		linear-gradient(
			to bottom,
			#306f4b 0,
			#306f4b 2px,
			transparent 2px,
			transparent 8px,
			#306f4b 8px,
			#306f4b 10px,
			transparent 10px,
			transparent 16px,
			#306f4b 16px,
			#306f4b 18px
		);
	height: 18px;
}

.hfe-nav-menu__toggle .hfe-nav-menu-icon i.fas.fa-align-justify::before {
	content: none !important;
}

.hfe-nav-menu__toggle .hfe-nav-menu-icon i.fa-window-close::before,
.hfe-nav-menu__toggle .hfe-nav-menu-icon i.fa-window-close::after {
	background: #306f4b;
	content: "" !important;
	height: 2px;
	left: 0;
	position: absolute;
	top: 9px;
	width: 26px;
}

.hfe-nav-menu__toggle .hfe-nav-menu-icon i.fa-window-close::before {
	transform: rotate(45deg);
}

.hfe-nav-menu__toggle .hfe-nav-menu-icon i.fa-window-close::after {
	transform: rotate(-45deg);
}

@media (max-width: 767px) {
	.forestex-hero__title {
		font-size: clamp(2.45rem, 12vw, 3.25rem);
		padding: 0 20px;
	}

	.forestex-cookie-notice {
		align-items: stretch;
		flex-direction: column;
		gap: 10px;
		padding: 12px 16px;
	}

	.forestex-cookie-notice__actions .forestex-cookie-btn {
		flex: 1 1 0;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.forestex-hero__background {
		transition: none;
	}
}