/*--------------------------------------------------------------
>>> NORMALIZING STYLES
--------------------------------------------------------------*/

/* Document
--------------------------------------------- */

/**
 * Enables smooth font rendering on macOS and WebKit browsers for better text appearance.
 */
html {
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

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

*:focus-visible {
	outline: none;
}

/**
 * 1. Remove the margin in all browsers.
 * 2. Improves font rendering on macOS and WebKit browsers for smoother, clearer text display.
 */
body {
	margin: 0;
	width: 100%;
	overflow-x: hidden;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/* Links
--------------------------------------------- */
a {
	text-decoration: none;
	transition: var(--wp--custom--properties--transition-element);
}

a:not(.button) {
	color: var(--wp--preset--color--contrast);
	outline: 0;
}

a:not(.button):hover,
a:not(.button):focus,
a:not(.button):active {
	color: var(--wp--preset--color--primary);
}

/* b
--------------------------------------------- */

b {
	font-weight: 700;
}

/* Strong
--------------------------------------------- */

strong {
	font-weight: 500;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
	outline: 0;
	box-sizing: border-box;
	background: none;
}

/* Fieldset
========================================================================== */

fieldset {
	margin: 0;
	padding: 30px;
}

/**
 * Cursor pointer
 */
select {
	cursor: pointer
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/* Input
--------------------------------------------- */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="range"],
textarea {
	line-height: 150%;
	padding: 16px 24px;
	border: none;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--grey);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="range"]:focus,
textarea:focus {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--contrast);
}

input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

input[type="search"]::-ms-clear {
	display: none;
	width: 0;
	height: 0;
}

/* Label
--------------------------------------------- */

.label {
	color: var(--wp--preset--color--grey-dark);
	font-size: 12px;
	line-height: 16px;
	display: flex;
	flex-wrap: nowrap;
}

.label .required {
	margin: 0 0 0 3px;
}

/* Titles
--------------------------------------------- */

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
	margin-top: 0;
	margin-bottom: 0;
}

h1,
.h1 {
	font-size: clamp(48px, 4.5vw, var(--wp--custom--properties--h-1));
	line-height: 115%;
	font-weight: 500;
}

h2,
.h2 {
	font-size: clamp(32px, 4vw, var(--wp--custom--properties--h-2));
	line-height: 120%;
	font-weight: 500;
}

h3,
.h3 {
	font-size: var(--wp--preset--font-size--24);
	font-style: normal;
	font-weight: 500;
	line-height: 1.3;
}

h4,
.h4 {
	font-size: var(--wp--preset--font-size--24);
	font-style: normal;
	font-weight: 700;
	line-height: 1.5;
}

/* Subtitle
--------------------------------------------- */

.subtitle {
	color: var(--wp--preset--color--primary);
	font-size: 24px;
	font-weight: 500;
	line-height: 150%;
	text-transform: uppercase;
}

/* List ul
--------------------------------------------- */

ul {
	padding-left: 20px;
}

ul li {
	margin-bottom: 8px;
}

ul li::marker {
	color: var(--wp--preset--color--primary);
}

ul li:last-child {
	margin-bottom: 0;
}

/* List ol
--------------------------------------------- */

ol {
	list-style: none;
	padding-left: 0;
}

ol li {
	min-height: 24px;
	padding-left: 36px;
	margin-bottom: 20px;
	position: relative;
}

ol li::before {
	color: var(--wp--preset--color--white);
	text-align: center;
	content: counter(list-item);
	display: inline-block;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 0;
	background: var(--wp--preset--color--primary);
}

/* Table
--------------------------------------------- */

table {
	width: 100%;
	border-collapse: collapse;
}

table {
	border: 1px solid var(--wp--preset--color--grey);
	overflow: hidden;
}

table th,
table td {
	border: 1px solid var(--wp--preset--color--grey);
	padding: 16px 24px;
	vertical-align: top;
	text-align: left;
}

table thead th {
	font-weight: 600;
	background-color: var(--wp--preset--color--base);
}

table td p {
	margin: 0
}

/* Search
--------------------------------------------- */

.content .search-form {
	display: flex;
	flex-direction: row;
}

.content .search-form .search-submit {
	margin-left: -1px;
}

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation li {
	position: relative;
	margin: 0;
}

.main-navigation ul.menu {
	display: flex;
	justify-content: space-between;
}

.main-navigation ul.menu > li {
	position: relative;
	margin: 0;
}

.main-navigation a {
	font-weight: 300;
	text-transform: uppercase;
	display: flex;
	text-decoration: none;
}

.menu-toggle {
	display: block;
}

.menu-toggle {
	padding: 0;
	box-shadow: none;
}

.menu-toggle:hover {
	background: none;
}

.main-navigation ul.menu li a,
.main-navigation ul.menu li span {
	flex-direction: row;
	align-items: center;
	gap: 6px;
}

.main-navigation ul.menu ul.sub-menu {
	display: flex;
	flex-direction: column;
	gap: 0;
	top: 100%;
	left: 0;
	position: absolute;
	list-style: none;
	padding: 0 20px;
	min-width: 220px;
	max-width: 320px;
	width: max-content;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
	background-color: var(--wp--preset--color--white);
	opacity: 0;
	visibility: hidden;
	transition: var(--wp--custom--properties--transition-item);
	box-sizing: content-box;
	z-index: 19;
}

.main-navigation .sub-menu > li {
	display: flex;
}

.main-navigation .sub-menu > li > a,
.main-navigation .sub-menu > li > span {
	font-weight: 400;
	text-transform: none;
	display: flex;
	width: 100%;
	padding: 32px 32px 32px 16px;
	border-bottom: 1px solid var(--wp--preset--color--grey)
}

.main-navigation .sub-menu > li:last-child > a,
.main-navigation .sub-menu > li:last-child > span {
	border: 0
}

@media screen and (min-width: 992px) {
	.main-navigation ul.menu ul.sub-menu {
		transition: var(--wp--custom--properties--transition-element);
	}

	.main-navigation ul.menu > li > ul.sub-menu {
		top: 100%;
		left: 0;
		overflow-y: auto;
		overflow-x: hidden;
		max-height: 80vh;
		scrollbar-width: thin;
	}

	.main-navigation ul.menu ul.sub-menu {
		top: 0;
		left: calc(100% + 20px);
	}

	.main-navigation ul.menu li.menu-item-has-children:hover > .sub-menu {
		opacity: 1;
		visibility: visible;
	}

	ul.menu > li.menu-item-has-children > a,
	ul.menu > li.menu-item-has-children > span {
		padding-right: 20px;
	}

	ul.menu > li.menu-item-has-children > a > .menu-icon,
	ul.menu > li.menu-item-has-children > span > .menu-icon {
		right: 0
	}
}

/* Сollapsible
--------------------------------------------- */

.collapsible {
	padding: 0;
	margin: 0;
	list-style: none;
}

.collapsible ul {
	margin: 0
}

.collapsible > * {
	padding: 32px 16px;
}

.collapsible > * > a,
.collapsible .collapsible-label {
	font-weight: 700;
}

.collapsible > *:not(:first-child) {
	border-top: 1px solid var(--wp--preset--color--grey);
}

.collapsible > *:last-child {
	border-bottom: 1px solid var(--wp--preset--color--grey);
}

.collapsible .collapsible-group {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	margin: 0;
	position: relative;
	user-select: none;
	cursor: pointer;
}

.collapsible .collapsible-group > .collapsible-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 14px;
	width: 14px;
	padding: 5px;
	margin-right: -5px;
	right: 16px;
	position: absolute;
	transition: var(--wp--custom--properties--transition-element);
	box-sizing: content-box;
}

.collapsible .collapsible-group > .collapsible-icon,
.collapsible .collapsible-group > .collapsible-icon path {
	transition: var(--wp--custom--properties--transition-element);
}

.collapsible .collapsible-group.active > .collapsible-icon {
	transform: rotate(180deg);
}

.collapsible .collapsible-group.active > .collapsible-icon path {
	fill: var(--wp--preset--color--primary);
}

.collapsible .collapsible-items {
	list-style: none;
	display: none;
	flex-direction: column;
	width: 100%;
	padding: 0 20px;
	gap: 8px;
}

.collapsible .collapsible-group.active > .collapsible-items {
	display: block;
}

.collapsible .collapsible-items > * {
	margin-top: 8px
}

.collapsible .collapsible-items > *:first-child {
	margin-top: 16px;
}

.collapsible-item label {
	user-select: none;
}

/* Button
--------------------------------------------- */

button,
.button,
input[type="submit"] {
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--16);
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	text-transform: uppercase;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	max-width: 100%;
	padding: 16px 32px;
	position: relative;
	gap: 12px;
	border-radius: 0;
	border: none;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--contrast);
	transition: var(--wp--custom--properties--transition-item);
	cursor: pointer;
	user-select: none;
}

button[disabled],
button.disabled,
.button.disabled,
input[type="submit"].disabled {
	opacity: 0.4;
	pointer-events: none;
}

@media screen and (min-width: 769px) {
	button:hover,
	.button:hover,
	input[type="submit"]:hover {
		color: var(--wp--preset--color--white);
		text-decoration: none;
		background: var(--wp--preset--color--contrast);
	}
}

/* Button With Icon
--------------------------------------------- */

button.has-icon::after,
.button.has-icon::after,
input[type="submit"].button.has-icon::after {
	content: '';
	top: 50%;
	right: 10px;
	width: 25px;
	height: 8px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml;utf8,<svg width='25' height='8' viewBox='0 0 25 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M24.3536 4.35355C24.5488 4.15829 24.5488 3.84171 24.3536 3.64645L21.1716 0.464466C20.9763 0.269204 20.6597 0.269204 20.4645 0.464466C20.2692 0.659728 20.2692 0.976311 20.4645 1.17157L23.2929 4L20.4645 6.82843C20.2692 7.02369 20.2692 7.34027 20.4645 7.53553C20.6597 7.7308 20.9763 7.7308 21.1716 7.53553L24.3536 4.35355ZM0 4V4.5H24V4V3.5H0V4Z' fill='%2313100D'/></svg>");
	transition: var(--wp--custom--properties--transition-item);
}

@media screen and (min-width: 769px) {
	button.has-icon:hover::after,
	.button.has-icon:hover::after,
	input[type="submit"].button.has-icon:hover::after {
		background-image: url("data:image/svg+xml;utf8,<svg width='25' height='8' viewBox='0 0 25 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M24.3536 4.35355C24.5488 4.15829 24.5488 3.84171 24.3536 3.64645L21.1716 0.464466C20.9763 0.269204 20.6597 0.269204 20.4645 0.464466C20.2692 0.659728 20.2692 0.976311 20.4645 1.17157L23.2929 4L20.4645 6.82843C20.2692 7.02369 20.2692 7.34027 20.4645 7.53553C20.6597 7.7308 20.9763 7.7308 21.1716 7.53553L24.3536 4.35355ZM0 4V4.5H24V4V3.5H0V4Z' fill='%23ffffff'/></svg>");
	}
}

/* Button Fill
--------------------------------------------- */

.button.fill {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--contrast);
}

.button.fill.has-icon::after {
	background-image: url("data:image/svg+xml;utf8,<svg width='25' height='8' viewBox='0 0 25 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M24.3536 4.35355C24.5488 4.15829 24.5488 3.84171 24.3536 3.64645L21.1716 0.464466C20.9763 0.269204 20.6597 0.269204 20.4645 0.464466C20.2692 0.659728 20.2692 0.976311 20.4645 1.17157L23.2929 4L20.4645 6.82843C20.2692 7.02369 20.2692 7.34027 20.4645 7.53553C20.6597 7.7308 20.9763 7.7308 21.1716 7.53553L24.3536 4.35355ZM0 4V4.5H24V4V3.5H0V4Z' fill='%23ffffff'/></svg>");
}

@media screen and (min-width: 769px) {
	.button.fill:hover {
		color: var(--wp--preset--color--contrast);
		background: none;
	}

	.button.fill.has-icon:hover::after {
		background-image: url("data:image/svg+xml;utf8,<svg width='25' height='8' viewBox='0 0 25 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M24.3536 4.35355C24.5488 4.15829 24.5488 3.84171 24.3536 3.64645L21.1716 0.464466C20.9763 0.269204 20.6597 0.269204 20.4645 0.464466C20.2692 0.659728 20.2692 0.976311 20.4645 1.17157L23.2929 4L20.4645 6.82843C20.2692 7.02369 20.2692 7.34027 20.4645 7.53553C20.6597 7.7308 20.9763 7.7308 21.1716 7.53553L24.3536 4.35355ZM0 4V4.5H24V4V3.5H0V4Z' fill='%2313100D'/></svg>");
	}
}

/* Button Light
--------------------------------------------- */

.button.light {
	color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--white);
}

.button.light.has-icon::after {
	background-image: url("data:image/svg+xml;utf8,<svg width='25' height='8' viewBox='0 0 25 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M24.3536 4.35355C24.5488 4.15829 24.5488 3.84171 24.3536 3.64645L21.1716 0.464466C20.9763 0.269204 20.6597 0.269204 20.4645 0.464466C20.2692 0.659728 20.2692 0.976311 20.4645 1.17157L23.2929 4L20.4645 6.82843C20.2692 7.02369 20.2692 7.34027 20.4645 7.53553C20.6597 7.7308 20.9763 7.7308 21.1716 7.53553L24.3536 4.35355ZM0 4V4.5H24V4V3.5H0V4Z' fill='%23ffffff'/></svg>");
}

@media screen and (min-width: 769px) {
	.button.light:hover {
		color: var(--wp--preset--color--contrast);
		box-shadow: inset 0 0 0 1px var(--wp--preset--color--white);
		background: var(--wp--preset--color--white);
	}

	.button.light.has-icon:hover::after {
		background-image: url("data:image/svg+xml;utf8,<svg width='25' height='8' viewBox='0 0 25 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M24.3536 4.35355C24.5488 4.15829 24.5488 3.84171 24.3536 3.64645L21.1716 0.464466C20.9763 0.269204 20.6597 0.269204 20.4645 0.464466C20.2692 0.659728 20.2692 0.976311 20.4645 1.17157L23.2929 4L20.4645 6.82843C20.2692 7.02369 20.2692 7.34027 20.4645 7.53553C20.6597 7.7308 20.9763 7.7308 21.1716 7.53553L24.3536 4.35355ZM0 4V4.5H24V4V3.5H0V4Z' fill='%2313100D'/></svg>");
	}
}

/* Button Text
--------------------------------------------- */

button.text,
.button.text {
	padding: 0;
	border: 0;
	box-shadow: none;
}

@media screen and (min-width: 769px) {
	button.text:hover,
	.button.text:hover {
		color: var(--wp--preset--color--primary);
		background: none;
	}

	button.text:hover::after,
	.button.text:hover::after {
		background-image: url("data:image/svg+xml;utf8,<svg width='25' height='8' viewBox='0 0 25 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M24.3536 4.35355C24.5488 4.15829 24.5488 3.84171 24.3536 3.64645L21.1716 0.464466C20.9763 0.269204 20.6597 0.269204 20.4645 0.464466C20.2692 0.659728 20.2692 0.976311 20.4645 1.17157L23.2929 4L20.4645 6.82843C20.2692 7.02369 20.2692 7.34027 20.4645 7.53553C20.6597 7.7308 20.9763 7.7308 21.1716 7.53553L24.3536 4.35355ZM0 4V4.5H24V4V3.5H0V4Z' fill='%237c1a14'/></svg>");
	}
}

/* Button Blur
--------------------------------------------- */

.button.blur {
	color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--white);
	background: rgba(255, 255, 255, .15);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

@media screen and (min-width: 769px) {
	.button.blur:hover {
		color: var(--wp--preset--color--contrast);
		box-shadow: inset 0 0 0 1px var(--wp--preset--color--white);
		background: var(--wp--preset--color--white);
	}
}

/* Button Loader
--------------------------------------------- */

.loading,
.loading.has-icon {
	color: transparent;
}

.loading > *,
.loading.has-icon > * {
	opacity: 0;
}

.loading::before,
.loading.has-icon::before {
	content: "";
	height: 30px;
	width: 30px;
	background: url("../icons/loader.svg");
	background-size: 30px;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	animation: loader 0.8s linear infinite;
	pointer-events: none;
	cursor: default;
}

.loading::after {
	opacity: 0;
}

@media screen and (min-width: 769px) {
	.loading:hover,
	.loading.has-icon:hover {
		color: transparent;
		background: none;
	}
}

@keyframes loader {
	to { transform: rotate(360deg); }
}

/* Switch
--------------------------------------------- */

.switch {
	display: flex;
	align-items: center;
}

.switch-label {
	display: flex;
	flex-direction: row;
	gap: 8px;
	position: relative;
}

.switch input {
	opacity: 0;
	visibility: hidden;
	display: none;
}

.switch input:checked + .switch-slider {
	background-color: var(--wp--preset--color--contrast);
}

.switch input:checked + .switch-slider:before {
	transform: translateX(24px);
}

.switch-slider {
	height: 24px;
	width: 48px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: relative;
	border-radius: 20px;
	background-color: var(--wp--preset--color--grey);
	transition: var(--wp--custom--properties--transition-element);
	cursor: pointer;
}


.switch-slider:before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 4px;
	bottom: 4px;
	background-color: var(--wp--preset--color--base);
	transition: 0.4s;
	border-radius: 50%;
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}

.switch-text {
	margin-left: 10px;
}

/* Checkbox
--------------------------------------------- */

.checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-left: 24px;
	position: relative;
	user-select: none;
	cursor: pointer;
}

.checkbox input[type="checkbox"] {
	height: 0;
	width: 0;
	top: 3px;
	left: 0;
	position: absolute;
}

.checkbox input[type="checkbox"]::before {
	content: '';
	height: 16px;
	width: 16px;
	position: absolute;
	border: 1px solid var(--wp--preset--color--contrast);
	box-sizing: border-box;
	background: transparent;
	background-size: 12px;
	background-position: center;
	background-repeat: no-repeat;
	transition: var(--wp--custom--properties--transition-element);
	pointer-events: none;
}

.checkbox input[type="checkbox"]:checked::before {
	background: var(--wp--preset--color--contrast)
				url('data:image/svg+xml;utf8,<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.93869 10L0 6.00386L1.79493 4.18275L3.93869 6.36422L10.2051 0L12 1.82111L3.93869 10Z" fill="white"/></svg>');
	background-size: 12px;
	background-position: center;
	background-repeat: no-repeat;
}

/* Comment
--------------------------------------------- */

#comments {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.commentlist {
	display: flex;
	flex-direction: column;
	list-style: none;
	padding: 0
}

.commentlist > li {
	display: flex;
	padding: 30px 0;
	border-bottom: 1px solid var(--wp--preset--color--grey-dark);
}

.commentlist > li:first-child {
	border-top: 1px solid var(--wp--preset--color--grey-dark);
}

.commentlist > li p {
	margin: 0;
}