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

/* ------------------------------------------------------------
   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
   (ligger i header.header)
------------------------------------------------------------ */
body header.header div#filterPanel {
	position: fixed;
	top: var(--header-height);
	left: 0;
	bottom: 0;
	width: var(--panel-width-desktop);
	overflow: hidden; /* scroll håndteres av innhold */
	z-index: 1001;
}

/* ------------------------------------------------------------
   HAMBURGERPANEL
   (ligger i header.header)
------------------------------------------------------------ */
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;
}

/* ------------------------------------------------------------
   CANVAS
------------------------------------------------------------ */
body div#canvas {
	position: relative;
	padding-top: var(--header-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 – SIDE-BY-SIDE
	-------------------------------------------------------- */
	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;
	}

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

@media (max-width: 800px) {
	/* ============================================================
   xyz.css – MOBILE FIRST
============================================================ */

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

	/* ------------------------------------------------------------
   PANELS – MOBILE (overlay, full bredde)
------------------------------------------------------------ */
	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;
	}

	/* (JS styrer translateX til 0 når åpne – dette har du allerede) */

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

	body div#canvas div#contentWrapper {
		position: relative;
		width: 100vw;
		max-width: 100vw;
		margin: 0 auto;
	}

	body div#canvas div#contentWrapper main#contentContainer {
		position: relative;
		width: 100%;
		min-height: 100%;
	}

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