/* Tech & Roll: dark theme, theme toggle, reading progress, floating table of contents, home page blocks. */

/* ---------- Color schemes ---------- */
:root { color-scheme: light; }

:root[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--primary: #8AA4FF;
	--wp--preset--color--primary-accent: #1D2642;
	--wp--preset--color--primary-alt: #FF8F52;
	--wp--preset--color--main: #E7E9EE;
	--wp--preset--color--main-accent: #3A414E;
	--wp--preset--color--base: #14171D;
	--wp--preset--color--secondary: #A6AEBB;
	--wp--preset--color--tertiary: #1A1E26;
	--wp--preset--color--surface: #1F242D;
	--wp--preset--color--border-light: #2E3440;
	--wp--preset--color--border-dark: #8B94A4;
	--wp--preset--color--pro: #5BCB93;
	--wp--preset--color--con: #FF8A7E;
	--wp--preset--color--pro-tint: #16352A;
}

/* Without JavaScript, follow the system setting. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		color-scheme: dark;
		--wp--preset--color--primary: #8AA4FF;
		--wp--preset--color--primary-accent: #1D2642;
		--wp--preset--color--primary-alt: #FF8F52;
		--wp--preset--color--main: #E7E9EE;
		--wp--preset--color--main-accent: #3A414E;
		--wp--preset--color--base: #14171D;
		--wp--preset--color--secondary: #A6AEBB;
		--wp--preset--color--tertiary: #1A1E26;
		--wp--preset--color--surface: #1F242D;
		--wp--preset--color--border-light: #2E3440;
		--wp--preset--color--border-dark: #8B94A4;
		--wp--preset--color--pro: #5BCB93;
		--wp--preset--color--con: #FF8A7E;
		--wp--preset--color--pro-tint: #16352A;
	}
}

:root[data-theme="dark"] .tr-card,
:root[data-theme="dark"] .tr-verdict .is-style-verdict,
:root[data-theme="dark"] .tr-topic { box-shadow: none; }
:root[data-theme="dark"] img { filter: brightness(.92); }

/* ---------- Header: navigation + theme toggle ---------- */
.tr-header-actions { gap: var(--wp--preset--spacing--small, 1rem); }

.tr-theme-toggle { display: none; }
.tr-js .tr-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 -.35rem 0 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--main);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}
.tr-theme-toggle:hover { background: var(--wp--preset--color--tertiary); border-color: var(--wp--preset--color--border-light); }
.tr-theme-toggle:focus-visible { outline: 3px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.tr-theme-toggle svg { width: 20px; height: 20px; }
.tr-theme-toggle .tr-icon-sun { display: none; }
:root[data-theme="dark"] .tr-theme-toggle .tr-icon-sun { display: block; }
:root[data-theme="dark"] .tr-theme-toggle .tr-icon-moon { display: none; }

/* ---------- Reading progress bar ---------- */
.tr-progress {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 60;
	height: 3px;
	pointer-events: none;
}
.tr-progress span {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--primary);
	transform-origin: 0 50%;
	transform: scaleX(var(--tr-progress, 0));
}

/* ---------- Table of contents ---------- */
.tr-toc[hidden] { display: none !important; }
.tr-toc {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}
.tr-toc__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--main);
}
.tr-toc__meta {
	margin: .25rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--secondary);
}
.tr-toc__track {
	height: 3px;
	margin: .75rem 0 .5rem;
	border-radius: 3px;
	background: var(--wp--preset--color--border-light);
	overflow: hidden;
}
.tr-toc__track span {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--primary);
	transform-origin: 0 50%;
	transform: scaleX(var(--tr-progress, 0));
}
.tr-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tr-toc__list li { margin: 0; }
.tr-toc__list a {
	display: block;
	padding: .4rem .75rem;
	border-left: 2px solid var(--wp--preset--color--border-light);
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.tr-toc__list a:hover { color: var(--wp--preset--color--main); border-left-color: var(--wp--preset--color--border-dark); }
.tr-toc__list a:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 1px; }
.tr-toc__list .is-read a { color: var(--wp--preset--color--main); border-left-color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent); }
.tr-toc__list .is-active a {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	border-left-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary-accent);
	border-radius: 0 .4rem .4rem 0;
}
.tr-toc__toggle { display: none; }

/* Wide screens: floating panel in the left margin. */
@media (min-width: 1280px) {
	.is-layout-constrained > .tr-toc,
	.tr-toc {
		position: fixed;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 6.5rem);
		left: max(1rem, calc(50% - 350px - 2.5rem - 15.5rem));
		width: 15.5rem;
		max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 9rem);
		overflow-y: auto;
		margin: 0 !important;
		padding: 1rem 1rem 1rem .75rem;
		border: 1px solid var(--wp--preset--color--border-light);
		border-radius: 1rem;
		background: var(--wp--preset--color--surface);
		opacity: 0;
		visibility: hidden;
		transform: translateY(.5rem);
		transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
		scrollbar-width: thin;
	}
	.tr-toc.is-visible {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity .25s ease, transform .25s ease;
	}
}

/* Smaller screens: a bar that sticks under the header and opens the list. */
@media (max-width: 1279.98px) {
	.is-layout-constrained > .tr-toc,
	.tr-toc {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--tr-header-h, 64px));
		z-index: 40;
		margin-left: calc(-1 * var(--wp--preset--spacing--medium)) !important;
		margin-right: calc(-1 * var(--wp--preset--spacing--medium)) !important;
		max-width: none !important;
		background: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent);
		backdrop-filter: saturate(1.4) blur(8px);
		border-bottom: 1px solid var(--wp--preset--color--border-light);
	}
	.tr-toc__head { display: none; }
	.tr-toc__toggle {
		display: flex;
		align-items: center;
		gap: .6rem;
		width: 100%;
		min-height: 48px;
		padding: .5rem var(--wp--preset--spacing--medium);
		border: 0;
		background: transparent;
		color: var(--wp--preset--color--main);
		font: inherit;
		text-align: left;
		cursor: pointer;
	}
	.tr-toc__toggle:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: -2px; }
	.tr-toc__label { font-weight: 700; white-space: nowrap; }
	.tr-toc__current {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--wp--preset--color--secondary);
	}
	.tr-toc__chevron { width: 18px; height: 18px; flex: none; transition: transform .2s ease; }
	.tr-toc.is-open .tr-toc__chevron { transform: rotate(180deg); }
	.tr-toc__track { position: absolute; left: 0; right: 0; bottom: -1px; margin: 0; height: 2px; border-radius: 0; background: transparent; }
	.tr-toc__list {
		display: none;
		max-height: min(60vh, 28rem);
		overflow-y: auto;
		padding: 0 var(--wp--preset--spacing--medium) .75rem;
	}
	.tr-toc.is-open .tr-toc__list { display: block; }
	.tr-toc.is-open { background: var(--wp--preset--color--base); backdrop-filter: none; box-shadow: 0 12px 24px -12px rgba(0,0,0,.25); }
}

/* ---------- Home: topic cards ---------- */
.tr-topics {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(12.5rem, calc(50% - .5rem)), 1fr));
	gap: var(--wp--preset--spacing--small, 1rem);
}
.tr-topic {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: 1.25rem 1.25rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 1rem;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--main);
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tr-topic:hover, .tr-topic:focus-visible {
	border-color: var(--wp--preset--color--primary);
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--card);
}
.tr-topic:focus-visible { outline: 3px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.tr-topic__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: .5rem;
	border-radius: .75rem;
	background: var(--wp--preset--color--primary-accent);
	color: var(--wp--preset--color--primary);
}
.tr-topic__icon svg { width: 1.4rem; height: 1.4rem; }
.tr-topic__name { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--medium); font-weight: 650; line-height: 1.2; }
.tr-topic__count { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--secondary); }
.tr-topic.is-empty .tr-topic__count { font-style: italic; }

@media (max-width: 600px) {
	.tr-topics { gap: .75rem; }
	.tr-topic { padding: 1rem; }
	.tr-topic__icon { width: 2.25rem; height: 2.25rem; margin-bottom: .25rem; }
	.tr-topic__name { font-size: 1.125rem; }
}

/* ---------- Home: horizontal post cards ---------- */
.tr-card--row { display: grid !important; grid-template-columns: 42% 1fr; align-items: stretch; }
.tr-card--row .wp-block-post-featured-image { position: relative; min-height: 13rem; }
.tr-card--row .wp-block-post-featured-image a { position: absolute; inset: 0; }
.tr-card--row .wp-block-post-featured-image img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
@media (max-width: 600px) {
	.tr-card--row { grid-template-columns: 1fr; }
	.tr-card--row .wp-block-post-featured-image { min-height: 0; aspect-ratio: 16/10; }
}

/* ---------- Home: "How we compare" band ---------- */
.tr-method__item { height: 100%; }
.tr-method__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border-light);
	color: var(--wp--preset--color--primary);
}
.tr-method__icon svg { width: 1.2rem; height: 1.2rem; }
.tr-method h3 { margin-top: .9rem; }

@media (prefers-reduced-motion: reduce) {
	.tr-toc, .tr-toc__list a, .tr-topic, .tr-theme-toggle, .tr-toc__chevron { transition: none; }
	.tr-topic:hover { transform: none; }
}

/* ---------- Deals ---------- */
.tr-deal {
	margin-block: var(--wp--preset--spacing--medium);
	padding: var(--wp--preset--spacing--medium);
	border: 1px solid var(--wp--preset--color--border-light);
	border-top: 4px solid var(--wp--preset--color--primary-alt);
	border-radius: 1rem;
	background: var(--wp--preset--color--surface);
}
.tr-deal > * + * { margin-top: .75rem; }
.tr-deal .tr-eyebrow { color: var(--wp--preset--color--primary-alt); margin: 0; }
:root[data-theme="light"] .tr-deal .tr-eyebrow, :root:not([data-theme]) .tr-deal .tr-eyebrow { color: #B4470E; }
.tr-deal__product { margin-top: .25rem !important; }
.tr-deal__prices { gap: .5rem 1rem; align-items: baseline; }
.tr-deal__prices p { margin: 0; }
.tr-deal__price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large, 2.5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--main);
}
.tr-deal__was { color: var(--wp--preset--color--secondary); font-size: var(--wp--preset--font-size--small); }
.tr-deal__save {
	padding: .2em .65em;
	border-radius: 999px;
	background: var(--wp--preset--color--pro-tint);
	color: var(--wp--preset--color--pro);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}
.tr-deal__facts { list-style: none; padding-left: 0; font-size: var(--wp--preset--font-size--small); }
.tr-deal__facts li { margin: .2rem 0; }
.tr-deal__cta .wp-block-button__link { font-size: var(--wp--preset--font-size--base); }

.tr-deal-badge-wrap { margin: 0 0 .5rem; }
.tr-deal-badge {
	display: inline-block;
	padding: .2em .7em;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.5;
}
.tr-deal-badge.is-live { background: var(--wp--preset--color--pro-tint); color: var(--wp--preset--color--pro); }
.tr-deal-badge.is-expired { background: var(--wp--preset--color--tertiary); color: var(--wp--preset--color--secondary); border: 1px solid var(--wp--preset--color--border-light); }
.tr-deal-expired-note {
	max-width: var(--wp--style--global--content-size, 700px);
	margin: 0 auto var(--wp--preset--spacing--medium);
	padding: .9rem 1.1rem;
	border-radius: .75rem;
	border: 1px solid var(--wp--preset--color--border-light);
	background: var(--wp--preset--color--tertiary);
	font-weight: 600;
}
.wp-block-navigation .tr-nav-deals .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); font-weight: 700; }

/* Verdict cards: wrap into a grid with a minimum card width, whatever the number of picks. */
.wp-block-columns.tr-verdict {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	flex-wrap: wrap !important;
}
.wp-block-columns.tr-verdict > .wp-block-column {
	flex-basis: auto !important;
	min-width: 0;
}