/*
 * WordPress-only additions/overrides.
 * style.css is ported verbatim from html/Assest/css/style.css and is never
 * hand-edited for WP-specific needs — anything WordPress forces (CF7 form
 * wrappers, admin-bar offset, block-editor content spacing) goes here.
 */

/* Contact Form 7 validation/response messaging uses generic wrappers that
   the original design's hand-written forms didn't need to account for. */
.wpcf7-response-output {
	margin: 0.75rem 0 0;
	padding: 0.65rem 1rem;
	border-radius: 8px;
	font-size: 0.9rem;
}

.wpcf7-not-valid-tip {
	color: #e0432c;
	font-size: 0.8rem;
	margin-top: 0.25rem;
	display: block;
}

.wpcf7-form.sent .wpcf7-response-output {
	border-color: #14a6a6;
	color: #0d6b6b;
	background: #e7f7f6;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
	border-color: #ff6a2b;
	color: #a8401a;
	background: #fff1ea;
}

/* The original design wraps each card thumbnail in a <div>; these were
   changed to <a> tags (clickable thumbnails) when building the templates,
   but .cvx-*-image's height/overflow rules assume a block-level element —
   an <a> defaults to display:inline, on which height/overflow have no
   effect, so the image rendered at its natural (uncropped) size and
   pushed the card's text content out of view entirely. */
.cvx-latest-image,
.cvx-featured-image,
.cvx-horizontal-image {
	display: block;
}

/* The design's category badges are typed in uppercase directly in the
   source HTML ("DIGITAL HEALTH"); WordPress category names are natural
   case ("Digital Health"), so the transform is applied here instead of
   uppercasing in PHP (which would mangle any HTML entity in the name,
   e.g. "AI &amp; Automation" -> "AI &AMP; AUTOMATION"). */
.cvx-category {
	text-transform: uppercase;
}

/* Post content pasted through the block editor needs baseline spacing that
   the design's hand-authored blog-section markup already had inline. */
.blog-content .entry-content > * + * {
	margin-top: 1rem;
}

/* Insights sidebar "Request a Demo" box — reuses .demo-section's
   .form-control/.form-select styling (which is otherwise scoped to the
   Home page's demo section) but as a compact white card sized for a
   narrow sidebar column, not the Home section's 46px full-width padding. */
.cvx-insights-sidebar .demo-section {
	padding: 28px;
	background: #fff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.cvx-demo-box h3 {
	margin: 0 0 10px;
	color: var(--navy);
	font-size: 1.25rem;
	font-weight: 700;
}

.cvx-demo-box > p {
	color: var(--text-muted);
	font-size: 0.85rem;
	line-height: 1.6;
	margin-bottom: 18px;
}

.cvx-demo-box .cvx-demo-field {
	margin-bottom: 14px;
}

.cvx-demo-box .form-control,
.cvx-demo-box .form-select {
	width: 100%;
}

/* Single-post breadcrumb — new addition, not part of the original design's
   own CSS (which never had one), so it's built from the same tokens as
   the rest of the blog-detail page rather than editing style.css. */
.cvx-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	font-size: 0.85rem;
	color: var(--text-muted, #5f6c85);
}

.cvx-breadcrumb a {
	color: var(--text-muted, #5f6c85);
	text-decoration: none;
}

.cvx-breadcrumb a:hover {
	color: var(--navy);
	text-decoration: underline;
}

.cvx-breadcrumb-current {
	color: var(--blog-dark, #26384c);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 320px;
}

.blog-header .cvx-category {
	margin-bottom: 10px;
}

@media (max-width: 767px) {
	.cvx-breadcrumb-current {
		max-width: 200px;
	}
}

/* Virtual Tour — play the video inline in the same card instead of
   navigating away, when tour_video points at a direct video file.
   .cvx-tour-video is positioned exactly like .video-thumbnail (which it
   sits on top of once revealed) so the card's size/shape never changes. */
.cvx-tour-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	display: none;
}

.cvx-video-card-inline.cvx-playing .cvx-tour-video {
	display: block;
}

.cvx-video-card-inline.cvx-playing .video-thumbnail,
.cvx-video-card-inline.cvx-playing .video-overlay,
.cvx-video-card-inline.cvx-playing .brand-row,
.cvx-video-card-inline.cvx-playing .play-btn-wrap {
	display: none;
}

.cvx-video-card-inline {
	cursor: pointer;
}

.cvx-video-card-inline.cvx-playing {
	cursor: default;
}