/*
Theme Name:        Venexia
Theme URI:         https://venexia.store/
Author:            Venexia
Author URI:        https://venexia.store/
Description:       A clean, mobile-first WooCommerce theme inspired by the Sakai (PrimeVue) design system. Flat cards on a tinted ground, a floating sidebar, an emerald accent and soft shadows. Built from scratch as a classic theme with full WooCommerce support, dark mode and a customizer accent color.
Version:           1.0.0
Requires at least: 6.0
Tested up to:      6.5
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:       venexia
Tags:              e-commerce, two-columns, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, full-width-template, theme-options
WC requires at least: 6.0
WC tested up to:   8.6
*/

/* ==========================================================================
   Venexia — Sakai-inspired WooCommerce theme
   Table of contents
   1.  Design tokens (CSS custom properties) — light + dark
   2.  Reset & base elements
   3.  Typography
   4.  Layout shell (topbar, sidebar, content, footer)
   5.  Buttons, forms & UI primitives
   6.  Cards & widgets
   7.  Navigation (menus, off-canvas drawer)
   8.  Posts & pages
   9.  Comments
   10. Utilities & helpers
   11. Accessibility
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   Values mirror the Sakai/Aura preset: emerald primary, slate surfaces (light)
   and zinc surfaces (dark). Base font size is 14px so 1rem = 14px.
   ========================================================================== */
:root {
	/* Primary — emerald */
	--vx-primary-50:  #ecfdf5;
	--vx-primary-100: #d1fae5;
	--vx-primary-200: #a7f3d0;
	--vx-primary-300: #6ee7b7;
	--vx-primary-400: #34d399;
	--vx-primary-500: #10b981;
	--vx-primary-600: #059669;
	--vx-primary-700: #047857;
	--vx-primary-800: #065f46;
	--vx-primary-900: #064e3b;

	/* Semantic primary (accent is overridable via the Customizer) */
	--vx-primary:          var(--vx-primary-500);
	--vx-primary-hover:    var(--vx-primary-600);
	--vx-primary-active:   var(--vx-primary-700);
	--vx-primary-contrast: #ffffff;

	/* Surfaces — slate (light theme) */
	--vx-surface-0:   #ffffff;
	--vx-surface-50:  #f8fafc;
	--vx-surface-100: #f1f5f9;
	--vx-surface-200: #e2e8f0;
	--vx-surface-300: #cbd5e1;
	--vx-surface-400: #94a3b8;
	--vx-surface-500: #64748b;
	--vx-surface-600: #475569;
	--vx-surface-700: #334155;
	--vx-surface-800: #1e293b;
	--vx-surface-900: #0f172a;

	/* Semantic surfaces */
	--vx-ground:   var(--vx-surface-100);
	--vx-card:     var(--vx-surface-0);
	--vx-overlay:  var(--vx-surface-0);
	--vx-hover:    var(--vx-surface-100);
	--vx-border:   var(--vx-surface-200);
	--vx-mask:     rgba(0, 0, 0, 0.4);

	/* Text */
	--vx-text:        var(--vx-surface-700);
	--vx-text-strong: var(--vx-surface-800);
	--vx-text-muted:  var(--vx-surface-500);

	/* Status colors */
	--vx-success: #22c55e;
	--vx-info:    #3b82f6;
	--vx-warning: #f59e0b;
	--vx-danger:  #ef4444;

	/* Radii */
	--vx-radius-sm:      4px;
	--vx-radius:         6px;   /* content border radius */
	--vx-radius-lg:      12px;

	/* Shadows */
	--vx-shadow-overlay:
		0px 3px 5px rgba(0, 0, 0, 0.02),
		0px 0px 2px rgba(0, 0, 0, 0.05),
		0px 1px 4px rgba(0, 0, 0, 0.08);
	--vx-shadow-popover:
		0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--vx-shadow-modal:
		0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 8px 10px -6px rgba(0, 0, 0, 0.1);
	--vx-shadow-field: 0 1px 2px 0 rgba(18, 18, 23, 0.05);
	--vx-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);

	/* Layout metrics */
	--vx-topbar-h:  4rem;   /* 56px */
	--vx-sidebar-w: 20rem;  /* 280px */
	--vx-gutter:    1rem;
	--vx-content-max: 1504px;

	/* Motion */
	--vx-transition: 0.2s;
	--vx-ease-drawer: cubic-bezier(0.05, 0.74, 0.2, 0.99);

	/* Typography */
	--vx-font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Dark theme — zinc surfaces, lighter emerald primary */
html.vx-dark {
	--vx-primary:          var(--vx-primary-400);
	--vx-primary-hover:    var(--vx-primary-300);
	--vx-primary-active:   var(--vx-primary-200);
	--vx-primary-contrast: #18181b;

	--vx-surface-0:   #18181b;
	--vx-surface-50:  #27272a;
	--vx-surface-100: #27272a;
	--vx-surface-200: #3f3f46;
	--vx-surface-300: #52525b;
	--vx-surface-400: #71717a;
	--vx-surface-500: #a1a1aa;
	--vx-surface-600: #d4d4d8;
	--vx-surface-700: #e4e4e7;
	--vx-surface-800: #f4f4f5;
	--vx-surface-900: #fafafa;

	--vx-ground:   #09090b;
	--vx-card:     #18181b;
	--vx-overlay:  #18181b;
	--vx-hover:    #27272a;
	--vx-border:   #3f3f46;
	--vx-mask:     rgba(0, 0, 0, 0.6);

	--vx-text:        #ffffff;
	--vx-text-strong: #ffffff;
	--vx-text-muted:  #a1a1aa;

	--vx-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
}

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

html {
	font-size: 14px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--vx-font);
	font-weight: 400;
	color: var(--vx-text);
	background-color: var(--vx-ground);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color var(--vx-transition) ease, color var(--vx-transition) ease;
}

img, svg, video { max-width: 100%; height: auto; }
img { vertical-align: middle; }

a {
	color: var(--vx-primary);
	text-decoration: none;
	transition: color var(--vx-transition) ease;
}
a:hover, a:focus { color: var(--vx-primary-hover); }

hr {
	border: 0;
	border-top: 1px solid var(--vx-border);
	margin: 2rem 0;
}

ul, ol { padding-left: 1.25rem; }

/* ==========================================================================
   3. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	margin: 1.5rem 0 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--vx-text-strong);
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p { margin: 0 0 1rem; }

small, .vx-text-sm { font-size: 0.875rem; }
.vx-text-muted { color: var(--vx-text-muted); }

blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--vx-primary);
	background: var(--vx-hover);
	border-radius: var(--vx-radius);
	color: var(--vx-text-muted);
}

code, kbd, pre {
	font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
	font-size: 0.9em;
}
code {
	background: var(--vx-hover);
	padding: 0.15em 0.4em;
	border-radius: var(--vx-radius-sm);
}
pre {
	background: var(--vx-surface-900);
	color: #f8fafc;
	padding: 1rem 1.25rem;
	border-radius: var(--vx-radius);
	overflow-x: auto;
}
html.vx-dark pre { background: #000; }

/* ==========================================================================
   4. Layout shell
   Mobile-first: single column, fixed topbar, off-canvas drawer.
   Desktop breakpoints widen and float the sidebar.
   ========================================================================== */

/* Topbar */
.vx-topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 997;
	height: var(--vx-topbar-h);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0 1rem;
	background: var(--vx-card);
	border-bottom: 1px solid var(--vx-border);
}

.vx-topbar__brand {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--vx-text-strong);
	white-space: nowrap;
}
.vx-topbar__brand:hover { color: var(--vx-text-strong); }
.vx-topbar__brand svg, .vx-topbar__brand img { display: block; }
.vx-topbar__brand .vx-logo-mark { color: var(--vx-primary); }
.vx-site-desc { display: none; }

.vx-topbar__actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: auto;
}

/* Circular icon action buttons */
.vx-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--vx-text);
	cursor: pointer;
	transition: background-color var(--vx-transition) ease, color var(--vx-transition) ease;
}
.vx-icon-btn:hover, .vx-icon-btn:focus-visible { background: var(--vx-hover); color: var(--vx-text-strong); }
.vx-icon-btn svg { width: 1.25rem; height: 1.25rem; }
.vx-icon-btn--primary { background: var(--vx-primary); color: var(--vx-primary-contrast); }
.vx-icon-btn--primary:hover { background: var(--vx-primary-hover); color: var(--vx-primary-contrast); }

/* Count badge on cart / icon buttons */
.vx-badge-count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 1.1rem;
	height: 1.1rem;
	padding: 0 0.3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: var(--vx-danger);
	border-radius: 999px;
}

/* App body row: drawer + content */
.vx-app {
	padding-top: var(--vx-topbar-h);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.vx-shell {
	display: block;
	width: 100%;
	max-width: var(--vx-content-max);
	margin: 0 auto;
	padding: 1rem;
	flex: 1 0 auto;
}

/* Off-canvas drawer base (mobile nav + cart). Always fixed unless promoted. */
.vx-drawer {
	position: fixed;
	top: var(--vx-topbar-h);
	bottom: 0;
	left: 0;
	z-index: 999;
	width: min(85vw, var(--vx-sidebar-w));
	padding: 1rem 1.25rem;
	background: var(--vx-overlay);
	box-shadow: var(--vx-shadow-overlay);
	overflow-y: auto;
	transform: translateX(-105%);
	transition: transform 0.4s var(--vx-ease-drawer);
	-webkit-overflow-scrolling: touch;
}
.vx-drawer.is-open { transform: translateX(0); }

/* Right-anchored drawer (cart). */
.vx-drawer--right {
	left: auto;
	right: 0;
	transform: translateX(105%);
}
.vx-drawer--right.is-open { transform: translateX(0); }

/* Drawer backdrop */
.vx-mask {
	position: fixed;
	inset: 0;
	z-index: 998;
	background: var(--vx-mask);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.vx-mask.is-open { opacity: 1; visibility: visible; }

/* Footer */
.vx-footer {
	flex-shrink: 0;
	margin-top: 2rem;
	padding: 2rem 1rem;
	background: var(--vx-card);
	border-top: 1px solid var(--vx-border);
	color: var(--vx-text-muted);
	font-size: 0.875rem;
}
.vx-footer__inner {
	max-width: var(--vx-content-max);
	margin: 0 auto;
}
.vx-footer__widgets {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}
.vx-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	justify-content: space-between;
	padding-top: 1.5rem;
	border-top: 1px solid var(--vx-border);
}
.vx-footer a { color: var(--vx-text-muted); }
.vx-footer a:hover { color: var(--vx-primary); }

/* Tablet and up: floating sidebar reserved space when present */
@media (min-width: 768px) {
	.vx-topbar { padding: 0 1.5rem; gap: 1rem; }
	.vx-shell { padding: 1.5rem; }
	.vx-site-desc {
		display: inline;
		font-size: 0.8rem;
		font-weight: 400;
		color: var(--vx-text-muted);
	}
	.vx-footer__widgets { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
	.vx-shell { padding: 1.5rem 2rem; }

	/* Two-column layout when a sidebar is rendered */
	.vx-has-sidebar .vx-shell {
		display: grid;
		grid-template-columns: var(--vx-sidebar-w) minmax(0, 1fr);
		gap: 1.5rem;
		align-items: start;
	}

	/* Nav sidebar becomes a floating, in-flow card (cart drawer keeps fixed). */
	.vx-has-sidebar .vx-sidebar {
		position: sticky;
		top: calc(var(--vx-topbar-h) + 1.5rem);
		bottom: auto;
		left: auto;
		z-index: 1;
		width: auto;
		max-height: calc(100vh - var(--vx-topbar-h) - 3rem);
		border-radius: var(--vx-radius);
		box-shadow: var(--vx-shadow-card);
		transform: none;
	}
	/* On desktop the in-flow sidebar has no need for the close button. */
	.vx-has-sidebar .vx-sidebar .vx-drawer-head .vx-icon-btn { display: none; }

	/* Hide drawer affordances on desktop when sidebar is in-flow */
	.vx-has-sidebar .vx-mask { display: none; }
	.vx-has-sidebar .vx-menu-toggle { display: none; }

	.vx-footer__widgets { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1960px) {
	.vx-shell { max-width: var(--vx-content-max); }
}

/* ==========================================================================
   5. Buttons, forms & UI primitives
   ========================================================================== */
.vx-btn,
button.vx-btn,
input[type="submit"].vx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--vx-primary-contrast);
	background: var(--vx-primary);
	border: 1px solid var(--vx-primary);
	border-radius: var(--vx-radius);
	cursor: pointer;
	text-align: center;
	transition: background-color var(--vx-transition) ease, border-color var(--vx-transition) ease, color var(--vx-transition) ease, box-shadow var(--vx-transition) ease;
}
.vx-btn:hover, .vx-btn:focus-visible {
	background: var(--vx-primary-hover);
	border-color: var(--vx-primary-hover);
	color: var(--vx-primary-contrast);
}
.vx-btn:active { background: var(--vx-primary-active); border-color: var(--vx-primary-active); }

.vx-btn--outlined {
	background: transparent;
	color: var(--vx-primary);
}
.vx-btn--outlined:hover { background: var(--vx-primary-50); color: var(--vx-primary-active); }

.vx-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--vx-text);
}
.vx-btn--ghost:hover { background: var(--vx-hover); color: var(--vx-text-strong); }

.vx-btn--sm { padding: 0.375rem 0.625rem; font-size: 0.875rem; }
.vx-btn--lg { padding: 0.625rem 0.875rem; font-size: 1.125rem; }
.vx-btn--block { display: flex; width: 100%; }

/* Inputs */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
	width: 100%;
	max-width: 100%;
	padding: 0.5rem 0.75rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--vx-text);
	background: var(--vx-card);
	border: 1px solid var(--vx-surface-300);
	border-radius: var(--vx-radius);
	box-shadow: var(--vx-shadow-field);
	transition: border-color var(--vx-transition) ease, box-shadow var(--vx-transition) ease;
	-webkit-appearance: none;
	appearance: none;
}
textarea { min-height: 8rem; resize: vertical; }
input:hover, textarea:hover, select:hover { border-color: var(--vx-surface-400); }
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--vx-primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--vx-primary) 25%, transparent);
}
::placeholder { color: var(--vx-text-muted); opacity: 1; }

label { font-weight: 600; font-size: 0.9rem; }

select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	padding-right: 2.25rem;
}

/* Topbar search */
.vx-search {
	position: relative;
	display: none;
	flex: 1;
	max-width: 22rem;
}
.vx-search input[type="search"] { padding-left: 2.25rem; }
.vx-search svg {
	position: absolute;
	left: 0.7rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1rem;
	height: 1rem;
	color: var(--vx-text-muted);
	pointer-events: none;
}
@media (min-width: 768px) { .vx-search { display: flex; } }

/* Tags / badges / chips */
.vx-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.15rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	border-radius: var(--vx-radius-sm);
	background: var(--vx-primary-50);
	color: var(--vx-primary-700);
}
html.vx-dark .vx-tag { background: color-mix(in srgb, var(--vx-primary) 16%, transparent); color: var(--vx-primary); }
.vx-tag--danger  { background: #fee2e2; color: #b91c1c; }
.vx-tag--info    { background: #dbeafe; color: #1d4ed8; }
.vx-tag--warning { background: #fef3c7; color: #b45309; }

/* Pagination */
.vx-pagination, .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	justify-content: center;
	margin: 2rem 0;
}
.vx-pagination .page-numbers, .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.5rem;
	border-radius: var(--vx-radius);
	background: var(--vx-card);
	color: var(--vx-text);
	box-shadow: var(--vx-shadow-card);
	font-weight: 600;
}
.vx-pagination .page-numbers.current, .nav-links .page-numbers.current {
	background: var(--vx-primary);
	color: var(--vx-primary-contrast);
}
.vx-pagination a.page-numbers:hover, .nav-links a.page-numbers:hover {
	background: var(--vx-hover);
	color: var(--vx-text-strong);
}

/* ==========================================================================
   6. Cards & widgets
   Flat cards on a tinted ground — the signature Sakai trait.
   ========================================================================== */
.vx-card {
	background: var(--vx-card);
	border-radius: var(--vx-radius);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--vx-shadow-card);
}
@media (min-width: 768px) { .vx-card { padding: 2rem; } }

.vx-card__title { margin-top: 0; }

/* Page header band */
.vx-page-header {
	margin-bottom: 1.5rem;
}
.vx-page-header h1 { margin: 0 0 0.25rem; }
.vx-page-header .vx-page-subtitle { color: var(--vx-text-muted); margin: 0; }

/* Widgets */
.vx-widget { margin-bottom: 1.5rem; }
.vx-widget:last-child { margin-bottom: 0; }
.vx-widget-title {
	margin: 0 0 0.75rem;
	font-size: 0.857rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--vx-text-muted);
}
.vx-widget ul { list-style: none; padding: 0; margin: 0; }
.vx-widget li { margin-bottom: 0.25rem; }
.vx-widget li a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: var(--vx-radius-sm);
	color: var(--vx-text);
}
.vx-widget li a:hover { background: var(--vx-hover); color: var(--vx-text-strong); }

/* Stat / icon chip (dashboard motif, reusable) */
.vx-stat-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--vx-radius);
}
.vx-stat-chip--blue   { background: #dbeafe; color: #3b82f6; }
.vx-stat-chip--orange { background: #ffedd5; color: #f97316; }
.vx-stat-chip--cyan   { background: #cffafe; color: #06b6d4; }
.vx-stat-chip--purple { background: #f3e8ff; color: #a855f7; }

/* ==========================================================================
   7. Navigation
   ========================================================================== */
.vx-menu { list-style: none; margin: 0; padding: 0; }
.vx-menu .menu-item { margin: 0; }
.vx-menu a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-radius: var(--vx-radius);
	color: var(--vx-text);
	font-weight: 500;
}
.vx-menu a:hover { background: var(--vx-hover); color: var(--vx-text-strong); }
.vx-menu .current-menu-item > a,
.vx-menu .current-menu-ancestor > a {
	color: var(--vx-primary);
	font-weight: 700;
}
.vx-menu .sub-menu {
	list-style: none;
	margin: 0.125rem 0 0.125rem 1rem;
	padding: 0;
	border-left: 1px solid var(--vx-border);
}
.vx-menu .sub-menu a { padding-left: 1rem; }

.vx-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.vx-drawer-head .vx-widget-title { margin: 0; }

/* Menu toggle (hamburger) visible on mobile */
.vx-menu-toggle { display: inline-flex; }

/* Breadcrumb */
.vx-breadcrumb, .woocommerce-breadcrumb {
	font-size: 0.85rem;
	color: var(--vx-text-muted);
	margin-bottom: 1rem;
}
.vx-breadcrumb a, .woocommerce-breadcrumb a { color: var(--vx-text-muted); }
.vx-breadcrumb a:hover, .woocommerce-breadcrumb a:hover { color: var(--vx-primary); }

/* ==========================================================================
   8. Posts & pages
   ========================================================================== */
.vx-posts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 768px) { .vx-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .vx-posts--three { grid-template-columns: repeat(3, 1fr); } }

.vx-post-card {
	display: flex;
	flex-direction: column;
	background: var(--vx-card);
	border-radius: var(--vx-radius);
	overflow: hidden;
	box-shadow: var(--vx-shadow-card);
	transition: box-shadow var(--vx-transition) ease, transform var(--vx-transition) ease;
}
.vx-post-card:hover { box-shadow: var(--vx-shadow-popover); transform: translateY(-2px); }
.vx-post-card__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--vx-hover); }
.vx-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vx-post-card__body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.vx-post-card__title { margin: 0; font-size: 1.25rem; }
.vx-post-card__meta { font-size: 0.8rem; color: var(--vx-text-muted); }
.vx-post-card__excerpt { color: var(--vx-text-muted); flex: 1; }

.vx-entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	font-size: 0.85rem;
	color: var(--vx-text-muted);
	margin-bottom: 1rem;
}
.vx-entry-meta a { color: var(--vx-text-muted); }
.vx-entry-meta a:hover { color: var(--vx-primary); }

.vx-entry-content { line-height: 1.7; }
.vx-entry-content > * { margin-bottom: 1rem; }
.vx-entry-content img { border-radius: var(--vx-radius); }
.vx-entry-content figure { margin: 1.5rem 0; }

.vx-post-thumb { margin-bottom: 1.5rem; }
.vx-post-thumb img { width: 100%; border-radius: var(--vx-radius); }

.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .gallery-caption { font-size: 0.8rem; color: var(--vx-text-muted); }

.vx-sticky-badge { /* sticky posts */ }
.sticky .vx-post-card { outline: 2px solid var(--vx-primary); }

/* Post navigation (single) */
.vx-post-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.vx-post-nav a { font-weight: 600; }

/* ==========================================================================
   9. Comments
   ========================================================================== */
.vx-comments { margin-top: 2rem; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list .comment { margin-bottom: 1.25rem; }
.comment-body {
	padding: 1rem 1.25rem;
	background: var(--vx-hover);
	border-radius: var(--vx-radius);
}
.comment-list .children { list-style: none; margin: 1rem 0 0 1.25rem; padding: 0; }
.comment-author { font-weight: 700; }
.comment-author .avatar { border-radius: 50%; margin-right: 0.5rem; vertical-align: middle; }
.comment-meta { font-size: 0.8rem; color: var(--vx-text-muted); }
.comment-reply-link { font-size: 0.85rem; font-weight: 600; }
.comment-form p { margin-bottom: 1rem; }

/* ==========================================================================
   10. Utilities
   ========================================================================== */
.vx-container { max-width: var(--vx-content-max); margin: 0 auto; }
.vx-stack > * + * { margin-top: 1rem; }
.vx-flex { display: flex; align-items: center; gap: 0.5rem; }
.vx-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vx-mt-0 { margin-top: 0; }
.vx-mb-0 { margin-bottom: 0; }
.vx-text-center { text-align: center; }
.vx-hidden { display: none !important; }

/* ==========================================================================
   11. Accessibility
   ========================================================================== */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: var(--vx-card);
	border-radius: var(--vx-radius);
	box-shadow: var(--vx-shadow-popover);
	clip: auto !important;
	clip-path: none;
	color: var(--vx-primary);
	display: block;
	font-weight: 700;
	height: auto; width: auto;
	left: 1rem; top: 1rem;
	padding: 0.75rem 1rem;
	z-index: 100000;
}

.vx-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
}
.vx-skip-link:focus {
	left: 1rem; top: 1rem;
	padding: 0.75rem 1rem;
	background: var(--vx-card);
	border-radius: var(--vx-radius);
	box-shadow: var(--vx-shadow-popover);
}

:focus-visible { outline: 2px solid var(--vx-primary); outline-offset: 2px; }

/* ==========================================================================
   12. Template helper classes
   ========================================================================== */
.vx-primary { min-width: 0; }
.vx-main { min-width: 0; }

.vx-section { margin-bottom: 2.5rem; }
.vx-section > h2 { margin-top: 0; }

.vx-hero { padding: 2.5rem 1.5rem; }
@media (min-width: 768px) { .vx-hero { padding: 3.5rem 2rem; } }

.vx-sidebar__widgets { margin-top: 1rem; }
.vx-sidebar nav + .vx-sidebar__widgets { border-top: 1px solid var(--vx-border); padding-top: 1rem; }

/* Inline icons in post meta align with text */
.vx-icon { vertical-align: -0.18em; }
.vx-entry-meta .vx-icon, .vx-post-card__meta .vx-icon { width: 1rem; height: 1rem; }
.vx-posted-on, .vx-byline, .vx-cats, .vx-tags, .vx-comments-link { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Theme toggle: show the right icon for the current scheme (JS refines this) */
.vx-theme-toggle .vx-icon--sun { display: none; }
html.vx-dark .vx-theme-toggle .vx-icon--sun { display: block; }
html.vx-dark .vx-theme-toggle .vx-icon--moon { display: none; }

/* Footer menu */
.vx-footer__nav .vx-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.vx-footer__menu a { font-weight: 500; }

.vx-page-links { margin: 1.5rem 0; font-weight: 600; }
.vx-page-links a { display: inline-block; padding: 0.2rem 0.55rem; margin: 0 0.15rem; border-radius: var(--vx-radius-sm); background: var(--vx-hover); }

/* Custom logo sizing in topbar */
.vx-topbar .custom-logo-link { display: inline-flex; align-items: center; }
.vx-topbar .custom-logo { max-height: 2.25rem; width: auto; }

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