/* 
	Breakpoints cheatsheet

	desktop design: > 1024px
	tablet design: 1024px - 768px
	mobile design: < 768px
*/

:root {
	--color-primary: #004363;
	--color-secondary: #ec6608;
	--color-secondary-contrast: #ffffff;
	--text-gray: #444444;
	--color-error: #dc0000;

	--color-aquablue: #66b8ca;
	--color-lightblue: #e6eaf7;

	--wrapper-width: 1400px;

	--media-desktop: 1280px; /* Large desktops */
	--media-laptop: 1024px; /* Small laptops */
	--media-tablet: 768px; /* Tablets */
	--media-mobile: 480px; /* Small phones */
	--media-small-mobile: 360px; /* Very small phones */

	/* Font sizes */
	/* Headers */
	--header-font-size: clamp(16px, 1.6vw, 19px);
	--header-dropdown-font-size: clamp(13px, 1.2vw, 15px);

	/* Dropdown */
	--dropdown-font-size: clamp(15px, 1.8vw, 18px);

	/* Footer */
	--footer-font-size: clamp(12px, 1.2vw, 14px);
	--footer-subtext-font-size: clamp(10px, 1vw, 12px);

	/* Buttons */
	--btn-outline-font-size: clamp(12px, 1.2vw, 14px);
	--btn-secondary-font-size: clamp(15px, 1.8vw, 18px);

	/* Body text */
	--font-size-text: clamp(14px, 1.5vw, 16px);
	--font-size-label: clamp(10px, 1vw, 12px);

	/* Headings */
	--font-size-h1: clamp(32px, 4vw, 48px);
	--font-size-h2: clamp(24px, 3vw, 36px);
	--font-size-h3: clamp(18px, 2vw, 25px);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "allumi-std-extended", sans-serif;
	font-weight: 300;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	min-height: 100vh;
	max-width: 100vw;
	overflow-x: hidden;
}

.content {
	width: 100%;
	flex-grow: 1;
}

/* colored buttons */
.btn-secondary,
.btn-outline {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-secondary-contrast);
	background-color: var(--color-secondary);
	transition: background 0.1s ease-in-out;
	text-align: center;
	font-size: var(--btn-secondary-font-size);
	font-style: normal;
	font-weight: 300;
	line-height: 18px; /* 120% */
	padding: 16px 21px 16px 20px;
	font-family: "allumi-std-extended", sans-serif;
	cursor: pointer;
	position: relative;
	display: block;
	width: fit-content;
	border: none;
}

.btn-outline {
	font-weight: 650;
	font-size: var(--btn-outline-font-size);
}

.btn-outline.active {
	border: 1px solid var(--color-secondary);
}

.btn-outline.slanted {
	/* width: 100%; */
	border: none !important;
	position: relative;
	background-color: var(--color-primary) !important;
	padding: 1px;
	clip-path: polygon(
		33px 0%,
		/* top left cut (comes in from left) */ 100% 0%,
		/* top right */ 100% calc(100% - 21px),
		/* bottom right inset */ calc(100% - 33px) 100%,
		/* bottom right cut */ 0% 100%,
		/* bottom left */ 0% 21px /* top left side inset */
	);
}

.btn-outline.slanted span {
	padding: 14.5px 47px;
	font-size: var(--btn-secondary-font-size);
	font-weight: 300;
	transition: 0.2s ease-in-out;
	display: block;
	background-color: #fff !important;
	clip-path: polygon(
		32px 0%,
		/* top left cut (comes in from left) */ 100% 0%,
		/* top right */ 100% calc(100% - 20px),
		/* bottom right inset */ calc(100% - 32px) 100%,
		/* bottom right cut */ 0% 100%,
		/* bottom left */ 0% 20px /* top left side inset */
	);
}

.btn-outline.slanted.lightblue span {
	background-color: var(--color-lightblue) !important;
}

.btn-outline.slanted:hover span {
	background-color: var(--color-primary) !important;
	color: #fff;
}

.btn-outline:not(.active) {
	background-color: transparent;
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
}

.btn-secondary.slanted {
	padding: 16px 55px 16px 55px;
	clip-path: polygon(
		32px 0%,
		/* top left cut (comes in from left) */ 100% 0%,
		/* top right */ 100% calc(100% - 20px),
		/* bottom right inset */ calc(100% - 32px) 100%,
		/* bottom right cut */ 0% 100%,
		/* bottom left */ 0% 20px /* top left side inset */
	);
}

.btn-secondary.slanted.has-icon {
	padding: 16px 105px 16px 75px;
	position: relative;
}

.btn-secondary.slanted.has-icon img {
	position: absolute;
	top: 50%;
	right: 26px;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	transition: 0.15s ease-in-out;
}

.btn-secondary.slanted.has-icon:hover img {
	transform: translateY(-50%) translateX(2px);
}

.btn-secondary.slanted.white::before {
	background-color: #fff;
}

.btn-secondary.slanted.light-blue::before {
	background-color: var(--color-lightblue);
}

.btn-secondary:hover {
	color: var(--color-secondary-contrast);
	background: var(--color-primary);
}

a {
	text-decoration: none;
}

a:hover {
	color: var(--color-secondary);
	cursor: pointer;
	text-decoration: none;
}

/* images */

.dual_images {
	width: 100%;
	aspect-ratio: 1 / 1;
	position: relative;
}

.dual_images.outline:not(.reversed)::after {
	content: "";
	position: absolute;
	width: auto;
	height: 52%;
	max-width: 70%;
	max-height: 70%;
	aspect-ratio: 1 / 1;
	background-image: var(--border-svg, url("/public/img/imgmask_1_border.svg"));
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	right: 10px;
	bottom: 7.5px;
	z-index: 4;
	pointer-events: none;
	--border-color: #000;
}

.dual_images.outline.reversed::after {
	content: "";
	position: absolute;
	width: auto;
	height: 52%;
	max-width: 70%;
	max-height: 70%;
	aspect-ratio: 1 / 1;
	background-image: var(--border-svg, url("/public/img/imgmask_1_border.svg"));
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	left: 10px;
	bottom: 7.5px;
	z-index: 4;
	pointer-events: none;
	--border-color: #000;
}

/* Header images outline */
.header-images.outline {
	position: relative;
}

.header-images.outline::after {
	content: "";
	position: absolute;
	background-image: var(--border-svg, url("/public/img/imgmask_2_border.svg"));
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 4;
	pointer-events: none;
	--border-color: #000;
}

/* Layout 1, 1_2 - smaller image positioning */
.header.layout_1 .header-images.outline::after,
.header.layout_1_2 .header-images.outline::after {
	width: 377px;
	height: 377px;
	max-width: 477px;
	max-height: 477px;
	aspect-ratio: 1 / 1;
	left: -88px;
	bottom: 24px;
}

/* Layout 1_3 - smaller image positioning */
.header.layout_1_3 .header-images.outline::after {
	width: 377px;
	height: 377px;
	max-width: 477px;
	max-height: 477px;
	aspect-ratio: 1 / 1;
	left: 0;
	bottom: 24px;
}

/* Layout 2, 2_2, 2_3, 2_4 - smaller image positioning */
.header.layout_2 .header-images.outline::after,
.header.layout_2_2 .header-images.outline::after,
.header.layout_2_3 .header-images.outline::after,
.header.layout_2_4 .header-images.outline::after {
	width: 326px;
	height: 326px;
	max-width: 30vw;
	max-height: 30vw;
	aspect-ratio: 1 / 1;
	left: -50px;
	bottom: 16px;
}

@media screen and (max-width: 1080px) {
	.header.layout_1 .header-images.outline::after,
	.header.layout_1_2 .header-images.outline::after,
	.header.layout_1_3 .header-images.outline::after {
		width: auto;
		height: 60%;
		left: 0;
		bottom: 0;
		max-width: none;
		max-height: none;
	}
}

@media screen and (max-width: 1400px) {
	.header.layout_2 .header-images.outline::after,
	.header.layout_2_2 .header-images.outline::after,
	.header.layout_2_3 .header-images.outline::after,
	.header.layout_2_4 .header-images.outline::after {
		left: 0px;
		bottom: 0px;
	}
}

@media screen and (max-width: 800px) {
	.header.layout_2 .header-images.outline::after,
	.header.layout_2_2 .header-images.outline::after,
	.header.layout_2_3 .header-images.outline::after,
	.header.layout_2_4 .header-images.outline::after {
		width: auto;
		height: 60%;
		left: 0;
		bottom: 10px;
		max-height: none;
		max-width: none;
	}
}

.dual_images img {
	position: absolute;
	mask-mode: alpha;
	mask-repeat: no-repeat;
	mask-size: cover;
	mask-position: center;
	background-color: var(--color-primary);
}

.dual_images:not(.reversed) img:first-of-type {
	width: auto;
	height: 90%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
	mask-image: url("/public/img/imgmask_2.svg");
	background-color: var(--color-secondary);
	position: absolute;
	top: 10px;
	left: 7.5px;
	z-index: 1;
}

.dual_images:not(.reversed) img:last-of-type {
	width: auto;
	height: 52%;
	max-width: 70%;
	max-height: 70%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
	mask-image: url("/public/img/imgmask_1.svg");
	right: 10px;
	bottom: 7.5px;
	position: absolute;
	z-index: 3;
}

.dual_images.reversed img:first-of-type {
	width: auto;
	height: 52%;
	max-width: 70%;
	max-height: 70%;
	aspect-ratio: 1 / 1;
	mask-image: url("/public/img/imgmask_2.svg");
	background-color: var(--color-secondary);
	position: absolute;
	z-index: 1;
	left: 10px;
	bottom: 7.5px;
}

.dual_images.reversed img:last-of-type {
	width: auto;

	height: 90%;

	object-fit: cover;
	object-fit: cover;
	aspect-ratio: 1 / 1;
	mask-image: url("/public/img/imgmask_1.svg");
	top: 10px;
	right: 7.5px;
	position: absolute;
}

/* single image */

.single_image {
	width: 100%;
	height: fit-content;
	position: relative;
}

.single_image img {
	/* width: 100%; <-- bugged op safari */
	width: -webkit-fit-content;
	width: fit-content;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
	mask-image: url("/public/img/imgmask_2.svg");
	mask-mode: alpha;
	mask-repeat: no-repeat;
	mask-size: cover;
	mask-position: center;
	background-color: #333333b1;
}

.single_image.reversed img {
	mask-image: url("/public/img/imgmask_1.svg");
}

/* side squigles */

.window-edge-squigles {
	position: absolute;
	pointer-events: none;
	width: 50px;
	height: 100%;
	top: 0;
	right: 0;
	z-index: 1;
	overflow: hidden;
}

.window-edge-squigles img {
	position: absolute;
	width: fit-content;
	height: 100%;
	top: 0;
	right: 0;
	z-index: -1;
}

.window-edge-squigles img.outline {
	width: 40px;
	top: 0;
}

.window-edge-squigles img.colored {
	width: 50px;
	top: -6%;
}

.missing-contentblock {
	background: #ffcece;
	color: #333;
	padding: 8px;
	margin: 8px 12px;
	border-left: 4px solid red;
	word-wrap: break-word;
}

/* @media screen and (max-width: 1280px) { */
:root {
	--dpx: calc(100vw / 1400);

	--header-font-size: clamp(16px, calc(16 * var(--dpx)), 19px);
	--header-dropdown-font-size: clamp(14px, calc(14 * var(--dpx)), 15px);

	--btn-outline-font-size: 14px; /* fixed */
	--btn-secondary-font-size: clamp(15.125px, calc(15.125 * var(--dpx)), 18px);

	--font-size-text: clamp(14px, calc(14 * var(--dpx)), 16px);

	--font-size-h1: clamp(25px, calc(25 * var(--dpx)), 48px);
	--font-size-h2: clamp(22px, calc(22 * var(--dpx)), 36px);
	--font-size-h3: clamp(18px, calc(18 * var(--dpx)), 25px);

	--footer-font-size: clamp(14px, calc(14 * var(--dpx)), 16px);
}
/* } */

b,
strong {
	font-weight: bold !important;
}

.button-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
}

@media screen and (max-width: 1024px) {
	:root {
		--dpx: calc(100vw / 1024);

		--header-font-size: clamp(16px, calc(16 * var(--dpx)), 19px);
		--header-dropdown-font-size: clamp(14px, calc(14 * var(--dpx)), 15px);

		--btn-outline-font-size: 14px; /* fixed */
		--btn-secondary-font-size: clamp(15.125px, calc(15.125 * var(--dpx)), 18px);

		--font-size-text: clamp(14px, calc(14 * var(--dpx)), 16px);

		--font-size-h1: clamp(25px, calc(25 * var(--dpx)), 48px);
		--font-size-h2: clamp(22px, calc(22 * var(--dpx)), 36px);
		--font-size-h3: clamp(18px, calc(18 * var(--dpx)), 25px);

		--footer-font-size: clamp(14px, calc(14 * var(--dpx)), 16px);
	}

	.btn-outline {
		font-size: var(--btn-outline-font-size);
		padding: 10px 20px;
	}
	.btn-secondary {
		padding: 14px 24px;
		font-size: var(--btn-secondary-font-size);
	}
	.btn-secondary.slanted {
		/* width: 100%; */
		padding: 14.5px 47px;
		clip-path: polygon(
			32px 0%,
			/* top left cut (comes in from left) */ 100% 0%,
			/* top right */ 100% calc(100% - 20px),
			/* bottom right inset */ calc(100% - 32px) 100%,
			/* bottom right cut */ 0% 100%,
			/* bottom left */ 0% 20px /* top left side inset */
		);
	}
}

@media screen and (max-width: 800px) {
	:root {
		--dpx: calc(100vw / 800);

		--header-font-size: clamp(16px, calc(16 * var(--dpx)), 19px);
		--header-dropdown-font-size: clamp(14px, calc(14 * var(--dpx)), 15px);

		--btn-outline-font-size: 14px; /* fixed */
		--btn-secondary-font-size: clamp(15.125px, calc(15.125 * var(--dpx)), 18px);

		--font-size-text: clamp(12px, calc(14 * var(--dpx)), 16px);

		--font-size-h1: clamp(25px, calc(25 * var(--dpx)), 48px);
		--font-size-h2: clamp(22px, calc(22 * var(--dpx)), 36px);
		--font-size-h3: clamp(14px, calc(18 * var(--dpx)), 25px);

		--footer-font-size: clamp(14px, calc(14 * var(--dpx)), 16px);
	}

	.header-side-content {
		display: none;
	}

	.window-edge-squigles {
		right: -25px;
		transform: scale(0.6);
	}

	.btn-secondary.slanted.has-icon img {
		width: 24px;
		height: 24px;
		right: 32px;
		display: block !important;
	}

	.btn-secondary.slanted {
		/* width: 100%; */
		padding: 12px 32px;
		clip-path: polygon(
			24px 0%,
			/* top left cut (comes in from left) */ 100% 0%,
			/* top right */ 100% calc(100% - 12px),
			/* bottom right inset */ calc(100% - 24px) 100%,
			/* bottom right cut */ 0% 100%,
			/* bottom left */ 0% 12px /* top left side inset */
		);
	}

	.btn-secondary.slanted.has-icon {
		padding: 12px 76px 12px 32px !important;
	}
}

@media screen and (max-width: 380px) {
	:root {
		--dpx: calc(100vw / 380);

		--header-font-size: calc(16 * var(--dpx));
		--header-dropdown-font-size: calc(14 * var(--dpx));

		--btn-outline-font-size: calc(14 * var(--dpx));
		--btn-secondary-font-size: calc(15.125 * var(--dpx));

		--font-size-text: calc(14 * var(--dpx)) !important;

		--font-size-h1: calc(25 * var(--dpx));
		--font-size-h2: calc(22 * var(--dpx));
		--font-size-h3: calc(18 * var(--dpx));

		--footer-font-size: calc(14 * var(--dpx));
	}

	* {
		hyphens: auto;
	}

	.dynamic-content {
		line-height: var(--font-size-h1) !important;
	}

	.btn-secondary,
	.btn-outline {
		line-height: var(--font-size-h3) !important;
	}

	.btn-secondary.slanted.has-icon {
		padding: 10px 6px !important;
		min-width: 0 !important;
		width: 100% !important;
		display: flex;
		justify-content: centerß;
	}

	.btn-secondary.slanted.has-icon img {
		display: none !important;
	}

	.btn-secondary.slanted {
		width: 100% !important;
		padding: 12px;
	}
}

.header .header-content h1,
.header .dynamic-content {
	overflow-wrap: break-word; /* modern, preferred */
	word-wrap: break-word; /* legacy support */
}

.header .header-content h1 {
	hyphens: auto;
}