/*
 * Base: fonts, colors, reset, text, media, form elements, pressables, structure, grid, sections, helpers
 */

/* Fonts */

/* Default */
:root {
	--font-fallback: BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-sans;
	--color-dark: #1C1F20;
	--color-text: #374151;
	--color-grey: #6B7280;
	--color-grey-light: #D7DAE2;
	--color-border: #E5E7E7;
	--color-background-grey: #F4F5F6;
	--color-background-light: #F7F9FA;
	--color-teal: #006C75;
	--color-teal-hover: #1A8A93;
	--color-teal-light: #B3D3D6;
	--color-white: #FFFFFF;
	--radius-small: 0.5rem; /* 8px */
	--radius-medium: 0.75rem; /* 12px */
	--radius-large: 1rem; /* 16px */
	--field-height: 3.125rem; /* 50px */
	--searchbox-width: 50rem; /* 800px */
	--section-space: calc(2rem + 2.5vw); /* Between sections (and inside the ones with a background) */
	--container-width: 0.99999999;
	--base-gutter-width: 1.5rem;
	--container-gutter-width: calc(var(--base-gutter-width) + max(env(safe-area-inset-right), env(safe-area-inset-left)));
	--row-gutter-width: calc(var(--base-gutter-width) / 2);
	--nav-height: 4.5rem; /* Real height of the navigation, measured by js/components/navigation.js (this is the default until then) */
	--window-height: 100vh;
	--window-scrollbar-width: 0px;
}
@media (min-width: 992px) { /* When will the Navigation expand */
	:root {
		--nav-height: 4.4375rem;
	}
}

:focus {
	outline: none;
}

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

* {
	text-shadow: none;
}

html {
	scroll-padding-top: calc(var(--admin-bar-height, 0px) + 1.5rem); /* Anchors and scrollIntoView() below the WP admin bar */
	-webkit-text-size-adjust: 100%;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	font-size: 16px;
	line-height: 1.15;
}
@media (min-width: 2560px) {
	html {
		font-size: 0.625vw;
	}
}

body {
	margin: 0;
	background-color: var(--color-white);
	color: var(--color-text);
	font-family: 'Poppins', var(--font-fallback);
	font-size: 1em;
	font-style: normal;
	font-stretch: 100%;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0em;
	text-align: left;
	--admin-bar-height: 0px;
}
body.admin-bar {
	--admin-bar-height: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar {
		--admin-bar-height: 46px;
	}
}
body.nav-open,
body.popup-open {
	overflow: hidden;
}
html.scrollbar body.nav-open,
html.scrollbar body.popup-open {
	padding-right: var(--window-scrollbar-width);
}

/* Text Elements */
h1,
h2,
h3,
h4,
h5,
.as-h5,
h6 {
	display: block;
	margin-top: 0;
	margin-bottom: 0;
	color: var(--color-dark);
	font-family: inherit;
	font-weight: 500;
	font-style: normal;
	line-height: 1.25;
}
h1 {
	font-size: 2.125rem;
	font-weight: 600;
}
h2 {
	font-size: 1.5rem;
	font-weight: 600;
}
h3 {
	font-size: 1.375rem;
	line-height: 1.33333333;
}
h4 {
	font-size: 1.125rem;
	line-height: 1.33333333;
}
h5, .as-h5 {
	font-size: 1rem;
	line-height: 1.5;
}
h6 {
	font-size: 0.875rem;
	line-height: 1;
	text-transform: uppercase;
}
.as-body {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-transform: none;
}
@media (max-width: 991.98px) {
	h1 {
		font-size: 1.75rem;
	}
}

p {
	margin-top: 0;
	margin-bottom: 0;
}

ul, ol {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 1.125em;
}

blockquote {
	position: relative;
	margin: 0;
	padding: 0.5em 1.5em 0.5em calc(1.5em + 0.0625rem);
}
blockquote:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0.375rem;
	background-color: var(--color-teal);
	border-radius: 0.1875rem;
}

strong, b {
	font-weight: 600;
}

abbr {
	border: 0 !important;
	color: red;
	font-weight: 700;
	text-decoration: none;
	visibility: hidden;
}
abbr.required {
	visibility: visible;
}

pre {
	margin: 0;
	font-family: monospace, monospace;
	font-size: 1em;
	white-space: pre-wrap;
}

hr {
	margin-top: 0;
	margin-bottom: 0;
	border: none;
	border-bottom: 0.0625rem solid currentColor;
}

/* Media Elements */
figure {
	margin: 0;
}
figcaption {
	font-size: 0.875rem;
}

picture {
	display: block;
	width: 100%;
}

img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-style: none;
}

svg {
	display: block;
	width: 100%;
	height: auto;
	border: none;
	pointer-events: none;
}

iframe {
	display: block;
}
/* Form Elements */
form {
	margin-bottom: 0;
}

label {
	display: block;
	font-size: 1em;
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.6875rem 0.75rem 0.5625rem;
	background-color: var(--color-white);
	border-color: var(--color-border);
	border-width: 0.125rem;
	border-style: solid;
	border-radius: 0.5rem;
	color: var(--color-dark);
	font-family: inherit;
	font-size: 1rem;
	font-style: inherit;
	font-weight: inherit;
	line-height: 1.25;
	text-align: left;
	transition: none;

	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
}

textarea {
	min-width: 100%;
	max-width: 100%;
	min-height: calc((1em * 1.25) + (0.75rem * 2) + 0.125rem);
	max-height: calc((1em * 1.25) * 16 + (0.75rem * 2) + 0.125rem);
}

::placeholder {
	color: var(--color-grey-light);
	font-weight: 400;
	opacity: 1;
}
:-ms-input-placeholder {
	color: var(--color-grey-light);
	font-weight: 400;
	opacity: 1;
}
::-ms-input-placeholder {
	color: var(--color-grey-light);
	font-weight: 400;
	opacity: 1;
}

/* Pressable Elements */
a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.25s ease;
}
a:active {
	color: inherit;
}
a:focus {
	outline-offset: 0;
}
a:hover {
	opacity: 0.5;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
	display: inline;
	position: relative;
	margin: 0;
	width: auto;
	padding: 0;
	background-color: transparent;
	border-color: initial;
	border-width: 0;
	border-style: none;
	color: inherit;
	font-family: inherit;
	font-size: 1em;
	font-style: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: normal;
	text-align: left;
	cursor: pointer;
	transition: opacity 0.25s ease;

	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
}
button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
	border-style: none;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
	opacity: 0.5;
}

a.as-button,
button.as-button,
input[type="button"].as-button,
input[type="submit"].as-button,
input[type="reset"].as-button {
	display: inline-block;
	padding: 0.625rem 1.25rem;
	background-color: var(--color-teal);
	border: 0.125rem solid var(--color-teal);
	border-radius: calc(1em * 1.25 + 0.6875rem);
	color: var(--color-white);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	text-transform: none;
	white-space: nowrap;
	transition-property: background-color, border-color;
}
a.as-button:hover,
button.as-button:hover,
input[type="button"].as-button:hover,
input[type="submit"].as-button:hover,
input[type="reset"].as-button:hover {
	background-color: var(--color-teal-hover);
	border-color: var(--color-teal-hover);
	opacity: 1;
}
a.as-button.button-empty,
button.as-button.button-empty,
input[type="button"].as-button.button-empty,
input[type="submit"].as-button.button-empty,
input[type="reset"].as-button.button-empty {
	background-color: transparent;
	color: var(--color-teal);
	transition-property: background-color, color;
}
a.as-button.button-empty:hover,
button.as-button.button-empty:hover,
input[type="button"].as-button.button-empty:hover,
input[type="submit"].as-button.button-empty:hover,
input[type="reset"].as-button.button-empty:hover {
	background-color: var(--color-teal);
	border-color: var(--color-teal);
	color: var(--color-white);
}
a.as-button.button-invert,
button.as-button.button-invert,
input[type="button"].as-button.button-invert,
input[type="submit"].as-button.button-invert,
input[type="reset"].as-button.button-invert {
	background-color: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-teal);
	transition-property: background-color;
}
a.as-button.button-invert:hover,
button.as-button.button-invert:hover,
input[type="button"].as-button.button-invert:hover,
input[type="submit"].as-button.button-invert:hover,
input[type="reset"].as-button.button-invert:hover {
	background-color: var(--color-grey-light);
	border-color: var(--color-grey-light);
	color: var(--color-teal);
}
a.as-button.button-empty.button-invert,
button.as-button.button-empty.button-invert,
input[type="button"].as-button.button-empty.button-invert,
input[type="submit"].as-button.button-empty.button-invert,
input[type="reset"].as-button.button-empty.button-invert {
	background-color: transparent;
	border-color: var(--color-white);
	color: var(--color-white);
	transition-property: background-color, border-color, color;
}
a.as-button.button-empty.button-invert:hover,
button.as-button.button-empty.button-invert:hover,
input[type="button"].as-button.button-empty.button-invert:hover,
input[type="submit"].as-button.button-empty.button-invert:hover,
input[type="reset"].as-button.button-empty.button-invert:hover {
	background-color: var(--color-teal);
	border-color: var(--color-teal);
	color: var(--color-white);
}

/* Main Structure */
main.main {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	width: 100%;
	min-height: calc(var(--window-height) - var(--admin-bar-height));
	background-color: inherit;
}
main.main > .main-body {
	align-self: flex-start;
	flex: 0 0 auto;
	position: relative;
	width: 100%;
	padding-top: var(--nav-height); /* Below the navigation, which is over the top of the page (css/components/navigation.css) */
	background-color: inherit;
	z-index: 1;
}
main.main > .main-footer {
	align-self: flex-end;
	flex: 0 0 auto;
	position: relative;
	width: 100%;
	background-color: inherit;
	z-index: 2;
}

/* Grid Structure */
.container-fluid {
	position: relative;
	width: 100%;
	padding-left: var(--container-gutter-width);
	padding-right: var(--container-gutter-width);
}
.container {
	--container-width: 0.99999999;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	width: calc(100% * var(--container-width));
	max-width: calc(75rem + var(--container-gutter-width) * 2);
	padding-left: var(--container-gutter-width);
	padding-right: var(--container-gutter-width);
}
.container.smaller {
	max-width: calc(54rem + var(--container-gutter-width) * 2);
}
@media (min-width: 1536px) {
	.container {
		--container-width: 0.9;
	}
}
.row {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: calc(var(--row-gutter-width) / -0.5);
	margin-left: calc(var(--row-gutter-width) * -1);
	margin-right: calc(var(--row-gutter-width) * -1);
}
.row > * {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-left: var(--row-gutter-width);
	padding-right: var(--row-gutter-width);
}
.col {
	flex: 0 0 auto;
	position: relative;
	margin-bottom: calc(var(--row-gutter-width) / 0.5);
}

/*
 * Sections: the same space (--section-space) between all sections, also after the hero and the parts that belong to it (breadcrumbs, back link)
 * Section with a background (.has-background: color, padding inside) right after another one with a background (the hero has one, except on profiles): no space, so there is no white gap between them
 */
section.section {
	position: relative;
	z-index: 1;
}
* + section.section {
	margin-top: var(--section-space);
}
:is(section.hero:not(.is-user-profile), .has-background) + section.section.has-background {
	margin-top: 0;
}
section.section.has-background {
	padding-top: var(--section-space);
	padding-bottom: var(--section-space);
	background-color: var(--color-background-light);
}
:is(section.hero, section.section):last-child {
	margin-bottom: var(--section-space);
}

/* Presables */
* + .pressables {
	margin-top: calc(1rem + 1.25vw);
}
.editor-content * + .pressables {
	margin-top: 2rem;
}
.pressables {
	--row-gutter-width: 0.375rem;
}
.pressables:not(.pressables-full) > .pressable {
	width: auto;
}
.pressable > a,
.pressable > button,
.pressable > input[type="button"],
.pressable > input[type="submit"],
.pressable > input[type="reset"],
.pressable > .as-button {
	display: block;
}

/* Random Helper Elements */

/* Lazy Elements */
img.lazy,
picture.lazy > img,
iframe.lazy,
video.lazy {
	opacity: 0;
}

/* Admin Bar */
html #wpadminbar {
	position: fixed;
}
html.scrollbar body.nav-open #wpadminbar,
html.scrollbar body.popup-open #wpadminbar{
	padding-right: var(--window-scrollbar-width);
}
div#wp-toolbar {
	display: flex !important;
	justify-content: space-between !important;
}
div#wp-toolbar > ul {
	display: flex !important;
}
div#wp-toolbar > ul > li {
	float: none !important;
}

html.sb-fullscreen-open,
html.sb-fullscreen-open body {
	overflow: hidden;
}

/* Icons (inc/components.php: visitteo_icon()) and screen reader texts */
span.icon {
	display: inline-block;
	line-height: 0;
}
span.icon > svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible; /* The view boxes end at the edge of the drawing, antialiased edges are not cut off */
}

.screen-reader-text {
	position: absolute !important;
	width: 0.0625rem;
	height: 0.0625rem;
	margin: -0.0625rem;
	padding: 0;
	border: 0;
	clip: rect(0, 0, 0, 0);
	overflow: hidden;
	white-space: nowrap;
}