/* ==========================================================================
   GetGreen, widget styles (navigation, contact form, logo)
   Loaded only on pages that use one of the three GetGreen widgets.
   Colours come from the Elementor Kit, same as the rest of the site.
   ========================================================================== */

:root {
	--gg-w-primary: var(--e-global-color-primary, #55701F);
	--gg-w-dark:    var(--e-global-color-ggdark, #1C1C1C);
	--gg-w-white:   var(--e-global-color-ggwhite, #FFFFFF);
	--gg-w-border:  var(--e-global-color-ggborder, #E2E6DC);
	--gg-w-muted:   var(--e-global-color-ggmuted, #5C6459);
	--gg-w-head:    var(--e-global-typography-primary-font-family, "Plus Jakarta Sans"), system-ui, sans-serif;
	--gg-w-tap:     48px;
}

/* -- Logo ---------------------------------------------------------------- */
.gg-logo { display: flex; align-items: center; }
.gg-logo__link { display: inline-flex; align-items: center; text-decoration: none; }
.gg-logo__img,
.gg-logo__svg { display: block; height: 66px; width: auto; }
.gg-logo__text {
	font: 800 24px/1 var(--gg-w-head);
	letter-spacing: -.4px;
	color: var(--gg-w-dark);
}

/* -- Navigation: desktop -------------------------------------------------- */
.gg-nav { position: relative; display: flex; align-items: center; justify-content: flex-end; }
.gg-nav__desktop { display: block; }

.gg-nav__list {
	display: flex;
	align-items: center;
	gap: 30px;                      /* the widget's own Gap control overrides this */
	list-style: none;
	margin: 0;
	padding: 0;
}
.gg-nav__item { position: relative; margin: 0; }

.gg-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	/* 44px is the pointer target, not the visible box. The extra height sits as
	   empty space around the word, which is what makes a small menu forgiving
	   to click without making the header any taller. */
	min-height: 44px;
	padding: 4px 2px;
	font-family: var(--gg-w-head);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -0.005em;
	color: var(--gg-w-dark);
	text-decoration: none;
	transition: color .18s ease;
}
.gg-nav__link:hover { color: var(--gg-w-primary); }

/* The page you are on is named twice over, in colour and with the rule beneath
   it. Colour alone is never enough on its own. */
.gg-nav__item.is-current > .gg-nav__link { color: var(--gg-w-primary); }

.gg-nav--pointer-underline .gg-nav__link::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	bottom: 7px;                    /* just under the word, not at the box floor */
	height: 2px;
	border-radius: 2px;
	background: var(--gg-w-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
.gg-nav--pointer-underline .gg-nav__link:hover::after,
.gg-nav--pointer-underline .gg-nav__link:focus-visible::after { transform: scaleX(1); }
/* The current page keeps a heavier rule that does not animate, so it stays
   distinct from whatever the pointer happens to be hovering. */
.gg-nav--pointer-underline .gg-nav__item.is-current > .gg-nav__link::after {
	transform: scaleX(1);
	height: 3px;
}

.gg-nav--pointer-pill .gg-nav__link { padding: 8px 16px; border-radius: 999px; }
.gg-nav--pointer-pill .gg-nav__link:hover,
.gg-nav--pointer-pill .gg-nav__item.is-current > .gg-nav__link {
	background: color-mix(in srgb, var(--gg-w-primary) 12%, transparent);
}

.gg-nav__link:focus-visible {
	outline: 3px solid var(--gg-w-dark);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Desktop submenu, opens on hover and on keyboard focus. */
.gg-nav__sub {
	position: absolute;
	top: 100%; left: -14px;
	min-width: 230px;
	margin: 0; padding: 8px;
	list-style: none;
	background: var(--gg-w-white);
	border: 1px solid var(--gg-w-border);
	border-radius: 14px;
	box-shadow: 0 18px 40px -20px rgba(28,28,28,.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 20;
}
.gg-nav__item:hover > .gg-nav__sub,
.gg-nav__item:focus-within > .gg-nav__sub,
.gg-nav__item.is-expanded > .gg-nav__sub {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.gg-nav__sub .gg-nav__link { display: flex; width: 100%; padding: 10px 12px; min-height: 44px; border-radius: 8px; }
.gg-nav__sub .gg-nav__link:hover { background: color-mix(in srgb, var(--gg-w-primary) 10%, transparent); }
.gg-nav__sub .gg-nav__link::after { display: none; }

.gg-nav__subtoggle {
	display: none;
	background: none; border: 0; cursor: pointer;
	width: var(--gg-w-tap); height: var(--gg-w-tap);
	color: inherit;
}
.gg-nav__subtoggle span {
	display: block; width: 9px; height: 9px; margin: auto;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .2s ease;
}
.gg-nav__item.is-expanded > .gg-nav__subtoggle span { transform: rotate(-135deg); }

/* -- Navigation: toggle + drawer ------------------------------------------ */
/* The Elementor kit styles every <button> on the page (`.elementor-kit-N button`),
   which would paint these green. One extra element in the selector wins without
   resorting to !important. */
.gg-nav button.gg-nav__toggle,
.gg-nav button.gg-nav__close,
.gg-nav button.gg-nav__subtoggle {
	background: none;
	background-color: transparent;
	border-radius: 10px;
	box-shadow: none;
	color: var(--gg-w-dark);
}
.gg-nav button.gg-nav__close { color: var(--gg-w-muted); }
.gg-nav button.gg-nav__close:hover { color: var(--gg-w-dark); }
.gg-nav button.gg-nav__subtoggle,
.gg-nav button.gg-nav__close { border: 0; }

.gg-nav__toggle {
	display: none;
	align-items: center;
	gap: 10px;
	min-height: var(--gg-w-tap);
	padding: 10px 16px;
	background: none;
	border: 2px solid var(--gg-w-dark);
	border-radius: 10px;
	color: var(--gg-w-dark);
	font: 600 16px/1 var(--gg-w-head);
	cursor: pointer;
}
.gg-nav__bars { display: inline-block; width: 20px; }
.gg-nav__bars span {
	display: block; height: 2px; background: currentColor; border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.gg-nav__bars span + span { margin-top: 5px; }
.gg-nav.is-open .gg-nav__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gg-nav.is-open .gg-nav__bars span:nth-child(2) { opacity: 0; }
.gg-nav.is-open .gg-nav__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.gg-nav__scrim {
	position: fixed; inset: 0;
	background: rgba(20,24,18,.55);
	opacity: 0;
	transition: opacity .22s ease;
	z-index: 998;
}
.gg-nav.is-open .gg-nav__scrim { opacity: 1; }

.gg-nav__drawer {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: min(400px, 88vw);
	background: var(--gg-w-white);
	box-shadow: -20px 0 50px -24px rgba(0,0,0,.5);
	transform: translateX(100%);
	transition: transform .24s cubic-bezier(.22,.61,.36,1);
	z-index: 999;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.gg-nav.is-open .gg-nav__drawer { transform: translateX(0); }
.gg-nav__drawer-inner { padding: 20px 24px 32px; display: flex; flex-direction: column; }

.gg-nav__close {
	display: flex; align-items: center; gap: 8px;
	align-self: flex-end;
	min-height: var(--gg-w-tap); padding: 8px 12px;
	background: none; border: 0; cursor: pointer;
	font: 600 16px/1 var(--gg-w-head); color: var(--gg-w-muted);
}
.gg-nav__close span[aria-hidden] { font-size: 26px; line-height: 1; }
.gg-nav__close:hover { color: var(--gg-w-dark); }

.gg-nav__drawer .gg-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	margin: 8px 0 20px;
}
.gg-nav__drawer .gg-nav__item {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--gg-w-border);
}
.gg-nav__drawer .gg-nav__link {
	flex: 1 1 auto;
	min-height: 58px;
	font-size: 19px;
}
.gg-nav__drawer .gg-nav__link::after { display: none; }
.gg-nav__drawer .gg-nav__subtoggle { display: block; }
.gg-nav__drawer .gg-nav__sub {
	position: static;
	flex: 1 0 100%;
	opacity: 1; visibility: visible; transform: none;
	display: none;
	border: 0; box-shadow: none; border-radius: 0;
	padding: 0 0 10px 14px;
	min-width: 0;
}
.gg-nav__drawer .gg-nav__item.is-expanded > .gg-nav__sub { display: block; }
.gg-nav__drawer .gg-nav__sub .gg-nav__link { min-height: 48px; font-size: 17px; }

.gg-nav__drawer-actions { display: grid; gap: 12px; margin-top: 8px; }
.gg-nav a.gg-nav__drawer-tel,
.gg-nav a.gg-nav__drawer-cta {
	display: flex; align-items: center; justify-content: center;
	min-height: 56px; padding: 16px 22px;
	border-radius: 10px;
	font: 600 17px/1.2 var(--gg-w-head);
	text-decoration: none;
	text-align: center;
}
.gg-nav a.gg-nav__drawer-tel {
	background: none;
	border: 2px solid var(--gg-w-dark);
	color: var(--gg-w-dark);
}
.gg-nav a.gg-nav__drawer-tel:hover,
.gg-nav a.gg-nav__drawer-tel:focus { background: var(--gg-w-dark); color: #fff; }
.gg-nav a.gg-nav__drawer-cta {
	background: var(--gg-w-primary);
	border: 2px solid var(--gg-w-primary);
	color: #fff;
}
.gg-nav a.gg-nav__drawer-cta:hover,
.gg-nav a.gg-nav__drawer-cta:focus { filter: brightness(.92); color: #fff; }

.gg-nav__empty { color: var(--gg-w-muted); font-size: 15px; margin: 0; }

/* Lock background scroll while the drawer is open. */
html.gg-nav-open, html.gg-nav-open body { overflow: hidden; }

/* Breakpoints, mirror the Elementor kit values (1366 / 1024 / 767). */
.gg-nav--bp-never .gg-nav__toggle { display: none !important; }

@media (max-width: 1366px) {
	.gg-nav--bp-laptop .gg-nav__desktop { display: none; }
	.gg-nav--bp-laptop .gg-nav__toggle  { display: inline-flex; }
}
@media (max-width: 1024px) {
	.gg-nav--bp-tablet .gg-nav__desktop { display: none; }
	.gg-nav--bp-tablet .gg-nav__toggle  { display: inline-flex; }
}
@media (max-width: 767px) {
	.gg-nav--bp-mobile .gg-nav__desktop { display: none; }
	.gg-nav--bp-mobile .gg-nav__toggle  { display: inline-flex; }
	.gg-nav__toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.gg-nav__toggle { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.gg-nav__drawer, .gg-nav__scrim, .gg-nav__sub, .gg-nav__link::after { transition: none !important; }
}

/* -- Contact form --------------------------------------------------------- */
.gg-form__field--check { margin-top: 4px; }
.gg-form__check {
	display: flex; gap: 12px; align-items: flex-start;
	font-size: 16px; line-height: 1.55; color: var(--gg-w-muted);
	cursor: pointer;
}
.gg-form__check input {
	width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto;
	accent-color: var(--gg-w-primary);
}
.gg-form__actions { margin-top: 4px; }
.gg-form__error:empty { display: none; }
.gg-form__message-slot:empty { display: none; }

/* Sticky mobile bar: two equal halves that never wrap and never overflow. */
.gg-stickybar .elementor-button { white-space: nowrap; font-size: 16px; }
.gg-stickybar .elementor-button-text { white-space: nowrap; }
.gg-stickybar > .elementor-widget-button { flex: 1 1 0; min-width: 0; }
@media (max-width: 380px) {
	.gg-stickybar .elementor-button { font-size: 15px; padding-left: 8px; padding-right: 8px; }
}