/* ==========================================================================
   Nick Blatchley Copywriting: contact popup and form
   ========================================================================== */

html.nb-modal-open { overflow: hidden; }

/* Popup ------------------------------------------------------------------ */
.nb-modal {
	width: min(880px, 100% - 32px);
	max-width: none;
	max-height: min(92vh, 1100px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--nb-paper, #fff);
	color: var(--nb-text, #232838);
	box-shadow: 0 40px 80px -30px rgba(17, 26, 71, .55);
	overflow: hidden;
}
.nb-modal::backdrop {
	background: rgba(17, 26, 71, .62);
	backdrop-filter: blur(3px);
}
.nb-modal[open] { animation: nb-modal-in .22s ease-out; }
.nb-modal[open]::backdrop { animation: nb-fade-in .22s ease-out; }
.nb-modal.is-closing { animation: nb-modal-out .18s ease-in forwards; }
.nb-modal.is-closing::backdrop { animation: nb-fade-out .18s ease-in forwards; }

@keyframes nb-modal-in  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nb-modal-out { to { opacity: 0; transform: translateY(10px); } }
@keyframes nb-fade-in   { from { opacity: 0; } }
@keyframes nb-fade-out  { to { opacity: 0; } }

.nb-modal__sheet {
	position: relative;
	max-height: inherit;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 56px) clamp(28px, 4vw, 44px) clamp(40px, 6vw, 92px);
	background-image: linear-gradient(to right, transparent calc(clamp(40px, 6vw, 92px) - 22px), rgba(224, 121, 138, .55) calc(clamp(40px, 6vw, 92px) - 22px), rgba(224, 121, 138, .55) calc(clamp(40px, 6vw, 92px) - 20px), transparent calc(clamp(40px, 6vw, 92px) - 20px));
}

.nb-modal__close {
	position: sticky;
	top: 0;
	float: right;
	z-index: 2;
	width: 44px; height: 44px;
	margin: -12px -16px 0 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--nb-pad, #eef3f9);
	cursor: pointer;
}
.nb-modal__close::before,
.nb-modal__close::after {
	content: "";
	position: absolute; left: 50%; top: 50%;
	width: 18px; height: 2px;
	background: var(--nb-ink, #1a2660);
	transform: translate(-50%, -50%) rotate(45deg);
}
.nb-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.nb-modal__close:hover { background: var(--nb-rule, #c8d5e7); }

.nb-modal__head { margin-bottom: 28px; max-width: 58ch; }
.nb-modal__note,
.nb-form__done-note {
	margin: 0 0 6px;
	font-family: var(--nb-hand);
	font-size: 2.25rem;
	line-height: 1;
	color: var(--nb-pencil, #1d7653);
	transform: rotate(-3deg);
	transform-origin: left center;
}
.nb-modal .nb-modal__title,
.nb-form__done-title {
	margin: 0 0 12px;
	font-family: var(--nb-serif);
	font-weight: 400;
	font-size: clamp(1.875rem, 3.6vw, 2.625rem);
	line-height: 1.1;
	color: var(--nb-ink, #1a2660);
}
.nb-modal__intro { margin: 0; color: var(--nb-muted, #5a6278); font-size: 1.0625rem; }

/* Form ------------------------------------------------------------------- */
.nb-form { font-family: var(--nb-sans); font-size: 1rem; }
.nb-form[hidden],
.nb-form__done[hidden] { display: none; }

.nb-form .nb-form__group {
	margin: 0 0 28px;
	padding: 24px 0 0;
	border: 0;
	border-top: 1px solid var(--nb-rule, #c8d5e7);
	min-width: 0;
}
.nb-form .nb-form__group legend {
	float: left;
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
	font-family: var(--nb-serif);
	font-size: 1.3125rem;
	color: var(--nb-ink, #1a2660);
}
.nb-form .nb-form__group legend + * { clear: both; }

.nb-form .nb-field__hint,
.nb-form .nb-field__req {
	font-family: var(--nb-sans);
	font-size: .875rem;
	font-weight: 400;
	color: var(--nb-muted, #5a6278);
}
.nb-form .nb-field__hint { margin-left: 8px; }

.nb-form .nb-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 22px;
}
.nb-form .nb-form__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; }
.nb-form .nb-field--wide { grid-column: 1 / -1; }
.nb-form .nb-form__group > .nb-field + .nb-field--wide { margin-top: 18px; }

.nb-form .nb-field label,
.nb-form .nb-field__label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	color: var(--nb-text, #232838);
}

.nb-form input[type="text"],
.nb-form input[type="email"],
.nb-form input[type="tel"],
.nb-form input[type="url"],
.nb-form select,
.nb-form textarea {
	display: block;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 11px 14px;
	border: 1.5px solid #a9b6cb;
	border-radius: 6px;
	background: #fff;
	color: var(--nb-text, #232838);
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
.nb-form textarea { min-height: 150px; resize: vertical; }
.nb-form select {
	appearance: none;
	padding-right: 40px;
	background-image: linear-gradient(45deg, transparent 50%, var(--nb-ink, #1a2660) 50%), linear-gradient(135deg, var(--nb-ink, #1a2660) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px;
	background-repeat: no-repeat;
}
.nb-form input:focus,
.nb-form select:focus,
.nb-form textarea:focus {
	outline: none;
	border-color: var(--nb-ink, #1a2660);
	box-shadow: 0 0 0 3px rgba(26, 38, 96, .15);
}
.nb-form [aria-invalid="true"] { border-color: #b3261e; }
.nb-form [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .18); }
.nb-form ::placeholder { color: #8a93a8; }

.nb-form .nb-field__error {
	margin: 6px 0 0;
	color: #b3261e;
	font-size: .9375rem;
	font-weight: 500;
}

/* Service chips */
.nb-form .nb-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.nb-form .nb-chip { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.nb-form .nb-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nb-form .nb-chip span {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 42px;
	padding: 8px 16px;
	border: 1.5px solid #a9b6cb;
	border-radius: 999px;
	background: #fff;
	color: var(--nb-text, #232838);
	font-weight: 500;
	line-height: 1.2;
	transition: background-color .15s, border-color .15s, color .15s;
}
.nb-form .nb-chip:hover span { border-color: var(--nb-ink, #1a2660); }
.nb-form .nb-chip input:checked + span {
	background: var(--nb-ink, #1a2660);
	border-color: var(--nb-ink, #1a2660);
	color: #fff;
}
.nb-form .nb-chip input:checked + span::before {
	content: "";
	width: 10px; height: 5px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(-45deg);
}
.nb-form .nb-chip input:focus-visible + span { outline: 3px solid var(--nb-pencil, #1d7653); outline-offset: 2px; }

/* Radios and consent */
.nb-form .nb-radios { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.nb-form .nb-radio,
.nb-form .nb-check {
	display: inline-flex; align-items: flex-start; gap: 10px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}
.nb-form .nb-radio input,
.nb-form .nb-check input {
	flex: 0 0 auto;
	width: 20px; height: 20px;
	margin: 2px 0 0;
	accent-color: var(--nb-ink, #1a2660);
}
.nb-form .nb-field--consent { margin: 4px 0 26px; }
.nb-form .nb-check span { font-size: .9375rem; line-height: 1.5; color: var(--nb-muted, #5a6278); }
.nb-form .nb-check a { color: var(--nb-ink, #1a2660); }

.nb-form .nb-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.nb-form .nb-form__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
.nb-form .nb-form__submit { min-width: 220px; cursor: pointer; }
.nb-form .nb-form__submit[disabled] { opacity: .7; cursor: progress; }
.nb-form .nb-form__alt { margin: 0; color: var(--nb-muted, #5a6278); }
.nb-form .nb-form__alt a { color: var(--nb-ink, #1a2660); font-weight: 600; }

/* Status messages */
.nb-form .nb-form__status { margin-bottom: 22px; outline: none; }
.nb-form .nb-form__status p {
	margin: 0;
	padding: 14px 18px;
	border-radius: 6px;
	font-weight: 500;
}
.nb-form .nb-form__status-error { background: #fbeceb; color: #8c1d17; border-left: 4px solid #b3261e; }
.nb-form .nb-form__status-ok { background: #e7f4ee; color: #135339; border-left: 4px solid var(--nb-pencil, #1d7653); }

/* Success panel */
.nb-form__done { padding: 12px 0 8px; outline: none; max-width: 56ch; }
.nb-form__done p { margin: 0 0 22px; font-size: 1.0625rem; }
.nb-form__done [data-nb-close] { display: none; }
.nb-modal .nb-form__done [data-nb-close] { display: inline-flex; }

/* Small screens: the popup becomes a full-height sheet ------------------- */
@media (max-width: 700px) {
	.nb-modal {
		width: 100%;
		max-height: 100%;
		height: 100%;
		margin: 0;
		border-radius: 0;
	}
	.nb-modal__sheet {
		height: 100%;
		padding: 22px 20px 32px 34px;
		background-image: linear-gradient(to right, transparent 16px, rgba(224, 121, 138, .5) 16px, rgba(224, 121, 138, .5) 18px, transparent 18px);
	}
	.nb-modal__close { margin: -6px -8px 0 10px; }
	.nb-modal__head { padding-right: 8px; }
	.nb-modal .nb-modal__title { padding-right: 40px; }
	.nb-form .nb-form__grid,
	.nb-form .nb-form__grid--three { grid-template-columns: minmax(0, 1fr); }
	.nb-form .nb-form__submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.nb-modal[open],
	.nb-modal[open]::backdrop,
	.nb-modal.is-closing,
	.nb-modal.is-closing::backdrop { animation: none; }
}