/* Blog posts: sticky contact form sidebar + in-body form (salient-child/inc/hs-blog-form.php).
   Same card as the Practice Area / Location template (css/hs-practice-area.css). Keep the two in step. */

/* ---- Form card (sidebar and in-body) ---- */
.hs-form-card {
	background: #1b1b1b;
	border: 1px solid rgba(161, 119, 76, 0.45);
	border-radius: 20px;
	padding: 28px 26px 22px;
}
.hs-form-card .hs-form-title {
	font-family: "Playfair Display", serif;
	font-weight: 600;
	font-size: 26px;
	line-height: 1.2;
	color: #d59e66;
	margin-bottom: 6px !important;
	padding-bottom: 0 !important;
}
.hs-form-card .hs-form-phone {
	color: #faf7f2;
	margin-bottom: 16px !important;
	padding-bottom: 0 !important;
}
.hs-form-card .hs-form-phone a {
	color: #d59e66;
	font-weight: 600;
}

/* Salient only gives form fields their light-on-dark look inside rows marked .span_12.light (the practice
   template's rows are). A post isn't, so the fields would show dark text on the dark card. Same look here:
   white text, faint white fill, white underline. */
body .hs-form-card .forminator-ui.forminator-custom-form[data-design="default"] input.forminator-input,
body .hs-form-card .forminator-ui.forminator-custom-form[data-design="default"] textarea.forminator-textarea,
body .hs-form-card .forminator-ui.forminator-custom-form[data-design="default"] select {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.04);
	border: 0;
	border-bottom: 2px solid #fff;
	box-shadow: none;
}
body .hs-form-card .forminator-ui.forminator-custom-form[data-design="default"] input.forminator-input:focus,
body .hs-form-card .forminator-ui.forminator-custom-form[data-design="default"] textarea.forminator-textarea:focus {
	border-bottom-color: #fff;
	box-shadow: none;
}

/* ---- In-body form ([hs_contact_form]) ----
   Shown at every width unless the sidebar layout is on; with the sidebar on it only appears at the width
   where the sidebar drops below the content (under 1000px). */
.hs-inline-form {
	max-width: 640px;
	margin: 2em auto;
}
@media only screen and (min-width: 1000px) {
	body.hs-blog-sidebar-on .hs-inline-form {
		display: none;
	}
}

/* ---- Two columns: post content + sticky form (1000px and up) ---- */
@media only screen and (min-width: 1000px) {
	/* Salient sets body { overflow: hidden } while <html> is the scroller, which turns body into a
	   non-scrolling scroll container and breaks position: sticky. clip hides horizontal overflow the
	   same way without creating a scroll container (same fix as the practice template). */
	body.hs-blog-sidebar-on {
		overflow: visible !important;
		overflow-x: clip !important;
	}
	/* Salient caps .post-area at the "blog width" (1000px) when the sidebar is off; lift the cap and split it. */
	body.single-post.hs-blog-sidebar-on #ajax-content-wrap .container-wrap.no-sidebar .post-area {
		max-width: none;
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		column-gap: 48px;
		align-items: start;
	}
	body.hs-blog-sidebar-on .post-area > article {
		grid-column: 1;
		grid-row: 1;
		min-width: 0;
	}
	body.hs-blog-sidebar-on .post-area > *:not(article):not(.hs-blog-sidebar) {
		grid-column: 1;
		min-width: 0;
	}
	/* The sidebar runs the full height of the post so the card has room to stick. */
	body.hs-blog-sidebar-on .hs-blog-sidebar {
		grid-column: 2;
		grid-row: 1 / span 20;
		align-self: stretch;
	}
}

/* Sticky card: only sticks when the whole card, including Submit, fits below the fixed header; on shorter
   windows it stays in normal flow. Same breakpoints as the practice template. */
@media only screen and (min-width: 1000px) and (min-height: 821px) {
	body.hs-blog-sidebar-on .hs-blog-sidebar .hs-form-card {
		position: sticky;
		top: 110px;
	}
}
@media only screen and (min-width: 1000px) and (min-height: 640px) and (max-height: 820px) {
	body.hs-blog-sidebar-on .hs-blog-sidebar .hs-form-card {
		position: sticky;
		top: 86px;
	}
}
/* Compact card on laptop-height windows (~1366x768 / 1536x864 screens) so it fits while sticky. */
@media only screen and (min-width: 1000px) and (max-height: 820px) {
	.hs-blog-sidebar .hs-form-card { padding: 16px 20px 12px; }
	.hs-blog-sidebar .hs-form-title { font-size: 20px; }
	.hs-blog-sidebar .hs-form-phone { margin-bottom: 6px !important; font-size: 14px; }
	.hs-blog-sidebar .forminator-row { margin-bottom: 8px !important; }
	.hs-blog-sidebar .forminator-label { margin-bottom: 2px !important; font-size: 12px !important; }
	.hs-blog-sidebar .forminator-input { height: 38px !important; min-height: 38px !important; }
	.hs-blog-sidebar textarea.forminator-textarea { height: 60px !important; min-height: 60px !important; }
}

/* Under 1000px the sidebar sits below the post content. */
@media only screen and (max-width: 999px) {
	.hs-blog-sidebar {
		margin-top: 32px;
	}
}