/* ============================================================
   xyz.css
   Layout-skall for viewport-struktur
   Eier KUN: posisjon, høyde, bredde, plassering
============================================================ */

/* ------------------------------------------------------------
   ROOT VARS
------------------------------------------------------------ */
:root {
	--context-layer-height: 72px; /* juster om nødvendig */
}

/* ------------------------------------------------------------
   BODY
------------------------------------------------------------ */
body {
	overflow-x: hidden;
}

/* ------------------------------------------------------------
   HEADER
------------------------------------------------------------ */
body header.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--header-height);
	z-index: 1000;
}

/* ------------------------------------------------------------
   FILTERPANEL
------------------------------------------------------------ */
body header.header div#filterPanel {
	position: fixed;
	top: var(--header-height);
	left: 0;
	bottom: 0;
	width: var(--panel-width-desktop);
	overflow: hidden;
	z-index: 1001;
}

/* ------------------------------------------------------------
   HAMBURGERPANEL
------------------------------------------------------------ */
body header.header div#hamburgerPanel {
	position: fixed;
	top: var(--header-height);
	right: 0;
	bottom: 0;
	width: var(--panel-width-desktop);
	overflow: hidden;
	z-index: 1001;
}

/* ------------------------------------------------------------
   LOGO / HOME LINK
------------------------------------------------------------ */
body #home-link {
	position: fixed;
	top: calc(var(--header-height) + var(--gap-sm));
	left: var(--gap-sm);
	z-index: 1100;
}

/* ------------------------------------------------------------
   CONTEXT LAYER (FAST, KOLONNEBUNDET)
------------------------------------------------------------ */
body #contextLayer {
	position: fixed;
	top: var(--header-height);
	height: var(--context-layer-height);
	z-index: 900;
}

/* ------------------------------------------------------------
   CANVAS
------------------------------------------------------------ */
body div#canvas {
	position: relative;
	padding-top: calc(var(--header-height) + var(--context-layer-height));
	min-height: 100vh;
}

/* ------------------------------------------------------------
   CONTENT WRAPPER
------------------------------------------------------------ */
body div#canvas div#contentWrapper {
	position: relative;
	min-height: calc(100vh - var(--header-height));
}

/* ------------------------------------------------------------
   MAIN CONTENT
------------------------------------------------------------ */
body div#canvas div#contentWrapper main#contentContainer {
	position: relative;
	min-height: 100%;
}

/* ============================================================
   DESKTOP / STØRRE SKJERMER
============================================================ */
@media (min-width: 801px) {
	/* --------------------------------------------------------
	   PANELS
	-------------------------------------------------------- */
	body header.header div#filterPanel {
		left: 0;
		right: auto;
		width: 25vw;
		transform: none;
	}

	body header.header div#hamburgerPanel {
		right: 0;
		left: auto;
		width: 25vw;
		transform: none;
	}

	/* --------------------------------------------------------
	   CONTENT – MIDTKOLONNE
	-------------------------------------------------------- */
	body div#canvas div#contentWrapper {
		width: 50vw;
		max-width: 50vw;
		margin-left: 25vw;
	}

	/* --------------------------------------------------------
	   CONTEXT LAYER – SAMME GEOMETRI SOM KOLONNEN
	-------------------------------------------------------- */
	body #contextLayer {
		width: 50vw;
		left: 25vw;
	}

	/* --------------------------------------------------------
	   HOME LINK – DESKTOP
	-------------------------------------------------------- */
	body #home-link {
		top: calc(var(--header-height) + var(--gap-sm));
		left: var(--gap-sm);
		bottom: auto;
		right: auto;
		width: auto;
	}
}

/* ============================================================
   MOBILE
============================================================ */
@media (max-width: 800px) {
	/* --------------------------------------------------------
	   PANELS – OVERLAY
	-------------------------------------------------------- */
	body header.header div#filterPanel,
	body header.header div#hamburgerPanel {
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		transform: translateX(100%);
		z-index: 1001;
	}

	/* --------------------------------------------------------
	   CONTENT – FULL BREDD
	-------------------------------------------------------- */
	body div#canvas div#contentWrapper {
		width: 100vw;
		max-width: 100vw;
		margin: 0 auto;
	}

	/* --------------------------------------------------------
	   CONTEXT LAYER – FULL BREDD
	-------------------------------------------------------- */
	body #contextLayer {
		width: 100vw;
		left: 0;
		right: 0;
	}

	/* --------------------------------------------------------
	   HOME LINK – MOBILE
	-------------------------------------------------------- */
	body #home-link {
		position: fixed;
		bottom: var(--gap-md);
		right: var(--gap-md);
		width: 16vw;
		max-width: 64px;
		z-index: 1100;
	}
}