/*
Theme Name: Clevie Premium
Theme URI: https://smartthemes.de/clevie-social
Author: smartthemes.de
Copyright 2026 smartthemes.de
Author URI: https://smartthemes.de
Description: A community-focused WordPress theme with a card feed, flexible columns, light and dark modes, a magazine template and extensive design controls. Works with the Clevie Community plugin and standard WordPress content.
Version: 2.4.26
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clevie-premium

Tags: blog, news, two-columns, three-columns, left-sidebar, right-sidebar, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, editor-style, footer-widgets, full-width-template, theme-options
*/

/* =========================================================
   1. Design tokens (fallbacks; the Customizer overrides these
      values through an inline style block)
   ========================================================= */
:root {
	--cv-bg: #dae0e6;
	--cv-surface: #ffffff;
	--cv-surface-2: #f6f7f8;
	--cv-header-bg: #ffffff;
	--cv-left-bg: #ffffff;
	--cv-text: #1c1c1c;
	--cv-muted: #7c7c7c;
	--cv-border: #ccccccff;
	--cv-accent: #ff4500;
	--cv-blue: #0079d3;
	--cv-link: #0079d3;
	--cv-radius: 4px;
	--cv-content-width: 820px;
	--cv-left-width: 260px;
	--cv-right-width: 312px;
	--cv-gap: 24px;
	--cv-header-height: 56px;
	--cv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
	--cv-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
	--cv-font-size: 14px;
	--cv-line-height: 1.5;
	--cv-heading-weight: 600;
	--cv-heading-spacing: 0px;
	--cv-logo-height: 34px;
	--cv-footer-cols: 3;
	--cv-video-width: 320px;
	--cv-thumb-max: 620px;
	--cv-fold-height: 380px;
	--cv-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

html[data-theme="dark"] {
	--cv-bg: #030303;
	--cv-surface: #1a1a1b;
	--cv-surface-2: #272729;
	--cv-header-bg: #1a1a1b;
	--cv-left-bg: #0e0e0f;
	--cv-text: #d7dadc;
	--cv-muted: #818384;
	--cv-border: #343536;
	--cv-accent: #ff4500;
	--cv-blue: #4f9eed;
	--cv-link: #4f9eed;
	--cv-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cv-header-height) + 16px); }

body {
	margin: 0;
	background: var(--cv-bg);
	color: var(--cv-text);
	font-family: var(--cv-font);
	font-size: var(--cv-font-size);
	line-height: var(--cv-line-height);
	-webkit-font-smoothing: antialiased;
}

img, video, iframe, embed, object { max-width: 100%; height: auto; }
figure { margin: 0 0 16px; }

a { color: var(--cv-link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cv-font-heading);
	color: var(--cv-text);
	line-height: 1.25;
	margin: 0 0 12px;
	font-weight: var(--cv-heading-weight);
	letter-spacing: var(--cv-heading-spacing);
}
h1 { font-size: 26px; }
h2 { font-size: 21px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

p { margin: 0 0 16px; }
blockquote {
	margin: 0 0 16px;
	padding: 4px 0 4px 16px;
	border-left: 4px solid var(--cv-border);
	color: var(--cv-muted);
}
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
pre {
	background: var(--cv-surface-2);
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius);
	padding: 12px;
	overflow: auto;
}
code { background: var(--cv-surface-2); padding: 1px 4px; border-radius: 3px; }
pre code { background: none; padding: 0; }
hr { border: 0; border-top: 1px solid var(--cv-border); margin: 24px 0; }

table { border-collapse: collapse; width: 100%; margin-bottom: 16px; }
th, td { border: 1px solid var(--cv-border); padding: 8px; text-align: left; }
th { background: var(--cv-surface-2); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 999;
	width: auto; height: auto; clip: auto; clip-path: none;
	background: var(--cv-surface); color: var(--cv-text);
	padding: 10px 16px; border-radius: var(--cv-radius); box-shadow: var(--cv-shadow);
}
:focus-visible { outline: 2px solid var(--cv-blue); outline-offset: 2px; }

/* =========================================================
   3. Buttons and forms
   ========================================================= */
.cv-btn,
button, input[type="submit"], input[type="button"], .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font: inherit;
	font-weight: 700;
	line-height: 1;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid transparent;
	background: var(--cv-blue);
	color: #fff;
	cursor: pointer;
	transition: filter .15s ease, background-color .15s ease;
}
.cv-btn:hover, button:hover, input[type="submit"]:hover { filter: brightness(1.08); text-decoration: none; }
.cv-btn--outline {
	background: transparent;
	border-color: var(--cv-blue);
	color: var(--cv-blue);
}
.cv-btn--accent { background: var(--cv-accent); }
.cv-btn--ghost { background: transparent; color: var(--cv-muted); padding: 6px; border-radius: 50%; }
.cv-btn--ghost:hover { background: var(--cv-surface-2); color: var(--cv-text); }

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
textarea, select {
	width: 100%;
	font: inherit;
	color: var(--cv-text);
	background: var(--cv-surface-2);
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius);
	padding: 9px 12px;
}
input:focus, textarea:focus, select:focus { border-color: var(--cv-blue); outline: none; }
textarea { min-height: 140px; resize: vertical; }
label { display: block; font-weight: 600; margin-bottom: 4px; }

/* =========================================================
   4. Header
   ========================================================= */
.cv-topbar {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--cv-header-height);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 20px;
	background: var(--cv-header-bg);
	border-bottom: 1px solid var(--cv-border);
}
.cv-topbar--static { position: relative; }

.cv-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; max-width: 260px; }
.cv-brand a { display: flex; align-items: center; gap: 8px; color: var(--cv-text); }
.cv-brand img { max-height: var(--cv-logo-height); width: auto; }
.cv-brand__mark { color: var(--cv-accent); flex-shrink: 0; }
.cv-brand__name {
	font-family: var(--cv-font-heading);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cv-brand__tagline { display: none; }

.cv-topbar__search { flex: 1; max-width: 620px; }
.cv-search { position: relative; display: flex; }
.cv-search input[type="search"] {
	border-radius: 999px;
	padding-left: 38px;
	background: var(--cv-surface-2);
}
.cv-search__icon {
	position: absolute;
	left: 13px; top: 50%;
	transform: translateY(-50%);
	color: var(--cv-muted);
	pointer-events: none;
}
.cv-search button { position: absolute; right: 4px; top: 4px; bottom: 4px; padding: 0 14px; font-size: 12px; }

.cv-topbar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cv-topbar__actions .cvc-bell { margin-left: 0; }

.cv-theme-toggle { width: 34px; height: 34px; padding: 0; }
.cv-theme-toggle .cv-icon-sun { display: none; }
html[data-theme="dark"] .cv-theme-toggle .cv-icon-sun { display: block; }
html[data-theme="dark"] .cv-theme-toggle .cv-icon-moon { display: none; }

.cv-menu-toggle { display: none; width: 34px; height: 34px; padding: 0; }

/* =========================================================
   5. Base layout
   ========================================================= */
.cv-shell {
	display: grid;
	grid-template-columns: var(--cv-left-width) minmax(0, var(--cv-content-width)) var(--cv-right-width);
	gap: var(--cv-gap);
	justify-content: center;
	align-items: start;
	padding: 24px 20px 64px;
}
.cv-shell--no-right { grid-template-columns: var(--cv-left-width) minmax(0, var(--cv-content-width)); }
.cv-shell--no-left { grid-template-columns: minmax(0, var(--cv-content-width)) var(--cv-right-width); }
.cv-shell--full { grid-template-columns: minmax(0, calc(var(--cv-content-width) + var(--cv-right-width))); }

.cv-col { min-width: 0; }
.cv-col--left, .cv-col--right { position: sticky; top: calc(var(--cv-header-height) + 24px); }
.cv-topbar--static ~ .cv-shell .cv-col--left,
.cv-topbar--static ~ .cv-shell .cv-col--right { position: static; }

/* =========================================================
   6. Cards
   ========================================================= */
.cv-card {
	background: var(--cv-surface);
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius);
	margin-bottom: 16px;
	overflow: hidden;
}
.cv-card__head {
	padding: 12px 16px;
	border-bottom: 1px solid var(--cv-border);
	font-family: var(--cv-font-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--cv-muted);
}
.cv-card__body { padding: 16px; }

/* =========================================================
   7. Left column: menu and widgets
   ========================================================= */
.cv-overlay { display: none; }
.cv-overlay[hidden] { display: none; }

.cv-nav { padding: 8px; }
.cv-nav ul { list-style: none; margin: 0; padding: 0; }
.cv-nav li { position: relative; }
.cv-nav a {
	display: block;
	padding: 8px 12px;
	border-radius: var(--cv-radius);
	color: var(--cv-text);
	font-weight: 600;
	font-size: 14px;
}
.cv-nav a:hover { background: var(--cv-surface-2); text-decoration: none; }
.cv-nav .current-menu-item > a,
.cv-nav .current_page_item > a {
	background: var(--cv-surface-2);
	box-shadow: inset 3px 0 0 var(--cv-accent);
}
.cv-nav .sub-menu { margin: 2px 0 6px 10px; padding-left: 8px; border-left: 1px solid var(--cv-border); }
.cv-nav .sub-menu a { font-weight: 400; color: var(--cv-muted); padding: 6px 12px; }
.cv-nav .sub-menu a:hover { color: var(--cv-text); }

/* Widgets */
.cv-widget { margin-bottom: 16px; }
.cv-widget .cv-card__body > *:last-child { margin-bottom: 0; }
.cv-widget ul, .cv-widget ol { list-style: none; margin: 0; padding: 0; }
.cv-widget li { padding: 7px 0; border-bottom: 1px solid var(--cv-border); }
.cv-widget li:first-child { padding-top: 0; }
.cv-widget li:last-child { border-bottom: 0; padding-bottom: 0; }
.cv-widget li a { color: var(--cv-text); font-weight: 500; }
.cv-widget li a:hover { color: var(--cv-link); }
.cv-widget .sub-menu, .cv-widget .children { margin-top: 6px; padding-left: 12px; border-left: 1px solid var(--cv-border); }
.cv-widget select { margin-top: 4px; }
.cv-widget .wp-block-search__inside-wrapper { gap: 6px; }
.cv-widget .tagcloud a,
.cv-widget .wp-block-tag-cloud a {
	display: inline-block;
	font-size: 12px !important;
	background: var(--cv-surface-2);
	border: 1px solid var(--cv-border);
	border-radius: 999px;
	padding: 3px 10px;
	margin: 0 4px 6px 0;
	color: var(--cv-muted);
}
.cv-widget .tagcloud a:hover { color: var(--cv-text); text-decoration: none; }

/* =========================================================
   8. Feed and posts
   ========================================================= */
.cv-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: var(--cv-surface);
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius);
	margin-bottom: 16px;
	font-size: 13px;
	color: var(--cv-muted);
}
.cv-toolbar strong { color: var(--cv-text); }

.cv-post { display: flex; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: var(--cv-radius); margin-bottom: 12px; }
.cv-post:hover { border-color: var(--cv-muted); }

.cv-votes--column {
	flex: 0 0 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 0;
	background: var(--cv-surface-2);
	color: var(--cv-muted);
}
.cv-votes__arrow { line-height: 0; color: var(--cv-muted); }
.cv-votes__arrow:hover { color: var(--cv-accent); }
.cv-votes__score { font-size: 12px; font-weight: 700; color: var(--cv-text); }

.cv-post__inner {
	flex: 1;
	min-width: 0;
	max-width: 100%;
	padding: 8px 12px 10px;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
.cv-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; color: var(--cv-muted); margin-bottom: 6px; }
.cv-post__meta a { color: var(--cv-muted); font-weight: 600; }
.cv-post__meta a:hover { color: var(--cv-link); }
.cv-post__cat {
	background: var(--cv-surface-2);
	border-radius: 999px;
	padding: 2px 8px;
	color: var(--cv-text) !important;
}
.cv-post__title { font-size: 18px; margin: 0 0 8px; }
.cv-post__title a { color: var(--cv-text); }
.cv-post__title a:hover { color: var(--cv-link); text-decoration: none; }
.cv-post__thumb { display: block; margin: 0 0 10px; border-radius: var(--cv-radius); overflow: hidden; }
/* The picture keeps its own shape: an upright photo stays upright rather than
   being cropped into a wide strip. Only the height is capped, so a very tall
   one cannot push everything else off the screen. */
.cv-post__thumb img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: var(--cv-thumb-max, 620px);
	margin: 0 auto;
	object-fit: contain;
	border-radius: var(--cv-radius);
}
.cv-post__thumb { background: var(--cv-surface-2); }
.cv-post__excerpt { color: var(--cv-text); margin-bottom: 10px; }
.cv-post__excerpt p:last-child { margin-bottom: 0; }

.cv-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.cv-actions a, .cv-actions span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--cv-muted);
	padding: 6px 8px;
	border-radius: var(--cv-radius);
}
.cv-actions a:hover { background: var(--cv-surface-2); color: var(--cv-text); text-decoration: none; }

/* Compact mode */
.cv-feed--compact .cv-post__thumb { float: right; width: 96px; margin: 0 0 8px 12px; background: none; }
.cv-feed--compact .cv-post__thumb img { max-height: 96px; object-fit: cover; width: 100%; }
.cv-feed--compact .cv-post__excerpt { display: none; }
.cv-feed--compact .cv-post__title { font-size: 15px; }

/* Single view */
.cv-single .cv-post__title { font-size: 26px; }
.cv-entry {
	font-size: 15px;
	line-height: 1.65;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
.cv-entry iframe,
.cv-entry embed,
.cv-entry object,
.cv-entry video { max-width: 100%; }
.cv-entry > *:last-child { margin-bottom: 0; }
.cv-entry img { border-radius: var(--cv-radius); }
.cv-entry ul, .cv-entry ol { padding-left: 22px; margin-bottom: 16px; }
.cv-entry li { margin-bottom: 6px; }
.cv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.cv-tags a { font-size: 12px; background: var(--cv-surface-2); border: 1px solid var(--cv-border); border-radius: 999px; padding: 3px 10px; color: var(--cv-muted); }

.cv-page-header { margin-bottom: 16px; }
.cv-page-header h1 { font-size: 20px; margin-bottom: 4px; }
.cv-page-header p { color: var(--cv-muted); margin: 0; font-size: 13px; }

/* Pagination */
.cv-pagination { margin-bottom: 24px; }
.cv-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cv-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--cv-surface);
	border: 1px solid var(--cv-border);
	color: var(--cv-text);
	font-weight: 700;
	font-size: 13px;
}
.cv-pagination .page-numbers:hover { border-color: var(--cv-blue); text-decoration: none; }
.cv-pagination .page-numbers.current { background: var(--cv-blue); border-color: var(--cv-blue); color: #fff; }

/* =========================================================
   9. Comments
   ========================================================= */
.cv-comments { padding: 16px; }
.cv-comments__title { font-size: 15px; margin-bottom: 16px; }
.comment-list { list-style: none; margin: 0 0 24px; padding: 0; }
.comment-list .children { list-style: none; margin: 12px 0 0; padding-left: 16px; border-left: 2px solid var(--cv-border); }
.comment-body { padding: 0 0 16px; }
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--cv-muted); margin-bottom: 6px; }
.comment-author img { border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.comment-author .fn { font-style: normal; font-weight: 700; color: var(--cv-text); }
.comment-content { font-size: 14px; }
.comment-content p:last-child { margin-bottom: 0; }
.comment-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.comment-actions:empty { display: none; }
.reply a, .comment-reply-link { font-size: 12px; font-weight: 700; color: var(--cv-muted); }
.comment-respond { border-top: 1px solid var(--cv-border); padding-top: 16px; }
.comment-form .form-submit { margin-bottom: 0; }
.comment-form p { margin-bottom: 12px; }
.bypostauthor > .comment-body .fn::after {
	content: "OP";
	font-size: 10px;
	background: var(--cv-blue);
	color: #fff;
	border-radius: 3px;
	padding: 1px 4px;
	margin-left: 6px;
}

/* =========================================================
   10. Footer
   ========================================================= */
.cv-footer {
	background: var(--cv-surface);
	border-top: 1px solid var(--cv-border);
	padding: 28px 20px;
	color: var(--cv-muted);
	font-size: 13px;
}
.cv-footer__inner { max-width: 1248px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.cv-footer a { color: var(--cv-muted); }
.cv-footer__menu ul { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; }

.cv-backtotop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	width: 40px; height: 40px;
	padding: 0;
	border-radius: 50%;
	background: var(--cv-surface);
	border: 1px solid var(--cv-border);
	color: var(--cv-text);
	box-shadow: var(--cv-shadow);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}
.cv-backtotop.is-visible { opacity: 1; pointer-events: auto; }

/* =========================================================
   11. Alignments (WordPress core classes)
   ========================================================= */
.alignleft { float: left; margin: 0 16px 16px 0; }
.alignright { float: right; margin: 0 0 16px 16px; }
.aligncenter { display: block; margin: 0 auto 16px; }
.alignwide, .alignfull { margin-left: calc(-1 * 16px); margin-right: calc(-1 * 16px); max-width: none; width: auto; }
.wp-caption-text, .wp-element-caption { font-size: 12px; color: var(--cv-muted); text-align: center; margin-top: 6px; }
.sticky .cv-post__title::before { content: "📌 "; }

/* =========================================================
   12. Responsive
   ========================================================= */
@media (max-width: 1200px) {
	.cv-shell { grid-template-columns: var(--cv-left-width) minmax(0, 1fr); }
	.cv-col--right { grid-column: 1 / -1; position: static; }
	.cv-shell--no-left { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
	.cv-topbar__search { display: none; }
	.cv-menu-toggle { display: inline-flex; }
	.cv-shell { grid-template-columns: minmax(0, 1fr); padding: 16px 12px 48px; }
	.cv-col--left {
		position: fixed !important;
		top: var(--cv-header-height) !important;
		left: 0 !important;
		right: 0 !important;
		bottom: auto !important;
		z-index: 99;
		width: 100% !important;
		max-width: none !important;
		height: 0;
		max-height: none;
		padding: 0 16px;
		overflow: hidden;
		transform: none !important;
		background: var(--cv-left-bg);
		border-right: 0;
		border-bottom: 0 solid var(--cv-border);
		transition: height .25s ease, padding .25s ease;
	}
	.cv-col--left.is-open {
		height: calc(100vh - var(--cv-header-height));
		height: calc(100dvh - var(--cv-header-height));
		max-height: none;
		padding: 16px 16px 28px;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
		overscroll-behavior: contain;
		border-bottom-width: 1px;
		box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
	}
	.cv-overlay {
		display: block;
		position: fixed;
		inset: var(--cv-header-height) 0 0;
		z-index: 98;
		background: rgba(0, 0, 0, .5);
		opacity: 0;
		pointer-events: none;
		transition: opacity .2s ease;
	}
	.cv-overlay.is-open { opacity: 1; pointer-events: auto; }
	.cv-post__title { font-size: 16px; }
	.cv-single .cv-post__title { font-size: 22px; }
}

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

@media print {
	.cv-topbar, .cv-col--left, .cv-col--right, .cv-actions, .cv-votes, .cv-backtotop { display: none !important; }
	.cv-shell { display: block; }
}

/* =========================================================
   13. Extras: footer widgets, comment card, post navigation
   ========================================================= */
.cv-footer-widgets {
	background: var(--cv-bg);
	padding: 24px 20px 8px;
	border-top: 1px solid var(--cv-border);
}
/* Lined up with the content column above it. The widget area used to carry a
   width of its own, so it sat off to one side of everything else.
   .cv-shell is a centred grid of left, content and right with 20px of padding;
   matching its outer width and then indenting by the left column plus one gap
   puts this block's left edge exactly under the feed. Done with padding rather
   than an empty grid column, because the widget columns are equal fractions and
   would not have lined up with the shell's fixed widths. */
.cv-footer-widgets .cv-footer__inner {
	display: grid;
	grid-template-columns: repeat(var(--cv-footer-cols, 3), minmax(0, 1fr));
	gap: 16px;
	align-items: start;
	box-sizing: border-box;
	max-width: calc(var(--cv-left-width) + var(--cv-content-width) + var(--cv-right-width) + (2 * var(--cv-gap)) + 40px);
	margin: 0 auto;
	padding: 0 20px 0 calc(20px + var(--cv-left-width) + var(--cv-gap));
}

/* Without a left column there is nothing to indent past. */
.cv-shell--no-left ~ .cv-footer-widgets .cv-footer__inner,
.cv-shell--full ~ .cv-footer-widgets .cv-footer__inner {
	padding-left: 20px;
}



.cv-comments-wrap { padding: 0; }
.cv-comments-wrap .cv-comments { padding: 16px; }

.cv-post-nav .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.cv-post-nav .nav-links a {
	display: inline-flex;
	align-items: center;
	max-width: 48%;
	padding: 10px 14px;
	border-radius: var(--cv-radius);
	background: var(--cv-surface);
	border: 1px solid var(--cv-border);
	color: var(--cv-text);
	font-size: 13px;
	font-weight: 600;
}
.cv-post-nav .nav-links a:hover { border-color: var(--cv-blue); text-decoration: none; }
.cv-post-nav .nav-next { margin-left: auto; }

.cv-single .cv-post__thumb { float: none; width: auto; margin: 0 0 16px; }
.cv-single .cv-post__excerpt { display: block; }

/* =========================================================
   14. Full-height left sidebar
   ========================================================= */
@media (min-width: 861px) {

	.cv-leftbar-fixed .cv-col--left {
		position: fixed;
		top: var(--cv-header-height);
		left: 0;
		bottom: 0;
		width: var(--cv-left-width);
		padding: 8px 12px 48px;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--cv-left-bg);
		border-right: 1px solid var(--cv-border);
		scrollbar-width: thin;
		scrollbar-color: var(--cv-border) transparent;
	}

	.cv-leftbar-fixed .cv-col--left::-webkit-scrollbar { width: 8px; }
	.cv-leftbar-fixed .cv-col--left::-webkit-scrollbar-thumb {
		background: var(--cv-border);
		border-radius: 4px;
	}
	.cv-leftbar-fixed .cv-col--left::-webkit-scrollbar-track { background: transparent; }

	/* Static header: the sidebar still starts below it. */
	.cv-leftbar-fixed .cv-topbar--static ~ .cv-shell .cv-col--left { top: 0; padding-top: calc(var(--cv-header-height) + 8px); }

	/* The feed shifts right by the width of the sidebar. */
	.cv-leftbar-fixed .cv-shell {
		grid-template-columns: minmax(0, var(--cv-content-width)) var(--cv-right-width);
		padding-left: calc(var(--cv-left-width) + var(--cv-gap));
	}
	.cv-leftbar-fixed .cv-shell--no-right { grid-template-columns: minmax(0, var(--cv-content-width)); }
	.cv-leftbar-fixed .cv-shell--full,
	.cv-leftbar-fixed .cv-shell--no-left { padding-left: 20px; }

	/* Sidebar content sits flat, without card borders. */
	.cv-leftbar-fixed .cv-col--left .cv-card,
	.cv-leftbar-fixed .cv-col--left .cv-widget {
		background: none;
		border: 0;
		border-radius: 0;
		margin: 0;
		padding: 0;
		overflow: visible;
	}
	.cv-leftbar-fixed .cv-col--left .cv-nav { padding: 8px 0 16px; }
	.cv-leftbar-fixed .cv-col--left .cv-widget { padding: 20px 0; }
	.cv-leftbar-fixed .cv-col--left .cv-widget + .cv-widget,
	.cv-leftbar-fixed .cv-col--left .cv-widgets { border-top: 1px solid var(--cv-border); }
	.cv-leftbar-fixed .cv-col--left .cv-card__body { padding: 0; }

	.cv-leftbar-fixed .cv-col--left .cv-card__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		width: 100%;
		padding: 6px 12px;
		margin-bottom: 4px;
		border: 0;
		border-radius: var(--cv-radius);
		background: none;
		font-size: 11px;
		color: var(--cv-muted);
		cursor: pointer;
	}
	.cv-leftbar-fixed .cv-col--left .cv-card__head:hover { background: var(--cv-surface-2); }
	.cv-leftbar-fixed .cv-col--left .cv-card__head::after {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(-135deg);
		transition: transform .15s ease;
		flex-shrink: 0;
	}
	.cv-leftbar-fixed .cv-col--left .cv-widget.is-collapsed .cv-card__head::after { transform: rotate(45deg); }
	.cv-leftbar-fixed .cv-col--left .cv-widget.is-collapsed > *:not(.cv-card__head) { display: none; }

	.cv-leftbar-fixed .cv-col--left .cv-widget li {
		border-bottom: 0;
		padding: 0;
	}
	.cv-leftbar-fixed .cv-col--left .cv-widget li > a {
		display: block;
		padding: 8px 12px;
		border-radius: var(--cv-radius);
		font-weight: 500;
	}
	.cv-leftbar-fixed .cv-col--left .cv-widget li > a:hover {
		background: var(--cv-surface-2);
		text-decoration: none;
	}
	.cv-leftbar-fixed .cv-col--left .cv-widget p,
	.cv-leftbar-fixed .cv-col--left .cv-widget .textwidget,
	.cv-leftbar-fixed .cv-col--left .cv-widget form,
	.cv-leftbar-fixed .cv-col--left .cv-widget select { padding: 0 12px; }
}

/* =========================================================
   15. Magazine
   ========================================================= */
:root { --cv-mag-width: 1120px; --cv-mag-cols: 3; }

.cv-magazine .cv-shell { --cv-content-width: var(--cv-mag-width); }

.cv-mag-intro { margin-bottom: 20px; }
.cv-mag-intro h1 { font-size: 24px; }
.cv-mag-intro .cv-entry > *:last-child { margin-bottom: 0; }

.cv-mag { display: grid; gap: 16px; margin-bottom: 24px; }
.cv-mag--list { grid-template-columns: minmax(0, 1fr); }
/* The number of columns follows the room the grid actually has, not the width
   of the window. With two sidebars next to it those are very different numbers,
   which is why fixed breakpoints kept getting it wrong. */
.cv-mag--grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--cv-mag-min, 260px)), 1fr));
}

.cv-mag--masonry {
	display: block;
	columns: var(--cv-mag-min, 260px) var(--cv-mag-cols, 3);
	column-gap: 16px;
}

/* The setting decides how narrow a tile may get, and with that how many fit. */
.cv-mag--cols-2 { --cv-mag-min: 340px; }
.cv-mag--cols-3 { --cv-mag-min: 265px; }
.cv-mag--cols-4 { --cv-mag-min: 215px; }
.cv-mag--cols-5 { --cv-mag-min: 185px; }
.cv-mag--masonry .cv-mag__item {
	display: block;
	break-inside: avoid;
	page-break-inside: avoid;
	margin: 0 0 16px;
}

.cv-mag__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	transition: border-color .15s ease, transform .15s ease;
}
.cv-mag__item:hover { border-color: var(--cv-muted); }

.cv-mag__thumb { display: block; overflow: hidden; background: var(--cv-surface-2); }
.cv-mag__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.cv-mag--masonry .cv-mag__thumb img { height: auto; aspect-ratio: auto; }
.cv-mag--list .cv-mag__thumb { background: var(--cv-surface-2); }
.cv-mag--list.cv-mag--img-top .cv-mag__thumb img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: var(--cv-thumb-max, 620px);
	margin: 0 auto;
	object-fit: contain;
	aspect-ratio: auto;
}

.cv-mag__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	padding: 12px 14px 14px;
}

.cv-mag__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 11px;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--cv-muted);
}
.cv-mag__cat { color: var(--cv-accent); font-weight: 700; }
.cv-mag__cat:hover { text-decoration: underline; }

.cv-mag__title { font-size: 17px; line-height: 1.3; margin-bottom: 8px; }
.cv-mag__title a { color: var(--cv-text); }
.cv-mag__title a:hover { color: var(--cv-link); text-decoration: none; }

.cv-mag__excerpt { color: var(--cv-muted); font-size: 13px; }
.cv-mag__excerpt p:last-child { margin-bottom: 0; }

.cv-mag__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cv-mag__actions:empty { display: none; }
.cv-mag__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: auto;
	padding-top: 10px;
	font-size: 12px;
	color: var(--cv-muted);
}
.cv-mag--masonry .cv-mag__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cv-mag__actions:empty { display: none; }
.cv-mag__footer { margin-top: 10px; }

/* Image beside the text */
.cv-mag--img-side .cv-mag__item { flex-direction: row; }
.cv-mag--img-side .cv-mag__thumb { flex: 0 0 40%; }
.cv-mag--img-side .cv-mag__thumb img { aspect-ratio: auto; min-height: 100%; }
.cv-mag--list.cv-mag--img-side .cv-mag__thumb { flex: 0 0 clamp(180px, 30%, 320px); }
.cv-mag--masonry.cv-mag--img-side .cv-mag__item { display: flex; }

/* The list style gets a little more room */
.cv-mag--list .cv-mag__title { font-size: 20px; }
.cv-mag--list .cv-mag__body { padding: 16px 18px 18px; }
.cv-mag--list .cv-mag__excerpt { font-size: 14px; }
.cv-mag--list.cv-mag--img-top .cv-mag__thumb img { aspect-ratio: 21 / 9; }

/* Tight grids need smaller type */
.cv-mag--cols-4 .cv-mag__title,
.cv-mag--cols-5 .cv-mag__title { font-size: 15px; }
.cv-mag--cols-5 .cv-mag__excerpt { display: none; }
.cv-mag--cols-4 .cv-mag__body,
.cv-mag--cols-5 .cv-mag__body { padding: 10px 12px 12px; }

@media (max-width: 1000px) {
	.cv-mag--cols-5 .cv-mag__excerpt { display: block; }
}

@media (max-width: 620px) {
	.cv-mag--img-side .cv-mag__item { flex-direction: column; }
	.cv-mag--img-side .cv-mag__thumb { flex: auto; }
	.cv-mag--img-side .cv-mag__thumb img { aspect-ratio: 16 / 9; min-height: 0; }
	.cv-mag--list .cv-mag__title { font-size: 17px; }
}

/* =========================================================
   16. Page layouts per post and page
   ========================================================= */
:root { --cv-wide-width: 900px; }

/* No sidebars, centered: the content keeps the feed width. */
.cv-layout-none .cv-shell--full { grid-template-columns: minmax(0, var(--cv-content-width)); }

/* No sidebars, wide. */
.cv-layout-full:not(.cv-magazine) .cv-shell { --cv-content-width: var(--cv-wide-width); }
.cv-layout-full .cv-shell--full { grid-template-columns: minmax(0, var(--cv-content-width)); }

/* =========================================================
   17. Breadcrumbs, sharing, author box, related posts
   ========================================================= */
.cv-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
	font-size: 12px;
	color: var(--cv-muted);
}
.cv-breadcrumbs a { color: var(--cv-muted); font-weight: 600; }
.cv-breadcrumbs a:hover { color: var(--cv-link); }
.cv-breadcrumbs__sep { opacity: .5; }

.cv-author--sidebar { margin: 0; padding: 0; border-top: 0; }
.cv-author--sidebar .cv-author__inner { gap: 12px; }
.cv-author--sidebar .cv-author__name { font-size: 14px; }
.cv-author-card .cv-author__bio { font-size: 12px; }
.cv-author__inner { display: flex; gap: 14px; align-items: flex-start; }
.cv-author__inner img { border-radius: 50%; flex-shrink: 0; }
.cv-author__text { min-width: 0; }
.cv-author__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--cv-muted);
	margin-bottom: 2px;
}
.cv-author__name { font-size: 15px; margin-bottom: 4px; }
.cv-author__name a { color: var(--cv-text); }
.cv-author__name a:hover { color: var(--cv-link); text-decoration: none; }
.cv-author__bio { color: var(--cv-muted); margin-bottom: 0; font-size: 13px; }

.cv-related__grid {
	display: grid;
	grid-template-columns: repeat(var(--cv-related-cols, 3), minmax(0, 1fr));
	gap: 14px;
}
.cv-related__item { display: flex; flex-direction: column; gap: 6px; color: var(--cv-text); }
.cv-related__item:hover { text-decoration: none; }
.cv-related__item:hover .cv-related__title { color: var(--cv-link); }
.cv-related__thumb { display: block; border-radius: var(--cv-radius); overflow: hidden; background: var(--cv-surface-2); }
.cv-related__thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cv-related__title { font-family: var(--cv-font-heading); font-weight: 600; font-size: 14px; line-height: 1.3; }
.cv-related__date { font-size: 11px; color: var(--cv-muted); }

.cv-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 3px;
	background: transparent;
}
.cv-progress__bar { display: block; height: 100%; width: 0; background: var(--cv-accent); transition: width .1s linear; }

@media (max-width: 700px) {
	.cv-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cv-footer-widgets .cv-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		max-width: none;
	}
}
@media (max-width: 480px) {
	.cv-related__grid { grid-template-columns: minmax(0, 1fr); }
	.cv-author__inner { flex-direction: column; }
}

/* =========================================================
   18. WooCommerce
   ========================================================= */
.woocommerce .cv-col--main { min-width: 0; }
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(var(--cv-wc-cols, 3), minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 12px;
	background: var(--cv-surface);
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius);
	text-align: left;
}
.woocommerce ul.products li.product img { border-radius: var(--cv-radius); margin-bottom: 10px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--cv-font-heading);
	font-size: 15px !important;
	padding: 0 !important;
	color: var(--cv-text);
}
.woocommerce ul.products li.product .price { color: var(--cv-text); font-weight: 700; }
.woocommerce ul.products li.product .price del { color: var(--cv-muted); font-weight: 400; }
.woocommerce span.onsale {
	background: var(--cv-accent);
	color: #fff;
	border-radius: 999px;
	min-height: 0;
	min-width: 0;
	padding: 3px 10px;
	line-height: 1.4;
	font-size: 11px;
}
.woocommerce div.product .product_title { font-size: 24px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; }
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--cv-blue);
	color: #fff;
	border-radius: 999px;
	font-weight: 700;
	padding: 9px 16px;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--cv-blue); filter: brightness(1.08); color: #fff; }
.woocommerce a.button.alt,
.woocommerce button.button.alt { background: var(--cv-accent); }
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	background: var(--cv-surface);
	border-top-color: var(--cv-accent);
	color: var(--cv-text);
	border-radius: var(--cv-radius);
}
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th { border-color: var(--cv-border); }

@media (max-width: 900px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.woocommerce ul.products { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   19. Block widgets, spacing and a footer that stays put
   ========================================================= */

/* Sticky footer: the shell grows, the footer always sits at the bottom. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.cv-shell { flex: 1 0 auto; }
.cv-footer-widgets,
.cv-footer { flex-shrink: 0; }

/* Block widgets carry no inner wrapper, so the card itself gets the padding. */
.cv-widget { padding: 12px 14px; }
.cv-widget > .cv-card__head { margin: -12px -14px 12px; }
.cv-widget > .cv-card__body { padding: 0; }
.cv-widget > *:last-child { margin-bottom: 0; }

/* Headings coming from a Heading block look like a card head. */
.cv-widget h1:not(.cv-card__head),
.cv-widget h2:not(.cv-card__head),
.cv-widget h3:not(.cv-card__head),
.cv-widget h4:not(.cv-card__head) {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--cv-muted);
	margin-bottom: 10px;
}

/* Search block */
.wp-block-search__inside-wrapper { gap: 6px; }
.wp-block-search__input {
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius);
	background: var(--cv-surface-2);
	color: var(--cv-text);
	padding: 9px 12px;
}
.wp-block-search__button {
	background: var(--cv-blue);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 9px 16px;
	font-weight: 700;
}
.wp-block-search__button:hover { filter: brightness(1.08); }

/* Lists from Archives, Categories, Latest posts and friends */
.cv-widget .wp-block-archives,
.cv-widget .wp-block-categories,
.cv-widget .wp-block-latest-posts,
.cv-widget .wp-block-latest-comments,
.cv-widget .wp-block-page-list { margin: 0; padding: 0; list-style: none; }
.cv-widget .wp-block-latest-comments__comment { margin-bottom: 10px; }
.cv-widget .wp-block-latest-posts__post-date { font-size: 11px; color: var(--cv-muted); }

/* Widgets shipped with the theme */
.cv-widget-posts { display: grid; gap: 12px; }
.cv-widget-posts__item { display: flex; gap: 10px; align-items: flex-start; padding: 0; border: 0; }
.cv-widget-posts__thumb { flex: 0 0 56px; border-radius: var(--cv-radius); overflow: hidden; }
.cv-widget-posts__thumb img { display: block; width: 56px; height: 56px; object-fit: cover; }
.cv-widget-posts__text { display: block; min-width: 0; }
.cv-widget-posts__text a { font-weight: 600; color: var(--cv-text); }
.cv-widget-posts__text a:hover { color: var(--cv-link); }
.cv-widget-posts__meta { display: block; margin-top: 2px; font-size: 11px; color: var(--cv-muted); }

.cv-about__image { display: block; width: 100%; border-radius: var(--cv-radius); margin-bottom: 10px; }
.cv-about__text { margin-bottom: 12px; }
.cv-about__button { width: 100%; }

.cv-social { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-social__link {
	font-size: 12px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--cv-surface-2);
	border: 1px solid var(--cv-border);
	color: var(--cv-text);
}
.cv-social__link:hover { text-decoration: none; filter: brightness(1.1); }

@media (min-width: 861px) {

	/* A little more air at the top so nothing runs into the header. */
	.cv-leftbar-fixed .cv-col--left {
		padding: 30px 14px 56px;
		overflow-x: hidden;
	}

	/* Everything but plain lists keeps an inner margin from the edge. */
	.cv-leftbar-fixed .cv-col--left .cv-widget > *:not(ul):not(ol) {
		padding-left: 12px;
		padding-right: 12px;
	}
	.cv-leftbar-fixed .cv-col--left .cv-widget h1:not(.cv-card__head),
	.cv-leftbar-fixed .cv-col--left .cv-widget h2:not(.cv-card__head),
	.cv-leftbar-fixed .cv-col--left .cv-widget h3:not(.cv-card__head),
	.cv-leftbar-fixed .cv-col--left .cv-widget h4:not(.cv-card__head) {
		padding: 6px 12px;
		margin-bottom: 4px;
	}
	.cv-leftbar-fixed .cv-col--left .cv-widget .wp-block-search__inside-wrapper { flex-wrap: wrap; }

	/* The footer clears the fixed sidebar instead of hiding behind it — with the
	   same measurement .cv-shell uses, not a similar-looking 20px, so the two
	   line up to the pixel rather than nearly. */
	.cv-leftbar-fixed .cv-footer,
	.cv-leftbar-fixed .cv-footer-widgets { padding-left: calc(var(--cv-left-width) + var(--cv-gap)); }

	/* The bar starts where the sidebar ends and runs to the right edge. */
	.cv-leftbar-fixed .cv-archive-bar { padding-left: calc(var(--cv-left-width) + 24px); }

	/* The banner begins right at the edge of the sidebar. The column gap in
	   between would otherwise show up as a dark strip next to the image. */
	.cv-leftbar-fixed .cvc-topic-banner { padding-left: var(--cv-left-width); }

	/* The logo takes exactly the width of the sidebar, so the search field
	   starts where the content does instead of sitting on the logo's heels. */
	.cv-leftbar-fixed .cv-brand {
		flex: 0 0 calc(var(--cv-left-width) - 8px);
		max-width: none;
	}
}

/* Bar under the header: title on the left, buttons on the right. */
.cv-archive-bar {
	background: var(--cv-surface);
	border-bottom: 1px solid var(--cv-border);
	padding: 14px 20px;
}
.cv-archive-bar__inner { min-width: 0; }

/* Name and buttons share one row. The name may shrink, the buttons may not,
   and on a narrow screen they wrap underneath instead of pushing the page. */
.cv-archive-bar__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin-top: 4px;
}
.cv-archive-bar__text { min-width: 0; }
.cv-archive-bar__title {
	font-size: 20px;
	margin: 0;
	min-width: 0;
	overflow-wrap: break-word;
}
.cv-archive-bar__description { margin-top: 6px; font-size: 13px; color: var(--cv-muted); }
.cv-archive-bar__description p:last-child { margin-bottom: 0; }
.cv-archive-bar .cv-breadcrumbs { margin-bottom: 4px; }
/* Everything a plugin drops in here stands in one row and stays there. */
.cv-archive-bar__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
}
.cv-archive-bar__actions > * { max-width: 100%; }
.cv-archive-bar__actions > *,
.cv-archive-bar__actions form { margin: 0; }
.cv-archive-bar__actions form { display: inline-flex; }
.cv-archive-bar__actions:empty { display: none; }

/* Archive header: title on the left, buttons on the right. */
.cv-page-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.cv-page-header__text { min-width: 0; }
.cv-page-header__text > *:last-child { margin-bottom: 0; }
.cv-page-header__actions:empty { display: none; }

/* =========================================================
   20. Content sits next to the sidebar instead of floating
   ========================================================= */
@media (min-width: 861px) {
	.cv-leftbar-fixed .cv-shell {
		justify-content: start;
		padding-left: calc(var(--cv-left-width) + var(--cv-gap));
		padding-right: var(--cv-gap);
	}
	.cv-leftbar-fixed .cv-shell--full,
	.cv-leftbar-fixed .cv-shell--no-left { justify-content: center; }
}

/* =========================================================
   21. Mobile menu: full width, slides down from the header
   ========================================================= */
@media (max-width: 860px) {

	/* Flat inside the panel, same as the desktop sidebar. */
	.cv-col--left .cv-card,
	.cv-col--left .cv-widget {
		background: none;
		border: 0;
		border-radius: 0;
		margin: 0;
		padding: 0;
		overflow: visible;
	}
	.cv-col--left .cv-nav { padding: 0 0 8px; }
	.cv-col--left .cv-widget { padding: 12px 0; }
	.cv-col--left .cv-widget + .cv-widget,
	.cv-col--left .cv-widgets { border-top: 1px solid var(--cv-border); }
	.cv-col--left .cv-card__body { padding: 0; }

	.cv-col--left .cv-nav a { padding: 11px 12px; font-size: 15px; }

	.cv-col--left .cv-card__head,
	.cv-col--left .cv-widget h1:not(.cv-card__head),
	.cv-col--left .cv-widget h2:not(.cv-card__head),
	.cv-col--left .cv-widget h3:not(.cv-card__head) {
		padding: 6px 12px;
		margin: 0 0 4px;
		border: 0;
		background: none;
		font-size: 11px;
	}
	.cv-col--left .cv-widget > *:not(ul):not(ol) {
		padding-left: 12px;
		padding-right: 12px;
	}
	.cv-col--left .cv-widget li { border-bottom: 0; padding: 0; }
	.cv-col--left .cv-widget li > a {
		display: block;
		padding: 10px 12px;
		border-radius: var(--cv-radius);
	}
	.cv-col--left .cv-widget li > a:hover { background: var(--cv-surface-2); text-decoration: none; }

	/* The overlay dims the page below the open panel. */
	.cv-overlay { z-index: 98; }

	/* Burger turns into a cross while the panel is open. */
	.cv-menu-toggle[aria-expanded="true"] { background: var(--cv-surface-2); color: var(--cv-text); }

	body.cv-menu-open { overflow: hidden; }
}

/* =========================================================
   22. Horizontal vote element
   ========================================================= */
.cv-votes--bar {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	background: var(--cv-surface-2);
	border: 1px solid var(--cv-border);
	border-radius: 999px;
	line-height: 1;
}
.cv-votes--bar .cv-votes__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--cv-muted);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.cv-votes--bar .cv-vote-up:hover { background: rgba(255, 69, 0, .12); color: var(--cv-accent); }
.cv-votes--bar .cv-vote-down:hover { background: rgba(0, 121, 211, .12); color: var(--cv-blue); }
.cv-votes--bar .cv-vote-up.is-active { color: var(--cv-accent); }
.cv-votes--bar .cv-vote-down.is-active { color: var(--cv-blue); }
.cv-votes--bar .cv-votes__score {
	min-width: 26px;
	padding: 0 4px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--cv-text);
}
.cv-votes--bar .cv-votes__comments {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 28px;
	padding: 0 12px 0 8px;
	margin-left: 2px;
	border-left: 1px solid var(--cv-border);
	font-size: 12px;
	font-weight: 700;
	color: var(--cv-muted);
}
.cv-votes--bar .cv-votes__comments:hover { color: var(--cv-text); text-decoration: none; }

.cv-votebar { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-votebar--top { margin: 0 0 16px; }
.cv-votebar--bottom {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--cv-border);
}

/* In the feed the bar sits in the action row, so the card has no grey column. */
.cv-actions .cv-votes--bar { margin-right: 4px; }
.cv-feed--compact .cv-actions .cv-votes--bar .cv-votes__comments { display: none; }

/* =========================================================
   25. One bar under the post: votes, numbers and the author
   ========================================================= */
.cv-postfoot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--cv-border);
}
.cv-postfoot__pill,
.cv-postfoot__author {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px;
	border: 1px solid var(--cv-border);
	border-radius: 999px;
	background: var(--cv-surface-2);
}
.cv-postfoot__pill .cv-votes--bar {
	border: 0;
	background: none;
	padding: 0;
}
.cv-postfoot__author {
	padding: 3px 14px 3px 3px;
	color: var(--cv-text);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.cv-postfoot__author:hover { border-color: var(--cv-muted); text-decoration: none; }
.cv-postfoot__author img { border-radius: 50%; display: block; }

@media (max-width: 480px) {
	.cv-postfoot { gap: 8px; }
	.cv-postfoot__author { font-size: 12px; }
}

/* =========================================================
   26. Comments inside the card, next post, tighter grids
   ========================================================= */
.cv-single .cv-comments {
	margin-top: 24px;
	padding: 20px 0 0;
	border-top: 1px solid var(--cv-border);
}
.cv-single .cv-comments__title { font-size: 15px; }

/* The next posts, in full, one card each. */
.cv-stream__item { margin-bottom: 16px; }
.cv-stream__end {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 8px 0 24px;
}
.cv-stream__spinner { font-size: 13px; color: var(--cv-muted); }
.cv-stream__label {
	display: inline-block;
	margin-bottom: 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--cv-surface-2);
	border: 1px solid var(--cv-border);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--cv-muted);
}
.cv-stream__item .cv-post__title { font-size: 22px; }
.cv-stream__item .cv-post__thumb { margin-bottom: 14px; }
.cv-stream__more {
	margin-left: auto;
	font-size: 12px;
	font-weight: 700;
	color: var(--cv-link);
}

@media (max-width: 480px) {
	.cv-stream__more { margin-left: 0; }
}

/* A masonry tile must not turn into a column of its own. */
.cv-mag--masonry .cv-mag__thumb img {
	max-height: 420px;
	object-fit: cover;
}

/* On a phone one tile per row, whatever the setting says. */
@media (max-width: 560px) {
	.cv-mag--grid,
	.cv-mag--masonry { --cv-mag-min: 100%; }
	.cv-mag--masonry { columns: auto 1; }
}

/* The bar on a phone: less padding, and a long button may break its label. */
@media (max-width: 620px) {
	.cv-archive-bar { padding: 12px 14px; }
	.cv-archive-bar__title { font-size: 18px; }
	.cv-archive-bar__row { gap: 8px; }
	.cv-archive-bar__actions .cvc-post-button,
	.cv-archive-bar__actions .cv-btn,
	.cv-archive-bar__actions .cvc-sub-button {
		font-size: 12px;
		padding: 7px 12px;
		white-space: normal;
		text-align: center;
	}
}

/* =========================================================
   27. A long post in the stream folds away
   ========================================================= */
.cv-fold { position: relative; }
.cv-fold__body {
	max-height: var(--cv-fold-height, 380px);
	overflow: hidden;
	/* The text fades out rather than being cut through a line. */
	-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.cv-fold.is-open .cv-fold__body {
	max-height: none;
	-webkit-mask-image: none;
	mask-image: none;
}

.cv-fold__button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding: 7px 18px;
	border: 1px solid var(--cv-border);
	border-radius: 999px;
	background: var(--cv-surface-2);
	color: var(--cv-text);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}
.cv-fold__button:after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .15s ease;
}
.cv-fold.is-open .cv-fold__button:after { transform: translateY(1px) rotate(225deg); }
.cv-fold__button:hover { border-color: var(--cv-muted); background: var(--cv-surface); }
.cv-fold__less { display: none; }
.cv-fold.is-open .cv-fold__more { display: none; }
.cv-fold.is-open .cv-fold__less { display: inline; }

/* Without JavaScript nothing is hidden: a fold that cannot open is a wall. */
.no-js .cv-fold__body { max-height: none; -webkit-mask-image: none; mask-image: none; }
.no-js .cv-fold__button { display: none; }

/* A line in the Customizer where a section belongs to the paid edition. */
.clevie-upgrade {
	margin: 0 0 8px;
	padding: 8px 10px;
	border-left: 3px solid #ff4500;
	background: rgba(255, 69, 0, .06);
	font-size: 12px;
}
.clevie-upgrade a { font-weight: 700; }

/* Anything a plugin puts under the topic bar gets the grid of the content
   below it, so it lines up whatever the page layout is. */
.cv-barextra {
	display: grid;
	grid-template-columns: var(--cv-left-width) minmax(0, var(--cv-content-width)) var(--cv-right-width);
	gap: var(--cv-gap);
	justify-content: center;
	padding: 20px 20px 0;
}
.cv-barextra > * { grid-column: 2 / 4; min-width: 0; }

/* Anything a plugin puts in here is positioned by this wrapper, so its own
   padding or grid would only push it out of line again. */
.cv-barextra .cvc-topicnotice { display: block; padding: 0; }

.cv-barextra.cv-shell--no-right { grid-template-columns: var(--cv-left-width) minmax(0, var(--cv-content-width)); }
.cv-barextra.cv-shell--no-left { grid-template-columns: minmax(0, var(--cv-content-width)) var(--cv-right-width); }
.cv-barextra.cv-shell--no-left > * { grid-column: 1 / 3; }
.cv-barextra.cv-shell--none,
.cv-barextra.cv-shell--full { grid-template-columns: minmax(0, var(--cv-content-width)); }
.cv-barextra.cv-shell--none > *,
.cv-barextra.cv-shell--full > * { grid-column: 1 / 2; }
.cv-barextra.cv-shell--full { grid-template-columns: minmax(0, var(--cv-wide-width)); }

@media (min-width: 861px) {
	/* With the sidebar fixed it is out of the flow, so the grid loses its first
	   column and gains a padding instead. */
	.cv-leftbar-fixed .cv-barextra {
		grid-template-columns: minmax(0, var(--cv-content-width)) var(--cv-right-width);
		padding-left: calc(var(--cv-left-width) + var(--cv-gap));
	}
	.cv-leftbar-fixed .cv-barextra > * { grid-column: 1 / 3; }
	.cv-leftbar-fixed .cv-barextra.cv-shell--no-right { grid-template-columns: minmax(0, var(--cv-content-width)); }
	.cv-leftbar-fixed .cv-barextra.cv-shell--no-right > * { grid-column: 1 / 2; }
	.cv-leftbar-fixed .cv-barextra.cv-shell--full,
	.cv-leftbar-fixed .cv-barextra.cv-shell--no-left { padding-left: 20px; }
}

@media (max-width: 1000px) {
	.cv-barextra { display: block; padding: 16px 20px 0; }
}

/* =========================================================
   28. Video in the stream: above the text, upright ones centred
   ========================================================= */
.cv-streammedia {
	margin: 0 0 14px;
	border-radius: var(--cv-radius);
	overflow: hidden;
	background: #000;
}
.cv-streammedia iframe,
.cv-streammedia video,
.cv-streammedia .cvc-player,
.cv-streammedia .cvc-facade {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	margin: 0;
}
.cv-streammedia .cvc-player iframe,
.cv-streammedia .cvc-player video { aspect-ratio: inherit; height: 100%; }
.cv-streammedia img { display: block; width: 100%; }

/* An upright clip is centred on a blurred copy of itself, so a tall video does
   not leave two black bars beside it. */
.cv-streammedia--upright {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-height: 70vh;
	background: var(--cv-surface-2);
}
.cv-streammedia--upright:before {
	content: "";
	position: absolute;
	inset: -10%;
	background-image: var(--cv-blur-src);
	background-size: cover;
	background-position: center;
	filter: blur(28px) brightness(.6);
	transform: scale(1.1);
	z-index: 0;
}
.cv-streammedia--upright > * {
	position: relative;
	z-index: 1;
	width: auto;
	max-width: 100%;
}
.cv-streammedia--upright iframe,
.cv-streammedia--upright video,
.cv-streammedia--upright .cvc-player,
.cv-streammedia--upright .cvc-facade {
	width: auto;
	height: min(70vh, 620px);
	max-width: 100%;
	aspect-ratio: 9 / 16;
}
.cv-streammedia--upright .cvc-player iframe,
.cv-streammedia--upright .cvc-player video { height: 100%; width: 100%; }

@media (max-width: 620px) {
	.cv-streammedia--upright iframe,
	.cv-streammedia--upright video { height: min(78vh, 560px); }
}


/* WordPress core class for a caption below a gallery. */
.gallery-caption {
	display: block;
	margin: 4px 0 12px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--cv-muted);
	text-align: center;
}

/* An image across the top, set under Appearance, Header. */
.cv-headerimage { line-height: 0; background: var(--cv-surface-2); }
.cv-headerimage img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; object-position: left center; }

/* Block styles the editor offers */
.wp-block-quote.is-style-clevie-plain { border: 0; padding-left: 0; font-style: normal; }
.wp-block-image.is-style-clevie-rounded img { border-radius: 12px; }
.wp-block-list.is-style-clevie-checks { list-style: none; padding-left: 0; }
.wp-block-list.is-style-clevie-checks li { position: relative; padding-left: 26px; }
.wp-block-list.is-style-clevie-checks li:before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	width: 10px;
	height: 5px;
	border-left: 2px solid var(--cv-accent);
	border-bottom: 2px solid var(--cv-accent);
	transform: rotate(-45deg);
}
.wp-block-group.is-style-clevie-card {
	padding: 20px 22px;
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius);
	background: var(--cv-surface-2);
}

/* ---------------------------------------------------------
 * Loading the next posts in place
 * --------------------------------------------------------- */

.cv-loadmore {
	margin: 24px 0 40px;
	text-align: center;
}

.cv-loadmore__button {
	padding: 10px 26px;
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius);
	background: var(--cv-surface);
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.cv-loadmore__button:hover:not(:disabled) {
	background: var(--cv-surface-2);
}

.cv-loadmore__button:disabled {
	opacity: 0.6;
	cursor: default;
}


/* ---------------------------------------------------------
 * The footer indent follows the shell as its columns go
 *
 * .cv-shell loses its right column at 1200px and both side
 * columns at 860px. The alignment below the content has to
 * follow, or it lines up with a layout that is no longer
 * there. Last in the file on purpose, so it wins over the
 * earlier breakpoints.
 * --------------------------------------------------------- */

@media (max-width: 1200px) {
	.cv-footer-widgets .cv-footer__inner { max-width: none; }
}

@media (max-width: 860px) {
	.cv-footer-widgets .cv-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		padding: 0 12px;
	}
}

/* ---------------------------------------------------------
 * The header actions, beside the search field
 *
 * The search field is a flex child that takes the free room,
 * which is what pushes the actions to the far edge. Letting
 * it size to its content instead brings them alongside, and
 * the empty room lands to the right of the pair.
 * --------------------------------------------------------- */

/* Right-aligned as before, but with the header's right edge brought in to where
   the right column ends. With the sidebar pinned the shell starts at the left
   and its columns have fixed widths, so on a wide screen it finishes well short
   of the window — and buttons sitting at the window edge line up with nothing.
   The leftover space becomes padding, which pulls them in to meet the sidebar
   and closer to the search field at the same time. */
@media (min-width: 861px) {
	.cv-actions-by-search.cv-leftbar-fixed .cv-topbar {
		padding-right: max(
			20px,
			calc(100% - var(--cv-left-width) - var(--cv-content-width) - var(--cv-right-width) - (2 * var(--cv-gap)))
		);
	}

	/* Without the pinned sidebar the shell is centred, so the same edge is
	   half the leftover space away. */
	.cv-actions-by-search:not(.cv-leftbar-fixed) .cv-topbar {
		padding-right: max(
			20px,
			calc((100% - var(--cv-left-width) - var(--cv-content-width) - var(--cv-right-width) - (2 * var(--cv-gap))) / 2)
		);
	}
}

/* ---------------------------------------------------------
 * The footer, with the left column pinned to the screen
 *
 * With cv-leftbar-fixed the shell is not centred at all: it
 * starts at the left with padding-left of the sidebar plus a
 * gap. The earlier attempt here matched the centred layout,
 * which is why it kept landing in the middle of the page.
 * --------------------------------------------------------- */

@media (min-width: 861px) {
	/* .cv-footer-widgets and .cv-footer already carry a padding-left that clears
	   the pinned sidebar. All that is left to do here is stop the inner block
	   from centring itself inside what remains — indenting again would push it
	   twice as far, which is exactly what kept happening. */
	.cv-leftbar-fixed .cv-footer-widgets .cv-footer__inner,
	.cv-leftbar-fixed .cv-footer .cv-footer__inner {
		max-width: none;
		margin: 0;
		padding-left: 0;
		padding-right: var(--cv-gap);
	}
}


/* Clevie Community profile navigation: keep tabs inside the profile container. */
@media (min-width: 621px) {
	.cvc-profile {
		width: 100%;
		max-width: 720px;
		min-width: 0;
		box-sizing: border-box;
	}
	.cvc-profile .cvc-tabs {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		grid-auto-flow: row;
		gap: 10px;
		max-width: 100%;
		min-width: 0;
		overflow: visible;
		box-sizing: border-box;
	}
	.cvc-profile .cvc-tabs__link {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		min-height: 52px;
		padding: 12px 10px;
		font-size: 13px;
		line-height: 1.3;
		box-sizing: border-box;
		white-space: normal;
		word-break: normal;
		overflow-wrap: anywhere;
		text-align: center;
	}
}