:root {
	--sibk-menu-purple: #653778;
	--sibk-menu-hover: #e7c77a;
	--sibk-menu-dark: #261432;
	--sibk-safe-top: env(safe-area-inset-top, 0px);
	--sibk-safe-right: env(safe-area-inset-right, 0px);
	--sibk-safe-left: env(safe-area-inset-left, 0px);
}

.sibk-smart-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 12;
	padding-top: var(--sibk-safe-top);
	transform: translate3d(0, 0, 0);
	transition: transform 240ms ease, visibility 240ms ease;
	will-change: transform;
}

.sibk-smart-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 108px;
	padding: 16px max(28px, calc(22px + var(--sibk-safe-right))) 16px max(28px, calc(22px + var(--sibk-safe-left)));
	transition: min-height 240ms ease, padding 240ms ease;
}

.sibk-smart-header__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: opacity 180ms ease, transform 240ms ease, visibility 180ms ease;
}

.sibk-smart-header__logo img {
	display: block;
	width: 100px;
	height: 48px;
	object-fit: contain;
}

.sibk-smart-header .sibk-smart-header__toggle {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	margin: 0;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	box-shadow: none;
	transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.sibk-smart-header .sibk-smart-header__toggle .hamburguer {
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
}

.sibk-smart-header .sibk-smart-header__toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.sibk-smart-header--hidden {
	visibility: hidden;
	transform: translate3d(0, calc(-100% - 8px), 0);
}

.sibk-smart-header--compact .sibk-smart-header__inner {
	min-height: 72px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.sibk-smart-header--compact .sibk-smart-header__logo {
	visibility: hidden;
	opacity: 0;
	transform: translate3d(-12px, 0, 0);
	pointer-events: none;
}

.sibk-smart-header--compact .sibk-smart-header__toggle {
	border-color: var(--sibk-menu-purple);
	background: var(--sibk-menu-purple);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
}

.sibk-smart-header--compact .sibk-smart-header__toggle .hamburguer span {
	background: #fff;
}

body.sibk-menu-open .sibk-smart-header {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

html.side-header-overlay-full-screen #header {
	isolation: isolate;
	overflow: hidden;
	padding-top: var(--sibk-safe-top);
	padding-right: var(--sibk-safe-right);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	padding-left: var(--sibk-safe-left);
	background: linear-gradient(135deg, #261432 0%, #432252 54%, #653778 100%);
}

html.side-header-overlay-full-screen #header::before {
	content: "";
	position: absolute;
	right: -6vw;
	bottom: -18vh;
	z-index: 0;
	width: min(58vw, 760px);
	aspect-ratio: 1000 / 967;
	background: url("../img/stavanger/logo/lion_simple.png") center / contain no-repeat;
	opacity: 0.16;
	pointer-events: none;
}

html.side-header-overlay-full-screen #header .header-body {
	position: relative;
	z-index: 1;
}

html.side-header-overlay-full-screen #header .hamburguer-btn-side-header-overlay {
	top: max(18px, calc(10px + var(--sibk-safe-top)));
	right: max(20px, calc(14px + var(--sibk-safe-right)));
	z-index: 2;
}

/* Overstyrer Portos blå hoverfarge kun inne i hovedmenyen. */
html.side-header-overlay-full-screen #header .header-nav-main nav a {
	transition: color 180ms ease;
}

html.side-header-overlay-full-screen #header .header-nav-main nav a:hover,
html.side-header-overlay-full-screen #header .header-nav-main nav a:focus,
html.side-header-overlay-full-screen #header .header-nav-main nav li:hover > a,
html.side-header-overlay-full-screen #header .header-nav-main nav li.open > a {
	background-color: transparent !important;
	color: var(--sibk-menu-hover) !important;
	text-shadow: 0 0 18px rgba(231, 199, 122, 0.16);
}

html.side-header-overlay-full-screen #header .header-nav-main nav a:focus-visible {
	border-radius: 4px;
	outline: 2px solid rgba(231, 199, 122, 0.82);
	outline-offset: 5px;
}

/* Porto/NanoScroller: fjerner den blå scrollindikatoren i menyen. */
html.side-header-overlay-full-screen #header .scrollable.colored-slider .scrollable-pane,
html.side-header-overlay-full-screen #header .scrollable.colored-slider .nano-pane {
	background: rgba(38, 20, 50, 0.28) !important;
}

html.side-header-overlay-full-screen #header .scrollable.colored-slider .scrollable-slider,
html.side-header-overlay-full-screen #header .scrollable.colored-slider .nano-slider {
	background: var(--sibk-menu-hover) !important;
}

@media (max-width: 767px) {
	html.side-header-overlay-full-screen #header::before {
		right: -28vw;
		bottom: -5vh;
		width: min(105vw, 650px);
		opacity: 0.13;
	}

	.sibk-smart-header__inner {
		min-height: 96px;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.sibk-smart-header__logo img {
		width: 92px;
		height: 44px;
	}

	.sibk-smart-header .sibk-smart-header__toggle {
		width: 48px;
		height: 48px;
	}

	.sibk-smart-header--compact .sibk-smart-header__inner {
		min-height: 66px;
		padding-top: 9px;
		padding-bottom: 9px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sibk-smart-header,
	.sibk-smart-header__inner,
	.sibk-smart-header__logo,
	.sibk-smart-header .sibk-smart-header__toggle {
		transition: none;
	}
}