/*
Theme Name:   Kränkt
Theme URI:    https://krankt.se/
Description:  Childtema till GeneratePress för Kränkt, en oberoende guide för den som blivit kränkt på nätet. Lugn och seriös formgivning, snabbutgång, akutrad med stödnummer och färdiga innehållsblock för steg, lagrutor, tidslinjer, tabeller och vanliga frågor. Laddar inga externa typsnitt.
Author:       Redaktionen
Template:     generatepress
Version:      1.0.6
Requires at least: 6.3
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  krankt-child
*/

/* ==================================================================
   1. Grundvärden
   ================================================================== */

:root {
	--kr-ink: #16202e;
	--kr-text: #232b36;
	--kr-muted: #5b6574;
	--kr-bg: #f6f4ef;
	--kr-surface: #ffffff;
	--kr-line: #ddd8cd;
	--kr-line-soft: #ebe7de;

	--kr-accent: #2c6a5c;
	--kr-accent-dark: #1f4f44;
	--kr-accent-soft: #e2eeea;
	--kr-accent-light: #9fd1c2;

	--kr-signal: #a8432b;
	--kr-signal-soft: #f8e6df;

	--kr-law: #364777;
	--kr-law-soft: #e7eaf4;

	--kr-warn: #8a6410;
	--kr-warn-soft: #fbf1d9;

	--kr-serif: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif;
	--kr-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--kr-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--kr-radius: 10px;
	--kr-radius-sm: 6px;
	--kr-read: 46rem;
	--kr-wide: 72rem;
	--kr-shadow: 0 1px 2px rgba(22, 32, 46, .05), 0 6px 20px rgba(22, 32, 46, .06);
}

body {
	background: var(--kr-bg);
	color: var(--kr-text);
	font-family: var(--kr-sans);
	font-size: 18px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.entry-title,
.main-title {
	font-family: var(--kr-serif);
	color: var(--kr-ink);
	font-weight: 700;
	letter-spacing: -.005em;
	line-height: 1.22;
}

h1, .entry-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); }
.entry-content h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem); margin: 2.4em 0 .6em; }
.entry-content h3 { font-size: 1.3rem; margin: 1.9em 0 .5em; }
.entry-content h4 { font-family: var(--kr-sans); font-size: 1.05rem; margin: 1.6em 0 .4em; }

.entry-content p,
.entry-content ul,
.entry-content ol { margin-bottom: 1.25em; }
.entry-content li { margin-bottom: .35em; }

a { color: var(--kr-accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover, a:focus { color: var(--kr-accent-dark); text-decoration-thickness: 2px; }
.entry-content a { text-decoration: underline; }

strong { color: var(--kr-ink); }

:focus-visible {
	outline: 3px solid var(--kr-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

::selection { background: var(--kr-accent-light); color: var(--kr-ink); }

hr { border: 0; border-top: 1px solid var(--kr-line); margin: 2.5em 0; }

/* ==================================================================
   2. Akutrad
   ================================================================== */

.kr-akutrad {
	background: var(--kr-ink);
	color: #d6dde6;
	font-size: .82rem;
	line-height: 1.4;
}
.kr-akutrad-inner {
	max-width: var(--kr-wide);
	margin: 0 auto;
	padding: .5rem 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.5rem;
	justify-content: space-between;
}
.kr-akutrad a { color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.kr-akutrad a:hover { text-decoration: underline; color: #fff; }
.kr-akutrad-fara a { color: #ffb8a6; }
.kr-sep { margin: 0 .45em; opacity: .55; }

@media (max-width: 640px) {
	.kr-akutrad-ovrigt { display: none; }
	.kr-akutrad-inner { justify-content: center; }
}

/* ==================================================================
   3. Sidhuvud och meny
   ================================================================== */

.site-header {
	background: var(--kr-surface);
	border-bottom: 1px solid var(--kr-line);
}
.inside-header { padding-top: 18px; padding-bottom: 18px; }

.kr-logga { margin: 0; font-size: 1.6rem; line-height: 1; }
.kr-logga a {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	color: var(--kr-ink);
	text-decoration: none;
}
.kr-logga a:hover { color: var(--kr-ink); }
.kr-logga-ikon { flex: 0 0 auto; }
.kr-logga-text { font-family: var(--kr-serif); font-weight: 700; letter-spacing: -.01em; }
.kr-logga-tld { color: var(--kr-accent); font-weight: 400; }
.site-description { color: var(--kr-muted); font-size: .85rem; }

.main-navigation,
.main-navigation ul ul { background: var(--kr-surface); }
.main-navigation .main-nav ul li a {
	color: var(--kr-text);
	font-size: .95rem;
	font-weight: 600;
}
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a {
	color: var(--kr-accent);
	background: transparent;
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--kr-accent);
	background: transparent;
	box-shadow: inset 0 -3px 0 var(--kr-accent);
}
.main-navigation ul ul {
	border: 1px solid var(--kr-line);
	border-radius: var(--kr-radius-sm);
	box-shadow: var(--kr-shadow);
}
.main-navigation .menu-toggle { color: var(--kr-ink); font-weight: 600; }

/* ==================================================================
   4. Innehållsytan
   ================================================================== */

.separate-containers .inside-article,
.one-container .site-content {
	background: var(--kr-surface);
	border-radius: var(--kr-radius);
	box-shadow: var(--kr-shadow);
}
.site-main { margin-top: 2rem; }

/* Läsbredd på enskilda sidor. Startsidan får full bredd. */
.krankt:not(.home) .inside-article,
.krankt:not(.home) .comments-area {
	max-width: calc(var(--kr-read) + 6rem);
	margin-left: auto;
	margin-right: auto;
}
.separate-containers .inside-article { padding: clamp(1.5rem, 4vw, 3rem); }

.entry-header { margin-bottom: 1.5rem; }
.entry-title { margin-bottom: .35em; }

.kr-byline {
	font-size: .85rem;
	color: var(--kr-muted);
	margin: 0 0 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--kr-line-soft);
}
.kr-byline-av::before {
	content: "";
	display: inline-block;
	width: .55em;
	height: .55em;
	margin-right: .4em;
	border-radius: 50%;
	background: var(--kr-accent);
	vertical-align: .08em;
}

.featured-image img,
.post-image img,
.entry-content img {
	border-radius: var(--kr-radius);
	height: auto;
}
.featured-image { margin-bottom: 1.5rem; }
.entry-content figure figcaption,
.wp-caption-text {
	font-size: .85rem;
	color: var(--kr-muted);
	text-align: left;
	margin-top: .5rem;
}

.entry-content blockquote {
	border-left: 3px solid var(--kr-accent);
	background: var(--kr-accent-soft);
	padding: 1rem 1.25rem;
	margin: 1.75em 0;
	font-style: normal;
	border-radius: 0 var(--kr-radius-sm) var(--kr-radius-sm) 0;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }

.entry-content code { font-family: var(--kr-mono); font-size: .9em; background: var(--kr-line-soft); padding: .1em .35em; border-radius: 4px; }

/* Arkiv och listor */
.blog .inside-article .entry-title,
.archive .inside-article .entry-title { font-size: 1.5rem; }
.blog .entry-title a,
.archive .entry-title a { color: var(--kr-ink); text-decoration: none; }
.blog .entry-title a:hover,
.archive .entry-title a:hover { color: var(--kr-accent); }
.entry-meta { font-size: .85rem; color: var(--kr-muted); }
.page-header { background: transparent; box-shadow: none; padding-left: 0; padding-right: 0; }

/* ==================================================================
   5. Innehållsblock (används med class i HTML, ingen inline-stil)
   ================================================================== */

/* Ingress */
.entry-content .kr-ingress {
	font-size: 1.18rem;
	line-height: 1.6;
	color: var(--kr-ink);
}

/* Direktsvar överst (featured snippet) */
.kr-direktsvar {
	background: var(--kr-accent-soft);
	border: 1px solid #c6ddd5;
	border-radius: var(--kr-radius);
	padding: 1.1rem 1.35rem;
	margin: 0 0 2em;
}
.kr-direktsvar-rubrik {
	font-family: var(--kr-sans);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--kr-accent-dark);
	margin: 0 0 .35rem;
}
.kr-direktsvar p:last-child { margin-bottom: 0; }

/* Gemensam bas för rutor */
.kr-akut,
.kr-lag,
.kr-tips,
.kr-varning {
	position: relative;
	border-radius: var(--kr-radius);
	padding: 1.1rem 1.35rem 1.1rem 1.35rem;
	margin: 1.75em 0;
	border-left: 4px solid;
}
.kr-akut > :last-child,
.kr-lag > :last-child,
.kr-tips > :last-child,
.kr-varning > :last-child { margin-bottom: 0; }
.kr-ruta-rubrik {
	display: block;
	font-family: var(--kr-sans);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: .35rem;
}

.kr-akut { background: var(--kr-signal-soft); border-color: var(--kr-signal); }
.kr-akut .kr-ruta-rubrik { color: var(--kr-signal); }
.kr-akut a { color: var(--kr-signal); font-weight: 700; }

.kr-lag { background: var(--kr-law-soft); border-color: var(--kr-law); }
.kr-lag .kr-ruta-rubrik { color: var(--kr-law); }
.kr-lag-paragraf {
	display: inline-block;
	font-family: var(--kr-mono);
	font-size: .8rem;
	background: var(--kr-law);
	color: #fff;
	border-radius: 4px;
	padding: .1em .5em;
	margin-bottom: .5rem;
}
.kr-lag-straff { font-size: .92rem; color: var(--kr-law); font-weight: 600; }

.kr-tips { background: var(--kr-accent-soft); border-color: var(--kr-accent); }
.kr-tips .kr-ruta-rubrik { color: var(--kr-accent-dark); }

.kr-varning { background: var(--kr-warn-soft); border-color: var(--kr-warn); }
.kr-varning .kr-ruta-rubrik { color: var(--kr-warn); }

/* Numrerade steg: <ol class="kr-steg"><li><strong>Rubrik</strong> text</li></ol> */
.entry-content ol.kr-steg {
	list-style: none;
	counter-reset: kr-steg;
	margin: 1.75em 0;
	padding: 0;
}
.entry-content ol.kr-steg > li {
	counter-increment: kr-steg;
	position: relative;
	padding: 0 0 1.4rem 3.4rem;
	margin: 0;
}
.entry-content ol.kr-steg > li::before {
	content: counter(kr-steg);
	position: absolute;
	left: 0;
	top: -.1rem;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 50%;
	background: var(--kr-ink);
	color: #fff;
	font-family: var(--kr-serif);
	font-weight: 700;
	font-size: 1.05rem;
	display: grid;
	place-items: center;
}
.entry-content ol.kr-steg > li::after {
	content: "";
	position: absolute;
	left: 1.12rem;
	top: 2.4rem;
	bottom: .3rem;
	width: 2px;
	background: var(--kr-line);
}
.entry-content ol.kr-steg > li:last-child { padding-bottom: 0; }
.entry-content ol.kr-steg > li:last-child::after { display: none; }
.entry-content ol.kr-steg > li > strong:first-child {
	display: block;
	font-family: var(--kr-serif);
	font-size: 1.12rem;
	margin-bottom: .15rem;
}

/* Checklista: <ul class="kr-check"> */
.entry-content ul.kr-check { list-style: none; padding: 0; margin-left: 0; }
.entry-content ul.kr-check > li { position: relative; padding-left: 1.9rem; }
.entry-content ul.kr-check > li::before {
	content: "";
	position: absolute;
	left: .1rem;
	top: .42em;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 4px;
	background: var(--kr-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* Vertikal tidslinje: <ol class="kr-tidslinje"><li><span class="kr-tid">Dag 1</span> text</li></ol> */
.entry-content ol.kr-tidslinje {
	list-style: none;
	margin: 1.75em 0;
	padding: 0 0 0 1.6rem;
	border-left: 2px solid var(--kr-line);
}
.entry-content ol.kr-tidslinje > li {
	position: relative;
	margin: 0 0 1.5rem;
	padding-left: .4rem;
}
.entry-content ol.kr-tidslinje > li:last-child { margin-bottom: 0; }
.entry-content ol.kr-tidslinje > li::before {
	content: "";
	position: absolute;
	left: -2.17rem;
	top: .45em;
	width: .95rem;
	height: .95rem;
	border-radius: 50%;
	background: var(--kr-surface);
	border: 3px solid var(--kr-accent);
}
.kr-tid {
	display: block;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--kr-accent-dark);
	margin-bottom: .15rem;
}

/* Tabeller */
.kr-tabell {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.75em 0;
	border: 1px solid var(--kr-line);
	border-radius: var(--kr-radius);
	background: var(--kr-surface);
}
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: .93rem;
	line-height: 1.5;
	margin: 0;
	border: 0;
}
.entry-content th,
.entry-content td {
	padding: .7rem .9rem;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--kr-line-soft);
}
.entry-content thead th {
	background: var(--kr-ink);
	color: #fff;
	font-weight: 600;
	white-space: nowrap;
}
.entry-content tbody tr:nth-child(even) td { background: #faf9f6; }
.entry-content tbody tr:last-child td { border-bottom: 0; }
.kr-tabell table { min-width: 34rem; }

/* Vanliga frågor: <div class="kr-faq"><details><summary>Fråga</summary><p>Svar</p></details></div> */
.kr-faq { margin: 1.75em 0; border-top: 1px solid var(--kr-line); }
.kr-faq details { border-bottom: 1px solid var(--kr-line); }
.kr-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 1rem 2.5rem 1rem 0;
	position: relative;
	font-family: var(--kr-serif);
	font-weight: 700;
	font-size: 1.08rem;
	color: var(--kr-ink);
}
.kr-faq summary::-webkit-details-marker { display: none; }
.kr-faq summary::after {
	content: "";
	position: absolute;
	right: .4rem;
	top: 50%;
	width: .6rem;
	height: .6rem;
	border-right: 2px solid var(--kr-accent);
	border-bottom: 2px solid var(--kr-accent);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s;
}
.kr-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.kr-faq details > :not(summary) { margin-top: 0; padding-right: 2rem; }
.kr-faq details > :last-child { padding-bottom: 1rem; margin-bottom: 0; }

/* Internlänksbox */
.kr-internlankar {
	background: var(--kr-bg);
	border: 1px solid var(--kr-line);
	border-radius: var(--kr-radius);
	padding: 1.1rem 1.35rem;
	margin: 2.25em 0;
}
.kr-internlankar .kr-ruta-rubrik { color: var(--kr-muted); }
.entry-content .kr-internlankar ul { list-style: none; margin: 0; padding: 0; columns: 2 16rem; column-gap: 2rem; }
.entry-content .kr-internlankar li { break-inside: avoid; margin: 0; padding: .3rem 0 .3rem 1.1rem; position: relative; }
.entry-content .kr-internlankar li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .95em;
	width: .45rem;
	height: .45rem;
	border-top: 2px solid var(--kr-accent);
	border-right: 2px solid var(--kr-accent);
	transform: rotate(45deg);
}
.entry-content .kr-internlankar a { text-decoration: none; font-weight: 600; }
.entry-content .kr-internlankar a:hover { text-decoration: underline; }

/* Källor */
.kr-kallor {
	margin-top: 3em;
	padding-top: 1.25rem;
	border-top: 1px solid var(--kr-line);
	font-size: .88rem;
	color: var(--kr-muted);
}
.kr-kallor .kr-ruta-rubrik { color: var(--kr-muted); }
.entry-content .kr-kallor ol,
.entry-content .kr-kallor ul { padding-left: 1.2rem; margin-bottom: 0; }
.kr-kallor a { color: var(--kr-muted); }

/* Knappar */
.kr-knapp,
.entry-content a.kr-knapp {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--kr-accent);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	padding: .8rem 1.25rem;
	border-radius: 999px;
	text-decoration: none;
	border: 2px solid var(--kr-accent);
	transition: background .15s, color .15s;
}
.kr-knapp:hover,
.entry-content a.kr-knapp:hover { background: var(--kr-accent-dark); border-color: var(--kr-accent-dark); color: #fff; }
.kr-knapp-ljus,
.entry-content a.kr-knapp-ljus { background: transparent; color: var(--kr-accent-dark); }
.kr-knapp-ljus:hover,
.entry-content a.kr-knapp-ljus:hover { background: var(--kr-accent-soft); color: var(--kr-accent-dark); }

/* Plattformschips: <ul class="kr-plattformar"><li><a>Facebook</a></li></ul> */
.entry-content ul.kr-plattformar {
	list-style: none;
	padding: 0;
	margin: 1.5em 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.entry-content ul.kr-plattformar li { margin: 0; }
.entry-content ul.kr-plattformar a {
	display: inline-block;
	padding: .45rem .9rem;
	border: 1px solid var(--kr-line);
	border-radius: 999px;
	background: var(--kr-surface);
	color: var(--kr-ink);
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
}
.entry-content ul.kr-plattformar a:hover { border-color: var(--kr-accent); color: var(--kr-accent-dark); background: var(--kr-accent-soft); }

/* ==================================================================
   6. Startsidan
   ================================================================== */

.home .inside-article { padding: 0; background: transparent; box-shadow: none; }
.home .entry-content > * { max-width: var(--kr-wide); margin-left: auto; margin-right: auto; }

.kr-hero {
	background: var(--kr-ink);
	color: #dfe6ee;
	border-radius: var(--kr-radius);
	padding: clamp(2rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 4.5rem);
	margin-bottom: 2.5rem;
	position: relative;
	overflow: hidden;
}
.kr-hero::after {
	content: "";
	position: absolute;
	right: -4rem;
	bottom: -5rem;
	width: 22rem;
	height: 22rem;
	border-radius: 50%;
	border: 2.5rem solid rgba(159, 209, 194, .1);
	pointer-events: none;
}
.entry-content .kr-hero h1 {
	color: #fff;
	font-size: clamp(2.1rem, 1.4rem + 3vw, 3.3rem);
	max-width: 18ch;
	margin: 0 0 1rem;
}
.kr-hero p { max-width: 38rem; font-size: 1.15rem; }
.kr-hero strong { color: #fff; }
.kr-hero-knappar { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; position: relative; z-index: 1; }
.entry-content .kr-hero a.kr-knapp { background: var(--kr-accent-light); border-color: var(--kr-accent-light); color: var(--kr-ink); }
.entry-content .kr-hero a.kr-knapp:hover { background: #fff; border-color: #fff; color: var(--kr-ink); }
.entry-content .kr-hero a.kr-knapp-ljus { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.entry-content .kr-hero a.kr-knapp-ljus:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: #fff; }

.kr-sektion { margin: 3rem auto; }
.entry-content .kr-sektion > h2 { margin-top: 0; }
.kr-sektion-ingress { color: var(--kr-muted); max-width: 40rem; }

/* Kortrutnät: <div class="kr-kort-grid"><a class="kr-kort" href=""><span class="kr-kort-rubrik">..</span><span class="kr-kort-text">..</span></a></div> */
.kr-kort-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
}
.entry-content a.kr-kort,
.kr-kort {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	background: var(--kr-surface);
	border: 1px solid var(--kr-line);
	border-radius: var(--kr-radius);
	padding: 1.25rem 1.35rem 1.35rem;
	text-decoration: none;
	color: var(--kr-text);
	box-shadow: 0 1px 2px rgba(22, 32, 46, .04);
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.entry-content a.kr-kort:hover,
.kr-kort:hover {
	border-color: var(--kr-accent);
	box-shadow: var(--kr-shadow);
	transform: translateY(-2px);
	color: var(--kr-text);
}
.kr-kort-etikett {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--kr-accent-dark);
}
.kr-kort-rubrik {
	font-family: var(--kr-serif);
	font-size: 1.18rem;
	font-weight: 700;
	color: var(--kr-ink);
	line-height: 1.3;
}
.kr-kort-text { font-size: .93rem; color: var(--kr-muted); line-height: 1.55; }
.kr-kort-pil { margin-top: auto; padding-top: .5rem; color: var(--kr-accent); font-weight: 700; font-size: .9rem; }

/* Ett ljust band på startsidan */
.kr-band {
	background: var(--kr-surface);
	border: 1px solid var(--kr-line);
	border-radius: var(--kr-radius);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* ==================================================================
   7. Verktyg och formulär
   ================================================================== */

.kr-verktyg {
	background: var(--kr-surface);
	border: 2px solid var(--kr-ink);
	border-radius: var(--kr-radius);
	padding: clamp(1.25rem, 3vw, 2rem);
	margin: 2em 0;
}
.kr-verktyg-rubrik { font-family: var(--kr-serif); font-size: 1.35rem; font-weight: 700; color: var(--kr-ink); margin: 0 0 .5rem; }

.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="date"],
.entry-content input[type="time"],
.entry-content input[type="url"],
.entry-content input[type="number"],
.entry-content select,
.entry-content textarea {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	color: var(--kr-text);
	background: var(--kr-surface);
	border: 1px solid #c9c3b6;
	border-radius: var(--kr-radius-sm);
	padding: .65rem .8rem;
}
.entry-content input:focus,
.entry-content select:focus,
.entry-content textarea:focus { border-color: var(--kr-accent); outline: 3px solid var(--kr-accent-soft); outline-offset: 0; }
.entry-content label { font-weight: 600; font-size: .95rem; color: var(--kr-ink); }

/* Svarsalternativ som kort: <label class="kr-val"><input type="radio"> Text</label> */
.kr-val {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: .8rem 1rem;
	border: 1px solid var(--kr-line);
	border-radius: var(--kr-radius-sm);
	margin-bottom: .5rem;
	cursor: pointer;
	font-weight: 500;
	background: var(--kr-surface);
}
.kr-val:hover { border-color: var(--kr-accent); }
.kr-val:has(input:checked) { border-color: var(--kr-accent); background: var(--kr-accent-soft); }
.kr-val input { margin-top: .35em; accent-color: var(--kr-accent); }

button,
.button,
input[type="submit"],
.wp-block-button__link {
	background: var(--kr-accent);
	color: #fff;
	border-radius: 999px;
	font-weight: 700;
	padding: .75rem 1.3rem;
	border: 0;
}
button:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover { background: var(--kr-accent-dark); color: #fff; }

/* ==================================================================
   8. Stödruta och sidfot
   ================================================================== */

.kr-stodfot {
	background: var(--kr-surface);
	border-top: 1px solid var(--kr-line);
	margin-top: 3rem;
}
.kr-stodfot-inner { max-width: var(--kr-wide); margin: 0 auto; padding: 2.25rem 1.25rem; }
.kr-stodfot-rubrik { font-size: 1.35rem; margin: 0 0 1.25rem; }
.kr-stodfot-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1rem;
}
.kr-stodfot-lista li {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	padding: 1rem 1.15rem;
	border: 1px solid var(--kr-line);
	border-radius: var(--kr-radius);
	background: var(--kr-bg);
	font-size: .9rem;
	color: var(--kr-muted);
	line-height: 1.45;
}
.kr-stodfot-lista strong { font-size: .95rem; }
.kr-stodfot-lista a {
	font-family: var(--kr-serif);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--kr-ink);
	text-decoration: none;
	line-height: 1.25;
}
.kr-stodfot-lista a:hover { color: var(--kr-accent); }
.kr-stodfot-lista .kr-stodfot-akut { background: var(--kr-signal-soft); border-color: #eac4b8; }
.kr-stodfot-lista .kr-stodfot-akut a { color: var(--kr-signal); }

.site-footer .footer-widgets { background: var(--kr-ink); color: #c9d1db; }
.site-footer .footer-widgets a { color: #fff; }
.site-footer .footer-widgets .widget-title { color: #fff; font-family: var(--kr-serif); }
.site-info {
	background: var(--kr-ink);
	color: #aab4c0;
	font-size: .84rem;
	line-height: 1.6;
}
.site-info a { color: #fff; }
.inside-site-info { padding-top: 22px; padding-bottom: 88px; }
.kr-copy { color: #fff; font-weight: 600; }

/* ==================================================================
   9. Snabbutgång
   ================================================================== */

.kr-snabbutgang {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--kr-signal);
	color: #fff;
	font-family: var(--kr-sans);
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.15;
	padding: .75rem 1.1rem;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(22, 32, 46, .25);
}
.kr-snabbutgang:hover,
.kr-snabbutgang:focus { background: #8b3520; color: #fff; text-decoration: none; }
.kr-snabbutgang-tips {
	font-size: .72rem;
	font-weight: 500;
	opacity: .85;
	padding-left: .5rem;
	border-left: 1px solid rgba(255, 255, 255, .4);
}
@media (max-width: 640px) {
	.kr-snabbutgang { right: .6rem; bottom: .6rem; padding: .65rem .95rem; font-size: .88rem; }
	.kr-snabbutgang-tips { display: none; }
}

/* ==================================================================
   10. Mobil, rörelse och utskrift
   ================================================================== */

@media (max-width: 768px) {
	body { font-size: 17px; }
	.separate-containers .inside-article { border-radius: 0; }
	.site-main { margin-top: 0; }
	.home .site-main { margin-top: 1rem; }
	.home .inside-article { padding: 0 .75rem; }
	.entry-content ol.kr-steg > li { padding-left: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
	.kr-akutrad,
	.kr-snabbutgang,
	.site-header,
	.main-navigation,
	.kr-stodfot,
	.site-footer { display: none !important; }
	body { background: #fff; font-size: 11pt; }
	.separate-containers .inside-article { box-shadow: none; padding: 0; }
	.entry-content a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}

/* Sidfotslänkar och bylinelänk (1.0.3) */
.kr-fotlankar { display: block; margin-top: .6rem; }
.kr-fotlankar a { display: inline-block; margin: 0 1rem .3rem 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
a.kr-byline-av { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }

/* 1.0.5: centrerade bilder och publiceringsdatum */
.krankt:not(.home) .page-header-image.grid-container,
.krankt:not(.home) .page-header-image-single.grid-container {
	max-width: calc(var(--kr-read) + 6rem);
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}
.krankt:not(.home) .page-header-image { margin-top: 2rem; }
.page-header-image img,
.page-header-image-single img,
.featured-image img {
	display: block;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.entry-content figure { margin-left: auto; margin-right: auto; text-align: center; }
.entry-content img.aligncenter,
.entry-content figure img { display: block; margin-left: auto; margin-right: auto; }
.kr-kort-datum { font-size: .8rem; color: var(--kr-muted); }