/* ============================================================
   VENTURE CAFÉ 3.0 — RICH TEXT (RTE) STYLES
   Shared by the TinyMCE editor (via add_editor_style) and the
   front end (.vc-rte / .vc-prose wrappers) so WYSIWYG content
   previews exactly as it renders. Brand tokens are redeclared
   here because the TinyMCE iframe doesn't load site.css :root.
   ============================================================ */
:root {
	--vc-green: #95cd31;
	--vc-green-deep: #7fb521;
	--vc-green-soft: #eef6da;
	--vc-ink: #1a1d21;
	--vc-ink-soft: #4a4e54;
	--vc-mute: #71767e;
	--vc-rule: #e4e6ea;
}

.vc-rte,
.vc-prose,
body#tinymce {
	font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: var(--vc-ink);
	font-size: 16px;
	line-height: 1.65;
}

.vc-rte p,
.vc-prose p { margin: 0 0 1em; }
.vc-rte > :last-child,
.vc-prose > :last-child { margin-bottom: 0; }

.vc-rte a:not(.vc-btn),
.vc-prose a:not(.vc-btn) {
	color: var(--vc-green-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}
/* Button-style links (Formats → "Button"). Styled here so they preview inside the
   TinyMCE iframe (which loads only this stylesheet); the front end also has the
   fuller site.css .vc-btn. Fallbacks cover vars site.css defines but rte.css doesn't. */
.vc-rte a.vc-btn, .vc-prose a.vc-btn {
	display: inline-flex; align-items: center; gap: 11px;
	padding: 14px 26px; border-radius: var(--vc-radius-pill, 999px);
	font-family: var(--vc-font-display, 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 700; font-size: 13px; letter-spacing: 0.13em; text-transform: uppercase;
	text-decoration: none; border: 1.5px solid transparent; white-space: nowrap;
}
.vc-rte a.vc-btn-accent, .vc-prose a.vc-btn-accent { background: var(--vc-green); color: var(--vc-ink); border-color: var(--vc-green); }
.vc-rte a.vc-btn-ghost, .vc-prose a.vc-btn-ghost { background: transparent; color: var(--vc-ink); border-color: var(--vc-ink); }
.vc-rte--on-dark a.vc-btn-ghost { color: #fff; border-color: rgba(255,255,255,0.5); }
.vc-rte strong, .vc-prose strong { font-weight: 700; }
.vc-rte em, .vc-prose em { font-style: italic; }
/* Small text (Formats → "Small text"). Relative so it scales with its context. */
.vc-rte .vc-small, .vc-prose .vc-small { font-size: 0.82em; }

.vc-rte h1, .vc-rte h2, .vc-rte h3, .vc-rte h4,
.vc-prose h1, .vc-prose h2, .vc-prose h3, .vc-prose h4 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 1.4em 0 0.5em;
}
/* H1 — the big display heading: larger and uppercase. */
.vc-rte h1, .vc-prose h1 {
	font-size: clamp(2.2em, 1.6em + 2vw, 3em);
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin-top: 0;
}
.vc-rte h2, .vc-prose h2 { font-size: 1.6em; }
.vc-rte h3, .vc-prose h3 { font-size: 1.3em; }
.vc-rte h4, .vc-prose h4 { font-size: 1.1em; }
.vc-rte h1:first-child, .vc-prose h1:first-child { margin-top: 0; }

/* Lead paragraph (Formats → "Lead paragraph") */
.vc-rte .vc-lead, .vc-prose .vc-lead {
	font-size: 1.18em;
	line-height: 1.55;
	color: var(--vc-ink-soft);
}

/* Mono label (Formats → "Mono label") */
.vc-rte .vc-mono, .vc-prose .vc-mono {
	font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
	font-size: 0.82em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Accent text (Formats → "Accent text") — colours the text the brand accent. */
.vc-rte .vc-accent-text, .vc-prose .vc-accent-text { color: var(--vc-green); }

/* Eyebrow (Formats → "Eyebrow") — mono uppercase label led by the brand dot.
   The dot is a ::before so no extra markup is needed in the WYSIWYG. */
.vc-rte .vc-eyebrow, .vc-prose .vc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
	font-weight: 500;
	font-size: 0.7em;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--vc-mute);
	margin: 0 0 1em;
}
.vc-rte .vc-eyebrow::before, .vc-prose .vc-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: var(--vc-green);
}

/* Pill / tag (Formats → "Pill / tag") — inline mono chip. */
.vc-rte .vc-tag, .vc-prose .vc-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 11px;
	border-radius: 999px;
	background: var(--vc-green-soft);
	color: var(--vc-green-deep);
	font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.6;
	white-space: nowrap;
}

/* Numbered list with accent circles (Formats → "Numbered (circles)").
   The counter sits in an accent-green disc; on an accent-green background the
   disc flips to white so it stays visible (number goes green). */
.vc-rte ol.vc-ol-circle, .vc-prose ol.vc-ol-circle {
	list-style: none;
	counter-reset: vc-oc;
	margin: 0 0 1em;
	padding: 0;
}
.vc-rte ol.vc-ol-circle > li, .vc-prose ol.vc-ol-circle > li {
	counter-increment: vc-oc;
	position: relative;
	padding-left: 2.5em;
	min-height: 1.7em;
	margin: 0 0 0.7em;
}
.vc-rte ol.vc-ol-circle > li::before, .vc-prose ol.vc-ol-circle > li::before {
	content: counter(vc-oc);
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.7em;
	height: 1.7em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--vc-green);
	color: var(--vc-ink);
	font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1;
}
/* On an accent (green) surface: white disc, green number. */
.vc-block--accent .vc-ol-circle > li::before,
.vc-surface--accent .vc-ol-circle > li::before {
	background: #fff;
	color: var(--vc-green-deep);
}

/* Highlight — the signature brand green swipe (from .vc-def-hl).
   Formats → "Highlight" wraps the selection in <span class="vc-hl">. */
.vc-rte .vc-hl, .vc-prose .vc-hl, .vc-hl {
	position: relative;
	isolation: isolate;
}
.vc-rte .vc-hl::after, .vc-prose .vc-hl::after, .vc-hl::after {
	content: "";
	position: absolute;
	left: -3px; right: -5px; bottom: 0.08em;
	height: 0.42em;
	background: var(--vc-green);
	opacity: 0.45;
	z-index: -1;
	transform: skewX(-12deg) rotate(-1.2deg);
	border-radius: 2px;
}

/* Bulleted lists — brand accent circle marker */
.vc-rte ul, .vc-prose ul { list-style: none; margin: 0 0 1em; padding: 0; }
.vc-rte ul li, .vc-prose ul li { position: relative; padding-left: 1.6em; margin: 0 0 0.55em; }
.vc-rte ul li::before, .vc-prose ul li::before {
	content: "";
	position: absolute;
	left: 0.2em; top: 0.62em;
	width: 0.5em; height: 0.5em;
	background: var(--vc-green);
	border-radius: 50%;
}
/* Checklist (Formats → "Checklist (✓)") — green check marks instead of dots. */
.vc-rte ul.vc-list-check li::before, .vc-prose ul.vc-list-check li::before {
	content: "\2713";
	left: 0; top: 0;
	width: auto; height: auto;
	background: none; border-radius: 0;
	color: var(--vc-green-deep);
	font-weight: 700;
}

.vc-rte ol, .vc-prose ol { margin: 0 0 1em 1.2em; padding: 0; }
.vc-rte ol li, .vc-prose ol li { margin: 0 0 0.55em; padding-left: 0.3em; }

.vc-rte blockquote, .vc-prose blockquote {
	margin: 1.2em 0;
	padding: 0.2em 0 0.2em 1em;
	border-left: 3px solid var(--vc-green);
	color: var(--vc-ink-soft);
	font-style: italic;
}

.vc-rte img, .vc-prose img { max-width: 100%; height: auto; border-radius: 10px; }

/* WordPress editor alignment classes. The WYSIWYG (TinyMCE) shows these centred/
   floated because WP's editor stylesheet defines them, but the frontend theme must
   define them too or images fall back to inline flow (left-aligned). Covers both a
   bare <img class="aligncenter"> (classic editor) and a <figure class="aligncenter">
   wrapper (block editor / captioned images). */
.vc-rte .aligncenter, .vc-prose .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.vc-rte figure.aligncenter, .vc-prose figure.aligncenter { text-align: center; }
.vc-rte .alignright, .vc-prose .alignright {
	float: right;
	margin: 0.4em 0 1em 1.5em;
}
.vc-rte .alignleft, .vc-prose .alignleft {
	float: left;
	margin: 0.4em 1.5em 1em 0;
}
.vc-rte .alignnone, .vc-prose .alignnone { height: auto; }
/* Captioned images: WP wraps them in .wp-caption at the image's width. */
.vc-rte .wp-caption, .vc-prose .wp-caption { max-width: 100%; }
.vc-rte .wp-caption.aligncenter, .vc-prose .wp-caption.aligncenter { margin-left: auto; margin-right: auto; }
.vc-rte .wp-caption-text, .vc-prose .wp-caption-text {
	font-size: 0.85em;
	color: var(--vc-ink-soft);
	margin-top: 0.4em;
}

/* Divider (<hr>) — a soft hairline that fades out at both ends with a small brand
   diamond centred on it, instead of the flat default rule. Adapts to the surface. */
.vc-rte hr, .vc-prose hr {
	border: 0;
	height: 1px;
	margin: 2.4em 0;
	position: relative;
	overflow: visible;
	background: linear-gradient(90deg, transparent, var(--vc-rule) 22%, var(--vc-rule) 78%, transparent);
}
.vc-rte hr::after, .vc-prose hr::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 7px;
	height: 7px;
	transform: translate(-50%, -50%) rotate(45deg);
	background: var(--vc-green);
}
/* On an accent (green) surface the light rule + green diamond would vanish → ink. */
.vc-block--accent .vc-rte hr, .vc-surface--accent .vc-rte hr {
	background: linear-gradient(90deg, transparent, rgba(26,29,33,0.22) 22%, rgba(26,29,33,0.22) 78%, transparent);
}
.vc-block--accent .vc-rte hr::after, .vc-surface--accent .vc-rte hr::after { background: var(--vc-ink); }

/* Lead-sized variant (banner subtext) */
.vc-rte--lead { font-size: 1.12em; }
.vc-rte--lead p { line-height: 1.55; }

/* On dark surfaces (e.g. the banner hero) */
.vc-rte--on-dark { color: rgba(255,255,255,0.84); }
.vc-rte--on-dark h1, .vc-rte--on-dark h2, .vc-rte--on-dark h3, .vc-rte--on-dark h4 { color: #fff; }
/* The "Lead paragraph" format carries its own ink-soft colour (rte.css above),
   which is dark-on-dark here — lift it to near-white on dark heroes. */
.vc-rte--on-dark .vc-lead { color: rgba(255,255,255,0.92); }
.vc-rte--on-dark a:not(.vc-btn) { color: var(--vc-green); }
.vc-rte--on-dark .vc-hl::after { opacity: 0.85; }
.vc-rte--on-dark .vc-eyebrow { color: rgba(255,255,255,0.6); }
/* divider on dark: translucent-white hairline (the green diamond still reads well) */
.vc-rte--on-dark hr { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22) 22%, rgba(255,255,255,0.22) 78%, transparent); }

/* ── Mobile safety: WYSIWYG content must never force horizontal scroll ── */
.vc-rte, .vc-prose { overflow-wrap: break-word; }
.vc-rte a, .vc-prose a { overflow-wrap: anywhere; }            /* long unbroken URLs */
.vc-rte iframe, .vc-prose iframe,
.vc-rte video, .vc-prose video,
.vc-rte embed, .vc-prose embed { max-width: 100%; }
.vc-rte pre, .vc-prose pre { max-width: 100%; overflow-x: auto; }
/* Wide tables scroll within their own box instead of stretching the page. */
.vc-rte table, .vc-prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; }