/*
* 1. General structure
*	1.1 Default state
*	1.2 Opened mobile menu
*	1.3 Floating header
* 2. Navigation
*	2.1 Desktop navigation
*	2.2 Desktop mobile
*	2.3 Megamenus
* 3. Elements
*	3.1 Logos
*	3.2 Title
*	3.3 Mobile menu icon
*	3.4 Function icons
*	3.5 Language switcher
* 4. App style
*/

/*
* 1. General structure
*/
/* 1.1 Default state */
header {
	--header-background: var(--clr-neutral-100);
	--header-fc: var(--fc-700);
	--header-padding-block: 1rem;
	position: relative;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	color: var(--header-fc);
	pointer-events: none;
}

.h__wrapper {
	display: grid;
	grid-template-rows: max-content minmax(0, 1fr);
	position: absolute;
	width: 100%;
	height: 100lvh;
}

.h__main-content {
	top: 0;
	left: 0;
	width: 100%;
	padding-block: var(--header-padding-block);
	padding-inline: var(--wrap-padding);
	background-color: var(--header-background);
	pointer-events: all;
	transition: background 0.2s;
}

.h__bars {
	display: grid;
	grid-template-columns: 1fr max-content 1fr;
	align-items: center;
}

.h__bar {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.h__bar:nth-child(1) {
	justify-content: left;
}
.h__bar:nth-child(2) {
	justify-content: center;
}
.h__bar:nth-child(3) {
	justify-content: right;
}

/* 1.2 Opened mobile menu */
header.opened .h__wrapper {
	position: fixed;
}

/* 1.3 Floating header */
header[data-floating='true'] {
	position: absolute;
}

header[data-floating='true']:not(.opened) {
	--header-fc: var(--clr-neutral-100);
}

header[data-floating='true']:not(.opened) .h__main-content {
	background-color: hsl(0, 0%, 0%, 0);
	backdrop-filter: blur(10px);
}

/*
* 2. Navigation
*/
/* 2.1 Desktop navigation */
.h__nav ul {
	display: flex;
	gap: 2rem;
}

.h__link {
	color: var(--header-fc);
	font-size: var(--fs-400);
	letter-spacing: 0.05em;
	transition: border 0.3s;
}

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

.h__link a {
	transition: color 0.3s;
}

.h__link a:hover {
	color: var(--clr-primary-400);
}

.h__ddown-icon {
	font-size: 0.8em;
	vertical-align: top;
}

/* 2.2 Mobile navigation */
.h__mobile-navigation {
	display: grid;
	align-content: center;
	visibility: hidden;
	height: 100%;
	opacity: 0;
	background-color: var(--header-background);
	pointer-events: all;
	transition: opacity 0.2s, visibility 0s 0.2s;
}

header.opened .h__mobile-navigation {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.2s;
}

.h__mobile-navigation__links {
	display: grid;
	align-items: center;
	min-height: 50svh;
	max-height: 100%;
	margin-top: calc(100svh - 100lvh);
	text-align: center;
}

.h__mobile-navigation__link {
	translate: 0 var(--animation-movement-intensity);
	opacity: 0;
	font-size: var(--fs-600);
	letter-spacing: 0.05em;
	transition: translate var(--animation-duration), opacity var(--animation-duration);
}

header.opened .h__mobile-navigation__link {
	translate: 0 0;
	opacity: 1;
	transition-delay: 0.2s;
}

/* 2.3 Megamenus */
.megamenus {
	display: none;
}

/*
* 3. Elements
*/
/* 3.1 Logos */
.h__logo {
	display: block;
	height: 1.5rem;
}

.h__logo .icon-embed,
.h__logo img {
	width: auto;
	height: 100%;
}

@media (min-width: 481px) {
	.h__logo {
		height: 2.25rem;
	}
}

/* 3.2 Title */
.h__title {
	font-size: var(--fs-200);
	font-weight: var(--fw-regular);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* 3.3 Mobile menu icon */
.h__mobile-icon {
	--icon-height: 1.4rem;
	display: grid;
	width: 1.5rem;
	height: var(--icon-height);
	align-items: center;
	cursor: pointer;
}

.h__mobile-icon-part {
	display: flex;
	width: 100%;
	justify-content: right;
}

.h__mobile-icon-part:nth-child(1),
.h__mobile-icon-part:nth-child(3) {
	transition: transform 0.2s 0.2s;
}

.h__mobile-icon-part:nth-child(2) {
	transition: opacity 0.1s 0.2s, transform 0.2s 0.2s;
}

.h__mobile-icon-line {
	background-color: var(--header-fc);
	height: 2px;
	transition: transform 0.2s, width 0.2s;
}

header.opened .h__mobile-icon-line {
	width: 100% !important;
}

.h__mobile-icon-part:nth-child(1) .h__mobile-icon-line {
	width: 80%;
}
.h__mobile-icon-part:nth-child(2) .h__mobile-icon-line {
	width: 60%;
}
.h__mobile-icon-part:nth-child(3) .h__mobile-icon-line {
	width: 100%;
}

header.opened .h__mobile-icon-part:nth-child(1) {
	transform: translateY(calc(var(--icon-height) / 3));
	transition: transform 0.2s;
}

header.opened .h__mobile-icon-part:nth-child(3) {
	transform: translateY(calc(var(--icon-height) / -3));
	transition: transform 0.2s;
}

header.opened .h__mobile-icon-part:nth-child(2) {
	opacity: 0;
	transform: translateX(-4rem);
	transition: opacity 0.1s 0.1s, transform 0.2s;
}

header.opened .h__mobile-icon-part:nth-child(1) .h__mobile-icon-line {
	transform: rotate(45deg);
	transition: transform 0.2s 0.2s;
}

header.opened .h__mobile-icon-part:nth-child(3) .h__mobile-icon-line {
	transform: rotate(-45deg);
	transition: transform 0.2s 0.2s;
}

/* 3.4 Function icons */
.h__nav-icon {
	display: block;
	position: relative;
	width: 1.25rem;
}

.h__nav-icon:hover {
	color: var(--clr-primary-400);
}

.h__nav-icon--cart::after {
	content: attr(data-quantity);
	position: absolute;
	right: 0;
	bottom: 0;
	translate: 30% 30%;
	width: 1.3em;
	background-color: #707070;
	border-radius: 50%;
	color: #fff;
	font-size: var(--fs-300);
	line-height: 1.3em;
	text-align: center;
}

.h__nav-icon--cart.active::after {
	background-color: var(--clr-primary-500);
}

/* 3.5 Language switcher */
.h__languages {
	position: relative;
	display: grid;
	height: 100%;
	align-items: center;
}

.h__language-icon {
	border-radius: 50%;
	width: 1.4rem;
	height: auto;
	aspect-ratio: 1;
	cursor: pointer;
}

.h__language-icon_active {
	width: 1.5rem;
}

.h__languages-ddown {
	position: absolute;
	top: 100%;
	right: 0;
	transform: translateY(2rem);
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	background-color: var(--background-c);
	border-radius: 0.5rem;
	box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.1);
	transition: opacity 0.4s, transform 0.4s;
}

.h__languages-ddown.opened {
	transform: none;
	visibility: visible;
	opacity: 1;
}

.h__language {
	display: grid;
	min-width: 150px;
	padding-inline: 1rem;
	grid-template-columns: 2.5rem auto;
	align-items: center;
	cursor: pointer;
	transition: background-color 0.3s;
}

.h__language:hover,
.h__language.active {
	background-color: var(--primary);
}

.h__language-name {
	letter-spacing: 0.02em;
	line-height: 3.5;
	transition: color 0.3s;
}

.h__language:hover .h__language-name,
.h__language.active .h__language-name {
	color: #fff;
}

/*
* 4. App style
*/
@media (min-width: 769px) {
	header {
		--header-padding-block: 2rem;
	}
}