/*
Theme Name: Søvnklar
Theme URI: https://soevnklar.dk/
Author: Søvnklar
Author URI: https://soevnklar.dk/
Description: Letvægts, hurtigt WordPress-tema til Søvnklar – en dansk blog om søvn, senge, madrasser og gode døgnrytmer, bygget til affiliate-indhold.
Version: 1.0.0
Requires at least: 6.1
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: soevnklar
Tags: blog, one-column, custom-logo, custom-menu, custom-colors, featured-images, block-styles, wide-blocks, editor-style, translation-ready

Søvnklar is distributed under the terms of the GNU GPL v2 or later.
*/

/* --------------------------------------------------------------
 * 1. Design tokens
 * Colour tokens are re-declared at runtime from the Customizer,
 * see inc/customizer-css.php. Values below are the fallbacks.
 * ----------------------------------------------------------- */
:root {
	--svk-primary: #2b2d5c;
	--svk-primary-dark: #1c1d40;
	--svk-primary-light: #eceafa;
	--svk-secondary: #d9a441;
	--svk-secondary-dark: #b3822b;

	--svk-text: #23243d;
	--svk-text-muted: #6b6b85;
	--svk-border: #e3e1ef;
	--svk-surface: #f7f6fb;
	--svk-body-bg: #ffffff;
	--svk-white: #ffffff;

	--svk-header-bg: #ffffff;
	--svk-header-text: #2b2d5c;
	--svk-topbar-bg: #2b2d5c;
	--svk-topbar-text: #ffffff;
	--svk-footer-bg: #2b2d5c;
	--svk-footer-text: #dedcf0;

	--svk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--svk-font-heading: var(--svk-font);
	--svk-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Type scales with the column: a wider measure needs bigger text to keep
	   the characters-per-line count sane. 17px → 19px. */
	--svk-fs-base: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
	--svk-lh-base: 1.7;

	/* Single-column since 1.5.0 — no sidebar to reserve room for.
	   --svk-content-width is the one knob for article line length; drop it
	   to 52rem if lines start feeling long. */
	--svk-content-width: 58rem;   /* article text column, 928px    */
	--svk-wide-width: 76rem;      /* alignwide                     */
	--svk-container: 82rem;       /* outer shell                   */
	--svk-gutter: clamp(1rem, 4vw, 2rem);

	--svk-radius: 12px;
	--svk-radius-lg: 20px;
	--svk-shadow: 0 1px 2px rgba(35, 36, 61, .06), 0 4px 16px rgba(35, 36, 61, .07);
	--svk-shadow-lg: 0 6px 30px rgba(35, 36, 61, .13);
	--svk-transition: .18s ease;
}

/* --------------------------------------------------------------
 * 2. Reset / base
 * ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--svk-body-bg);
	color: var(--svk-text);
	font-family: var(--svk-font);
	font-size: var(--svk-fs-base);
	line-height: var(--svk-lh-base);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

img, svg, video, iframe, embed, object {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

img { border: 0; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--svk-font-heading);
	color: var(--svk-primary);
	line-height: 1.22;
	margin: 2.2rem 0 .75rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 1.45rem + 2.1vw, 2.9rem); margin-top: 0; }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.05rem); }
h3 { font-size: clamp(1.25rem, 1.12rem + .6vw, 1.55rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; }

p, ul, ol, dl, table, pre, figure, blockquote { margin: 0 0 1.35rem; }

a {
	color: var(--svk-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color var(--svk-transition);
}
a:hover, a:focus { color: var(--svk-secondary-dark); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--svk-secondary);
	outline-offset: 2px;
	border-radius: 3px;
}

ul, ol { padding-left: 1.35rem; }
li { margin-bottom: .4rem; }

blockquote {
	border-left: 4px solid var(--svk-secondary);
	background: var(--svk-surface);
	padding: 1rem 1.35rem;
	border-radius: 0 var(--svk-radius) var(--svk-radius) 0;
	font-size: 1.05em;
}
blockquote > :last-child { margin-bottom: 0; }
blockquote cite { display: block; font-size: .875rem; color: var(--svk-text-muted); font-style: normal; margin-top: .5rem; }

code, kbd, pre, samp { font-family: var(--svk-font-mono); font-size: .9em; }
code { background: var(--svk-surface); padding: .15em .4em; border-radius: 4px; }
pre {
	background: var(--svk-primary-dark);
	color: #e6eef5;
	padding: 1.15rem;
	border-radius: var(--svk-radius);
	overflow-x: auto;
}
pre code { background: none; padding: 0; color: inherit; }

hr {
	border: 0;
	border-top: 1px solid var(--svk-border);
	margin: 2.5rem 0;
}

table { border-collapse: collapse; width: 100%; }
th, td { padding: .7rem .85rem; border: 1px solid var(--svk-border); text-align: left; }
th { background: var(--svk-surface); font-weight: 700; color: var(--svk-primary); }

figcaption, .wp-caption-text {
	font-size: .85rem;
	color: var(--svk-text-muted);
	text-align: center;
	margin-top: .5rem;
}

/* --------------------------------------------------------------
 * 3. Accessibility helpers
 * ----------------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	white-space: nowrap;
}
.screen-reader-text:focus {
	clip-path: none;
	background: var(--svk-white);
	color: var(--svk-primary);
	display: block;
	font-weight: 700;
	height: auto;
	left: 1rem;
	top: 1rem;
	padding: .9rem 1.4rem;
	width: auto;
	z-index: 1000;
	border-radius: var(--svk-radius);
	box-shadow: var(--svk-shadow-lg);
}

.skip-link { position: absolute; }

/* --------------------------------------------------------------
 * 4. Layout shell
 * ----------------------------------------------------------- */
.svk-container {
	width: 100%;
	max-width: var(--svk-container);
	margin-inline: auto;
	padding-inline: var(--svk-gutter);
}

/* Lets the hero break out to 100vw without creating a horizontal scrollbar.
   `clip` rather than `hidden` so the sticky header keeps working. */
.site { overflow-x: clip; }

.site-content { padding-block: clamp(1.75rem, 4vw, 3.25rem); }

/* The hero supplies its own top spacing. */
.svk-has-hero .site-content { padding-top: 0; }

.svk-layout {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
	grid-template-columns: minmax(0, 1fr);
}

/* Single/page content column keeps an optimal measure. */
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
	max-width: var(--svk-content-width);
	margin-inline: auto;
}

/* Alignments */
.alignwide {
	max-width: var(--svk-wide-width);
	margin-inline: auto;
}
.alignfull {
	max-width: 100vw;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.alignleft {
	float: left;
	margin: .35rem 1.75rem 1.25rem 0;
	max-width: 45%;
}
.alignright {
	float: right;
	margin: .35rem 0 1.25rem 1.75rem;
	max-width: 45%;
}
.aligncenter { margin-inline: auto; display: block; }
.entry-content::after { content: ""; display: table; clear: both; }

@media (max-width: 40rem) {
	.alignleft, .alignright { float: none; margin-inline: auto; max-width: 100%; }
}

/* --------------------------------------------------------------
 * 5. Buttons
 * ----------------------------------------------------------- */
/* Block buttons live in assets/css/blocks.css so the editor matches exactly. */
.svk-btn,
button, input[type="submit"], input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	background: var(--svk-primary);
	color: var(--svk-white);
	border: 0;
	border-radius: var(--svk-radius);
	padding: .72rem 1.35rem;
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--svk-transition), transform var(--svk-transition), box-shadow var(--svk-transition);
}
.svk-btn:hover,
button:hover, input[type="submit"]:hover {
	background: var(--svk-primary-dark);
	color: var(--svk-white);
	transform: translateY(-1px);
}

/* The affiliate money button. */
.svk-btn--cta {
	background: var(--svk-secondary);
	color: var(--svk-on-secondary, #1e1f36);
	font-size: 1.05rem;
	font-weight: 700;
	padding: .95rem 1.9rem;
	box-shadow: 0 3px 0 0 var(--svk-secondary-dark);
}
.svk-btn--cta:hover, .svk-btn--cta:focus {
	background: var(--svk-secondary-dark);
	color: var(--svk-on-secondary, #1e1f36);
	box-shadow: 0 2px 0 0 var(--svk-secondary-dark);
}
.svk-btn--block { display: flex; width: 100%; }
.svk-btn--ghost {
	background: transparent;
	color: var(--svk-primary);
	border: 2px solid var(--svk-border);
}
.svk-btn--ghost:hover { background: var(--svk-primary-light); color: var(--svk-primary); }
.svk-btn--sm { padding: .45rem .9rem; font-size: .875rem; }

/* --------------------------------------------------------------
 * 6. Forms
 * ----------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="tel"], input[type="number"], input[type="password"], select, textarea {
	width: 100%;
	max-width: 100%;
	padding: .68rem .85rem;
	font: inherit;
	color: var(--svk-text);
	background: var(--svk-white);
	border: 1px solid var(--svk-border);
	border-radius: var(--svk-radius);
	transition: border-color var(--svk-transition), box-shadow var(--svk-transition);
}
input:focus, select:focus, textarea:focus {
	border-color: var(--svk-primary);
	box-shadow: 0 0 0 3px var(--svk-primary-light);
	outline: none;
}
label { display: block; font-weight: 600; margin-bottom: .3rem; }

.search-form { display: flex; gap: .5rem; }
.search-form .search-field { flex: 1 1 auto; min-width: 0; }
.search-form .search-submit { flex: 0 0 auto; }

/* --------------------------------------------------------------
 * 7. Announcement bar
 * ----------------------------------------------------------- */
.svk-topbar {
	background: var(--svk-topbar-bg);
	color: var(--svk-topbar-text);
	font-size: .875rem;
	line-height: 1.45;
	text-align: center;
}
.svk-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-height: 2.35rem;
	padding-block: .45rem;
}
.svk-topbar a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.svk-topbar a:hover { color: inherit; opacity: .85; }

/* --------------------------------------------------------------
 * 8. Header + navigation
 * ----------------------------------------------------------- */
.site-header {
	background: var(--svk-header-bg);
	color: var(--svk-header-text);
	border-bottom: 1px solid var(--svk-border);
}
.site-header.is-sticky {
	position: sticky;
	top: 0;
	z-index: 100;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	min-height: 4.25rem;
	padding-block: .75rem;
}

.site-branding { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.site-branding .custom-logo-link { display: block; line-height: 0; }
.site-branding .custom-logo { max-height: 3.25rem; width: auto; }
.site-title {
	font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
	font-weight: 800;
	margin: 0;
	line-height: 1.15;
	letter-spacing: -.02em;
}
.site-title a { color: var(--svk-header-text); text-decoration: none; }
.site-description {
	margin: .15rem 0 0;
	font-size: .82rem;
	color: var(--svk-text-muted);
	line-height: 1.3;
}

.site-header__actions { display: flex; align-items: center; gap: .5rem; }

/* Toggles */
.svk-toggle {
	background: transparent;
	color: var(--svk-header-text);
	border: 1px solid var(--svk-border);
	border-radius: var(--svk-radius);
	padding: .5rem .7rem;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .9rem;
	font-weight: 600;
}
.svk-toggle:hover { background: var(--svk-primary-light); color: var(--svk-primary); transform: none; }
.svk-toggle svg { width: 20px; height: 20px; fill: currentColor; }
.svk-toggle .icon-close, .svk-toggle[aria-expanded="true"] .icon-open { display: none; }
.svk-toggle[aria-expanded="true"] .icon-close { display: block; }

.menu-toggle { display: inline-flex; }
.menu-toggle[aria-expanded="true"] {
	background: var(--svk-primary);
	border-color: var(--svk-primary);
	color: var(--svk-white);
}
@media (min-width: 56rem) {
	/* Hele containeren, ikke kun knappen: en tom flex-boks ville
	   stadig tage sit gap og skubbe menuen ind fra hoejre. */
	.site-header__actions { display: none; }
}

/* Primary navigation */
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-navigation li { margin: 0; position: relative; }
.main-navigation a {
	position: relative;
	display: block;
	padding: .6rem .85rem;
	color: var(--svk-header-text);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--svk-radius);
	transition: background-color var(--svk-transition), color var(--svk-transition);
}

/* Accentstreg som primaer hover-markoer: baggrundstonen alene er for
   svag paa en lys header i flere af farvepaletterne. */
.main-navigation a::after {
	content: "";
	position: absolute;
	left: .85rem;
	right: .85rem;
	bottom: .28rem;
	height: 2px;
	border-radius: 2px;
	background: var(--svk-secondary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .18s ease;
}
.main-navigation .sub-menu a::after { display: none; }

.main-navigation a:hover,
.main-navigation a:focus-visible,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a {
	background: var(--svk-primary-light);
	color: var(--svk-primary);
}
.main-navigation a:hover::after,
.main-navigation a:focus-visible::after,
.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after,
.main-navigation .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

@media (max-width: 55.999rem) {
	.site-header__inner { flex-wrap: wrap; }

	/* Knappen staar i markup foer <nav>, saa den bliver paa linje med
	   logoet og menuen folder ud nedenunder. */
	.main-navigation {
		display: none;
		width: 100%;
		margin-top: .35rem;
		border-top: 1px solid var(--svk-border);
		padding-block: .5rem .25rem;
	}
	.main-navigation.is-open { display: block; }

	.main-navigation li + li { border-top: 1px solid var(--svk-border); }

	/* Mindst 44px hoej raekke, og accenten flytter til venstrekanten
	   hvor understregningen ikke laengere giver mening. */
	.main-navigation a {
		padding: .9rem .85rem;
		border-radius: var(--svk-radius);
		border-left: 3px solid transparent;
	}
	.main-navigation a::after { display: none; }
	.main-navigation a:hover,
	.main-navigation a:focus-visible,
	.main-navigation .current-menu-item > a,
	.main-navigation .current_page_item > a,
	.main-navigation .current-menu-ancestor > a {
		border-left-color: var(--svk-secondary);
		background: var(--svk-primary-light);
	}

	.main-navigation .sub-menu {
		padding-left: .9rem;
		border-left: 2px solid var(--svk-border);
		margin-left: .85rem;
	}
}

@media (min-width: 56rem) {
	.main-navigation > div > ul,
	.main-navigation > ul {
		display: flex;
		align-items: center;
		gap: .15rem;
	}
	.main-navigation .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 13.5rem;
		background: var(--svk-white);
		border: 1px solid var(--svk-border);
		border-radius: var(--svk-radius);
		box-shadow: var(--svk-shadow-lg);
		padding: .35rem;
		opacity: 0;
		visibility: hidden;
		transform: translateY(4px);
		transition: opacity var(--svk-transition), transform var(--svk-transition), visibility var(--svk-transition);
		z-index: 120;
	}
	.main-navigation li:hover > .sub-menu,
	.main-navigation li:focus-within > .sub-menu,
	.main-navigation .sub-menu.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.main-navigation .sub-menu .sub-menu { top: 0; left: 100%; }
	.main-navigation .menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		width: .4em;
		height: .4em;
		margin-left: .45em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
	}
}

/* --------------------------------------------------------------
 * 9. Post cards / archives
 * ----------------------------------------------------------- */
.page-header {
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--svk-border);
}
.page-title { margin: 0 0 .4rem; }
.archive-description { color: var(--svk-text-muted); margin: 0; }
.archive-description > :last-child { margin-bottom: 0; }

.svk-posts {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
}
.post-card {
	display: flex;
	flex-direction: column;
	background: var(--svk-white);
	border: 1px solid var(--svk-border);
	border-radius: var(--svk-radius-lg);
	overflow: hidden;
	transition: transform var(--svk-transition), box-shadow var(--svk-transition), border-color var(--svk-transition);
}
.post-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--svk-shadow-lg);
	border-color: transparent;
}
.post-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--svk-surface);
	overflow: hidden;
}
.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.15rem 1.25rem 1.35rem;
	gap: .55rem;
}
.post-card__title {
	font-size: 1.14rem;
	margin: 0;
	line-height: 1.32;
}
.post-card__title a { text-decoration: none; }
.post-card__title a:hover { text-decoration: underline; }
.post-card__excerpt {
	margin: 0;
	font-size: .93rem;
	color: var(--svk-text-muted);
}
.post-card__footer { margin-top: auto; padding-top: .35rem; }

.svk-category-badge {
	display: inline-block;
	background: var(--svk-primary-light);
	color: var(--svk-primary);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .22rem .6rem;
	border-radius: 999px;
	text-decoration: none;
}
.svk-category-badge:hover { background: var(--svk-primary); color: var(--svk-white); }

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .85rem;
	font-size: .85rem;
	color: var(--svk-text-muted);
	margin: 0;
}
.entry-meta a { color: inherit; }
.entry-meta svg { width: 15px; height: 15px; fill: currentColor; opacity: .75; vertical-align: -2px; }

/* gap, not literal spaces: these are flex containers, and flexbox discards
   whitespace between items — which is what ran "Opdateret" into the date. */
.entry-meta__item { display: inline-flex; align-items: center; gap: .3rem; }

.read-more {
	font-weight: 700;
	font-size: .9rem;
	text-decoration: none;
	color: var(--svk-secondary-dark);
}
.read-more:hover { text-decoration: underline; }
.read-more::after { content: " \203A"; font-size: 1.1em; }

/* --------------------------------------------------------------
 * 10. Single post
 * ----------------------------------------------------------- */
.entry-header { margin-bottom: 1.5rem; }
.entry-header .entry-meta { margin-top: .85rem; }
.entry-title { margin-bottom: .5rem; }
.entry-subtitle {
	font-size: 1.15rem;
	color: var(--svk-text-muted);
	margin: 0 0 .5rem;
	line-height: 1.5;
}

.post-thumbnail {
	margin: 0 0 1.85rem;
	border-radius: var(--svk-radius-lg);
	overflow: hidden;
}
.post-thumbnail img { width: 100%; object-fit: cover; }

.entry-content { font-size: 1.03em; }
.entry-content > h2 { scroll-margin-top: 5.5rem; }
.entry-content > h3 { scroll-margin-top: 5.5rem; }
.entry-content ul li, .entry-content ol li { margin-bottom: .55rem; }

.entry-footer {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--svk-border);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
}
.svk-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.svk-tags a {
	font-size: .8rem;
	background: var(--svk-surface);
	border: 1px solid var(--svk-border);
	border-radius: 999px;
	padding: .22rem .7rem;
	text-decoration: none;
	color: var(--svk-text-muted);
}
.svk-tags a:hover { background: var(--svk-primary); color: var(--svk-white); border-color: var(--svk-primary); }

/* Breadcrumbs */
.svk-breadcrumbs {
	font-size: .84rem;
	color: var(--svk-text-muted);
	margin-bottom: 1rem;
}
.svk-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
	padding: 0;
}
.svk-breadcrumbs li { margin: 0; display: flex; gap: .35rem; }
.svk-breadcrumbs li + li::before { content: "/"; opacity: .5; }
.svk-breadcrumbs a { color: inherit; text-decoration: none; }
.svk-breadcrumbs a:hover { text-decoration: underline; }

/* Collapsible table of contents, auto-built by navigation.js */
.svk-toc {
	background: var(--svk-surface);
	border: 1px solid var(--svk-border);
	border-radius: var(--svk-radius-lg);
	margin-bottom: 2rem;
	overflow: hidden;
}

.svk-toc__toggle {
	display: flex;
	align-items: center;
	gap: .6rem;
	width: 100%;
	background: transparent;
	color: var(--svk-primary);
	border: 0;
	border-radius: 0;
	padding: .95rem 1.35rem;
	font: inherit;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
}
.svk-toc__toggle:hover {
	background: var(--svk-primary-light);
	color: var(--svk-primary);
	transform: none;
}
.svk-toc__label { flex: 1 1 auto; }
.svk-toc__state {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--svk-text-muted);
}
.svk-toc__chevron { display: inline-flex; flex: 0 0 auto; }
.svk-toc__chevron svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
	transition: transform var(--svk-transition);
}
.svk-toc__toggle[aria-expanded="true"] .svk-toc__chevron svg { transform: rotate(180deg); }

/* 0fr → 1fr animates to the list's real height, which max-height cannot do
   without hard-coding a guess. */
.svk-toc__panel {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows .3s ease, opacity .25s ease;
}
.svk-toc__panel-inner {
	min-height: 0;
	overflow: hidden;
	visibility: visible;
	transition: visibility 0s;
}
.svk-toc__toggle[aria-expanded="false"] + .svk-toc__panel {
	grid-template-rows: 0fr;
	opacity: 0;
}

/* Keep collapsed links out of the tab order, once the slide has finished. */
.svk-toc__toggle[aria-expanded="false"] + .svk-toc__panel .svk-toc__panel-inner {
	visibility: hidden;
	transition: visibility 0s .3s;
}

.svk-toc ol {
	margin: 0;
	padding: 0 1.35rem 1.15rem 2.6rem;
}
.svk-toc li { margin-bottom: .35rem; }
.svk-toc a { text-decoration: none; }
.svk-toc a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.svk-toc__panel { transition: none; }
}

/* Author box */
.svk-author-box {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
	background: var(--svk-surface);
	border-radius: var(--svk-radius-lg);
	padding: 1.35rem;
	margin-top: 2.25rem;
}
.svk-author-box img { border-radius: 50%; flex: 0 0 auto; }
.svk-author-box__name { margin: 0 0 .3rem; font-size: 1.05rem; }
.svk-author-box p { margin: 0; font-size: .93rem; color: var(--svk-text-muted); }

/* Related posts */
.svk-related { margin-top: 3rem; }
.svk-related__title { margin-top: 0; }

/* --------------------------------------------------------------
 * 11. Widgets
 *
 * The sidebar was removed in 1.5.0 — every view is single-column now.
 * These styles serve the three footer widget areas.
 * ----------------------------------------------------------- */
.widget {
	background: var(--svk-white);
	border: 1px solid var(--svk-border);
	border-radius: var(--svk-radius-lg);
	padding: 1.25rem 1.35rem;
	font-size: .95rem;
}
.widget-title, .widget .wp-block-heading {
	margin: 0 0 .9rem;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--svk-text-muted);
	padding-bottom: .6rem;
	border-bottom: 1px solid var(--svk-border);
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { margin-bottom: .55rem; padding-bottom: .55rem; border-bottom: 1px dashed var(--svk-border); }
.widget li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.widget a { text-decoration: none; }
.widget a:hover { text-decoration: underline; }
.widget > :last-child { margin-bottom: 0; }

/* Footer widget columns */
.footer-widgets {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	padding-block: clamp(2rem, 5vw, 3.25rem);
}
.footer-widgets .widget {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--svk-footer-text);
}
.footer-widgets .widget-title, .footer-widgets .wp-block-heading {
	color: var(--svk-white);
	border-bottom-color: rgba(255, 255, 255, .18);
}
.footer-widgets a { color: var(--svk-footer-text); }
.footer-widgets li { border-bottom-color: rgba(255, 255, 255, .12); }

/* --------------------------------------------------------------
 * 12. Footer
 * ----------------------------------------------------------- */
.site-footer {
	background: var(--svk-footer-bg);
	color: var(--svk-footer-text);
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
	font-size: .92rem;
}
.site-footer a { color: var(--svk-white); }

.footer-disclosure {
	border-top: 1px solid rgba(255, 255, 255, .15);
	background: rgba(0, 0, 0, .12);
	font-size: .82rem;
	line-height: 1.6;
}
.footer-disclosure__inner { padding-block: 1rem; }
.footer-disclosure p { margin: 0; }

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .15);
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	padding-block: 1.15rem;
	font-size: .85rem;
}
.footer-navigation ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.15rem;
	margin: 0;
	padding: 0;
}
.footer-navigation li { margin: 0; }
.footer-navigation a { text-decoration: none; }
.footer-navigation a:hover { text-decoration: underline; }

/* Inline disclosure notice used above the post content */
.svk-disclosure-inline {
	display: flex;
	gap: .65rem;
	align-items: flex-start;
	background: var(--svk-primary-light);
	border-left: 4px solid var(--svk-primary);
	border-radius: 0 var(--svk-radius) var(--svk-radius) 0;
	padding: .8rem 1.05rem;
	font-size: .85rem;
	line-height: 1.55;
	color: var(--svk-text);
	margin-bottom: 1.75rem;
}
.svk-disclosure-inline p { margin: 0; }
.svk-disclosure-inline svg { flex: 0 0 auto; width: 18px; height: 18px; fill: var(--svk-primary); margin-top: .15rem; }

/* --------------------------------------------------------------
 * 13. Pagination
 * ----------------------------------------------------------- */
.svk-pagination { margin-top: 2.5rem; }
.svk-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: center;
}
.svk-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: .7rem;
	border: 1px solid var(--svk-border);
	border-radius: var(--svk-radius);
	text-decoration: none;
	font-weight: 600;
}
.svk-pagination .page-numbers:hover { background: var(--svk-surface); }
.svk-pagination .page-numbers.current {
	background: var(--svk-primary);
	border-color: var(--svk-primary);
	color: var(--svk-white);
}
.svk-pagination .dots { border-color: transparent; }

/* --------------------------------------------------------------
 * 14. Hero banner (single posts)
 *
 * Breaks out of .svk-container to full viewport width. The featured image
 * is a real <img> (keeps srcset + fetchpriority), the gradient sits on a
 * separate layer, and everything else is laid over the top.
 * ----------------------------------------------------------- */
.svk-hero {
	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-bottom: clamp(1.75rem, 4vw, 3rem);
	padding-block: clamp(3rem, 9vw, 6.5rem);
	background: var(--svk-primary);
	color: var(--svk-white);
	isolation: isolate;
	overflow: hidden;
}

.svk-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.svk-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Dark gradient: heavier bottom-left where the text sits, lighter top-right
   so the photograph is still readable as an image. */
.svk-hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(105deg, rgba(20, 21, 44, .93) 0%, rgba(20, 21, 44, .82) 45%, rgba(20, 21, 44, .55) 100%),
		linear-gradient(to top, rgba(20, 21, 44, .55) 0%, rgba(20, 21, 44, 0) 55%);
}
.svk-hero--plain::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(135deg, var(--svk-primary) 0%, var(--svk-primary-dark) 100%);
}

.svk-hero__inner {
	position: relative;
	max-width: var(--svk-container);
}

/* The product card adds ~350px of its own height, so the banner keeps its
   generous padding only when it is text alone. */
.svk-has-hero-product .svk-hero { padding-block: clamp(1.75rem, 3.5vw, 3rem); }

.svk-hero__grid {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: center;
	grid-template-columns: minmax(0, 1fr);
}

/* Two columns only when a featured product is selected and there is room;
   otherwise the hero stays exactly as it was. */
@media (min-width: 62rem) {
	.svk-hero__grid.has-product {
		grid-template-columns: minmax(0, 1fr) 22rem;
	}
}

.svk-hero__content > * { max-width: 58rem; }
.svk-hero__grid.has-product .svk-hero__content > * { max-width: 46rem; }

.svk-hero__title {
	color: var(--svk-white);
	margin: 0 0 1rem;
	font-size: clamp(1.85rem, 1.3rem + 2.6vw, 3.1rem);
	line-height: 1.14;
	letter-spacing: -.02em;
	text-shadow: 0 1px 24px rgba(0, 0, 0, .35);
}

.svk-hero__subtitle {
	font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
	color: rgba(255, 255, 255, .88);
	margin: 0 0 1rem;
}

/* Category pills, solid accent, sat above the title. */
.svk-hero .svk-categories { margin: 0 0 1.1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.svk-hero .svk-category-badge {
	background: var(--svk-secondary);
	color: var(--svk-on-secondary, #1e1f36);
	border-radius: 4px;
	font-size: .74rem;
	padding: .3rem .7rem;
}
.svk-hero .svk-category-badge:hover {
	background: var(--svk-white);
	color: var(--svk-primary);
}

.svk-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem .7rem;
	margin: 0;
	font-size: .88rem;
	color: rgba(255, 255, 255, .82);
}
.svk-hero__meta a { color: inherit; text-decoration: none; font-weight: 600; }
.svk-hero__meta a:hover { color: var(--svk-white); text-decoration: underline; }
.svk-hero__sep { opacity: .45; }

.svk-hero__disclosure {
	margin: 1.1rem 0 0;
	max-width: 38rem;
	font-size: .82rem;
	font-style: italic;
	line-height: 1.6;
	color: rgba(255, 255, 255, .78);
}
.svk-hero__disclosure a {
	color: var(--svk-white);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Featured-product CTA in the hero's right column. Deliberately the only
   white, opaque surface on the banner — it should read as the one thing to
   click before the visitor starts reading. */
/* Same accent bar as every other CTA card (blocks.css); the hero copy just
   drops the side borders and lifts off the banner with a deeper shadow. */
.svk-hero__product .svk-product-card {
	margin: 0;
	border-color: transparent;
	border-top-color: var(--svk-secondary);
	box-shadow: 0 18px 44px rgba(16, 17, 38, .4);
}
.svk-hero__product .svk-product-card__media {
	background: var(--svk-surface);
	padding: .9rem;
}

/* Compact throughout: this card sits above the fold next to the headline,
   and every extra pixel here pushes the article itself off screen. */
.svk-hero__product .svk-product-card__img { height: 8rem; }
.svk-hero__product .svk-product-card__body { padding: 1rem 1.15rem 1.15rem; }
.svk-hero__product .svk-product-card__badge { margin-bottom: .5rem; }
.svk-hero__product .svk-product-card__title {
	font-size: 1.05rem;
	margin-bottom: .35rem;
}
.svk-hero__product .svk-product-card__brand {
	margin: 0 0 .5rem;
	font-size: .74rem;
}
.svk-hero__product .svk-product-card__price {
	margin-bottom: .8rem;
	font-size: .95rem;
}
.svk-hero__product .svk-product-card__rating { margin-top: .1rem; }
.svk-hero__product .svk-rating__count { font-size: .76rem; }
.svk-hero__product .svk-product-card__disclaimer { margin-top: .5rem; }

/* Hero carousel: one card fills the column, the rest are a swipe away. */
.svk-hero__product--carousel .svk-carousel {
	margin: 0;
	padding: 0 0 .85rem;
	gap: .85rem;
}
.svk-hero__product--carousel .svk-carousel > .svk-product-card {
	flex: 0 0 100%;
}
.svk-hero__product--carousel .svk-carousel::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .35);
}

/* Arrows sit inside the column here — outside it they would overlap the
   headline text. */
.svk-hero__product--carousel .svk-carousel__nav {
	width: 2.25rem;
	height: 2.25rem;
}
.svk-hero__product--carousel .svk-carousel__nav--prev { left: .4rem; }
.svk-hero__product--carousel .svk-carousel__nav--next { right: .4rem; }

@media (max-width: 48rem) {
	/* The global rule hides arrows on small screens; in the hero the carousel
	   is narrow at every size, so keep them and rely on swipe as well. */
	.svk-hero__product--carousel .svk-carousel__nav { display: inline-flex; }
}
.svk-hero__product .svk-product-card__badge {
	color: var(--svk-secondary-dark);
	font-size: .72rem;
}
.svk-hero__product .svk-product-card__badge::before {
	background: var(--svk-secondary);
	color: var(--svk-on-secondary, #1e1f36);
}
.svk-hero__product .svk-product-card__action {
	display: block;
}
.svk-hero__product .svk-btn--cta {
	display: flex;
	width: 100%;
	margin-bottom: .65rem;
}

/* Breadcrumbs sit on the dark overlay inside the hero. */
.svk-hero .svk-breadcrumbs {
	color: rgba(255, 255, 255, .7);
	margin-bottom: .9rem;
}
.svk-hero .svk-breadcrumbs a { color: inherit; }
.svk-hero .svk-breadcrumbs [aria-current="page"] { color: rgba(255, 255, 255, .9); }

/* --------------------------------------------------------------
 * 15. 404 / no results
 * ----------------------------------------------------------- */
.svk-notfound { text-align: center; max-width: 38rem; margin-inline: auto; padding-block: 2rem; }
.svk-notfound .search-form { margin-top: 1.5rem; }

/* --------------------------------------------------------------
 * 16. (Header search removed in 1.3.0 — the search form still exists
 *      for widgets, the 404 page and empty result sets.)
 * ----------------------------------------------------------- */

/* --------------------------------------------------------------
 * 17. Star rating
 *
 * Lives in assets/css/blocks.css, because block patterns use the same
 * markup and the editor has to render it identically.
 * ----------------------------------------------------------- */

/* --------------------------------------------------------------
 * 18. Review / verdict box
 * ----------------------------------------------------------- */
.svk-review-box {
	background: var(--svk-surface);
	border: 1px solid var(--svk-border);
	border-top: 4px solid var(--svk-secondary);
	border-radius: var(--svk-radius-lg);
	padding: clamp(1.15rem, 3vw, 1.75rem);
	margin-bottom: 2rem;
}
.svk-review-box__badge {
	display: inline-block;
	background: var(--svk-secondary);
	color: var(--svk-on-secondary, #1e1f36);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: .25rem .7rem;
	border-radius: 999px;
	margin: 0 0 .9rem;
}
.svk-review-box__grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}
@media (min-width: 46rem) {
	.svk-review-box__grid {
		grid-template-columns: 11rem minmax(0, 1fr) 13rem;
	}
	.svk-review-box__grid:not(:has(.svk-review-box__media)) {
		grid-template-columns: minmax(0, 1fr) 13rem;
	}
}
.svk-review-box__media img {
	width: 100%;
	border-radius: var(--svk-radius);
	background: var(--svk-white);
}
.svk-review-box__title { margin: 0 0 .2rem; font-size: 1.35rem; }
.svk-review-box__brand {
	margin: 0 0 .6rem;
	font-size: .85rem;
	color: var(--svk-text-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
}
.svk-review-box__rating { margin-bottom: .75rem; }
.svk-review-box__verdict { margin-bottom: .9rem; }
.svk-review-box__cta {
	background: var(--svk-white);
	border: 1px solid var(--svk-border);
	border-radius: var(--svk-radius);
	padding: 1rem;
	text-align: center;
}
.svk-review-box__price {
	margin: 0 0 .6rem;
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--svk-primary);
}
.svk-review-box__merchant {
	margin: .6rem 0 0;
	font-size: .78rem;
	color: var(--svk-text-muted);
}

/* Closing CTA under the article body */
.svk-closing-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	background: linear-gradient(135deg, var(--svk-primary) 0%, var(--svk-primary-dark) 100%);
	color: var(--svk-white);
	border-radius: var(--svk-radius-lg);
	padding: clamp(1.25rem, 3vw, 1.9rem);
	margin-top: 2.5rem;
}
.svk-closing-cta__title { color: var(--svk-white); margin: 0; font-size: 1.25rem; }
.svk-closing-cta__price { margin: .35rem 0 0; font-size: .95rem; color: rgba(255, 255, 255, .85); }

/* --------------------------------------------------------------
 * 19. Utilities
 * ----------------------------------------------------------- */
.svk-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.svk-mb-0 { margin-bottom: 0 !important; }
.svk-text-muted { color: var(--svk-text-muted); }
.svk-stack > * + * { margin-top: 1rem; }

/* Print: strip chrome, keep the article readable. */
@media print {
	.svk-topbar, .site-header__actions, .main-navigation,
	.svk-related, .site-footer__bottom, .svk-carousel__nav { display: none !important; }
	.svk-hero { padding-block: 1rem; color: #000; }
	.svk-hero__media, .svk-hero::before { display: none; }
	.svk-hero__title, .svk-hero__meta, .svk-hero__disclosure { color: #000; text-shadow: none; }
	body { font-size: 12pt; color: #000; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}

/* --------------------------------------------------------------
 * 20. Homepage shell
 *
 * Homepage sections manage their own width, so the article measure that
 * .entry-content applies elsewhere is lifted here.
 * ----------------------------------------------------------- */
.svk-home .entry-content > *:not(.alignfull):not(.alignwide) {
	max-width: none;
	margin-inline: 0;
}
.svk-home .entry--home { margin: 0; }