/* ============================================================
   Header & Navigation
   Drop-downs, mega-dropdown, featured dropdown
   ============================================================ */


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

#header{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	width: auto;
	height: var(--header-height);
	margin: 0;
	color: var(--palette-black);
	background: var(--palette-white);
	border-bottom: 0;
	overflow: hidden;
	scrollbar-width: none;
	transition: top .4s ease;
}
#header .container{
	width: 100%;
	height: 100%;
	padding: 16px 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}
.nav-expanded #header,
.scrolling.nav-expanded #header{
	height: 100vh;
	overflow-y: auto;
}
.nav-expanded #header{
	background: #fff;
}
/* ============================================================
   LOGO
   ============================================================ */

#logo{
	position: relative;
	color: var(--palette-black); /* inline SVG logo fills with currentColor */
	left: -4px;
	width: 220px;
	flex-shrink: 0;
}
#logo img, #logo svg{
	width: auto;
}


/* ============================================================
   TOGGLE NAV BUTTON
   ============================================================ */

.toggle-nav{
	position: relative;
	top: -2px;
	right: -6px;
}


/* ============================================================
   NAVIGATION — MOBILE (default)
   ============================================================ */

#nav{
	position: relative;
	z-index: 100;
	width: 100%;
	transition: height .2s ease-out;
	pointer-events: none;
}
.nav-expanded #nav{
	pointer-events: auto;
}
#nav ul{
	margin: 44px 0;
	padding: 0;
	list-style: none;
}
#nav li{
	position: relative;
	display: block;
	width: 100%;
	margin: 2px 0;
	padding: 0;
	list-style: none;
}
#nav a{
	position: relative;
	display: inline-block;
	width: calc( 100% - 50px );
	padding: 12px 0;
	font-size: 18px;
	color: inherit;
	font-weight: 300;
	text-decoration: none;
	transition: border .5s;
}
#nav a:hover{
	border-color: var(--palette-rose);
}

/* --- Submenu toggle (mobile) --- */

#nav a.toggle-children{
	position: absolute;
	top: 14px;
	right: 8px;
	display: block;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0 !important;
	outline: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='8.4 6.92 13.48 12 8.4 17.08 9.81 18.49 16.31 12 9.81 5.51 8.4 6.92'/%3E%3C/svg%3E") no-repeat center center / 24px 24px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='8.4 6.92 13.48 12 8.4 17.08 9.81 18.49 16.31 12 9.81 5.51 8.4 6.92'/%3E%3C/svg%3E") no-repeat center center / 24px 24px;
	transform: rotate(90deg);
	transition: transform .25s;
}
#nav a.toggle-children.active{
	transform: rotate(270deg);
}

/* --- Sub-menus (mobile) --- */

#nav ul ul{
	display: none;
	margin: 0;
}
#nav li li{ max-width: 420px; border-bottom: 0; }
#nav li li:first-child{	margin-top: 0; }
#nav li li:last-child{ padding-bottom: 24px; }
#nav li li a{
	padding: 8px 0 8px 24px;
	font-size: 14px;
}
#nav .current-menu-item li a,
#nav .current_page_item li a{
	border-color: var(--palette-rose);
}
#nav li .current-menu-item a{
	opacity: .5;
}
#nav .current-menu-item li a:hover,
#nav .current_page_item li a:hover{
	border-color: var(--palette-rose);
}


/* ============================================================
   MEGA DROPDOWN
   ============================================================ */

#nav .mega-dropdown li{
	margin-bottom: 24px;
}
#nav .mega-dropdown li span.menu-item-title{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	margin-bottom: 4px;
	font-size: 18px;
	line-height: 1.15;
	font-weight: 600;
}
#nav .mega-dropdown li span.menu-item-title::before{
	width: 32px;
	height: 32px;
	margin-right: 6px;
	content: "";
	border-radius: 100px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
	transition: all .25s;
}
#nav .mega-dropdown li span.menu-item-description{
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 1.37;
	font-weight: 400;
}
#nav .mega-dropdown li span.menu-item-readmore{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	font-weight: 600;
}
#nav .mega-dropdown li span.menu-item-readmore::after{
	width: 24px;
	height: 24px;
	margin-left: 8px;
	font-size: 14px;
	font-weight: 300;
	content: "";
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E") no-repeat center center / 24px 24px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E") no-repeat center center / 24px 24px;
	transition: margin .25s;
}
#nav .mega-dropdown li a:hover span.menu-item-readmore::after{
	margin-left: 16px;
}


/* ============================================================
   FEATURED DROPDOWN
   First child: rich mega-style item. Remaining: plain links.
   Classes: dropdown-featured / dropdown-featured-2cols
   ============================================================ */

#nav .dropdown-featured li:first-child,
#nav .dropdown-featured-2cols li:first-child{
	margin-bottom: 24px;
}
#nav .dropdown-featured li:first-child span.menu-item-title,
#nav .dropdown-featured-2cols li:first-child span.menu-item-title{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	margin-bottom: 4px;
	font-size: 18px;
	line-height: 1.15;
	font-weight: 600;
}
#nav .dropdown-featured li:first-child span.menu-item-title::before,
#nav .dropdown-featured-2cols li:first-child span.menu-item-title::before{
	width: 32px;
	height: 32px;
	margin-right: 6px;
	content: "";
	border-radius: 100px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
	transition: all .25s;
}
#nav .dropdown-featured li:first-child a:hover span.menu-item-title::before,
#nav .dropdown-featured-2cols li:first-child a:hover span.menu-item-title::before{
	opacity: 0.6;
}
#nav .dropdown-featured li:first-child span.menu-item-description,
#nav .dropdown-featured-2cols li:first-child span.menu-item-description{
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 1.37;
	font-weight: 400;
}
#nav .dropdown-featured li:first-child span.menu-item-readmore,
#nav .dropdown-featured-2cols li:first-child span.menu-item-readmore{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	font-weight: 600;
}
#nav .dropdown-featured li:first-child span.menu-item-readmore::after,
#nav .dropdown-featured-2cols li:first-child span.menu-item-readmore::after{
	position: static;
	top: auto;
	display: block;
	width: 24px;
	height: 24px;
	margin-left: 8px;
	font-size: 14px;
	font-weight: 300;
	transform: none;
	content: "";
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E") no-repeat center center / 24px 24px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E") no-repeat center center / 24px 24px;
	transition: margin .25s;
}
#nav .dropdown-featured li:first-child a:hover span.menu-item-readmore::after,
#nav .dropdown-featured-2cols li:first-child a:hover span.menu-item-readmore::after{
	margin-left: 16px;
}


/* ============================================================
   NAV ICON OVERRIDES
   Shared across mega-dropdown and dropdown-featured variants.
   span.menu-item-title is only injected by abrovink_prefix_nav_description
   so these broad selectors are safe. Must stay after all ::before defaults.
   Default icon (specificity 113) is set here so icon-* classes (123) beat it.
   ============================================================ */


/*
#nav li span.menu-item-title::before{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='15.98 8.14 14.57 6.73 10.78 10.52 9.43 9.17 8.02 10.59 10.78 13.35 15.98 8.14'/%3E%3Cpath class='cls-1' d='M4.05,2.43v19.81l7.95-4.2,7.95,4.2V2.43H4.05ZM17.95,18.91l-5.95-3.15-5.95,3.15V4.43h11.89v14.49Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='15.98 8.14 14.57 6.73 10.78 10.52 9.43 9.17 8.02 10.59 10.78 13.35 15.98 8.14'/%3E%3Cpath class='cls-1' d='M4.05,2.43v19.81l7.95-4.2,7.95,4.2V2.43H4.05ZM17.95,18.91l-5.95-3.15-5.95,3.15V4.43h11.89v14.49Z'/%3E%3C/svg%3E");
}
#nav li.icon-proposal span.menu-item-title::before{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='15.98 8.14 14.57 6.73 10.78 10.52 9.43 9.17 8.02 10.59 10.78 13.35 15.98 8.14'/%3E%3Cpath class='cls-1' d='M4.05,2.43v19.81l7.95-4.2,7.95,4.2V2.43H4.05ZM17.95,18.91l-5.95-3.15-5.95,3.15V4.43h11.89v14.49Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='15.98 8.14 14.57 6.73 10.78 10.52 9.43 9.17 8.02 10.59 10.78 13.35 15.98 8.14'/%3E%3Cpath class='cls-1' d='M4.05,2.43v19.81l7.95-4.2,7.95,4.2V2.43H4.05ZM17.95,18.91l-5.95-3.15-5.95,3.15V4.43h11.89v14.49Z'/%3E%3C/svg%3E");
}
#nav li.icon-antiloop span.menu-item-title::before{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M21.2,12c0,1.32-1.08,2.4-2.4,2.4s-2.4-1.08-2.4-2.4h-2c0,2.43,1.97,4.4,4.4,4.4s4.4-1.97,4.4-4.4h-2Z'/%3E%3Cpath class='cls-1' d='M7.6,12.01h2c0-2.43-1.97-4.4-4.4-4.4S.8,9.58.8,12.01h2c0-1.32,1.08-2.4,2.4-2.4s2.4,1.08,2.4,2.4Z'/%3E%3Cpath class='cls-1' d='M17.8,12h2c0-2.43-1.97-4.4-4.4-4.4s-4.4,1.97-4.4,4.4c0,1.32-1.08,2.4-2.4,2.4s-2.4-1.08-2.4-2.4h-2c0,2.43,1.97,4.4,4.4,4.4s4.4-1.97,4.4-4.4c0-1.32,1.08-2.4,2.4-2.4s2.4,1.08,2.4,2.4Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M21.2,12c0,1.32-1.08,2.4-2.4,2.4s-2.4-1.08-2.4-2.4h-2c0,2.43,1.97,4.4,4.4,4.4s4.4-1.97,4.4-4.4h-2Z'/%3E%3Cpath class='cls-1' d='M7.6,12.01h2c0-2.43-1.97-4.4-4.4-4.4S.8,9.58.8,12.01h2c0-1.32,1.08-2.4,2.4-2.4s2.4,1.08,2.4,2.4Z'/%3E%3Cpath class='cls-1' d='M17.8,12h2c0-2.43-1.97-4.4-4.4-4.4s-4.4,1.97-4.4,4.4c0,1.32-1.08,2.4-2.4,2.4s-2.4-1.08-2.4-2.4h-2c0,2.43,1.97,4.4,4.4,4.4s4.4-1.97,4.4-4.4c0-1.32,1.08-2.4,2.4-2.4s2.4,1.08,2.4,2.4Z'/%3E%3C/svg%3E");
}
#nav li a:hover span.menu-item-title::before{
	opacity: 0.6;
}
*/


/* ============================================================
   #MAIN OFFSET
   ============================================================ */

#main{
	margin-top: var(--header-height);
	transition: all .4s ease;
}


/* ============================================================
   MOBILE NAV ANIMATION
   ============================================================ */

@media (max-width: 1023px) {

	#nav li{
		opacity: 0;
	}
	.nav-expanded #nav li{
		-webkit-animation: fadeinmenu .75s 1;
				animation: fadeinmenu .75s 1;
		-webkit-animation-fill-mode: forwards;
				animation-fill-mode: forwards;
	}
	.nav-expanded #nav li:nth-child(1){-webkit-animation-delay: .20s; animation-delay: .20s;}
	.nav-expanded #nav li:nth-child(2){-webkit-animation-delay: .27s; animation-delay: .27s;}
	.nav-expanded #nav li:nth-child(3){-webkit-animation-delay: .34s; animation-delay: .34s;}
	.nav-expanded #nav li:nth-child(4){-webkit-animation-delay: .41s; animation-delay: .41s;}
	.nav-expanded #nav li:nth-child(5){-webkit-animation-delay: .48s; animation-delay: .48s;}
	.nav-expanded #nav li:nth-child(6){-webkit-animation-delay: .55s; animation-delay: .55s;}
	.nav-expanded #nav li:nth-child(7){-webkit-animation-delay: .62s; animation-delay: .62s;}
	.nav-expanded #nav li:nth-child(8){-webkit-animation-delay: .69s; animation-delay: .69s;}
	.nav-expanded #nav li:nth-child(9){-webkit-animation-delay: .76s; animation-delay: .76s;}
	.nav-expanded #nav li:nth-child(10){-webkit-animation-delay: .81s; animation-delay: .81s;}
	.nav-expanded #nav li:nth-child(11){-webkit-animation-delay: .95s; animation-delay: .95s;}

	@keyframes fadeinmenu { from {opacity: 0; padding-left: 20px; padding-right: 0; } to {opacity: 1; padding-left: 0px; padding-right: 20px; } }
	#nav li a{
		transition: opacity .5s, margin .5s;
	}


	/* --- Hamburger — squeeze animation --- */

	.hamburger {
		display: inline-block;
		margin: 0;
		padding: 5px;
		font: inherit;
		color: inherit;
		font-size: 1px;
		line-height: 1px;
		text-transform: none;
		background-color: transparent;
		border: 0;
		overflow: visible;
		cursor: pointer;
		transition-property: opacity, filter;
		transition-duration: 0.15s;
		transition-timing-function: linear;
	}
	.hamburger:hover {
		opacity: 0.6;
	}
	.hamburger.is-active:hover {
		opacity: 0.6;
	}
	.hamburger:focus{
		outline: none;
	}
	.hamburger-box {
		position: relative;
		display: inline-block;
		width: 27px;
		height: 27px;
	}
	.hamburger-inner {
		display: block;
		top: 50%;
		margin-top: -1.5px; /* half the bar height, keeps the middle bar centred */
	}
	.hamburger-inner,
	.hamburger-inner::before,
	.hamburger-inner::after {
		width: 27px;
		height: 3px;
		background-color: var(--palette-black);
		border-radius: 0;
		position: absolute;
		transition-property: transform;
		transition-duration: 0.15s;
		transition-timing-function: ease;
	}
	.hamburger-inner::before, .hamburger-inner::after {
		content: "";
		display: block;
	}
	.hamburger-inner::before {
		top: -8px;
	}
	.hamburger-inner::after {
		bottom: -8px;
	}
	.hamburger--squeeze .hamburger-inner {
		transition-duration: 0.075s;
		transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}
	.hamburger--squeeze .hamburger-inner::before {
		transition: top 0.075s 0.12s ease, opacity 0.075s ease;
	}
	.hamburger--squeeze .hamburger-inner::after {
		transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}
	.hamburger--squeeze.is-active .hamburger-inner {
		transform: rotate(45deg);
		transition-delay: 0.12s;
		transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	.hamburger--squeeze.is-active .hamburger-inner::before {
		top: 0;
		opacity: 0;
		transition: top 0.075s ease, opacity 0.075s 0.12s ease;
	}
	.hamburger--squeeze.is-active .hamburger-inner::after {
		bottom: 0;
		transform: rotate(-90deg);
		transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
	}

}


/* ============================================================
   DESKTOP NAV
   ============================================================ */

@media (min-width: 1024px) {
	
	#header,
	.nav-expanded #header,
	.scrolling #header,
	.scrolling.nav-expanded #header{
		width: 100%;
	}
	#header:hover{
		overflow: visible;
	}
	#header .container{
		display: flex;
		flex-flow: row nowrap;
		align-items: stretch;
		margin: 0 auto;
		padding: 0;
	}
	#logo{
		width: 260px;
		margin-top: 14px;
		margin-right: 20px;
		align-items: stretch;
		align-content: center;
	}
	.toggle-nav{
		display: none;
	}

	/* --- Horizontal nav --- */

	#nav{
		width: calc(100% - 100px);
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		margin: 0;
		padding: 0;
		opacity: 1;
		line-height: 16px;
		overflow: visible;
		pointer-events: initial;
	}
	#nav ul{
		float: none;
		width: auto;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
	}
	#nav li{
		height: var(--header-height);
		display: flex;
		align-items: flex-end;
		flex-grow: 0;
		margin: 0;
		padding: 0;
		overflow: visible;
		white-space: nowrap;
		border-bottom: 0;
		opacity: 1;
	}
	#nav li a{
		width: 100%;
		margin: 0 10px;
		padding: 0 0 16px 0;
		font-size: 15px;
		line-height: 18px;
		font-weight: 300;
	}

	/* --- Hover underline --- */

	#nav li > a::after{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 0;
		height: 3px;
		background: var(--palette-rose);
		content: "";
		transition: width .2s ease-out;
	}
	#nav li:hover > a::after{
		width: 100%;
	}
	#nav li a.toggle-children{
		display: none;
	}

	/* --- Current menu states --- */

	#nav li.current-menu-item > a,
	#nav li.current_page > a,
	#nav li.current_page_item > a,
	#nav li.current-menu-ancestor > a{
		text-decoration: none;
	}
	#nav li.current-menu-item  > a::after,
	#nav li.current_page > a::after,
	#nav li.current_page_item > a::after,
	#nav li.current-menu-ancestor > a::after{
		width: 100%;
		opacity: 1;
	}

	#nav li.last-in-line a{
		margin-right: 0;
		padding-right: 0;
	}
	
	/* --- Language switcher --- */
	#nav li.language-switcher,
	#nav li.lang-item{
		position: absolute;
		top: 0;
		right: 0;
		width: auto;
		height: auto;
		margin: 0;
		padding: 6px 12px 6px 12px;
		color: var(--palette-white);
		background-color: var(--palette-black);
	}
	#nav li.language-switcher a,
	#nav li.lang-item a{
		margin: 0;
		padding: 0;
		font-size: .75em;
	}
	#nav li.language-switcher a::after,
	#nav li.lang-item a::after{
		display: none;
	}

	/* --- Has-children arrow indicator --- */

	#nav li.menu-item-has-children a span::after{
		position: relative;
		top: 6px;
		display: inline-block;
		width: 24px;
		height: 24px;
		margin-left: 2px;
		padding: auto;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='8.4 6.92 13.48 12 8.4 17.08 9.81 18.49 16.31 12 9.81 5.51 8.4 6.92'/%3E%3C/svg%3E") no-repeat center center / 24px 24px;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='8.4 6.92 13.48 12 8.4 17.08 9.81 18.49 16.31 12 9.81 5.51 8.4 6.92'/%3E%3C/svg%3E") no-repeat center center / 24px 24px;
		content: "";
		transform: rotate(90deg);
		transition: transform .2s;
		transition-delay: .15s;
	}
	#nav li.menu-item-has-children:hover a span::after{
		transform: rotate(270deg);
	}

	/* --- Desktop dropdowns (level 2) --- */

	#nav li ul{
		position: absolute;
		left: 0;
		top: 100%;
		display: block;
		min-width: 600px;
		margin: 0 0 0 8px;
		padding: 24px 0;
		opacity: 0;
		background: var(--palette-white);
		transition: margin .75s, opacity .25s;
		pointer-events: none;
	}
	#nav ul li:hover ul{
		opacity: 1;
		transition: margin .5s, opacity .5s;
		pointer-events: auto;
	}

	/* Dropdown white overlay */
	#nav li.menu-item-has-children ul::before{
		position: fixed;
		left: 0;
		top: var(--header-height);
		z-index: 0;
		width: 100vw;
		height: 0;
		background: rgba(255,255,255, 1);
		content: "";
		pointer-events: none;
		transition: margin .4s ease, height .25s, opacity .25s;
	}
	#nav li.menu-item-has-children:hover ul::before{
		height: 320px;
	}

	/* --- Dropdown items --- */

	#nav li li{
		position: relative;
		display: none;
		height: auto;
		white-space: normal;
		margin: 0;
		padding: 0;
		background-image: none;
	}
	#nav li li:last-child{
		padding-bottom: 16px;
	}
	#nav ul li:hover ul li{
		display: block;
		float: none;
		clear: both;
	}
	#nav li li a,
	#nav li .current-menu-item > a,
	#nav li .current_page > a,
	#nav li .current_page_item > a,
	#nav li .current-menu-ancestor > a{
		display: inline-block;
		margin: 0;
		padding: 0;
		padding: 12px 8px;
	}
	#nav li li a::after{
		display: none;
	}

	/* Dropdown arrow (right-pointing) */
	#nav li.menu-item-has-children li a span::after{
		top: 0;
		width: 22px;
		height: 22px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E") no-repeat center center / 22px 22px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E") no-repeat center center / 22px 22px;
		transform: rotate(0) !important;
		transition: margin-left .2s;
		transition-delay: 0;
	}
	#nav li.menu-item-has-children:hover li:hover a span::after{
		transform: rotate(0) !important;
		margin-left: 16px;
	}

	#nav li .current-menu-item,
	#nav li .current_page,
	#nav li .current_page_item,
	#nav li .current-menu-ancestor{
		border-bottom: 0;
	}
	#nav li:not(.mega-dropdown) li a span::after{
		top: 6px;
		margin-left: 8px;
	}

	/* Columned dropdown */
	#nav ul li.dropdown-2columns ul{
		column-count: 2;
		column-gap: 32px;
	}

	/* Mega dropdown (desktop) */
	#nav .mega-dropdown ul{
		min-width: 800px;
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: flex-start;
	}
	#nav .mega-dropdown li{
		width: 50%;
		min-width: 260px;
		padding-right: 24px;
	}
	/* remove lots of extra arrows */
	#nav li.mega-dropdown li a :not(span.menu-item-readmore)::after{
		display: none;
	}

	/* Featured dropdown (desktop) */
	#nav .dropdown-featured ul,
	#nav .dropdown-featured-2cols ul{
		display: grid;
		gap: 0 32px;
		align-items: start;
	}
	#nav .dropdown-featured ul{
		grid-template-columns: 260px 1fr;
		min-width: 580px;
	}
	#nav .dropdown-featured-2cols ul{
		grid-template-columns: 260px 1fr 1fr;
		min-width: 820px;
	}
	#nav .dropdown-featured li:first-child,
	#nav .dropdown-featured-2cols li:first-child{
		grid-row: 1 / span 99;
		padding-right: 32px;
		border-right: 1px solid var(--color-border);
		margin-bottom: 0;
	}
	/* Remove arrows from featured item (readmore has its own) */
	#nav li.dropdown-featured li:first-child a :not(span.menu-item-readmore)::after,
	#nav li.dropdown-featured-2cols li:first-child a :not(span.menu-item-readmore)::after{
		display: none;
	}

}


/* ============================================================
   WIDER DESKTOP
   ============================================================ */

@media (min-width: 1280px) {

	#logo{
		width: 340px;
		margin-top: 20px;
	}
	
	#nav li a{
		margin: 0 12px;
		padding: 0 0 18px 0;
		font-size: 17px;
		line-height: 18px;
	}

}

/* Wider nav item spacing on large screens */
@media (min-width: 1441px) {

	#nav li a{
		margin: 0 18px;
	}

}







/* ============================================================
   FOOTER STYLES
   ============================================================ */

#footer{
	padding: var(--padding-content) 0;
	font-size: 14px;
	font-weight: 300;
	color: var(--palette-white);
	background-color: var(--palette-black);
}

#footer h3.widget-title{
	display: none;
}

#footer .widget p{
	margin-bottom: 1em;
}

#footer .widget{
	margin-bottom: 24px;
}

#footer .widget:first-child{
	max-width: 88px;
}

#footer .widget:nth-child(2){
	padding-right: 20px;
}

#footer .widget:nth-child(4){
	max-width: 160px;
}

#footer .widget:last-child{
	width: 100%;
	float: none;
	clear: both;
	padding-top: 24px;
	margin-bottom: 0;
	opacity: 1;
}

#footer .sponsors{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.sponsors img.malmostad{
	width: 50px;
}

.sponsors img.regionskane{
	width: 60px;
	margin: 10px 24px 0 24px;
}

.sponsors img.kulturradet{
	width: 160px;
	margin-top: 20px;
}


@media screen and (min-width: 440px){
	
	#footer .widget:nth-child(4){
		max-width: 360px;
	}

}

@media screen and (min-width: 768px){
	
	#footer .widgets{
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		gap: var(--gap-columns);
	}
	
	#footer .widget:first-child{
		max-width: 154px;
		padding-top: 6px;
		padding-right: 8px;
	}

}

@media screen and (min-width: 1280px){
	
	#footer .widget{
		margin-bottom: 0;
	}
	
	#footer .widget:nth-child(4){
		width: auto;
		flex-grow: 1;
		max-width: 100%;
		text-align: right;
	}
	
	#footer .widget .sponsors{
		margin-left: auto;
		max-width: 360px;
	}
	
	.sponsors img.malmostad{
		order: 3;
	}

	.sponsors img.regionskane{
		order: 2;
	}

	.sponsors img.kulturradet{
		order: 1;
	}
	
	#footer .widget:last-child{
		padding-top: 0;
	}

}


/* ============================================================
   NAV UTILITIES  ("Inloggad som … · Logga ut" + language switch)
   Markup from abrovink_nav_utils() in functions-language.php,
   placed inside #nav after the menu. Mobile: last entries in the
   toggle menu. Desktop: small line in the empty space above the
   nav links, right-aligned.
   ============================================================ */

.nav-utils{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25em 1.5em;
	margin: -20px 0 44px;
	font-size: var(--font-size-sm);
	line-height: 1.5;
	color: var(--palette-black);
}
/* Reset the generic #nav a link styling (18px, block, padding) */
#nav .nav-utils a{
	position: static;
	display: inline-block;
	width: auto;
	margin: 0;
	padding: .35em 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	border: 0;
	text-decoration: underline;
	text-underline-offset: .2em;
	transition: none;
}
#nav .nav-utils a:hover{
	text-decoration: none;
}
#nav .member-status a{
	margin-left: .75em;
}

@media (min-width: 1024px) {

	.nav-utils{
		position: absolute;
		top: 16px;
		right: 10px;              /* lines up with the last nav link (margin 0 10px) */
		gap: 0 1.5em;
		margin: 0;
		font-size: var(--font-size-xs);
		line-height: 1;
		white-space: nowrap;
	}
	#nav .nav-utils a{
		padding: 0;
	}

}

@media (min-width: 1280px) {

	.nav-utils{
		top: 22px;
		right: 12px;              /* nav link margin is 0 12px here */
	}

}

@media (min-width: 1441px) {

	.nav-utils{
		right: 18px;              /* nav link margin is 0 18px here */
	}

}
