/*
	App-specific additions layered on top of the Paradigm Shift theme
	(main.css). Kept separate so theme upgrades don't clobber these.
*/

/*
	!important is deliberate: this is a generic "force hide" utility, and
	needs to reliably win regardless of what other classes are combined
	with it. Without it, elements combining .hidden with another
	display-setting class (e.g. .field-error-message's display:block)
	stayed visible depending on which rule happened to come later in this
	file — that's exactly what left "Something went wrong!" permanently
	shown on /next.
*/
.hidden {
	display: none !important;
}

/*
	main.css only zeroes out #wrapper section's large top margin on
	:first-child (theme assumes #wrapper's first element is always a
	section). Several pages now put the navbar widget/menu before the
	first section instead, which left that margin (7.5rem down to 2.25rem
	depending on breakpoint) in place — a big blank gap above the page's
	actual background. :first-of-type finds the right section regardless
	of what non-section markup precedes it.
*/
#wrapper section:first-of-type {
	margin-top: 0;
}

/*
	The theme's default section layout is a 2-column grid: <header> sits in
	a left column, .content in a right column, side by side. That reads
	fine for a short title next to a wide block of text, but for a section
	whose "content" is really just one compact centered card (a signup
	form, a login form) it leaves the card squeezed into the right half
	next to a mostly-empty left column. .stacked-section switches that
	section to a normal top-to-bottom layout instead — header above,
	content below, both centered — which is already how every section
	behaves on narrow screens; this just opts a section into that on
	desktop too.
*/
#wrapper section.stacked-section {
	display: block;
}

	#wrapper section.stacked-section > header {
		text-align: center;
		margin: 0 auto 3rem auto;
	}

	#wrapper section.stacked-section > .content {
		margin: 0 auto;
		max-width: 60rem;
	}

/* Real inline validation feedback, replacing alert()-based form checks. */
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
	border-color: #d92626;
}

.field-error-message {
	color: #d92626;
	display: block;
	font-size: 0.75rem;
	margin-top: 0.4rem;
}

.form-message {
	margin-top: 10px;
	text-align: center;
}

.loading-overlay {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.5);
	color: #ffffff;
	display: none;
	height: 100%;
	justify-content: center;
	left: 0;
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 1000;
}

.loading-overlay.visible {
	display: flex;
}

/* Tradesman profile page (views/tradesman.ejs) */

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	grid-gap: 10px;
	max-width: 1320px;
	margin: 0 auto;
	padding: 10px;
}

.gallery-item {
	position: relative;
}

.gallery-image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
	object-fit: cover;
}

.gallery-item.big {
	grid-column: span 2;
}

@media (max-width: 768px) {
	.gallery {
		grid-template-columns: 1fr;
	}

	.gallery-item {
		grid-column: span 1;
	}
}

.reviews {
	display: grid;
	gap: 20px;
}

.review {
	background-color: #f9f9f9;
	padding: 20px;
	border-radius: 5px;
}

.trust-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-top: 40px;
}

.trust-badge {
	background-color: #f1f1f1;
	padding: 10px;
	border-radius: 5px;
	text-align: center;
	flex: 1 1 200px;
	max-width: 250px;
}

.video-container {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

	.video-container video {
		width: 100%;
		height: auto;
	}

.button-container {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.dynamic-field-row {
	align-items: center;
	display: flex;
}

	.dynamic-field-row input {
		width: 100%;
	}

	.dynamic-field-row button {
		margin-left: 10px;
	}