/*
Path: 12/css/contextLayer.css  
CSS for contextLayer section
*/
#contextLayer {
	position: relative;
	width: 100%;
	background-color: var(--bg-panel);
	box-sizing: border-box;
	/* background-color: bisque; */
}

#contextLayer .context-inner {
	position: relative;
	width: 90%;
	max-width: 90%;
	/* background-color: rgb(169, 230, 27); */
}

.context-map {
	display: flex;
	flex-wrap: wrap; /* wrapper på smale skjermer */
	align-items: center;
	justify-content: space-between; /* spre horisontalt */
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--gap-sm);
	font-size: 1.25rem;
}

.context-root {
	font-weight: 600;
	margin-right: var(--gap-lg);
	white-space: nowrap;
}

/* --------------------------------------------------
   KONTEKSTSTRIPE (medie-modus etc.)
-------------------------------------------------- */
.context-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.context-pill {
	background: #f8f2f2;
	z-index: 7;
	border-radius: 999px;
	padding: 6px 8px;
	font-size: 0.8rem;
	white-space: nowrap;
}
.context-pill:nth-of-type(odd) {
	background: #eaeef0;
}

.context-year {
	font-weight: bold;
}

.context-clear {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;

	background: transparent;
	border: none;

	color: #c0392b; /* tydelig rød */
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1;

	cursor: pointer;
}

.context-clear:hover {
	color: #e74c3c;
}

#contextLayer .w3-card {
	position: relative;
}