/* =======================================
   HEADER
======================================= */

header {
	padding:20px;
	width: 100%;
	background-color: var(--darkblue);
	position: relative;
	z-index: 100000;
}

header.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	transform: translateY(-100%);
	animation: slideDown 0.5s ease forwards;
}

/* Animation */
@keyframes slideDown {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}


/* =======================================
   BURGER MENU BUTTON
======================================= */

.burger {
	position: relative;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	color: #fff;
}

.burger i {
	font-size: 30px;
}

.burger,
.burger * {
	touch-action: manipulation;
	user-select: none;
}

.burger {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* =======================================
   MOBILE MAIN MENU
======================================= */

.main-menu {
   list-style: none;
    margin: 0;
    padding: 20px;
    display: none;
    flex-direction: column;

    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;

    background: var(--darkblue);
    z-index: 9999;
}

.main-menu.open {
	display: flex;
}


/* =======================================
   MAIN MENU ITEMS
======================================= */

.main-menu>li {
	padding: 0px 0px;
	color: #fff;
	padding: 10px 0;
	position: relative;
	font-weight: 600;
}

/* Links full width så pilen kan være helt til højre */
.main-menu>li>a {
	color: #fff;
	display: block;
	width: 100%;
	padding-left: 0px;
}


/* =======================================
   DROPDOWN (CHILDREN)
======================================= */

.menu-item-has-children>a {
	position: relative;
	color: #fff;
}

/* Dropdown arrow */
.menu-item-has-children>a::after {
	content: "\f107";
	/* Font Awesome angle-down */
	font-family: "Font Awesome 6 Free";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	color: white;

}

/* Arrow when open */
.menu-item-has-children.open>a::after {
	content: "\f077";
	font-family: "Font Awesome 6 Free";
}

/* Mobile dropdown UL */
.main-menu li>ul {
	list-style: none;
	padding: 20px;
	margin: 5px 0 0;
	display: none;
	background-color: var(--lightblue);
	color: #fff;
}

.main-menu li.open>ul {
	display: block;
}

/* Dropdown LI items */
.main-menu>li>ul li {
	padding: 10px;
	font-weight: 500;
}

.main-menu>li>ul li a {
	color: #fff;
}