body > .header {
	position: sticky;
	top: calc(-1 * var(--top-bar-height));
    z-index: 999;
    background-color: var(--white);
    width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--clamp-15-5);
	padding-bottom: var(--clamp-15-5);
	
	.top-bar {
		background-color: var(--lime);
		padding-block: var(--clamp-12-8);
		
		p {
			text-align: center;
			font-size: var(--clamp-16-12);
			font-weight: 700;
			color: var(--olive);
		}
	}
	
	.main-bar {
		padding-inline: var(--clamp-30-10);
		
		.logo {
			min-width: 80px;
		}
	}
	
	.container {
		display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--clamp-40-10);
	}
	
	.menu-wrapper {
		.menu {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: var(--clamp-40-10);
			
			.link {
				color: var(--blue);
				font-size: var(--clamp-16-12);
				font-weight: 600;
			}
		}
	}
	
	.actions {
		display: flex;
		align-items: center;
		gap: var(--clamp-20-10);
	}
	
	.language-switcher {
		max-width: max-content;
		display: flex;
		gap: 4px;
		align-items: center;
		flex-wrap: nowrap;
		
		.link {
			text-transform: lowercase;
			color: var(--black-a40);
			text-decoration-color: transparent;
			text-decoration-line: underline;
			text-underline-position: under;
			text-decoration-skip-ink: auto;
			text-decoration-style: solid;
			text-decoration-thickness: 1px;
			text-underline-offset: 1px;
			font-size: var(--clamp-16-12);
			transition: 
				text-decoration-color var(--trans),
				color var(--trans);
			
			&:hover {
				cursor: pointer;
				color: var(--main-font-color);
			}
			
			&.is-active {
				cursor: default;
				color: var(--black);
				text-decoration-color: var(--black);
			}
		}
	}
	
	@media screen and (max-width: 700px) {
		.container {
			.logo-link    { grid-area: logo; }
			.menu-wrapper { grid-area: menu; }
			.actions      { grid-area: actions; 
				justify-content: end;
			}
			
			display: grid;
			grid-template-areas: 
				"logo actions"
				"menu menu";
		}
	}
}