/* FormLayer Pro override styles — makes the plugin's editable forms match
   this theme's design (same visual spec as blocks/contact-form/style.css'
   #F2F2F4 card) instead of the plugin's generic default look. Scoped to the
   plugin's own markup classes so it applies to any FormLayer form dropped
   into any page via the "FormLayer Form" block, with no per-page CSS needed. */
.formlayer-block-container-wrap {
	max-width: 719px;
	margin-left: auto;
	margin-right: auto;
	font-family: var(--gb-font-body);
}

.formlayer-form-wrapper {
	background: #f2f2f4;
	border-radius: 20px; /* Figma frame 368:2426 (revised) — larger than the 10px this card's original 181:636 frame used. */
	padding: 2.3rem 31px 24px;
}

/* Rendered through the contact-form block's "Form Shortcode" field, the
   block already draws the card (.gb-contact-form__card) and the heading —
   so the plugin's wrapper must contribute nothing but the fields, or the
   page gets a card inside a card. */
.gb-contact-form__card .formlayer-block-container-wrap,
.gb-contact-form__wide .formlayer-block-container-wrap {
	max-width: none;
	margin: 0;
}

.gb-contact-form__card .formlayer-form-wrapper,
.gb-contact-form__wide .formlayer-form-wrapper {
	background: none;
	border-radius: 0;
	padding: 0;
}

.formlayer-form-status {
	margin: 0 0 11px;
}

.formlayer-form-status:empty {
	display: none;
}

/* Beats the plugin's own !important admin-preview rules (border, size,
   weight, color) — needs matching specificity/!important, not just source
   order. */
.formlayer-form-wrapper .formlayer-section-break {
	grid-column: 1 / -1;
	margin: 0 0 11px 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.formlayer-form-wrapper .formlayer-section-break h3 {
	margin: 0 0 1.375rem 0 !important;
	text-align: center;
	font-family: var(--gb-font-subheading);
	font-size: 1.625rem !important;
	line-height: 1.77;
	font-weight: 400 !important;
	color: #000 !important;
}

.formlayer-form-wrapper .formlayer-section-break p {
	display: none; /* help_text isn't part of this design's heading */
}

/* Must be an explicit 0, not just omitted: the plugin ships
   .formlayer-field-wrap { margin-bottom: 24px }, which would stack on top of
   the grid row-gap that already supplies the design's 11px pitch. */
.formlayer-field-wrap {
	margin-bottom: 0;
}

/* Design shows only placeholder text, no visible field labels — keep the
   label in the DOM for screen readers (same convention as
   blocks/contact-form/render.php's .screen-reader-text) rather than
   dropping it, which the plugin's own "hidden" label_placement would do. */
.formlayer-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.formlayer-field-wrap {
	position: relative;
}

.formlayer-label .required-indicator {
	color: #b3261e;
	margin-left: 0.2em;
}

.formlayer-input,
.formlayer-form-fields-wrapper select,
.formlayer-form-fields-wrapper textarea {
	display: block;
	width: 100%;
	height: 60px;
	padding: 17px 10px 17px 24px;
	background: var(--gb-white);
	border: 1px solid #dfdfdf;
	border-radius: 5px;
	font-family: var(--gb-font-body);
	font-size: 1rem;
	line-height: 1.5;
	color: #333;
	box-sizing: border-box;
}

textarea.formlayer-input {
	height: 177px;
	resize: vertical;
	padding-top: 17px;
}

/* The plugin sizes these three types separately at
   `.formlayer-form input[type="number"] { height: 48px }` — specificity
   (0,2,1), which outranks a class-only rule — so every scope below has to
   restate them at matching-or-higher specificity or they render short. */
.formlayer-form input[type="number"],
.formlayer-form input[type="tel"],
.formlayer-form input[type="date"] {
	height: 60px;
}

.formlayer-input::placeholder {
	color: #909090;
	opacity: 1;
}

.formlayer-input:focus-visible {
	outline: 2px solid var(--gb-band);
	outline-offset: -1px;
}

/* Two-column layout for short fields (name/email/phone/position), matching
   .gb-contact-form__row's 1fr 1fr grid — every field except textarea/submit
   /section-breaks sits in this grid via nth-child pairing. */
.formlayer-form-fields-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 11px 9px;
}

.formlayer-field-wrap:has(textarea),
.formlayer-field-wrap:has(.formlayer-submit-wrap),
.formlayer-submit-wrap {
	grid-column: 1 / -1;
}

.formlayer-submit-wrap {
	text-align: center;
	/* Figma 368:2426 puts 19px between the message box (ends y=425) and the
	   button (starts y=444); the grid's 11px row-gap covers part of it. */
	margin-top: 8px;
}

/* Matches .gb-button (main.css) + the contact form's navy-chip submit
   (blocks/contact-form/render.php): indigo pill, gold circle / navy arrow
   chip icon, same padding/radius/shadow/hover-lift as every other CTA
   button on the site — Formlayer's own button markup has no room for the
   inline SVG the rest of the theme uses, so the chip is a background-image
   on ::after instead, same visual result. */
.formlayer-submit-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 196px;
	justify-content: center;
	border: 0;
	border-radius: 54px;
	padding: 9.5px 10px 9.5px 21px;
	cursor: pointer;
	font-family: var(--gb-font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 2;
	letter-spacing: 0.02em;
	background: var(--gb-indigo);
	color: var(--gb-white);
	box-shadow: 0 9px 12.5px rgba(0, 0, 0, 0.26);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.formlayer-submit-btn::after {
	content: "";
	width: 27px;
	height: 27px;
	flex: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='27' viewBox='0 0 27 27' fill='none'%3E%3Ccircle cx='13.5' cy='13.5' r='13.5' fill='%23F2C540'/%3E%3Cpath d='M7.13604 13.7502C6.72183 13.7502 6.38604 14.086 6.38604 14.5002C6.38604 14.9144 6.72183 15.2502 7.13604 15.2502L7.13604 14.5002L7.13604 13.7502ZM20.3943 15.0305C20.6872 14.7376 20.6872 14.2628 20.3943 13.9699L15.6213 9.19689C15.3284 8.904 14.8536 8.904 14.5607 9.19689C14.2678 9.48978 14.2678 9.96466 14.5607 10.2576L18.8033 14.5002L14.5607 18.7428C14.2678 19.0357 14.2678 19.5106 14.5607 19.8035C14.8536 20.0964 15.3284 20.0964 15.6213 19.8035L20.3943 15.0305ZM7.13604 14.5002L7.13604 15.2502H19.864L19.864 14.5002L19.864 13.7502H7.13604L7.13604 14.5002Z' fill='%2310233F'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
}

.formlayer-submit-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 16px rgba(0, 0, 0, 0.3);
}

/* Honeypot / hidden anti-spam rows the plugin may inject. */
.formlayer-field-wrap:has(input[type="hidden"]) {
	display: none;
}

/* Wide layout (Quote page, Figma 368:2259) — mirrors
   .gb-contact-form--wide in blocks/contact-form/style.css: full-width open
   form with no card, 87px fields, and a large centered pill with no arrow
   chip. Selectors match that block's own metrics so the two stay in sync. */
.gb-contact-form--wide .formlayer-form-fields-wrapper {
	gap: 18px;
}

.gb-contact-form--wide .formlayer-input {
	height: 87px;
	border-color: #767676;
	color: #313131;
}

.gb-contact-form--wide .formlayer-form input[type="number"],
.gb-contact-form--wide .formlayer-form input[type="tel"],
.gb-contact-form--wide .formlayer-form input[type="date"] {
	height: 87px;
}

.gb-contact-form--wide textarea.formlayer-input {
	height: 256px;
}

.gb-contact-form--wide .formlayer-input::placeholder {
	color: #313131;
}

.gb-contact-form--wide .formlayer-submit-wrap {
	margin-top: 11px; /* 18px grid gap + 11px = the design's 29px */
}

.gb-contact-form--wide .formlayer-submit-btn {
	min-width: 405px;
	min-height: 69px;
	padding: 0 28px;
	font-size: 1.466rem; /* 23.46px per design */
	border-radius: 140px;
	box-shadow: 0 13px 18px rgba(0, 0, 0, 0.26);
}

/* The design's wide pill carries no arrow chip. */
.gb-contact-form--wide .formlayer-submit-btn::after {
	content: none;
}

@media (max-width: 640px) {
	.gb-contact-form--wide .formlayer-input {
		height: 64px;
	}

	.gb-contact-form--wide textarea.formlayer-input {
		height: 200px;
	}

	.gb-contact-form--wide .formlayer-submit-btn {
		min-width: 0;
		width: 100%;
		min-height: 60px;
		font-size: 1.2rem;
	}
}

/* Proposal form (SIRS + Building Recertification) — mirrors
   blocks/sirs-proposal/style.css so the plugin-rendered form is
   indistinguishable from the built-in one: white 78px fields on the indigo
   panel, white centred section rules, gold pill submit. Fields marked
   .gb-fl-full in the FormLayer builder span both columns. */
.gb-sirs-proposal__form--plugin .formlayer-block-container-wrap {
	max-width: none;
	margin: 0;
}

.gb-sirs-proposal__form--plugin .formlayer-form-wrapper {
	background: none;
	border-radius: 0;
	padding: 0;
}

.gb-sirs-proposal__form--plugin .formlayer-form-fields-wrapper {
	gap: 15px 18px;
}

.gb-sirs-proposal__form--plugin .gb-fl-full {
	grid-column: 1 / -1;
}

.gb-sirs-proposal__form--plugin .formlayer-input,
.gb-sirs-proposal__form--plugin select.formlayer-input {
	height: 78px;
	padding: 0 24px;
	border: 1px solid #dfdfdf;
	border-radius: 5px;
	background: #fff;
	color: #313131;
	font: 400 1rem/1.5 var(--gb-font-body);
}

.gb-sirs-proposal__form--plugin .formlayer-form input[type="number"],
.gb-sirs-proposal__form--plugin .formlayer-form input[type="tel"],
.gb-sirs-proposal__form--plugin .formlayer-form input[type="date"] {
	height: 78px;
}

.gb-sirs-proposal__form--plugin select.formlayer-input {
	appearance: auto;
}

.gb-sirs-proposal__form--plugin .formlayer-input::placeholder {
	color: #313131;
	opacity: 1;
}

.gb-sirs-proposal__form--plugin .formlayer-input:focus-visible {
	outline: 3px solid var(--gb-gold);
	outline-offset: 2px;
}

/* Section breaks become the design's centred rule-and-label dividers. */
.gb-sirs-proposal__form--plugin .formlayer-section-break {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 38px;
	margin: 4px 0 0;
	padding: 0;
	border: 0;
	text-align: center;
}

.gb-sirs-proposal__form--plugin .formlayer-section-break::before,
.gb-sirs-proposal__form--plugin .formlayer-section-break::after {
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.55);
	content: "";
}

.gb-sirs-proposal__form--plugin .formlayer-section-break h3 {
	margin: 0 !important;
	color: #fff !important;
	font-family: var(--gb-font-subheading);
	font-size: 1.625rem !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	white-space: nowrap;
}

/* The secondary divider's note sits on its own full-width line. */
.gb-sirs-proposal__form--plugin .formlayer-section-break p {
	display: block !important;
	flex: 0 0 100%;
	order: 3;
	margin: 0 !important;
	color: #fff !important;
	font-family: var(--gb-font-subheading) !important;
	font-size: 1.625rem !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
}

.gb-sirs-proposal__form--plugin .formlayer-submit-wrap {
	padding-top: 38px;
	margin-top: 0;
}

.gb-sirs-proposal__form--plugin .formlayer-submit-btn {
	min-width: 405px;
	min-height: 69px;
	padding: 10px 32px;
	border-radius: 999px;
	background: #ffc845;
	box-shadow: 0 13px 18px rgba(0, 0, 0, 0.26);
	color: #000;
	font: 400 1.465rem/2 var(--gb-font-body);
}

.gb-sirs-proposal__form--plugin .formlayer-submit-btn::after {
	content: none; /* design's proposal pill carries no arrow chip */
}

.gb-sirs-proposal__form--plugin .formlayer-submit-btn:hover {
	background: #fff;
	transform: none;
}

@media (max-width: 640px) {
	.formlayer-form-fields-wrapper {
		grid-template-columns: 1fr;
	}

	.formlayer-form-wrapper {
		padding: 1.7rem 16px 16px;
	}

	.gb-sirs-proposal__form--plugin .formlayer-input,
	.gb-sirs-proposal__form--plugin select.formlayer-input,
	.gb-sirs-proposal__form--plugin .formlayer-form input[type="number"],
	.gb-sirs-proposal__form--plugin .formlayer-form input[type="tel"] {
		height: 64px;
	}

	.gb-sirs-proposal__form--plugin .formlayer-section-break h3,
	.gb-sirs-proposal__form--plugin .formlayer-section-break p {
		font-size: 1.15rem !important;
		white-space: normal;
	}

	.gb-sirs-proposal__form--plugin .formlayer-submit-btn {
		min-width: 0;
		width: 100%;
	}
}