/* ==========================================================================
   artikler-side.css — arkivsiden /artikler/ (innlegg 17143)
   Lagt inn 11.10.2026 etter kladd godkjent av Lars.
   Lastes KUN paa denne siden, fra kgn_artikler_side_assets() i child functions.php.
   Palett og font foelger aktoerkort-designet som allerede er live (16-kortdesign-live.md):
   gronn #0f8f5f / #0f6b46, blekk #1f2937, dempet #6b7280, linje #e4e9ee, Inter.
   Sitewide-regler roeres ikke: alt henger paa body.page-id-17143 eller .kgn-ark.
   ========================================================================== */

/* --- 1. Sidens eget oppsett: innholdsspalten far hele sitegriden (1078px) ---
   Standard er .guider-blocks-info 720px + .guider-blocks-widget 270px ved siden av.
   Her legges delingsikonene under rutenettet i stedet, og spalten gar full bredde. */

body.page-id-17143 .article-block .guider-blocks-wrapper {
	flex-direction: column;
}

body.page-id-17143 .article-block .guider-blocks-info {
	max-width: 100%;
	top: 0;
}

body.page-id-17143 .article-block .guider-blocks-widget {
	max-width: 100%;
	margin-top: 8px;
	margin-bottom: 30px;
	order: 2;
}

body.page-id-17143 .article-block .guider-blocks-widget .shared-list {
	padding-left: 0;
	margin-top: 0;
}

/* Bildeplassen (siden har ingen utvalgt bilde) og Tilbake-lenka tar bare plass her.
   NB: .thumbnail-img inneholder blanktegn fra malen og treffes IKKE av :empty —
   den maa skjules direkte, ellers star margin-bottom: 50px igjen som dod luft. */
body.page-id-17143 .article-block .guider-blocks-info .thumbnail-img,
body.page-id-17143 .article-block .guider-blocks-info .back-button {
	display: none;
}

/* Byline (forfatter + dato) hoerer ikke hjemme pa en arkivside. */
body.page-id-17143 .hero-post .hero__slider-item-header {
	display: none;
}

body.page-id-17143 .hero-post .container {
	padding-bottom: 42px;
}

body.page-id-17143 .hero-post_description {
	font-size: 16px;
	line-height: 1.55;
	color: #4b5563;
	max-width: 60ch;
	margin-bottom: 0;
}

/* --- 2. Komponenten --- */

.kgn-ark {
	--ark-flate: #f6f8fa;
	--ark-kort: #ffffff;
	--ark-blekk: #1f2937;
	--ark-dempet: #6b7280;
	--ark-svak: #8a9199;
	--ark-aksent: #0f8f5f;
	--ark-aksent-dyp: #0f6b46;
	--ark-linje: #e4e9ee;
	margin: 10px 0;
}

/* --- 2a. Verktoeylinja --- */

.kgn-ark-verktoy {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	padding-bottom: 18px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--ark-linje);
}

.kgn-ark-sok {
	position: relative;
	flex: 1 1 300px;
	min-width: 0;
}

.kgn-ark-sok svg {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	color: var(--ark-svak);
	pointer-events: none;
}

.kgn-ark input[type="search"] {
	width: 100%;
	padding: 11px 14px 11px 38px;
	border: 1px solid var(--ark-linje);
	border-radius: 10px;
	background: var(--ark-kort);
	color: var(--ark-blekk);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}

.kgn-ark input[type="search"]::placeholder {
	color: var(--ark-svak);
}

.kgn-ark input[type="search"]:focus {
	outline: 2px solid var(--ark-aksent);
	outline-offset: 1px;
	border-color: transparent;
}

.kgn-ark-teller {
	font-size: 13.5px;
	color: var(--ark-dempet);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.kgn-ark-skjult {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- 2b. Rutenettet --- */

.kgn-ark-rutenett {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	align-items: start;
}

.kgn-ark-gruppe {
	background: var(--ark-kort);
	border: 1px solid var(--ark-linje);
	border-radius: 14px;
	padding: 18px 18px 12px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05);
	min-width: 0;
}

.kgn-ark-gruppe[hidden] {
	display: none;
}

.kgn-ark-topp {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 10px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--ark-linje);
}

/* Temaet setter h2 til 16px og styles.css gir overskrifter store marginer. */
.kgn-ark .kgn-ark-topp h2 {
	font-size: 15px !important;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	margin: 0 !important;
	color: var(--ark-blekk);
	text-wrap: balance;
}

.kgn-ark-antall {
	font-size: 12px;
	color: var(--ark-svak);
	font-variant-numeric: tabular-nums;
}

/* --- 2c. Lenkene. Temaets li-regler (punkt, check-ikon, padding) nulles ut. --- */

.kgn-ark ul.kgn-ark-lenker {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.kgn-ark ul.kgn-ark-lenker li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0;
	font-size: inherit;
	line-height: inherit;
}

.kgn-ark ul.kgn-ark-lenker li:before {
	content: none !important;
	display: none !important;
}

.kgn-ark ul.kgn-ark-lenker li[hidden] {
	display: none !important;
}

.kgn-ark ul.kgn-ark-lenker a {
	display: block;
	padding: 7px 8px !important;
	margin: 0 -8px;
	border-radius: 8px;
	font-size: 15px !important;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none !important;
	color: var(--ark-aksent) !important;
	overflow-wrap: anywhere;
}

.kgn-ark ul.kgn-ark-lenker a:hover,
.kgn-ark ul.kgn-ark-lenker a:focus {
	background: var(--ark-flate);
	color: var(--ark-aksent-dyp) !important;
}

.kgn-ark ul.kgn-ark-lenker a:focus-visible {
	outline: 2px solid var(--ark-aksent);
	outline-offset: -2px;
}

/* Framhevet inngang oeverst i en gruppe. */
.kgn-ark li.kgn-ark-hoved {
	padding-bottom: 6px !important;
	margin-bottom: 4px !important;
	border-bottom: 1px dashed var(--ark-linje);
}

.kgn-ark li.kgn-ark-hoved a {
	font-weight: 700;
	color: var(--ark-blekk) !important;
}

.kgn-ark li.kgn-ark-hoved a:after {
	content: "\203A";
	margin-left: 6px;
	color: var(--ark-aksent);
	font-weight: 700;
}

.kgn-ark li.kgn-ark-hoved a:hover {
	color: var(--ark-aksent-dyp) !important;
}

/* --- 2d. Tomt soek --- */

.kgn-ark .kgn-ark-tomt {
	margin: 24px 0 0 !important;
	color: var(--ark-dempet);
	font-size: 15px !important;
}

.kgn-ark .kgn-ark-tomt[hidden] {
	display: none !important;
}

/* --- 3. Mobil --- */

@media (max-width: 767px) {
	.kgn-ark-rutenett {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	body.page-id-17143 .article-block .guider-blocks-widget {
		margin-top: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kgn-ark * {
		transition: none !important;
		animation: none !important;
	}
}