/* form-pages.css */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 100px;

	/* Adjust based on your header's height */
}

/* Main container styles for larger screens */
.main-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* max-width: 1200px; */
	margin: 0 auto;
	padding: 20px;

	/* Ensure 20px padding on all sides */
	background: var(--main-container-color);
	border: 2px solid #fff;
	border-radius: 10px;
	box-shadow:
		0 2px 5px rgb(86 183 216 / 10%),
		/* Subtle base shadow */ 0 5px 10px rgb(86 183 216 / 15%),
		/* Slightly offset, softer shadow */ 0 10px 20px rgb(86 183 216 / 10%);

	/* Larger, more diffused shadow */
}

@media (width <= 768px) {
	.main-container {
		grid-template-columns: 1fr;
	}
}

.form-wrapper {
	/* Multiple shadows */
	position: relative;
	padding: 10px;
	background: var(--form-bg-color);
	border: 1px solid hsl(0deg 0% 100% / 90%);
	border-radius: 10px;
	box-shadow:
		0 2px 5px rgb(86 183 216 / 10%),
		0 5px 10px rgb(86 183 216 / 15%),
		0 10px 20px rgb(86 183 216 / 10%);

	/* Required for absolute positioning of pseudo-elements */
}

.contact-info {
	padding: 0;

	/* Remove padding from the inner container */
}

.contact-info h2 {
	margin-bottom: 20px;
	color: var(--contact-info-color);
	text-align: center;
}

.contact-info h3 {
	color: #1d4695;
	text-shadow: 1px 1px 1px var(--contact-info-text-shadow);
}

.slogan {
	position: relative;
	top: 0.2em;
	display: block;
	margin-top: 0;
	color: var(--slogan-color);
	text-align: center;
}

.contact-slogan {
	position: relative;
	top: 0.2em;
	display: block;
	margin-top: 0;
	color: var(--contact-slogan-color);
	text-align: center;
}

.service-hours {
	position: relative;
	top: 0.2em;
	display: block;
	margin-top: 0;
	color: var(--slogan-color);
	text-align: center;
}

.contact-info p {
	margin-bottom: 20px;
	color: #1d4695;
	text-shadow: 1px 1px 1px var(--contact-info-text-shadow);
}

.contact-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;

	/* margin-top: 20px; */
}

.contact-columns .column {
	/* was 10px; */
	display: flex;
	align-items: center;

	/* was center; */
	justify-content: center;
	padding: 10px;

	/* was center; */
}

@media (width <= 766px) {
	/* was max-width 768px */
	.contact-columns {
		grid-template-columns: 1fr;
	}
}

/* Contact Buttons | Phone and Email */
.c-button-container {
	display: flex;
	justify-content: center;
	margin-top: 0;

	/* was 30px */
}

.c-button {
	display: block;
	text-align: center;
}

.c-button {
	position: relative;
	display: inline-block;
	padding: 10px 20px;

	/* Pill-shaped button */
	color: #fff;
	font-weight: 600;

	/* font-family removed from here */
	font-size: 20px;
	font-style: normal;
	letter-spacing: 1.5px;
	text-align: center;
	text-decoration: none;
	background: var(--c-button-bg);
	border: 1px solid rgb(255 255 255 / 30%);

	/* Changed to slightly translucent white */
	border-radius: 50px;

	/* Adds a blur effect for glassy appearance */
	outline: 0;
	box-shadow: 0 0 15px rgb(255 255 255 / 30%);

	/* Ensure text color is always white */
	cursor: pointer;
	backdrop-filter: blur(10px);

	/* Ensures no underline */
	transition: all 0.3s;
	user-select: none;
	touch-action: manipulation;

	/* Equal shadow on all sides, more dispersed */
}

/* Apply font-family only to the text span inside the button */
.c-button span {
	font-family:
		system-ui,
		-apple-system,
		system-ui,
		"Segoe UI",
		Roboto,
		Ubuntu,
		"Helvetica Neue",
		sans-serif;
}

/* Ensure Font Awesome icons within the button have the correct weight and display properties */
.c-button i.fas {
	display: inline-block;

	/* Required for Font Awesome solid icons */
	margin-right: 0.4em;

	/* Explicitly set font family */
	font-weight: 900;

	/* Smooth font on WebKit */
	font-family: "Font Awesome 5 Free";

	/* Ensure correct display */
	font-style: normal;

	/* Ensure not italicized by other rules */
	font-variant: normal;

	/* Ensure normal font variant */
	text-rendering: auto;

	/* Default text rendering */
	-webkit-font-smoothing: antialiased;

	/* Add some space between icon and text */
}

/* Override global link styles for service buttons */
.c-button:link,
.c-button:visited,
.c-button:hover,
.c-button:active {
	/* Ensures no underline */
	color: #fff;
	text-decoration: none;

	/* Ensure the text color is always white */
}

.c-button:hover {
	text-shadow: 2px 2px 2px rgb(0 48 96 / 80%);
	background: var(--c-button-hover-bg);
	border: var(--c-button-border-bg);
	box-shadow: var(--c-button-hover-box-shadow);
}

.c-button:active {
	background: rgb(0 32 64 / 30%);

	/* Adjusted background for active state */
	box-shadow: 0 0 20px rgb(255 255 255 / 40%);

	/* Slightly smaller halo effect on active, equal on all sides */
}

/*
@media (min-width: 768px) {
	.c-button {
		padding: 16px 48px;
	}
}
*/

/* Single Profile Column */
.profile-columns-single-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 20px;
}

.profile-columns-single-grid .column {
	position: relative;

	/* Restore original background */
	padding: 10px;

	/* Needed for pseudo-element positioning */

	/* z-index removed here, will be applied to content */
	overflow: hidden;
	background: var(--contact-columns);
	border: 1px solid hsl(0deg 0% 100% / 80%);
	border-radius: 10px;
	box-shadow: 0 2px 5px rgb(86 183 216 / 10%);

	/* Ensure pseudo-elements or backgrounds don't overflow rounded corners */
}

/* Specific styling for the profile photo section column */
.profile-photo-section .column {
	/* No-repeat for image */
	position: relative;
	background-image: url("/assets/images/main/blueprints-bg.png"), var(--contact-columns);

	/* Center both */
	background-repeat: no-repeat, repeat;

	/* Cover for image, default for gradient */
	background-position: center, center;

	/* Layer image ON TOP of gradient */
	background-size: cover, auto;

	/* Keep for potential future pseudo-elements if needed */
}

/* Remove the ::before rule as we are applying directly */

/* Ensure content is still readable */
.profile-photo-section .column p {
	/* Added white text shadow */
	position: relative;

	/* Ensure content stays above background layers */
	z-index: 1;
	margin: 10px 0;
	color: #1d4695;
	text-shadow: 1px 1px 2px rgb(255 255 255 / 70%);
}

/* Default styling for other single grid columns */
.profile-columns-single-grid:not(.profile-photo-section) .column p {
	margin: 10px 0;
	color: #1d4695;

	/* Keep original color for other sections */
}

/* Ensure the profile photo itself is also above the background */
.profile-photo-section .profile-photo {
	position: relative;
	z-index: 1;
}

/* Double Profile Column */
.profile-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 20px;
}

.profile-columns .column {
	padding: 10px;
	background: var(--contact-columns);
	border: 1px solid hsl(0deg 0% 100% / 80%);
	border-radius: 10px;
	box-shadow: 0 2px 5px rgb(86 183 216 / 10%);
}

.profile-columns .column p {
	margin: 10px 0;
	color: #1d4695;
}

@media (width <= 766px) {
	/* was max-width 768px */
	.profile-columns {
		grid-template-columns: 1fr;
	}
}

/* Profile Photos */
.profile-photo {
	/* Ensure the image covers the container without distortion */
	display: block;
	width: 150px;

	/* Set to desired diameter of the circle */
	height: 150px;
	margin: 0 auto;

	/* Semi-transparent white border */

	object-fit: cover;

	/* Make the image circular */
	border: 3px solid hsl(0deg 0% 100% / 80%);

	/* Ensure the height matches the width */
	border-radius: 50%;

	/* Center the image horizontally */

	/* Add shadow */
	box-shadow: 0 0 15px hsl(202deg 88% 42% / 40%);

	/* Uniform shadow */
}

/* Add a gap between .contact-info and .form-wrapper on smaller screens */
@media (width <= 1022px) {
	.contact-info {
		margin-bottom: 20px;

		/* Adjust this value to match the other spacing gaps */
	}
}

/* Add a gap between .contact-info and .form-wrapper on larger screens */
@media (width >= 1023px) {
	.contact-info {
		margin-right: 10px;
	}

	.form-wrapper {
		margin-left: 10px;
	}
}

/* -------------------- FORMS DESIGN -------------------- */
.header-bg {
	/* Further increased top/bottom padding */
	display: flex;

	/* Enable Flexbox */
	align-items: center;

	/* Vertically center content */
	justify-content: center;

	/* Remove bottom border-radius */
	margin-bottom: 0;

	/* Remove bottom margin */
	padding: 20px 10px;

	/* Original properties */
	background: var(--form-header-bg-vertical);

	/* Horizontally center content (replaces text-align) */
	border-top: 1px solid hsl(0deg 0% 100% / 90%);
	border-right: 1px solid hsl(0deg 0% 100% / 90%);
	border-bottom: none;
	border-left: 1px solid hsl(0deg 0% 100% / 90%);

	/* was --form-header-bg-color */
	border-radius: 5px 5px 0 0;

	/* Remove bottom border */
}

.form-title {
	margin: 0;
	color: #fff;
	font-weight: bold;
	/* OLD: font-size: 1.875rem; */
	/* NEW: Responsive font size for "Consultation Request" */
	font-size: clamp(1.375rem, calc(1.7857vw + 1.0179rem), 1.875rem);
	/*
	   Explanation of clamp values:
	   - MIN (1.375rem / 22px): The smallest the font size will get, ensuring readability on very small screens (e.g., 320px viewport width).
	   - PREFERRED (calc(1.7857vw + 1.0179rem)): This is the ideal size that scales with the viewport width.
	     It's calculated to transition smoothly from ~22px at 320px viewport width to ~30px at 768px viewport width.
	     (1.7857vw is approximately (25/14)vw, and 1.0179rem is approximately (57/56)rem, assuming 1rem = 16px).
	   - MAX (1.875rem / 30px): The largest the font size will get, matching the original fixed size for larger screens.
	*/
	text-shadow:
		0 0 var(--form-title-shadow),
		/* Assuming --form-title-shadow is defined elsewhere */ 1px -1px 0
			var(--form-title-shadow),
		-1px 1px 0 var(--form-title-shadow),
		1px 1px 0 var(--form-title-shadow);
}

/* Rule for line two */
.form-title small {
	/* Adjust the value as needed */
	font-weight: normal;
	font-size: 0.625em;
}

.lock-bg {
	margin-top: 0;

	/* Remove top margin */
	margin-bottom: 30px;

	/* Remove top border-radius */
	padding: 10px 0;
	color: #fff;
	font-weight: normal;
	font-size: 0.9em;
	text-align: center;
	background: #003060;
	border: 1px solid hsl(0deg 0% 100% / 80%);
	border-radius: 0 0 5px 5px;
}

.lock-icon::before {
	content: url("../assets/images/lock.png");
}

.field-group {
	margin-bottom: 20px;
}

.form {
	/* Ensure the form doesn't exceed its container */
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;

	/* Include padding and border in the element's total width and height */
	padding: 10px;

	/* Form padding */
	background: var(--form-bg-color);
}

/* Input styles for select and number fields */
.form select,
.form input[type="number"] {
	/* 20px / 16px = 1.25rem */
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 20px;

	/* Set the form field width to 100% */
	padding: 10px;
	color: #00e;
	font-size: calc(1.25 * var(--base-font-size));
	border: 1px solid hsl(202deg 89% 63% / 80%);
	border-radius: 5px;

	/* Include padding and border in the element's total width and height */
}

.form label {
	display: block;
	margin-top: 10px;
	color: #003060;

	/* 20px */
	font-weight: 600;
	font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem);
}

.form input,
.form textarea {
	/* 20px / 16px = 1.25rem */
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 20px;

	/* Set the form field width to 100% */
	padding: 10px;
	color: #00e;
	font-size: calc(1.25 * var(--base-font-size));
	border: 1px solid hsl(202deg 89% 63% / 80%);
	border-radius: 5px;

	/* Include padding and border in the element's total width and height */
}

/* Placeholder styles for input and select fields */
input::placeholder,
select::placeholder {
	color: #666;

	/* Light gray color for the placeholder */
}

input:focus::placeholder,
select:focus::placeholder {
	color: transparent;

	/* Hide the placeholder when the input is focused */
}

input::placeholder {
	color: #666;

	/* Light gray color for the placeholder */
}

input:focus::placeholder {
	color: transparent;

	/* Hide the placeholder when the input is focused */
}

/* Styles for the required field indicator */
.required {
	color: #c00;
}

/* Styles for Services Section */

/* Styles for the services-container */
.services-container {
	padding: 10px;
	text-align: left;

	/* Ensure the entire container content is left-aligned */
	background-color: rgb(255 255 255 / 30%);
	border: 1px solid hsl(202deg 89% 63% / 80%);
}

/* Styles for the services-requested section in two columns */
.services-container .services-requested {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

/* Styles for the labels within the services-requested section */
.services-container .services-requested label {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	/* Aligns items vertically to the center */
	margin-bottom: 10px;

	/* Ensure left alignment */
	font-size: 18px;
}

/* Ensure no conflicting styles */
.services-requested label {
	width: 100%;
	text-align: left;
}

/* Margin for checkboxes within the services-requested section */
.services-container .services-requested input[type="checkbox"] {
	margin-right: 10px;
}

/* Styles for the form submit button */
.form button {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
	color: #fff;

	/* 20px */
	font-weight: 600;
	font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem);
	font-family:
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		Ubuntu,
		"Helvetica Neue",
		sans-serif;
	font-style: normal;
	letter-spacing: 1.5px;
	text-shadow: 2px 2px 3px #b00;
	background-color: #d73925;
	border: 1px solid hsl(0deg 0% 100% / 80%);
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.3s;
	user-select: none;
	touch-action: manipulation;

	/* Include padding and border in the element's total width and height */
}

@media (orientation: landscape) {
	.form button {
		font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem);

		/* Adjusted for landscape */
	}
}

.form button:hover,
.form button:focus,
.form button:active {
	background-color: #dd4b39;
	border-color: #b00;
}

/* Style for inline form field error messages */
.error {
	margin-top: -15px;
	margin-bottom: 10px;
	color: red;
	font-weight: bold;
	font-size: smaller;
	text-shadow: 1px 1px 0 #fff;
	vertical-align: super;
}


/* Grid layout */
.grid-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (width >= 768px) {
	.grid-container {
		grid-template-columns: 1fr 1fr;
	}
}

/* Column styling */
.left-column,
.right-column {
	padding: 10px;
}

/* Font styling for h3 and h4 in the left column */
.left-column h3,
.left-column h4 {
	color: #055c9d;
}

/* Image styling */
.image-container img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border: 2px solid #fff;
	border-radius: 10px;
	box-shadow:
		0 2px 5px rgb(86 183 216 / 10%),
		/* Subtle base shadow */ 0 5px 10px rgb(86 183 216 / 15%),
		/* Slightly offset, softer shadow */ 0 10px 20px rgb(86 183 216 / 10%);

	/* Larger, more diffused shadow */
}

/* END - Styles for service specific 'Landing Pages' */

/* Custom top divider with adjusted spacing */
.divider-top-spacing {
	margin-top: 50px;

	/* Space above the divider */
	margin-bottom: 40px;

	/* Space between divider and CTA-box */
}

/* Wrapper for centering the CTA-box */
.cta-wrapper {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* CTA box styling */
.CTA-box {
	/* Centers horizontally and adds 40px bottom margin */
	max-width: clamp(300px, 30.83vw, 592px);
	margin: 0 auto 40px;

	/* Responsive max width */
	padding: 20px;
	font-size: var(--r20px);

	/* Based on a 1.6 ratio */
	font-style: normal;

	/* Responsive scaling for 20px */
	line-height: var(--r20px-line-height);
	text-align: center;
	background: linear-gradient(
		90deg,
		rgb(221 241 253 / 90%) 0%,
		rgb(255 255 255 / 30%) 100%
	);
	border: 6px double #0e86d4;
	border-radius: 10px;
	box-shadow: var(--box-shadow);
}

@media (orientation: landscape) {
	.CTA-box {
		font-size: var(--r20px-landscape);

		/* Reduce scaling factor for landscape mode */
		line-height: var(--r20px-line-height-landscape);

		/* Adjust line-height for landscape mode proportionally */
	}
}

/* CTA text styling */
.CTA {
	color: #b00;
	font-weight: bold;
	font-size: 1.5em;
}

/* Button styling */
.q-button {
	position: relative;
	display: inline-block;
	padding: 10px 20px;
	color: #fff;

	/* Responsive font size */
	font-weight: 600;
	font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem);

	/* Ensure text color is always white */
	font-family:
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		Ubuntu,
		"Helvetica Neue",
		sans-serif;
	letter-spacing: 1.5px;
	text-align: center;
	text-decoration: none;

	/* Pill-shaped button */
	background: var(--c-button-bg);
	border: 0;
	border-radius: 50px;
	outline: 0;
	cursor: pointer;
	backdrop-filter: blur(10px);
	transition: all 0.3s;
	user-select: none;
	touch-action: manipulation;

	/* Adds a blur effect for glassy appearance */
}

/* Button link styles */
.q-button:link,
.q-button:visited {
	color: #fff;

	/* Ensure the text color is always white */
	text-decoration: none;

	/* Ensures no underline */
}

/* Button hover state */
.q-button:hover {
	text-shadow: 2px 2px 2px rgb(0 48 96 / 80%);
	background: var(--c-button-hover-bg);
	border: var(--c-button-border-bg);
}

/* Button active state */
.q-button:active {
	background: rgb(0 32 64 / 30%);

	/* Adjusted background for active state */
}

/* Custom bottom divider with adjusted spacing */
.divider-bottom-spacing {
	margin-top: 0;

	/* Space between the CTA-box and the divider */
	margin-bottom: 20px;

	/* Space below the divider */
}