/**
 * Modal block.
 *
 * Trigger button styles live here (block CSS is not purged, so the variant modifiers
 * are always available). The dialog uses the native <dialog> element.
 */

/* Trigger alignment (the trigger is inline-block, so the wrapper's text-align
   positions it). Left is the default; no class is emitted for it. */

.block-modal--align-center {
	text-align: center;
}

.block-modal--align-right {
	text-align: right;
}

/* Trigger — mirrors the site button look. */

.block-modal__trigger {
	display: inline-block;
	padding: 0.5rem 1rem;
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--border-radius--default);
	transition: color var(--wp--custom--transition--hover), background-color var(--wp--custom--transition--hover), border-color var(--wp--custom--transition--hover);
}

.block-modal__trigger--fill {
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.block-modal__trigger--fill:hover {
		background-color: var(--wp--preset--color--tertiary);
		border-color: var(--wp--preset--color--tertiary);
	}

.block-modal__trigger--outline {
	color: var(--wp--preset--color--primary);
	background-color: transparent;
	border-color: var(--wp--preset--color--primary);
}

.block-modal__trigger--outline:hover {
		color: var(--wp--preset--color--white);
		background-color: var(--wp--preset--color--primary);
	}

.block-modal__trigger--link {
	padding: 0;
	color: var(--wp--preset--color--primary);
	background-color: transparent;
	border: none;
	text-decoration: underline;
}

.block-modal__trigger--link:hover {
		text-decoration: none;
	}

/* Trigger sizes — scale padding + font size. Default (md) uses the base styles.
   Link triggers are text-only, so they keep zero padding regardless of size. */

.block-modal__trigger--size-sm {
	font-size: var(--wp--preset--font-size--sm);
}

.block-modal__trigger--size-sm:not(.block-modal__trigger--link) {
		padding: 0.35rem 0.75rem;
	}

.block-modal__trigger--size-lg {
	font-size: var(--wp--preset--font-size--lg);
}

.block-modal__trigger--size-lg:not(.block-modal__trigger--link) {
		padding: 0.75rem 1.5rem;
	}

/* Dialog box. Note: do NOT set position:relative — that overrides the browser's
   `dialog:modal { position: fixed }`, dropping the open dialog into normal flow and
   scrolling the page to it. The modal dialog is position:fixed (UA), which already
   acts as the containing block for the absolutely-positioned close button. */

.block-modal__dialog {
	width: calc(100% - 2rem);
	max-width: 32rem; /* md */
	margin: auto; /* centered when shown via showModal() */
	padding: 0;
	border: none;
	border-radius: 0; /* square panel, matching the site's square-cornered surfaces */
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	/* Don't inherit the trigger alignment (.block-modal--align-*) — the dialog is a
	   DOM sibling of the trigger, so it would otherwise pick up its text-align. */
	text-align: start;
}

.block-modal__dialog.is-size-sm {
		max-width: 24rem;
	}

.block-modal__dialog.is-size-lg {
		max-width: 48rem;
	}

.block-modal__dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.5);
}

.block-modal__dialog .block-modal__content {
	padding: var(--wp--preset--spacing--40);
	max-height: 80vh;
	overflow-y: auto;
}

/* Headings sit on the dialog's white ground, so they take the navy rather than
	   the lime they use on the site's dark sections. */

.block-modal__dialog .block-modal__content .wp-block-heading {
		color: var(--wp--preset--color--primary);
	}

/* The modal's title is a <p>, not a heading — it names the dialog (render.php
	   points aria-labelledby at it), so it does not belong in the page outline.
	   Styled to match h3 (theme.json elements.h3 sets only the size). */

.block-modal__dialog .block-modal__content .block-modal__title {
		margin: 0 0 var(--wp--preset--spacing--20);
		color: var(--wp--preset--color--primary);
		font-size: var(--wp--preset--font-size--h-3);
		line-height: var(--wp--custom--line-height--tight);
	}

.block-modal__close {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	right: var(--wp--preset--spacing--20);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--secondary);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transform: scale(1);
	transition: transform var(--wp--custom--transition--hover);
}

/* The X is inlined SVG using `currentColor`, so it takes the navy from the
	   button; the lime square around it stays 32px. */

.block-modal__close .block-modal__close-icon {
		display: block;
		width: 20px;
		height: 20px;
	}

.block-modal__close:hover,
	.block-modal__close:focus-visible {
		transform: scale(1.15);
	}

@media (prefers-reduced-motion: reduce) {
	.block-modal__close {
		transition: none;
	}

		.block-modal__close:hover,
		.block-modal__close:focus-visible {
			transform: none;
		}
}

/* Subtle open animation (skipped for reduced motion). Uses @starting-style +
   allow-discrete so the dialog animates from display:none; degrades to an instant
   show where unsupported. */

@media (prefers-reduced-motion: no-preference) {
	.block-modal__dialog {
		opacity: 0;
		transform: scale(0.97);
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			overlay 0.2s ease allow-discrete,
			display 0.2s ease allow-discrete;
	}

	.block-modal__dialog[open] {
		opacity: 1;
		transform: scale(1);
	}

	@starting-style {
		.block-modal__dialog[open] {
			opacity: 0;
			transform: scale(0.97);
		}
	}
}

/* Editor: label the always-visible modal content. */

.block-modal__editor-label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--bold);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.6;
}

/* Editor: "Edit modal content" affordance shown beside the trigger label. */

.block-modal__edit-content.block-modal__edit-content {
	display: inline-flex;
	align-items: center;
	margin-left: var(--wp--preset--spacing--20);
	padding: 0.15rem 0.5rem;
	font-size: var(--wp--preset--font-size--sm);
	border: 1px dashed var(--wp--preset--color--gray);
	border-radius: var(--wp--custom--border-radius--default);
	text-decoration: none;
}

/* Editor: the content overlay mimics the front-end <dialog> — a fixed, centered
   panel over a dimmed backdrop — instead of rendering inline below the trigger. */

.block-modal__editor-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000; /* above the editor canvas/toolbars */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--40);
	background-color: rgba(0, 0, 0, 0.5);
}

.block-modal__editor-dialog {
	position: relative;
	width: calc(100% - 2rem);
	max-width: 32rem; /* md */
	max-height: 80vh;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--60);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	border-radius: var(--wp--custom--border-radius--lg);
	text-align: start;
}

.block-modal__editor-dialog.is-size-sm {
		max-width: 24rem;
	}

.block-modal__editor-dialog.is-size-lg {
		max-width: 48rem;
	}

.block-modal__editor-close.block-modal__editor-close {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	right: var(--wp--preset--spacing--20);
}

/* Mobile: the dialog fills the screen rather than floating as a card — at phone
   widths a centred panel leaves too little room for a form, and a full-screen sheet
   is the familiar pattern. Square corners because there is no ground showing around
   it, and the content grows to the full height so the submit button sits reachable
   at the bottom rather than mid-screen. */

@media (max-width: 600px) {
	.block-modal__dialog,
	.block-modal__dialog.is-size-sm,
	.block-modal__dialog.is-size-lg {
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		margin: 0;
		border-radius: 0;
	}

	.block-modal__dialog .block-modal__content {
		max-height: none;
		height: 100%;
		padding: var(--wp--preset--spacing--30);
		/* Clear the close button, which overlaps the content's top-right corner. */
		padding-top: var(--wp--preset--spacing--60);
	}

	/* Full-screen sheet: nothing shows around the dialog, so no corner is rounded. */
	.block-modal__dialog .forminator-button-submit {
		border-radius: 0;
	}
}

/* Forminator inside a modal — a plain stacked form. The plugin's own form stylesheet
   is not enqueued (the form's style is set to "none" so it inherits the theme), so
   the inputs would otherwise render as raw browser controls. Scoped to the dialog so
   the CTA/calculator forms keep their bespoke layouts. */

/* `[data-design]` matches Forminator's own `…[data-design=default] .forminator-button`
   specificity, so declarations here (notably the submit's font-size, which the arrow
   is sized from in em) are not silently overridden by the plugin's stylesheet. */

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] {
	/* Forminator emits one row per field, so a row can't pair First/Last on its own.
	   Lay the rows out on a shared 12-column grid instead and let each field span the
	   width its own forminator-col-* class asks for. */
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);

	/* Form-level banner: the field messages carry the errors, and the
	   "Submitting..." loader would otherwise shift the layout. Kept in the DOM as
	   Forminator's aria-live region, but off-screen — matching the other forms. */
}

/* `display: contents` lifts each row's column out of the row wrapper and onto the
	   form's own grid, so two consecutive col-6 fields land side by side even though
	   Forminator wrapped each in its own row. */

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-row {
		display: contents;
	}

/* Forminator also emits hidden inputs and empty divs as direct children, and
	   wpautop wraps the shortcode's hidden inputs in <p>s of their own. Left in the
	   grid each takes a cell and pushes the real fields onto separate rows, so drop
	   anything that renders nothing. `:has()` catches the wrappers whose only content
	   is hidden inputs; they carry no visible text. */

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] > input[type="hidden"],
	.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] > div:empty,
	.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] > p:empty,
	.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] > p:has(> input[type="hidden"]):not(:has(> *:not(input[type="hidden"]))) {
		display: none;
	}

/* The response message is a real child and must span the full width. */

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] > .forminator-response-message {
		grid-column: 1 / -1;
	}

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-col {
		grid-column: span 12;
		min-width: 0;
		margin: 0;
	}

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-col-6 {
		grid-column: span 6;
	}

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-field {
		margin: 0;
	}

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-label {
		display: block;
		margin-bottom: var(--wp--preset--spacing--10);
		color: var(--wp--preset--color--primary);
		font-size: var(--wp--preset--font-size--sm);
		font-weight: var(--wp--custom--font-weight--medium);
	}

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-input {
		width: 100%;
		min-height: 3rem;
		padding: var(--wp--preset--spacing--15) var(--wp--preset--spacing--20);
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent); /* ≥3:1 field boundary on white */
		border-radius: 0; /* square fields; only the submit is a pill */
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--primary);
		font-family: inherit;
		font-size: 16px; /* never below 16px: mobile Safari zooms the viewport on focus below that */
		box-shadow: none;
	}

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-input::-moz-placeholder {
			color: color-mix(in srgb, var(--wp--preset--color--primary) 72%, transparent); /* ≈5.3:1 on white */
		}

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-input::placeholder {
			color: color-mix(in srgb, var(--wp--preset--color--primary) 72%, transparent); /* ≈5.3:1 on white */
		}

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-input:focus {
			outline: 2px solid var(--hs-focus-color);
			outline-offset: 1px;
			border-color: var(--wp--preset--color--primary);
		}

/* Submit: the theme's pill button. Full width, so the label sits at the left and
	   the arrow rides the right edge rather than the pair floating in the centre. */

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit {
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		/* Same box as a core button (theme.json styles.elements.button). */
		max-height: 50px; /* submit buttons cap at 50px site-wide */
		padding: 0.875rem 1.75rem;
		border: 1px solid var(--wp--preset--color--secondary);
		border-radius: var(--wp--custom--border-radius--pill);
		background-color: var(--wp--preset--color--secondary);
		color: var(--wp--preset--color--primary);
		font-family: inherit;
		/* Forminator sets the submit's size with an !important, so the button rendered
		   at 14px against the site's ~15px — and the arrow, sized in em, came out
		   smaller than on every other button. Matched here rather than changing the
		   shared arrow, which must stay identical everywhere it is used. */
		font-size: var(--wp--preset--font-size--sm) !important;
		font-weight: var(--wp--custom--font-weight--normal); /* 400, as core buttons */
		cursor: pointer;
		/* Colour, not scale. The site's pill buttons grow 4% on hover, but they are
		   shrink-wrapped to their label; this one spans the form, so the same 4% adds
		   ~17px of width and visibly bulges past the fields. */
		transition:
			background-color var(--wp--custom--transition--hover),
			border-color var(--wp--custom--transition--hover),
			color var(--wp--custom--transition--hover);

		/* The arrow is real .hs-arrow markup, injected into Forminator's button by
		   theme_forminator_submit_arrow() in inc/blocks.php — so it is the same mark,
		   with the same grow-on-hover, as every other button on the site. */
		gap: 20px;

		/* Spans the form, so the action reads as the row's full-width commitment
		   rather than a small control floating at the left. */
		width: 100%;
	}

/* Forminator draws its own ring/glow as a box-shadow (the blue #254DEB from
		   the form's design settings), which reads as a stray halo on the pill. Cover
		   every state, not just :focus — it applies one on hover too. The keyboard
		   focus ring comes from the outline on :focus-visible below. */

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit,
		.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:hover,
		.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:focus,
		.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:focus-visible,
		.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:active {
			box-shadow: none;
		}

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:focus-visible {
			outline: 2px solid var(--wp--preset--color--primary);
			outline-offset: 2px;
		}

/* Inverts to navy, the same swap core buttons make on hover. */

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:hover,
		.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:focus-visible {
			background-color: var(--wp--preset--color--primary);
			border-color: var(--wp--preset--color--primary);
			color: var(--wp--preset--color--white);
		}

/* Forminator transitions every <span> inside its buttons
		   (`.forminator-custom-form[data-design=default] .forminator-button span`),
		   which is an `all` transition in practice. The arrow is built from spans, so
		   that animates its borders and transform on hover and the mark flickers.
		   The label needs no transition either — it inherits the button's colour. */

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit .wp-element-button__label,
		.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit .hs-arrow,
		.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit .hs-arrow__head {
			transition: none;
		}

/* The line keeps its own width transition: that is the grow-on-hover. */

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit .hs-arrow__line {
			transition: width var(--wp--custom--transition--hover);
		}

/* Larger caret on this button only — the submit is full width, so the shared
		   0.5rem mark reads undersized against it. */

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit .hs-arrow__head {
			width: 12px;
			height: 12px;
		}

/* Validation — same treatment as the calculator and CTA forms: a red message
	   under the field, white on red. Here it sits in flow (the modal has room),
	   rather than absolutely positioned as in the CTA's single-line pill. */

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-error-message {
		display: block;
		margin-top: 0.5rem;
		padding: 0.3125rem 0.75rem;
		border-radius: 100px;
		background-color: var(--wp--custom--color--error);
		color: var(--wp--preset--color--white);
		font-size: var(--wp--preset--font-size--xs);
		line-height: 1;
	}

/* Forminator flags the invalid input itself. */

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-input.forminator-has_error {
		border-color: var(--wp--custom--color--error);
	}

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-response-message.forminator-error,
	.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-response-message.forminator-loading {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: 0;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-response-message:empty {
		display: none;
	}

.block-modal__dialog .forminator-ui.forminator-custom-form[data-design] .forminator-response-message.forminator-success p {
		margin: 0;
		font-size: inherit;
		color: inherit;
	}

@media (prefers-reduced-motion: reduce) {
	.block-modal__dialog .forminator-button-submit {
		transition: none;
	}
}


/*# sourceMappingURL=style-index.css.map*/