/* Practice Area / Location template (salient-child/templates/page-practice-area.php). */

/* ---- Hero ----
   The "Dedicated Personal Injury Attorneys…" tagline is absolutely positioned at the top right, so a
   long one-line H1 can run underneath it. Desktop: reserve the tagline's width (~291px + gap) on the
   right of the H1 so the title wraps before reaching it. Tablet/phone: stack the tagline above the H1
   instead, and drop the spacing that only existed to clear the floating version. */
@media only screen and (min-width: 1000px) {
	.hs-pa-template .hs-pa-hero .page-hero-text {
		padding-right: 330px;
		box-sizing: border-box;
	}
}
@media only screen and (max-width: 999px) {
	.hs-pa-template .hs-pa-hero .floating-text {
		position: static !important;
		transform: none !important;
		text-align: right;
		width: auto !important;
		padding: 8px 0 0 !important;
		margin: 0 0 14px !important;
	}
	.hs-pa-template .hs-pa-hero .page-hero-text {
		padding-top: 0 !important;
	}
}

/* ---- Page content (left column) ---- */
/* Salient spaces paragraphs with padding-bottom, which doesn't collapse into the next heading's top margin
   (lists use a margin, which does), so headings after a paragraph sat ~25px lower than after a list. The
   same spacing as a margin keeps paragraph-to-paragraph spacing and gives every heading the same gap. */
.hs-pa-template .hs-pa-content .hs-pa-body p {
	padding-bottom: 0;
	margin-bottom: 1.5em;
}
.hs-pa-template .hs-pa-content .hs-pa-body h2 {
	color: #a1774c;
	margin: 1.1em 0 0.5em;
	padding-bottom: 0.45em;
	border-bottom: 1px solid rgba(161, 119, 76, 0.45);
}
.hs-pa-template .hs-pa-content .hs-pa-body h3 {
	color: #d59e66;
	margin: 0.9em 0 0.4em;
}
.hs-pa-template .hs-pa-content .hs-pa-body > :first-child,
.hs-pa-template .hs-pa-content .hs-pa-body h2:first-child {
	margin-top: 0;
}
.hs-pa-template .hs-pa-content .hs-pa-body a {
	color: #d59e66;
}
.hs-pa-template .hs-pa-content .hs-pa-body ul,
.hs-pa-template .hs-pa-content .hs-pa-body ol {
	margin-bottom: 1.5em; /* same as paragraphs, so the space above the next heading never depends on what precedes it */
}
/* Bold list items are bright white (list text is cream), including linked ones. This used to be an inline
   color on each item; keep colors here so the editor content stays plain. Keep in sync with hs-pa-editor.css. */
.hs-pa-template .hs-pa-content .hs-pa-body li strong {
	color: #fff;
}

/* ---- Video block ---- */
.hs-pa-template .hs-pa-content .nectar-video-box {
	max-width: 720px; /* a little smaller than the full content column (~845px at desktop) */
	margin-bottom: 20px;
	border-radius: 14px;
	overflow: hidden;
}
.hs-pa-template .hs-pa-video-buttons .wpb_wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 40px;
}
.hs-pa-template .hs-pa-video-buttons .nectar-button {
	margin: 0 !important;
}

/* ---- Sticky contact form (right column) ---- */
.hs-pa-template .hs-pa-sidebar .hs-pa-form {
	background: #1b1b1b;
	border: 1px solid rgba(161, 119, 76, 0.45);
	border-radius: 20px;
	padding: 28px 26px 22px;
}
.hs-pa-template .hs-pa-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-pa-template .hs-pa-form-phone {
	color: #faf7f2;
	margin-bottom: 16px !important;
}
.hs-pa-template .hs-pa-form-phone a {
	color: #d59e66;
	font-weight: 600;
}

@media only screen and (min-width: 1000px) {
	.hs-pa-template .hs-pa-main > .row_col_wrap_12,
	.hs-pa-template .hs-pa-main .row_col_wrap_12 {
		align-items: stretch;
	}
	.hs-pa-template .hs-pa-content {
		padding-right: 3% !important;
	}
	/* 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. */
	body.hs-pa-template {
		overflow: visible !important;
		overflow-x: clip !important;
	}
}

/* Sticky form card. The column and its wrappers stretch to the content column's height, so the
   element that sticks is the form's text block (only as tall as the card). It only sticks when the
   whole card, including Submit, fits below the header; on shorter windows it stays in normal flow. */
@media only screen and (min-width: 1000px) and (min-height: 821px) {
	.hs-pa-template .hs-pa-sidebar .wpb_text_column {
		position: sticky;
		top: 110px;
	}
}
@media only screen and (min-width: 1000px) and (min-height: 640px) and (max-height: 820px) {
	.hs-pa-template .hs-pa-sidebar .wpb_text_column {
		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-pa-template .hs-pa-sidebar .hs-pa-form { padding: 16px 20px 12px; }
	.hs-pa-template .hs-pa-form-title { font-size: 20px; }
	.hs-pa-template .hs-pa-form-phone { margin-bottom: 6px !important; font-size: 14px; }
	.hs-pa-template .hs-pa-sidebar .forminator-row { margin-bottom: 8px !important; }
	.hs-pa-template .hs-pa-sidebar .forminator-label { margin-bottom: 2px !important; font-size: 12px !important; }
	.hs-pa-template .hs-pa-sidebar .forminator-input { height: 38px !important; min-height: 38px !important; }
	.hs-pa-template .hs-pa-sidebar textarea.forminator-textarea { height: 60px !important; min-height: 60px !important; }
}

@media only screen and (max-width: 999px) {
	.hs-pa-template .hs-pa-sidebar {
		margin-top: 32px;
	}
}

/* ---- Global sections ----
   The reused homepage sections (Testimonials, Cases We Handle) rely on this rule from the
   homepage's own WPBakery Custom CSS for their dark-text rows; without it their text
   inherits the site's light body color and disappears on the light backgrounds. */
.hs-pa-template .full-width-section > .col.span_12.dark,
.hs-pa-template .full-width-content > .col.span_12.dark {
	color: #3B3B40 !important;
}

/* ---- Case Results slider (inc/hs-case-results.php) ----
   Matches the cards on /case-results/ (built there with per-element WPBakery settings). */
.hs-pa-template .hs-cr-heading {
	font-family: "Playfair Display", serif;
	font-weight: 600;
	font-size: clamp(36px, 4vw, 56px);
	line-height: 1.1;
	color: #d59e66;
	text-align: center;
	margin: 0 0 36px;
}
.hs-pa-template .hs-cr-card {
	position: relative;
	overflow: hidden;
	background: #1b1b1b;
	border-radius: 20px;
	padding: 48px 48px 40px;
	min-height: 400px;
	margin: 0 8px;
	color: #fff;
	font-family: Montserrat, sans-serif;
	transition: transform 0.3s ease-in-out;
}
.hs-pa-template .hs-cr-card:hover {
	transform: scale(1.03);
}
.hs-pa-template .hs-cr-category {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	margin-bottom: 24px;
	padding-right: 56px;
}
.hs-pa-template .hs-cr-title {
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	color: #d59e66;
	text-transform: uppercase;
	margin-bottom: 12px;
	padding-right: 56px;
}
.hs-pa-template .hs-cr-detail {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	padding-right: 56px;
}
.hs-pa-template .hs-cr-amount {
	font-size: clamp(48px, 5vw, 72px);
	font-weight: 700;
	line-height: 1;
	color: #d59e66;
	margin: 48px 0 12px;
}
.hs-pa-template .hs-cr-outcome {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	padding-left: 80px;
}
.hs-pa-template .hs-cr-watermark {
	position: absolute;
	right: -36px;
	top: 110px;
	transform: rotate(-90deg);
	font-size: clamp(50px, 6.8vw, 65px);
	font-weight: 600;
	color: #222;
	pointer-events: none;
}
.hs-pa-template .hs-cr-arrow {
	position: absolute;
	right: 28px;
	bottom: 28px;
	font-size: 36px;
	color: #ce9e6f;
}
.hs-pa-template .hs-cr-more {
	margin-top: 36px;
}
@media only screen and (max-width: 690px) {
	.hs-pa-template .hs-cr-card {
		padding: 36px 28px 32px;
		min-height: 360px;
	}
	.hs-pa-template .hs-cr-title {
		font-size: 24px;
	}
}