/**
 * Oxalis Theme — HubSpot form modal
 *
 * Overlay + dialog + brand overrides for HubSpot's default form markup so
 * fields blend with the site (Figtree body, cream inputs, orange focus,
 * cream-with-orange-border submit button).
 */

/* ─── OVERLAY ─────────────────────────────────────────────────────────── */
.ox-hs-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}
.ox-hs-modal.is-open { display: flex; }

.ox-hs-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 19, 37, 42, 0.7 );
	cursor: pointer;
}

/* ─── DIALOG ──────────────────────────────────────────────────────────── */
.ox-hs-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc( 100vh - 48px );
	overflow-y: auto;
	background: #FAF4E5;
	border: 1px solid #717C7F;
	padding: 40px 40px 32px;
	box-sizing: border-box;
}
.ox-hs-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.ox-hs-modal__close:hover { opacity: 0.6; }

.ox-hs-modal__header { margin-bottom: 24px; }
.ox-hs-modal__title {
	font-family: 'Tenez', serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 105%;
	color: #13252A;
	margin: 0 0 8px;
}
.ox-hs-modal__intro {
	font-family: 'Figtree', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 150%;
	color: #13252A;
	margin: 0;
}
.ox-hs-modal__form { min-height: 240px; }

/* Prevent background scroll while open */
body.is-hs-modal-open { overflow: hidden; }

/* ─── HUBSPOT FORM BRAND OVERRIDES ────────────────────────────────────── */
/* HubSpot injects its own class structure inside #ox-hs-modal-form. We
   scope every override under that ID so we don't touch other HS embeds
   that may live elsewhere on the site. */

#ox-hs-modal-form .hs-form,
#ox-hs-modal-form .hs-form fieldset {
	max-width: 100% !important;
	width: 100% !important;
}
#ox-hs-modal-form .hs-form fieldset { padding: 0; margin: 0; }
#ox-hs-modal-form .hs-form fieldset.form-columns-1 .hs-form-field,
#ox-hs-modal-form .hs-form fieldset.form-columns-2 .hs-form-field {
	width: 100% !important;
	float: none !important;
}
#ox-hs-modal-form .hs-form fieldset.form-columns-2 { display: flex; gap: 16px; margin-bottom: 0; }
#ox-hs-modal-form .hs-form fieldset.form-columns-2 .hs-form-field { flex: 1; }
#ox-hs-modal-form .hs-form .input { margin: 0 !important; }

#ox-hs-modal-form .hs-form label {
	display: block;
	font-family: 'Figtree', sans-serif;
	font-weight: 300;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #13252A;
	margin-bottom: 6px;
}
#ox-hs-modal-form .hs-form .hs-form-required { color: #FF6600; margin-left: 2px; }

#ox-hs-modal-form .hs-form input[type="text"],
#ox-hs-modal-form .hs-form input[type="email"],
#ox-hs-modal-form .hs-form input[type="tel"],
#ox-hs-modal-form .hs-form input[type="number"],
#ox-hs-modal-form .hs-form select,
#ox-hs-modal-form .hs-form textarea {
	width: 100% !important;
	box-sizing: border-box;
	height: 40px;
	padding: 0 12px;
	background: #FAF4E5;
	border: 1px solid #717C7F;
	font-family: 'Figtree', sans-serif;
	font-size: 14px;
	color: #13252A;
	outline: none;
	border-radius: 0;
}
#ox-hs-modal-form .hs-form textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; }
#ox-hs-modal-form .hs-form input:focus,
#ox-hs-modal-form .hs-form select:focus,
#ox-hs-modal-form .hs-form textarea:focus {
	border-color: #FF6600;
}

#ox-hs-modal-form .hs-form .hs-form-field { margin-bottom: 16px; }
#ox-hs-modal-form .hs-form .hs-error-msgs {
	list-style: none;
	padding: 0;
	margin: 4px 0 0;
	color: #CC5200;
	font-family: 'Figtree', sans-serif;
	font-size: 12px;
}
#ox-hs-modal-form .hs-form .hs-error-msgs label { text-transform: none; color: inherit; font-size: 12px; letter-spacing: 0; }

/* Submit button — brand CTA */
#ox-hs-modal-form .hs-submit,
#ox-hs-modal-form .hs-form .actions { margin-top: 20px; }
#ox-hs-modal-form .hs-form input[type="submit"],
#ox-hs-modal-form .hs-form .hs-button {
	display: inline-flex;
	align-items: center;
	padding: 12px 16px;
	background: #FAE6CE;
	border: 1px solid #FF6600;
	font-family: 'Figtree', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 19px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #13252A;
	cursor: pointer;
	height: auto;
	border-radius: 0;
	transition: background 0.15s;
}
#ox-hs-modal-form .hs-form input[type="submit"]:hover,
#ox-hs-modal-form .hs-form .hs-button:hover { background: #F5D5B0; }

/* Success + legal micro-copy */
#ox-hs-modal-form .submitted-message,
#ox-hs-modal-form .hs-main-font-element {
	font-family: 'Figtree', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: #13252A;
}
#ox-hs-modal-form .legal-consent-container,
#ox-hs-modal-form .hs-richtext {
	font-family: 'Figtree', sans-serif;
	font-size: 12px;
	line-height: 1.5;
	color: #646D6B;
	margin-bottom: 12px;
}

/* Anchor/CTA that opens the modal — cursor pointer + no default underline */
[data-hubspot-modal] { cursor: pointer; }

/* ─── RESPONSIVE ──────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.ox-hs-modal { padding: 12px; }
	.ox-hs-modal__dialog { padding: 32px 20px 24px; }
	.ox-hs-modal__title  { font-size: 24px; }
	#ox-hs-modal-form .hs-form fieldset.form-columns-2 {
		flex-direction: column;
		gap: 0;
	}
}