/*
 * PORCH components: buttons, cards, forms, sticky phone bar, trust bar.
 *
 * Bricks templates target these class names directly. The geometry,
 * radius, shadow, and active-state values are locked here so PORCH
 * never drifts at the component level even if a template is rebuilt.
 */

/* ============================================================
 * Buttons
 * Universal: 50px pill radius, Inter 16/600, tight tracking,
 * scale(0.95) active state, 0.2s ease. Touch min 44px on mobile.
 * ============================================================ */

.porch-btn,
.porch-btn-primary,
.porch-btn-secondary,
.porch-btn-phone,
.porch-btn-tertiary,
.porch-btn-on-deep,
.porch-btn-on-deep-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--porch-space-2);
	font-family: var(--porch-font-sans);
	font-size: var(--porch-fs-body);
	font-weight: var(--porch-fw-semibold);
	letter-spacing: var(--porch-ls-tight);
	line-height: 1;
	text-decoration: none;
	border-radius: var(--porch-radius-pill);
	padding: var(--porch-btn-padding-y-desktop) var(--porch-btn-padding-x);
	cursor: pointer;
	transition: background-color var(--porch-dur-fast) var(--porch-easing),
		color var(--porch-dur-fast) var(--porch-easing),
		border-color var(--porch-dur-fast) var(--porch-easing),
		transform var(--porch-dur-fast) var(--porch-easing);
	border: 1px solid transparent;
	min-height: var(--porch-btn-touch-min);
	white-space: nowrap;
}

.porch-btn:active,
.porch-btn-primary:active,
.porch-btn-secondary:active,
.porch-btn-phone:active,
.porch-btn-on-deep:active,
.porch-btn-on-deep-outline:active {
	transform: scale(0.95);
}

.porch-btn:focus-visible,
.porch-btn-primary:focus-visible,
.porch-btn-secondary:focus-visible,
.porch-btn-phone:focus-visible {
	outline: 2px solid var(--porch-cta-green);
	outline-offset: 3px;
}

/* Primary CTA */
.porch-btn-primary {
	background: var(--porch-cta-green);
	color: var(--porch-text-white);
	border-color: var(--porch-cta-green);
}

.porch-btn-primary:hover {
	background: var(--porch-cta-green-hover);
	border-color: var(--porch-cta-green-hover);
	color: var(--porch-text-white);
	text-decoration: none;
}

/* Secondary CTA */
.porch-btn-secondary {
	background: transparent;
	color: var(--porch-cta-green);
	border: 1.5px solid var(--porch-cta-green);
}

.porch-btn-secondary:hover {
	background: rgba(0, 117, 74, 0.08);
	color: var(--porch-cta-green);
	text-decoration: none;
}

/* Phone CTA */
.porch-btn-phone {
	background: var(--porch-black);
	color: var(--porch-text-white);
	padding: 12px 24px;
}

.porch-btn-phone:hover {
	background: var(--porch-black);
	color: var(--porch-text-white);
	text-decoration: none;
}

/* Tertiary text link */
.porch-btn-tertiary {
	background: transparent;
	color: var(--porch-cta-green);
	padding: 0;
	min-height: 0;
	font-weight: var(--porch-fw-medium);
	border: 0;
	border-radius: 0;
}

.porch-btn-tertiary:hover {
	text-decoration: underline;
	color: var(--porch-cta-green-hover);
}

/* White on Deep Green: primary pair inside dark bands */
.porch-btn-on-deep {
	background: var(--porch-white);
	color: var(--porch-cta-green);
	border-color: var(--porch-white);
}

.porch-btn-on-deep:hover {
	background: var(--porch-ceramic);
	border-color: var(--porch-ceramic);
	color: var(--porch-cta-green);
}

/* Outlined White on Deep Green: secondary pair */
.porch-btn-on-deep-outline {
	background: transparent;
	color: var(--porch-text-white);
	border: 1.5px solid var(--porch-white);
}

.porch-btn-on-deep-outline:hover {
	background: var(--porch-white-10);
	color: var(--porch-text-white);
}

/* Mobile button padding for tap targets */
@media (max-width: 767px) {
	.porch-btn,
	.porch-btn-primary,
	.porch-btn-secondary,
	.porch-btn-on-deep,
	.porch-btn-on-deep-outline {
		padding: var(--porch-btn-padding-y-mobile) var(--porch-btn-padding-x);
	}
}

.porch-btn--full {
	width: 100%;
	display: flex;
}

/* ============================================================
 * Cards
 * ============================================================ */

.porch-card {
	background: var(--porch-white);
	border-radius: var(--porch-radius-card);
	box-shadow: var(--porch-shadow-card);
	padding: var(--porch-space-4);
}

@media (min-width: 768px) {
	.porch-card {
		padding: var(--porch-space-5);
	}
}

.porch-card--emphasis {
	box-shadow: var(--porch-shadow-card-emphasis);
}

.porch-card--lead {
	box-shadow: var(--porch-shadow-card-emphasis);
	padding: var(--porch-space-4);
}

@media (min-width: 768px) {
	.porch-card--lead {
		padding: var(--porch-space-5);
	}
}

.porch-card--hoverable {
	transition: transform var(--porch-dur-fast) var(--porch-easing),
		box-shadow var(--porch-dur-fast) var(--porch-easing);
}

.porch-card--hoverable:hover {
	transform: translateY(-4px);
	box-shadow: var(--porch-shadow-card-hover);
}

/* ============================================================
 * Forms
 * ============================================================ */

.porch-field {
	display: flex;
	flex-direction: column;
	gap: var(--porch-space-2);
	margin-bottom: var(--porch-space-4);
}

.porch-label {
	font-family: var(--porch-font-sans);
	font-size: var(--porch-fs-small);
	font-weight: var(--porch-fw-semibold);
	color: var(--porch-text-black);
	letter-spacing: var(--porch-ls-tight);
}

.porch-input,
.porch-select,
.porch-textarea {
	font-family: var(--porch-font-sans);
	font-size: var(--porch-fs-body);
	font-weight: var(--porch-fw-regular);
	color: var(--porch-text-black);
	background: var(--porch-white);
	border: 1.5px solid var(--porch-input-border);
	border-radius: var(--porch-radius-input);
	padding: 14px 16px;
	width: 100%;
	letter-spacing: var(--porch-ls-tight);
	transition: border-color var(--porch-dur-fast) var(--porch-easing),
		background-color var(--porch-dur-fast) var(--porch-easing);
}

.porch-input::placeholder,
.porch-textarea::placeholder {
	color: var(--porch-text-black-soft);
}

.porch-input:focus,
.porch-select:focus,
.porch-textarea:focus {
	outline: none;
	border-color: var(--porch-cta-green);
}

.porch-input.is-valid,
.porch-select.is-valid,
.porch-textarea.is-valid {
	background: var(--porch-input-valid-bg);
}

.porch-input.is-invalid,
.porch-select.is-invalid,
.porch-textarea.is-invalid {
	border-color: var(--porch-error);
}

.porch-help {
	font-size: var(--porch-fs-micro);
	color: var(--porch-text-black-soft);
}

.porch-help.is-invalid {
	color: var(--porch-error);
}

/* ============================================================
 * Sticky mobile phone bar
 * Mobile-only fixed-bottom bar. Signature PORCH element.
 * ============================================================ */

.porch-sticky-phone-bar {
	display: none;
}

@media (max-width: 767px) {
	.porch-sticky-phone-bar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 56px;
		background: var(--porch-black);
		box-shadow: var(--porch-shadow-sticky-bar);
		z-index: 1000;
	}

	.porch-sticky-phone-bar__call,
	.porch-sticky-phone-bar__cta {
		flex: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--porch-space-2);
		color: var(--porch-text-white);
		font-family: var(--porch-font-sans);
		font-size: var(--porch-fs-body);
		font-weight: var(--porch-fw-semibold);
		letter-spacing: var(--porch-ls-tight);
		text-decoration: none;
	}

	.porch-sticky-phone-bar__call {
		border-right: 1px solid var(--porch-white-30);
	}

	body {
		padding-bottom: 56px;
	}
}

/* ============================================================
 * Trust badge bar (BBB, press logos)
 * Soft blue wash background.
 * ============================================================ */

.porch-trust-bar {
	background: var(--porch-trust-blue-light);
	padding: var(--porch-space-4) var(--porch-gutter);
}

.porch-trust-bar__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--porch-space-5);
	max-width: var(--porch-container-default);
	margin-inline: auto;
}

.porch-trust-bar__logo {
	height: 32px;
	width: auto;
	filter: saturate(0);
	opacity: 0.7;
}

/* ============================================================
 * Numbered process step
 * ============================================================ */

.porch-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: var(--porch-cta-green);
	color: var(--porch-text-white);
	border-radius: var(--porch-radius-circle);
	font-family: var(--porch-font-sans);
	font-size: var(--porch-fs-h3);
	font-weight: var(--porch-fw-bold);
	letter-spacing: var(--porch-ls-tight);
}

/* ============================================================
 * Before / After labels
 * ============================================================ */

.porch-ba-label {
	display: inline-block;
	background: var(--porch-black-87);
	color: var(--porch-text-white);
	font-size: var(--porch-fs-micro);
	font-weight: var(--porch-fw-semibold);
	padding: 4px 10px;
	border-radius: var(--porch-radius-badge);
	letter-spacing: var(--porch-ls-tight);
}

/* ============================================================
 * Header utilities
 * ============================================================ */

.porch-header {
	background: var(--porch-white);
	transition: box-shadow var(--porch-dur-fast) var(--porch-easing);
}

.porch-header.is-scrolled {
	box-shadow: var(--porch-shadow-header-scrolled);
}