/* Utility classes */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: no-wrap;
	border: 0;
}

.disabled {
	pointer-events: none;
	cursor: not-allowed;
	opacity: 0.5 !important;
}

.align-center {
	text-align: center;
}

main {
	padding-bottom: calc(5em + 1vh); /* Footer height */
}

.lock-scroll {
	overflow: hidden;
}

.flex {
	display: flex;
	gap: var(--flex-gap, 1rem);
}

.container {
	width: var(--container-width-mobile);
	margin: 0 auto;
}

.center-text {
	text-align: center;
}

.justify-center {
	justify-content: center;
}

.fw-regular {
	font-weight: var(--fw-regular);
}

.fw-bold {
	font-weight: var(--fw-bold);
}

.ff-heading {
	font-family: var(--ff-heading);
}

.clr-primary-text {
	color: var(--clr-font);
}

.fs-300 {
	font-size: var(--fs-300);
}
.fs-400 {
	font-size: var(--fs-400);
}
.fs-500 {
	font-size: var(--fs-500);
}
.fs-600 {
	font-size: var(--fs-600);
}
.fs-700 {
	font-size: var(--fs-700);
}
.fs-800 {
	font-size: var(--fs-800);
}
.fs-900 {
	font-size: var(--fs-900);
}

.fs-page-title {
	font-size: var(--fs-page-title);
	text-align: center;
}

q {
	font-style: italic;
}

input,
textarea {
	font-size: var(--fs-400);
}

strong {
	font-weight: var(--fw-bold);
}

a {
	text-decoration: none;
	color: var(--clr-primary-400);

	transition: 250ms color ease-out;
}

a:hover {
	color: var(--clr-primary-300);
}

.btn {
	display: inline-block;
	background-color: var(--clr-primary-400);
	color: var(--clr-font);
	text-decoration: none;
	padding: 0.9em 1.5em;
	font-size: var(--fs-400);

	transition: background-color 250ms ease-out;
}

.btn:hover {
	background-color: var(--clr-primary-300);
	color: var(--clr-font);
}

.btn--invert {
	border: 1px solid var(--clr-primary-400);
	background-color: transparent;
	color: var(--clr-primary-400);
}

.section-margin {
	margin: 3em 0;
}

.paragraph {
	margin-bottom: 1.6em;
	line-height: 1.5;
	font-size: var(--fs-400);
}

.list__item {
	margin-bottom: 0.6em;
}

.list__item:last-of-type {
	margin-bottom: 1.6em;
}

.list {
	list-style-type: circle;
	padding-left: 1rem;
	font-size: var(--fs-400);
}

.section-heading {
	text-align: center;
	padding: 1.5em 0;
}

.grid {
	display: grid;
	grid-template-rows: auto;
}

/* page.css */

.page__title {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 6em 0;
}

section {
	scroll-margin-top: 5rem;
}

/* Section divider */

.section-divider {
	background-color: var(--clr-accent);
	position: relative;
}

.section-divider::before {
	content: "";
	width: 100%;
	height: 4px;
	background-color: var(--clr-bg-primary);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.polygon-top {
	height: 5em;
	background-color: hsl(201, 20%, 23%);
	clip-path: polygon(
		calc(100% + var(--a)) calc(100% - var(--a)),
		50% 100%,
		calc(0% - var(--a)) calc(100% - var(--a)),
		0 calc(100% - var(--a))
	);
}

.polygon-bottom {
	height: 14em;
	background-color: hsl(133, 18%, 59%);
	margin-top: calc(var(--g) - var(--a));
	clip-path: polygon(
		0 0,
		calc(0% - var(--a) - 0.414 * var(--g)) 0,
		50% calc(var(--a) + 0.414 * var(--g)),
		calc(100% + var(--a) + 0.414 * var(--g)) 0,
		100% 0,
		100% 100%,
		0 100%
	);
}

/* Skip nav link */

.skip-nav-link {
	position: absolute;
	padding: 1rem;
	background-color: var(--clr-bg-primary);
	color: var(--clr-font);
	transform: translateY(-120%);
	transition: transform 0.4s ease-in;
}
.skip-nav-link:focus {
	transform: translateY(0);
	z-index: 1000;
}

/* Primary header */

.logo {
	text-decoration: none;
	font-size: var(--fs-logo);
}

.primary-header {
	background-color: var(--clr-primary-400);
	padding: 2em 0;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 999;
	/* transition: 250ms background-color ease-in-out;*/

	display: flex;
	align-items: center;
	height: calc(4.7rem + 2vh);

	animation: NavLoad var(--nav-load-time) ease-in;
}

.nav-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Hamburger menu */

.mobile-nav-toggle {
	display: none;

	border: none;
	background-color: transparent;
	cursor: pointer;
	width: 30px;
	height: 30px;
	padding: 0;
}

.hamburger-icon {
	position: relative;
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
	width: 30px;
	height: 2px;
	background-color: var(--clr-bg-accent);
	border-radius: 3px;
	transition: all 350ms ease-in-out;
}

.hamburger-icon::before,
.hamburger-icon::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
}

.hamburger-icon::before {
	transform: translateY(-9px);
}

.hamburger-icon::after {
	transform: translateY(9px);
}

.open .hamburger-icon::before {
	transform: rotate(-45deg);
}

.open .hamburger-icon {
	background-color: transparent;
	transform: rotate(0.75turn);
}

.open .hamburger-icon::after {
	transform: rotate(45deg);
}

/* Nav list */

.nav-list a {
	text-decoration: none;
	text-transform: uppercase;
	font-size: var(--fs-400);
	color: var(--clr-font);
}

/* Mobile menu */

@media (max-width: 1100px) {
	.primary-navigation {
		position: fixed;
		inset: calc(4.7rem + 2vh) 0 0 0; /* calc(4.7rem + 2vh); is height of header */
		background-color: var(--clr-bg-primary);
		padding: 5em 4em;
	}

	.primary-nav--closed {
		opacity: 0;
		transform: translateX(100%);
		transition: all var(--menu-bg-fading-time) ease-out;
		transition-delay: 500ms; /* last li anim delay + 100ms */
	}

	/* Animation on menu items */

	.primary-nav--open {
		opacity: 1;
		transform: translateX(0);
		transition: all var(--menu-bg-fading-time) ease-out;
	}

	.primary-nav--open li {
		opacity: 0;
		animation: FadeIn ease-out 400ms forwards;
	}

	.primary-nav--open .menu-item a:focus {
		opacity: 0.5;
	}

	.primary-nav--open li:nth-child(1) {
		animation-delay: calc(100ms + var(--menu-bg-fading-time));
	}
	.primary-nav--open li:nth-child(2) {
		animation-delay: calc(200ms + var(--menu-bg-fading-time));
	}
	.primary-nav--open li:nth-child(3) {
		animation-delay: calc(300ms + var(--menu-bg-fading-time));
	}
	.primary-nav--open li:nth-child(4) {
		animation-delay: calc(400ms + var(--menu-bg-fading-time));
	}

	.primary-nav--closed li {
		opacity: 1;
		animation: FadeOut ease-out 400ms forwards;
	}

	.primary-nav--closed li:nth-child(1) {
		animation-delay: 400ms;
	}
	.primary-nav--closed li:nth-child(2) {
		animation-delay: 300ms;
	}
	.primary-nav--closed li:nth-child(3) {
		animation-delay: 200ms;
	}
	.primary-nav--oclosedpen li:nth-child(4) {
		animation-delay: 100ms;
	}

	/* Other styles for mobile menu */

	.nav-list {
		height: 80%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		--flex-gap: min(9vh, 4rem);
	}

	.nav-list li {
		text-align: center;
		width: 100%;
	}

	.nav-list a {
		font-size: var(--fs-700);
	}

	.mobile-nav-toggle {
		display: block;
	}
}

/* hero section */

.hero {
	min-height: 100vh;
	flex-direction: column;
	gap: 0;
}

.hero .section-divider {
	margin-top: auto;
}

.hero .btn {
	margin: 0.5em 0;

	opacity: 0;
	transform: scale(0);
	animation: HeroTextLoad var(--hero-text-load-time) ease-in-out forwards;
	animation-delay: var(--nav-load-time);
	animation-delay: calc(var(--nav-load-time) + var(--hero-text-load-time) * 2);
}

.hero .wrapper {
	flex-direction: column;
	align-items: center;

	margin-top: min(15vh, 12rem);
}

.hero__heading {
	text-align: center;
	max-width: 600px;
	opacity: 0;
	transform: scale(0);
	animation: HeroTextLoad var(--hero-text-load-time) ease-out forwards;
	animation-delay: calc(var(--nav-load-time));
}

.hero__heading + p {
	text-align: center;

	opacity: 0;
	transform: scale(0);
	animation: HeroTextLoad var(--hero-text-load-time) ease-out forwards;
	animation-delay: calc(var(--nav-load-time) + var(--hero-text-load-time));
}

/* Services section */

.services__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.services__item .wrapper {
	position: relative;
}

.services__item span {
	font-size: 12rem;
	line-height: 135%;
	user-select: none;
	opacity: 0.25;
}

.service__heading {
	position: absolute;
	top: 28%;
}

.position-top-38 {
	top: 38%;
}

.position-top-33 {
	top: 33%;
}

.services__item:nth-of-type(even) .service__heading {
	left: -2rem;
	text-align: left;
}

.services__item:nth-of-type(odd) .service__heading {
	left: 2rem;
	text-align: right;
}

/* Trainings */

.trainings__kinds {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.trainings__kinds a {
	text-decoration: none;
	color: var(--clr-font);
	padding: 1.25em 0;
	transition: text-shadow 250ms ease-in;
}

.trainings__kinds a:hover,
.trainings__kinds a:focus {
	text-shadow: 0px 0px 8px var(--clr-font);
}

.trainings__kinds .divider {
	height: 1px;
	background-color: var(--clr-font);
	width: min(15%, 3.5rem);
	margin: 0.5em 0;
}

/* Contact */

.contact {
	scroll-margin-top: 5rem;
}

.contact-info__item {
	margin: 2em 0;
}

.contact-info__item > a {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	text-decoration: none;
	color: var(--clr-font);
}

.contact-info__item .wrapper {
	margin-left: 1rem;
}

.contact-info__icon {
	width: 2.2em;
	aspect-ratio: 1;
	margin-right: 0.6rem;
}

/* Contact form */

.form__email-input,
.form__subject-input,
.form__message-input {
	background-color: transparent;
	border: none;
	border-bottom: var(--clr-bg-accent) 1px solid;
	width: 100%;

	margin: 1.5em 0;
	padding: 0.5em 0;

	color: var(--clr-bg-accent);
}

.form__submit-btn {
	margin: 2em 0;
	border: none;
	padding: 0.7em 3.5em;
	font-size: var(--fs-450);
}

.form__submit-btn:hover {
	background-color: var(--clr-primary-300);
	cursor: pointer;
}

form > .wrapper {
	display: flex;
	justify-content: center;
}

form .rodo-wrapper {
	margin: 1em 0;
}

.form__rodo-text {
	font-size: calc(var(--fs-400) - 0.125rem);
}

.form__hp-input,
label[for="f_email"] {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none;
}

/* Status message */

.alert {
	margin-bottom: 2em;
	padding: 0.8em 1.5em;
	border: solid 1px white;
	font-size: calc(var(--fs-400) - 0.125rem);
}

.alert--success {
	border-color: var(--message-success);
}

.alert--warning {
	border-color: var(--message-failure);
}

/* Footer */

section:last-of-type {
	margin-bottom: 0;
}

footer {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2.5em 0;

	position: absolute;
	bottom: 0;
	width: 100%;

	height: calc(5em + 1vh);
	font-size: var(--fs-400);
}

footer a {
	text-decoration: none;
	color: var(--clr-font);
}

/* Cookie consent */

.cookie-consent {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 100000;

	background-color: var(--clr-bg-primary);
	padding: 2em 3em;
	opacity: 1;
	transform: translateY(0);
	transition: transform 500ms ease-in-out;
	font-size: var(--fs-400);
}

.cookie-consent.hidden {
	transform: translateY(100%);

	pointer-events: none;
	overflow: hidden;
}

.cookie-consent .wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.cookie-consent p {
	text-align: center;
	padding-bottom: 1.5em;
}

.cookie-consent__accept {
	border: 1px solid var(--clr-primary-400);
	margin-bottom: 1em;
	padding: 0.9em 2.5em;
}

.cookie-consent__accept:hover {
	cursor: pointer;
}

.cookie-consent__reject {
	position: absolute;
	right: 1rem;
	top: 50%;

	width: 1.4rem;
	height: 1.4rem;
	margin-top: -1rem;

	opacity: 0.5;
	cursor: pointer;
	background: none;
	border: none;
}

.cookie-consent__reject::before {
	transform: rotate(45deg);
}

.cookie-consent__reject::after {
	transform: rotate(-45deg);
}

.cookie-consent__reject::before,
.cookie-consent__reject::after {
	position: absolute;
	content: "";
	height: 1.4rem;
	width: 2px;
	top: 3px;
	background-color: rgba(128, 128, 128, 1);
}

/* Trainings Schedule */
.trainings-schedule {
	margin: 0;
	padding: 0;
}

.trainings-schedule__item {
	padding: 1.5em;
	border: 2px solid var(--clr-primary-400);
	margin-bottom: 2.5rem;
}

.trainings-schedule__item .wrapper {
	margin: 1rem 0;
	gap: 1rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.trainings-schedule__item .topic {
	margin-bottom: 1.6em;
	line-height: 1.5;
}

/* Animations */

*.animable-on-scroll {
	transform: translateY(100px);
	opacity: 0;
	transition: all 300ms ease-in;
}

*.animate-on-scroll {
	transform: translateY(0);
	opacity: 1;
}

@keyframes FadeIn {
	0% {
		opacity: 0;
		transform: translateX(100%);
	}

	75% {
		opacity: 0.2;
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes FadeOut {
	0% {
		opacity: 1;
		transform: translateX(0);
	}

	75% {
		opacity: 0;
	}

	100% {
		opacity: 0;
		transform: translateX(100%);
	}
}

/* Animations on start */

@keyframes NavLoad {
	0% {
		opacity: 0;
		transform: translateY(-100%);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes HeroTextLoad {
	0% {
		opacity: 0;
		transform: scale(0);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* Media queries */

@media (min-width: 610px) {
	.container {
		--container-width-mobile: 82%;
	}

	.cookie-consent .wrapper {
		flex-direction: row;
	}

	.cookie-consent__accept {
		margin-bottom: 0;
		margin-right: 2em;
	}

	.trainings-schedule__item .wrapper {
		gap: 1rem;
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
}

@media (min-width: 1100px) {
	.menu-item a {
		position: relative;
		padding: 0.75em;
	}

	.menu-item a::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: var(--clr-font);
		transform: scaleX(0);
		transform-origin: right;
		transition: transform 0.3s ease-in-out;
	}

	.menu-item a:hover::after {
		transform: scaleX(1);
		transform-origin: left;
	}

	.container {
		--container-width-mobile: 70%;
	}

	.section-divider {
		margin-top: 5em;
	}

	.polygon-bottom {
		height: 18em;
	}

	.services .grid {
		grid-template-columns: 1fr 1fr;
		grid-gap: 2em;
		max-width: 50em;
		margin: 0 auto;
	}

	.services__item:nth-of-type(even) .service__heading {
		left: 0;
		text-align: center;
	}

	.services__item:nth-of-type(odd) .service__heading {
		left: 0;
		text-align: center;
	}

	.contact .grid {
		grid-template-columns: 1.5fr 2fr;
		grid-gap: 4rem;
		align-items: baseline;
	}

	.trainings-schedule__item {
		display: grid;
		grid-template-columns: 1.5fr 1fr 1fr;
		align-items: center;
		gap: 1.5rem;
	}

	.trainings-schedule__item .wrapper {
		gap: 1.5rem;
		flex-direction: column;

		margin-left: 2rem;
	}

	.trainings-schedule__item .wrapper > a {
		width: 100%;
	}
}

@media (min-width: 1750px) {
	.container {
		--container-width-mobile: 60%;
	}

	.services .grid {
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 5em;
	}

	.trainings-schedule {
		width: 85%;
		margin: 0 auto;
	}
}