/* =========================================================
   Thomas Kramer Blok
   Only what theme.json cannot express: the pill header, the
   block styles Thomas picks in the editor (Kort, Varmt bånd,
   Mørk, Gul, Browservindue …), card links and the FAQ.
   Loaded on the front end and inside the editor.
   ========================================================= */

:root {
	--tkb-ink: var(--wp--preset--color--contrast, #1d1d1f);
	--tkb-muted: var(--wp--preset--color--contrast-2, #5a5a5f);
	--tkb-meta: var(--wp--preset--color--contrast-3, #66656a);
	--tkb-line: var(--wp--preset--color--line, #e7e4dc);
	--tkb-cream: var(--wp--preset--color--base, #faf7f0);
	--tkb-warm: var(--wp--preset--color--base-2, #f3efe6);
	--tkb-yellow: var(--wp--preset--color--accent, #ffd200);
	--tkb-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--tkb-header-h: 76px;
}

/* ---------- Base ---------- */

/* Padding never widens a box: a wide card stays on the wide grid. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--tkb-header-h) + 16px);
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-optical-sizing: auto;
	font-feature-settings: "cv11", "ss01";
}

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

:where(p, li, dd) {
	text-wrap: pretty;
}

::selection {
	background: var(--wp--preset--color--accent-soft, #fff1a8);
	color: var(--tkb-ink);
}

a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness 0.15s ease, color 0.15s ease;
}

a:hover {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 2px solid var(--tkb-ink);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Buttons: a little depth. A soft gloss on the upper half, a light edge on
   top and a darker one at the bottom that reads as thickness, and a warm
   shadow beneath. Hover lifts the button, pressing pushes it in. The gloss is
   a background-image over the button's own colour, so any colour picked in
   the editor keeps it. */
.wp-element-button,
.wp-block-button__link,
.wpcf7 input[type="submit"] {
	--tkb-btn-edge: rgba(122, 92, 0, 0.22);
	--tkb-btn-drop: rgba(150, 112, 0, 0.42);
	--tkb-btn-hi: rgba(255, 255, 255, 0.6);
	--tkb-btn-gloss: 0.32;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, var(--tkb-btn-gloss)) 0%, rgba(255, 255, 255, calc(var(--tkb-btn-gloss) / 3)) 45%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.04) 100%);
	box-shadow:
		inset 0 1px 0 var(--tkb-btn-hi),
		inset 0 -2px 0 var(--tkb-btn-edge),
		0 1px 1px rgba(29, 29, 31, 0.08),
		0 4px 10px -3px var(--tkb-btn-drop);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.2s var(--tkb-ease), box-shadow 0.2s var(--tkb-ease);
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.wpcf7 input[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 var(--tkb-btn-hi),
		inset 0 -2px 0 var(--tkb-btn-edge),
		0 2px 3px rgba(29, 29, 31, 0.08),
		0 10px 20px -6px var(--tkb-btn-drop);
}

.wp-element-button:active,
.wp-block-button__link:active,
.wpcf7 input[type="submit"]:active {
	transform: translateY(1px);
	box-shadow:
		inset 0 2px 4px var(--tkb-btn-edge),
		0 1px 1px rgba(29, 29, 31, 0.08);
	transition-duration: 0.05s;
}

/* Outline: a pane of frosted glass with an ink rim (the header's
   "Skriv til mig"). */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	--tkb-btn-edge: rgba(29, 29, 31, 0.07);
	--tkb-btn-drop: rgba(29, 29, 31, 0.2);
	--tkb-btn-hi: rgba(255, 255, 255, 0.95);
	background-color: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(29, 29, 31, 0.2);
	color: var(--tkb-ink);
	padding: calc(0.95rem - 1px) calc(1.65rem - 1px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	--tkb-btn-edge: rgba(0, 0, 0, 0.45);
	--tkb-btn-drop: rgba(29, 29, 31, 0.35);
	--tkb-btn-hi: rgba(255, 255, 255, 0.16);
	--tkb-btn-gloss: 0.12;
	background-color: var(--tkb-ink);
	border-color: var(--tkb-ink);
	color: var(--tkb-cream);
	text-shadow: none;
}

/* ---------- Header: the floating pill ---------- */

/* Liquid Glass, as in the classic theme: a translucent capsule that blurs
   and saturates what scrolls beneath it, a light rim that catches the light
   from the top left, and a sheen that follows the pointer. The glass sits on
   ::before rather than on .tkb-nav itself: backdrop-filter on the nav would
   make it the containing block for the phone menu's position:fixed overlay
   and trap the overlay inside the pill. */

@property --tkb-sheen {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

.tkb-header {
	position: sticky;
	top: calc(16px + env(safe-area-inset-top, 0px));
	z-index: 50;
	padding: 0 20px;
	margin-top: 16px;
	pointer-events: none;
	--tkb-glass-blur: blur(28px) saturate(200%);
	--tkb-glass-fill: rgba(255, 255, 255, 0.30);
	--tkb-glass-fill-scrolled: rgba(255, 255, 255, 0.48);
	--tkb-glass-shadow:
		0 1px 2px rgba(29, 29, 31, 0.06),
		0 8px 28px rgba(29, 29, 31, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.92),
		inset 0 -1px 1px rgba(29, 29, 31, 0.08);
	--tkb-glass-shadow-scrolled:
		0 2px 4px rgba(29, 29, 31, 0.06),
		0 12px 36px rgba(29, 29, 31, 0.10),
		inset 0 1px 0 rgba(255, 255, 255, 0.92),
		inset 0 -1px 1px rgba(29, 29, 31, 0.10);
}

.admin-bar .tkb-header {
	top: calc(16px + var(--wp-admin--admin-bar--height, 32px));
}

.tkb-nav {
	position: relative;
	isolation: isolate;
	pointer-events: auto;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	padding: 8px 8px 8px 22px;
	border-radius: 999px;
}

/* The glass itself. */
.tkb-nav::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background:
		radial-gradient(70px 40px at var(--tkb-glass-x, 50%) var(--tkb-glass-y, 0%), rgba(255, 255, 255, calc(0.72 * var(--tkb-sheen))), transparent 62%),
		var(--tkb-glass-fill);
	-webkit-backdrop-filter: var(--tkb-glass-blur);
	backdrop-filter: var(--tkb-glass-blur);
	box-shadow: var(--tkb-glass-shadow);
	transition: --tkb-sheen 0.18s var(--tkb-ease), box-shadow 0.28s var(--tkb-ease);
}

.tkb-nav:hover::before {
	--tkb-sheen: 1;
}

/* The rim: bright where the light hits, a hint of ink opposite. */
.tkb-nav::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(155deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.22) 32%, rgba(29, 29, 31, 0.12) 68%, rgba(255, 255, 255, 0.35) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.tkb-header.is-scrolled .tkb-nav::before {
	background:
		radial-gradient(70px 40px at var(--tkb-glass-x, 50%) var(--tkb-glass-y, 0%), rgba(255, 255, 255, calc(0.72 * var(--tkb-sheen))), transparent 62%),
		var(--tkb-glass-fill-scrolled);
	box-shadow: var(--tkb-glass-shadow-scrolled);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.tkb-nav::before {
		background: rgba(255, 255, 255, 0.94);
	}

	.tkb-header.is-scrolled .tkb-nav::before {
		background: rgba(255, 255, 255, 0.98);
	}
}

@media (hover: none), (prefers-reduced-motion: reduce) {
	.tkb-nav:hover::before {
		--tkb-sheen: 0;
	}
}

.tkb-nav .wp-block-site-title {
	margin-right: 1.25rem;
	white-space: nowrap;
}

.tkb-nav .wp-block-site-title a {
	color: var(--tkb-ink);
}

.tkb-nav .wp-block-navigation__container {
	gap: 0.25rem;
}

.tkb-nav .wp-block-navigation-item__content {
	position: relative;
	padding: 0.5rem 0.8rem;
	border-radius: 999px;
	color: rgba(29, 29, 31, 0.72);
	transition: background-color 0.2s var(--tkb-ease), color 0.2s var(--tkb-ease);
}

/* Hover and the section you are in light up as a small pane of brighter
   glass, as in the classic menu. */
.tkb-nav .wp-block-navigation-item__content:hover,
.tkb-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--tkb-ink);
	background: rgba(255, 255, 255, 0.55);
}

.tkb-nav .current-menu-item > .wp-block-navigation-item__content {
	font-weight: 600;
}

.tkb-nav .current-menu-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0.15rem;
	height: 3px;
	border-radius: 2px;
	background: var(--tkb-yellow);
}

.tkb-nav .wp-block-buttons {
	margin-left: 0.75rem;
}

.tkb-nav .wp-block-button__link {
	padding: 0.7rem 1.15rem;
	font-size: 1rem;
	font-weight: 500;
	white-space: nowrap;
}

.tkb-nav .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: calc(0.7rem - 1px) calc(1.15rem - 1px);
}

@media (max-width: 960px) {
	.tkb-nav {
		padding-left: 18px;
	}

	.tkb-nav .wp-block-site-title {
		margin-right: 0.5rem;
	}

	.tkb-nav .wp-block-navigation-item__content {
		padding-inline: 0.55rem;
	}

	.tkb-nav .current-menu-item > .wp-block-navigation-item__content::after {
		left: 0.55rem;
		right: 0.55rem;
	}
}

/* Below 782 px the links fold into the overlay. The pill keeps the name,
   the menu button and "Skriv til mig". */
@media (max-width: 781px) {
	/* Core folds the menu at 600 px; five links plus the button need ~700. */
	.tkb-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.tkb-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.tkb-nav {
		width: 100%;
		justify-content: space-between;
	}

	.tkb-nav .wp-block-buttons {
		margin-left: auto;
	}

	/* Name left, "Skriv til mig" and the menu button right. */
	.tkb-nav .wp-block-navigation {
		order: 3;
	}

	.tkb-nav .wp-block-button__link {
		padding: 0.6rem 0.95rem;
		font-size: 0.9375rem;
	}

	.tkb-nav .wp-block-button.is-style-outline > .wp-block-button__link {
		padding: calc(0.6rem - 1px) calc(0.95rem - 1px);
	}
}

@media (max-width: 360px) {
	.tkb-nav .wp-block-buttons {
		display: none;
	}
}

/* Overlay menu (phones): a calm cream sheet with large links. */
.tkb-nav .wp-block-navigation__responsive-container-open {
	order: 3;
	width: 44px;
	height: 44px;
	margin-left: 0.25rem;
	border-radius: 999px;
	align-items: center;
	justify-content: center;
}

.tkb-nav .wp-block-navigation__responsive-container-open:hover {
	background: rgba(29, 29, 31, 0.06);
}

.tkb-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--tkb-cream);
	padding: clamp(1.25rem, 6vw, 2rem);
}

.tkb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4.5rem;
	align-items: flex-start;
}

.tkb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.25rem;
}

.tkb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.35rem 0;
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.tkb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	background: none;
}

.tkb-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content::after {
	left: 0;
	right: 0;
	bottom: 0.2rem;
	height: 4px;
}

.tkb-nav .wp-block-navigation__responsive-container-close {
	top: 1.5rem;
	right: 1.5rem;
}

/* ---------- Block styles: sections and cards ---------- */

.is-style-card {
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--tkb-line);
	border-radius: 24px;
	box-shadow: var(--wp--preset--shadow--card);
}

.is-style-card:where(:not([style*="padding"])) {
	padding: clamp(1.25rem, 2.5vw, 2rem);
}

/* A card whose heading is a link is clickable as a whole. Other links in the
   card stay reachable above the stretched one. */
.is-style-card:has(:is(h2, h3, h4) a) {
	position: relative;
	transition: transform 0.25s var(--tkb-ease), box-shadow 0.25s var(--tkb-ease), border-color 0.25s ease;
}

.is-style-card :is(h2, h3, h4) a {
	text-decoration: none;
}

.is-style-card :is(h2, h3, h4) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.is-style-card:has(:is(h2, h3, h4) a):hover {
	transform: translateY(-3px);
	border-color: #d9d4c7;
	box-shadow: var(--wp--preset--shadow--lift);
}

.is-style-card:has(:is(h2, h3, h4) a):hover :is(h2, h3, h4) a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.is-style-card :is(p, .wp-block-buttons) a:not(:is(h2, h3, h4) a) {
	position: relative;
	z-index: 1;
}

.is-style-card:has(:is(h2, h3, h4) a):focus-within {
	outline: 2px solid var(--tkb-ink);
	outline-offset: 3px;
}

.is-style-card :is(h2, h3, h4) a:focus-visible {
	outline: none;
}

.is-style-band {
	background: var(--tkb-warm);
	border-block: 1px solid var(--tkb-line);
}

.is-style-dark {
	background: var(--tkb-ink);
	color: var(--tkb-cream);
}

.is-style-dark :is(h1, h2, h3, h4, h5, h6),
.is-style-dark a:where(:not(.wp-element-button)) {
	color: var(--tkb-cream);
}

.is-style-dark .has-contrast-2-color,
.is-style-dark .has-contrast-3-color,
.is-style-dark .is-style-eyebrow {
	color: #b8b4aa !important;
}

.is-style-dark .is-style-card {
	background: #28282b;
	border-color: rgba(250, 247, 240, 0.1);
	box-shadow: none;
}

.is-style-dark .is-style-card:has(:is(h2, h3, h4) a):hover {
	border-color: rgba(250, 247, 240, 0.28);
}

.is-style-dark .wp-block-button__link {
	--tkb-btn-drop: rgba(0, 0, 0, 0.55);
}

.is-style-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	--tkb-btn-edge: rgba(0, 0, 0, 0.35);
	--tkb-btn-hi: rgba(255, 255, 255, 0.16);
	--tkb-btn-gloss: 0.08;
	background-color: rgba(250, 247, 240, 0.07);
	border-color: rgba(250, 247, 240, 0.32);
	color: var(--tkb-cream);
	text-shadow: none;
}

.is-style-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	--tkb-btn-edge: rgba(122, 92, 0, 0.18);
	--tkb-btn-hi: rgba(255, 255, 255, 0.95);
	--tkb-btn-gloss: 0.32;
	background-color: var(--tkb-cream);
	border-color: var(--tkb-cream);
	color: var(--tkb-ink);
}

.is-style-dark .is-style-pill {
	background: rgba(250, 247, 240, 0.08);
	border-color: rgba(250, 247, 240, 0.16);
	color: var(--tkb-cream);
}

.is-style-accent {
	background: var(--tkb-yellow);
	color: var(--tkb-ink);
}

.is-style-accent .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	--tkb-btn-edge: rgba(0, 0, 0, 0.5);
	--tkb-btn-drop: rgba(110, 82, 0, 0.55);
	--tkb-btn-hi: rgba(255, 255, 255, 0.18);
	--tkb-btn-gloss: 0.12;
	background-color: var(--tkb-ink);
	color: var(--tkb-cream);
	text-shadow: none;
}

.is-style-accent .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background-color: #34343a;
}

.is-style-accent .wp-block-button.is-style-outline > .wp-block-button__link {
	--tkb-btn-drop: rgba(110, 82, 0, 0.35);
	background-color: rgba(255, 255, 255, 0.35);
	border-color: rgba(29, 29, 31, 0.35);
}

.is-style-accent .has-contrast-2-color {
	color: #3d3a2a !important;
}

/* Pill: a small status chip ("Live", "På vej", "2 ad gangen"). */
.wp-block-group.is-style-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	width: fit-content;
	padding: 0.3rem 0.8rem;
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--tkb-line);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
}

.wp-block-group.is-style-pill > * {
	margin: 0;
}

/* ---------- Block styles: images ---------- */

/* A screenshot in a light browser window, like the case heroes. */
.wp-block-image.is-style-browser {
	position: relative;
	padding-top: 30px;
	background: #f3efe6;
	border: 1px solid var(--tkb-line);
	border-radius: 14px;
	box-shadow: var(--wp--preset--shadow--lift);
	overflow: hidden;
}

.wp-block-image.is-style-browser::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 14px;
	width: 44px;
	height: 8px;
	background:
		radial-gradient(circle at 4px 4px, #d9d4c7 3.5px, transparent 4px),
		radial-gradient(circle at 20px 4px, #d9d4c7 3.5px, transparent 4px),
		radial-gradient(circle at 36px 4px, #d9d4c7 3.5px, transparent 4px);
}

.wp-block-image.is-style-browser::after {
	content: "";
	position: absolute;
	top: 8px;
	left: 50%;
	width: min(38%, 220px);
	height: 14px;
	transform: translateX(-50%);
	background: #fff;
	border-radius: 999px;
}

.wp-block-image.is-style-browser img {
	display: block;
	width: 100%;
	border-radius: 0;
	background: #fff;
}

.wp-block-image.is-style-browser figcaption {
	margin: 0;
	padding: 0.6rem 1rem;
	background: #fff;
	border-top: 1px solid var(--tkb-line);
}

/* A portrait screenshot as a phone. */
.wp-block-image.is-style-phone img {
	border: 7px solid #1d1d1f;
	border-radius: 38px;
	box-shadow: var(--wp--preset--shadow--lift);
	background: #1d1d1f;
}

/* ---------- Block styles: text ---------- */

.is-style-eyebrow {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--tkb-muted);
}

.is-style-eyebrow a {
	color: inherit;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1.5px;
}

.is-style-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0;
	color: var(--tkb-meta);
}

.is-style-arrow a,
a.is-style-arrow {
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.is-style-arrow a::after {
	content: " →";
	display: inline-block;
	margin-left: 0.15em;
	transition: transform 0.2s var(--tkb-ease);
}

.is-style-arrow a:hover {
	text-decoration: underline;
}

.is-style-arrow a:hover::after {
	transform: translateX(3px);
}

.wp-block-heading.is-style-stat {
	font-size: clamp(2.5rem, 5vw, 3.75rem);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Lists */
ul.is-style-checks,
ol.is-style-checks {
	list-style: none;
	padding-left: 0;
}

.is-style-checks > li {
	position: relative;
	padding-left: 2rem;
}

.is-style-checks > li + li {
	margin-top: 0.6rem;
}

.is-style-checks > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.95rem no-repeat,
		var(--tkb-yellow);
}

ol.is-style-steps {
	list-style: none;
	padding-left: 0;
	counter-reset: tkb-step;
}

.is-style-steps > li {
	position: relative;
	counter-increment: tkb-step;
	padding-left: 3.25rem;
	min-height: 2.25rem;
}

.is-style-steps > li + li {
	margin-top: 1.25rem;
}

.is-style-steps > li::before {
	content: counter(tkb-step);
	position: absolute;
	left: 0;
	top: -0.1em;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--tkb-ink);
	color: var(--tkb-cream);
	font-size: 0.9375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.is-style-steps > li strong:first-child {
	display: block;
	margin-bottom: 0.15rem;
}

ul.is-style-plain,
ol.is-style-plain {
	list-style: none;
	padding-left: 0;
}

/* ---------- FAQ (details) ---------- */

.wp-block-details {
	border-top: 0;
}

.wp-block-details > summary {
	position: relative;
	padding-right: 2.5rem;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::after {
	content: "";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	width: 1.75rem;
	height: 1.75rem;
	margin-top: -0.875rem;
	border-radius: 50%;
	border: 1px solid var(--tkb-line);
	background:
		linear-gradient(var(--tkb-ink), var(--tkb-ink)) center / 10px 1.75px no-repeat,
		linear-gradient(var(--tkb-ink), var(--tkb-ink)) center / 1.75px 10px no-repeat,
		var(--wp--preset--color--surface, #fff);
	transition: transform 0.25s var(--tkb-ease), background-color 0.2s ease;
}

.wp-block-details[open] > summary::after {
	transform: rotate(45deg);
	background-color: var(--tkb-yellow);
	border-color: var(--tkb-yellow);
}

.wp-block-details > summary:hover::after {
	border-color: #cfc9bb;
}

.wp-block-details > :not(summary) {
	color: var(--tkb-muted);
}

.wp-block-details > summary + * {
	margin-top: 0.75rem;
}

.is-style-dark .wp-block-details > :not(summary) {
	color: #c9c5bb;
}

/* ---------- Query loops ---------- */

.wp-block-post-template.is-style-cards > li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--tkb-line);
	border-radius: 24px;
	box-shadow: var(--wp--preset--shadow--card);
	transition: transform 0.25s var(--tkb-ease), box-shadow 0.25s var(--tkb-ease), border-color 0.25s ease;
}

.wp-block-post-template.is-style-cards > li > * {
	margin: 0;
}

.wp-block-post-template.is-style-cards .wp-block-post-title a {
	text-decoration: none;
}

.wp-block-post-template.is-style-cards .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.wp-block-post-template.is-style-cards > li:hover {
	transform: translateY(-3px);
	border-color: #d9d4c7;
	box-shadow: var(--wp--preset--shadow--lift);
}

.wp-block-post-template.is-style-cards > li:hover .wp-block-post-title a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.wp-block-post-template.is-style-cards > li:focus-within {
	outline: 2px solid var(--tkb-ink);
	outline-offset: 3px;
}

.wp-block-post-template.is-style-cards .wp-block-post-title a:focus-visible {
	outline: none;
}

.wp-block-post-template.is-style-cards .wp-block-post-featured-image {
	margin: calc(-1 * clamp(1.25rem, 2.5vw, 1.75rem)) calc(-1 * clamp(1.25rem, 2.5vw, 1.75rem)) 0.4rem;
	overflow: hidden;
	border-radius: 23px 23px 0 0;
	border-bottom: 1px solid var(--tkb-line);
}

.wp-block-post-template.is-style-cards .wp-block-post-featured-image img {
	border-radius: 0;
}

.wp-block-post-template.is-style-cards .wp-block-post-terms a,
.wp-block-post-template.is-style-rows .wp-block-post-terms a {
	position: relative;
	z-index: 1;
}

/* Rows: an archive list that reads like a table of contents. */
.wp-block-post-template.is-style-rows > li {
	position: relative;
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: 0.25rem 1.5rem;
	align-items: baseline;
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--tkb-line);
}

.wp-block-post-template.is-style-rows > li > * {
	margin: 0;
}

.wp-block-post-template.is-style-rows > li > :not(.wp-block-post-date) {
	grid-column: 2;
}

.wp-block-post-template.is-style-rows .wp-block-post-date {
	grid-column: 1;
	grid-row: 1;
}

.wp-block-post-template.is-style-rows .wp-block-post-title a {
	text-decoration: none;
}

.wp-block-post-template.is-style-rows .wp-block-post-title a:hover {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.wp-block-post-template.is-style-rows > li {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-post-template.is-style-rows > li > *,
	.wp-block-post-template.is-style-rows .wp-block-post-date {
		grid-column: 1;
		grid-row: auto;
	}
}

.wp-block-query-pagination {
	gap: 0.5rem;
	font-weight: 600;
}

.wp-block-query-pagination a {
	text-decoration: none;
}

/* ---------- Posts ---------- */

.tkb-article__body > :where(h2) {
	margin-top: 1.8em;
}

.tkb-article__body > :where(h3) {
	margin-top: 1.5em;
}

.wp-block-post-content :where(img) {
	border-radius: 14px;
}

.wp-block-post-terms a {
	text-decoration: none;
}

.wp-block-post-terms a:hover {
	text-decoration: underline;
}

.tkb-meta-row {
	color: var(--tkb-meta);
}

.tkb-meta-row > * {
	margin: 0;
}

.tkb-meta-row > * + *::before {
	content: "·";
	margin-right: 0.6rem;
	color: var(--tkb-meta);
}

/* ---------- Tables ---------- */

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table :is(th, td) {
	padding: 0.7rem 0.9rem;
	border: 0;
	border-bottom: 1px solid var(--tkb-line);
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead {
	border-bottom: 0;
}

.wp-block-table th {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--tkb-meta);
}

/* ---------- Forms (Contact Form 7) ---------- */

.wpcf7 form {
	display: grid;
	gap: 1rem;
}

.wpcf7 label {
	display: grid;
	gap: 0.4rem;
	font-weight: 600;
	font-size: 0.9375rem;
}

.wpcf7 :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], textarea, select) {
	width: 100%;
	box-sizing: border-box;
	padding: 0.85rem 1rem;
	font: inherit;
	font-weight: 400;
	color: var(--tkb-ink);
	background: #fff;
	border: 1px solid #d9d4c7;
	border-radius: 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpcf7 textarea {
	min-height: 9rem;
	resize: vertical;
}

.wpcf7 :is(input, textarea, select):focus {
	outline: none;
	border-color: var(--tkb-ink);
	box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.55);
}

.wpcf7 input[type="submit"] {
	justify-self: start;
	padding: 0.95rem 1.65rem;
	font: inherit;
	font-weight: 600;
	color: var(--tkb-ink);
	background-color: var(--tkb-yellow);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
	background-color: #f2c600;
}

.wpcf7 .wpcf7-spinner {
	margin: 0 0 0 0.75rem;
}

.wpcf7 .wpcf7-response-output {
	margin: 0;
	border-radius: 12px;
}

/* ---------- Footer ---------- */

.tkb-footer a {
	text-decoration: none;
}

.tkb-footer a:hover {
	text-decoration: underline;
}

.tkb-footer .wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.15rem 0;
}

/* ---------- Small screens ---------- */

@media (max-width: 781px) {
	.wp-block-columns.tkb-stack-reverse {
		flex-direction: column-reverse;
	}
}

/* ---------- Rhythm ---------- */

/* Header, main and footer sit flush; sections bring their own padding. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Full-width sections inside page content stack without cream gaps. */
:where(.wp-block-post-content, .entry-content) > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---------- Footer layout ---------- */

.tkb-footer {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--40);
}

.tkb-footer__name {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.tkb-footer .is-style-plain li + li {
	margin-top: 0.35rem;
}

.tkb-footer__bottom {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--tkb-line);
}

.tkb-footer__bottom > p {
	margin: 0;
}

/* ---------- Template sections ---------- */

.tkb-hero {
	padding-top: clamp(2.5rem, 7vw, 6rem);
	padding-bottom: clamp(2rem, 5vw, 4rem);
}

.tkb-hero .wp-block-heading {
	margin-top: 0.75rem;
}

.tkb-section {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.tkb-section--tight {
	padding-top: 0;
}

.tkb-page-head {
	padding-top: clamp(2.5rem, 7vw, 6rem);
}

.tkb-page-body {
	padding-bottom: var(--wp--preset--spacing--70);
}

.tkb-article {
	padding-top: clamp(2rem, 6vw, 5rem);
	padding-bottom: var(--wp--preset--spacing--60);
}

.tkb-article__head .wp-block-post-title {
	margin-top: 1rem;
}

.tkb-article__image {
	margin-top: var(--wp--preset--spacing--50);
}

.tkb-article__image img {
	border-radius: 20px;
}

.tkb-article__body {
	margin-top: var(--wp--preset--spacing--50);
	font-size: 1.125rem;
	line-height: 1.7;
}

.tkb-author {
	margin-top: var(--wp--preset--spacing--60);
	gap: 1.1rem;
}

.tkb-author > * {
	margin: 0;
}

.tkb-author__img img {
	border-radius: 50%;
}

.tkb-more {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

/* ---------- Opfordringer (gul boks) ---------- */

.tkb-section--cta {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--60);
}

.tkb-cta {
	padding: clamp(1.75rem, 5vw, 4rem);
	border-radius: 28px;
}

.tkb-cta > * {
	margin-block: 0;
}

.tkb-cta > * + * {
	margin-block-start: 1rem;
}

.tkb-cta .wp-block-buttons {
	margin-block-start: 1.75rem;
}

/* Stats strip under a hero. */
.tkb-section--stats {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
}

.tkb-stats {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--tkb-line);
}

.tkb-stats .wp-block-heading.is-style-stat {
	margin-bottom: 0.4rem;
}

.tkb-stats p {
	margin: 0;
	max-width: 22ch;
}

/* Section heads and cards inside grids. */
.tkb-head {
	margin-bottom: var(--wp--preset--spacing--40);
}

.tkb-head > * {
	margin-block: 0;
}

.tkb-head > * + * {
	margin-block-start: 0.75rem;
}

.tkb-grid > .is-style-card > * {
	margin-block: 0;
}

.is-style-card > .wp-block-image.is-style-browser:first-child {
	margin: calc(-1 * clamp(1.25rem, 2.5vw, 2rem)) calc(-1 * clamp(1.25rem, 2.5vw, 2rem)) 0.5rem;
	border-width: 0 0 1px;
	border-radius: 23px 23px 0 0;
	box-shadow: none;
}

.tkb-card-top {
	gap: 0.5rem;
}

.tkb-card-top > * {
	margin: 0;
}

.tkb-bot-asks {
	margin-top: auto !important;
	padding-top: 0.75rem;
	border-top: 1px solid var(--tkb-line);
}

.is-style-dark .tkb-bot-asks {
	border-color: rgba(250, 247, 240, 0.12);
}

.tkb-note {
	margin-top: var(--wp--preset--spacing--50);
	max-width: 60ch;
}

.tkb-portrait img {
	border-radius: 28px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}

.tkb-facts table {
	border-top: 1px solid var(--tkb-line);
}

.tkb-facts th {
	width: 32%;
	color: var(--tkb-meta);
	font-weight: 600;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.tkb-cards-2 > .wp-block-column > .is-style-card {
	height: 100%;
}

.tkb-case-feature {
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.tkb-case-feature .wp-block-columns {
	gap: clamp(1.5rem, 4vw, 3rem);
}

.tkb-case-feature .wp-block-column > * + * {
	margin-block-start: 1rem;
}

@media (max-width: 600px) {
	.wp-block-button__link {
		padding: 0.85rem 1.25rem;
	}

	.wp-block-button.is-style-outline > .wp-block-button__link,
	.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
		padding: calc(0.85rem - 1px) calc(1.25rem - 1px);
	}

	.wp-block-buttons {
		gap: 0.6rem;
	}
}

/* ---------- Search ---------- */

.wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

.wp-block-search__input {
	padding: 0.8rem 1.15rem;
	font: inherit;
	background: #fff;
	border: 1px solid #d9d4c7;
	border-radius: 999px;
}

.wp-block-search__input:focus {
	outline: none;
	border-color: var(--tkb-ink);
	box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.55);
}

.wp-block-search__button {
	margin-left: 0;
}

/* ---------- Bot-teamet (oktober 2026) ----------
   The window of six bot tiles in the hero, the icon chip on every bot card
   and the small labels (Rolle / Eksempel / Spørger om lov). */

.tkb-bot-window {
	padding: clamp(0.9rem, 2vw, 1.25rem);
	background: #fff;
	border: 1px solid #d9d4c7;
	border-radius: 22px;
	box-shadow: var(--wp--preset--shadow--lift);
}

.tkb-bot-window > .tkb-bot-tiles {
	padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1rem, 4vw, 3rem);
	background: var(--tkb-warm);
	border-radius: 14px;
	box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.04);
	gap: clamp(0.5rem, 1.4vw, 0.85rem);
	max-width: 100%;
}

.tkb-bot-tile {
	gap: 0.55rem;
	align-items: center;
	padding: 1rem 0.5rem 0.85rem;
	background: #fff;
	border: 1px solid var(--tkb-line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(29, 29, 31, 0.04), 0 6px 16px -10px rgba(29, 29, 31, 0.25);
	text-align: center;
	transition: transform 0.25s var(--tkb-ease), box-shadow 0.25s var(--tkb-ease);
}

.tkb-bot-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(29, 29, 31, 0.05), 0 12px 24px -12px rgba(29, 29, 31, 0.32);
}

.tkb-bot-tile > * {
	margin: 0;
}

.tkb-bot-tile__name {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.005em;
	word-break: break-word;
}

.wp-block-image.tkb-bot-tile__app img {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.08);
}

/* The icon chip: a small cream square with the line icon in the middle. */
.wp-block-image.tkb-bot-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	background: var(--tkb-warm);
	border-radius: 12px;
	box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.05);
}

.tkb-bot-tile .wp-block-image.tkb-bot-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
}

.wp-block-image.tkb-bot-icon img {
	width: 22px;
	height: 22px;
	border-radius: 0;
}

.tkb-bot-card {
	gap: 0;
}

.tkb-bot-card > .wp-block-heading {
	margin: 1rem 0 0.4rem;
}

.tkb-bot-card > p {
	margin: 0;
}

.tkb-bot-card > .tkb-bot-label {
	margin-top: 0.85rem;
	font-weight: 600;
	color: var(--tkb-ink);
}

.tkb-bot-rules {
	padding-top: 0;
}

.tkb-bot-rules .is-style-card > * {
	margin: 0;
}

.tkb-bot-rules .is-style-card > * + * {
	margin-top: 0.5rem;
}

@media (max-width: 600px) {
	.tkb-bot-tile__name {
		font-size: 0.6875rem;
	}
}