/*
 * Smedja — signature front-end styles.
 *
 * Restraint: theme.json owns tokens, type, color, spacing. This file only adds the
 * few things tokens can't express — the "Loom & Wool" signature and feel polish.
 * Everything here reads from CSS custom properties WordPress generates from theme.json,
 * so swapping a vibe re-skins it automatically. No hardcoded colors.
 */

/* ---- Feel: rendering polish ------------------------------------------------ */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
}

body {
	font-optical-sizing: auto;
	text-underline-offset: 0.18em;
}

::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

/* Numerals in specs/data line up in columns. */
.smedja-eyebrow,
.smedja-spec,
.is-style-spec {
	font-variant-numeric: tabular-nums;
}

/* ---- Accessibility floor --------------------------------------------------- */
:where(a, button, .wp-element-button, input, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

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

/* ---- Signature: the eyebrow (mono label) ----------------------------------- */
.smedja-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--2xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* The dyed thread: a short tick that precedes an eyebrow. */
.smedja-eyebrow::before {
	content: "";
	inline-size: 1.75rem;
	block-size: 2px;
	background: var(--wp--preset--color--accent);
}

/* ---- Signature: the warp divider (a row of warp threads) ------------------- */
.smedja-warp {
	block-size: 12px;
	inline-size: 100%;
	background-image: repeating-linear-gradient(
		to right,
		var(--wp--preset--color--line) 0,
		var(--wp--preset--color--line) 1px,
		transparent 1px,
		transparent 7px
	);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

/* ---- Signature: framed imagery (loomed edge) ------------------------------- */
.smedja-framed img,
.is-style-loomed img {
	border-radius: var(--wp--custom--radius, 0.25rem);
	box-shadow:
		inset 0 0 0 1px rgba(34, 26, 18, 0.08),
		0 1px 2px rgba(34, 26, 18, 0.04),
		0 18px 40px -16px rgba(34, 26, 18, 0.22);
}

/* ---- Feel: links & buttons settle in, don't snap --------------------------- */
a,
.wp-element-button {
	transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.wp-element-button:active {
	transform: translateY(1px);
}

/* =====================================================================
 * Review / Roundup template ("Bäst i test") — token-driven components.
 * Each vibe re-skins these via CSS custom properties + its signature CSS
 * (the .smedja-badge is the shared "award" slot: seal / sticker / chip).
 * ===================================================================== */

.smedja-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--2xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--accent);
	padding: 0.35em 0.8em;
	border-radius: var(--smedja-radius-pill, 999px);
	line-height: 1;
}

.smedja-trustline {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--2xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.smedja-pick {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--smedja-radius-md, 0.5rem);
	box-shadow: var(--smedja-shadow, 0 12px 32px -12px rgba(0, 0, 0, 0.16));
}

.smedja-pick__title {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: 1.1;
	color: var(--wp--preset--color--contrast);
}

.smedja-rank {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	color: var(--wp--preset--color--primary);
	font-variant-numeric: tabular-nums;
}

.smedja-score {
	display: inline-flex;
	align-items: baseline;
	gap: 0.1em;
	margin: 0.6rem 0;
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--primary);
}
.smedja-score__num {
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 600;
	line-height: 1;
}
.smedja-score__max {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.smedja-proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.4rem 1.4rem;
	margin: 0.6rem 0;
}
.smedja-proscons__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}
.smedja-proscons__list li {
	display: flex;
	gap: 0.5em;
	margin: 0.25em 0;
	color: var(--wp--preset--color--contrast);
}
.smedja-proscons__list li span {
	flex: none;
	font-weight: 700;
	font-family: var(--wp--preset--font-family--mono);
}
.smedja-proscons__list--pro li span {
	color: var(--wp--preset--color--primary);
}
.smedja-proscons__list--con li span {
	color: var(--wp--preset--color--accent);
	opacity: 0.85;
}

.smedja-price {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	margin: 0.4rem 0 0.8rem;
}

/* Comparison table — mono tabular figures, hairline rules, winner highlight. */
.smedja-compare {
	margin-top: var(--wp--preset--spacing--lg, 2rem);
	overflow-x: auto;
}
.smedja-compare table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
}
.smedja-compare th,
.smedja-compare td {
	padding: 0.7rem 0.9rem;
	text-align: right;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-variant-numeric: tabular-nums;
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--contrast);
}
.smedja-compare th {
	font-weight: 600;
	color: var(--wp--preset--color--surface);
	background: var(--wp--preset--color--primary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--wp--preset--font-size--2xs);
}
.smedja-compare th:first-child,
.smedja-compare .smedja-compare__name {
	text-align: left;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
}
.smedja-compare tr.is-winner td {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
}

/* Methodology stats band. */
.smedja-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--lg, 2.5rem);
	margin: var(--wp--preset--spacing--md, 2rem) 0;
}
.smedja-stat {
	display: flex;
	flex-direction: column;
}
.smedja-stat__value {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--surface);
}
.smedja-stat__label {
	margin-top: 0.4em;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--line);
}

/* FAQ accordion. */
.smedja-faq {
	margin-top: var(--wp--preset--spacing--md, 2rem);
	border-top: 1px solid var(--wp--preset--color--line);
}
.smedja-faq__item {
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.smedja-faq__item summary {
	cursor: pointer;
	list-style: none;
	padding: 1.1rem 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	position: relative;
	padding-inline-end: 2rem;
}
.smedja-faq__item summary::-webkit-details-marker {
	display: none;
}
.smedja-faq__item summary::after {
	content: "+";
	position: absolute;
	inset-inline-end: 0;
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--primary);
	transition: transform 160ms ease;
}
.smedja-faq__item[open] summary::after {
	content: "−";
}
.smedja-faq__a {
	padding: 0 0 1.2rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
	max-width: 44rem;
}

@media (max-width: 600px) {
	.smedja-proscons {
		grid-template-columns: 1fr;
	}
}