/*
Theme Name: Clevie Social
Theme URI: https://smartthemes.de/clevie-social
Author: Hendrik Schulenkorf
Author URI: https://smartthemes.de
Description: A theme for building a community site: a card feed, a left menu column with its own widget area, a right widget sidebar and a light and dark mode. Colors, layout and behaviour are set in the Customizer. Includes a magazine template with list, grid and masonry styles and a per-post page layout picker. Ships with a German translation.
Version: 1.6.1
Requires at least: 6.0
Tested up to: 6.6
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: clevie-social
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;
		max-height: 0;
		padding: 0 16px;
		overflow: hidden;
		transform: none !important;
		background: var(--cv-left-bg);
		border-right: 0;
		border-bottom: 0 solid var(--cv-border);
		transition: max-height .25s ease, padding .25s ease;
	}
	.cv-col--left.is-open {
		max-height: calc(100vh - var(--cv-header-height));
		max-height: calc(100dvh - var(--cv-header-height));
		padding: 16px 16px 28px;
		overflow-y: auto;
		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);
}
.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;
	max-width: 1248px;
	margin: 0 auto;
}

.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-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--cv-border);
}
.cv-share__label { font-size: 12px; font-weight: 700; color: var(--cv-muted); text-transform: uppercase; letter-spacing: .5px; }
.cv-share__link,
.cv-share__copy {
	font-size: 12px;
	font-weight: 700;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--cv-surface-2);
	border: 1px solid var(--cv-border);
	color: var(--cv-text);
}
.cv-share__link:hover,
.cv-share__copy:hover { border-color: var(--cv-blue); color: var(--cv-link); text-decoration: none; filter: none; }
.cv-share__copy.is-copied { border-color: var(--cv-accent); color: var(--cv-accent); }

.cv-author {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--cv-border);
}
.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); }
}
@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. */
	.cv-leftbar-fixed .cv-footer,
	.cv-leftbar-fixed .cv-footer-widgets { padding-left: calc(var(--cv-left-width) + 20px); }

	/* 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);
}