/*
 * 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);
}

/* ============================================================
 * Header — mobile drawer scaffolding (visible only on mobile)
 * The toggle checkbox is always-hidden via attribute; the
 * hamburger icon button and the drawer-only phone link both stay
 * hidden until the mobile media query below.
 * ============================================================ */

header[id="porch-header"] .porch-mobile-toggle { display: none !important; }
header[id="porch-header"] .porch-hamburger { display: none; }
header[id="porch-header"] .porch-header-nav-phone { display: none; }

/* ============================================================
 * Mobile responsive overrides
 * Catches every grid pattern used in porch_div_html inline styles
 * and collapses to single column under 768px. Tightens section
 * padding, scales down headlines, makes CTAs full-width.
 * ============================================================ */

@media (max-width: 768px) {
	/* Bricks wraps section content in display:flex containers. Grids inside
	   them won't fill width by default — force full width so the column
	   collapse below actually has a 100% canvas to render against. */
	section[id^="porch-"] [style*="display:grid"] {
		width: 100% !important;
	}

	/* Collapse multi-column grids regardless of inline grid-template-columns */
	section[id^="porch-"] [style*="grid-template-columns:repeat(2"],
	section[id^="porch-"] [style*="grid-template-columns:repeat(3"],
	section[id^="porch-"] [style*="grid-template-columns:repeat(4"],
	section[id^="porch-"] [style*="grid-template-columns:1fr 1fr"],
	section[id^="porch-"] [style*="grid-template-columns:1fr 1.2fr"],
	section[id^="porch-"] [style*="grid-template-columns:1fr 1.3fr"],
	section[id^="porch-"] [style*="grid-template-columns:1fr 1.4fr"],
	section[id^="porch-"] [style*="grid-template-columns:1fr 1.5fr"],
	section[id^="porch-"] [style*="grid-template-columns:1.15fr 1fr"],
	section[id^="porch-"] [style*="grid-template-columns:1.2fr 1fr"],
	section[id^="porch-"] [style*="grid-template-columns:1.4fr 1fr"] {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	/* Tighten horizontal section padding */
	section[id^="porch-"] {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Section vertical padding reduced */
	#porch-hero-video-form { padding-top: 8px !important; padding-bottom: 32px !important; }

	/* Headline scale-down for mobile readability */
	section[id^="porch-"] h1 { font-size: 32px !important; line-height: 1.15 !important; }
	section[id^="porch-"] h2 { font-size: 26px !important; line-height: 1.2 !important; }
	section[id^="porch-"] h3 { font-size: 20px !important; line-height: 1.3 !important; }

	/* Hero H1 inside the video+form section is larger; pin to readable size */
	#porch-hero-video-form .porch-vf-h1 { font-size: 28px !important; margin-bottom: 16px !important; }

	/* Form card padding tighter */
	#porch-hero-video-form .porch-vf-card { padding: 24px 20px !important; }

	/* CTA buttons full-width on mobile */
	section[id^="porch-"] a[href*="lead-form"],
	section[id^="porch-"] a[href="#lead-form"] {
		display: block !important;
		text-align: center !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Featured On bar — tighter section padding + 2-on-top / 3-on-bottom
	   grid. Row 1 (LA Times + MSNBC) anchored to inner 4 columns so the
	   pair reads as centered like the 3-logo row below it. */
	#porch-trust-bar { padding-top: 24px !important; padding-bottom: 24px !important; }
	#porch-trust-bar [style*="margin-bottom:24px"] { margin-bottom: 12px !important; } /* "Featured On" eyebrow */

	#porch-trust-bar [style*="flex-wrap:wrap"] {
		display: grid !important;
		grid-template-columns: repeat(6, 1fr) !important;
		gap: 12px 4px !important;
		max-width: none !important;
		margin: 0 auto !important;
		align-items: center !important;
	}
	#porch-trust-bar [style*="flex-wrap:wrap"] img { justify-self: center; max-width: 100%; }
	#porch-trust-bar [style*="flex-wrap:wrap"] img:nth-of-type(1) { grid-column: 2 / span 2; height: 80px !important; } /* LA Times: middle-left */
	#porch-trust-bar [style*="flex-wrap:wrap"] img:nth-of-type(2) { grid-column: 4 / span 2; height: 40px !important; } /* MSNBC: middle-right */
	#porch-trust-bar [style*="flex-wrap:wrap"] img:nth-of-type(3) { grid-column: span 2; height: 64px !important; } /* ABC 7 */
	#porch-trust-bar [style*="flex-wrap:wrap"] img:nth-of-type(4) { grid-column: span 2; height: 84px !important; } /* Fox 11 */
	#porch-trust-bar [style*="flex-wrap:wrap"] img:nth-of-type(5) { grid-column: span 2; height: 70px !important; } /* AV Press */

	/* Veteran/BBB badges scale down */
	#porch-hero-video-form .porch-vf-badges img { height: 56px !important; }
	#porch-hero-video-form .porch-vf-badges {
		gap: 24px !important;
		margin: 0 !important; /* kill auto-margins so the gap below is predictable */
	}

	/* Match the video → tagline gap (16px) between the tagline and the badges */
	#porch-hero-video-form .porch-vf-left { gap: 16px !important; }

	/* Numbered offer cards: tighter padding */
	#porch-hiw-offer-formula [style*="background:rgba(255,255,255,0.05)"] { padding: 18px !important; gap: 16px !important; }

	/* About founder feature — Tim photo centered, narrower */
	#porch-about-founder img { max-width: 280px !important; margin: 0 auto !important; }

	/* About committed: photo back inline, no absolute positioning */
	#porch-about-committed [style*="position:absolute"] {
		position: static !important;
		transform: none !important;
		width: 100% !important;
		height: auto !important;
		max-width: 280px !important;
		margin: 32px auto 0 !important;
	}
	#porch-about-committed [style*="max-width:62%"] { max-width: 100% !important; }

	/* Contact split: phone/email/address icons stack cleanly */
	#porch-contact-split { padding-top: 48px !important; padding-bottom: 48px !important; }

	/* Reviews cards on small viewport — tighter inside padding */
	section[id^="porch-review-"] [style*="background:#ffffff"][style*="border-radius:12px"] {
		padding: 24px !important;
	}

	/* Process step cards (How's It Work) — center text + icon stacks */
	#porch-process-iconic [style*="grid-template-columns:repeat(3"] > div { text-align: center; }

	/* Reduce form-mid photo size on mobile */
	#porch-form-mid-photo img { max-width: 280px !important; margin: 0 auto !important; }

	/* Reassurance block image */
	#porch-reassurance img { max-width: 280px !important; margin: 0 auto !important; }

	/* CTA button padding scale-down */
	section[id^="porch-"] a[style*="border-radius:50px"] {
		padding: 16px 24px !important;
		font-size: 16px !important;
	}

	/* Header tighter on mobile */
	#porch-header { padding-left: 16px !important; padding-right: 16px !important; }

	/* Body text size floor for readability */
	section[id^="porch-"] p { font-size: 16px !important; }

	/* Hide the desktop phone-pill on mobile (sticky bottom phone bar covers
	   click-to-call). Mobile keeps the call link inside the drawer menu. */
	header[id="porch-header"] .porch-header-phone-pill { display: none !important; }

	/* === Mobile hamburger drawer === */
	header[id="porch-header"] .porch-hamburger { display: inline-flex !important; }

	/* Nav becomes an off-canvas drawer that slides in when the toggle is
	   checked. By default it's hidden + positioned off-screen. */
	header[id="porch-header"] .porch-header-nav {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 24px !important;
		position: fixed !important;
		top: 64px !important;
		right: 0 !important;
		left: 0 !important;
		background: #1E3932 !important;
		padding: 32px 24px !important;
		max-height: 0 !important;
		overflow: hidden !important;
		transition: max-height 240ms ease, padding 240ms ease !important;
		z-index: 1000 !important;
		box-shadow: 0 12px 24px rgba(0,0,0,0.18) !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	header[id="porch-header"] .porch-header-nav a {
		font-size: 17px !important;
		padding: 8px 0 !important;
		width: 100%;
	}
	header[id="porch-header"] .porch-header-nav a.porch-header-nav-phone {
		color: #cba258 !important;
		border-top: 1px solid rgba(255,255,255,0.15);
		padding-top: 16px !important;
		margin-top: 8px;
	}

	/* When toggle is checked: drawer opens */
	header[id="porch-header"] .porch-mobile-toggle:checked ~ .porch-header-nav {
		max-height: 480px !important;
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
	/* Hamburger icon swap (lines → X) when open */
	header[id="porch-header"] .porch-mobile-toggle:checked ~ .porch-hamburger .porch-hamburger-open { display: none !important; }
	header[id="porch-header"] .porch-mobile-toggle:checked ~ .porch-hamburger .porch-hamburger-close { display: block !important; }

	/* Hide the inline-only desktop phone link in the drawer until opened */
	header[id="porch-header"] .porch-header-nav-phone { display: block !important; }

	/* Hide the customer-journey illustration in 'How's It Work?' on mobile.
	   The text-only 3 steps below it carry the same content. */
	#porch-process-iconic img { display: none !important; }

	/* Hide the Tim photo to the left of the form in 'Get Your Offer Started
	   Today!' on mobile — the form is the priority CTA, photo just adds
	   vertical scroll without helping conversion at narrow widths. */
	#porch-form-mid-photo img { display: none !important; }
}

/* Even tighter on small phones */
@media (max-width: 480px) {
	section[id^="porch-"] h1 { font-size: 26px !important; }
	section[id^="porch-"] h2 { font-size: 22px !important; }
	#porch-hero-video-form .porch-vf-h1 { font-size: 22px !important; }
	#porch-trust-bar img { height: 30px !important; }
}