/*
Theme Name: ConsumerTechFix
Theme URI: https://consumertechfix.com/
Author: Kirimas Kersys
Author URI: https://consumertechfix.com/
Description: A fast, ad-ready and affiliate-ready WordPress blog theme built for consumer tech troubleshooting sites. Includes built-in ad placements (header, in-content, sidebar, in-feed, footer), affiliate product boxes, pros/cons tables, step-by-step guide blocks with HowTo schema, FAQ blocks with FAQ schema, automatic table of contents, related posts, a working contact form and auto-generated legal pages. No page builder or extra plugins required.
Version: 1.0.3
Requires at least: 6.0
Tested up to: 6.8
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: consumertechfix
Tags: blog, news, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* =========================================================
   1. Design tokens
   ========================================================= */
:root {
	--ctf-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--ctf-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--ctf-bg: #ffffff;
	--ctf-surface: #f5f7fa;
	--ctf-surface-2: #eef2f7;
	--ctf-text: #131a2a;
	--ctf-text-soft: #46506a;
	--ctf-muted: #6b7690;
	--ctf-border: #e2e8f0;
	--ctf-border-strong: #cbd5e1;

	--ctf-accent: #1f6feb;
	--ctf-accent-hover: #1a5fd0;
	--ctf-accent-soft: #e8f0fe;
	--ctf-cta: #f97316;
	--ctf-cta-hover: #ea6a0b;

	--ctf-success: #16a34a;
	--ctf-warning: #d97706;
	--ctf-danger: #dc2626;

	--ctf-radius: 10px;
	--ctf-radius-sm: 6px;
	--ctf-radius-lg: 16px;
	--ctf-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 20px -8px rgba(16, 24, 40, .12);
	--ctf-shadow-lg: 0 10px 40px -12px rgba(16, 24, 40, .22);

	--ctf-width: 1240px;
	--ctf-content: 760px;
	--ctf-gap: 40px;
	--ctf-header-h: 68px;
}

html[data-theme="dark"] {
	--ctf-bg: #0d1117;
	--ctf-surface: #151b23;
	--ctf-surface-2: #1c232d;
	--ctf-text: #e6edf3;
	--ctf-text-soft: #c2cbd6;
	--ctf-muted: #8b96a5;
	--ctf-border: #262f3b;
	--ctf-border-strong: #36404f;
	--ctf-accent: #58a6ff;
	--ctf-accent-hover: #79b8ff;
	--ctf-accent-soft: #15243c;
	--ctf-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px -8px rgba(0, 0, 0, .6);
	--ctf-shadow-lg: 0 10px 40px -12px rgba(0, 0, 0, .7);
	color-scheme: dark;
}

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

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

body {
	margin: 0;
	background: var(--ctf-bg);
	color: var(--ctf-text);
	font-family: var(--ctf-font-sans);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

img, svg, video, iframe { max-width: 100%; height: auto; }
img { display: block; }

a { color: var(--ctf-accent); text-decoration: none; }
a:hover { color: var(--ctf-accent-hover); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.02em;
	margin: 0 0 .6em;
	color: var(--ctf-text);
}
h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.7rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 1.85rem); }
h3 { font-size: clamp(1.2rem, 1rem + .8vw, 1.4rem); }
h4 { font-size: 1.12rem; }

p { margin: 0 0 1.25em; }
ul, ol { margin: 0 0 1.25em; padding-left: 1.35em; }
li { margin-bottom: .5em; }

blockquote {
	margin: 1.8em 0;
	padding: .4em 0 .4em 1.35em;
	border-left: 4px solid var(--ctf-accent);
	color: var(--ctf-text-soft);
	font-size: 1.05em;
}
blockquote p:last-child { margin-bottom: 0; }

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

code, kbd, pre, samp { font-family: var(--ctf-font-mono); font-size: .92em; }
:not(pre) > code {
	background: var(--ctf-surface-2);
	border: 1px solid var(--ctf-border);
	border-radius: var(--ctf-radius-sm);
	padding: .12em .4em;
	color: var(--ctf-text);
}
pre {
	background: #0f1620;
	color: #e6edf3;
	padding: 18px 20px;
	border-radius: var(--ctf-radius);
	overflow-x: auto;
	margin: 1.6em 0;
	line-height: 1.6;
	font-size: .9rem;
}
pre code { background: none; border: 0; padding: 0; color: inherit; }

kbd {
	background: var(--ctf-surface-2);
	border: 1px solid var(--ctf-border-strong);
	border-bottom-width: 2px;
	border-radius: 5px;
	padding: .1em .45em;
	font-size: .85em;
	white-space: nowrap;
}

table { border-collapse: collapse; width: 100%; margin: 1.6em 0; font-size: .96rem; }
th, td { border: 1px solid var(--ctf-border); padding: 11px 14px; text-align: left; vertical-align: top; }
th { background: var(--ctf-surface); font-weight: 600; }
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ctf-surface) 55%, transparent); }

:focus-visible { outline: 3px solid var(--ctf-accent); outline-offset: 2px; border-radius: 3px; }

::selection { background: var(--ctf-accent); color: #fff; }

/* =========================================================
   3. Layout helpers
   ========================================================= */
.ctf-container { width: 100%; max-width: var(--ctf-width); margin: 0 auto; padding-inline: 20px; }
.ctf-container--narrow { max-width: 860px; }

.ctf-site { display: flex; flex-direction: column; min-height: 100vh; }
.ctf-main { flex: 1 0 auto; padding-block: 36px 60px; }

.ctf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--ctf-gap); align-items: start; }
.ctf-layout--full { grid-template-columns: minmax(0, 1fr); }
/* Grid items default to min-width:auto, which lets a wide table or code block
   stretch the whole column instead of scrolling inside it. */
.ctf-layout > *, .ctf-primary { min-width: 0; }
.ctf-primary { max-width: 100%; }

.ctf-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--ctf-accent); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--ctf-radius) 0;
}
.ctf-skip-link:focus { left: 0; color: #fff; }

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

/* =========================================================
   4. Header
   ========================================================= */
.ctf-topbar {
	background: var(--ctf-surface);
	border-bottom: 1px solid var(--ctf-border);
	font-size: .82rem;
	color: var(--ctf-muted);
}
.ctf-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.ctf-topbar a { color: var(--ctf-muted); }
.ctf-topbar a:hover { color: var(--ctf-accent); }
.ctf-topbar__links ul { display: flex; gap: 18px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.ctf-topbar__links li { margin: 0; }

.ctf-header {
	position: sticky; top: 0; z-index: 90;
	background: color-mix(in srgb, var(--ctf-bg) 92%, transparent);
	backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--ctf-border);
}
.ctf-header__inner { display: flex; align-items: center; gap: 22px; min-height: var(--ctf-header-h); }

.ctf-brand { display: flex; align-items: center; gap: 11px; margin-right: auto; text-decoration: none; }
.ctf-brand:hover { text-decoration: none; }
.ctf-brand__mark {
	width: 34px; height: 34px; flex: none; border-radius: 9px;
	background: linear-gradient(135deg, var(--ctf-accent), #7c3aed);
	display: grid; place-items: center; color: #fff;
}
.ctf-brand__mark svg { width: 19px; height: 19px; display: block; }
.ctf-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.ctf-brand__name { font-weight: 800; font-size: 1.16rem; letter-spacing: -.03em; color: var(--ctf-text); }
.ctf-brand__tag { font-size: .73rem; color: var(--ctf-muted); font-weight: 500; letter-spacing: .01em; }
.ctf-brand img.custom-logo { max-height: 44px; width: auto; }

.ctf-nav { min-width: 0; }
/* A long category menu wraps onto a second row rather than pushing the header wider. */
.ctf-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ctf-nav li { margin: 0; position: relative; }
.ctf-nav a {
	display: block; padding: 9px 12px; border-radius: 8px;
	font-size: .94rem; font-weight: 600; color: var(--ctf-text-soft);
	white-space: nowrap;
}
.ctf-nav a:hover, .ctf-nav .current-menu-item > a, .ctf-nav .current_page_item > a {
	background: var(--ctf-surface); color: var(--ctf-accent); text-decoration: none;
}
.ctf-nav .sub-menu {
	display: none; position: absolute; top: 100%; left: 0; min-width: 210px;
	background: var(--ctf-bg); border: 1px solid var(--ctf-border); border-radius: var(--ctf-radius);
	box-shadow: var(--ctf-shadow-lg); padding: 6px; flex-direction: column; gap: 2px; z-index: 50;
}
.ctf-nav li:hover > .sub-menu, .ctf-nav li:focus-within > .sub-menu { display: flex; }
.ctf-nav .sub-menu a { padding: 8px 12px; font-weight: 500; }

.ctf-header__tools { display: flex; align-items: center; gap: 6px; }

.ctf-iconbtn {
	width: 38px; height: 38px; display: grid; place-items: center;
	background: transparent; border: 1px solid var(--ctf-border); border-radius: 9px;
	color: var(--ctf-text-soft); cursor: pointer; padding: 0; transition: .15s;
}
.ctf-iconbtn:hover { background: var(--ctf-surface); color: var(--ctf-accent); border-color: var(--ctf-border-strong); }
.ctf-iconbtn svg { width: 18px; height: 18px; display: block; }
.ctf-iconbtn .ctf-icon-sun { display: none; }
html[data-theme="dark"] .ctf-iconbtn .ctf-icon-sun { display: block; }
html[data-theme="dark"] .ctf-iconbtn .ctf-icon-moon { display: none; }

.ctf-menu-toggle { display: none; }

.ctf-searchpanel {
	display: none; border-top: 1px solid var(--ctf-border); background: var(--ctf-bg);
	padding-block: 16px;
}
.ctf-searchpanel.is-open { display: block; }

/* Mobile nav — switches early enough that a long category menu never overflows. */
@media (max-width: 1100px) {
	.ctf-menu-toggle { display: grid; }
	.ctf-nav {
		display: none; position: absolute; top: 100%; left: 0; right: 0;
		background: var(--ctf-bg); border-bottom: 1px solid var(--ctf-border);
		box-shadow: var(--ctf-shadow-lg); padding: 12px 20px 20px; max-height: 80vh; overflow-y: auto;
	}
	.ctf-nav.is-open { display: block; }
	.ctf-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
	.ctf-nav a { padding: 11px 12px; font-size: 1rem; }
	.ctf-nav .sub-menu {
		display: flex; position: static; border: 0; box-shadow: none; padding: 0 0 0 14px;
		border-left: 2px solid var(--ctf-border); border-radius: 0; margin: 2px 0 6px;
	}
}

/* =========================================================
   5. Hero / page headers
   ========================================================= */
.ctf-hero {
	background: linear-gradient(160deg, var(--ctf-surface) 0%, var(--ctf-bg) 100%);
	border-bottom: 1px solid var(--ctf-border);
	padding-block: 52px 46px;
}
.ctf-hero__inner { max-width: 760px; }
.ctf-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--ctf-accent-soft); color: var(--ctf-accent);
	font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
	padding: 5px 11px; border-radius: 99px; margin-bottom: 16px;
}
.ctf-hero h1 { margin-bottom: .45em; }
.ctf-hero__lead { font-size: 1.12rem; color: var(--ctf-text-soft); margin-bottom: 26px; }
.ctf-hero__search { display: flex; gap: 10px; max-width: 540px; }
.ctf-hero__search input[type="search"] { flex: 1; }

.ctf-pagehead { padding-block: 34px 8px; }
.ctf-pagehead h1 { margin-bottom: .3em; }
.ctf-pagehead__desc { color: var(--ctf-text-soft); max-width: 720px; }

/* Breadcrumbs */
.ctf-crumbs { font-size: .83rem; color: var(--ctf-muted); margin-bottom: 14px; }
.ctf-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ctf-crumbs li { margin: 0; display: flex; align-items: center; gap: 6px; }
.ctf-crumbs li + li::before { content: "/"; color: var(--ctf-border-strong); }
.ctf-crumbs a { color: var(--ctf-muted); }
.ctf-crumbs a:hover { color: var(--ctf-accent); }

/* =========================================================
   6. Forms & buttons
   ========================================================= */
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%;
	background: var(--ctf-bg);
	color: var(--ctf-text);
	border: 1px solid var(--ctf-border-strong);
	border-radius: var(--ctf-radius);
	padding: 11px 14px;
	font: inherit;
	font-size: .97rem;
	transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 170px; resize: vertical; }
input:focus, select:focus, textarea:focus {
	outline: none; border-color: var(--ctf-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctf-accent) 22%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--ctf-muted); }
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }

.ctf-btn, button, input[type="submit"], .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--ctf-accent); color: #fff; border: 1px solid transparent;
	border-radius: var(--ctf-radius); padding: 11px 20px;
	font: inherit; font-size: .95rem; font-weight: 600; line-height: 1.3;
	cursor: pointer; text-decoration: none; transition: .15s;
}
.ctf-btn:hover, button:hover, input[type="submit"]:hover {
	background: var(--ctf-accent-hover); color: #fff; text-decoration: none; transform: translateY(-1px);
}
.ctf-btn--ghost { background: transparent; color: var(--ctf-accent); border-color: var(--ctf-border-strong); }
.ctf-btn--ghost:hover { background: var(--ctf-surface); color: var(--ctf-accent); }
.ctf-btn--cta { background: var(--ctf-cta); }
.ctf-btn--cta:hover { background: var(--ctf-cta-hover); }
.ctf-btn--block { display: flex; width: 100%; }
.ctf-btn--lg { padding: 14px 26px; font-size: 1rem; }

/* =========================================================
   7. Post cards / archive grid
   ========================================================= */
.ctf-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.ctf-section-head h2 { margin: 0; font-size: 1.35rem; }
.ctf-section-head a { font-size: .9rem; font-weight: 600; }

.ctf-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ctf-grid--2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.ctf-card {
	background: var(--ctf-bg);
	border: 1px solid var(--ctf-border);
	border-radius: var(--ctf-radius-lg);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ctf-card:hover { transform: translateY(-3px); box-shadow: var(--ctf-shadow-lg); border-color: var(--ctf-border-strong); }
.ctf-card__media { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--ctf-surface-2); overflow: hidden; }
.ctf-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ctf-card:hover .ctf-card__media img { transform: scale(1.04); }
.ctf-card__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ctf-border-strong); }
.ctf-card__ph svg { width: 46px; height: 46px; }
.ctf-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.ctf-card__title { font-size: 1.12rem; line-height: 1.35; margin: 0 0 10px; }
.ctf-card__title a { color: var(--ctf-text); }
.ctf-card__title a:hover { color: var(--ctf-accent); text-decoration: none; }
.ctf-card__excerpt { font-size: .93rem; color: var(--ctf-text-soft); margin: 0 0 16px; flex: 1; }
.ctf-card__foot { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--ctf-muted); }
.ctf-card__foot .ctf-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ctf-border-strong); flex: none; }

.ctf-cat {
	display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	color: var(--ctf-accent); background: var(--ctf-accent-soft);
	padding: 4px 9px; border-radius: 5px; margin-bottom: 11px; text-decoration: none;
}
.ctf-cat:hover { text-decoration: none; opacity: .85; }

/* Featured / first post */
.ctf-featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; margin-bottom: 40px; }
.ctf-featured .ctf-card__media { aspect-ratio: 4 / 3; height: 100%; border-radius: var(--ctf-radius-lg) 0 0 var(--ctf-radius-lg); }
.ctf-featured .ctf-card__body { padding: 30px 32px; justify-content: center; }
.ctf-featured .ctf-card__title { font-size: 1.62rem; }
.ctf-featured .ctf-card__excerpt { font-size: 1rem; }

/* List style rows */
.ctf-list { display: flex; flex-direction: column; gap: 20px; }
.ctf-row {
	display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px;
	background: var(--ctf-bg); border: 1px solid var(--ctf-border);
	border-radius: var(--ctf-radius-lg); padding: 16px; transition: .18s;
}
.ctf-row:hover { border-color: var(--ctf-border-strong); box-shadow: var(--ctf-shadow); }
.ctf-row .ctf-card__media { border-radius: var(--ctf-radius); aspect-ratio: 4 / 3; }
.ctf-row__body { display: flex; flex-direction: column; justify-content: center; }

@media (max-width: 720px) {
	.ctf-featured { grid-template-columns: 1fr; }
	.ctf-featured .ctf-card__media { border-radius: var(--ctf-radius-lg) var(--ctf-radius-lg) 0 0; aspect-ratio: 16/9; }
	.ctf-featured .ctf-card__body { padding: 22px; }
	.ctf-featured .ctf-card__title { font-size: 1.35rem; }
	.ctf-row { grid-template-columns: 1fr; }
}

/* Category pills strip */
.ctf-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 34px; }
.ctf-pill {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1px solid var(--ctf-border); background: var(--ctf-bg);
	border-radius: 99px; padding: 7px 15px; font-size: .88rem; font-weight: 600; color: var(--ctf-text-soft);
}
.ctf-pill:hover { border-color: var(--ctf-accent); color: var(--ctf-accent); background: var(--ctf-accent-soft); text-decoration: none; }
.ctf-pill span { font-size: .78rem; color: var(--ctf-muted); font-weight: 500; }

/* =========================================================
   8. Single post
   ========================================================= */
.ctf-article { background: var(--ctf-bg); }
.ctf-article__head { margin-bottom: 26px; }
.ctf-article__head h1 { margin-bottom: 16px; }
.ctf-article__meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
	font-size: .88rem; color: var(--ctf-muted);
	padding-bottom: 20px; border-bottom: 1px solid var(--ctf-border);
}
.ctf-article__meta .ctf-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ctf-border-strong); }
.ctf-avatar { border-radius: 50%; width: 30px; height: 30px; }
.ctf-article__meta strong { color: var(--ctf-text); font-weight: 600; }

.ctf-thumb { margin: 0 0 28px; }
.ctf-thumb img { width: 100%; border-radius: var(--ctf-radius-lg); }
.ctf-thumb figcaption { font-size: .82rem; color: var(--ctf-muted); margin-top: 8px; text-align: center; }

.ctf-content { font-size: 1.06rem; }
.ctf-content > *:first-child { margin-top: 0; }
.ctf-content h2 { margin-top: 1.9em; padding-top: .2em; }
.ctf-content h3 { margin-top: 1.6em; }
.ctf-content ul li::marker { color: var(--ctf-accent); }
.ctf-content ol li::marker { color: var(--ctf-accent); font-weight: 700; }
.ctf-content img { border-radius: var(--ctf-radius); }
.ctf-content figure { margin: 1.8em 0; }
.ctf-content figcaption { font-size: .85rem; color: var(--ctf-muted); text-align: center; margin-top: 8px; }
.ctf-content a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
/* Theme components inside post content are not body links — keep them unstyled. */
.ctf-content .ctf-btn,
.ctf-content .ctf-product__name a,
.ctf-content .ctf-product__img a,
.ctf-content .ctf-faq summary,
.ctf-content .ctf-pill,
.ctf-content .ctf-cat { text-decoration: none; }
.ctf-content .ctf-btn:hover { text-decoration: none; }

.alignleft { float: left; margin: .4em 1.6em 1.2em 0; }
.alignright { float: right; margin: .4em 0 1.2em 1.6em; }
.aligncenter { margin-inline: auto; }
.alignwide { width: min(100vw - 40px, 1040px); margin-inline: calc(50% - min(50vw - 20px, 520px)); max-width: none; }
.alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }
.ctf-layout:not(.ctf-layout--full) .alignwide,
.ctf-layout:not(.ctf-layout--full) .alignfull { width: 100%; margin-inline: 0; }

/* Table of contents */
.ctf-toc {
	background: var(--ctf-surface); border: 1px solid var(--ctf-border);
	border-radius: var(--ctf-radius-lg); padding: 18px 22px; margin: 0 0 30px;
}
.ctf-toc__head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	font-weight: 700; font-size: .95rem; cursor: pointer; list-style: none;
}
.ctf-toc__head::-webkit-details-marker { display: none; }
.ctf-toc__head::after { content: "−"; font-size: 1.3rem; color: var(--ctf-muted); line-height: 1; }
.ctf-toc:not([open]) .ctf-toc__head::after { content: "+"; }
/* Numbering counts only top-level (H2) entries, so a nested H3 never consumes a number. */
.ctf-toc ol { margin: 14px 0 0; padding-left: 0; font-size: .94rem; list-style: none; counter-reset: ctftoc; }
.ctf-toc li { margin-bottom: .4em; padding-left: 1.7em; position: relative; }
.ctf-toc a { color: var(--ctf-text-soft); text-decoration: none; }
.ctf-toc a:hover { color: var(--ctf-accent); text-decoration: underline; }
.ctf-toc .ctf-toc-h2 { counter-increment: ctftoc; }
.ctf-toc .ctf-toc-h2::before {
	content: counter(ctftoc) ".";
	position: absolute; left: 0; top: 0;
	color: var(--ctf-accent); font-weight: 700;
}
.ctf-toc .ctf-toc-h3 { padding-left: 3em; font-size: .9rem; }
.ctf-toc .ctf-toc-h3::before {
	content: ""; position: absolute; left: 2em; top: .62em;
	width: 5px; height: 5px; border-radius: 50%; background: var(--ctf-border-strong);
}

/* Key facts / summary box */
.ctf-keybox {
	background: var(--ctf-accent-soft); border: 1px solid color-mix(in srgb, var(--ctf-accent) 26%, transparent);
	border-radius: var(--ctf-radius-lg); padding: 20px 24px; margin: 0 0 28px;
}
.ctf-keybox h2, .ctf-keybox h3 { margin-top: 0; font-size: 1.05rem; }
.ctf-keybox ul { margin-bottom: 0; }

/* Author box */
.ctf-authorbox {
	display: flex; gap: 18px; align-items: flex-start;
	background: var(--ctf-surface); border: 1px solid var(--ctf-border);
	border-radius: var(--ctf-radius-lg); padding: 22px 24px; margin-top: 40px;
}
.ctf-authorbox img { border-radius: 50%; flex: none; }
.ctf-authorbox h3 { margin: 0 0 4px; font-size: 1.05rem; }
.ctf-authorbox p { margin: 0; font-size: .93rem; color: var(--ctf-text-soft); }
.ctf-authorbox__role { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ctf-muted); font-weight: 700; margin-bottom: 8px; }

/* Share */
.ctf-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--ctf-border); }
.ctf-share__label { font-size: .85rem; font-weight: 700; color: var(--ctf-muted); text-transform: uppercase; letter-spacing: .06em; }
.ctf-share a, .ctf-share button {
	width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
	border-radius: 8px; border: 1px solid var(--ctf-border); background: var(--ctf-bg); color: var(--ctf-text-soft);
}
.ctf-share a:hover, .ctf-share button:hover { background: var(--ctf-accent); color: #fff; border-color: transparent; transform: none; }
.ctf-share svg { width: 17px; height: 17px; }

/* Tags */
.ctf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ctf-tags a {
	font-size: .82rem; background: var(--ctf-surface); border: 1px solid var(--ctf-border);
	padding: 5px 12px; border-radius: 99px; color: var(--ctf-text-soft);
}
.ctf-tags a:hover { border-color: var(--ctf-accent); color: var(--ctf-accent); text-decoration: none; }

/* Post navigation */
.ctf-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.ctf-postnav a {
	display: block; padding: 16px 20px; border: 1px solid var(--ctf-border);
	border-radius: var(--ctf-radius-lg); color: var(--ctf-text); transition: .15s;
}
.ctf-postnav a:hover { border-color: var(--ctf-accent); background: var(--ctf-surface); text-decoration: none; }
.ctf-postnav span { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ctf-muted); font-weight: 700; margin-bottom: 6px; }
.ctf-postnav strong { font-weight: 600; font-size: .96rem; line-height: 1.4; }
.ctf-postnav .ctf-next { text-align: right; }
@media (max-width: 600px) { .ctf-postnav { grid-template-columns: 1fr; } }

/* Related */
.ctf-related { margin-top: 50px; }

/* =========================================================
   9. Sidebar & widgets
   ========================================================= */
.ctf-sidebar { position: sticky; top: calc(var(--ctf-header-h) + 20px); display: flex; flex-direction: column; gap: 26px; }
.ctf-widget {
	background: var(--ctf-bg); border: 1px solid var(--ctf-border);
	border-radius: var(--ctf-radius-lg); padding: 20px 22px;
}
.ctf-widget__title, .ctf-widget .wp-block-heading, .ctf-widget .widget-title {
	font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800;
	color: var(--ctf-muted); margin: 0 0 15px; padding-bottom: 11px; border-bottom: 1px solid var(--ctf-border);
}
.ctf-widget ul { list-style: none; margin: 0; padding: 0; font-size: .94rem; }
.ctf-widget li { margin-bottom: 9px; padding-bottom: 9px; border-bottom: 1px dashed var(--ctf-border); }
.ctf-widget li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.ctf-widget a { color: var(--ctf-text-soft); }
.ctf-widget a:hover { color: var(--ctf-accent); }
.ctf-widget p:last-child { margin-bottom: 0; }

.ctf-poplist { list-style: none; margin: 0; padding: 0; }
.ctf-poplist li { display: grid; grid-template-columns: 62px 1fr; gap: 12px; align-items: center; }
.ctf-poplist img { width: 62px; height: 46px; object-fit: cover; border-radius: var(--ctf-radius-sm); }
.ctf-poplist .ctf-ph { width: 62px; height: 46px; border-radius: var(--ctf-radius-sm); background: var(--ctf-surface-2); }
.ctf-poplist a { font-weight: 600; font-size: .9rem; line-height: 1.35; color: var(--ctf-text); display: block; }
.ctf-poplist a:hover { color: var(--ctf-accent); }
.ctf-poplist time { font-size: .76rem; color: var(--ctf-muted); }

.ctf-newsletter { background: linear-gradient(150deg, var(--ctf-accent), #7c3aed); color: #fff; border: 0; }
.ctf-newsletter .ctf-widget__title { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.2); }
.ctf-newsletter p { font-size: .9rem; color: rgba(255,255,255,.92); }
.ctf-newsletter input { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; margin-bottom: 10px; }
.ctf-newsletter input::placeholder { color: rgba(255,255,255,.7); }
.ctf-newsletter .ctf-btn { background: #fff; color: var(--ctf-accent); }
.ctf-newsletter .ctf-btn:hover { background: rgba(255,255,255,.88); color: var(--ctf-accent); }

/* Search form */
.ctf-searchform { display: flex; gap: 8px; }
.ctf-searchform input[type="search"] { flex: 1; }

/* =========================================================
   10. Ad slots
   ========================================================= */
.ctf-ad { margin: 0 auto; text-align: center; max-width: 100%; overflow: hidden; }
.ctf-ad__label {
	display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .13em;
	color: var(--ctf-muted); margin-bottom: 6px; opacity: .8;
}
.ctf-ad--header { padding-block: 18px; border-bottom: 1px solid var(--ctf-border); background: var(--ctf-surface); }
.ctf-ad--incontent { margin-block: 34px; padding-block: 8px; }
.ctf-ad--belowtitle { margin-bottom: 30px; }
/* Spans the whole feed row. width/margin are explicit because an auto margin on a
   grid item shrinks it to fit instead of stretching. */
.ctf-ad--infeed {
	grid-column: 1 / -1;
	width: 100%;
	margin-inline: 0;
	justify-self: stretch;
	padding: 22px;
	background: var(--ctf-surface);
	border-radius: var(--ctf-radius-lg);
	border: 1px dashed var(--ctf-border);
}
.ctf-ad--footer { padding-block: 26px; border-top: 1px solid var(--ctf-border); }
.ctf-ad--sidebar { padding: 0; border: 0; background: none; }
.ctf-ad--sticky {
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
	background: var(--ctf-bg); border-top: 1px solid var(--ctf-border);
	padding: 8px 10px; box-shadow: 0 -4px 20px rgba(0,0,0,.08); display: none;
}
.ctf-ad--sticky.is-visible { display: block; }
.ctf-ad__close {
	position: absolute; top: -13px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
	background: var(--ctf-bg); border: 1px solid var(--ctf-border); color: var(--ctf-muted);
	display: grid; place-items: center; font-size: 15px; line-height: 1; padding: 0; cursor: pointer;
}
.ctf-ad__close:hover { background: var(--ctf-surface); color: var(--ctf-text); transform: none; }
@media (max-width: 820px) { .ctf-ad--sticky.is-visible { display: block; } body.ctf-has-sticky-ad { padding-bottom: 70px; } }
@media (min-width: 821px) { .ctf-ad--sticky { display: none !important; } }

.ctf-ad-placeholder {
	background: repeating-linear-gradient(45deg, var(--ctf-surface), var(--ctf-surface) 10px, var(--ctf-surface-2) 10px, var(--ctf-surface-2) 20px);
	border: 1px dashed var(--ctf-border-strong); border-radius: var(--ctf-radius);
	color: var(--ctf-muted); font-size: .82rem; display: grid; place-items: center; min-height: 92px; padding: 14px;
}

/* =========================================================
   11. Affiliate components
   ========================================================= */
.ctf-disclosure {
	display: flex; gap: 11px; align-items: flex-start;
	background: var(--ctf-surface); border: 1px solid var(--ctf-border); border-left: 3px solid var(--ctf-cta);
	border-radius: var(--ctf-radius); padding: 12px 16px; margin: 0 0 26px;
	font-size: .86rem; color: var(--ctf-text-soft); line-height: 1.55;
}
.ctf-disclosure svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--ctf-cta); }
.ctf-disclosure p { margin: 0; }

/* Product box */
.ctf-product {
	display: grid; grid-template-columns: 190px minmax(0, 1fr) 180px; gap: 22px; align-items: center;
	border: 1px solid var(--ctf-border); border-radius: var(--ctf-radius-lg);
	background: var(--ctf-bg); padding: 22px; margin: 2em 0; position: relative;
	box-shadow: var(--ctf-shadow);
}
.ctf-product__badge {
	position: absolute; top: -11px; left: 20px;
	background: var(--ctf-cta); color: #fff; font-size: .7rem; font-weight: 800;
	text-transform: uppercase; letter-spacing: .07em; padding: 4px 12px; border-radius: 99px;
}
.ctf-product__img { display: grid; place-items: center; }
.ctf-product__img img { max-height: 170px; width: auto; object-fit: contain; border-radius: var(--ctf-radius-sm); }
.ctf-product__img .ctf-ph { width: 100%; aspect-ratio: 1; background: var(--ctf-surface-2); border-radius: var(--ctf-radius); display: grid; place-items: center; color: var(--ctf-border-strong); }
.ctf-product__name { font-size: 1.16rem; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.ctf-product__name a { color: var(--ctf-text); text-decoration: none; }
.ctf-product__name a:hover { color: var(--ctf-accent); }
.ctf-product__desc { font-size: .93rem; color: var(--ctf-text-soft); margin: 0; }
.ctf-product__desc p:last-child { margin-bottom: 0; }
.ctf-product__side { text-align: center; }
.ctf-product__price { font-size: 1.3rem; font-weight: 800; margin-bottom: 4px; display: block; }
.ctf-product__note { font-size: .74rem; color: var(--ctf-muted); display: block; margin-top: 8px; }
.ctf-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: .88rem; font-weight: 600; }
.ctf-stars { position: relative; display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: 1px; color: var(--ctf-border-strong); }
.ctf-stars::before { content: "★★★★★"; }
.ctf-stars i { position: absolute; top: 0; left: 0; overflow: hidden; color: #f5a623; white-space: nowrap; }
.ctf-stars i::before { content: "★★★★★"; }
.ctf-product .ctf-rating { justify-content: flex-start; }
.ctf-product__side .ctf-rating { justify-content: center; }

@media (max-width: 760px) {
	.ctf-product { grid-template-columns: 1fr; text-align: center; gap: 16px; }
	.ctf-product__img img { max-height: 150px; margin-inline: auto; }
	.ctf-product .ctf-rating { justify-content: center; }
}

/* Pros & cons */
.ctf-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 2em 0; }
.ctf-proscons__col { border: 1px solid var(--ctf-border); border-radius: var(--ctf-radius-lg); padding: 18px 20px; }
.ctf-proscons__col h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; }
.ctf-proscons__col ul { list-style: none; margin: 0; padding: 0; font-size: .94rem; }
.ctf-proscons__col li { position: relative; padding-left: 26px; margin-bottom: 9px; }
.ctf-proscons__col li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.ctf-pros { background: color-mix(in srgb, var(--ctf-success) 7%, var(--ctf-bg)); border-color: color-mix(in srgb, var(--ctf-success) 28%, transparent); }
.ctf-pros h4 { color: var(--ctf-success); }
.ctf-pros li::before { content: "✓"; color: var(--ctf-success); }
.ctf-cons { background: color-mix(in srgb, var(--ctf-danger) 6%, var(--ctf-bg)); border-color: color-mix(in srgb, var(--ctf-danger) 26%, transparent); }
.ctf-cons h4 { color: var(--ctf-danger); }
.ctf-cons li::before { content: "✕"; color: var(--ctf-danger); }
@media (max-width: 640px) { .ctf-proscons { grid-template-columns: 1fr; } }

/* Callouts */
.ctf-note {
	display: flex; gap: 13px; align-items: flex-start;
	border: 1px solid var(--ctf-border); border-left: 4px solid var(--ctf-accent);
	background: var(--ctf-surface); border-radius: var(--ctf-radius);
	padding: 16px 20px; margin: 1.8em 0; font-size: .97rem;
}
.ctf-note__icon { flex: none; width: 21px; height: 21px; margin-top: 2px; color: var(--ctf-accent); }
.ctf-note__body > *:last-child { margin-bottom: 0; }
.ctf-note__title { font-weight: 700; display: block; margin-bottom: 4px; }
.ctf-note--tip { border-left-color: var(--ctf-success); background: color-mix(in srgb, var(--ctf-success) 6%, var(--ctf-bg)); }
.ctf-note--tip .ctf-note__icon { color: var(--ctf-success); }
.ctf-note--warning { border-left-color: var(--ctf-warning); background: color-mix(in srgb, var(--ctf-warning) 8%, var(--ctf-bg)); }
.ctf-note--warning .ctf-note__icon { color: var(--ctf-warning); }
.ctf-note--danger { border-left-color: var(--ctf-danger); background: color-mix(in srgb, var(--ctf-danger) 6%, var(--ctf-bg)); }
.ctf-note--danger .ctf-note__icon { color: var(--ctf-danger); }

/* Steps (HowTo) */
.ctf-steps { counter-reset: ctfstep; margin: 2em 0; padding: 0; list-style: none; }
.ctf-step {
	position: relative; counter-increment: ctfstep;
	padding: 0 0 26px 54px; margin: 0; border-left: 2px solid var(--ctf-border); margin-left: 17px;
}
.ctf-step:last-child { border-left-color: transparent; padding-bottom: 0; }
.ctf-step::before {
	content: counter(ctfstep);
	position: absolute; left: -18px; top: -2px;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--ctf-accent); color: #fff;
	display: grid; place-items: center; font-weight: 800; font-size: .92rem;
	box-shadow: 0 0 0 4px var(--ctf-bg);
}
.ctf-step__title { font-size: 1.1rem; margin: 3px 0 9px; }
.ctf-step__body > *:last-child { margin-bottom: 0; }

/* FAQ */
.ctf-faqs { margin: 2em 0; border: 1px solid var(--ctf-border); border-radius: var(--ctf-radius-lg); overflow: hidden; }
.ctf-faq { border-bottom: 1px solid var(--ctf-border); }
.ctf-faq:last-child { border-bottom: 0; }
.ctf-faq > summary {
	cursor: pointer; padding: 16px 48px 16px 20px; font-weight: 650; position: relative; list-style: none;
	background: var(--ctf-bg); transition: background .15s;
}
.ctf-faq > summary::-webkit-details-marker { display: none; }
.ctf-faq > summary:hover { background: var(--ctf-surface); }
.ctf-faq > summary::after {
	content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px;
	border-right: 2px solid var(--ctf-muted); border-bottom: 2px solid var(--ctf-muted);
	transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.ctf-faq[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.ctf-faq__body { padding: 0 20px 18px; font-size: .97rem; color: var(--ctf-text-soft); }
.ctf-faq__body > *:last-child { margin-bottom: 0; }

/* Comparison table wrapper */
.ctf-tablewrap { overflow-x: auto; margin: 1.8em 0; border: 1px solid var(--ctf-border); border-radius: var(--ctf-radius-lg); }
.ctf-tablewrap table { margin: 0; border: 0; min-width: 560px; }
.ctf-tablewrap th { background: var(--ctf-surface); }
.ctf-tablewrap td, .ctf-tablewrap th { border-left: 0; border-right: 0; }
.ctf-tablewrap tr:last-child td { border-bottom: 0; }

/* =========================================================
   12. Comments
   ========================================================= */
.ctf-comments { margin-top: 50px; padding-top: 34px; border-top: 1px solid var(--ctf-border); }
.ctf-comments h2 { font-size: 1.3rem; }
.comment-list { list-style: none; margin: 0 0 32px; padding: 0; }
.comment-list ol.children { list-style: none; margin: 18px 0 0; padding-left: 26px; border-left: 2px solid var(--ctf-border); }
.comment-body { background: var(--ctf-surface); border: 1px solid var(--ctf-border); border-radius: var(--ctf-radius-lg); padding: 18px 20px; margin-bottom: 18px; }
.comment-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .86rem; }
.comment-author { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.comment-author img { border-radius: 50%; }
.comment-metadata a { color: var(--ctf-muted); font-size: .82rem; }
.comment-content { font-size: .96rem; }
.comment-content p:last-child { margin-bottom: 0; }
.reply { margin-top: 8px; font-size: .86rem; font-weight: 600; }
.comment-respond { background: var(--ctf-surface); border: 1px solid var(--ctf-border); border-radius: var(--ctf-radius-lg); padding: 24px; }
.comment-form p { margin-bottom: 16px; }
.comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; }
.comment-form .comment-form-cookies-consent input { width: auto; margin-top: 4px; }
.comment-form .comment-form-cookies-consent label { font-weight: 400; margin: 0; }
.comment-notes, .logged-in-as { font-size: .87rem; color: var(--ctf-muted); }

/* =========================================================
   13. Pagination
   ========================================================= */
.ctf-pagination { margin-top: 44px; display: flex; justify-content: center; }
.ctf-pagination .nav-links, .ctf-pagination .page-numbers { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 0; }
.ctf-pagination .page-numbers {
	display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
	border: 1px solid var(--ctf-border); border-radius: var(--ctf-radius);
	color: var(--ctf-text-soft); font-weight: 600; font-size: .92rem;
}
.ctf-pagination a.page-numbers:hover { border-color: var(--ctf-accent); color: var(--ctf-accent); background: var(--ctf-accent-soft); text-decoration: none; }
.ctf-pagination .page-numbers.current { background: var(--ctf-accent); border-color: var(--ctf-accent); color: #fff; }
.ctf-pagination .dots { border-color: transparent; }

/* =========================================================
   14. Contact form
   ========================================================= */
.ctf-form { display: grid; gap: 18px; max-width: 640px; }
.ctf-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .ctf-form__row { grid-template-columns: 1fr; } }
.ctf-form__hp { position: absolute !important; left: -9999px !important; }
.ctf-alert { padding: 14px 18px; border-radius: var(--ctf-radius); margin-bottom: 22px; font-size: .95rem; border: 1px solid; }
.ctf-alert--ok { background: color-mix(in srgb, var(--ctf-success) 10%, var(--ctf-bg)); border-color: color-mix(in srgb, var(--ctf-success) 40%, transparent); color: var(--ctf-success); }
.ctf-alert--err { background: color-mix(in srgb, var(--ctf-danger) 9%, var(--ctf-bg)); border-color: color-mix(in srgb, var(--ctf-danger) 38%, transparent); color: var(--ctf-danger); }
.ctf-contact-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 40px; align-items: start; }
@media (max-width: 860px) { .ctf-contact-grid { grid-template-columns: 1fr; } }
.ctf-contact-card { background: var(--ctf-surface); border: 1px solid var(--ctf-border); border-radius: var(--ctf-radius-lg); padding: 22px 24px; }
.ctf-contact-card h3 { font-size: 1rem; margin-bottom: 10px; }
.ctf-contact-card p { font-size: .93rem; color: var(--ctf-text-soft); }

/* =========================================================
   15. Footer
   ========================================================= */
.ctf-footer { background: var(--ctf-surface); border-top: 1px solid var(--ctf-border); margin-top: auto; }
.ctf-footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding-block: 48px 36px; }
@media (max-width: 880px) { .ctf-footer__cols { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) { .ctf-footer__cols { grid-template-columns: 1fr; } }
.ctf-footer h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ctf-muted); margin-bottom: 14px; }
.ctf-footer ul { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.ctf-footer li { margin-bottom: 9px; }
.ctf-footer a { color: var(--ctf-text-soft); }
.ctf-footer a:hover { color: var(--ctf-accent); }
.ctf-footer__about p { font-size: .93rem; color: var(--ctf-text-soft); max-width: 42ch; }
.ctf-footer__bottom {
	border-top: 1px solid var(--ctf-border); padding-block: 20px;
	display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
	font-size: .85rem; color: var(--ctf-muted);
}
.ctf-footer__bottom nav ul { display: flex; flex-wrap: wrap; gap: 18px; }
.ctf-footer__bottom li { margin: 0; }
.ctf-social { display: flex; gap: 8px; }
.ctf-social a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--ctf-border); border-radius: 8px; }
.ctf-social a:hover { background: var(--ctf-accent); border-color: transparent; color: #fff; }
.ctf-social svg { width: 16px; height: 16px; }

.ctf-backtotop {
	position: fixed; right: 20px; bottom: 20px; z-index: 80;
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--ctf-accent); color: #fff; border: 0; display: none; place-items: center;
	box-shadow: var(--ctf-shadow-lg); cursor: pointer; padding: 0;
}
.ctf-backtotop.is-visible { display: grid; }
/* Sit above the sticky mobile ad bar instead of on top of it. */
body.ctf-has-sticky-ad .ctf-backtotop { bottom: 80px; }
.ctf-backtotop svg { width: 18px; height: 18px; }

/* =========================================================
   16. 404 / no results
   ========================================================= */
.ctf-empty { text-align: center; padding: 60px 20px; }
.ctf-empty__code { font-size: clamp(3.5rem, 12vw, 6rem); font-weight: 900; line-height: 1; color: var(--ctf-accent); letter-spacing: -.05em; margin-bottom: 10px; }
.ctf-empty p { color: var(--ctf-text-soft); max-width: 46ch; margin-inline: auto; }
.ctf-empty .ctf-searchform { max-width: 420px; margin: 26px auto 0; }

/* =========================================================
   17. Responsive layout
   ========================================================= */
@media (max-width: 1060px) {
	.ctf-layout { grid-template-columns: 1fr; }
	.ctf-sidebar { position: static; }
}
@media (max-width: 600px) {
	body { font-size: 16px; }
	.ctf-content { font-size: 1rem; }
	.ctf-main { padding-block: 24px 44px; }
	.ctf-hero { padding-block: 34px 30px; }
	.ctf-hero__search { flex-direction: column; }
}

/* Very small phones: keep the brand and the three header buttons on one row. */
@media (max-width: 420px) {
	.ctf-header__inner { gap: 10px; }
	.ctf-header__tools { gap: 4px; }
	.ctf-iconbtn { width: 34px; height: 34px; }
	.ctf-brand { gap: 8px; }
	.ctf-brand__mark { width: 30px; height: 30px; }
	.ctf-brand__name { font-size: 1.02rem; }
	.ctf-brand__tag { display: none; }
	.ctf-topbar { display: none; }
}

/* Print */
@media print {
	.ctf-header, .ctf-topbar, .ctf-footer, .ctf-sidebar, .ctf-ad, .ctf-share,
	.ctf-postnav, .ctf-related, .ctf-comments, .ctf-backtotop { display: none !important; }
	body { font-size: 12pt; }
	.ctf-layout { grid-template-columns: 1fr; }
}