/*
 * VirtualRun Theme - main stylesheet.
 * Plain CSS, no framework, no build step. Mobile-first: base rules
 * target small screens, larger breakpoints layer on with min-width
 * media queries. Design direction: deep navy + premium blue, white
 * cards on soft gray, small green for success states only, orange
 * reserved for high-energy CTA highlights.
 */

/* ==========================================================
   1. Brand variables
   ========================================================== */
:root {
	--vr-navy: #071B33;
	--vr-navy-2: #0B2545;
	--vr-blue: #1266F1;
	--vr-blue-dark: #0B4BC4;
	--vr-blue-soft: #EAF2FF;
	--vr-cyan: #28D4FF;
	--vr-orange: #FF8A1F;
	--vr-green: #13B981;
	--vr-red: #EF4444;
	--vr-text: #102033;
	--vr-muted: #667085;
	--vr-bg: #F5F8FC;
	--vr-white: #FFFFFF;
	--vr-border: #D9E3F0;

	--vr-radius: 14px;
	--vr-radius-sm: 8px;
	--vr-shadow: 0 1px 2px rgba(7, 27, 51, 0.06);
	--vr-shadow-lg: 0 16px 40px rgba(7, 27, 51, 0.14);
	--vr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

	/* v0.3.2 (UI/UX 2.0 Part 1): additional names matching the shared
	   design system's suggested scale exactly - kept as aliases
	   pointing at the same existing values above rather than
	   renaming --vr-radius/--vr-shadow/--vr-shadow-lg, which are
	   already used throughout this stylesheet - renaming those would
	   have broken every existing rule using them. New code (and the
	   plugin's own frontend.css, which defines this same set
	   independently since it must work even without this theme
	   active) can use either naming; both resolve to the same
	   values. */
	--vr-radius-md: var(--vr-radius);
	--vr-radius-lg: 24px;
	--vr-shadow-sm: var(--vr-shadow);
	--vr-shadow-md: var(--vr-shadow-lg);
}

/* ==========================================================
   UI/UX 2.0 shared design system (v0.3.2, Part 1)
   Mirrors virtualrun-core 0.6.33's .vr-ui-* classes exactly (same
   selectors, same values) so both codebases share one design
   vocabulary - available here for use in future theme templates,
   not yet applied to any existing markup this version (see the
   theme readme for what was deliberately deferred).
   ========================================================== */
.vr-ui-card {
	background: var(--vr-white);
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius-md);
	box-shadow: var(--vr-shadow-sm);
	padding: 20px;
}

.vr-ui-panel {
	background: var(--vr-bg);
	border-radius: var(--vr-radius-md);
	padding: 24px;
}

.vr-ui-section {
	padding: 40px 0;
}

.vr-ui-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.vr-ui-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	background: var(--vr-bg);
	color: var(--vr-text);
	white-space: nowrap;
}

.vr-ui-badge-success {
	background: rgba(19, 185, 129, 0.12);
	color: #0e8f64;
}

.vr-ui-badge-warning {
	background: rgba(255, 138, 31, 0.14);
	color: #b35e0f;
}

.vr-ui-badge-danger {
	background: rgba(239, 68, 68, 0.12);
	color: #b91c1c;
}

.vr-ui-badge-info {
	background: var(--vr-blue-soft);
	color: var(--vr-blue-dark);
}

.vr-ui-alert {
	border-radius: var(--vr-radius-sm);
	padding: 12px 16px;
	font-size: 13.5px;
	border: 1px solid var(--vr-border);
	background: var(--vr-bg);
	color: var(--vr-text);
}

.vr-ui-empty {
	text-align: center;
	padding: 48px 24px;
	border: 1px dashed var(--vr-border);
	border-radius: var(--vr-radius-md);
	background: var(--vr-bg);
}

.vr-ui-empty-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--vr-navy);
	margin: 0 0 6px;
}

.vr-ui-empty-description {
	font-size: 13.5px;
	color: var(--vr-muted);
	margin: 0 0 16px;
	max-width: 380px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================
   2. Base / reset
   ========================================================== */
html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--vr-font);
	color: var(--vr-text);
	background: var(--vr-bg);
	line-height: 1.6;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}

/* v0.3.7 (Part F): defensive safety net against horizontal page
   scroll, not a fix for one specific overflow source - deliberately
   scoped to .vr-site-main (everything below the header) rather than
   html/body, since .vr-site-main is a SIBLING of <header> in the DOM
   (see header.php), never an ancestor - this cannot affect the
   header's position:sticky behavior the way overflow-x on html/body
   could in some browsers (a documented interaction), while still
   guaranteeing no horizontal scroll from anything in the page body. */
.vr-site-main {
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--vr-font);
	color: var(--vr-navy);
	line-height: 1.2;
	font-weight: 700;
	margin: 0 0 0.5em;
}

/* v0.3.5 (Part A): the global heading color above would otherwise
   apply to the plugin's dashboard welcome <h1> too (dark navy on a
   dark navy-to-blue gradient background) - virtualrun-core 0.6.37
   already fixes this with its own !important rule, so this is
   redundant safety rather than the actual fix, but confirms the
   theme itself never works against it. */
.vr-dashboard-header h1,
.vr-dashboard-header .vr-dashboard-title {
	color: #ffffff !important;
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--vr-blue);
	text-decoration: none;
}

a:hover {
	color: var(--vr-blue-dark);
}

/*
 * v0.1.1 fix: the global "ul, ol { list-style: none; }" reset that
 * used to live here broke ordinary bullets/numbers inside blog posts
 * and pages. Lists are no longer reset globally - only the specific
 * navigation/card/meta lists below (which are meant to look like
 * plain rows, not bulleted content) have their markers removed.
 * Normal content lists get real, readable styling in section 16b.
 */
.vr-primary-menu,
.vr-mobile-menu-list,
.vr-footer-links,
.vr-footer-menu,
.vr-card-meta,
.vr-single-meta,
.vr-single-details-list,
.vr-social-links,
.vr-steps-grid,
.vr-institution-grid,
.vr-leaderboard-grid,
.vr-leaderboard-rows,
.vr-who-for-list,
.vr-internal-links-list,
.vr-faq-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font-family: inherit;
}

/* Focus states - accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--vr-cyan);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.vr-skip-link {
	position: absolute;
	top: -50px;
	left: 0;
	background: var(--vr-navy);
	color: var(--vr-white);
	padding: 10px 16px;
	z-index: 10000;
	transition: top 0.15s ease;
}

.vr-skip-link:focus {
	top: 0;
	position: fixed;
}

/* ==========================================================
   3. Layout helpers
   ========================================================== */
.vr-container {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

.vr-content-area {
	padding: 40px 20px 60px;
}

.alignwide {
	max-width: 1180px;
}

.alignfull {
	width: 100%;
	max-width: 100%;
}

/* ==========================================================
   4. Buttons
   ========================================================== */
.vr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--vr-radius-sm);
	font-weight: 600;
	font-size: 15px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
	white-space: nowrap;
}

.vr-btn:hover {
	transform: translateY(-1px);
}

.vr-btn-primary {
	background: var(--vr-blue);
	color: var(--vr-white) !important;
}

.vr-btn-primary:hover {
	background: var(--vr-blue-dark);
}

.vr-btn-outline {
	background: transparent;
	border-color: var(--vr-blue);
	color: var(--vr-blue) !important;
}

.vr-btn-outline:hover {
	background: var(--vr-blue-soft);
}

.vr-btn-outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--vr-white) !important;
}

.vr-btn-outline-light:hover {
	background: rgba(255, 255, 255, 0.12);
}

.vr-btn-ghost {
	background: transparent;
	border-color: transparent;
	color: var(--vr-navy) !important;
}

.vr-btn-ghost:hover {
	background: var(--vr-blue-soft);
}

.vr-btn-lg {
	padding: 15px 28px;
	font-size: 16px;
}

.vr-btn-sm {
	padding: 9px 16px;
	font-size: 13.5px;
}

/* ==========================================================
   5. Header
   ========================================================== */
.vr-site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--vr-white);
	border-bottom: 1px solid var(--vr-border);
}

.vr-header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	padding: 14px 20px;
}

.vr-branding {
	flex-shrink: 0;
}

.vr-header-actions {
	flex-shrink: 0;
}

/* v0.1.8: the plugin's account menu, when auto-injected into this
   theme's primary nav, lands as an extra item inside .vr-primary-menu
   (see class-vr-frontend-account-menu.php's maybe_auto_inject()) -
   give it room to wrap onto its own line rather than fight for space
   with the rest of the nav and the Find Events button, which is what
   caused the reported header overlap. */
.vr-primary-menu {
	flex-wrap: wrap;
}

.vr-site-title {
	font-weight: 800;
	font-size: 20px;
	color: var(--vr-navy) !important;
}

.vr-custom-logo img {
	display: block;
	max-height: 44px;
	width: auto;
}

.vr-primary-nav {
	display: none;
}

.vr-primary-menu {
	display: flex;
	gap: 26px;
}

.vr-primary-menu a {
	color: var(--vr-text);
	font-weight: 600;
	font-size: 14.5px;
}

.vr-primary-menu a:hover {
	color: var(--vr-blue);
}

.vr-header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
	overflow: visible;
}

.vr-header-actions .vr-btn-primary {
	display: none;
}

/* v0.3.7 (Part A): the account menu shortcode output previously had
   no responsive hiding at all, so on mobile it rendered inline in
   this already-cramped header bar alongside the hamburger button -
   up to 4 items (Dashboard/WordPress Admin/Notifications/Logout)
   wrapping messily and crowding the UI, exactly the reported bug.
   Hidden here to match how Find Events is already hidden below
   900px; assets/js/main.js relocates the same DOM node (not a
   second copy - the shortcode has a hard render-once guard, so a
   second server-side render call would return nothing) into the
   mobile offcanvas panel instead, restoring it back here on resize
   to desktop. */
.vr-header-actions .vr-account-menu {
	display: none;
}

.vr-mobile-menu-toggle {
	background: transparent;
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius-sm);
	width: 42px;
	height: 42px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.vr-hamburger-bar {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--vr-navy);
	border-radius: 2px;
}

.vr-mobile-menu {
	border-top: 1px solid var(--vr-border);
	background: var(--vr-white);
	padding: 16px 20px 24px;
}

.vr-mobile-menu[hidden] {
	display: none;
}

.vr-mobile-menu-list li {
	border-bottom: 1px solid var(--vr-border);
}

.vr-mobile-menu-list a {
	display: block;
	padding: 14px 4px;
	font-weight: 600;
	color: var(--vr-text);
}

.vr-mobile-cta {
	margin-top: 16px;
	width: 100%;
}

/* v0.3.7 (Part A): once assets/js/main.js relocates .vr-account-menu
   into the mobile panel below 900px, it sits alongside
   .vr-mobile-menu-list - give it a matching full-width stacked row
   treatment rather than its normal compact inline-pill desktop
   look, and put a small gap above it so it doesn't feel glued to
   the WordPress nav menu items or the Find Events CTA already in
   this panel. */
.vr-mobile-menu .vr-account-menu {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--vr-border);
}

.vr-mobile-menu .vr-account-menu .vr-account-menu-item {
	border-bottom: 1px solid var(--vr-border);
}

.vr-mobile-menu .vr-account-menu .vr-account-link {
	display: block;
	padding: 14px 4px;
	font-weight: 600;
}

@media (min-width: 900px) {
	.vr-primary-nav {
		display: block;
	}

	.vr-header-actions .vr-btn-primary {
		display: inline-flex;
	}

	.vr-header-actions .vr-account-menu {
		display: inline-flex;
	}

	.vr-mobile-menu-toggle {
		display: none;
	}

	.vr-mobile-menu {
		display: none !important;
	}
}

/* ==========================================================
   6. Hero
   ========================================================== */
.vr-hero {
	background: linear-gradient(160deg, var(--vr-navy) 0%, var(--vr-navy-2) 45%, var(--vr-blue-dark) 80%, var(--vr-blue) 100%);
	color: var(--vr-white);
	padding: 64px 0 44px;
	overflow: hidden;
}

.vr-hero-inner {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.vr-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--vr-cyan);
	margin-bottom: 14px;
}

.vr-hero-headline {
	color: var(--vr-white);
	font-size: 36px;
	line-height: 1.14;
	letter-spacing: -0.01em;
	margin-bottom: 18px;
}

.vr-hero-subtext {
	color: rgba(255, 255, 255, 0.84);
	font-size: 17px;
	line-height: 1.65;
	max-width: 560px;
	margin-bottom: 30px;
}

.vr-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Right-side visual: either a real Customizer hero image, or the
   gradient + floating-card fallback. Both share this fixed-ratio
   frame so layout shift stays low either way. */
.vr-hero-visual {
	position: relative;
	min-height: 280px;
}

.vr-hero-image-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--vr-radius);
	overflow: hidden;
	box-shadow: var(--vr-shadow-lg);
}

.vr-hero-image-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7, 27, 51, 0) 55%, rgba(7, 27, 51, 0.55) 100%);
	pointer-events: none;
}

.vr-hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vr-hero-visual-fallback {
	position: relative;
	min-height: 280px;
}

.vr-hero-visual-core {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 60% 40%, rgba(40, 212, 255, 0.28), transparent 60%);
	border-radius: 50%;
	filter: blur(10px);
}

.vr-float-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--vr-white);
	color: var(--vr-text);
	border-radius: var(--vr-radius-sm);
	padding: 12px 16px;
	box-shadow: var(--vr-shadow-lg);
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 14px;
	max-width: 240px;
}

.vr-float-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--vr-blue-soft);
	color: var(--vr-blue);
	font-size: 12px;
	flex-shrink: 0;
}

.vr-icon-success {
	background: rgba(19, 185, 129, 0.15);
	color: var(--vr-green);
}

.vr-float-card-2 {
	margin-left: 30px;
}

.vr-float-card-3 {
	margin-left: 10px;
}

.vr-float-card-4 {
	margin-left: 40px;
}

/* Search / discovery bar */
.vr-search-bar {
	background: var(--vr-white);
	border-radius: var(--vr-radius);
	box-shadow: var(--vr-shadow-lg);
	padding: 18px;
	margin-top: 14px;
	color: var(--vr-text);
}

.vr-search-bar-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vr-search-field input,
.vr-search-field select {
	width: 100%;
	min-width: 0;
	height: 42px;
	box-sizing: border-box;
	padding: 0 14px;
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius-sm);
	font-size: 14.5px;
	font-family: inherit;
	background: var(--vr-white);
	color: var(--vr-text);
}

.vr-search-submit {
	width: 100%;
}

@media (min-width: 900px) {
	.vr-hero-inner {
		flex-direction: row;
		align-items: center;
	}

	.vr-hero-copy {
		flex: 1 1 52%;
	}

	.vr-hero-visual {
		flex: 1 1 48%;
	}

	.vr-hero-headline {
		font-size: 50px;
	}

	.vr-hero-subtext {
		font-size: 18px;
	}

	.vr-search-bar-form {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.vr-search-field-wide {
		flex: 1 1 220px;
		min-width: 180px;
	}

	.vr-search-field {
		flex: 1 1 150px;
		min-width: 130px;
	}

	.vr-search-submit {
		width: auto;
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

/* ==========================================================
   7. Sections (generic)
   ========================================================== */
.vr-section {
	padding: 56px 0;
}

.vr-section:nth-of-type(even) {
	background: var(--vr-white);
}

.vr-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
}

.vr-section-header-center {
	flex-direction: column;
	text-align: center;
}

/* v0.4.1 (Part A): eyebrow label - a small uppercase tag above
   section titles for stronger visual hierarchy, matching the
   premium-event-platform direction requested. */
.vr-section-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vr-blue);
	background: var(--vr-blue-soft);
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 10px;
}

.vr-section-title {
	font-size: 28px;
	font-weight: 800;
	margin-bottom: 0;
}

.vr-section-subtitle,
.vr-section-description {
	color: var(--vr-muted);
	font-size: 15px;
	max-width: 560px;
}

.vr-section-link {
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
}

.vr-section-cta-row {
	text-align: center;
	margin-top: 32px;
}

.vr-plugin-required-notice {
	background: var(--vr-blue-soft);
	color: var(--vr-blue-dark);
	border-radius: var(--vr-radius-sm);
	padding: 16px;
	font-weight: 600;
	text-align: center;
}

/* ==========================================================
   8. Cards (shared by shortcodes' own CSS pattern and theme
   CPT archive/single templates - same visual language)
   ========================================================== */
.vr-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.vr-card {
	background: var(--vr-white);
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius-md, var(--vr-radius));
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--vr-shadow);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.vr-card:hover {
	box-shadow: var(--vr-shadow-lg);
	transform: translateY(-3px);
	border-color: var(--vr-blue);
}

.vr-card-thumb,
.vr-card-image-wrap {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--vr-navy);
}

.vr-card-thumb img,
.vr-card-thumb .vr-img,
.vr-card-image-wrap .vr-card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* v0.3.5 (Part D): subtle zoom-on-hover, the card's own
	   transform:translateY(-2px) lift (below) is a separate,
	   independent effect on the OUTER .vr-card - this only scales
	   the image itself, clipped by the parent's overflow:hidden so
	   it never spills past the rounded corners. */
	transition: transform 0.3s ease;
}

.vr-card:hover .vr-card-image-wrap .vr-card-image,
.vr-card:hover .vr-card-thumb img {
	transform: scale(1.05);
}

.vr-card-thumb-placeholder,
.vr-thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--vr-navy), var(--vr-blue-dark) 55%, var(--vr-cyan) 130%);
}

/* v0.1.6: defensive, explicit rules matching virtualrun-core v0.6.4's
   new .vr-card-has-image / .vr-card-no-image wrapper classes - a
   card with a real image must never show the gradient, and a card
   without one must never show a broken/empty image area. */
.vr-card-has-image {
	background: transparent;
}

.vr-card-has-image img,
.vr-card-image-wrap img,
.vr-event-card img,
.vr-challenge-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vr-card-no-image {
	background: linear-gradient(135deg, var(--vr-navy), var(--vr-blue-dark) 55%, var(--vr-cyan) 130%);
}

.vr-card-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1;
}

.vr-card-title {
	font-size: 18.5px;
	line-height: 1.3;
	margin-bottom: 0;
}

.vr-card-title a {
	color: var(--vr-navy);
}

.vr-card-excerpt {
	color: var(--vr-muted);
	font-size: 14px;
	line-height: 1.55;
	margin-bottom: 0;
	/* v0.4.1: line-clamp so descriptions of varying length don't
	   throw off card alignment in a grid row - a safe CSS-only
	   truncation, not a change to the underlying excerpt content. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vr-card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 2px;
}

.vr-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin: 4px 0;
}

.vr-badge {
	display: inline-block;
	background: var(--vr-blue);
	color: var(--vr-white);
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 11px;
	border-radius: 999px;
	border: 1px solid transparent;
	line-height: 1.5;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(18, 102, 241, 0.28);
}

.vr-badge-outline {
	background: transparent;
	color: var(--vr-blue-dark);
	border: 1px solid var(--vr-blue);
}

/* ==========================================================
   8b. Badge color system (new in v0.1.4)
   Soft-background, dark-readable-text badges so event/challenge/
   institution/partner cards read as visually distinct instead of
   uniformly blue - the overall brand stays blue/premium; these
   supporting colors only ever appear inside small badges. Resolved
   automatically per label via vr_theme_get_badge_class() /
   vr_theme_render_badge() in inc/template-tags.php. Solid variants
   use a soft tint background with a matching-family border, per the
   "soft background, darker readable text, matching border" design
   rule - never a harsh/neon fill.
   ========================================================== */
.vr-badge-blue {
	background: #E6EFFD;
	color: #0B4BC4;
	border-color: #B7CDF6;
}

.vr-badge-orange {
	background: #FFEEDD;
	color: #B85C00;
	border-color: #FFD1A3;
}

.vr-badge-green {
	background: #E1F6EC;
	color: #0E7A4E;
	border-color: #A9E6C6;
}

.vr-badge-cyan {
	background: #E1F8FE;
	color: #0E7490;
	border-color: #A6E9F7;
}

.vr-badge-purple {
	background: #F1E9FD;
	color: #6B21A8;
	border-color: #DCC4F7;
}

.vr-badge-gold {
	background: #FEF6DC;
	color: #8A6300;
	border-color: #F6E29B;
}

.vr-badge-indigo {
	background: #E7E7FD;
	color: #3730A3;
	border-color: #C6C6F7;
}

.vr-badge-teal {
	background: #DDF6F2;
	color: #0F766E;
	border-color: #A6E7DD;
}

.vr-badge-slate {
	background: #EEF1F5;
	color: #475066;
	border-color: #D9E0EA;
}

/* Outline variants - transparent background, colored border/text
   only. Used for secondary/format-style badges (see
   vr_theme_get_badge_class()) so they read as lighter-weight than a
   solid type badge sitting next to them. */
.vr-badge-outline-blue {
	background: transparent;
	color: var(--vr-blue-dark);
	border-color: var(--vr-blue);
}

.vr-badge-outline-orange {
	background: transparent;
	color: #B85C00;
	border-color: var(--vr-orange);
}

.vr-badge-outline-purple {
	background: transparent;
	color: #6B21A8;
	border-color: #B98CE8;
}

.vr-badge-outline-slate {
	background: transparent;
	color: #475066;
	border-color: #AEB8C8;
}

.vr-meta-item {
	font-size: 12.5px;
	color: var(--vr-muted);
}

.vr-card-date-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--vr-blue-soft);
	color: var(--vr-blue-dark);
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
}

.vr-card-date-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--vr-blue);
	flex-shrink: 0;
}

.vr-card-actions {
	margin-top: auto;
}

.vr-card-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-align: center;
	background: var(--vr-blue);
	color: var(--vr-white) !important;
	font-weight: 700;
	font-size: 13.5px;
	height: 42px;
	padding: 0 16px;
	border-radius: var(--vr-radius-sm);
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.vr-card-cta:hover {
	background: var(--vr-blue-dark);
}

.vr-card-cta:active {
	transform: translateY(1px);
}

.vr-card-cta-external {
	background: var(--vr-orange);
}

.vr-card-cta-external:hover {
	background: #e67a12;
}

/* 40/60 image-to-content split on wider screens, per the v0.1.2
   image-led card direction - stacked (image on top) on mobile so
   nothing feels cramped on small screens. */
@media (min-width: 700px) {
	.vr-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.vr-card-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.vr-card {
		flex-direction: column;
	}
}

/* Empty-state message (rendered by virtualrun-core's own shortcode
   output when a listing has no items) - styled here to look like a
   premium empty card rather than a plain paragraph. The text itself
   belongs to the plugin, not this theme. */
.vr-empty {
	background: var(--vr-white);
	border: 1px dashed var(--vr-border);
	border-radius: var(--vr-radius);
	padding: 40px 20px;
	text-align: center;
	color: var(--vr-muted);
	font-size: 15px;
}

/* ==========================================================
   9. How it works
   ========================================================== */
.vr-steps-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.vr-step-card {
	background: var(--vr-white);
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius);
	padding: 26px 22px;
	text-align: center;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.vr-step-card:hover {
	box-shadow: var(--vr-shadow-lg);
	transform: translateY(-2px);
}

.vr-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--vr-blue-soft);
	color: var(--vr-blue-dark);
	font-weight: 800;
	font-size: 17px;
	margin-bottom: 14px;
}

.vr-step-title {
	font-size: 16.5px;
	margin-bottom: 8px;
}

.vr-step-text {
	color: var(--vr-muted);
	font-size: 14px;
	line-height: 1.55;
	margin-bottom: 0;
}

@media (min-width: 700px) {
	.vr-steps-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.vr-steps-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================
   10. Institutions
   ========================================================== */
.vr-institution-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.vr-institution-card {
	background: var(--vr-white);
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius);
	overflow: hidden;
	box-shadow: var(--vr-shadow);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.vr-institution-card:hover {
	box-shadow: var(--vr-shadow-lg);
	transform: translateY(-2px);
}

.vr-institution-card-image {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.vr-gradient-1 {
	background: linear-gradient(135deg, var(--vr-navy), var(--vr-blue));
}

.vr-gradient-2 {
	background: linear-gradient(135deg, var(--vr-navy-2), var(--vr-cyan));
}

.vr-gradient-3 {
	background: linear-gradient(135deg, var(--vr-blue-dark), var(--vr-navy));
}

.vr-gradient-4 {
	background: linear-gradient(135deg, var(--vr-blue), var(--vr-navy-2));
}

.vr-institution-card-body {
	padding: 20px;
}

.vr-institution-card-title {
	color: var(--vr-navy);
	font-size: 17px;
	margin-bottom: 8px;
}

.vr-institution-card-text {
	color: var(--vr-muted);
	font-size: 13.5px;
	line-height: 1.55;
	margin-bottom: 0;
}

@media (min-width: 700px) {
	.vr-institution-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.vr-institution-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================
   11. Leaderboard preview
   ========================================================== */
.vr-leaderboard-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.vr-leaderboard-card {
	background: var(--vr-white);
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius);
	padding: 22px;
}

.vr-leaderboard-card-title {
	font-size: 16px;
	margin-bottom: 12px;
}

.vr-leaderboard-rows li {
	padding: 8px 0;
	border-bottom: 1px solid var(--vr-border);
	font-size: 13.5px;
	color: var(--vr-text);
}

.vr-leaderboard-rows li:last-child {
	border-bottom: none;
}

@media (min-width: 900px) {
	.vr-leaderboard-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================
   12. Achievement share preview
   ========================================================== */
.vr-achievement-inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
	text-align: center;
}

.vr-achievement-visual {
	width: 100%;
	max-width: 380px;
	display: flex;
	justify-content: center;
}

.vr-share-card {
	background: var(--vr-white);
	border-radius: var(--vr-radius);
	box-shadow: var(--vr-shadow-lg);
	padding: 34px 28px;
	max-width: 340px;
	width: 100%;
	border-top: 5px solid var(--vr-orange);
	position: relative;
}

.vr-share-card-medal {
	font-size: 40px;
	line-height: 1;
	margin-bottom: 14px;
}

.vr-share-card-badge {
	display: inline-block;
	background: rgba(19, 185, 129, 0.12);
	color: var(--vr-green);
	font-weight: 700;
	font-size: 12px;
	padding: 5px 14px;
	border-radius: 999px;
	margin-bottom: 16px;
}

.vr-share-card-headline {
	font-weight: 800;
	font-size: 19px;
	line-height: 1.35;
	color: var(--vr-navy);
	margin-bottom: 12px;
}

.vr-share-card-cta {
	color: var(--vr-blue);
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 0;
}

@media (min-width: 900px) {
	.vr-achievement-inner {
		flex-direction: row;
		text-align: left;
		justify-content: space-between;
		gap: 48px;
	}

	.vr-achievement-copy {
		max-width: 460px;
	}

	.vr-achievement-visual {
		justify-content: flex-end;
	}
}

/* ==========================================================
   12b. AI/SEO-friendly content sections (What is VirtualRun,
   Who It Is For, FAQ preview, internal links row) - v0.1.1, extended
   in v0.1.2 with a two-column layout for "What is VirtualRun?" and
   the new trust/benefit strip.
   Plain crawlable text sections, not just visual cards.
   ========================================================== */
.vr-what-is-inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
}

.vr-what-is-copy {
	text-align: center;
}

.vr-section-what-is .vr-section-text {
	max-width: 760px;
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--vr-text);
	margin-left: auto;
	margin-right: auto;
}

.vr-what-is-visual {
	width: 100%;
	max-width: 320px;
}

.vr-what-is-visual-card {
	background: linear-gradient(150deg, var(--vr-navy), var(--vr-blue-dark) 70%, var(--vr-cyan) 140%);
	border-radius: var(--vr-radius);
	padding: 32px 24px;
	min-height: 220px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 12px;
	box-shadow: var(--vr-shadow-lg);
}

.vr-what-is-visual-badge {
	align-self: flex-start;
	background: rgba(255, 255, 255, 0.16);
	color: var(--vr-white);
	font-weight: 700;
	font-size: 12px;
	padding: 5px 14px;
	border-radius: 999px;
}

.vr-what-is-visual-line {
	display: block;
	height: 10px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.22);
	width: 100%;
}

.vr-line-short {
	width: 60%;
}

.vr-who-for-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.vr-who-for-list li {
	background: var(--vr-white);
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius-sm);
	padding: 16px 16px;
	font-weight: 600;
	font-size: 14px;
	text-align: center;
	color: var(--vr-navy);
	transition: box-shadow 0.15s ease;
}

.vr-who-for-list li:hover {
	box-shadow: var(--vr-shadow);
}

.vr-faq-list {
	max-width: 780px;
	margin: 0 auto;
}

.vr-faq-item {
	background: var(--vr-white);
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius-sm);
	padding: 4px 18px;
	margin-bottom: 12px;
}

.vr-faq-item summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 15px;
	padding: 16px 0;
	color: var(--vr-navy);
	list-style: none;
}

.vr-faq-item summary::-webkit-details-marker {
	display: none;
}

.vr-faq-item summary::after {
	content: "+";
	float: right;
	font-weight: 800;
	color: var(--vr-blue);
}

.vr-faq-item[open] summary::after {
	content: "-";
}

.vr-faq-answer {
	color: var(--vr-muted);
	font-size: 14.5px;
	line-height: 1.6;
	padding-bottom: 18px;
	margin: 0;
}

.vr-internal-links-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 18px;
}

.vr-internal-links-list a {
	display: inline-block;
	background: var(--vr-blue-soft);
	color: var(--vr-blue-dark) !important;
	font-weight: 600;
	font-size: 13.5px;
	padding: 8px 16px;
	border-radius: 999px;
}

.vr-internal-links-list a:hover {
	background: var(--vr-blue);
	color: var(--vr-white) !important;
}

@media (min-width: 700px) {
	.vr-who-for-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 900px) {
	.vr-what-is-inner {
		flex-direction: row;
		align-items: center;
		text-align: left;
	}

	.vr-what-is-copy {
		text-align: left;
		flex: 1 1 60%;
	}

	.vr-section-what-is .vr-section-text {
		margin-left: 0;
	}

	.vr-what-is-visual {
		flex: 1 1 35%;
	}
}

/* Archive/CPT summary paragraph */
.vr-archive-summary {
	color: var(--vr-muted);
	font-size: 15px;
	max-width: 640px;
	margin-top: 10px;
}

.vr-single-thumb-logo {
	max-width: 220px;
}

/* Trust / benefit strip (new in v0.1.2) - a small premium row of
   plain-text benefits directly under the hero. */
.vr-trust-strip {
	background: var(--vr-white);
	border-bottom: 1px solid var(--vr-border);
	padding: 20px 0;
}

.vr-trust-strip-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	text-align: center;
}

.vr-trust-strip-list li {
	font-weight: 600;
	font-size: 13.5px;
	color: var(--vr-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.vr-trust-strip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--vr-blue-soft);
	color: var(--vr-blue);
	font-size: 12px;
	flex-shrink: 0;
}

@media (min-width: 700px) {
	.vr-trust-strip-list {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================
   13. Final CTA
   ========================================================== */
.vr-section-final-cta {
	background: linear-gradient(135deg, var(--vr-blue-dark), var(--vr-blue));
}

.vr-final-cta-inner {
	text-align: center;
}

.vr-final-cta-title {
	color: var(--vr-white);
	font-size: 26px;
	margin-bottom: 22px;
}

.vr-final-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* ==========================================================
   14. Footer
   ========================================================== */
.vr-site-footer {
	background: var(--vr-navy);
	color: rgba(255, 255, 255, 0.75);
	padding: 48px 0 24px;
}

.vr-footer-brand .vr-site-title {
	color: var(--vr-white) !important;
}

.vr-footer-logo img,
.vr-site-footer .custom-logo,
.vr-site-footer img {
	max-width: 220px;
	max-height: 60px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.vr-footer-text {
	max-width: 420px;
	font-size: 13.5px;
	margin-top: 12px;
}

.vr-footer-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 32px 0;
}

.vr-footer-columns .widget-title {
	color: var(--vr-white);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 12px;
}

.vr-footer-links li {
	margin-bottom: 8px;
}

.vr-footer-links a {
	color: rgba(255, 255, 255, 0.72);
	font-size: 13.5px;
}

.vr-footer-links a:hover {
	color: var(--vr-cyan);
}

.vr-footer-nav {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 20px;
	margin-top: 8px;
}

.vr-footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.vr-footer-menu a {
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
}

.vr-footer-bottom {
	margin-top: 20px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 900px) {
	.vr-footer-columns {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================
   15. CPT single/archive templates
   ========================================================== */
.vr-archive-header {
	margin-bottom: 36px;
	padding: 40px 0 28px;
	border-bottom: 1px solid var(--vr-border);
}

.vr-archive-title {
	font-size: 34px;
	font-weight: 800;
	margin-bottom: 8px;
}

/* ---------- Event Archive Filter Form (v0.4.3) ---------- */
.vr-event-filter-shell {
	background: var(--vr-white);
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius-md, var(--vr-radius));
	box-shadow: var(--vr-shadow-sm, var(--vr-shadow));
	padding: 20px 22px;
	margin-bottom: 32px;
}

.vr-event-filter-form {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
	gap: 14px;
	align-items: end;
}

.vr-event-filter-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.vr-event-filter-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--vr-muted);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.vr-event-filter-input,
.vr-event-filter-select {
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius-sm);
	font-size: 14px;
	color: var(--vr-text);
	background: var(--vr-white);
	box-sizing: border-box;
	width: 100%;
}

.vr-event-filter-input:focus,
.vr-event-filter-select:focus {
	outline: none;
	border-color: var(--vr-blue);
	box-shadow: 0 0 0 3px var(--vr-blue-soft);
}

.vr-event-filter-actions {
	display: flex;
	gap: 8px;
}

.vr-event-filter-button {
	height: 44px;
	white-space: nowrap;
}

.vr-event-filter-reset {
	height: 44px;
	white-space: nowrap;
}

/* ---------- Active filter chips ---------- */
.vr-event-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--vr-border);
	font-size: 13px;
	color: var(--vr-muted);
}

.vr-event-active-filter-chip {
	display: inline-flex;
	align-items: center;
	background: var(--vr-blue-soft);
	color: var(--vr-blue-dark);
	font-weight: 600;
	font-size: 12.5px;
	padding: 5px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

/* ---------- Result count + empty state ---------- */
.vr-event-result-count {
	font-size: 14px;
	color: var(--vr-muted);
	margin: 0 0 18px;
}

.vr-event-filter-empty a {
	margin-top: 12px;
}

/* ---------- Mobile (tested at 360/390/430/768) ---------- */
@media (max-width: 900px) {
	.vr-event-filter-form {
		grid-template-columns: 1fr 1fr;
	}
	.vr-event-filter-actions {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.vr-event-filter-shell {
		padding: 16px 16px 18px;
	}
	.vr-event-filter-form {
		grid-template-columns: 1fr;
	}
	.vr-event-filter-actions {
		flex-direction: column;
	}
	.vr-event-filter-button,
	.vr-event-filter-reset {
		width: 100%;
		justify-content: center;
	}
	.vr-event-active-filters {
		gap: 6px;
	}
}

/* v0.4.2: pagination was completely unstyled before - the_posts_pagination()
   outputs plain .nav-links/.page-numbers with no theme CSS targeting
   them at all, rendering as raw browser-default text links. */
.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 40px 0 8px;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius-sm);
	font-size: 14px;
	font-weight: 600;
	color: var(--vr-navy);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.page-numbers:hover {
	border-color: var(--vr-blue);
	color: var(--vr-blue);
}

.page-numbers.current {
	background: var(--vr-blue);
	border-color: var(--vr-blue);
	color: var(--vr-white);
}

.page-numbers.dots {
	border: none;
	color: var(--vr-muted);
}

.vr-single-thumb {
	position: relative;
	border-radius: var(--vr-radius);
	overflow: hidden;
	margin-bottom: 28px;
	aspect-ratio: 21 / 9;
	box-shadow: var(--vr-shadow-lg);
}

.vr-single-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vr-single-thumb-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--vr-navy), var(--vr-blue-dark) 55%, var(--vr-cyan) 140%);
}

.vr-single-thumb-logo.vr-single-thumb {
	aspect-ratio: 16 / 9;
	max-width: 320px;
}

.vr-single-header {
	margin-bottom: 24px;
}

.vr-single-title {
	font-size: 30px;
	line-height: 1.25;
	margin-bottom: 12px;
}

.vr-single-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.vr-single-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.vr-single-description {
	font-size: 15.5px;
}

.vr-single-details-card {
	background: var(--vr-white);
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius);
	padding: 22px;
	position: sticky;
	top: 90px;
}

.vr-single-details-title {
	font-size: 16px;
	margin-bottom: 14px;
}

.vr-single-details-list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--vr-border);
	font-size: 13.5px;
}

.vr-single-details-list li:last-child {
	border-bottom: none;
}

.vr-single-details-list span {
	color: var(--vr-muted);
}

.vr-single-cta-placeholder {
	margin-top: 18px;
	background: var(--vr-blue-soft);
	color: var(--vr-blue-dark);
	font-weight: 700;
	font-size: 13.5px;
	text-align: center;
	padding: 12px;
	border-radius: var(--vr-radius-sm);
}

@media (min-width: 900px) {
	.vr-single-layout {
		grid-template-columns: 2fr 1fr;
	}
}

/* ==========================================================
   16b. Content lists (normal bullets/numbers restored)
   v0.1.1 fix: since ul/ol are no longer reset globally, content
   areas get real, readable list styling here instead of relying on
   the browser default (which is fine, but this keeps spacing/
   indentation consistent with the rest of the design system).
   ========================================================== */
.vr-content ul,
.entry-content ul,
.vr-page-content ul,
.vr-single-description ul,
.vr-post-excerpt ul,
.vr-post-card-body ul {
	list-style: disc;
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

.vr-content ol,
.entry-content ol,
.vr-page-content ol,
.vr-single-description ol,
.vr-post-excerpt ol,
.vr-post-card-body ol {
	list-style: decimal;
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

.vr-content li,
.entry-content li,
.vr-page-content li,
.vr-single-description li,
.vr-post-excerpt li,
.vr-post-card-body li {
	margin-bottom: 0.4em;
	line-height: 1.6;
}

.vr-content ul ul,
.vr-content ol ol,
.entry-content ul ul,
.entry-content ol ol {
	margin-top: 0.4em;
	margin-bottom: 0.4em;
}

/* ==========================================================
   16. Standard blog content (index/archive/single/search)
   ========================================================== */
.vr-post-list {
	display: grid;
	gap: 24px;
}

.vr-post-card {
	background: var(--vr-white);
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius);
	overflow: hidden;
}

.vr-post-thumb img {
	width: 100%;
	display: block;
}

.vr-post-card-body {
	padding: 20px;
}

.vr-post-title {
	font-size: 20px;
}

.vr-post-title a {
	color: var(--vr-navy);
}

.vr-post-meta {
	color: var(--vr-muted);
	font-size: 12.5px;
	margin-bottom: 10px;
}

.vr-post-meta span {
	margin-right: 10px;
}

.vr-page-content,
.vr-page-card {
	background: var(--vr-white);
	border-radius: var(--vr-radius);
}

.vr-page-title {
	font-size: 28px;
}

.vr-no-results {
	text-align: center;
	padding: 56px 24px;
	background: var(--vr-bg);
	border: 1px dashed var(--vr-border);
	border-radius: var(--vr-radius-md, var(--vr-radius));
	margin: 20px 0;
}

.vr-no-results::before {
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--vr-blue-soft);
}

.vr-no-results-title {
	font-size: 20px;
	margin-bottom: 8px;
}

.vr-comments-area {
	margin-top: 40px;
	background: var(--vr-white);
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius);
	padding: 24px;
}

.vr-comment-list {
	margin-bottom: 20px;
}

/* ==========================================================
   17. 404
   ========================================================== */
.vr-404-inner {
	text-align: center;
	max-width: 520px;
	margin: 0 auto;
	padding: 40px 0;
}

.vr-404-eyebrow {
	color: var(--vr-blue);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12.5px;
	letter-spacing: 0.08em;
}

.vr-404-title {
	font-size: 30px;
}

.vr-404-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin: 20px 0 28px;
	flex-wrap: wrap;
}

/* ==========================================================
   18. Search form (used by 404.php / search.php get_search_form)
   ========================================================== */
.search-form {
	display: flex;
	gap: 8px;
}

.search-form input[type="search"] {
	flex: 1;
	padding: 11px 12px;
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius-sm);
	font-family: inherit;
}

.search-form button {
	padding: 11px 18px;
	background: var(--vr-blue);
	color: var(--vr-white);
	border: none;
	border-radius: var(--vr-radius-sm);
	font-weight: 700;
	cursor: pointer;
}

/* ==========================================================
   19. Login / Register / Dashboard styling support (new in v0.1.2)
   ========================================================== */
/*
 * The virtualrun-core plugin (v0.4.x) renders the [vr_login],
 * [vr_register], and [vr_dashboard] shortcodes with its own
 * "vrc-" prefixed classes and ships its own frontend.css with basic
 * styling, loaded ONLY on those pages. This theme adds a visual
 * layer on top so the pages match the site's premium look more
 * closely - it never creates a login/register FORM itself, never
 * changes field names, nonces, or submit handling, and never touches
 * plugin logic. If the plugin's markup ever changes its class names,
 * these rules simply stop matching - nothing breaks.
 *
 * A "vr-" prefixed alias set is also included per the original
 * design brief (.vr-auth-wrap, .vr-auth-card, .vr-auth-form,
 * .vr-dashboard-wrap, .vr-dashboard-grid, .vr-dashboard-card) in
 * case a future plugin version or a child theme wrapper uses those
 * names instead - harmless if unused.
 */
.vrc-auth-wrap,
.vr-auth-wrap,
.vr-auth-card {
	max-width: 460px;
	margin: 48px auto;
	background: var(--vr-white);
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius);
	padding: 36px 32px;
	box-shadow: var(--vr-shadow-lg);
}

.vrc-form .vrc-field label,
.vr-auth-form .vr-field label {
	font-weight: 600;
	color: var(--vr-navy);
}

.vrc-form input[type="text"],
.vrc-form input[type="email"],
.vrc-form input[type="password"],
.vrc-form select,
.vr-auth-form input,
.vr-auth-form select {
	border-radius: var(--vr-radius-sm);
	border-color: var(--vr-border);
}

.vrc-form input:focus-visible,
.vrc-form select:focus-visible,
.vr-auth-form input:focus-visible,
.vr-auth-form select:focus-visible {
	outline: 3px solid var(--vr-cyan);
	outline-offset: 1px;
}

.vrc-btn-primary,
.vr-auth-form button[type="submit"] {
	background: var(--vr-blue);
}

.vrc-btn-primary:hover,
.vr-auth-form button[type="submit"]:hover {
	background: var(--vr-blue-dark);
}

.vrc-notice-error,
.vr-notice-error {
	border-left: 3px solid #dc2626;
}

.vrc-notice-success,
.vr-notice-success {
	border-left: 3px solid var(--vr-green);
}

/* Optional side image area for auth pages - only takes effect if the
   plugin markup (or a future version) wraps the form in a container
   this theme can target with a two-column layout; safe no-op
   otherwise since the plugin's own .vrc-auth-wrap already centers
   nicely as a single column. */
.vr-auth-layout {
	display: flex;
	max-width: 960px;
	margin: 48px auto;
	border-radius: var(--vr-radius);
	overflow: hidden;
	box-shadow: var(--vr-shadow-lg);
}

.vr-auth-layout-image {
	display: none;
}

@media (min-width: 900px) {
	.vr-auth-layout-image {
		display: block;
		flex: 1 1 45%;
		background: linear-gradient(160deg, var(--vr-navy), var(--vr-blue-dark) 60%, var(--vr-cyan) 140%);
		min-height: 480px;
	}

	.vr-auth-layout .vrc-auth-wrap,
	.vr-auth-layout .vr-auth-wrap {
		flex: 1 1 55%;
		margin: 0;
		border-radius: 0;
		box-shadow: none;
		border: none;
	}
}

.vrc-dashboard,
.vr-dashboard-wrap {
	max-width: 1100px;
	margin: 32px auto;
	padding: 0 20px;
}

.vrc-dashboard-title,
.vr-dashboard-wrap h1 {
	font-size: 28px;
	color: var(--vr-navy);
}

.vrc-dashboard-grid,
.vr-dashboard-grid {
	gap: 18px;
}

.vrc-dashboard-card,
.vr-dashboard-card {
	background: var(--vr-white);
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius);
	box-shadow: var(--vr-shadow);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.vrc-dashboard-card:hover,
.vr-dashboard-card:hover {
	box-shadow: var(--vr-shadow-lg);
	transform: translateY(-2px);
}

/* ==========================================================
   19. Pricing display (v0.1.5)
   ========================================================== */
.vr-card-pricing {
	padding: 0 20px;
	margin-top: -4px;
	margin-bottom: 8px;
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.vr-price-original {
	text-decoration: line-through;
	color: var(--vr-muted);
	font-size: 13px;
}

.vr-price-current {
	font-weight: 700;
	color: var(--vr-navy);
	font-size: 14px;
}

.vr-single-pricing-card {
	margin-top: 16px;
	padding: 14px 16px;
	background: var(--vr-blue-soft);
	border-radius: var(--vr-radius-sm);
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.vr-single-pricing-card .vr-price-original {
	font-size: 14px;
}

.vr-single-pricing-card .vr-price-current {
	font-size: 20px;
	color: var(--vr-blue-dark);
}

.vr-price-offer-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--vr-orange);
}

/* ==========================================================
   Hero Slider premium redesign (v0.2.9)
   Watsu Italia-inspired: large immersive hero, clean left-
   aligned content, elegant left-to-right overlay, a premium
   floating search card anchored at the hero's bottom edge.
   Kept in VirtualRun's own blue/navy palette throughout - no
   colors, layout structure, or content copied from Watsu.
   These rules intentionally override the plugin's own
   slider.css baseline (loaded earlier in <head>, confirmed via
   enqueue order) rather than duplicating its selectors from
   scratch, so functional behavior (JS hooks, autoplay, dots)
   stays exactly as the plugin built it - only the visual layer
   changes here.
   ========================================================== */

.vr-slider-hero {
	box-shadow: none;
	overflow: visible;
}

.vr-slider-hero .vr-slider-track {
	overflow: hidden;
	border-radius: inherit;
}

.vr-slider-hero .vr-slide {
	min-height: 640px;
	padding: 0;
	align-items: center;
}

.vr-slider-hero .vr-slide-background {
	inset: 0;
	aspect-ratio: auto;
}

.vr-slider-hero .vr-slide-overlay {
	background: linear-gradient(90deg, rgba(5, 20, 45, 0.86) 0%, rgba(5, 20, 45, 0.62) 42%, rgba(5, 20, 45, 0.22) 100%);
}

.vr-slider-hero .vr-slide-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
}

.vr-slider-hero .vr-slide-content {
	max-width: 620px;
	padding: 64px 0 96px;
}

.vr-slider-hero .vr-slide-eyebrow {
	background: rgba(255, 255, 255, 0.16);
	color: #ffffff;
}

.vr-slider-hero .vr-slide-title {
	color: #ffffff;
	font-size: 44px;
	line-height: 1.16;
	margin-bottom: 16px;
}

.vr-slider-hero .vr-slide-description {
	color: rgba(255, 255, 255, 0.9);
	font-size: 16.5px;
	line-height: 1.65;
	margin-bottom: 24px;
}

.vr-slider-hero .vr-slide-meta {
	margin-bottom: 28px;
}

.vr-slider-hero .vr-slide-date,
.vr-slider-hero .vr-slide-countdown {
	font-size: 12.5px;
}

.vr-slider-hero .vr-slide-actions {
	gap: 16px;
}

.vr-slider-hero .vr-slide-button-primary,
.vr-slider-hero .vr-slide-button-secondary {
	padding: 14px 30px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 10px;
}

.vr-slider-hero .vr-slide-button-primary {
	box-shadow: 0 10px 24px rgba(11, 75, 196, 0.4);
}

/* ---------- Controls ---------- */
.vr-slider-hero .vr-slider-controls {
	position: absolute;
	right: 28px;
	bottom: 132px;
	display: flex;
	align-items: center;
	gap: 14px;
	z-index: 2;
}

.vr-slider-hero .vr-slider-arrow {
	position: static;
	transform: none;
}

.vr-slider-hero .vr-slider-dots {
	position: static;
	left: auto;
	bottom: auto;
	transform: none;
}

.vr-slider-hero .vr-slider-progress {
	bottom: 0;
}

/* ---------- Search card ---------- */
.vr-slider-hero .vr-slider-search {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -34px;
	z-index: 3;
	padding: 0 24px;
}

.vr-slider-hero .vr-hero-search-form {
	max-width: 1132px;
	margin: 0 auto;
	grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
	padding: 14px;
	border-radius: 16px;
	box-shadow: 0 20px 44px rgba(5, 20, 45, 0.24);
}

.vr-hero-search-field input,
.vr-hero-search-field select {
	height: 56px;
}

.vr-hero-search-button {
	height: 56px;
	padding: 0 28px;
	white-space: nowrap;
}

/* ---------- Spacing after hero ----------
   v0.3.0: fixed a real bug here - this previously targeted
   .vr-slider-hero + .vr-section, but the actual next element
   (template-parts/section-trust-strip.php) uses the class
   .vr-trust-strip, which never carries .vr-section at all - so this
   rule never matched anything and no extra spacing was ever applied,
   which is why the feature row above always sat cramped against the
   floating search card regardless of this rule's presence. Targets
   the real element now, with padding sized to the actual search
   card height at each breakpoint (checked against the card's own
   overlap/height values below, not guessed) so there is genuine
   breathing room without an oversized empty gap. */
.vr-slider-hero + .vr-trust-strip,
.vr-slider-hero + .vr-home-features-wrap {
	padding-top: 116px;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.vr-slider-hero .vr-hero-search-form {
		grid-template-columns: 1fr 1fr;
	}
	.vr-slider-hero .vr-hero-search-button {
		grid-column: 1 / -1;
	}
	/* v0.3.0: the 2-column + full-width-button layout above makes
	   the card noticeably taller than the desktop single-row
	   version, so it needs more room below it than the desktop
	   value provides - sized to that taller card, not reused from
	   desktop. */
	.vr-slider-hero + .vr-trust-strip,
.vr-slider-hero + .vr-home-features-wrap {
		padding-top: 208px;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 782px) {
	.vr-slider-hero .vr-slide {
		min-height: 620px;
	}
	.vr-slider-hero .vr-slide-content {
		padding: 40px 0 220px;
	}
	.vr-slider-hero .vr-slide-title {
		font-size: 30px;
	}
	.vr-slider-hero .vr-slide-description {
		font-size: 15px;
	}
	.vr-slider-hero .vr-slide-meta {
		flex-wrap: wrap;
	}
	.vr-slider-hero .vr-slide-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.vr-slider-hero .vr-slide-button,
	.vr-slider-hero .vr-slide-button-secondary {
		height: 52px;
		max-width: 100%;
	}
	.vr-slider-hero .vr-slider-controls {
		right: 16px;
		bottom: auto;
		top: 20px;
	}
	.vr-slider-hero .vr-slider-search {
		bottom: -160px;
		padding: 0 16px;
	}
	/* v0.3.7 (Part D): no floating chat/Ask AI widget exists anywhere
	   in this theme or plugin to inspect directly - it would be a
	   separately-installed third-party plugin this code has no
	   visibility into, matching the spec's own framing ("do not
	   attempt to control external plugin logic"). The search button
	   is full-width on mobile, not corner-positioned, so asymmetric
	   right-side padding would look visually broken without
	   meaningfully reducing overlap risk - the generous space already
	   reserved below the search card (see the padding-top on the
	   section that follows it, further down this file) is what
	   actually keeps the interactive area clear of a bottom-right
	   fixed widget in practice. */
	.vr-slider-hero .vr-hero-search-form {
		grid-template-columns: 1fr;
		padding: 12px;
	}
	.vr-hero-search-field input,
	.vr-hero-search-field select {
		height: 50px;
	}
	.vr-hero-search-button {
		height: 50px;
	}
	.vr-slider-hero + .vr-trust-strip,
.vr-slider-hero + .vr-home-features-wrap {
		padding-top: 232px;
	}
}

/* ==========================================================
   Homepage Settings shortcode compatibility (v0.3.1)
   Styles the actual classes virtualrun-core 0.6.32+'s
   [vr_home_about]/[vr_home_features]/[vr_home_faq] output
   (VR_Homepage_Content), reusing the same visual values already
   used by this theme's own static About/trust-strip/FAQ sections
   above, so plugin-rendered content and the static fallback look
   like one consistent design rather than two different systems.
   ========================================================== */

.vr-home-section {
	padding: 56px 0;
}

/* ---------- About ---------- */
.vr-home-about-block {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.vr-home-about-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vr-blue);
	background: var(--vr-blue-soft);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.vr-home-about-heading {
	margin: 0 0 14px;
	font-size: 30px;
	font-weight: 800;
	color: var(--vr-navy);
}

.vr-home-about-description {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--vr-muted);
}

.vr-home-about-button {
	display: inline-block;
}

/* ---------- Feature row ---------- */
.vr-home-features-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vr-home-features-list li {
	font-weight: 600;
	font-size: 13.5px;
	color: var(--vr-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.vr-home-features-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--vr-blue-soft);
	color: var(--vr-blue);
	flex-shrink: 0;
}

/* ---------- FAQ ---------- */
.vr-home-faq-block {
	max-width: 780px;
	margin: 0 auto;
}

.vr-home-faq-heading {
	text-align: center;
	margin: 0 0 12px;
	font-size: 28px;
	font-weight: 800;
	color: var(--vr-navy);
}

.vr-home-faq-intro {
	text-align: center;
	margin: 0 0 28px;
	font-size: 14.5px;
	color: var(--vr-muted);
}

.vr-home-faq-list {
	display: block;
}

.vr-home-faq-item {
	background: var(--vr-white);
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius-sm);
	padding: 4px 18px;
	margin-bottom: 12px;
}

.vr-home-faq-question {
	cursor: pointer;
	font-weight: 700;
	font-size: 15px;
	padding: 16px 0;
	color: var(--vr-navy);
	list-style: none;
}

.vr-home-faq-question::-webkit-details-marker {
	display: none;
}

.vr-home-faq-question::after {
	content: "+";
	float: right;
	font-weight: 800;
	color: var(--vr-blue);
}

.vr-home-faq-item[open] .vr-home-faq-question::after {
	content: "-";
}

.vr-home-faq-answer {
	color: var(--vr-muted);
	font-size: 14.5px;
	line-height: 1.6;
	padding-bottom: 18px;
	margin: 0;
}

/* ---------- Desktop: multi-column feature row ---------- */
@media (min-width: 700px) {
	.vr-home-features-list {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
	.vr-home-section {
		padding: 40px 0;
	}
	.vr-home-about-heading {
		font-size: 22px;
	}
	.vr-home-faq-heading {
		font-size: 22px;
	}
}