:root {
	--hibk-menu-orange: #ff6b00;
	--hibk-menu-hover: #4a1909;
	--hibk-menu-dark: rgba(12, 12, 12, 0.86);
	--hibk-safe-top: env(safe-area-inset-top, 0px);
	--hibk-safe-right: env(safe-area-inset-right, 0px);
	--hibk-safe-left: env(safe-area-inset-left, 0px);
}

html,
body {
	background-color: #0c0c0c;
}

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

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

.hibk-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;
}

.hibk-smart-header__logo img {
	display: block;
	width: 46px;
	height: 60px;
	object-fit: contain;
}

.hibk-smart-header .hibk-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;
}

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

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

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

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

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

.hibk-smart-header--compact .hibk-smart-header__toggle {
	border-color: var(--hibk-menu-orange);
	background: var(--hibk-menu-orange);
	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%);
}

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

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

html.side-header-overlay-full-screen #header {
	isolation: isolate;
	overflow: hidden;
	padding-top: var(--hibk-safe-top);
	padding-right: var(--hibk-safe-right);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	padding-left: var(--hibk-safe-left);
	background:
		linear-gradient(135deg, rgba(199, 71, 11, 0.99) 0%, rgba(255, 107, 0, 0.99) 100%);
}

html.side-header-overlay-full-screen #header::before {
	content: "";
	position: absolute;
	right: -10vw;
	bottom: -20vh;
	z-index: 0;
	width: min(68vw, 900px);
	aspect-ratio: 1936 / 2048;
	background: rgba(63, 15, 2, 0.92);
	opacity: 0.10;
	-webkit-mask: url("../img/gaupe.png") center / contain no-repeat;
	mask: url("../img/gaupe.png") center / contain no-repeat;
	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(--hibk-safe-top)));
	right: max(20px, calc(14px + var(--hibk-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(--hibk-menu-hover) !important;
}

html.side-header-overlay-full-screen #header .header-nav-main nav a:focus-visible {
	border-radius: 4px;
	outline: 2px solid rgba(74, 25, 9, 0.72);
	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(74, 25, 9, 0.16) !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(--hibk-menu-hover) !important;
}

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

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

	.hibk-smart-header__logo img {
		width: 43px;
		height: 56px;
	}

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

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

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