/*
Theme Name: Vicky Gou
Theme URI: https://vickygou.com
Author: Built for Vicky Gou, REALTOR®
Author URI: https://vickygou.com
Description: Custom block theme for Vicky Gou, REALTOR® (Compass, Mountain View, CA). Warm cream + terracotta palette, Georgia display type, mono labels. Built from the Vicky Gou design canvas.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vicky-gou
Tags: blog, one-column, block-patterns, full-site-editing, custom-colors, custom-menu, editor-style, featured-images, threaded-comments
*/

/* -------------------------------------------------------------------------
 * Everything expressible as a design token lives in theme.json. This file
 * carries only what theme.json cannot: component classes used by the
 * patterns, the menu-panel interaction, and responsive behaviour.
 * ---------------------------------------------------------------------- */

/* --- Page skeleton ------------------------------------------------------ */

/* WordPress puts the root blockGap (1.75rem) between every top-level block,
 * which here means the header, <main> and footer template parts. The design
 * has them flush: the hero sits directly under the header rule, and the dark
 * contact band runs straight into the dark footer. Without this there is a
 * 28px cream stripe between the two dark bands. */
.wp-site-blocks > * { margin-block-start: 0; }

/* --- Utilities ---------------------------------------------------------- */

.vg-mono {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
}

/* Mono label with wide tracking — the "01 · FOR SELLERS" eyebrows. */
.vg-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
	line-height: 1.4;
}

/* Mono call-to-action that is a link, not a button: "TALK ABOUT YOUR HOME →" */
.vg-arrow-link a,
a.vg-arrow-link {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--wp--custom--tracking--nav);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--terracotta);
}

.vg-arrow-link a:hover,
a.vg-arrow-link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Outline pill — same silhouette as a button, but secondary. */
.wp-block-button.is-style-vg-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-vg-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

/* Light pill for use on the dark contact/footer band. Taller than the other
 * pills (48px vs 44px) and wider, as in the design's closing CTA. */
.wp-block-button.is-style-vg-light .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--base);
	padding: 1.09375rem 1.875rem;
}

.wp-block-button.is-style-vg-light .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

/* Static chips: designations under Vicky's bio. */
.vg-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vg-tag {
	padding: 8px 14px;
	border: var(--wp--custom--rule);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	line-height: 1;
}

/* Bordered card used by Portfolio, Neighborhoods and Resources. */
.vg-card {
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--rule);
}

.vg-card > .wp-block-image img,
.vg-card figure.wp-block-image img {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
}

/* "SOLD" flag pinned to a portfolio photo. */
.vg-badge {
	position: absolute;
	inset-inline-start: 16px;
	inset-block-start: 16px;
	z-index: 2;
	padding: 6px 12px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--tracking--nav);
	text-transform: uppercase;
	line-height: 1;
}

.vg-media { position: relative; }

.vg-media .wp-block-image,
.vg-media figure { margin: 0; }

.vg-card .vg-media figure.wp-block-image img { display: block; width: 100%; height: 260px; object-fit: cover; }

.vg-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.875rem;
	letter-spacing: -0.033em;
	line-height: 1;
	color: var(--wp--preset--color--ink);
}

.vg-address {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 1.4px;
	line-height: 1.7;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* --- Header ------------------------------------------------------------- */

.vg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	min-height: var(--wp--custom--header--height);
	background: var(--wp--preset--color--base);
	box-shadow: inset 0 -1px 0 rgba(37, 42, 40, 0.22);
}

.vg-header .wp-block-site-title { margin: 0; }

.vg-header__licence {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.5625rem;
	letter-spacing: var(--wp--custom--tracking--tight);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	line-height: 1;
	margin: 3px 0 0;
}

/* The header's inline links are a plain nav, not the overlay menu. */
.vg-header .wp-block-navigation { gap: 36px; }

.vg-header .wp-block-navigation .wp-block-navigation-item__content { text-decoration: none; }

.vg-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* --- Menu panel (the dropdown from the design) -------------------------- */

.vg-menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 20px;
	background: transparent;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--wp--custom--tracking--nav);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	line-height: 1;
}

.vg-menu-toggle:hover { background: var(--wp--preset--color--sand); }

.vg-menu-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 3px; }

.vg-menu-toggle[aria-expanded="true"] { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); }

.vg-menu-toggle[aria-expanded="true"] .vg-menu-toggle__icon-open,
.vg-menu-toggle[aria-expanded="false"] .vg-menu-toggle__icon-close { display: none; }

.vg-menu-toggle[aria-expanded="true"] svg path { stroke: var(--wp--preset--color--base); }

/* Scrim dims the page behind the panel, matching the design's 38% wash. */
.vg-menu-scrim {
	position: fixed;
	inset: var(--wp--custom--header--height) 0 0 0;
	z-index: 90;
	background: rgba(37, 42, 40, 0.38);
	opacity: 0;
	visibility: hidden;
	transition: opacity 180ms ease, visibility 180ms;
}

.vg-menu-panel {
	position: fixed;
	inset-block-start: calc(var(--wp--custom--header--height) + 12px);
	inset-inline-end: var(--wp--preset--spacing--80);
	z-index: 95;
	width: min(440px, calc(100vw - 2 * var(--wp--preset--spacing--80)));
	max-height: calc(100vh - var(--wp--custom--header--height) - 32px);
	overflow-y: auto;
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--rule);
	box-shadow: var(--wp--preset--shadow--panel);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

body.vg-menu-open .vg-menu-scrim,
body.vg-menu-open .vg-menu-panel { opacity: 1; visibility: visible; }

body.vg-menu-open .vg-menu-panel { transform: translateY(0); }

body.vg-menu-open { overflow: hidden; }

/* Panel navigation.
 *
 * This is a real core/navigation block so Vicky can add, reorder or rename
 * destinations in the Site Editor. The 01–05 numerals come from a CSS
 * counter rather than the markup, so they renumber themselves when she does.
 */
.vg-menu-nav { counter-reset: vg-menu; }

.vg-menu-nav .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.vg-menu-nav .wp-block-navigation-item { display: block; }

.vg-menu-nav > .wp-block-navigation__container > .wp-block-navigation-item {
	border-bottom: var(--wp--custom--rule-soft);
}

.vg-menu-nav .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 32px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.625rem;
	letter-spacing: -0.038em;
	line-height: 1.1;
	text-transform: none;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.vg-menu-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
	counter-increment: vg-menu;
	content: counter(vg-menu, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--tracking--tight);
	color: var(--wp--preset--color--muted);
}

.vg-menu-nav .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--terracotta);
	text-decoration: none;
}

/* Resources keeps its children visible in the panel instead of hiding them
 * behind a hover dropdown — the guides are the point of the section. */
.vg-menu-nav .wp-block-navigation-item.has-child { background: var(--wp--preset--color--sand); }

.vg-menu-panel .vg-menu-nav .has-child .wp-block-navigation__submenu-container,
.vg-menu-panel .vg-menu-nav .has-child:hover .wp-block-navigation__submenu-container,
.vg-menu-panel .vg-menu-nav .has-child:focus-within .wp-block-navigation__submenu-container {
	position: static;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: auto;
	height: auto;
	min-width: 0;
	overflow: visible;
	padding: 0 32px 22px 58px;
	margin: 0;
	border: 0;
	background: transparent;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
}

.vg-menu-panel .vg-menu-nav .has-child .wp-block-navigation__submenu-container::before {
	content: "Free guides · Name + email required";
	display: block;
	margin: -8px 0 4px -26px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.5625rem;
	letter-spacing: var(--wp--custom--tracking--tight);
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
}

/* The Resources row: label left, chevron right, guides wrapping below — as in
 * the design. Core renders the chevron as a sibling <button> after the link,
 * so the <li> is the flex container. */
.vg-menu-nav .wp-block-navigation-item.has-child {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.vg-menu-nav .has-child > .wp-block-navigation-item__content { flex: 1 1 auto; }

.vg-menu-nav .has-child > .wp-block-navigation__submenu-icon {
	width: 12px;
	height: 12px;
	margin: 0 32px 0 0;
	padding: 0;
	color: var(--wp--preset--color--terracotta);
	transform: rotate(180deg); /* panel is always expanded: chevron points up */
}

.vg-menu-nav .has-child > .wp-block-navigation__submenu-icon svg { width: 12px; height: 12px; }

.vg-menu-panel .vg-menu-nav .has-child .wp-block-navigation__submenu-container { flex: 1 1 100%; }

/* Selector length matches core's own submenu-link rule, which otherwise
 * re-adds 7px 14px of padding around each guide. */
.vg-menu-panel .vg-menu-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-s);
	letter-spacing: normal;
	line-height: 1.3;
}

.vg-menu-panel .vg-menu-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vg-menu-nav .wp-block-navigation__submenu-icon { color: var(--wp--preset--color--terracotta); }

.vg-menu-contact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 18px 32px;
	background: var(--wp--preset--color--ink);
}

.vg-menu-contact a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.5625rem;
	letter-spacing: var(--wp--custom--tracking--nav);
	text-transform: uppercase;
	color: var(--wp--custom--on-dark--prose);
	text-decoration: none;
}

.vg-menu-contact a:hover { color: var(--wp--preset--color--base); text-decoration: underline; }

/* --- Hero --------------------------------------------------------------- */

.vg-hero { position: relative; overflow: hidden; }

.vg-hero__art {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 0;
	pointer-events: none;
}

.vg-hero__art img { display: block; width: 100%; height: auto; }

.vg-hero__inner { position: relative; z-index: 1; }

.vg-hero__wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-xl);
	letter-spacing: 0.066em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.vg-hero__credential {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	line-height: 1.8;
	margin: 0;
	text-align: center;
}

.vg-hero__credential span { color: var(--wp--preset--color--muted); }

/* Search bar — links out to Vicky's Compass search, so it is a form only in
 * appearance; the whole control is one link. */
/* The block is centred in the hero; inside it the BUY / RENT tabs sit flush
 * with the field's left edge, as in the design. 590px = field + button. */
.vg-search {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: min(590px, calc(100vw - 40px));
	margin-inline: auto;
}

.vg-search__tabs { display: flex; }

.vg-search__tab {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 40px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--wp--custom--tracking--nav);
	text-transform: uppercase;
	text-decoration: none;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--muted);
}

.vg-search__tab.is-active { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); }

.vg-search__row { display: flex; width: 100%; }

.vg-search__field {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 460px;
	min-width: 0;
	box-sizing: border-box;
	height: 52px;
	padding: 0 18px;
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--rule);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--body-s);
	text-decoration: none;
}

.vg-search__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 130px;
	height: 52px;
	background: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--wp--custom--tracking--nav);
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

.vg-search__submit:hover { background: var(--wp--preset--color--terracotta-deep); }

/* --- Meet Vicky --------------------------------------------------------- */

.vg-portrait img { display: block; width: 340px; max-width: 100%; aspect-ratio: 1; object-fit: cover; }

/* The biography runs no wider than 660px in the design, even though its
 * column is wider. */
.vg-bio { max-width: 660px; }

.vg-portrait__caption {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	background: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
}

/* --- Testimonials ------------------------------------------------------- */

.vg-carousel,
.vg-carousel__slides,
.vg-carousel__slide {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.vg-carousel__slides,
.vg-carousel__slide { margin: 0; padding: 0; }

.vg-quote-mark {
	font-family: var(--wp--preset--font-family--display);
	font-size: 6.875rem;
	line-height: 0.4;
	height: 34px;
	color: var(--wp--preset--color--blush);
	margin: 0;
	text-align: center;
	user-select: none;
}

.vg-testimonial__text {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-l);
	letter-spacing: -0.035em;
	line-height: 1.25;
	max-width: 880px;
	text-align: center;
	text-wrap: balance;
	margin: 0;
}

.vg-testimonial__attribution {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--tracking--tight);
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* Design: 24px rhythm plus an extra 8px above the controls. */
.vg-carousel__nav { display: flex; align-items: center; gap: 20px; margin-top: 8px; }

.vg-carousel__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
}

.vg-carousel__btn:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); }

.vg-carousel__btn:hover svg path { stroke: var(--wp--preset--color--base); }

.vg-carousel__btn:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 3px; }

.vg-carousel__dots { display: flex; align-items: center; gap: 8px; }

.vg-carousel__dot {
	width: 12px;
	height: 3px;
	background: rgba(37, 42, 40, 0.22);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: width 180ms ease, background 180ms ease;
}

.vg-carousel__dot[aria-current="true"] { width: 24px; background: var(--wp--preset--color--terracotta); }

.vg-carousel__slide[hidden] { display: none; }

.vg-keywords {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--wp--custom--tracking--tight);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* --- Dark contact band + footer ----------------------------------------- */

.vg-dark { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); }

.vg-dark :is(h1, h2, h3, h4, h5) { color: var(--wp--preset--color--base); }

.vg-dark p { color: var(--wp--custom--on-dark--prose); }

.vg-dark .vg-eyebrow { color: var(--wp--preset--color--gold); }

.vg-dark a { color: var(--wp--preset--color--blush); }

.vg-dark a:hover { color: var(--wp--preset--color--base); }

.vg-footer__top { border-top: var(--wp--custom--rule-on-dark); }

/* Scoped under .vg-dark so it beats the generic `.vg-dark p` colour rule. */
.vg-dark .vg-footer__meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.5625rem;
	letter-spacing: var(--wp--custom--tracking--tight);
	text-transform: uppercase;
	color: var(--wp--custom--on-dark--meta);
	margin: 0;
}

.vg-footer__links { display: flex; flex-wrap: wrap; gap: 40px; }

.vg-footer__links a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--tracking--nav);
	text-transform: uppercase;
	color: var(--wp--custom--on-dark--prose);
	text-decoration: none;
}

.vg-footer__links a:hover { color: var(--wp--preset--color--base); text-decoration: underline; }

/* Required real-estate disclosure. The design set this at 45% opacity, which
 * measures ~4.2:1 on ink — under the 4.5:1 minimum for text this small. Held
 * at 60% instead: visually still recessed, but legible, which matters for
 * text that exists for legal reasons. */
.vg-dark .vg-legal {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.5625rem;
	letter-spacing: 1.4px;
	line-height: 1.8;
	text-transform: uppercase;
	color: var(--wp--custom--on-dark--legal);
	text-align: center;
	max-width: 900px;
	margin-inline: auto;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
	.vg-header .wp-block-navigation { display: none; }

	.vg-menu-panel {
		inset-inline: 16px;
		width: auto;
	}

	.vg-search__row { flex-direction: column; align-items: stretch; }

	.vg-search__field,
	.vg-search__submit { flex-basis: auto; width: 100%; }

	.vg-portrait img { width: 100%; }

	.vg-footer__links { gap: 20px; }
}

@media (max-width: 600px) {
	.vg-menu-nav .wp-block-navigation-item__content { padding: 18px 22px; }

	.vg-menu-panel .vg-menu-nav .has-child .wp-block-navigation__submenu-container { padding: 0 22px 18px 46px; }


	.vg-card > .wp-block-image img,
	.vg-card figure.wp-block-image img,
	.vg-card .vg-media figure.wp-block-image img { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
	.vg-menu-scrim,
	.vg-menu-panel,
	.vg-carousel__dot {
		transition: none;
	}
}

/* Screen-reader-only text, for icon-only controls. */
.vg-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Toggle label swaps with the panel state: MENU ⇄ CLOSE. */
.vg-menu-toggle__icon-open,
.vg-menu-toggle__icon-close {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* --- Measure helpers ----------------------------------------------------
 * Centred prose widths. These are classes rather than inline styles because
 * the block editor validates saved markup against what a block's attributes
 * would generate — an inline style with no matching attribute makes the block
 * report "unexpected or invalid content" the first time Vicky opens it.
 * ---------------------------------------------------------------------- */

.vg-measure { max-width: 620px; margin-inline: auto; }

.vg-measure-narrow { max-width: 560px; margin-inline: auto; }

.vg-measure-wide { max-width: 820px; margin-inline: auto; }

.vg-balance { text-wrap: balance; }

/* Vertical rule between the seller and buyer columns; drops away when the
 * columns stack. */
.vg-divider-right { border-right: var(--wp--custom--rule); }

@media (max-width: 781px) {
	.vg-divider-right { border-right: 0; padding-right: 0; }
}