/* ============================================================
   FORMS.CSS
   Contact Us form and embedded map.
   ============================================================ */
/* CONTACT US */
input, label, textarea
{
	display: block !important;
	width: 100% !important;
	min-width: 100% !important;
}

.title
{
	display: none !important;
}

.map-container
{
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	height: 0;
}

	.map-container iframe
	{
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		position: absolute;
	}
/* END CONTACT US */


/* CONTACT PAGE PANELS (redesign)
   White card, deliberately lighter than the section-pebble
   background it sits on — using var(--pebble) here made the card
   invisible since the parent section is the same colour. */
.contact-grid
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start;
}

.contact-panel
{
	background: #fff;
	color: var(--ink);
	border-radius: var(--radius-pebble-sm);
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
	padding: 1.75rem;
}

	.contact-panel label
	{
		font-family: 'KarlaUI', sans-serif;
		font-weight: 700;
		font-size: 0.9rem;
		color: var(--ink);
		margin-bottom: 0.4rem;
	}

	.contact-panel .form-control
	{
		border: 1px solid var(--seaglass);
		border-radius: 8px;
		padding: 0.6rem 0.85rem;
		background: #fff;
		color: var(--ink);
	}

		.contact-panel .form-control:focus
		{
			border-color: var(--gold);
			box-shadow: 0 0 0 3px rgba(184,147,90,0.25);
			outline: none;
		}

		/* Higher specificity than the base rule above so Bootstrap's
	   validation state colours are never silently overridden. */
		.contact-panel .form-control.is-invalid
		{
			border-color: #dc3545;
		}

		.contact-panel .form-control.is-valid
		{
			border-color: #198754;
		}

.contact-map
{
	border-radius: var(--radius-pebble-sm);
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
/* END CONTACT PAGE PANELS */