/* Styles for the standalone contact form that replaces the live site's Ninja Forms
   embed (see website.md "Forms / Integrations"). Reuses the original .nf-form-content /
   .nf-field-container selectors from the child theme stylesheet for input/textarea
   styling, so only the new <button type="submit"> needs an explicit rule here to match
   the look of the original Ninja Forms input[type="button"] submit control.

   The live site also loads Ninja Forms' own base stylesheet
   (wp-content/plugins/ninja-forms/assets/css/display-opinions-light.css), which is what
   actually stretches its fields to the column width (via `.field-wrap>div input` /
   `.label-above .nf-field-element{width:100%}`, matched against Ninja Forms' own deeper
   field markup). This project intentionally does not load that whole stylesheet -- it
   targets far more classes than this form uses -- so the two rules it supplies that this
   form still needs are reproduced here, scoped to #clicbeat-contact-form only:
   - width: 100% (fields filling their container)
   - border-style/width (Ninja Forms' `.nf-form-content input:not([type="button"]), textarea`
     rule sets `border: 1px solid ...`; the child theme's more specific rule above only
     resets border-left/right to none and recolors border-top/bottom to black -- it never
     sets their width or style itself -- so without this, top/bottom fall back to the
     browser's native ~2px "inset" input border instead of a thin solid line). */
#clicbeat-contact-form input,
#clicbeat-contact-form textarea {
	width: 100%;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-width: 1px;
	border-bottom-width: 1px;
}
.contact-content .contact-main form .nf-form-content .nf-field-container button.clicbeat-contact-form__submit {
	border: 1px solid rgba(0, 0, 0, 0.87);
	margin-left: 37px;
	height: 48px;
	padding: 9px 40px;
	font-weight: 500;
	font-size: var(--global--font-size-xs);
	line-height: 30px;
	color: rgba(0, 0, 0, 0.87);
	font-family: var(--global--font-secondary-medium);
	background: transparent;
	cursor: pointer;
	transition: 0.5s all;
	border-radius: 0;
}
.contact-content .contact-main form .nf-form-content .nf-field-container button.clicbeat-contact-form__submit:hover {
	background: var(--global--highlight-color);
	border-color: var(--global--highlight-color);
	color: var(--global--color-white);
}
/* The live site also has a wider tablet breakpoint (max-width: 1023px, e.g. 768px-1023px)
   that shrinks just the submit control's font-size (height/padding/margin stay at desktop
   sizing there -- only the tighter max-width: 767px block below changes those). Same
   `input[type="button"]` vs. real-<button> mismatch as the mobile fix, re-targeted here. */
@media (max-width: 1023px) {
	.contact-content .contact-main form .nf-form-content .nf-field-container button.clicbeat-contact-form__submit {
		font-size: 18px;
	}
}
/* The live site's own mobile breakpoint (max-width: 767px) shrinks its submit control's
   font-size/height/padding/margin, but that rule targets `input[type="button"]`
   (Ninja Forms' original submit element) -- this form uses a real <button>, which never
   matched it, so the button stayed at desktop sizing on mobile. Same values, just
   re-targeted at the actual element in this markup. */
@media (max-width: 767px) {
	.contact-content .contact-main form .nf-form-content .nf-field-container button.clicbeat-contact-form__submit {
		margin-left: 18px;
		height: 42px;
		padding: 4px 30px;
		font-size: 18px;
	}
}
.clicbeat-contact-form__status {
	margin: 0 0 24px 37px;
	font-family: var(--global--font-primary);
	font-size: 14px;
}