/**
 * Request modal: the short form the primary CTA buttons open.
 * Enqueued globally by inc/request-modal.php, and only when the modal is configured —
 * this is site chrome like the header and the footer, not a block.
 *
 * Two things are done differently from blocks/contact-form/style.css on purpose:
 *
 * 1. Plain media queries, not container ones. The container rule exists because a
 *    non-iframed editor makes a media query fire at window width inside a ~640px
 *    canvas; this window never renders in the editor at all.
 * 2. No repeating of the root in the selectors. That rule exists because
 *    css/content.css normalises headings and form controls at
 *    `:is(.site-main, .editor-styles-wrapper) …`; wp_footer() prints outside
 *    #page, so nothing in content.css reaches in here.
 *
 * Everything inside __form is printed by Contact Form 7. Descendant selectors
 * onto .wpcf7-* are the documented exception for foreign markup
 * (docs/coding-standards.md); bare tag selectors and !important still are not.
 */

.sws-request-modal {
	--sws-request-modal-surface: #11151f;
	--sws-request-modal-border: rgba(255, 255, 255, 0.08);
	--sws-request-modal-field-bg: rgba(255, 255, 255, 0.04);
	--sws-request-modal-field-border: rgba(255, 255, 255, 0.1);
	--sws-request-modal-field-focus: rgba(139, 92, 255, 0.55);
	--sws-request-modal-text-dim: #8b8b9a;
	--sws-request-modal-error: #ff8095;
	--sws-request-modal-ok: #3ecf8e;

	/* The one primary-button gradient, shared with the header CTA and the hero. */
	--sws-request-modal-button-gradient: linear-gradient(90deg, var(--wp--preset--color--accent-magenta, #c42bc6), var(--wp--preset--color--accent-purple, #6a00ff));
	--sws-request-modal-check-gradient: linear-gradient(135deg, var(--wp--preset--color--accent-purple, #6a00ff), var(--wp--preset--color--accent-cyan, #00d4ff));

	/*
	 * The dialog box IS the card: the surface, the border and the radius live
	 * here, and __body scrolls inside it. Percentages resolve against the
	 * viewport — a modal dialog is laid out against the initial containing block.
	 */
	display: flex;
	flex-direction: column;
	width: min(34rem, calc(100% - 2rem));
	max-width: none;
	max-height: calc(100% - 2rem);
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--sws-request-modal-border);
	border-radius: 1.25rem; /* 20px */
	background-color: var(--sws-request-modal-surface);
	color: var(--wp--preset--color--contrast, #f2f2f6);
	box-shadow: 0 1.75rem 4rem rgba(0, 0, 0, 0.55);
}

/*
 * The display above outranks the UA's `dialog:not([open]) { display: none }`, so
 * the closed dialog would sit in the page. Restating it also hides the markup in
 * a browser with no <dialog> support, where the script bails out and leaves the
 * buttons as links.
 */
.sws-request-modal:not([open]) {
	display: none;
}

/* Literal colours: ::backdrop does not see the custom properties above in every engine. */
.sws-request-modal::backdrop {
	background-color: rgba(4, 6, 14, 0.72);
	backdrop-filter: blur(0.25rem);
}

/*
 * Anchored to the dialog rather than to the scrolling body, so it stays in the
 * corner while a long form scrolls under it. The UA gives a modal dialog
 * position: fixed, which is what makes it the containing block here.
 */
.sws-request-modal__close {
	position: absolute;
	inset-block-start: 0.625rem;
	inset-inline-end: 0.625rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--sws-request-modal-text-dim);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sws-request-modal__close:hover,
.sws-request-modal__close:focus-visible {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--contrast, #f2f2f6);
}

.sws-request-modal__body {
	min-height: 0; /* Lets the flex item shrink so its own scrollbar appears. */
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(1.5rem, 5vw, 2rem);
}

.sws-request-modal__heading {
	margin: 0 0 0.375rem;
	padding-right: 2rem; /* Clear of the close button. */
	font-size: clamp(1.25rem, 4vw, 1.5rem);
	font-weight: 800;
	line-height: 1.2;
}

/* The heading takes focus on open; the ring belongs to the interactive controls. */
.sws-request-modal__heading:focus {
	outline: none;
}

.sws-request-modal__text {
	margin: 0 0 1.5rem;
	color: var(--sws-request-modal-text-dim);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* Layout the form template asks for
--------------------------------------------- */

/*
 * These classes are written into the form body in the Contact Form 7 admin, so
 * the markup is ours even though it lives in the database rather than in a
 * template. scripts/create-request-form.php is the source; keep the two in sync.
 */

.sws-request-form__field {
	margin: 0 0 1.125rem; /* 18px */
}

.sws-request-form__label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
}

.sws-request-form__row {
	display: grid;
	gap: 1rem;
	margin: 0 0 1.125rem;
}

/* The two fields inside the row bring their own rhythm with them. */
.sws-request-form__row .sws-request-form__field {
	margin-bottom: 0;
}

.sws-request-form__consent {
	margin: 0 0 1.375rem;
}

.sws-request-form__actions {
	margin: 0;
}

/* Contact Form 7 controls
--------------------------------------------- */

/*
 * .wpcf7-text covers text, email and tel in one class: modules/text.php passes
 * 'wpcf7-text' to wpcf7_form_controls_class() for every one of them.
 */
.sws-request-modal__form .wpcf7-text,
.sws-request-modal__form .wpcf7-textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 0.8125rem 0.9375rem; /* 13px 15px */
	border: 1px solid var(--sws-request-modal-field-border);
	border-radius: 0.6875rem; /* 11px */
	background-color: var(--sws-request-modal-field-bg);
	color: var(--wp--preset--color--contrast, #f2f2f6);
	font-family: inherit;
	font-size: 0.875rem;
	line-height: 1.4;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sws-request-modal__form .wpcf7-text:focus-visible,
.sws-request-modal__form .wpcf7-textarea:focus-visible {
	border-color: var(--sws-request-modal-field-focus);
	background-color: rgba(255, 255, 255, 0.06);
	outline: 2px solid var(--sws-request-modal-field-focus);
	outline-offset: 1px;
}

/*
 * height, not just min-height: CF7 renders rows="10" when the tag carries no
 * size, and the rows attribute sets the box height on its own. Shorter than the
 * contact form's because this window scrolls at 5rem of extra content.
 */
.sws-request-modal__form .wpcf7-textarea {
	height: 5rem; /* 80px */
	min-height: 5rem;
	resize: vertical;
}

/* The control wrapper is an inline span by default, which breaks the margins. */
.sws-request-modal__form .wpcf7-form-control-wrap {
	display: block;
}

/* Consent checkbox
--------------------------------------------- */

.sws-request-modal__form .wpcf7-acceptance .wpcf7-list-item {
	/* CF7 ships margin-left: 1em here, which would indent the whole row. */
	margin: 0;
}

.sws-request-modal__form .wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	gap: 0.625rem;
	align-items: flex-start;
	color: var(--sws-request-modal-text-dim);
	font-size: 0.75rem;
	line-height: 1.5;
}

/*
 * CF7 puts its classes on the wrapping span, never on the input itself, so a
 * tag+attribute selector is the only handle on the control. It is scoped two
 * levels inside the modal and cannot leak.
 */
.sws-request-modal__form .wpcf7-acceptance input[type="checkbox"] {
	appearance: none;
	flex: none;
	width: 1.375rem; /* 22px */
	height: 1.375rem;
	margin: 0;
	border: 1px solid var(--sws-request-modal-field-border);
	border-radius: 0.375rem;
	background-color: var(--sws-request-modal-field-bg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0.875rem 0.875rem;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.sws-request-modal__form .wpcf7-acceptance input[type="checkbox"]:checked {
	border-color: transparent;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"),
		var(--sws-request-modal-check-gradient);
}

/*
 * theme.json paints every link with the site colour; inside the small consent
 * line it needs to stay legible without shouting, so only the underline goes.
 */
.sws-request-modal__form .wpcf7-acceptance .wpcf7-list-item label a {
	text-decoration: underline;
	text-underline-offset: 0.125rem;
}

/* Submit
--------------------------------------------- */

/*
 * The send glyph is a background image rather than an inline <svg>: markup typed
 * into the form body is run through wpcf7_kses() for anyone without
 * unfiltered_html, and svg is not on its allow-list. Decorative either way.
 */
.sws-request-modal__form .wpcf7-submit {
	box-sizing: border-box;
	width: 100%;
	padding: 0.9375rem 1.75rem 0.9375rem 1.25rem;
	border: 0;
	border-radius: 0.75rem;
	background-color: transparent;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E"),
		var(--sws-request-modal-button-gradient);
	background-position: right 1.25rem center, 0 0;
	background-repeat: no-repeat, no-repeat;
	background-size: 1.0625rem 1.0625rem, auto;
	color: #fff;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sws-request-modal__form .wpcf7-submit:hover,
.sws-request-modal__form .wpcf7-submit:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 0.75rem 1.875rem rgba(80, 25, 220, 0.5);
}

.sws-request-modal__form .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Validation and status
--------------------------------------------- */

/*
 * The tip is a message, not a colour cue: it carries its own text, and the field
 * border changes as well, so the state never rests on hue alone
 * (docs/accessibility.md).
 */
.sws-request-modal__form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.5rem;
	color: var(--sws-request-modal-error);
	font-size: 0.75rem;
	line-height: 1.4;
}

.sws-request-modal__form .wpcf7-not-valid {
	border-color: var(--sws-request-modal-error);
}

.sws-request-modal__form .wpcf7-spinner {
	background-color: rgba(255, 255, 255, 0.25);
}

/*
 * CF7's own rule is `.wpcf7 form .wpcf7-response-output` (0-2-1) — the only
 * plugin declaration here that a single class could not outweigh, so the
 * selectors below match its depth and add the modal's own class on top.
 */
.sws-request-modal__form .wpcf7 form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.875rem 1rem;
	border-width: 1px;
	border-radius: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.5;
}

.sws-request-modal__form .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--sws-request-modal-ok);
	background-color: rgba(62, 207, 142, 0.08);
}

.sws-request-modal__form .wpcf7 form.invalid .wpcf7-response-output,
.sws-request-modal__form .wpcf7 form.unaccepted .wpcf7-response-output,
.sws-request-modal__form .wpcf7 form.payment-required .wpcf7-response-output,
.sws-request-modal__form .wpcf7 form.failed .wpcf7-response-output,
.sws-request-modal__form .wpcf7 form.aborted .wpcf7-response-output,
.sws-request-modal__form .wpcf7 form.spam .wpcf7-response-output {
	border-color: var(--sws-request-modal-error);
	background-color: rgba(255, 128, 149, 0.08);
}

/* Page behind the dialog
--------------------------------------------- */

/* The page must not scroll away under the open window. */
.sws-request-modal-open {
	overflow: hidden;
}

/* Standing in for the scrollbar the line above removes, so nothing shifts. */
.sws-request-modal-open body {
	padding-right: var(--sws-request-modal-gap, 0);
}

/* Reduced motion
--------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.sws-request-modal__close,
	.sws-request-modal__form .wpcf7-text,
	.sws-request-modal__form .wpcf7-textarea,
	.sws-request-modal__form .wpcf7-acceptance input[type="checkbox"],
	.sws-request-modal__form .wpcf7-submit {
		transition: none;
	}

	.sws-request-modal__form .wpcf7-submit:hover,
	.sws-request-modal__form .wpcf7-submit:focus-visible {
		transform: none;
	}
}

/* 640px and up
--------------------------------------------- */

@media (min-width: 40rem) {

	.sws-request-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}