@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
@font-face {
	font-family: 'Avenir Next Cyr';
	src:
		url('../fonts/AvenirNextCyr-Heavy.woff2') format('woff2'),
		url('../fonts/AvenirNextCyr-Heavy.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Avenir Next Demi';
	src:
		url('../fonts/AvenirNext-DemiBold.woff2') format('woff2'),
		url('../fonts/AvenirNext-DemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

::-webkit-scrollbar {
	width: 6px;
	background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
	background: #001489;
	border-radius: 6px;
}

* {
	scrollbar-width: thin;
	scrollbar-color: #001489 #f1f1f1;
}


:root {
	--black: #000;
	--white: #fff;
	--blue: #001489;
	--red: #da291c;
	--font-heading: 'Avenir Next Cyr', sans-serif;
	--font-body: 'Avenir Next Demi', sans-serif;
	--max-width: 1200px;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html {
	font-size: 18px;
}

body {
	display: flex;
	flex-direction: column;
	font-family: var(--font-body);
	background-image: url('../images/drops.jpg');
	min-height: 100vh;

	&.light {
		background-image: none;
		background-color: var(--white);
	}
}

a {
	text-decoration: none;
	color: var(--black);
}

img {
	max-width: 100%;
}

header {
	display: flex;
	justify-content: space-between;

	.warning {
		span {
			color: var(--white);
			font-size: 0.8rem;
			text-wrap: balance;
			line-height: 1.2;
			opacity: 0.8;
		}
	}

	> div {
		flex: 1;
		text-align: center;
		padding: 2rem;
		display: flex;
		justify-content: center;
		align-items: center;

		&:first-child {
			text-align: left;
			justify-content: flex-start;
			padding: 2rem;
		}
		&:last-child {
			text-align: right;
			justify-content: flex-end;
		}
	}
	.logo {
		height: 100px;
	}

	.language-selector {
		display: inline-flex;
		justify-content: flex-end;
		background-color: var(--white);
		border-radius: 8px;
		padding: 0.2rem;
		gap: 0.2rem;
		li {
			a {
				padding: 0.3rem 0.5rem 0.2rem 0.5rem;
				display: flex;
				border-radius: 5px;
				&.is-active {
					color: var(--white);
					background-color: var(--blue);
				}
				&:hover {
					color: var(--white);
					background-color: var(--blue);
				}
			}
		}
	}

	@media (max-width: 768px) {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		> div {
			padding: 1rem;

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

nav {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: clamp(1rem, 4vw, 2rem);

	ul {
		display: flex;
		background-color: var(--white);
		justify-content: center;
		align-items: center;
		gap: 0.3rem;
		border-radius: 0.8rem;
		padding: 0.25rem;
		li {
			a {
				display: inline-flex;
				padding: 0.7rem 1rem 0.5rem 1rem;
				color: var(--blue);
				border-radius: 0.55rem;
				&:hover {
					color: var(--white);
					background-color: var(--blue);
				}
				&.is-active {
					color: var(--white);
					background-color: var(--blue);
				}
			}
		}
	}

	@media (max-width: 768px) {
		ul {
			min-width: 100%;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			li {
				width: 100%;
				a {
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
				}
			}
		}
	}
}

section {
	padding: clamp(1rem, 4vw, 2rem);
	position: relative;

	&#title {
		h1 {
			font-size: clamp(1.5rem, 7vw, 8rem);
			font-family: var(--font-heading);
			text-align: center;
			color: var(--white);
		}
	}
	&#big-image {
		padding: 2rem 0;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.alkoholivaba {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 2rem;
			height: 70%;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.alkoholivaba-text {
			position: absolute;
			top: 70%;
			transform: translateY(-50%);
			right: 20%;
			h4 {
				font-weight: normal;
				color: var(--white);
				position: relative;
				font-size: 1.5rem;
				text-align: right;
				strong {
					font-weight: bold;
				}
			}
			&:after {
				content: '';
				position: absolute;
				top: 100%;
				left: 0;
				background-image: url('../images/red-paint.svg');
				background-repeat: no-repeat;
				background-size: contain;
				width: 100%;
				height: 100%;
			}
		}

		@media (max-width: 768px) {
			padding: 1rem 0;

			.alkoholivaba{
				right: 1rem;
				text-align: right;
				img{
					width:20dvw;
					object-fit: contain;
				}
			}
			.alkoholivaba-text {
				right: 40%;
				top: 50%;
			}
		}
	}
	&#text {
		padding: 2rem;
		max-width: calc(0.8 * var(--max-width));
		margin: 0 auto;
		text-align: center;
		p {
			font-size: 2rem;
			color: rgb(255 255 255 / 50%);
			margin-bottom: 2rem;
			text-wrap: pretty;
			overflow-wrap: anywhere;
			hyphens: auto;
			text-wrap: balance;

			span {
				color: var(--white);
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
		@media (max-width: 768px) {
			p {
				font-size: 1.5rem;
			}
		}
	}
	&#video {
		max-width: var(--max-width);
		min-width: 100%;
		margin: 0 auto;

		> div {
			border-radius: 1rem;
			background-color: var(--white);
			padding: 2rem;
			aspect-ratio: 16/9;
			overflow: hidden;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
	&#page-content {
		article {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: var(--blue);
			border-radius: 1rem;
			padding: 1rem;
			aspect-ratio: 16/7;
			background-size: cover;

			&.alkoholivaba {
				background-image: url('../images/sisu-taust-alkovaba.png');
			}
			&.originaal {
				background-image: url('../images/sisu-taust-originaal.png');
			}
			&.smooth {
				background-image: url('../images/sisu-taust-smooth.png');
			}

			img {
				width: 18px !important;
				height: 18px !important;
				object-fit: contain !important;
			}

			> div {
				width: 50%;
				margin-left: auto;
			}
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			h2 {
				color: var(--white);
				font-size: clamp(1.5rem, 5vw, 3rem);
				font-family: var(--font-heading);
				margin-bottom: 1rem;
			}
			ul {
				display: flex;
				flex-wrap: wrap;
				gap: 0.5rem;
				max-width: 80%;
				li {
					display: flex;
					align-items: center;
					gap: 0.5rem;
					background-color: rgba(255, 255, 255, 0.2);
					padding: 0.5rem 0.85rem 0.5rem 0.5rem;
					border-radius: 0.5rem;
					color: var(--white);
					font-size: 0.8rem;
				}
			}
		}
		@media (max-width: 768px) {
			article {
				aspect-ratio: 1/1;
				> div {
					width: 100%;
				}
				ul {
					flex-direction: column;
					align-items: flex-start;
					li{

					}
				}
			}
		}
	}
	&#drinks {
		max-width: var(--max-width);
		margin: 0 auto;

		h2 {
			font-size: clamp(2rem, 5vw, 4rem);
			font-family: var(--font-heading);
			text-align: center;
			color: var(--white);
		}

		ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 1rem;
			margin: 2rem 0;
			width: 100%;

			li {
				flex: 1;
				position: relative;
				text-align: center;
				white-space: nowrap;
				min-width: 320px;

				span {
					position: absolute;
					top: -13px;
					left: 50%;
					transform: translateX(-50%);
					display: inline-flex;
					align-items: center;
					justify-content: center;
					padding: 0.25rem 1rem;
					background-color: var(--red);
					color: var(--white);
					font-size: clamp(0.7rem, 1.4vw, 0.95rem);
					letter-spacing: 0.08em;
					text-transform: uppercase;
					clip-path: polygon(0% 50%, 7% 0%, 93% 0%, 100% 50%, 93% 100%, 7% 100%);
				}

				a {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background-color: var(--white);
					border-radius: 1rem;

					picture {
						display: flex;
						justify-content: center;
						background-image: url('../images/sor-taust.png');
						min-width: 100%;
						border-radius: 1rem;
						overflow-y: hidden;
						aspect-ratio: 1/1;
						img {
							margin-top: 2rem;
							height: 100%;
							transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
						}
					}
					h3 {
						padding: 1rem;
					}

					&:hover {
						picture img {
							transform: scale(1.08);
							transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
						}
					}
				}
			}
		}
	}

	/* @media (max-width: 768px) {
		ul {
			flex-direction: column;
			align-items: center;
			gap: 1rem;

			li {
				width: 100%;
				min-width: 100%;
			}
		}
	} */
}

footer {
	display: flex;
	margin-top: auto;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	background-image: url('../images/footer.png');
	background-size: cover;
	background-position: top center;
	min-height: 373px;

	.sopradele-pruulitud {
		margin-top: 3rem;
		text-align: center;
		img {
			width: 70%;
		}
	}
	p {
		text-align: center;
		padding: 1rem;
		color: var(--blue);
	}
}

/* Light page */
body.light {
	background-image: url('../images/drops-white.png');
	background-size: 100% auto;

	header {
		.warning {
			span {
				color: var(--blue);
			}
		}

		.language-selector {
			background-color: var(--blue);
			li {
				a {
					color: var(--white);
					&.is-active {
						color: var(--blue);
						background-color: var(--white);
					}
					&:hover {
						color: var(--blue);
						background-color: var(--white);
					}
				}
			}
		}
	}

	nav {
		ul {
			background-color: var(--blue);
			li {
				a {
					color: var(--white);
					&:hover {
						color: var(--blue);
						background-color: var(--white);
					}
					&.is-active {
						color: var(--blue);
						background-color: var(--white);
					}
				}
			}
		}
	}

	section {
		&#text {
			p {
				color: rgb(0 20 137 / 50%);
				span {
					color: var(--blue);
				}
			}
		}
	}

	footer {
		background-image: url('../images/footer-blue.png');
		p {
			color: var(--white);
		}
	}
}

/* Age gate */
body.age-gate-active {
	overflow: hidden;
}

body.age-verified .age-restriction {
	display: none;
	visibility: hidden;
	pointer-events: none;
}

.age-restriction {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background-color: rgb(0 0 0 / 65%);
	backdrop-filter: blur(9px);
}

.age-restriction__card {
	width: 100%;
	max-width: 28rem;
	padding: 2rem 1.75rem;
	background-color: var(--white);
	border-radius: 1rem;
	box-shadow: 0 1rem 3rem rgb(0 20 137 / 25%);
	text-align: center;
}

.age-restriction__title {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 4vw, 1.5rem);
	font-weight: 900;
	color: var(--blue);
	line-height: 1.25;
	margin-bottom: 1.5rem;
}

.age-restriction__actions {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.age-restriction__btn {
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	padding: 0.65rem 1.75rem;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		outline-offset 0.2s ease;
}

.age-restriction__btn:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
}

.age-restriction__btn--yes {
	background-color: var(--blue);
	color: var(--white);
}

.age-restriction__btn--yes:hover {
	background-color: rgb(0 20 137 / 88%);
}

.age-restriction__btn--no {
	background-color: var(--white);
	color: var(--blue);
	box-shadow: inset 0 0 0 2px var(--blue);
}

.age-restriction__btn--no:hover {
	background-color: rgb(0 20 137 / 8%);
}

.age-restriction__note,
.age-restriction__denied-text {
	font-size: 0.85rem;
	line-height: 1.45;
	color: rgb(0 0 0 / 70%);
}

.age-restriction__denied-text {
	font-size: 1rem;
	color: var(--blue);
	margin: 0;
}