/*----------------------------------------------------------------- */
/* HEADER
/*----------------------------------------------------------------- */

header
{
	position: relative;

	height: var(--header__height);

	background: linear-gradient(180deg, rgb(var(--color__black)) 0%, rgb(var(--color__purple-gradient-3)) 100%);
}

.inner
{
	position: relative;

	height: var(--header__height);
}

.inner::before
{
	position: absolute;
	top: calc(100% - 22px);
	right: 0;
	left: 0;

	height: 109px;

	content: '';
	pointer-events: none;

	opacity: 0.7;
	background: linear-gradient(rgba(var(--color__dark-gradient-1), 1) 0%, rgba(var(--color__white), 0) 100%);
}

.inner::after
{
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;

	height: 2px;

	content: '';
	pointer-events: none;

	background: linear-gradient(to left, rgb(var(--color__purple-gradient-4)) 0%, rgb(var(--color__grey-gradient-1)) 24%, rgb(var(--color__grey-gradient-2)) 50%, rgb(var(--color__grey-gradient-3)) 85%, rgb(var(--color__grey-gradient-4)) 100%);
}

header .row > .row
{
	flex: 1;
}

@media (max-width: 960px)
{
	header
	{
		height: var(--header__height);
	}
}

@media (min-width: 961px)
{
	header::after
	{
		position: absolute;
		top: 10px;
		right: 10px;
		bottom: 10px;
		left: 10px;

		content: '';
		pointer-events: none;

		background-image: url(https://res.cloudinary.com/laita/image/upload/f_auto,q_auto:eco/v1668006913/webpunk.cz/webpunk-sroub.png), url(https://res.cloudinary.com/laita/image/upload/f_auto,q_auto:eco/v1668006913/webpunk.cz/webpunk-sroub.png), url(https://res.cloudinary.com/laita/image/upload/f_auto,q_auto:eco/v1668006913/webpunk.cz/webpunk-sroub.png), url(https://res.cloudinary.com/laita/image/upload/f_auto,q_auto:eco/v1668006913/webpunk.cz/webpunk-sroub.png);
		background-repeat: no-repeat;
		background-position: 0 0, 0 100%, 100% 0, 100% 100%;
		background-size: 12px 12px;
	}
}

@media (min-width: 1345px)
{
	header::after
	{
		top: 16px;
		right: 55px;
		bottom: 16px;
		left: 55px;
	}
}

/* LOGO
----------------------------------------- */
.logo
{
	font-size: 0;

	position: relative;
}

.logo h1
{
	font-size: 0;
	line-height: 0;

	margin: 0;
}

.logo img
{
	width: auto;
	height: var(--header__height);

	image-rendering: -webkit-optimize-contrast;
}

.logo__original
{
	transition: opacity 1s;

	opacity: 1;
}

.logo__alternative
{
	position: absolute;
	top: 0;
	left: 0;

	transition: opacity 1s;

	opacity: 0;
}

header[data-sticky-scroll='down'] .logo__original
{
	opacity: 0;
}

header[data-sticky-scroll='down'] .logo__alternative
{
	opacity: 1;
}

/* MENU MAIN
----------------------------------------- */
.main-menu
{
	text-transform: uppercase;
}

/* PRIMARY NAVIGATION
----------------------------------------- */
.main-menu,
.sub-menu
{
	margin: 0;
}

.main-menu > li
{
	position: relative;
}

.main-menu a
{
	font-size: 1.6rem;

	margin: 0 14px;

	transition: text-shadow var(--transition-duration__default);
	text-decoration: none;
	letter-spacing: 0.04rem;

	color: rgb(var(--color__grey-light));
}

.main-menu > li:first-child > a
{
	margin-left: 0;
}

.main-menu > li:last-child > a
{
	margin-right: 0;
}

.main-menu > li:not(.active-item):hover > a,
.main-menu a:hover
{
	text-shadow: 0 2px 14px rgb(var(--color__pink)), 0 0 3px rgb(var(--color__pink));
}
.main-menu .active-item > a,
.main-menu .active-item_post-ancestor > a,
.main-menu .active-item_archive-ancestor > a,
.main-menu .active-item_term-ancestor > a
{
	color: rgb(var(--color__pink));
}

.main-menu .active-item > a
{
	cursor: default;
	pointer-events: none;
}

.main-menu .sub-menu
{
	position: absolute;
	z-index: 999;
	top: 0;
	left: 100%;

	visibility: hidden;

	padding: 15px 0 13px;

	transition: opacity 0.3s linear, background-color 0.3s linear;
	text-align: right;
	white-space: nowrap;

	opacity: 0;
	border-radius: 0 0 12px 12px;
}

.main-menu > li > .sub-menu
{
	top: 50px;
	right: 0;
	left: auto;
}

.main-menu > li > .sub-menu::after
{
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;

	display: block;

	width: 100%;
	height: 35px;

	content: '';
}

.main-menu > li > .sub-menu::before
{
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	left: 1px;

	display: block;

	content: '';

	border-radius: 0 0 12px 12px;
	background: linear-gradient(rgba(var(--color__black), 1) 0%, rgba(var(--color__purple-gradient-3), 1) 100%);
}

.main-menu li:hover > .sub-menu
{
	visibility: visible;

	opacity: 1;
}

.main-menu .sub-menu li
{
	position: relative;
}

.main-menu .sub-menu a
{
	font-size: 1.4rem;

	display: block;

	margin: 0;
	padding: 10px 24px;
}

.main-menu > li.menu-item-has-children:hover > a::after
{
	-webkit-transform: rotate(1deg);
	        transform: rotate(1deg);
}

.main-menu .sub-menu > li:hover > a
{
	color: rgb(var(--color__blue));
}

.sub-show
{
	display: none;
}

.nav-wrapper .languages
{
	display: none;
}

@media (max-width: 960px)
{
	.nav-wrapper
	{
		position: absolute;
		z-index: 999;
		top: var(--header__height);
		right: 0;
		left: 0;

		display: none;
		overflow: auto;

		width: 100%;
		height: calc(100vh - var(--header__height));
		padding: 45px 0;

		background: radial-gradient(at top center, rgba(var(--color__purple-gradient-1), 1) 0%, rgba(var(--color__purple-gradient-2),1) 75%);
	}

	.nav-wrapper::after
	{
		position: absolute;

		content: '';
		pointer-events: none;

		background-image: url(https://res.cloudinary.com/laita/image/upload/f_auto,q_auto:eco/v1668006913/webpunk.cz/webpunk-sroub.png), url(https://res.cloudinary.com/laita/image/upload/f_auto,q_auto:eco/v1668006913/webpunk.cz/webpunk-sroub.png), url(https://res.cloudinary.com/laita/image/upload/f_auto,q_auto:eco/v1668006913/webpunk.cz/webpunk-sroub.png), url(https://res.cloudinary.com/laita/image/upload/f_auto,q_auto:eco/v1668006913/webpunk.cz/webpunk-sroub.png);
		background-repeat: no-repeat;
		background-position: 0 0, 0 100%, 100% 0, 100% 100%;
		background-size: 12px 12px;

		inset: 16px;
	}

	.nav-wrapper::-webkit-scrollbar
	{
		width: 8px;
		height: 8px;

		-webkit-appearance: none;
	}

	.nav-wrapper::-webkit-scrollbar-thumb
	{
		border: 1px solid rgb(var(--color__black));
		border-radius: 10px;
		background-color: rgb(var(--color__white));
	}

	.nav-wrapper .languages
	{
		display: block;
	}

	.main-menu li
	{
		display: block;

		width: 100%;

		text-align: left;
	}

	.main-menu a
	{
		font-size: 1.6rem;
		line-height: 5rem;

		display: block;

		margin: 0;
		padding: 0 30px;

		background: none;
	}

	.main-menu a:hover
	{
		background: rgba(var(--color__white), 0.1);
	}

	.main-menu .sub-menu
	{
		position: static;

		visibility: visible;

		padding: 0;

		transition: none;

		opacity: 1;
		border: none;
	}

	.main-menu > li > .sub-menu:before
	{
		display: none;
	}

	.main-menu > li.menu-item-has-children > .sub-show
	{
		position: absolute;
		top: 0;
		right: 15px;

		display: flex;
		align-items: center;
		justify-content: center;

		width: 50px;
		height: 50px;
	}

	.main-menu > li.menu-item-has-children > .sub-show:hover
	{
		text-decoration: none;
	}

	.main-menu > li.menu-item-has-children > .sub-show svg
	{
		display: block;

		width: 20px;
		height: 10px;
	}

	.main-menu > li.menu-item-has-children > .sub-show svg path
	{
		fill: rgb(var(--color__white));
	}

	.main-menu > li.menu-item-has-children > .sub-show.active
	{
		-webkit-transform: rotate(180deg);
		        transform: rotate(180deg);
	}

	.main-menu > li > .sub-menu
	{
		display: none;

		border: none;
	}

	.main-menu .sub-menu
	{
		padding-left: 15px;
	}

	.main-menu .sub-menu a
	{
		font-size: 1.4rem;
		line-height: 3rem;

		padding: 0 30px;
	}
}

@media (max-width: 760px)
{
	.main-menu a,
	.main-menu .sub-menu a
	{
		padding: 0 40px;
	}

	.main-menu > li.menu-item-has-children > .sub-show
	{
		right: 24px;
	}
}

/* Rewrites inline styles added via JavaScript function */
@media (min-width: 961px)
{
	.main-menu > li.menu-item-has-children > a
	{
		position: relative;

		padding-right: 14px;
	}

	.main-menu > li.menu-item-has-children > a::after
	{
		position: absolute;
		top: 8px;
		right: 0;

		display: block;

		width: 10px;
		height: 6px;

		content: '';
		transition: transform var(--transition-duration__default);
		-webkit-transform: rotate(180deg);
		        transform: rotate(180deg);

		background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg width=\'10\' height=\'6\' viewBox=\'0 0 10 6\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath d=\'M1.23072178 6 5.2427431 2.337041 8.6785113 5.99669 10 4.962536 6.0430518.747746C5.65377759.333106 5.00362744.308065 4.58361417.691536L0 4.876356 1.23072178 6Z\' fill=\'%23FFF\' fill-rule=\'evenodd\'/%3e%3c/svg%3e');
	}

	.main-menu > li.active-item.menu-item-has-children > a::after
	{
		background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg width=\'10\' height=\'6\' viewBox=\'0 0 10 6\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath d=\'M1.23072178 6 5.2427431 2.337041 8.6785113 5.99669 10 4.962536 6.0430518.747746C5.65377759.333106 5.00362744.308065 4.58361417.691536L0 4.876356 1.23072178 6Z\' fill=\'%23F63A74\' fill-rule=\'evenodd\'/%3e%3c/svg%3e');
	}

	.main-menu .sub-menu
	{
		background: linear-gradient(rgba(var(--color__dark-gradient-2), 1) 0%, rgba(var(--color__dark-gradient-3), 1) 100%);
	}

	.nav-wrapper,
	.main-menu .sub-menu
	{
		display: block !important;

		height: auto !important;
	}
}

/* TOOLS
----------------------------------------- */
a.tools__search
{
	font-size: 0;

	margin: 0 20px 0 0;

	transition: filter var(--transition-duration__default);

	color: rgb(var(--color__grey-light));
}

a.tools__search:hover,
body.search a.tools__search
{
	color: rgb(var(--color__grey-light));

	filter: drop-shadow(0px 0 3px rgb(var(--color__pink)));
}

.tools__search .icon
{
	width: 15px;
	height: 15px;
}

.tools__nav-btn
{
	display: none;
}

/* LANGUAGES */
.languages
{
	font-size: 2rem;
	line-height: 20px;

	position: relative;

	text-align: center;

	color: rgb(var(--color__white));
}

/* .languages::before
{
	position: absolute;
	top: -2px;
	bottom: -2px;
	left: 0;

	width: 1px;

	content: '';

	opacity: 0.1;
	background: linear-gradient(rgba(var(--color__white), 0) 0%, rgb(var(--color__white)) 15%, rgb(var(--color__white)) 85%, rgba(var(--color__white), 0) 100%);
} */

.lang-list
{
	margin: 0;
}

.lang-list a
{
	font-size: 1.6rem;
	line-height: 20px;

	width: inherit;
	height: inherit;
	margin-left: 20px;

	transition: text-shadow var(--transition-duration__default);
	text-decoration: none;
	text-transform: uppercase;

	color: rgb(var(--color__grey-light));
}

.lang-list a:hover,
.lang-list .lang-item-active a
{
	text-decoration: none;

	text-shadow: 0 2px 14px rgb(var(--color__pink)), 0 0 3px rgb(var(--color__pink));
}

.nav__search
{
	display: none;
}

@media (max-width: 960px)
{
	.tools__search
	{
		display: none;
	}

	.languages
	{
		position: static;
		position: relative;

		display: none;

		padding: 0;
	}

	.lang-btn
	{
		background: none;
	}

	.lang-box
	{
		top: 35px;

		background: rgb(var(--color__black));
	}

	/* NAVIGATION BUTTON */
	button.tools__nav-btn
	{
		font-size: 0;
		font-weight: var(--font-weight__bold);

		position: relative;

		display: block;

		width: auto;
		height: 18px;
		margin-left: 20px;
		padding-right: 38px;

		letter-spacing: 1.6px;
		text-transform: uppercase;

		color: rgb(var(--color__white));
	}

	.tools__nav-btn:hover
	{
		text-decoration: none;
	}

	.tools__nav-btn span
	{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;

		display: block;

		width: 24px;
		height: 2px;
		margin: auto 0;

		transition: color var(--transition-duration__default), background-color var(--transition-duration__default), text-decoration var(--transition-duration__default);

		border-radius: 2px;
		background: rgb(var(--color__white));
	}

	.tools__nav-btn.active span
	{
		background: rgba(0,0,0,0);
	}

	.tools__nav-btn:hover.active span
	{
		width: 0;

		background: rgba(0,0,0,0);
	}

	.tools__nav-btn:before,
	.tools__nav-btn:after
	{
		position: absolute;
		right: 0;

		display: block;

		width: 24px;
		height: 2px;

		content: '';
		transition: color var(--transition-duration__default), background-color var(--transition-duration__default), transform var(--transition-duration__default);

		border-radius: 2px;
		background: rgb(var(--color__white));
	}

	.tools__nav-btn:before
	{
		top: 0;
	}

	.tools__nav-btn:after
	{
		bottom: 0;
	}

	.tools__nav-btn.active:before
	{
		top: 8px;

		-webkit-transform: rotate(40deg);
		        transform: rotate(40deg);
	}

	.tools__nav-btn.active:after
	{
		bottom: 8px;

		-webkit-transform: rotate(-40deg);
		        transform: rotate(-40deg);
	}

	.tools__nav-btn.active:before,
	.tools__nav-btn.active:after
	{
		background: rgb(var(--color__white));
	}

	.main-menu
	{
		position: relative;

		padding-bottom: 20px;
	}

	.main-menu::after
	{
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;

		height: 2px;

		content: '';

		opacity: 0.3;
		background: linear-gradient(to left, rgb(var(--color__purple-gradient-4)) 0%, rgb(var(--color__grey-gradient-1)) 24%, rgb(var(--color__grey-gradient-2)) 50%, rgb(var(--color__grey-gradient-3)) 85%, rgb(var(--color__grey-gradient-4)) 100%);
	}

	.mobile__tools
	{
		display: flex;
		align-items: center;
		justify-content: center;

		margin-top: 24px;
	}

	.nav__search
	{
		font-size: 0;

		display: block;

		margin: 0 20px 0 0;

		transition: filter var(--transition-duration__default);

		color: rgb(var(--color__grey-light));
	}

	.nav__search:hover,
	body.search .nav__search
	{
		color: rgb(var(--color__grey-light));

		filter: drop-shadow(0px 0 3px rgb(var(--color__pink)));
	}

	.nav__search svg
	{
		width: 16px;
		height: 16px;
	}
}

@media (max-width: 760px)
{
	.tools
	{
		right: 15px;
	}
}