/* Contact form - this form's own stylesheet (forms/css/contact.css). The engine links it only on pages that show the form.
   Scoped with :where() so the rules keep the specificity they had as plain global rules (:where() adds none): the wrapper
   <div class="pbs-form pbs-form-contact"> is written by forms/form-engine.php. Colours mirror the css/global.css brand palette. */
:where(.pbs-form-contact) {
	/* the form keeps the typography it always had; the page around it follows the site font like every other page (the old
	   contact-form.css set these on <body>, which restyled the whole contact page). Delete this line to let the form follow the site font too. */
	font-family:'Roboto', sans-serif; font-size:16px;
	.cfg-label { display:block; }
	.pbs-form-req { }
	.cfg-submit { margin:0 auto; padding:12px 8px; width:auto; height:auto; cursor:pointer; color:#4A4A4A; background-color:#D0D0D0; border:none; display:block; text-align:center; }
	.cfg-submit:hover { color:#D0D0D0; background-color:#4A4A4A; }
	.cfg-option-container input[type=radio], .cfg-option-container input[type=checkbox] { margin:6px; }
	.g-recaptcha { display:flex; justify-content:center; }
	.cfg-required { color:#990000; margin-right:6px; }

	/* General */
	.element { margin:8px 0 8px 0; padding:0; text-align:left; }
	.cfg-row { display:flex; flex-wrap:wrap; gap:0 12px; }
	.cfg-row .cfg-half { flex:1 1 calc(50% - 6px); min-width:180px; }
	.cfg-row .cfg-third { flex:1 1 calc(33.333% - 8px); min-width:140px; }
	.cfg-options-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:6px 20px; }
	.cfg-heading h3 { margin:16px 0 4px; }
	.cfg-note p { margin:0; }
	.cfg-option-container { border:0; padding:0; margin:8px 0; min-width:0; }
	.cfg-option-container legend { padding:0; }
	.cfg-option { display:inline-block; margin-right:12px; }
	.cfg-help { display:block; margin-top:2px; font-size:13px; }

	/* Validation & messages */
	.cfg-errormessage, .cfg-validationmessage { font-size:20px; font-weight:normal; text-align:center; }
	.cfg-errormessage { display:none; margin:4px 0; width:100%; text-align:center; }
	.cfg-validationmessage { width:100%; margin-bottom:16px; padding:10px 6px; text-align:center; }
	.cfg-validationmessage { background-color:rgba(146,200,62,0.2); color:#333333; text-align:center; }
	.cfg-errormessage { background-color:#efefef; color:#cc0000; padding:4px 6px; text-align:center; }
	.has-error .pbs-contact-input, .has-error .pbs-contact-textarea, .has-error .pbs-contact-select { outline:2px solid #cc0000; }

	/* Fields */
	.pbs-contact-input { margin:0; padding:10px; width:100%; height:auto; font-family:'Roboto', sans-serif; color:#4A4A4A; font-size:16px; font-weight:300; background-color:rgba(146,200,62,0.12); border:0; display:block; box-sizing:border-box; }
	.pbs-contact-textarea { margin:0; padding:10px; width:100%; min-height:150px; font-family:'Roboto', sans-serif; color:#4A4A4A; font-size:16px; background-color:rgba(146,200,62,0.12); border:0; display:block; box-sizing:border-box; }
	.pbs-contact-select { margin:0; padding:10px; width:100%; height:auto; font-family:'Roboto', sans-serif; color:#4A4A4A; font-size:16px; background-color:rgba(146,200,62,0.12); border:0; display:block; box-sizing:border-box; }
	.pbs-contact-checkbox { font-size:20px; height:24px; vertical-align:middle; display:inline; border:0; }
}