/**
 * HN Sök — publik stil.
 *
 * Färgerna kommer ur Elementor Pro (kit 4987), samma som resten av sajten:
 * marinblå #00354E, guld #DD9B0C. Typsnittet ärvs av temat med flit — söket
 * ska se ut som Hitta Nynäshamn, inte som en insprängd modul.
 */

.hn-sok {
	--hn-sok-primar: #00354e;
	--hn-sok-primar-hover: #14526f;
	--hn-sok-accent: #dd9b0c;
	--hn-sok-text: #1f2937;
	--hn-sok-dampad: #646970;
	--hn-sok-kant: #dcdcde;

	/* Sajtens typsnitt, avläst ur Elementor-kit 4987. Ändras det där ska det
	   ändras här — HN Sök ska aldrig se ut som en insprängd modul. */
	--hn-sok-font: Arial, "Open Sans", sans-serif;

	font-family: var(--hn-sok-font);
	color: var(--hn-sok-text);
}

/*
 * TYPSNITTET GÄLLER HELA BLOCKET, inte element för element.
 *
 * Elementor-kitet stylar formulärfält OCH deras etiketter för sig, med Lato.
 * Ett <span> inuti en <label> ärver då Lato, hur många gånger vi än sätter
 * `font-family: inherit` på blocket — inherit tar från FÖRÄLDERN, och
 * föräldern var redan fel. Uppmätt 2026-08-19: filtrets fältnamn ritades i
 * Lato medan allt omkring dem var Arial.
 *
 * Attributselektorn ger specificitet (0,2,0) och vinner därför över
 * `.elementor-kit-4987 label` (0,1,1) utan !important. Den träffar allt vi
 * själva märkt med en hn-sok-klass, alltså exakt vårt eget och inget annat.
 */
.hn-sok [class*="hn-sok"] {
	font-family: var(--hn-sok-font);
}

/* ─────────────────────────────────────────────────────────────
   Innehållsbehållare — bara på söksidan

   Söksidan skapas programmatiskt och har ingen Elementor-container omkring
   sig. Utan de här reglerna klistras allt mot vänsterkanten. 1140 px är
   sajtens egen innehållsbredd (.elementor-section-boxed > .elementor-container,
   avläst på live 2026-08-19).

   Gäller INTE .hn-sok-ruta — en sökruta som läggs in i en Elementor-sektion
   ska följa sektionens bredd, inte tvinga fram en egen.
   ───────────────────────────────────────────────────────────── */

.hn-sok-sida {
	max-width: 1140px;
	margin: 0 auto;
	padding: 34px 20px 60px;
	box-sizing: border-box;
}

@media (max-width: 767px) {

	.hn-sok-sida {
		padding: 22px 16px 44px;
	}
}

/* ── Fristående sökruta: [hn_sok_ruta] ────────────────────────────────── */

/*
 * Standardtak. En sökruta som spänner över hela innehållsbredden läser som en
 * banner, inte som ett fält — särskilt med knappen i. Taket är en max-width,
 * så rutan krymper fortfarande fritt i smala spalter och på mobil.
 * Överskrids med attributet bredd="" eller inställningen i HN Sök.
 */
.hn-sok-ruta {
	max-width: 620px;
}

.hn-sok-ruta .hn-sok-form {
	margin: 0;
}

.hn-sok-ruta--stor .hn-sok-form {
	padding-left: 22px;
}

.hn-sok-ruta--stor .hn-sok-falt {
	padding: 15px 2px;
	font-size: 19px;
}

.hn-sok-ruta--stor .hn-sok-knapp {
	padding: 16px 36px;
	font-size: 17px;
}

.hn-sok-ruta--liten .hn-sok-form {
	padding: 3px 3px 3px 13px;
	border-width: 1px;
}

.hn-sok-ruta--liten .hn-sok-falt {
	padding: 8px 2px;
	font-size: 15px;
}

.hn-sok-ruta--liten .hn-sok-knapp {
	padding: 8px 20px;
	font-size: 14px;
}

.hn-sok-ruta--liten .hn-sok-ikon {
	width: 17px;
	height: 17px;
}

/* ─────────────────────────────────────────────────────────────
   Sökrutan

   TYPSNITT: sajten kör Arial överallt (Elementor kit 4987), men en temaregel
   sätter Lato på input och button. Fältet ritades därför i ett annat typsnitt
   än allt omkring det. Formulärelement ärver inte font-family av sig själva,
   så den måste sättas — och med tillräcklig specificitet för att vinna.

   FORM: fältet och knappen ligger i EN sammanhållen pill i stället för två
   lösa rutor bredvid varandra. Förstoringsglaset sitter inuti, till vänster.
   ───────────────────────────────────────────────────────────── */

.hn-sok,
.hn-sok input,
.hn-sok button,
.hn-sok select,
.hn-sok textarea {
	font-family: inherit;
}

/*
 * Elementor-kitet har en EGEN typografi för formulärfält och sätter Lato på
 * dem med `.elementor-kit-4987 input:not([type="button"]):not([type="submit"])`
 * — specificitet (0,3,1), vilket slår en vanlig klassregel. Selektorn nedan
 * ligger ett steg över utan !important.
 *
 * Vill du att ALLA formulär på sajten ska köra Arial ändras det på ett ställe
 * i stället: Elementor → Webbplatsinställningar → Typografi → Formulärfält.
 */
/*
 * Samma tröskel som typsnittet, av samma skäl.
 *
 * Elementor-kitet sätter EGEN bakgrund, kant och rundning på formulärfält med
 * `.elementor-kit-4987 input:not([type="button"]):not([type="submit"])`. Fältet
 * ritade därför en vit låda med raka hörn INUTI den rundade pillen — den syns
 * som "en vit konstig ruta" när man skriver, särskilt i sidhuvudet. Pillen ska
 * vara det enda som målar.
 */
.hn-sok .hn-sok-form input.hn-sok-falt[type="search"] {
	font-family: inherit;
	background: transparent;
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	min-height: 0;
	height: auto;
}

.hn-sok .hn-sok-form input.hn-sok-falt[type="search"]:focus,
.hn-sok .hn-sok-form input.hn-sok-falt[type="search"]:focus-visible,
.hn-sok .hn-sok-form input.hn-sok-falt[type="search"]:hover {
	background: transparent;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	outline: none;
}

.hn-sok .hn-sok-form input.hn-sok-falt[type="search"]::placeholder {
	font-family: inherit;
}

.hn-sok-form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 26px;
	padding: 5px 5px 5px 18px;
	background: #fff;
	border: 2px solid var(--hn-sok-kant);
	border-radius: 999px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.hn-sok-form:focus-within {
	border-color: var(--hn-sok-primar);
	box-shadow: 0 0 0 4px rgba(0, 53, 78, .09);
}

.hn-sok .hn-sok-ikon {
	flex: 0 0 auto;
	color: var(--hn-sok-dampad);
	transition: color .15s ease;
}

.hn-sok-form:focus-within .hn-sok-ikon {
	color: var(--hn-sok-primar);
}

.hn-sok .hn-sok-falt {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 2px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--hn-sok-text);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	appearance: none;
}

.hn-sok .hn-sok-falt:focus {
	border: 0;
	outline: none;
	box-shadow: none;
}

.hn-sok .hn-sok-falt::placeholder {
	color: var(--hn-sok-dampad);
	opacity: 1;
	font-weight: 400;
}

/* Webkits egen rensningsknapp krockar med pillens form. */
.hn-sok .hn-sok-falt::-webkit-search-cancel-button {
	appearance: none;
}

/* Krysset som tömmer fältet. Döljs med hidden tills något är skrivet. */
.hn-sok .hn-sok-rensa {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0 2px;
	padding: 0;
	color: var(--hn-sok-dampad);
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}

.hn-sok .hn-sok-rensa[hidden] {
	display: none;
}

.hn-sok .hn-sok-rensa:hover,
.hn-sok .hn-sok-rensa:focus-visible {
	color: var(--hn-sok-primar);
	background: #eef3f6;
}

.hn-sok .hn-sok-knapp {
	flex: 0 0 auto;
	padding: 12px 30px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	background: var(--hn-sok-primar);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease;
}

.hn-sok .hn-sok-knapp:hover,
.hn-sok .hn-sok-knapp:focus {
	background: var(--hn-sok-primar-hover);
	color: #fff;
}

/* ── Ingångar: kategorier och taggar ──────────────────────────────────── */

.hn-sok-rubrik-liten {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hn-sok-primar);
}

.hn-sok-ingangar-block {
	margin: 0 0 22px;
}

.hn-sok-ingangar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hn-sok-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 8px 15px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	color: var(--hn-sok-primar);
	background: #eef3f6;
	border: 1px solid transparent;
	border-radius: 999px;
	transition: background .15s ease;
}

.hn-sok-chip:hover,
.hn-sok-chip:focus {
	background: var(--hn-sok-primar);
	color: #fff;
}

.hn-sok-chip em {
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	opacity: .75;
}

/* Exakt namnträff — söker man "badplatser" är kategorin nästan alltid svaret. */
.hn-sok-chip--exakt {
	background: #fff;
	border-color: var(--hn-sok-accent);
	box-shadow: inset 0 -2px 0 var(--hn-sok-accent);
}

/* ── Sammanfattning och filter ────────────────────────────────────────── */

.hn-sok-sammanfattning {
	margin: 0 0 4px;
	font-size: 16px;
	color: var(--hn-sok-dampad);
}

.hn-sok-sammanfattning strong {
	color: var(--hn-sok-text);
}

/* Följdfrågan vid tvetydig sökning. Marinblå, inte grå — den ska läsas. */
.hn-sok-fraga {
	margin: 6px 0 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--hn-sok-primar);
}

.hn-sok-notis {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--hn-sok-dampad);
}

.hn-sok-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 14px 0 26px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--hn-sok-primar);
}

.hn-sok-filter-lank {
	padding: 8px 15px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	color: var(--hn-sok-primar);
	border-radius: 6px;
}

.hn-sok-filter-lank span {
	font-weight: 400;
	opacity: .7;
}

.hn-sok-filter-lank:hover {
	background: #eef3f6;
}

.hn-sok-filter-lank.is-aktiv {
	color: #fff;
	background: var(--hn-sok-primar);
}

.hn-sok-filter-lank.is-aktiv span {
	opacity: .85;
}

/* ── Grupper och träffar ──────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   Kategorikortet

   Söker någon exakt på en kategoris namn är kategorisidan nästan alltid
   svaret. Kortet gör den till sidans tyngsta element utan att ta ifrån
   besökaren valet — vi skickar aldrig dit automatiskt.
   ───────────────────────────────────────────────────────────── */

.hn-sok a.hn-sok-kategorikort {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 4px 18px;
	margin: 0 0 22px;
	padding: 18px 22px;
	text-decoration: none;
	color: var(--hn-sok-text);
	background: #e9f5ee;
	border: 1px solid #cfe6d9;
	border-radius: 12px;
	transition: background .15s ease, border-color .15s ease;
}

.hn-sok a.hn-sok-kategorikort:hover {
	background: #dcefe4;
	border-color: #17663d;
}

.hn-sok-kategorikort-etikett {
	grid-column: 1;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #17663d;
}

.hn-sok-kategorikort-namn {
	grid-column: 1;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: #17663d;
}

.hn-sok-kategorikort-antal {
	grid-column: 1;
	font-size: 15px;
	color: var(--hn-sok-dampad);
}

.hn-sok-kategorikort-knapp {
	grid-column: 2;
	grid-row: 1 / span 3;
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	color: #fff;
	background: #17663d;
	border-radius: 999px;
}

@media (max-width: 600px) {

	.hn-sok a.hn-sok-kategorikort {
		grid-template-columns: 1fr;
	}

	.hn-sok-kategorikort-knapp {
		grid-column: 1;
		grid-row: auto;
		margin-top: 10px;
		text-align: center;
	}

	.hn-sok-kategorikort-namn {
		font-size: 21px;
	}
}

/* ─────────────────────────────────────────────────────────────
   Filterraden

   EN rad med menyer, inte flera rader med chips. Två facetter gav fyra
   rader liten text ovanför resultatet, och det blir värre för varje ny
   facett. Menyer tar samma plats oavsett hur många värden de rymmer.
   ───────────────────────────────────────────────────────────── */

.hn-sok-filtrera {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	margin: 0 0 26px;
	padding: 13px 16px;
	/* HN:s ljusblå, samma yta som kategorichipsen — inte neutralt grått.
	   Stapeln till vänster knyter ihop den med grupprubrikerna, som bär
	   samma markering. */
	background: #eef3f6;
	border-left: 4px solid var(--hn-sok-primar);
	border-radius: 4px 10px 10px 4px;
}

.hn-sok-filtrera-etikett {
	align-self: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	/* Marinblå i stället för grått: 12–13px grått på ljus platta är svårläst,
	   och etiketten talar om vad hela raden gör. */
	color: var(--hn-sok-primar);
}

.hn-sok-filtrera-falt {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.hn-sok-filtrera-namn {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--hn-sok-text);
}

.hn-sok .hn-sok-filtrera select {
	min-width: 150px;
	max-width: 100%;
	padding: 9px 32px 9px 12px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--hn-sok-primar);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2300354e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	/* Blåtonad kant i stället för WordPress-grå, så fältet hör ihop med
	   ytan det ligger på. */
	border: 1.5px solid #c5d7e0;
	border-radius: 8px;
	appearance: none;
	cursor: pointer;
	transition: border-color .12s ease, box-shadow .12s ease;
}

.hn-sok .hn-sok-filtrera select:hover {
	border-color: var(--hn-sok-primar);
}

.hn-sok .hn-sok-filtrera select:focus {
	border-color: var(--hn-sok-primar);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 53, 78, .1);
}

/* Ett gjort val ska synas utan att man läser menyn — fylld marinblå, samma
   markering som den valda typfliken. */
.hn-sok-filtrera-falt.is-vald select {
	color: #fff;
	background-color: var(--hn-sok-primar);
	border-color: var(--hn-sok-primar);
	font-weight: 700;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.hn-sok .hn-sok-filtrera-knapp {
	padding: 10px 22px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: var(--hn-sok-primar);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.hn-sok .hn-sok-filtrera-knapp:hover {
	background: var(--hn-sok-primar-hover);
}

/* Döljs när JavaScript skickar in vid menybyte — knappen blir då bara brus. */
.hn-sok-filtrera.js-auto .hn-sok-filtrera-knapp {
	display: none;
}

.hn-sok .hn-sok-filtrera-rensa {
	align-self: center;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--hn-sok-primar);
	background: #fff;
	border: 1.5px solid #c5d7e0;
	border-radius: 999px;
	text-decoration: none;
}

.hn-sok .hn-sok-filtrera-rensa:hover {
	border-color: var(--hn-sok-primar);
	background: var(--hn-sok-primar);
	color: #fff;
}

.hn-sok-forhands {
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: #8a6d00;
	background: #fef7e0;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 11px;
}

@media (max-width: 600px) {

	.hn-sok-filtrera {
		gap: 8px;
		padding: 12px 13px;
	}

	.hn-sok-filtrera-etikett {
		flex: 0 0 100%;
	}

	.hn-sok-filtrera-falt {
		flex: 1 1 140px;
	}

	.hn-sok .hn-sok-filtrera select {
		min-width: 0;
		width: 100%;
	}
}

.hn-sok-grupp {
	margin: 0 0 34px;
}

.hn-sok-grupp-rubrik {
	margin: 0 0 12px;
	font-size: 21px;
	font-weight: 700;
	color: var(--hn-sok-primar);
}

.hn-sok-grupp-rubrik span {
	font-weight: 400;
	font-size: 16px;
	color: var(--hn-sok-dampad);
}

.hn-sok-traffar {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hn-sok-traff {
	display: flex;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--hn-sok-kant);
}

.hn-sok-traff-bild {
	flex: 0 0 84px;
	width: 84px;
	height: 84px;
	overflow: hidden;
	border-radius: 8px;
	background: #eef3f6;
}

.hn-sok-traff-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hn-sok-traff-text {
	flex: 1 1 auto;
	min-width: 0;
}

.hn-sok-traff-titel {
	margin: 0 0 3px;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
}

.hn-sok-traff-titel a {
	color: var(--hn-sok-primar);
	text-decoration: none;
}

.hn-sok-traff-titel a:hover {
	text-decoration: underline;
}

.hn-sok-traff-meta {
	margin: 0 0 5px;
	font-size: 13.5px;
	color: #5b6670;
}

.hn-sok-traff-utdrag {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

.hn-sok mark {
	padding: 0 2px;
	background: #fdf0d2;
	color: inherit;
}

.hn-sok-visa-alla {
	display: inline-block;
	margin-top: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--hn-sok-primar);
}

/* Etikett vid titeln. Semantikfärgen "väntar" används med flit: ett passerat
   evenemang är inte ett fel, bara något som inte längre går att gå på. */
.hn-sok-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 9px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	vertical-align: middle;
	border-radius: 999px;
	white-space: nowrap;
}

.hn-sok-badge--passerat {
	color: #8a6d00;
	background: #fef7e0;
}

/* ── Tomma lägen ──────────────────────────────────────────────────────── */

.hn-sok-ledtext {
	margin: 0 0 14px;
	font-size: 16px;
	color: var(--hn-sok-dampad);
}

.hn-sok-inga-traffar,
.hn-sok-tom {
	padding: 6px 0 0;
}

/* ── Förslagsrutan ────────────────────────────────────────────────────── */

/* Kvar för äldre uppmärkning; rutan hänger numera på formuläret. */
.hn-sok-forslag-wrap {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.hn-sok-forslag-wrap > input {
	width: 100%;
	box-sizing: border-box;
}

.hn-sok-forslag {
	position: absolute;
	z-index: 9999;
	top: calc(100% + 16px);
	left: 0;
	right: 0;
	/* Med tangentbordet uppe är knappt halva skärmen kvar. Taket gör att rutan
	   aldrig hamnar under tangentbordet där den inte går att se. */
	max-height: min(60vh, 420px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border: 1px solid var(--hn-sok-kant, #dcdcde);
	border-radius: 10px;
	box-shadow: 0 12px 34px rgba(0, 53, 78, .16);
}

.hn-sok-forslag[hidden] {
	display: none;
}

.hn-sok-forslag-rubrik {
	margin: 0;
	padding: 10px 15px 5px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #646970;
}

.hn-sok-forslag-rad {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 15px;
	font-size: 15px;
	text-decoration: none;
	color: #1f2937;
	cursor: pointer;
}

.hn-sok-forslag-rad:hover,
.hn-sok-forslag-rad.is-vald {
	background: #eef3f6;
}

/*
 * Titeln vinner platsen, inte metatexten.
 *
 * Metan låg som flex: 0 0 auto och krympte därför aldrig. På en 375px-skärm
 * tog "Företag · Fiskargränd 10" 140px medan titeln klämdes ner till 38 —
 * man såg alltså adressen men inte vad stället hette.
 */
.hn-sok-forslag-rad > span,
.hn-sok-forslag-rad > strong {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hn-sok-forslag-rad em {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hn-sok-forslag-rad strong {
	font-weight: 600;
	color: #00354e;
}

.hn-sok-forslag-rad em {
	flex: 0 0 auto;
	font-style: normal;
	font-size: 12px;
	color: #646970;
}

.hn-sok-forslag-alla {
	display: block;
	padding: 11px 15px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: #00354e;
	border-top: 1px solid #dcdcde;
}

.hn-sok-forslag-alla:hover {
	background: #eef3f6;
}

/**
 * Elementors globala länkfärg vinner annars.
 *
 * `.elementor-kit-4987 a` sätter grönt (#23a455) på ALLA länkar och har högre
 * specificitet än en ensam klass. Sajtens egna kort använder #00354E på sina
 * titlar — uppmätt på /aktivitet/ 2026-08-19 — så söket ska göra det med.
 * Reglerna nedan finns bara för att nå över den tröskeln, inte för att införa
 * något nytt utseende.
 */

.hn-sok a.hn-sok-chip {
	color: var(--hn-sok-primar);
}

.hn-sok a.hn-sok-chip:hover,
.hn-sok a.hn-sok-chip:focus {
	color: #fff;
}

.hn-sok .hn-sok-traff-titel a {
	color: var(--hn-sok-primar);
	font-size: inherit;
	line-height: inherit;
}

.hn-sok .hn-sok-filter-lank {
	color: var(--hn-sok-primar);
	font-size: 15px;
	line-height: 1.3;
}

.hn-sok .hn-sok-filter-lank.is-aktiv {
	color: #fff;
}

.hn-sok a.hn-sok-visa-alla {
	color: var(--hn-sok-primar);
	font-size: 15px;
}

.hn-sok .hn-sok-forslag-alla,
.hn-sok .hn-sok-forslag-rad {
	color: var(--hn-sok-text);
	font-size: 15px;
	line-height: 1.35;
}

.hn-sok .hn-sok-forslag-rad strong {
	color: var(--hn-sok-primar);
}

/* ─────────────────────────────────────────────────────────────
   Färg som betyder något
   Aline 2026-08-19 ville skilja kategori från företag med bakgrundsfärg.
   Två saker görs INTE, med flit:

   1. Träffkorten får ingen bakgrundston. Fem tonade block under varandra
      läser som varningsrutor, och grupprubriken säger redan vad de är.
   2. Semantikfärgerna (grönt=klart, gult=väntar, rött=fel) hålls utanför
      innehållet — de betyder status i hela sviten och ska inte börja
      betyda "kategori" här.

   Det som FAKTISKT förväxlas är chipsen: kategori och tagg ser likadana ut
   men är olika saker. Där sitter färgen. Grupperna får en tunn färgstapel
   i stället för en tonad yta — syns direkt, skriker inte.
   ───────────────────────────────────────────────────────────── */

/* Kategori — sajtens egen gröna, i sin ljusaste form */
.hn-sok .hn-sok-ingangar-block--kategorier a.hn-sok-chip {
	background: #e9f5ee;
	color: #17663d;
}

.hn-sok .hn-sok-ingangar-block--kategorier a.hn-sok-chip:hover,
.hn-sok .hn-sok-ingangar-block--kategorier a.hn-sok-chip:focus {
	background: #17663d;
	color: #fff;
}

/* Exakt kategoriträff: guldkant. Söker man "restaurang" ÄR kategorin svaret. */
.hn-sok .hn-sok-ingangar-block--kategorier a.hn-sok-chip--exakt {
	background: #fff;
	border-color: var(--hn-sok-accent);
	box-shadow: inset 0 -2px 0 var(--hn-sok-accent);
}

/* Tagg — kundens eget ord, sist på sidan och lättast i vikten */
.hn-sok .hn-sok-ingangar-block--taggar a.hn-sok-chip {
	background: #fff;
	border-color: var(--hn-sok-kant);
	color: var(--hn-sok-dampad);
	font-weight: 500;
}

.hn-sok .hn-sok-ingangar-block--taggar a.hn-sok-chip:hover,
.hn-sok .hn-sok-ingangar-block--taggar a.hn-sok-chip:focus {
	background: #eef3f6;
	border-color: var(--hn-sok-primar);
	color: var(--hn-sok-primar);
}

.hn-sok-ingangar-block--taggar {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid var(--hn-sok-kant);
}

/* Färgstapel per innehållstyp */
.hn-sok .hn-sok-grupp-rubrik {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hn-sok .hn-sok-grupp-rubrik::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 1.05em;
	border-radius: 3px;
	background: var(--hn-sok-grupp-farg, var(--hn-sok-primar));
}

.hn-sok-grupp--gd_place       { --hn-sok-grupp-farg: #00354e; }
.hn-sok-grupp--gd_uppleva     { --hn-sok-grupp-farg: #23a455; }
.hn-sok-grupp--gd_event       { --hn-sok-grupp-farg: #dd9b0c; }
.hn-sok-grupp--gd_nyheter     { --hn-sok-grupp-farg: #6a7f8c; }
.hn-sok-grupp--post           { --hn-sok-grupp-farg: #6a7f8c; }
.hn-sok-grupp--gd_ledigajobb  { --hn-sok-grupp-farg: #8e6bb5; }
.hn-sok-grupp--gd_fastigheter { --hn-sok-grupp-farg: #b5734a; }
.hn-sok-grupp--page           { --hn-sok-grupp-farg: #9fb3bd; }

/* ─────────────────────────────────────────────────────────────
   Sidhuvudets sökruta — [hn_sok_header]

   Fält på desktop, bara förstoringsglas på mobil. Samma markup i båda
   fallen: fältet ligger alltid i sidan, CSS avgör om det står inline
   eller fälls ut under knappen. Ikonen ärver currentColor, så den blir
   vit i ett mörkt sidhuvud utan att någon behöver ställa in färgen.
   ───────────────────────────────────────────────────────────── */

.hn-sok-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	max-width: none;
}

.hn-sok-header .hn-sok-form {
	width: var(--hn-sok-header-bredd, 280px);
	margin: 0;
	padding: 3px 3px 3px 13px;
	border-width: 1px;
}

.hn-sok-header .hn-sok-falt {
	padding: 8px 2px;
	font-size: 15px;
}

/*
 * .hn-sok måste stå med.
 *
 * Temats reset.css har `[type="button"], [type="submit"], button { display:
 * inline-block }` — samma specificitet som en ensam klass, och den laddas
 * EFTER vår CSS. Ikonknappen syntes därför på desktop där den ska vara dold.
 */
/*
 * Ikonens färg är ett VAL, inte ett arv.
 *
 * .hn-sok sätter --hn-sok-text (#1f2937) på hela blocket, så ikonen blev
 * mörkblå på HN:s mörkblå sidhuvud — osynlig. Att ärva utifrån hjälper inte
 * heller: Elementor-behållaren runt omkring står på svart. Därför väljs den.
 */
.hn-sok-header--ljus,
.hn-sok-header--ljus .hn-sok-header-knapp {
	color: #fff;
}

.hn-sok-header--mork,
.hn-sok-header--mork .hn-sok-header-knapp {
	color: var(--hn-sok-primar);
}

.hn-sok-header--arv,
.hn-sok-header--arv .hn-sok-header-knapp {
	color: inherit;
}

/* Fältet inuti pillen är alltid mörkt — pillen är vit oavsett ikonfärg. */
.hn-sok-header .hn-sok-form {
	color: var(--hn-sok-text);
}

.hn-sok .hn-sok-header-knapp {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background .15s ease;
}

.hn-sok .hn-sok-header-knapp:hover,
.hn-sok .hn-sok-header-knapp:focus-visible {
	background: rgba(255, 255, 255, .14);
}

.hn-sok .hn-sok-header-knapp .hn-sok-ikon {
	width: 22px;
	height: 22px;
	color: inherit;
}

/* Mobil och surfplatta: ikonen ensam, fältet fälls ut. Brytpunkten sätts
   med attributet brytpunkt="" och skrivs in som en klass av JS. */
.hn-sok.hn-sok-header--kompakt .hn-sok-header-knapp {
	display: inline-flex;
}

.hn-sok.hn-sok-header--kompakt .hn-sok-form {
	position: absolute;
	z-index: 9998;
	top: calc(100% + 10px);
	right: 0;
	width: min(86vw, 420px);
	padding: 4px 4px 4px 15px;
	border-width: 2px;
	box-shadow: 0 14px 38px rgba(0, 53, 78, .22);
	display: none;
}

.hn-sok.hn-sok-header--kompakt.is-oppen .hn-sok-form {
	display: flex;
}

/* Utan JavaScript syns fältet som vanligt — hellre en bred ruta än ingen. */
.no-js .hn-sok-header .hn-sok-form,
.hn-sok-header:not([data-brytpunkt]) .hn-sok-form {
	display: flex;
}

/* ── Mobil ────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {

	.hn-sok-forslag {
		min-width: 0;
		max-height: 42vh;
	}

	/* På mobil får titeln en egen rad och metatexten hamnar under. Sida vid
	   sida finns det helt enkelt inte plats för båda. */
	.hn-sok-forslag-rad {
		flex-direction: column;
		align-items: flex-start;
		gap: 1px;
		padding: 10px 15px;
	}

	.hn-sok-forslag-rad > span,
	.hn-sok-forslag-rad > strong {
		width: 100%;
	}

	.hn-sok-forslag-rad em {
		width: 100%;
		font-size: 12.5px;
	}

	/* Pillen behåller sin form på mobil — knappen krymper i stället för att
	   hoppa ner på egen rad och spräcka rundningen. */
	.hn-sok-form {
		padding-left: 14px;
		gap: 7px;
	}

	.hn-sok .hn-sok-knapp {
		padding: 11px 18px;
		font-size: 15px;
	}

	.hn-sok .hn-sok-falt {
		font-size: 16px;
	}

	/* Fingret är trubbigare än muspekaren — 34px är minsta rimliga träffyta. */
	.hn-sok .hn-sok-rensa {
		width: 34px;
		height: 34px;
	}

	.hn-sok-traff-bild {
		flex-basis: 62px;
		width: 62px;
		height: 62px;
	}

	.hn-sok-traff-titel {
		font-size: 17px;
	}
}