/*
Theme Name: Vectra
Author: Vectra
Description: A clean, futuristic blog theme with a dark/light mode, a static text-and-links homepage, and a left or right sidebar that lists your published posts. Built with no jQuery, self-hosted fonts and accessible markup.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
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: vectra
Tags: blog, two-columns, left-sidebar, right-sidebar, custom-logo, custom-menu, custom-colors, featured-images, threaded-comments, translation-ready, wide-blocks, block-styles
*/

/* ==========================================================================
   1. Fonts (self-hosted, SIL OFL — see assets/fonts/LICENSE.txt)
   ========================================================================== */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

/* ==========================================================================
   2. Design tokens
   --vx-accent is overridden from the Customizer (inline style in <head>).
   ========================================================================== */
:root {
	--vx-accent: #22d3ee;
	--vx-accent-2: #a78bfa;

	--vx-font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--vx-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	--vx-radius: 14px;
	--vx-radius-sm: 8px;
	--vx-gutter: clamp(16px, 4vw, 32px);
	--vx-max: 1240px;
	--vx-sidebar: 330px;
	--vx-header-h: 68px;

	/* Dark (default) */
	--vx-bg: #070a12;
	--vx-bg-2: #0b0f1a;
	--vx-surface: rgba(17, 23, 38, 0.72);
	--vx-surface-solid: #111726;
	--vx-surface-2: #161d30;
	--vx-border: rgba(148, 163, 214, 0.14);
	--vx-border-strong: rgba(148, 163, 214, 0.28);
	--vx-text: #e7eaf3;
	--vx-text-2: #b7bfd3;
	--vx-muted: #8790a8;
	--vx-grid: rgba(120, 140, 200, 0.06);
	--vx-glow: rgba(34, 211, 238, 0.16);
	--vx-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 50px -24px rgba(0, 0, 0, 0.7);
	--vx-link: var(--vx-accent);
	--vx-on-accent: #04121a;
	--vx-code-bg: #0a0e18;
	color-scheme: dark;
}

:root[data-theme="light"] {
	--vx-bg: #f5f7fb;
	--vx-bg-2: #eef1f8;
	--vx-surface: rgba(255, 255, 255, 0.82);
	--vx-surface-solid: #ffffff;
	--vx-surface-2: #f1f4fa;
	--vx-border: rgba(30, 41, 75, 0.11);
	--vx-border-strong: rgba(30, 41, 75, 0.22);
	--vx-text: #0f1526;
	--vx-text-2: #33405c;
	--vx-muted: #5d6781;
	--vx-grid: rgba(30, 41, 90, 0.05);
	--vx-glow: rgba(34, 211, 238, 0.12);
	--vx-shadow: 0 1px 2px rgba(15, 21, 38, 0.04), 0 18px 40px -26px rgba(15, 21, 38, 0.25);
	--vx-link: #0e7490;
	--vx-link: color-mix(in srgb, var(--vx-accent) 52%, #0b1020);
	--vx-code-bg: #0f1526;
	color-scheme: light;
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--vx-header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	position: relative;
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--vx-bg);
	color: var(--vx-text);
	font-family: var(--vx-font-sans);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Grid + glow backdrop. A fixed pseudo-element is smoother than
   background-attachment: fixed, which mobile browsers ignore or repaint slowly. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(900px 500px at 85% -10%, var(--vx-glow), transparent 60%),
		radial-gradient(700px 420px at -10% 10%, rgba(167, 139, 250, 0.10), transparent 60%),
		linear-gradient(var(--vx-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--vx-grid) 1px, transparent 1px);
	background-size: auto, auto, 44px 44px, 44px 44px;
}

img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }
img { border-style: none; }

h1, h2, h3, h4, h5, h6 {
	margin: 1.6em 0 0.6em;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--vx-text);
}
h1 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }
h5, h6 { font-size: 1rem; }

p, ul, ol, dl, blockquote, pre, table, figure { margin: 0 0 1.4em; }

a {
	color: var(--vx-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover { text-decoration-color: currentColor; }

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

hr {
	border: 0;
	height: 1px;
	margin: 2.5em 0;
	background: linear-gradient(90deg, transparent, var(--vx-border-strong), transparent);
}

code, kbd, samp, pre { font-family: var(--vx-font-mono); font-size: 0.88em; }

:not(pre) > code {
	padding: 0.15em 0.4em;
	border: 1px solid var(--vx-border);
	border-radius: 6px;
	background: var(--vx-surface-2);
	color: var(--vx-text);
}

pre {
	position: relative;
	overflow-x: auto;
	padding: 1.2em 1.3em;
	border: 1px solid var(--vx-border);
	border-radius: var(--vx-radius-sm);
	background: var(--vx-code-bg);
	color: #d7e0f5;
	line-height: 1.6;
	tab-size: 4;
}

blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 0.6em 1.3em;
	border-left: 3px solid var(--vx-accent);
	background: linear-gradient(90deg, var(--vx-glow), transparent 70%);
	border-radius: 0 var(--vx-radius-sm) var(--vx-radius-sm) 0;
	color: var(--vx-text-2);
	font-size: 1.1em;
}
blockquote p:last-child { margin-bottom: 0; }
blockquote cite { display: block; margin-top: .6em; font-size: .85em; color: var(--vx-muted); font-style: normal; }

table { width: 100%; border-collapse: collapse; font-size: .95em; }
th, td { padding: .65em .8em; border-bottom: 1px solid var(--vx-border); text-align: left; vertical-align: top; }
th { font-family: var(--vx-font-mono); font-size: .8em; text-transform: uppercase; letter-spacing: .06em; color: var(--vx-muted); font-weight: 500; }

ul, ol { padding-left: 1.4em; }
li { margin-bottom: .35em; }
li > ul, li > ol { margin: .35em 0 0; }
ul li::marker { color: var(--vx-accent); }

::selection { background: var(--vx-accent); color: var(--vx-on-accent); }

/* Forms */
input, textarea, select, button { font: inherit; color: inherit; }

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], textarea, select {
	width: 100%;
	padding: .7em .9em;
	border: 1px solid var(--vx-border-strong);
	border-radius: var(--vx-radius-sm);
	background: var(--vx-surface-solid);
	color: var(--vx-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--vx-accent);
	box-shadow: 0 0 0 3px var(--vx-glow);
}
textarea { min-height: 140px; resize: vertical; }

button, .button, input[type="submit"], input[type="button"], input[type="reset"],
.wp-block-button__link, .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .7em 1.25em;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--vx-accent);
	color: var(--vx-on-accent);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
button:hover, .button:hover, input[type="submit"]:hover, .wp-block-button__link:hover, .wp-element-button:hover {
	filter: brightness(1.08);
	box-shadow: 0 8px 26px -10px var(--vx-accent);
	text-decoration: none;
}
button:active, input[type="submit"]:active { transform: translateY(1px); }
.is-style-outline > .wp-block-button__link, .wp-block-button__link.is-style-outline {
	background: transparent;
	border-color: var(--vx-accent);
	color: var(--vx-link);
}

/* ==========================================================================
   4. Accessibility helpers
   ========================================================================== */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: var(--vx-surface-solid);
	border-radius: var(--vx-radius-sm);
	box-shadow: 0 0 0 2px var(--vx-accent);
	clip: auto !important;
	clip-path: none;
	color: var(--vx-text);
	display: block;
	font-size: .95rem;
	font-weight: 600;
	height: auto;
	left: 12px;
	padding: 14px 22px;
	text-decoration: none;
	top: 12px;
	width: auto;
	z-index: 100000;
}
.skip-link:focus { position: fixed !important; }

/* ==========================================================================
   5. Layout shell
   ========================================================================== */
.vx-container {
	width: 100%;
	max-width: var(--vx-max);
	margin-inline: auto;
	padding-inline: var(--vx-gutter);
}

.site-main-wrap { flex: 1 0 auto; padding-block: clamp(28px, 5vw, 56px); }

.site-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
}
.site-content { min-width: 0; }

@media (min-width: 1000px) {
	.layout-sidebar-right .site-layout { grid-template-columns: minmax(0, 1fr) var(--vx-sidebar); }
	.layout-sidebar-left .site-layout { grid-template-columns: var(--vx-sidebar) minmax(0, 1fr); }
	.layout-sidebar-left .site-sidebar { order: -1; }
}
.layout-sidebar-none .site-layout { max-width: 860px; margin-inline: auto; }

/* Panel: the glassy card used everywhere */
.vx-panel {
	position: relative;
	border: 1px solid var(--vx-border);
	border-radius: var(--vx-radius);
	background: var(--vx-surface);
	box-shadow: var(--vx-shadow);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Small monospace label, e.g. "// latest posts" */
.vx-label {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin: 0;
	font-family: var(--vx-font-mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vx-muted);
}
.vx-label::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--vx-accent);
	box-shadow: 0 0 10px var(--vx-accent);
	flex: none;
}

/* ==========================================================================
   6. Header
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--vx-border);
	background: color-mix(in srgb, var(--vx-bg) 78%, transparent);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

.site-header::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--vx-accent), var(--vx-accent-2), transparent);
	opacity: .55;
	pointer-events: none;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: var(--vx-header-h);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	margin-right: auto;
}
.site-branding .custom-logo-link { display: inline-flex; flex: none; }
.site-branding .custom-logo { max-height: 40px; width: auto; }

.site-title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.site-title a {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	color: var(--vx-text);
	text-decoration: none;
}
.site-title__mark {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--vx-accent), var(--vx-accent-2));
	color: #050912;
	font-family: var(--vx-font-mono);
	font-size: .8rem;
	font-weight: 500;
	box-shadow: 0 6px 20px -8px var(--vx-accent);
}
.site-description {
	margin: 0;
	font-family: var(--vx-font-mono);
	font-size: .72rem;
	color: var(--vx-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (max-width: 720px) { .site-description { display: none; } }

/* Navigation */
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-navigation li { margin: 0; position: relative; }
.main-navigation a {
	display: block;
	padding: .5em .85em;
	border-radius: 999px;
	color: var(--vx-text-2);
	font-size: .95rem;
	font-weight: 500;
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a {
	color: var(--vx-text);
	background: var(--vx-surface-2);
}
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a { box-shadow: inset 0 0 0 1px var(--vx-border-strong); }

.menu-toggle,
.theme-toggle {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	flex: none;
	border: 1px solid var(--vx-border-strong);
	border-radius: 12px;
	background: var(--vx-surface);
	color: var(--vx-text);
}
.menu-toggle:hover, .theme-toggle:hover {
	filter: none;
	box-shadow: none;
	border-color: var(--vx-accent);
	color: var(--vx-accent);
}
.menu-toggle svg, .theme-toggle svg { width: 20px; height: 20px; display: block; }

.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
.menu-toggle[aria-expanded="true"] .icon-menu { display: none; }

/* Desktop nav */
@media (min-width: 900px) {
	.menu-toggle { display: none; }
	.main-navigation > div > ul,
	.main-navigation > ul { display: flex; align-items: center; gap: 4px; }

	.main-navigation ul ul {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		z-index: 60;
		min-width: 220px;
		padding: 6px;
		border: 1px solid var(--vx-border);
		border-radius: 12px;
		background: var(--vx-surface-solid);
		box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .15s ease, transform .15s ease, visibility .15s;
	}
	/* Invisible bridge so the dropdown doesn't close while the pointer travels to it */
	.main-navigation ul ul::before {
		content: "";
		position: absolute;
		left: 0; right: 0; top: -10px;
		height: 10px;
	}
	.main-navigation ul ul ul { top: -6px; left: calc(100% + 6px); }
	.main-navigation ul ul ul::before { top: 0; left: -10px; right: auto; width: 10px; height: 100%; }
	.main-navigation ul ul a { border-radius: 8px; }
	.main-navigation li:hover > ul,
	.main-navigation li:focus-within > ul {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.main-navigation .menu-item-has-children > a::after,
	.main-navigation .page_item_has_children > a::after {
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		margin-left: .5em;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-3px) rotate(45deg);
		opacity: .7;
	}
	.main-navigation ul ul .menu-item-has-children > a::after,
	.main-navigation ul ul .page_item_has_children > a::after { transform: translateY(-1px) rotate(-45deg); }
}

/* Mobile nav */
@media (max-width: 899.98px) {
	.main-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		max-height: calc(100vh - var(--vx-header-h));
		overflow-y: auto;
		padding: 12px var(--vx-gutter) 20px;
		border-bottom: 1px solid var(--vx-border);
		background: var(--vx-bg-2);
		box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
	}
	.main-navigation.is-open { display: block; }
	.main-navigation a { padding: .75em 1em; border-radius: 10px; }
	.main-navigation ul ul { padding-left: 1em; border-left: 1px solid var(--vx-border); margin-left: 1em; }
	.no-js .main-navigation { position: static; display: block; padding: 0; border: 0; box-shadow: none; background: none; }
	.no-js .menu-toggle { display: none; }
	.no-js .site-header__inner { flex-wrap: wrap; }
}

/* Reading progress (single posts) */
.vx-progress {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	width: 100%;
	transform-origin: 0 50%;
	transform: scaleX(0);
	background: linear-gradient(90deg, var(--vx-accent), var(--vx-accent-2));
	box-shadow: 0 0 12px var(--vx-accent);
	z-index: 2;
	pointer-events: none;
}

/* ==========================================================================
   7. Homepage (static front page)
   ========================================================================== */
.vx-hero {
	padding: clamp(28px, 5vw, 56px);
	overflow: hidden;
	margin-bottom: clamp(24px, 4vw, 40px);
}
.vx-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--vx-accent) 70%, transparent), transparent 40%, transparent 60%, color-mix(in srgb, var(--vx-accent-2) 60%, transparent));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.vx-hero__title {
	margin: .45em 0 .35em;
	max-width: 18ch;
	background: linear-gradient(120deg, var(--vx-text) 30%, var(--vx-accent) 75%, var(--vx-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--vx-text);
}
.vx-hero__lead {
	margin: 0;
	max-width: 62ch;
	font-size: 1.15rem;
	color: var(--vx-text-2);
}
.vx-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}
.vx-chip {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .35em .8em;
	border: 1px solid var(--vx-border-strong);
	border-radius: 999px;
	font-family: var(--vx-font-mono);
	font-size: .75rem;
	color: var(--vx-text-2);
	text-decoration: none;
	background: var(--vx-surface-2);
	line-height: 1.4;
}
a.vx-chip:hover { border-color: var(--vx-accent); color: var(--vx-link); }

.vx-front-content { padding: clamp(24px, 4vw, 44px); }

/* Quick links (menu location "Homepage links") */
.vx-links { margin-bottom: clamp(24px, 4vw, 40px); }
.vx-links__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.vx-links__list,
.vx-front-content ul.is-style-vectra-link-grid,
.entry-content ul.is-style-vectra-link-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: 12px;
	list-style: none;
	margin: 0 0 1.4em;
	padding: 0;
}
.vx-links__list li,
ul.is-style-vectra-link-grid li { margin: 0; }
.vx-links__list a,
ul.is-style-vectra-link-grid li > a {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 16px 44px 16px 18px;
	border: 1px solid var(--vx-border);
	border-radius: 12px;
	background: var(--vx-surface);
	color: var(--vx-text);
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.vx-links__list a::after,
ul.is-style-vectra-link-grid li > a::after {
	content: "↗";
	position: absolute;
	top: 14px;
	right: 16px;
	font-family: var(--vx-font-mono);
	color: var(--vx-muted);
	transition: color .15s ease, transform .15s ease;
}
.vx-links__list a:hover,
ul.is-style-vectra-link-grid li > a:hover {
	border-color: color-mix(in srgb, var(--vx-accent) 60%, transparent);
	box-shadow: 0 14px 34px -22px var(--vx-accent);
	transform: translateY(-2px);
}
.vx-links__list a:hover::after,
ul.is-style-vectra-link-grid li > a:hover::after { color: var(--vx-accent); transform: translate(2px, -2px); }
.vx-links__desc {
	font-weight: 400;
	font-size: .85rem;
	color: var(--vx-muted);
	line-height: 1.5;
}
ul.is-style-vectra-link-grid li::marker { content: none; }

/* ==========================================================================
   8. Posts (index / archive / single)
   ========================================================================== */
.page-header {
	margin-bottom: clamp(20px, 3vw, 32px);
}
.page-title {
	margin: .35em 0 .2em;
	font-size: clamp(1.8rem, 3.6vw, 2.5rem);
}
.archive-description { color: var(--vx-text-2); max-width: 65ch; }
.archive-description p:last-child { margin-bottom: 0; }

.vx-post-list { display: grid; gap: 18px; }

.post-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	transition: border-color .2s ease, transform .2s ease;
}
.post-card:hover { border-color: var(--vx-border-strong); }
.post-card.post-card--thumb { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
	.post-card.post-card--thumb { grid-template-columns: 220px minmax(0, 1fr); }
}
.post-card__thumb {
	display: block;
	position: relative;
	min-height: 180px;
	background: var(--vx-surface-2);
	overflow: hidden;
}
.post-card__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.post-card:hover .post-card__thumb img { transform: scale(1.04); }
.post-card__body { padding: clamp(20px, 3vw, 28px); min-width: 0; }
.post-card__title {
	margin: .5em 0 .45em;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	line-height: 1.3;
}
.post-card__title a { color: var(--vx-text); text-decoration: none; }
.post-card__title a:hover { color: var(--vx-link); }
.post-card__excerpt { color: var(--vx-text-2); font-size: 1rem; }
.post-card__excerpt p { margin: 0; }
.post-card__more {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin-top: 14px;
	font-family: var(--vx-font-mono);
	font-size: .8rem;
	text-decoration: none;
	color: var(--vx-link);
}
.post-card__more span { transition: transform .15s ease; }
.post-card__more:hover span { transform: translateX(3px); }

.sticky .post-card__body { box-shadow: inset 3px 0 0 var(--vx-accent); }

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	font-family: var(--vx-font-mono);
	font-size: .75rem;
	color: var(--vx-muted);
	letter-spacing: .02em;
}
.entry-meta a { color: inherit; text-decoration: none; }
.entry-meta a:hover { color: var(--vx-link); }
.entry-meta > span { display: inline-flex; align-items: center; gap: .4em; }
.entry-meta svg { width: 13px; height: 13px; opacity: .8; flex: none; }
.entry-meta .cat-badge {
	padding: .15em .6em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--vx-accent) 14%, transparent);
	color: var(--vx-link);
	border: 1px solid color-mix(in srgb, var(--vx-accent) 30%, transparent);
}

/* Single article */
.vx-article { padding: clamp(22px, 4.5vw, 52px); }
.entry-header { margin-bottom: 1.6em; }
.entry-title { margin: .5em 0 .5em; }
.post-thumbnail-wrap {
	margin: 0 0 2em;
	border-radius: var(--vx-radius-sm);
	overflow: hidden;
	border: 1px solid var(--vx-border);
}
.post-thumbnail-wrap img { display: block; width: 100%; }

.entry-content > *:first-child { margin-top: 0; }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content { color: var(--vx-text-2); }
.entry-content strong, .entry-content b { color: var(--vx-text); }
.entry-content h2, .entry-content h3, .entry-content h4 { scroll-margin-top: calc(var(--vx-header-h) + 20px); }
.entry-content h2::before {
	content: "#";
	margin-right: .35em;
	font-family: var(--vx-font-mono);
	font-weight: 400;
	color: var(--vx-accent);
	opacity: .7;
}

.page-links {
	clear: both;
	margin-top: 2em;
	font-family: var(--vx-font-mono);
	font-size: .85rem;
}
.page-links a, .page-links > span:not(.page-links-title) { display: inline-block; margin: 0 .2em; padding: .2em .6em; border: 1px solid var(--vx-border-strong); border-radius: 6px; }

.entry-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2.4em;
	padding-top: 1.6em;
	border-top: 1px solid var(--vx-border);
}
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list a::before { content: "#"; color: var(--vx-accent); }

/* Post navigation */
.post-navigation, .posts-navigation { margin-top: 24px; }
.post-navigation .nav-links {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}
@media (min-width: 640px) { .post-navigation .nav-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.post-navigation .nav-next { grid-column: -2; text-align: right; }
@media (max-width: 639.98px) { .post-navigation .nav-next { grid-column: auto; } }
.post-navigation a {
	display: block;
	height: 100%;
	padding: 16px 20px;
	border: 1px solid var(--vx-border);
	border-radius: 12px;
	background: var(--vx-surface);
	text-decoration: none;
	transition: border-color .15s ease;
}
.post-navigation a:hover { border-color: var(--vx-accent); }
.post-navigation .meta-nav {
	display: block;
	font-family: var(--vx-font-mono);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--vx-muted);
}
.post-navigation .post-title { display: block; margin-top: 4px; font-weight: 600; color: var(--vx-text); }

/* Pagination */
.pagination { margin-top: 28px; }
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}
.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--vx-border);
	border-radius: 10px;
	background: var(--vx-surface);
	color: var(--vx-text-2);
	font-family: var(--vx-font-mono);
	font-size: .85rem;
	text-decoration: none;
}
.pagination a.page-numbers:hover { border-color: var(--vx-accent); color: var(--vx-link); }
.pagination .page-numbers.current {
	border-color: var(--vx-accent);
	background: color-mix(in srgb, var(--vx-accent) 16%, transparent);
	color: var(--vx-text);
}
.pagination .page-numbers.dots { border-color: transparent; background: none; }

/* No results / 404 */
.vx-empty { padding: clamp(28px, 5vw, 56px); text-align: center; }
.vx-empty__code {
	font-family: var(--vx-font-mono);
	font-size: clamp(4rem, 14vw, 8rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.05em;
	background: linear-gradient(135deg, var(--vx-accent), var(--vx-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--vx-accent);
}
.vx-empty .vx-label { justify-content: center; }
.vx-empty__actions { margin: 24px 0 0; }
.vx-empty .search-form { max-width: 440px; margin: 24px auto 0; }

/* ==========================================================================
   9. Search form
   ========================================================================== */
.search-form {
	position: relative;
	display: flex;
	align-items: center;
}
.search-form label { flex: 1; margin: 0; }
.search-form .search-field {
	padding-right: 48px;
	border-radius: 12px;
	-webkit-appearance: none;
	appearance: none;
}
.search-form .search-field::-webkit-search-decoration { -webkit-appearance: none; }
.search-form .search-submit {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 9px;
}
.search-form .search-submit:active { transform: translateY(-50%); }
.search-form .search-submit svg { width: 17px; height: 17px; }

/* ==========================================================================
   10. Sidebar
   ========================================================================== */
.site-sidebar {
	display: grid;
	gap: 18px;
	min-width: 0;
}
/* "is-sticky" is added by theme.js only when the whole sidebar fits in the
   viewport, so nothing is ever cut off or needs its own scrollbar. */
@media (min-width: 1000px) {
	.site-sidebar.is-sticky {
		position: sticky;
		top: calc(var(--vx-header-h) + 24px);
	}
	.admin-bar .site-sidebar.is-sticky { top: calc(var(--vx-header-h) + 56px); }
}

.widget { padding: 20px; margin: 0; font-size: .95rem; }
.widget-title,
.widget .wp-block-heading {
	margin: 0 0 14px;
	font-family: var(--vx-font-mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vx-muted);
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { margin: 0; padding: .45em 0; border-bottom: 1px dashed var(--vx-border); }
.widget li:last-child { border-bottom: 0; }
.widget a { color: var(--vx-text-2); text-decoration: none; }
.widget a:hover { color: var(--vx-link); }
.widget p:last-child { margin-bottom: 0; }
.widget select { margin-top: 2px; }

/* The built-in post list */
.vx-postlist__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}
.vx-postlist__head .widget-title { margin: 0; }
.vx-postlist__count {
	font-family: var(--vx-font-mono);
	font-size: .7rem;
	padding: .2em .6em;
	border-radius: 999px;
	border: 1px solid var(--vx-border-strong);
	color: var(--vx-text-2);
	white-space: nowrap;
}
.vx-postlist ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: vxpost;
}
.vx-postlist li {
	margin: 0;
	padding: 0;
	border: 0;
	counter-increment: vxpost;
}
.vx-postlist__link {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 2px 12px;
	padding: 11px 10px 11px 8px;
	margin: 0 -8px;
	border-radius: 10px;
	text-decoration: none;
	transition: background-color .15s ease;
}
.vx-postlist__link::before {
	content: counter(vxpost, decimal-leading-zero);
	grid-row: span 2;
	padding-top: 3px;
	font-family: var(--vx-font-mono);
	font-size: .72rem;
	color: var(--vx-muted);
	transition: color .15s ease;
}
.vx-postlist__link:hover { background: var(--vx-surface-2); }
.vx-postlist__link:hover::before { color: var(--vx-accent); }
.vx-postlist__title {
	color: var(--vx-text);
	font-weight: 500;
	font-size: .95rem;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.widget .vx-postlist__link:hover .vx-postlist__title { color: var(--vx-link); }
.vx-postlist__meta {
	font-family: var(--vx-font-mono);
	font-size: .7rem;
	color: var(--vx-muted);
}
.vx-postlist li + li .vx-postlist__link { border-top: 1px solid var(--vx-border); border-top-left-radius: 0; border-top-right-radius: 0; }
.vx-postlist li + li .vx-postlist__link:hover { border-top-color: transparent; border-radius: 10px; }
.vx-postlist li + li .vx-postlist__link:hover + * { border-top-color: transparent; }
.vx-postlist__link[aria-current="page"] {
	background: color-mix(in srgb, var(--vx-accent) 12%, transparent);
	border-top-color: transparent;
	border-radius: 10px;
}
.vx-postlist__link[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	bottom: 12px;
	width: 2px;
	border-radius: 2px;
	background: var(--vx-accent);
	box-shadow: 0 0 10px var(--vx-accent);
}
.vx-postlist__link[aria-current="page"]::before { color: var(--vx-accent); }
.vx-postlist__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 12px;
	padding: 10px 14px;
	border: 1px solid var(--vx-border);
	border-radius: 10px;
	font-family: var(--vx-font-mono);
	font-size: .78rem;
}
.widget a.vx-postlist__all { color: var(--vx-text-2); }
.widget a.vx-postlist__all:hover { border-color: var(--vx-accent); color: var(--vx-link); }
.vx-postlist__empty { margin: 0; color: var(--vx-muted); font-size: .9rem; }

/* Category chips */
.vx-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.widget .vx-cats a.vx-chip { color: var(--vx-text-2); }
.widget .vx-cats a.vx-chip:hover { color: var(--vx-link); }
.vx-chip__n { color: var(--vx-muted); }

/* Core widget / block tweaks inside sidebar */
.widget .wp-block-search__label { display: none; }
.widget .wp-block-search__inside-wrapper { gap: 6px; }
.widget .wp-block-search__button { margin: 0; padding: .6em 1em; border-radius: 10px; }
.widget .wp-block-latest-posts__post-date,
.widget .post-date { display: block; font-family: var(--vx-font-mono); font-size: .7rem; color: var(--vx-muted); }
.widget_calendar table, .wp-block-calendar table { font-size: .82rem; }
.wp-block-calendar th, .wp-block-calendar td { padding: .35em; text-align: center; }
.wp-block-calendar table th { background: transparent; }
.wp-block-calendar table caption { color: var(--vx-muted); font-family: var(--vx-font-mono); font-size: .8rem; }
.widget_tag_cloud a, .wp-block-tag-cloud a {
	display: inline-block;
	margin: 0 4px 6px 0;
	padding: .2em .65em;
	border: 1px solid var(--vx-border-strong);
	border-radius: 999px;
	font-size: .78rem !important;
}

/* ==========================================================================
   11. Comments
   ========================================================================== */
.comments-area { margin-top: 24px; padding: clamp(22px, 4vw, 40px); }
.comments-title, .comment-reply-title { margin-top: 0; font-size: 1.3rem; }
.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children { margin-left: clamp(12px, 4vw, 36px); padding-left: clamp(12px, 2vw, 18px); border-left: 1px solid var(--vx-border); }
.comment-body {
	margin-bottom: 16px;
	padding: 18px 20px;
	border: 1px solid var(--vx-border);
	border-radius: 12px;
	background: var(--vx-surface-2);
}
.comment-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-bottom: 10px; font-size: .9rem; }
.comment-author { display: flex; align-items: center; gap: 10px; }
.comment-author .avatar { border-radius: 50%; }
.comment-author .fn { font-style: normal; font-weight: 600; }
.comment-author .says { display: none; }
.comment-metadata { font-family: var(--vx-font-mono); font-size: .72rem; }
.comment-metadata a { color: var(--vx-muted); text-decoration: none; }
.comment-content { color: var(--vx-text-2); font-size: .98rem; }
.comment-content p:last-child { margin-bottom: 0; }
.reply { margin-top: 10px; font-family: var(--vx-font-mono); font-size: .78rem; }
.reply a { text-decoration: none; }
.bypostauthor > .comment-body { border-color: color-mix(in srgb, var(--vx-accent) 40%, transparent); }
.comment-awaiting-moderation { display: block; margin-top: 6px; color: var(--vx-muted); font-size: .85rem; }
.comment-form { display: grid; gap: 14px; }
.comment-form p { margin: 0; }
.comment-form label { display: block; margin-bottom: 6px; font-size: .88rem; color: var(--vx-text-2); }
.comment-form .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; }
.comment-form .comment-form-cookies-consent label { margin: 0; }
.comment-form-cookies-consent input { margin-top: .35em; }
.comment-notes, .logged-in-as { font-size: .88rem; color: var(--vx-muted); }
.no-comments { color: var(--vx-muted); }
#cancel-comment-reply-link { margin-left: .6em; font-size: .8rem; font-family: var(--vx-font-mono); }

/* ==========================================================================
   12. Footer
   ========================================================================== */
.site-footer {
	flex-shrink: 0;
	margin-top: auto;
	border-top: 1px solid var(--vx-border);
	background: color-mix(in srgb, var(--vx-bg-2) 80%, transparent);
}
.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	padding-block: 26px;
	font-family: var(--vx-font-mono);
	font-size: .78rem;
	color: var(--vx-muted);
}
.site-footer a { color: var(--vx-text-2); text-decoration: none; }
.site-footer a:hover { color: var(--vx-link); }
.footer-navigation ul { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }
.footer-navigation li { margin: 0; }
.footer-navigation ul ul { display: none; }
.vx-status { display: inline-flex; align-items: center; gap: .55em; }
.vx-status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 0 0 rgba(52, 211, 153, .6);
}
@media (prefers-reduced-motion: no-preference) {
	.vx-status::before { animation: vx-pulse 2.4s infinite; }
}
@keyframes vx-pulse {
	0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
	70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
	100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* Back to top */
.vx-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 40;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--vx-border-strong);
	border-radius: 12px;
	background: var(--vx-surface-solid);
	color: var(--vx-text);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
@media (max-width: 640px) {
	.site-footer__inner { padding-bottom: 84px; }
}
.vx-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.vx-top:hover { border-color: var(--vx-accent); color: var(--vx-accent); filter: none; }
.vx-top svg { width: 18px; height: 18px; }

/* ==========================================================================
   13. WordPress core classes & blocks
   ========================================================================== */
.alignleft { float: left; margin: .3em 1.5em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; clear: both; }
.alignnone { margin-bottom: 1.4em; }
@media (max-width: 600px) {
	.alignleft, .alignright { float: none; margin: 0 0 1.4em; }
}
.entry-content::after { content: ""; display: table; clear: both; }

.wp-caption { max-width: 100%; margin-bottom: 1.4em; }
.wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; }
.wp-caption-text, .gallery-caption, figcaption, .wp-element-caption {
	margin-top: .6em;
	font-family: var(--vx-font-mono);
	font-size: .75rem;
	color: var(--vx-muted);
	text-align: center;
}
.entry-content img, .wp-block-image img { border-radius: var(--vx-radius-sm); }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 1.4em; }
.gallery-item { margin: 0; }
.gallery-item img { display: block; width: 100%; border-radius: var(--vx-radius-sm); }

/* Wide / full alignment stay inside the content column (layout has a sidebar) */
.entry-content .alignwide { margin-left: 0; margin-right: 0; }
.entry-content .alignfull { margin-left: 0; margin-right: 0; width: auto; max-width: 100%; }

.wp-block-separator { border: 0; height: 1px; background: var(--vx-border-strong); opacity: 1; }
.wp-block-separator.is-style-dots { background: none; height: auto; }
.wp-block-code { padding: 1.2em 1.3em; border: 1px solid var(--vx-border); border-radius: var(--vx-radius-sm); background: var(--vx-code-bg); }
.wp-block-code code { color: #d7e0f5; background: none; border: 0; padding: 0; }
.wp-block-pullquote { border-top: 2px solid var(--vx-accent); border-bottom: 2px solid var(--vx-accent); padding: 2em 0; }
.wp-block-pullquote blockquote { border: 0; background: none; text-align: center; }
.wp-block-quote.is-style-large, .wp-block-quote.is-large { padding: .6em 1.3em; }
.wp-block-table table { border: 0; }
.wp-block-table td, .wp-block-table th { border: 0; border-bottom: 1px solid var(--vx-border); }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--vx-surface-2); }
.wp-block-table.is-style-stripes { border-bottom: 0; }
.wp-block-embed { margin-bottom: 1.4em; }
.wp-block-cover { border-radius: var(--vx-radius); overflow: hidden; }
.wp-block-group.has-background { border-radius: var(--vx-radius); padding: 1.5em; }
.wp-block-columns { gap: 1.5em; }
.wp-block-buttons { margin-bottom: 1.4em; }
.wp-block-details { padding: .8em 1em; border: 1px solid var(--vx-border); border-radius: var(--vx-radius-sm); }
.wp-block-details summary { cursor: pointer; font-weight: 600; color: var(--vx-text); }

/* Print */
@media print {
	.site-header, .site-sidebar, .site-footer, .vx-top, .comments-area, .post-navigation, .pagination { display: none !important; }
	body { background: #fff; color: #000; }
	.vx-panel { border: 0; box-shadow: none; background: none; }
}

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