/*
Theme Name: Krunst Konsulting
Theme URI: https://www.krunstkonsulting.org
Author: Krunst Konsulting
Description: Hemsidan för Krunst Konsulting – ett svenskt konsultföretag som drivs av Åke. Ser ut som 1996, fungerar som idag. Egna innehållstyper för tjänster, kundcase och gästbok, kontaktformulär, besöksräknare, påskägg och en rimlig mängd roterande jordglober. ÅKE FIXAR DET.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: krunst
Tags: custom-logo, custom-menu, custom-colors, one-column, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. FÄRGER OCH GRUND
   ========================================================================== */
:root {
	--kk-blue: #000080;
	--kk-yellow: #ffe000;
	--kk-magenta: #ff00aa;
	--kk-red: #e00000;
	--kk-black: #000;
	--kk-white: #fff;
	--kk-silver: #c0c0c0;
	--kk-ink: #1a1a1a;
	--kk-link: #0000ee;
	--kk-visited: #551a8b;
	--kk-serif: "Times New Roman", Times, "Liberation Serif", serif;
	--kk-sans: Arial, Helvetica, "Liberation Sans", sans-serif;
	--kk-black-font: "Arial Black", "Arial Bold", Gadget, Arial, sans-serif;
	--kk-impact: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
	--kk-comic: "Comic Sans MS", "Comic Neue", "Chalkboard SE", "Comic Sans", cursive;
	--kk-mono: "Courier New", Courier, "Liberation Mono", monospace;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	background: #000046;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 18px 12px 40px;
	background: #000046 url("assets/images/bg-bla.gif") repeat;
	color: var(--kk-ink);
	font-family: var(--kk-serif);
	font-size: 17px;
	line-height: 1.45;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--kk-link);
}

a:visited {
	color: var(--kk-visited);
}

a:hover {
	color: var(--kk-red);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--kk-magenta);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #fff;
}

h1,
h2,
h3,
h4 {
	line-height: 1.15;
	margin: 0 0 .5em;
}

p {
	margin: 0 0 .85em;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.kk-skip:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 14px;
	clip: auto;
	background: var(--kk-yellow);
	color: #000;
	font: bold 16px var(--kk-sans);
	white-space: normal;
}

.kk-center {
	text-align: center;
}

/* ==========================================================================
   2. SIDAN – "tabellen" som allt ligger i
   ========================================================================== */
.kk-page {
	max-width: 880px;
	margin: 0 auto;
	background: #fff;
	border: 4px outset #d8d8d8;
	box-shadow: 10px 10px 0 #000;
}

.kk-topbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 4px 12px;
	padding: 4px 10px;
	background: #000;
	color: var(--kk-yellow);
	font: bold 13px/1.3 var(--kk-sans);
	border-bottom: 2px solid var(--kk-red);
}

.kk-topbar__hello {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.kk-topbar__globe img {
	display: block;
}

.kk-topbar__url {
	font-family: var(--kk-mono);
	color: #fff;
}

/* ==========================================================================
   3. SIDHUVUD
   ========================================================================== */
.kk-header {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding: 14px;
	background:
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .18) 1.2px, transparent 1.4px) 0 0 / 6px 6px,
		linear-gradient(135deg, #000050 0%, var(--kk-blue) 45%, #2a2ad6 100%);
	border-bottom: 4px ridge var(--kk-yellow);
}

/* VHS-rutan runt loggan */
.kk-vhs {
	position: relative;
	margin: 0;
	padding: 0;
	border: 6px solid #111;
	outline: 3px ridge #8a8a8a;
	background: #222;
	overflow: hidden;
	line-height: 0;
}

.kk-vhs .custom-logo-link,
.kk-vhs .custom-logo-link img {
	display: block;
	width: 100%;
	height: auto;
}

.kk-vhs__osd,
.kk-vhs__sp {
	position: absolute;
	top: 8px;
	z-index: 2;
	color: #fff;
	font: bold 16px/1 var(--kk-mono);
	text-shadow: 2px 0 0 rgba(255, 0, 0, .7), -2px 0 0 rgba(0, 255, 255, .7), 0 0 4px #000;
	letter-spacing: 1px;
}

.kk-vhs__osd {
	left: 10px;
}

.kk-vhs__sp {
	right: 10px;
}

.kk-vhs__scan {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .18) 0, rgba(0, 0, 0, .18) 1px, transparent 1px, transparent 3px);
}

.kk-vhs__scan::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 14px;
	background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .22), transparent);
	animation: kk-tracking 4.5s linear infinite;
}

@keyframes kk-tracking {
	0% { top: -20px; }
	100% { top: 110%; }
}

.kk-header__side {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.kk-header__glitter img {
	display: block;
}

.kk-callbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 8px;
	background: #fff;
	border: 3px solid #000;
	box-shadow: 4px 4px 0 var(--kk-magenta);
	color: #000 !important;
	font: 14px/1.2 var(--kk-sans);
	text-decoration: none;
	text-align: left;
	transform: rotate(-2deg);
}

.kk-callbox strong {
	font-family: var(--kk-black-font);
	font-size: 18px;
	color: var(--kk-red);
}

.kk-callbox:hover {
	background: var(--kk-yellow);
}

/* ==========================================================================
   4. WORDART
   ========================================================================== */
.kk-wordart {
	margin: 0;
	font-family: var(--kk-impact);
	font-weight: normal;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1.05;
	color: var(--kk-yellow);
	background: linear-gradient(180deg, #fffbe0 0%, var(--kk-yellow) 38%, #ff9a00 70%, var(--kk-red) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1.5px #000;
	filter:
		drop-shadow(1px 1px 0 var(--kk-blue))
		drop-shadow(1px 1px 0 var(--kk-blue))
		drop-shadow(1px 1px 0 var(--kk-blue))
		drop-shadow(1px 1px 0 var(--kk-blue))
		drop-shadow(3px 3px 0 #000);
}

.kk-wordart--header {
	font-size: clamp(30px, 5.4vw, 50px);
	transform: rotate(-4deg) skewX(-8deg);
	margin: 4px 0;
}

.kk-wordart--hero {
	font-size: clamp(40px, 8vw, 76px);
	transform: rotate(-3deg);
	margin: 6px 0 18px;
	filter:
		drop-shadow(1px 1px 0 var(--kk-blue))
		drop-shadow(1px 1px 0 var(--kk-blue))
		drop-shadow(1px 1px 0 var(--kk-blue))
		drop-shadow(1px 1px 0 var(--kk-blue))
		drop-shadow(1px 1px 0 var(--kk-blue))
		drop-shadow(1px 1px 0 var(--kk-blue))
		drop-shadow(5px 5px 0 #000);
}

.kk-wordart--page {
	font-size: clamp(30px, 6vw, 52px);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.kk-wordart--page .krunst-gif,
.kk-wordart--page img {
	-webkit-text-stroke: 0;
}

/* ==========================================================================
   5. MARQUEE OCH MENY
   ========================================================================== */
.kk-marquee-bar {
	background: #000;
	border-top: 3px solid var(--kk-red);
	border-bottom: 3px solid var(--kk-red);
	padding: 5px 0;
}

.kk-marquee {
	display: block;
	color: var(--kk-yellow);
	font: bold 18px/1.3 var(--kk-mono);
	text-shadow: 0 0 6px rgba(255, 224, 0, .6);
}

.kk-nav {
	padding: 10px;
	background:
		repeating-linear-gradient(45deg, rgba(0, 0, 0, .05) 0 4px, transparent 4px 8px),
		var(--kk-silver);
	border-bottom: 4px ridge #fff;
}

.kk-nav ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kk-nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 6px 6px;
	background: linear-gradient(180deg, #ffffff 0%, #e2e2e2 30%, #9c9c9c 52%, #d4d4d4 70%, #f6f6f6 100%);
	border: 4px outset #eee;
	color: var(--kk-blue) !important;
	font: 15px/1.1 var(--kk-black-font);
	letter-spacing: .5px;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 0 #fff;
	box-shadow: 3px 3px 0 #000;
}

.kk-nav a:hover {
	background: linear-gradient(180deg, #fff9c4 0%, var(--kk-yellow) 45%, #ffae00 100%);
	color: #000 !important;
}

.kk-nav a:active {
	border-style: inset;
	box-shadow: 1px 1px 0 #000;
	transform: translate(2px, 2px);
}

.kk-nav .current-menu-item > a,
.kk-nav .current_page_item > a,
.kk-nav .current-menu-ancestor > a,
.kk-nav [aria-current="page"] {
	background: linear-gradient(180deg, #ff80d5 0%, var(--kk-magenta) 50%, #b0006f 100%);
	border-style: inset;
	color: #fff !important;
	text-shadow: 1px 1px 0 #000;
}

/* ==========================================================================
   6. INNEHÅLL
   ========================================================================== */
.kk-main {
	display: block;
	padding: 16px;
	outline: none;
}

.kk-box {
	margin: 0 0 22px;
	padding: 16px;
	background: #fff;
	border: 3px double var(--kk-blue);
}

.kk-heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: -4px -4px 16px;
	padding: 8px 12px;
	background: linear-gradient(180deg, #2a2ad6 0%, var(--kk-blue) 60%, #00004a 100%);
	border: 3px outset #7a7aff;
	color: var(--kk-yellow);
	font: 26px/1.1 var(--kk-black-font);
	letter-spacing: 1px;
	text-align: center;
	text-shadow: 2px 2px 0 #000, 3px 3px 0 var(--kk-red);
}

.kk-heading--small {
	font-size: 20px;
}

.kk-heading--light {
	background: transparent;
	border: 0;
	margin: 0 0 8px;
}

.kk-entry {
	overflow-wrap: break-word;
}

.kk-entry img {
	border: 3px ridge var(--kk-silver);
}

.kk-entry blockquote {
	margin: 1em 0;
	padding: 8px 16px;
	background: #ffffcc;
	border-left: 6px solid var(--kk-yellow);
	font-family: var(--kk-comic);
}

.kk-entry table {
	border: 2px outset #999;
	border-collapse: separate;
}

.kk-entry td,
.kk-entry th {
	border: 1px inset #999;
	padding: 3px 6px;
}

.kk-entry pre,
.kk-entry code {
	font-family: var(--kk-mono);
	background: #eee;
}

.alignleft {
	float: left;
	margin: 4px 16px 8px 0;
}

.alignright {
	float: right;
	margin: 4px 0 8px 16px;
}

.aligncenter {
	display: block;
	margin: 8px auto;
}

.wp-caption-text,
.wp-element-caption,
.kk-caption {
	font: italic 14px var(--kk-serif);
	text-align: center;
	color: #333;
}

.kk-meta {
	font: 14px var(--kk-mono);
	color: #555;
}

.kk-framed img {
	border: 6px ridge var(--kk-silver);
}

.kk-rule {
	display: block;
	width: 100%;
	height: 10px;
	margin: 18px 0;
	border: 0;
}

.kk-edit {
	font-size: 13px;
}

.kk-pagehead {
	margin: -4px 0 16px;
}

.kk-pagehead__sub {
	margin: 6px 0 0;
	text-align: center;
	font-style: italic;
}

.kk-back {
	margin: 0 0 10px;
}

.kk-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	justify-content: center;
	margin: 16px 0 4px;
	font: bold 15px var(--kk-sans);
}

.kk-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.kk-pagination .page-numbers {
	padding: 2px 7px;
	border: 2px outset #ddd;
	background: #eee;
	text-decoration: none;
}

.kk-pagination .current {
	background: var(--kk-yellow);
	border-style: inset;
}

/* ==========================================================================
   7. KNAPPAR
   ========================================================================== */
.kk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	background: linear-gradient(180deg, #fffbd0 0%, var(--kk-yellow) 40%, #ffae00 100%);
	border: 4px outset #ffe680;
	color: #000 !important;
	font: 17px/1.15 var(--kk-black-font);
	letter-spacing: .5px;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 0 #fff;
	box-shadow: 4px 4px 0 #000;
	cursor: pointer;
}

.kk-btn:hover {
	background: linear-gradient(180deg, #ff9ae0 0%, var(--kk-magenta) 50%, #b0006f 100%);
	border-color: #ff9ae0;
	color: #fff !important;
	text-shadow: 1px 1px 0 #000;
}

.kk-btn:active {
	border-style: inset;
	box-shadow: 1px 1px 0 #000;
	transform: translate(3px, 3px);
}

.kk-btn[disabled] {
	opacity: .6;
	cursor: wait;
}

.kk-btn--chrome {
	background: linear-gradient(180deg, #fff 0%, #dcdcdc 30%, #8f8f8f 52%, #cfcfcf 72%, #fafafa 100%);
	border-color: #eee;
	color: var(--kk-blue) !important;
}

.kk-btn--red {
	background: linear-gradient(180deg, #ff7a7a 0%, var(--kk-red) 55%, #8a0000 100%);
	border-color: #ff8a8a;
	color: #fff !important;
	text-shadow: 1px 1px 0 #000;
}

.kk-btn--big {
	padding: 14px 26px;
	font-size: clamp(18px, 3.2vw, 26px);
	box-shadow: 6px 6px 0 #000;
}

.kk-btn--small {
	padding: 5px 10px;
	font-size: 13px;
	box-shadow: 3px 3px 0 #000;
}

.kk-btn--mail img,
.kk-btn .krunst-gif img {
	display: block;
}

.kk-btn .krunst-gif {
	flex: none;
}

/* ==========================================================================
   8. PRATBUBBLOR OCH TIPSRUTOR
   ========================================================================== */
.krunst-bubble {
	position: relative;
	display: inline-block;
	max-width: 100%;
	margin: 0 0 18px;
	padding: 10px 16px;
	background: #fff;
	border: 3px solid #000;
	border-radius: 22px;
	color: #000;
	font: bold 17px/1.3 var(--kk-comic);
	box-shadow: 4px 4px 0 rgba(0, 0, 0, .35);
}

.krunst-bubble::after {
	content: "";
	position: absolute;
	left: 34px;
	bottom: -17px;
	border: 8px solid transparent;
	border-top: 12px solid #000;
	border-left: 12px solid #000;
}

.krunst-bubble::before {
	content: "";
	position: absolute;
	left: 37px;
	bottom: -10px;
	z-index: 1;
	border: 5px solid transparent;
	border-top: 8px solid #fff;
	border-left: 8px solid #fff;
}

.kk-bubble--small {
	padding: 6px 12px;
	font-size: 14px;
	border-radius: 16px;
}

.kk-bubble--center {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

.kk-tip {
	position: relative;
	display: inline-block;
}

.kk-tip::after {
	content: attr(data-tip);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	z-index: 20;
	width: max-content;
	max-width: 240px;
	padding: 4px 8px;
	background: #ffffe1;
	border: 1px solid #000;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, .4);
	color: #000;
	font: 13px/1.3 Tahoma, Verdana, var(--kk-sans);
	text-align: left;
	white-space: normal;
	transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.kk-tip:hover::after,
.kk-tip:focus::after,
.kk-tip:focus-within::after {
	opacity: 1;
	visibility: visible;
}

/* ==========================================================================
   9. STARTSIDAN – HERO
   ========================================================================== */
.kk-hero {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	margin: -16px -16px 22px;
	padding: 20px 20px 16px;
	background:
		repeating-conic-gradient(from 0deg at 22% 40%, #fff7b0 0deg 9deg, #ffffff 9deg 18deg);
	border-bottom: 4px ridge var(--kk-blue);
}

.kk-hero__ake {
	position: relative;
	text-align: center;
}

.kk-hero__bubble {
	position: absolute;
	top: 0;
	right: -12px;
	z-index: 3;
	max-width: 190px;
	transform: rotate(4deg);
}

.kk-hero__text {
	min-width: 0;
}

.kk-hero__intro {
	font-size: 18px;
}

.kk-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 10px;
}

.kk-hero__small {
	font: 15px var(--kk-comic);
	color: var(--kk-blue);
}

/* Åke som knapp (påskägget) */
.krunst-ake {
	display: inline-block;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	line-height: 0;
}

.krunst-ake img {
	display: block;
	width: 100%;
	max-width: 300px;
	height: auto;
	margin: 0 auto;
	filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, .25));
}

.krunst-ake.is-wobbling img {
	animation: kk-wobble .45s ease;
}

@keyframes kk-wobble {
	0%, 100% { transform: rotate(0); }
	25% { transform: rotate(-4deg); }
	75% { transform: rotate(4deg); }
}

.kk-ake-says {
	position: absolute;
	top: 30%;
	left: 50%;
	z-index: 5;
	width: 200px;
	margin: 0;
	transform: translateX(-50%) rotate(-3deg);
	background: var(--kk-yellow);
}

.kk-ake-says[hidden] {
	display: none;
}

/* ==========================================================================
   10. NYHET – KISTSNICKERI
   ========================================================================== */
.kk-news {
	position: relative;
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr) minmax(0, 250px);
	gap: 14px;
	align-items: center;
	margin: 0 0 22px;
	padding: 16px 16px 40px;
	background: var(--kk-yellow) url("assets/images/bg-halvton.gif") repeat;
	border: 5px dashed var(--kk-red);
	outline: 3px solid #000;
	outline-offset: -11px;
}

.kk-news__burst img {
	display: block;
}

.kk-news__title {
	margin: 0 0 8px;
	color: var(--kk-red);
	font: clamp(24px, 4vw, 34px)/1.05 var(--kk-impact);
	letter-spacing: 1px;
	text-transform: uppercase;
	text-shadow: 2px 2px 0 #fff, 4px 4px 0 #000;
}

.kk-news__body {
	font-size: 17px;
	font-weight: bold;
	font-family: var(--kk-sans);
}

.kk-news__body p {
	margin-bottom: .55em;
}

.kk-news__sign {
	font-family: var(--kk-comic);
	color: var(--kk-blue);
}

.kk-news__kista {
	text-align: center;
}

.kk-news__kista .kk-tip {
	cursor: help;
}

.kk-news__tools {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 8px;
}

.kk-flames {
	height: 30px;
	background: url("assets/images/flammor.gif") repeat-x left bottom;
}

.kk-news > .kk-flames {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

/* ==========================================================================
   11. TJÄNSTER – GULA SIDORNA
   ========================================================================== */
.kk-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
}

.kk-ad {
	display: flex;
}

.kk-ad__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 12px;
	background: var(--kk-yellow);
	border: 3px solid #000;
	box-shadow: 6px 6px 0 #000;
	font-family: var(--kk-sans);
	font-size: 15px;
}

.kk-ad__inner.kk-tip::after {
	bottom: auto;
	top: 8px;
	max-width: 90%;
}

.kk-ad__icon {
	text-align: center;
	margin-bottom: 6px;
}

.kk-ad__icon img {
	width: 110px;
	height: 110px;
	object-fit: contain;
}

.kk-ad__title {
	margin: 0 0 6px;
	padding: 4px 6px;
	background: #000;
	color: var(--kk-yellow);
	font: 19px/1.1 var(--kk-black-font);
	text-transform: uppercase;
	text-align: center;
}

.kk-ad__title a {
	color: var(--kk-yellow) !important;
	text-decoration: none;
}

.kk-ad__title a:hover {
	text-decoration: underline;
}

.kk-ad__text p {
	margin-bottom: .6em;
}

.kk-ad .krunst-bubble {
	margin-top: auto;
	margin-bottom: 20px;
	align-self: flex-start;
}

.kk-ad__more {
	margin: 0;
	font-weight: bold;
	text-align: right;
}

.kk-service-single__grid {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.kk-service-single__icon {
	text-align: center;
	padding: 12px;
	background: var(--kk-yellow) url("assets/images/bg-halvton.gif");
	border: 3px solid #000;
	box-shadow: 6px 6px 0 #000;
}

/* ==========================================================================
   12. ARBETSMETOD – flödesschema
   ========================================================================== */
.kk-method__lead {
	text-align: center;
	font-style: italic;
}

.kk-method__flow {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.kk-method__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 10px;
	border: 4px outset #aaa;
	color: #fff;
	font: bold 16px/1.3 var(--kk-sans);
	text-align: center;
	box-shadow: 4px 4px 0 #000;
}

.kk-method__step--1 { background: var(--kk-blue); }
.kk-method__step--2 { background: var(--kk-magenta); }
.kk-method__step--3 { background: #0a7a0a; }
.kk-method__step--4 { background: var(--kk-red); }

.kk-method__num {
	color: var(--kk-yellow);
	font: 20px var(--kk-black-font);
	text-shadow: 2px 2px 0 #000;
}

.kk-method__arrow {
	position: absolute;
	top: 50%;
	right: -38px;
	z-index: 2;
	transform: translateY(-50%);
	line-height: 0;
}

.kk-method__loop {
	margin: 16px 0 0;
	padding: 6px;
	border: 3px dashed var(--kk-red);
	color: var(--kk-red);
	font: 18px var(--kk-black-font);
	text-align: center;
}

/* ==========================================================================
   13. FAXEN
   ========================================================================== */
.kk-fax {
	position: relative;
	max-width: 640px;
	margin: 0 auto 26px;
	padding: 18px 24px 22px;
	background: #f6f4ec url("assets/images/bg-fax.gif");
	border: 1px solid #bbb;
	box-shadow: 6px 6px 0 rgba(0, 0, 0, .35);
	color: #111;
	font: 16px/1.45 var(--kk-mono);
	transform: rotate(-.6deg);
	filter: grayscale(1) contrast(1.15);
}

.kk-fax__head {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin: -10px -12px 14px;
	padding-bottom: 4px;
	border-bottom: 1px solid #333;
	font-size: 12px;
	letter-spacing: 1px;
}

.kk-fax__stamp {
	position: absolute;
	top: 34px;
	right: 20px;
	margin: 0;
	padding: 2px 10px;
	border: 4px double #333;
	font: 30px var(--kk-black-font);
	transform: rotate(8deg);
	opacity: .7;
}

.kk-fax__meta {
	margin-bottom: 14px;
	border-collapse: collapse;
}

.kk-fax__meta th {
	padding: 0 12px 0 0;
	text-align: left;
	font-weight: bold;
}

.kk-fax__title {
	margin: 0 0 12px;
	padding: 4px 0;
	border-top: 2px solid #111;
	border-bottom: 2px solid #111;
	font: bold 18px var(--kk-mono);
}

.kk-fax__list {
	margin: 0 0 14px;
	padding-left: 20px;
}

.kk-fax__list li {
	margin-bottom: 10px;
}

.kk-fax__q,
.kk-fax__a {
	display: block;
}

.kk-fax__a {
	text-decoration: underline;
}

.kk-fax__sign {
	margin: 0;
	text-align: right;
}

.kk-fax__sign span {
	display: inline-block;
	font: bold 30px var(--kk-comic);
	transform: rotate(-6deg);
}

/* ==========================================================================
   14. KUNDCASE – blanketter med stämpel
   ========================================================================== */
.kk-cases {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 18px;
	margin-bottom: 14px;
}

.kk-cases--single {
	grid-template-columns: minmax(0, 520px);
	justify-content: center;
}

.kk-case {
	position: relative;
	padding: 0 0 56px;
	overflow: hidden;
	background:
		repeating-linear-gradient(to bottom, transparent 0 25px, #b9d3ff 25px 26px),
		#fdfdf6;
	border: 2px solid var(--kk-blue);
	box-shadow: 5px 5px 0 rgba(0, 0, 0, .3);
	font-family: var(--kk-mono);
}

.kk-case__title {
	margin: 0 0 8px;
	padding: 6px 10px;
	background: var(--kk-blue);
	color: #fff;
	font: bold 20px var(--kk-mono);
	letter-spacing: 2px;
}

.kk-case__title a {
	color: #fff !important;
	text-decoration: none;
}

.kk-case__title a:hover {
	color: var(--kk-yellow) !important;
}

.kk-case__list {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1px 10px;
	margin: 0;
	padding: 0 12px;
	font-size: 14px;
	line-height: 26px;
	overflow-wrap: anywhere;
}

.kk-case__list dt {
	font-weight: bold;
	color: var(--kk-blue);
}

.kk-case__list dd {
	margin: 0;
}

.kk-case__stamp {
	position: absolute;
	right: 12px;
	bottom: 12px;
	margin: 0;
	padding: 2px 8px;
	border: 4px solid var(--kk-red);
	border-radius: 6px;
	color: var(--kk-red);
	font: 20px var(--kk-black-font);
	letter-spacing: 2px;
	transform: rotate(-12deg);
	opacity: .75;
	mix-blend-mode: multiply;
}

.kk-case__stamp--secret {
	border-color: #000;
	color: #000;
}

/* ==========================================================================
   15. GÄSTBOK (CGI-stil)
   ========================================================================== */
.kk-guestbook__intro {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-bottom: 12px;
}

.kk-guestbook__head {
	flex: none;
	width: 100px;
	height: auto;
}

.kk-guestbook__list {
	margin: 20px 0;
	padding: 12px;
	background: #e8e8e8;
	border: 2px inset #fff;
	outline: none;
}

.kk-guestbook__count {
	font: bold 15px var(--kk-sans);
	text-align: center;
}

.kk-gb-list {
	display: grid;
	gap: 14px;
}

.kk-gb-entry__table {
	width: 100%;
	border: 3px outset #d4d4d4;
	border-collapse: separate;
	border-spacing: 2px;
	background: #fff;
	font-family: var(--kk-serif);
}

.kk-gb-entry__table th {
	width: 110px;
	padding: 3px 8px;
	background: var(--kk-silver);
	border: 1px inset #eee;
	font: bold 13px var(--kk-sans);
	text-align: right;
	vertical-align: top;
}

.kk-gb-entry__table td {
	padding: 3px 8px;
	border: 1px inset #eee;
}

.kk-gb-entry__text {
	font-size: 17px;
}

.kk-gb-teaser .kk-gb-list {
	margin-bottom: 18px;
}

/* ==========================================================================
   16. FORMULÄR OCH WINDOWS 95-FÖNSTER
   ========================================================================== */
.kk-window {
	margin: 22px 0 0;
	background: var(--kk-silver);
	border: 3px outset #eee;
	box-shadow: 6px 6px 0 #000;
	scroll-margin-top: 20px;
}

.kk-window__bar {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	padding: 4px 8px;
	background: linear-gradient(90deg, var(--kk-blue), #1084d0);
	color: #fff;
	font: bold 14px var(--kk-sans);
}

.kk-window__body {
	padding: 14px;
	color: #000;
}

.kk-form__row {
	margin: 0 0 12px;
}

.kk-form label {
	display: block;
	margin: 0 0 3px;
	font: bold 15px var(--kk-sans);
}

.kk-form input[type="text"],
.kk-form input[type="email"],
.kk-form input[type="url"],
.kk-form input[type="search"],
.kk-form select,
.kk-form textarea,
.kk-search input[type="search"] {
	width: 100%;
	padding: 6px;
	background: #fff;
	border: 3px inset #eee;
	border-radius: 0;
	color: #000;
	font: 16px var(--kk-mono);
}

.kk-form textarea {
	resize: vertical;
}

.kk-form small {
	display: block;
	margin-top: 3px;
	font: 13px var(--kk-sans);
}

.kk-count {
	display: block;
	margin-top: 2px;
	font: 12px var(--kk-mono);
	text-align: right;
}

.kk-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.kk-form__note {
	margin: 10px 0 0;
	font: italic 13px var(--kk-sans);
}

.krunst-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kk-notice {
	margin: 0 0 14px;
	padding: 10px 14px;
	border: 3px solid #000;
	font: 16px var(--kk-sans);
	box-shadow: 4px 4px 0 #000;
}

.kk-notice--ok {
	background: #aaff9a;
}

.kk-notice--fel {
	background: #ffb3b3;
}

.kk-search {
	display: flex;
	gap: 8px;
	max-width: 420px;
	margin: 0 auto;
}

.kk-comments .comment-form label {
	display: block;
	font: bold 15px var(--kk-sans);
}

.kk-comments input[type="text"],
.kk-comments input[type="email"],
.kk-comments input[type="url"],
.kk-comments textarea {
	width: 100%;
	padding: 6px;
	border: 3px inset #eee;
	font: 16px var(--kk-mono);
}

/* ==========================================================================
   17. UNDER CONSTRUCTION
   ========================================================================== */
.kk-construction {
	background: #fffbe6;
	border: 4px dashed #ff8c00;
}

.kk-construction__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	gap: 12px;
	text-align: center;
}

.kk-construction__row p {
	flex: 1 1 260px;
	margin: 0;
	font: bold 16px var(--kk-comic);
}

/* ==========================================================================
   18. KONTAKT
   ========================================================================== */
.kk-contact-cta {
	margin: 0 -16px -16px;
	padding: 20px 16px 24px;
	background: var(--kk-blue) url("assets/images/bg-bla.gif");
	border-top: 4px ridge var(--kk-yellow);
	color: #fff;
	text-align: center;
}

.kk-contact-cta__url,
.kk-contact__url {
	margin: 0 0 14px;
	color: var(--kk-yellow);
	font: clamp(24px, 5vw, 40px)/1.1 var(--kk-impact);
	letter-spacing: 1px;
	text-shadow: 3px 3px 0 var(--kk-magenta), 5px 5px 0 #000;
	overflow-wrap: anywhere;
}

.kk-contact__url {
	font-size: clamp(20px, 3.4vw, 30px);
	color: var(--kk-blue);
	text-shadow: 2px 2px 0 var(--kk-yellow), 4px 4px 0 #000;
}

.kk-contact-cta__quote {
	margin: 12px 0 0;
	font: italic 17px var(--kk-serif);
}

.kk-contact__grid,
.kk-about__grid,
.kk-kist__grid,
.kk-404__grid {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.kk-contact__ake,
.kk-kist__ake,
.kk-404__ake {
	position: relative;
	text-align: center;
}

.kk-contact__label {
	margin: 12px 0 2px;
	font: bold 14px var(--kk-sans);
	text-transform: uppercase;
}

.kk-contact__address {
	margin: 0 0 16px;
	font: normal 17px var(--kk-serif);
}

/* ==========================================================================
   19. OM ÅKE OCH KISTSNICKERI
   ========================================================================== */
.kk-about__stage {
	position: relative;
	padding-top: 60px;
}

.kk-about__parmar {
	position: absolute;
	top: 0;
	left: 50%;
	width: 100%;
	transform: translateX(-50%);
	opacity: .95;
}

.kk-about__stage .krunst-ake {
	position: relative;
	z-index: 1;
}

.kk-facts {
	width: 100%;
	margin: 12px 0;
	border: 3px outset #d4d4d4;
	border-collapse: separate;
	border-spacing: 2px;
	background: #fff;
	font: 15px var(--kk-sans);
}

.kk-facts caption {
	padding: 4px;
	background: var(--kk-blue);
	color: var(--kk-yellow);
	font: 16px var(--kk-black-font);
}

.kk-facts th {
	width: 34%;
	padding: 4px 8px;
	background: var(--kk-yellow);
	border: 1px inset #eee;
	text-align: left;
}

.kk-facts td {
	padding: 4px 8px;
	border: 1px inset #eee;
}

.kk-quotes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kk-kist__banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 18px;
	padding: 8px;
	background: var(--kk-yellow) url("assets/images/bg-halvton.gif");
	border: 5px dashed var(--kk-red);
}

.kk-kist__big {
	margin: 0;
	color: var(--kk-red);
	font: clamp(22px, 4vw, 34px)/1.1 var(--kk-impact);
	text-align: center;
	text-shadow: 2px 2px 0 #fff, 4px 4px 0 #000;
}

.kk-kist__tools {
	display: flex;
	gap: 10px;
	align-items: flex-end;
}

.kk-kist__product {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	margin: 18px 0;
	padding: 14px;
	background: #f4ecdf;
	border: 3px ridge #a0703a;
}

.kk-kist__product .kk-tip {
	cursor: help;
}

.kk-kist__motto {
	margin: 18px 0;
	color: var(--kk-blue);
	font: bold 24px var(--kk-comic);
	text-align: center;
}

/* ==========================================================================
   20. 404
   ========================================================================== */
.kk-404__code {
	margin: 0 0 6px;
	color: var(--kk-red);
	font: clamp(42px, 9vw, 80px)/1 var(--kk-black-font);
	text-shadow: 4px 4px 0 #000;
}

/* ==========================================================================
   21. SIDFOT
   ========================================================================== */
.kk-footer {
	padding: 0 16px 18px;
	background: #000;
	color: #fff;
	text-align: center;
	font-family: var(--kk-sans);
	border-top: 4px ridge var(--kk-silver);
}

.kk-footer > .kk-flames {
	margin: 0 -16px 14px;
	background-color: #000;
}

.kk-footer a {
	color: var(--kk-yellow);
}

.kk-footer a:visited {
	color: #ffd0f0;
}

.kk-footer__nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 14px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.kk-counter {
	display: inline-block;
	margin: 6px 0 14px;
	padding: 10px 16px;
	background: #1d1d1d;
	border: 4px ridge #777;
}

.kk-counter p {
	margin: 0;
}

.kk-counter__label,
.kk-counter__since {
	font: bold 13px var(--kk-sans);
	letter-spacing: 1px;
	color: #ddd;
}

.kk-counter__digits {
	display: flex;
	justify-content: center;
	gap: 3px;
	margin: 6px 0 !important;
	padding: 4px;
	background: #000;
	border: 3px inset #555;
}

.kk-counter__digits span {
	display: inline-block;
	min-width: 26px;
	padding: 2px 0;
	background: linear-gradient(180deg, #3a3a3a 0%, #0b0b0b 48%, #000 52%, #262626 100%);
	border: 1px solid #555;
	color: #fff;
	font: bold 26px/1.1 var(--kk-mono);
	text-align: center;
	text-shadow: 0 0 4px rgba(255, 255, 255, .5);
}

.kk-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.kk-badges img {
	display: block;
	image-rendering: pixelated;
}

.kk-footer__legal p {
	margin: 0 0 6px;
}

.kk-footer__url {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: bold 20px var(--kk-mono);
}

.kk-footer__small {
	font-size: 13px;
	color: #ccc;
}

/* ==========================================================================
   22. POPUP – Åke dyker upp
   ========================================================================== */
.kk-popup {
	position: fixed;
	right: 14px;
	bottom: 14px;
	z-index: 900;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	max-width: 340px;
	padding: 12px;
	background: var(--kk-yellow) url("assets/images/bg-halvton.gif");
	border: 4px outset #fff3a0;
	box-shadow: 6px 6px 0 #000;
}

.kk-popup--animate {
	animation: kk-popup-in .6s cubic-bezier(.3, 1.6, .5, 1) both;
}

@keyframes kk-popup-in {
	from { transform: translateY(140%); }
	to { transform: translateY(0); }
}

.kk-popup img {
	flex: none;
	width: 90px;
	height: auto;
}

.kk-popup__text .krunst-bubble {
	margin-bottom: 20px;
	font-size: 15px;
}

.kk-popup__close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 32px;
	height: 32px;
	padding: 0;
	background: var(--kk-silver);
	border: 3px outset #eee;
	color: #000;
	font: bold 20px/1 var(--kk-sans);
	cursor: pointer;
}

/* ==========================================================================
   23. BLINK
   ========================================================================== */
.kk-blink {
	animation: kk-blink 1s steps(1, end) infinite;
}

@keyframes kk-blink {
	50% { visibility: hidden; }
}

.krunst-gif img {
	display: inline-block;
	vertical-align: middle;
}

/* ==========================================================================
   24. MINDRE RÖRELSE
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
	.kk-flames {
		background-image: url("assets/images/flammor-still.png");
	}
}

body.krunst-no-anim *,
body.krunst-no-anim *::before,
body.krunst-no-anim *::after {
	animation: none !important;
}

body.krunst-no-anim .kk-flames {
	background-image: url("assets/images/flammor-still.png");
}

/* ==========================================================================
   25. SURFPLATTA OCH MOBIL – fortfarande 1996
   ========================================================================== */
@media (max-width: 820px) {
	.kk-news {
		grid-template-columns: 110px minmax(0, 1fr);
	}
	.kk-news__kista {
		grid-column: 1 / -1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		flex-wrap: wrap;
	}
	.kk-news__burst img {
		width: 110px;
		height: 110px;
	}
	.kk-method__flow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.kk-method__step--2 .kk-method__arrow {
		display: none;
	}
}

@media (max-width: 680px) {
	body {
		padding: 8px 6px 24px;
		font-size: 16px;
	}
	.kk-page {
		box-shadow: 5px 5px 0 #000;
	}
	.kk-header {
		grid-template-columns: 1fr;
		padding: 10px;
	}
	.kk-header__side {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	.kk-header__glitter {
		display: none;
	}
	.kk-nav ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.kk-nav li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
	.kk-nav a {
		min-height: 44px;
		font-size: 14px;
	}
	.kk-main {
		padding: 10px;
	}
	.kk-heading {
		font-size: 20px;
		gap: 6px;
	}
	.kk-heading .krunst-gif img {
		width: 28px;
		height: 28px;
	}
	.kk-box {
		padding: 12px;
	}
	.kk-hero {
		grid-template-columns: 1fr;
		margin: -10px -10px 18px;
		padding: 14px 12px;
		text-align: center;
	}
	.kk-hero__ake {
		max-width: 240px;
		margin: 0 auto;
	}
	.kk-hero__bubble {
		right: -40px;
		max-width: 150px;
		font-size: 14px;
	}
	.kk-hero__buttons {
		justify-content: center;
	}
	.kk-news {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.kk-news__burst {
		display: flex;
		justify-content: center;
	}
	.kk-method__flow {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.kk-method__arrow,
	.kk-method__step--2 .kk-method__arrow {
		display: block;
		top: auto;
		right: auto;
		left: 50%;
		bottom: -38px;
		transform: translateX(-50%) rotate(90deg);
	}
	.kk-fax {
		padding: 14px 14px 18px;
		transform: none;
		font-size: 15px;
	}
	.kk-fax__stamp {
		font-size: 22px;
		top: 30px;
	}
	.kk-contact__grid,
	.kk-about__grid,
	.kk-kist__grid,
	.kk-404__grid,
	.kk-kist__product,
	.kk-service-single__grid {
		grid-template-columns: 1fr;
	}
	.kk-contact__ake,
	.kk-kist__ake,
	.kk-404__ake,
	.kk-about__ake {
		max-width: 260px;
		margin: 0 auto;
	}
	.kk-contact-cta {
		margin: 0 -10px -10px;
	}
	.kk-guestbook__intro {
		flex-direction: column;
		text-align: center;
	}
	.kk-gb-entry__table th {
		width: 88px;
	}
	.kk-counter__digits span {
		min-width: 20px;
		font-size: 21px;
	}
	.kk-popup {
		left: 10px;
		right: 10px;
		max-width: none;
	}
	.kk-btn--mail {
		flex-direction: column;
	}
}