/*
 * Freshwave 2026 – Main Stylesheet
 * Compiled CSS goes here (or use this as the entry point for your build tool).
 */

/* Base resets */
*, *::before, *::after {
	box-sizing: border-box;
}

img, video {
	max-width: 100%;
	height: auto;
	display: block;
}

@font-face {
	font-family: "fieldwork";
	src: url("../fonts/FieldworkGeoThin/font.woff2") format("woff2"),
	     url("../fonts/FieldworkGeoThin/font.woff") format("woff");
	font-display: swap;
	font-style: normal;
	font-weight: 200;
	font-stretch: normal;
	ascent-override: 92%;
	descent-override: 25%;
	line-gap-override: 0%;
	size-adjust: 100%
}

@font-face {
	font-family: "fieldwork";
	src: url("../fonts/FieldworkGeoRegular/font.woff2") format("woff2"),
	     url("../fonts/FieldworkGeoRegular/font.woff") format("woff");
	font-display: swap;
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
	ascent-override: 92%;
	descent-override: 25%;
	line-gap-override: 0%;
	size-adjust: 100%
}

@font-face {
	font-family: "fieldwork";
	src: url("../fonts/FieldworkGeoDemibold/font.woff2") format("woff2"),
	     url("../fonts/FieldworkGeoDemibold/font.woff") format("woff");
	font-display: swap;
	font-style: normal;
	font-weight: 600;
	font-stretch: normal;
	ascent-override: 92%;
	descent-override: 25%;
	line-gap-override: 0%;
	size-adjust: 100%
}

@font-face {
	font-family: "fieldwork";
	src: url("../fonts/FieldworkGeoBold/font.woff2") format("woff2"),
	     url("../fonts/FieldworkGeoBold/font.woff") format("woff");
	font-display: swap;
	font-style: normal;
	font-weight: 700;
	font-stretch: normal;
	ascent-override: 92%;
	descent-override: 25%;
	line-gap-override: 0%;
	size-adjust: 100%
}

body,
button,
input,
select,
textarea {
	line-height: 1.5;
	font-synthesis: none;
}

/* --------------------------------------------------------------------------
   Button transitions — smooth 200 ms fade for colour changes
   -------------------------------------------------------------------------- */
button,
.wp-block-button__link,
.wp-element-button,
[class*="wp-block-button"] a,
a.button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease
		!important;
}

@media ( prefers-reduced-motion: reduce ) {
	button,
	.wp-block-button__link,
	.wp-element-button,
	[class*="wp-block-button"] a,
	a.button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"] {
		transition: none;
	}
}

.freshwave-main {
	margin-top: calc(var(--wf-header-height) * -1);
}

.freshwave-cover .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.freshwave-cover .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* disable button hover and pointer to make it like a pill*/
/* Make selectable pills with no hover/focus visual change. */
.no-hover a,
.no-hover a:hover,
.no-hover a:focus,
.no-hover a:focus-visible,
.no-hover a:active {
	-webkit-tap-highlight-color: transparent;
	border-radius: calc(infinity * 1px);
	text-decoration: none;
	box-shadow: none !important;
	filter: none !important;
	opacity: 1 !important;
	transition: none !important;
	background-color: var(--wp--preset--color--white, #14322B) !important;
	color: var(--wp--preset--color--dark-green, #ffffff) !important;
	border: 1px solid var(--wp--preset--color--dark-green, #14322B) !important;
}

.no-hover a:hover,
.no-hover a:focus,
.no-hover a:focus-visible,
.no-hover a:active {
	cursor: default;
}

footer a {
	text-decoration: none;
	color: white;
}

footer a:hover {
	text-decoration: underline;
	color: white;
}

/*!* Site layout *!*/
/*.site-main {*/
/*	padding-block: var(--wp--preset--spacing--16);*/
/*}*/

/* Site header */

@keyframes fw-header-intro {
	from {
		opacity: 0;
		filter: blur(4px);
		transform: translateY(calc(var(--wf-header-height) * -1));
	}
	to {
		opacity: 1;
		filter: blur(0px);
		transform: translateY(0);
	}
}

.freshwave-header {
	animation: fw-header-intro 0.65s cubic-bezier(0.65, 0.05, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.freshwave-header {
		animation: none;
	}
}

.site-header {
	height: 83px;
	display: flex;
	justify-content: center;
	border-bottom: 1px solid var(--wp--preset--color--neutral-lighter);
}

.site-header .site-header__wrapper {
	max-width: var(--wp--style--global--content-size);
	flex-grow: 1;
}

.freshwave-header {
	position: sticky;
	top: 0;
	z-index: 140;
	background-color: var(--wp--preset--color--white);
}


.fw-horizontal-scrollbar {	
	margin-left: 1rem;
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
	gap: 1.2rem;

	/* Firefox */
  	scrollbar-width: none;
}



/* Chrome, Safari, newer Edge */
.fw-horizontal-scroll::-webkit-scrollbar {
  display: none;
}

.fw-horizontal-scrollbar .progress {
	position: relative;
	display: block;
	height: 1px;
	width: 300px;
	background-color: black;
	margin-left: 30px;
}

.fw-horizontal-scrollbar .progress .thumb {
    display: block;
    height: 3px;
    background-color: black;
    position: absolute;
    top: -2px;
}

.fw-horizontal-scrollbar button {
	background: none;
	border: none;
}

.fw-horizontal-scrollbar button.next svg {
	transform: rotateY(180deg);
}

/* =========================================================================
   Cover Block — Parallax
   =========================================================================
   When the JS adds the `.fw-parallax` class, the cover gets overflow:hidden
   and the background image is made taller than its container so there is
   always image to fill the frame as it shifts vertically.

   Extra height formula:
     The maximum shift = (viewportHeight / 2 + coverHeight / 2) × PARALLAX_FACTOR
     With factor 0.25 and a full-viewport cover that's ≈ 25 vh.
     We use 30 vh padding on each side (60 vh total) for a comfortable margin.
   ========================================================================= */

.fw-parallax {
	overflow: hidden;
}

.fw-parallax .wp-block-cover__image-background,
.fw-parallax .wp-block-cover__video-background {
	/* Extend the image so it never shows a gap while shifting. */
	height: calc(100% + 15vh) !important;
	/*top: -15vh !important;*/
	bottom: auto !important;

	/* GPU-accelerated layer + smooth subpixel rendering. */
	will-change: transform;
	backface-visibility: hidden;

	/* Prevent any accidental CSS transitions from fighting the JS transform. */
	transition: none !important;
}

/*!* Disable parallax on touch/mobile devices where it can feel sluggish. *!*/
/*@media (hover: none) and (pointer: coarse) {*/
/*	.fw-parallax .wp-block-cover__image-background,*/
/*	.fw-parallax .wp-block-cover__video-background {*/
/*		height: 100% !important;*/
/*		top: 0 !important;*/
/*		transform: none !important;*/
/*		will-change: auto;*/
/*	}*/
/*}*/

/* =========================================================================
   Generic Parallax Image — .fw-parallax-image
   =========================================================================
   Add this class to any block/wrapper that contains an <img> to apply the
   same parallax depth effect used on Cover blocks.

   The container needs a defined height (e.g. via min-height, aspect-ratio,
   or a fixed height) for the overflow crop to work correctly.
   ========================================================================= */

.fw-parallax-image {
	overflow: hidden;
}

.fw-parallax-image img {
	/* Extend the image so it never shows a gap while shifting vertically. */
	height: calc(100% + 15vh) !important;
	width: 100%;
	object-fit: cover;

	/* GPU-accelerated layer + smooth subpixel rendering. */
	will-change: transform;
	backface-visibility: hidden;

	/* Prevent any accidental CSS transitions from fighting the JS transform. */
	transition: none !important;
}

/*fluentform overrides*/

.ff-default .ff-el-form-control {
	border: 1px solid var(--wp--preset--color--white);
	border-radius: calc(infinity * 1px);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body), serif;
	line-height: 1;
	transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.ff-default .ff_btn_style {
	border: 1px solid transparent;
	border-radius: calc(infinity * 1px);
	cursor: pointer;
	display: inline-block;
	font-family: var(--wp--preset--font-family--body), serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	padding: 10px 20px;
	position: relative;
	text-align: center;
	transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	vertical-align: middle;
	white-space:nowrap
}

.ff-default .ff_btn_style:focus, .ff-default .ff_btn_style:hover {
	opacity: .8;
	outline: 0;
	text-decoration:none
}

.fluentform input[type=checkbox], .fluentform input[type=radio] {
	display: inline-block;
	margin: 0;
	width: 18px;
	height: 18px;
	margin-right: 4px;
}

/* HubSpot form overwrites */
:root {
	--hsf-global__font-family: 'impact';
	--hsf-global__font-size: 18px;
	--hsf-global__color: #fff;
	--hsf-background__background-color: #000;
}