/**
 * Vendo Kit — section styles.
 *
 * One rule of thumb: if a declaration would be identical in another section,
 * it belongs in base.css as a primitive. What is left here is only what makes
 * each section itself.
 *
 * Ordered to match the inserter: layout, heroes, content, proof, CTA, forms.
 */

/* =========================================================================
 * Layout — header
 * ====================================================================== */

.vk-header {
	padding-block: var(--vk-space-xs);
	background: var(--vk-color-header-bg);
	color: var(--vk-color-header-text);
	--vk-heading-color: var(--vk-color-header-text);
}

.vk-header.is-sticky {
	position: sticky;
	top: 0;
	z-index: 100;
}

.vk-header-inner {
	display: flex;
	align-items: center;
	gap: var(--vk-space-md);
}

.vk-header-logo { flex: none; text-decoration: none; }

.vk-header-logo img {
	width: auto;
	max-width: var(--vk-logo-width);
	height: var(--vk-logo-height);
	object-fit: contain;
}

.vk-header-wordmark {
	font-family: var(--vk-font-heading);
	font-size: var(--vk-text-lg);
	font-weight: var(--vk-weight-heading);
}

.vk-nav { margin-inline-start: auto; }

.vk-nav-list {
	display: flex;
	align-items: center;
	gap: var(--vk-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vk-nav-item { position: relative; }

.vk-nav-item > a {
	display: inline-flex;
	align-items: center;
	gap: .25em;
	padding: var(--vk-space-3xs) 0;
	font-weight: var(--vk-weight-strong);
	text-decoration: none;
	white-space: nowrap;
}

.vk-nav-item > a:hover,
.vk-nav-item > a[aria-current="page"] { color: var(--vk-color-brand); }

.vk-nav-caret { width: .9em; height: .9em; }

.vk-nav-sub {
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 10;
	min-width: 13rem;
	margin: 0;
	padding: var(--vk-space-2xs);
	list-style: none;
	background: var(--vk-color-bg);
	border-radius: var(--vk-radius-md);
	box-shadow: var(--vk-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--vk-duration) var(--vk-ease), transform var(--vk-duration) var(--vk-ease), visibility var(--vk-duration);
}

.vk-nav-item:hover > .vk-nav-sub,
.vk-nav-item:focus-within > .vk-nav-sub {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.vk-nav-sub a {
	display: block;
	padding: var(--vk-space-3xs) var(--vk-space-2xs);
	border-radius: var(--vk-radius-sm);
	color: var(--vk-color-ink);
	text-decoration: none;
}

.vk-nav-sub a:hover { background: var(--vk-color-surface); }

.vk-header-actions {
	display: flex;
	align-items: center;
	gap: var(--vk-space-sm);
	margin-inline-start: auto;
}

.vk-nav + .vk-header-actions { margin-inline-start: 0; }

.vk-header-phone {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-weight: var(--vk-weight-strong);
	text-decoration: none;
	white-space: nowrap;
}

.vk-header-phone:hover { color: var(--vk-color-brand); }

.vk-nav-toggle {
	display: none;
	margin-inline-start: auto;
	padding: var(--vk-space-3xs);
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.vk-nav-toggle .vk-nav-close,
.vk-nav-toggle[aria-expanded="true"] .vk-nav-open { display: none; }
.vk-nav-toggle[aria-expanded="true"] .vk-nav-close { display: block; }

@media (max-width: 1023px) {
	.vk-nav-toggle { display: block; }

	.vk-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		margin: 0;
		padding: var(--vk-space-sm) var(--vk-gutter) var(--vk-space-md);
		background: var(--vk-color-header-bg);
		box-shadow: var(--vk-shadow-lg);
	}

	.vk-nav:not(.is-open) { display: none; }

	.vk-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: var(--vk-space-2xs);
	}

	.vk-nav-sub {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: transparent;
		padding-inline-start: var(--vk-space-sm);
	}

	.vk-nav-sub a { color: inherit; }
	.vk-header-phone span { display: none; }
}

/* =========================================================================
 * Layout — footer
 * ====================================================================== */

.vk-footer {
	background: var(--vk-color-footer-bg);
	color: var(--vk-color-footer-text);
	--vk-heading-color: var(--vk-color-footer-text);
	--vk-muted-color: color-mix(in srgb, var(--vk-color-footer-text) 66%, transparent);
}

.vk-footer-grid {
	display: grid;
	gap: var(--vk-space-lg);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.vk-footer-brand { max-width: 24rem; }

.vk-footer-logo {
	max-width: calc(var(--vk-logo-width) * 1.2);
	height: auto;
	margin-bottom: var(--vk-space-xs);
}

.vk-footer-wordmark {
	display: block;
	margin-bottom: var(--vk-space-xs);
	font-family: var(--vk-font-heading);
	font-size: var(--vk-text-lg);
	font-weight: var(--vk-weight-heading);
}

.vk-footer-heading {
	margin-bottom: var(--vk-space-2xs);
	font-size: var(--vk-text-md);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.vk-footer-links,
.vk-footer-hours,
.vk-social,
.vk-footer-legal {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vk-footer-links li,
.vk-footer-hours li { margin-bottom: var(--vk-space-3xs); }

.vk-footer-links a { text-decoration: none; }
.vk-footer-links a:hover { color: var(--vk-color-brand); }

.vk-footer-address {
	margin-top: var(--vk-space-2xs);
	font-style: normal;
	color: var(--vk-muted-color);
}

.vk-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vk-space-2xs);
	margin-top: var(--vk-space-sm);
}

.vk-social a {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	padding: var(--vk-space-3xs) var(--vk-space-2xs);
	border: var(--vk-border-width) solid var(--vk-card-border, var(--vk-color-border));
	border-radius: var(--vk-radius-button);
	font-size: var(--vk-text-sm);
	text-decoration: none;
}

.vk-social a:hover {
	background: var(--vk-color-brand);
	border-color: var(--vk-color-brand);
	color: var(--vk-color-on-brand);
}

.vk-footer-base {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vk-space-sm);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--vk-space-xl);
	padding-top: var(--vk-space-sm);
	border-top: var(--vk-border-width) solid var(--vk-card-border, var(--vk-color-border));
	font-size: var(--vk-text-sm);
}

.vk-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vk-space-sm);
}

.vk-footer-legal a { text-decoration: none; }
.vk-footer-legal a:hover { color: var(--vk-color-brand); }

/* =========================================================================
 * Team
 * ====================================================================== */

.vk-member {
	display: flex;
	flex-direction: column;
	text-align: start;
}

.vk-member-photo {
	margin-bottom: var(--vk-space-xs);
	overflow: hidden;
	border-radius: var(--vk-radius-md);
	background: var(--vk-card-bg, var(--vk-color-surface));
}

.vk-member-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vk-member-photo--portrait { aspect-ratio: 3 / 4; }
.vk-member-photo--square   { aspect-ratio: 1; }

.vk-member-photo--circle {
	aspect-ratio: 1;
	width: 10rem;
	max-width: 100%;
	border-radius: 50%;
}

/* The editor's stand-in when someone has no photograph yet. */
.vk-member-photo.is-empty {
	display: grid;
	place-items: center;
	border: var(--vk-border-width) dashed var(--vk-card-border, var(--vk-color-border));
	color: var(--vk-muted-color, var(--vk-color-muted));
	font-size: var(--vk-text-sm);
}

.vk-member-name {
	margin-bottom: 0;
	font-size: var(--vk-text-lg);
}

.vk-member-name a { text-decoration: none; }
.vk-member-name a:hover { color: var(--vk-color-accent); }

.vk-member-role {
	margin-bottom: var(--vk-space-3xs);
	color: var(--vk-color-accent);
	font-weight: var(--vk-weight-strong);
	font-size: var(--vk-text-sm);
}

.vk-tone-dark .vk-member-role { color: var(--vk-color-brand); }
.vk-tone-brand .vk-member-role { color: inherit; opacity: .75; }

.vk-member-creds {
	margin-bottom: var(--vk-space-2xs);
	color: var(--vk-muted-color, var(--vk-color-muted));
	font-size: var(--vk-text-sm);
}

.vk-member-bio { font-size: var(--vk-text-sm); }

/* The full bio expander. Built on <details> for the same reasons as the FAQ:
   no JavaScript, keyboard accessible, and findable with the browser's own
   in-page search. */
.vk-member-more {
	margin-top: var(--vk-space-2xs);
	font-size: var(--vk-text-sm);
}

.vk-member-more summary {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	cursor: pointer;
	color: var(--vk-color-accent);
	font-weight: var(--vk-weight-strong);
	list-style: none;
}

.vk-member-more summary::-webkit-details-marker { display: none; }

.vk-tone-dark .vk-member-more summary,
.vk-tone-brand .vk-member-more summary { color: inherit; }

.vk-member-caret { transition: transform var(--vk-duration) var(--vk-ease); }
.vk-member-more[open] .vk-member-caret { transform: rotate(180deg); }

.vk-member-more .vk-prose { padding-top: var(--vk-space-2xs); }

.vk-member-contact {
	margin: auto 0 0;
	padding-top: var(--vk-space-xs);
	list-style: none;
	display: grid;
	gap: var(--vk-space-3xs);
	font-size: var(--vk-text-sm);
}

.vk-member-contact a {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	text-decoration: none;
}

.vk-member-contact a:hover { color: var(--vk-color-accent); }
.vk-member-contact .vk-icon { width: 1em; height: 1em; }

/* =========================================================================
 * Social proof
 * ====================================================================== */

.vk-review-by {
	display: flex;
	align-items: center;
	gap: var(--vk-space-2xs);
	font-size: var(--vk-text-sm);
}

.vk-review-by span { display: flex; flex-direction: column; }

.vk-avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.vk-review-text { margin: var(--vk-space-2xs) 0 var(--vk-space-sm); }
.vk-reviews-empty { text-align: center; }
.vk-reviews-widget { margin-top: var(--vk-space-sm); }

/* =========================================================================
 * Video facade
 * ====================================================================== */

.vk-video { position: relative; }

.vk-video-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: color-mix(in srgb, #000 22%, transparent);
	border: 0;
	border-radius: inherit;
	color: #fff;
	cursor: pointer;
	transition: background var(--vk-duration) var(--vk-ease);
}

.vk-video-play:hover { background: color-mix(in srgb, #000 34%, transparent); }

.vk-video-play .vk-icon {
	width: 3.5rem;
	height: 3.5rem;
	padding: 1rem;
	background: var(--vk-color-button-bg);
	border-radius: 50%;
	color: var(--vk-color-button-text);
}

.vk-video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: inherit;
}