/**
 * HTPLaw Contact Panel widget ("Schedule a consultation").
 *
 * Measured from the 4x Figma export of the Contact page (design px,
 * section top = 0 at y444): white band. Eyebrow cap top ~66 on its own
 * row; boxes ~63px below it. Left: the booking embed (the client's own
 * HTML; its card styling comes from the embed, ~700×772 in Figma). Right:
 * 349px card, 1px #d9d9d9 border, 6px radius; labels Inter 400 18px
 * uppercase copper (AA copper: Figma's #b87333 is 3.8:1 at this size);
 * values Source Serif 4 600 24/27 +5% #24597f, the phone underlined;
 * 2px dashed #d9d9d9 dividers (4px dashes) inset 16px left / 34px right.
 * Bottom padding 50. Below 900px the card moves under the booking area.
 * The booking area can also show a form shortcode in a white card (styles
 * below), alone or under the embed.
 */

.htplaw-cp {
	--_bg: var(--htplaw-cp-bg, var(--htplaw-color-surface));

	padding-top: var(--htplaw-cp-pad-top, 61px);
	padding-bottom: var(--htplaw-cp-pad-bottom, 50px);
	background: var(--_bg);
	color: var(--htplaw-color-primary);
}

.htplaw-cp__eyebrow {
	text-transform: uppercase;
}

.htplaw-cp__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 349px);
	align-items: start;
	column-gap: 37px;
	margin-top: 44px;
}

.htplaw-cp__booking {
	min-width: 0;
}

/* Shown only in the Elementor editor while no embed code is set. */
.htplaw-cp__placeholder {
	display: grid;
	place-items: center;
	min-height: 400px;
	margin: 0;
	padding: 24px;
	border: 2px dashed #d9d9d9;
	border-radius: var(--htplaw-radius);
	color: #6b7280;
	font-family: var(--htplaw-font-body);
	font-size: 15px;
	text-align: center;
}

/*
 * Form (booking area set to "Form" or "Both"): a white card like the
 * Form Panel's (28px padding here 32px, Inter 700 20px title). Fields are
 * styled by element rather than by plugin class, so an Elementor Pro Form
 * template, Contact Form 7 or WPForms all match: Inter, 1px #d8dde3
 * inputs with a 4px radius, AA copper submit button. Selectors are (0,2,1)
 * or higher to outrank the form plugins' own defaults.
 */
.htplaw-cp__embed + .htplaw-cp__form {
	margin-top: 32px;
}

.htplaw-cp__form {
	padding: 32px;
	border: 1px solid #d9d9d9;
	border-radius: var(--htplaw-radius);
	background: var(--htplaw-color-surface);
	font-family: var(--htplaw-font-body);
}

/* (0,2,0) beats the Elementor kit's heading rules. */
.htplaw-cp .htplaw-cp__form-title {
	margin: 0 0 20px;
	color: var(--htplaw-color-primary);
	font-family: var(--htplaw-font-body);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 28px;
}

.htplaw-cp__form label,
.htplaw-cp__form .elementor-field-label {
	color: var(--htplaw-color-primary);
	font-family: var(--htplaw-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
}

.htplaw-cp__form :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"]), select, textarea) {
	width: 100%;
	min-height: 44px;
	padding: 9px 14px;
	border: 1px solid #d8dde3;
	border-radius: 4px;
	background: var(--htplaw-color-surface);
	box-shadow: none;
	color: var(--htplaw-color-primary);
	font-family: var(--htplaw-font-body);
	font-size: 15px;
	line-height: 1.4;
	transition: border-color var(--htplaw-duration) var(--htplaw-ease);
}

.htplaw-cp__form textarea {
	min-height: 130px;
	resize: vertical;
}

.htplaw-cp__form :is(input, select, textarea):hover {
	border-color: #b9c1cc;
}

.htplaw-cp__form :is(input, select, textarea):focus {
	border-color: var(--htplaw-color-secondary);
	outline: var(--htplaw-focus-ring);
	outline-offset: 1px;
}

.htplaw-cp__form :is(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--htplaw-color-accent-strong);
}

/* White on #8f5a28: 5.7:1; hover navy, as the site's copper buttons.
   (0,4,0) for Elementor: its `.elementor-widget-form .elementor-button
   [type="submit"]` (0,3,0) sets Figma's #b87333 (3.5:1). */
.htplaw-cp .htplaw-cp__form :is(button[type="submit"], input[type="submit"]),
.htplaw-cp .htplaw-cp__form .elementor-field-type-submit .elementor-button {
	min-height: 46px;
	padding: 10px 24px;
	border: 0;
	border-radius: var(--htplaw-radius);
	background-color: var(--htplaw-color-accent-strong);
	color: var(--htplaw-color-on-dark);
	font-family: var(--htplaw-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--htplaw-duration) var(--htplaw-ease), box-shadow var(--htplaw-duration) var(--htplaw-ease);
}

.htplaw-cp .htplaw-cp__form :is(button[type="submit"], input[type="submit"]):is(:hover, :focus-visible),
.htplaw-cp .htplaw-cp__form .elementor-field-type-submit .elementor-button:is(:hover, :focus-visible) {
	background-color: var(--htplaw-color-primary);
	box-shadow: 0 8px 18px -6px rgb(14 27 44 / 28%);
	color: var(--htplaw-color-on-dark);
}

/* HTPLaw Contact Form template: button and "Or pick a time above ↑" share
   the last row, as in the Form Panel. */
.htplaw-cp__form .elementor-field-type-submit,
.htplaw-cp__form .elementor-field-group-pick_time {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	margin-bottom: 0;
}

.htplaw-cp__form .elementor-field-type-submit {
	order: 98;
}

.htplaw-cp__form .elementor-field-group-pick_time {
	order: 99;
	align-self: center;
}

.htplaw-cp .htplaw-form-pick {
	color: var(--htplaw-color-blue);
	font-family: var(--htplaw-font-body);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.htplaw-cp .htplaw-form-pick:hover {
	color: var(--htplaw-color-accent-strong);
}

.htplaw-cp__form .htplaw-form-note {
	margin: 0;
	color: #5f6672;
	font-size: 12px;
	line-height: 17px;
}

.htplaw-cp__form .elementor-message,
.htplaw-cp__form .wpcf7-response-output {
	font-family: var(--htplaw-font-body);
	font-size: 14px;
}

.htplaw-cp__card {
	margin: 0;
	padding: 36px 20px 45px 43px;
	border: 1px solid #d9d9d9;
	border-radius: var(--htplaw-radius);
	background: var(--htplaw-color-surface);
}

.htplaw-cp__item {
	position: relative;
	padding-bottom: 28px;
}

.htplaw-cp__item + .htplaw-cp__item {
	padding-top: 36px;
}

.htplaw-cp__item:last-child {
	padding-bottom: 0;
}

/* Dashed rule above every item but the first: 4px dashes, 4px gaps. */
.htplaw-cp__item + .htplaw-cp__item::before {
	content: "";
	position: absolute;
	top: 0;
	left: -27px;
	right: 14px;
	height: 2px;
	background: linear-gradient(90deg, #d9d9d9 50%, transparent 0) 0 0 / 8px 2px repeat-x;
}

.htplaw-cp__label {
	color: var(--htplaw-color-accent-strong);
	font-family: var(--htplaw-font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	text-transform: uppercase;
}

.htplaw-cp__value {
	margin: 19px 0 0;
	color: var(--htplaw-color-blue);
	font-family: var(--htplaw-font-heading);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: .05em;
	line-height: 27px;
	overflow-wrap: anywhere;
}

/* (0,2,0) beats Elementor's `.elementor a`. */
.htplaw-cp .htplaw-cp__link {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.htplaw-cp .htplaw-cp__link:hover {
	color: var(--htplaw-color-accent-strong);
}

@media (max-width: 1024px) {
	.htplaw-cp__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
		column-gap: 24px;
	}

	.htplaw-cp__card {
		padding-left: 28px;
	}

	.htplaw-cp__item + .htplaw-cp__item::before {
		left: -12px;
	}

	.htplaw-cp__value {
		font-size: 20px;
		line-height: 26px;
	}
}

@media (max-width: 900px) {
	.htplaw-cp {
		padding-top: var(--htplaw-cp-pad-top, 48px);
		padding-bottom: var(--htplaw-cp-pad-bottom, 48px);
	}

	.htplaw-cp__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
		margin-top: 28px;
	}
}

@media (max-width: 480px) {
	.htplaw-cp__form {
		padding: 22px 20px;
	}
}

/* Mobile spacing: section padding is capped at the shared mobile token
   (variables.css), so large desktop values set in Elementor don't carry
   over to tablets and phones; smaller custom values are kept. */
@media (max-width: 900px) {
	.htplaw-cp {
		padding-top: min(var(--htplaw-cp-pad-top, var(--htplaw-space-section)), var(--htplaw-space-section));
		padding-bottom: min(var(--htplaw-cp-pad-bottom, var(--htplaw-space-section)), var(--htplaw-space-section));
	}
}