/**
 * Form panel + Contact Form 7 field system.
 *
 * .hbn-form-frame is the navy card only (background, padding, shadow).
 * Field, label, chip, consent, error and button styles live on .hbn-form,
 * which belongs on the <form> via the CF7 html_class shortcode attribute.
 * The same class on a parent still stacks the fields: the form inside
 * it uses the same column gap.
 * .hbn-form--light is the same form on an ivory section.
 *
 * Do not add .hbn-form to the footer newsletter. That form uses
 * .hbn-newsletter (pill field) in footer.css.
 */

.hbn-form-frame {
	align-items: stretch;
	background-color: var(--hbn-color-navy-surface);
	border-radius: var(--hbn-radius-card);
	box-shadow: var(--hbn-shadow-form);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-inline: auto;
	max-width: 520px;
	min-width: 0;
	padding: 50px;
	width: 100%;
}

.hbn-form-frame .wpcf7 {
	margin: 0;
	width: 100%;
}

/*
 * 16px matches the previous field stack. 8px is the small gap used
 * between a label and its control elsewhere in the theme.
 */
.hbn-form {
	--hbn-form-gap: 16px;
	--hbn-form-label-gap: 8px;
	display: flex;
	flex-direction: column;
	gap: var(--hbn-form-gap);
	margin: 0;
	position: relative;
	width: 100%;
}

/*
 * Elementor puts the class on the container, not on the form. The
 * column gap has to live on the form itself, or the two-field rows
 * sit against each other. When the class is already on the form this
 * selector does not match.
 */
.hbn-form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--hbn-form-gap);
	margin: 0;
	width: 100%;
}

.hbn-form p {
	margin: 0;
}

.hbn-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.hbn-form__row {
	display: grid;
	gap: var(--hbn-form-gap);
	grid-template-columns: 1fr;
	width: 100%;
}

.hbn-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--hbn-form-label-gap);
	margin: 0;
	min-width: 0;
	padding: 0;
}

.hbn-form fieldset.hbn-form__field {
	border: 0;
	min-inline-size: 0;
}

.hbn-form__field > label,
.hbn-form__field > legend,
.hbn-form .hbn-form__step > legend,
.hbn-form .hbn-form__label {
	color: var(--hbn-color-cream);
	float: none;
	font-family: var(--hbn-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	padding: 0;
	width: auto;
}

.hbn-form .hbn-form__req {
	opacity: 0.72;
}

.hbn-form__field br {
	display: none;
}

.hbn-form input[type="text"],
.hbn-form input[type="email"],
.hbn-form input[type="tel"],
.hbn-form input[type="url"],
.hbn-form textarea,
.hbn-form select,
.hbn-form .hbn-form__multi-toggle {
	background-color: var(--hbn-color-navy);
	border: 0;
	border-radius: var(--hbn-radius-field);
	box-shadow: none;
	box-sizing: border-box;
	color: var(--hbn-color-cream);
	font-family: var(--hbn-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	padding: 14px 16px;
	width: 100%;
}

.hbn-form textarea {
	max-height: 200px;
	min-height: 140px;
	overflow-y: auto;
	resize: vertical;
}

.hbn-form input::placeholder,
.hbn-form textarea::placeholder {
	color: var(--hbn-color-placeholder-on-dark);
	opacity: 1;
}

.hbn-form input:focus,
.hbn-form textarea:focus,
.hbn-form select:focus,
.hbn-form .hbn-form__multi-toggle:focus {
	outline: 2px solid var(--hbn-color-teal-on-dark);
	outline-offset: 2px;
}

.hbn-form :where(input, textarea, select).wpcf7-not-valid,
.hbn-form .wpcf7-not-valid {
	outline: 2px solid var(--hbn-color-error-on-dark);
	outline-offset: 2px;
}

.hbn-form .wpcf7-not-valid-tip {
	color: var(--hbn-color-error-on-dark);
	display: block;
	font-family: var(--hbn-font-body);
	font-size: 13px;
	line-height: 1.4;
	margin: 4px 0 0;
}

/* Destination chips. Add class:hbn-form__choices on the CF7 checkbox tag. */
.hbn-form .hbn-form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hbn-form .hbn-form__choices .wpcf7-list-item {
	margin: 0;
}

.hbn-form .hbn-form__choices .wpcf7-list-item > label {
	align-items: center;
	border: 1px solid color-mix(in srgb, var(--hbn-color-cream) 45%, transparent);
	border-radius: var(--hbn-radius-field);
	color: var(--hbn-color-cream);
	cursor: pointer;
	display: inline-flex;
	gap: 8px;
	margin: 0;
	padding: 8px 12px;
}

.hbn-form .hbn-form__choices .wpcf7-list-item:has(input:checked) > label {
	border-color: var(--hbn-color-teal-on-dark);
	border-width: 2px;
}

.hbn-form .hbn-form__choices .wpcf7-list-item.has-free-text {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hbn-form .wpcf7-free-text {
	display: none;
	min-width: 12rem;
	width: auto;
}

.hbn-form .wpcf7-list-item.has-free-text:has(input[type="checkbox"]:checked) .wpcf7-free-text {
	display: block;
}

/* Consent checkbox. The native input stays in the tab order. */
.hbn-form :is(.wpcf7-acceptance, .hbn-form__optin) {
	color: var(--hbn-color-cream);
	font-family: var(--hbn-font-body);
	font-size: 13px;
	line-height: 1.5;
}

.hbn-form :is(.wpcf7-acceptance, .hbn-form__optin) .wpcf7-list-item {
	margin: 0;
}

.hbn-form :is(.wpcf7-acceptance, .hbn-form__optin) label {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 10px;
	margin: 0;
}

.hbn-form :is(.wpcf7-acceptance, .hbn-form__optin) .wpcf7-list-item-label,
.hbn-form .hbn-form__choices .wpcf7-list-item-label {
	align-items: flex-start;
	display: inline-flex;
	gap: 10px;
}

/* Consent copy includes an inline link. Flex would place that link beside the sentence. */
.hbn-form :is(.wpcf7-acceptance, .hbn-form__optin) .wpcf7-list-item-label {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.hbn-form .hbn-form__choices .wpcf7-list-item-label {
	align-items: center;
	gap: 8px;
}

.hbn-form :is(.wpcf7-acceptance, .hbn-form__optin) input[type="checkbox"],
.hbn-form .hbn-form__choices input[type="checkbox"] {
	block-size: 1px;
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Clipped input: the visible chip or square carries the focus ring. */
.hbn-form :is(.wpcf7-acceptance, .hbn-form__optin) input[type="checkbox"]:focus,
.hbn-form .hbn-form__choices input[type="checkbox"]:focus {
	outline: none;
}

.hbn-form :is(.wpcf7-acceptance, .hbn-form__optin) .wpcf7-list-item-label::before,
.hbn-form .hbn-form__choices .wpcf7-list-item-label::before {
	align-items: center;
	background: transparent;
	border: 1px solid var(--hbn-color-cream);
	border-radius: 2px;
	box-sizing: border-box;
	color: var(--hbn-color-navy);
	content: "";
	display: inline-flex;
	flex: none;
	font-family: var(--hbn-font-body);
	font-size: 12px;
	font-weight: 700;
	height: 16px;
	justify-content: center;
	line-height: 1;
	margin-top: 2px;
	width: 16px;
}

.hbn-form .hbn-form__choices .wpcf7-list-item-label::before {
	margin-top: 0;
}

.hbn-form :is(.wpcf7-acceptance, .hbn-form__optin) .wpcf7-list-item:has(input:checked) .wpcf7-list-item-label::before,
.hbn-form .hbn-form__choices .wpcf7-list-item:has(input:checked) .wpcf7-list-item-label::before {
	background-color: var(--hbn-color-teal-on-dark);
	border-color: var(--hbn-color-teal-on-dark);
	border-width: 2px;
	content: "\2713";
}

.hbn-form .hbn-form__choices .wpcf7-list-item:has(input:focus-visible) > label,
.hbn-form :is(.wpcf7-acceptance, .hbn-form__optin) .wpcf7-list-item:has(input:focus-visible) .wpcf7-list-item-label::before {
	outline: 2px solid var(--hbn-color-teal-on-dark);
	outline-offset: 2px;
}

.hbn-form .hbn-form__field--consent .wpcf7-list-item-label::after {
	content: "*";
	margin-left: 0.2em;
	opacity: 0.72;
}

.hbn-form :is(.wpcf7-acceptance, .hbn-form__optin) .wpcf7-list-item-label::before {
	margin-right: 10px;
}

.hbn-form :is(.wpcf7-acceptance, .hbn-form__optin) a {
	color: inherit;
	display: inline;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hbn-form :is(.wpcf7-acceptance, .hbn-form__optin) a:focus-visible {
	outline: 2px solid var(--hbn-color-teal-on-dark);
	outline-offset: 2px;
}

.hbn-form input.wpcf7-submit,
.hbn-form .hbn-form__next {
	align-self: flex-start;
	appearance: none;
	background-color: var(--hbn-color-teal-on-dark);
	border: 0;
	border-radius: var(--hbn-radius-btn);
	color: var(--hbn-color-navy);
	cursor: pointer;
	font-family: var(--hbn-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	padding: 16px 24px;
	transition: translate 1s;
	width: auto;
}

.hbn-form input.wpcf7-submit:hover,
.hbn-form .hbn-form__next:hover {
	filter: none;
	translate: 0 8px;
}

.hbn-form input.wpcf7-submit:active,
.hbn-form .hbn-form__next:active {
	filter: brightness(0.95);
}

.hbn-form input.wpcf7-submit:focus-visible,
.hbn-form .hbn-form__next:focus-visible {
	outline: 2px solid var(--hbn-color-teal-on-dark);
	outline-offset: 2px;
}

.hbn-form.submitting input.wpcf7-submit,
.hbn-form.submitting .hbn-form__next,
.hbn-form .wpcf7-form.submitting input.wpcf7-submit,
.hbn-form .wpcf7-form.submitting .hbn-form__next,
.hbn-form input.wpcf7-submit:disabled,
.hbn-form .hbn-form__next:disabled {
	cursor: wait;
	opacity: 0.65;
	translate: none;
}

.hbn-form .wpcf7-spinner {
	background-color: var(--hbn-color-cream);
	margin-inline: 12px 0;
}

.hbn-form .hbn-form__hp {
	block-size: 1px;
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/*
 * CF7 styles `.wpcf7 form .wpcf7-response-output` (0,2,1) and
 * `.wpcf7 form.invalid .wpcf7-response-output` (0,3,1). Match that
 * weight with the form element so the theme file, loaded later, wins.
 */
form.hbn-form .wpcf7-response-output,
.hbn-form form.wpcf7-form .wpcf7-response-output {
	border: 1px solid transparent;
	border-radius: var(--hbn-radius-field);
	color: var(--hbn-color-cream);
	font-family: var(--hbn-font-body);
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
	padding: 12px 16px;
}

form.hbn-form.sent .wpcf7-response-output,
.hbn-form form.wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--hbn-color-teal-on-dark);
	color: var(--hbn-color-cream);
}

form.hbn-form.invalid .wpcf7-response-output,
form.hbn-form.failed .wpcf7-response-output,
form.hbn-form.aborted .wpcf7-response-output,
form.hbn-form.spam .wpcf7-response-output,
form.hbn-form.unaccepted .wpcf7-response-output,
.hbn-form form.wpcf7-form.invalid .wpcf7-response-output,
.hbn-form form.wpcf7-form.failed .wpcf7-response-output,
.hbn-form form.wpcf7-form.aborted .wpcf7-response-output,
.hbn-form form.wpcf7-form.spam .wpcf7-response-output,
.hbn-form form.wpcf7-form.unaccepted .wpcf7-response-output {
	border-color: var(--hbn-color-error-on-dark);
	color: var(--hbn-color-error-on-dark);
}

/* Ivory sections. Container sets the background; this class does not. */
.hbn-form--light .hbn-form__field > label,
.hbn-form--light .hbn-form__field > legend,
.hbn-form--light .hbn-form__step > legend,
.hbn-form--light .hbn-form__label,
.hbn-form--light :is(.wpcf7-acceptance, .hbn-form__optin) {
	color: var(--hbn-color-navy);
}

.hbn-form--light input[type="text"],
.hbn-form--light input[type="email"],
.hbn-form--light input[type="tel"],
.hbn-form--light input[type="url"],
.hbn-form--light textarea,
.hbn-form--light select,
.hbn-form--light .hbn-form__multi-toggle {
	background-color: var(--hbn-color-bg);
	border: 1px solid var(--hbn-color-sand);
	color: var(--hbn-color-navy);
}

.hbn-form--light input::placeholder,
.hbn-form--light textarea::placeholder {
	color: var(--hbn-color-placeholder-on-light);
}

.hbn-form--light input:focus,
.hbn-form--light textarea:focus,
.hbn-form--light select:focus,
.hbn-form--light .hbn-form__multi-toggle:focus,
.hbn-form--light input.wpcf7-submit:focus-visible,
.hbn-form--light .hbn-form__next:focus-visible,
.hbn-form--light :is(.wpcf7-acceptance, .hbn-form__optin) a:focus-visible,
.hbn-form--light .hbn-form__choices .wpcf7-list-item:has(input:focus-visible) > label,
.hbn-form--light :is(.wpcf7-acceptance, .hbn-form__optin) .wpcf7-list-item:has(input:focus-visible) .wpcf7-list-item-label::before {
	outline-color: var(--hbn-color-focus-on-light);
}

.hbn-form--light :where(input, textarea, select).wpcf7-not-valid,
.hbn-form--light .wpcf7-not-valid {
	outline-color: var(--hbn-color-error-on-light);
}

.hbn-form--light .wpcf7-not-valid-tip {
	color: var(--hbn-color-error-on-light);
}

.hbn-form--light .hbn-form__choices .wpcf7-list-item > label {
	border-color: var(--hbn-color-sand);
	color: var(--hbn-color-navy);
}

.hbn-form--light .hbn-form__choices .wpcf7-list-item:has(input:checked) > label {
	border-color: var(--hbn-color-focus-on-light);
}

.hbn-form--light :is(.wpcf7-acceptance, .hbn-form__optin) .wpcf7-list-item-label::before,
.hbn-form--light .hbn-form__choices .wpcf7-list-item-label::before {
	border-color: var(--hbn-color-sand);
}

.hbn-form--light :is(.wpcf7-acceptance, .hbn-form__optin) .wpcf7-list-item:has(input:checked) .wpcf7-list-item-label::before,
.hbn-form--light .hbn-form__choices .wpcf7-list-item:has(input:checked) .wpcf7-list-item-label::before {
	background-color: var(--hbn-color-teal-on-light);
	border-color: var(--hbn-color-teal-on-light);
	color: var(--hbn-color-navy);
}

.hbn-form--light input.wpcf7-submit,
.hbn-form--light .hbn-form__next {
	background-color: var(--hbn-color-teal-on-light);
}

.hbn-form--light .wpcf7-spinner {
	background-color: var(--hbn-color-navy);
}

form.hbn-form.hbn-form--light .wpcf7-response-output,
.hbn-form.hbn-form--light form.wpcf7-form .wpcf7-response-output {
	color: var(--hbn-color-navy);
}

form.hbn-form.hbn-form--light.sent .wpcf7-response-output,
.hbn-form.hbn-form--light form.wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--hbn-color-focus-on-light);
	color: var(--hbn-color-navy);
}

form.hbn-form.hbn-form--light.invalid .wpcf7-response-output,
form.hbn-form.hbn-form--light.failed .wpcf7-response-output,
form.hbn-form.hbn-form--light.aborted .wpcf7-response-output,
form.hbn-form.hbn-form--light.spam .wpcf7-response-output,
form.hbn-form.hbn-form--light.unaccepted .wpcf7-response-output,
.hbn-form.hbn-form--light form.wpcf7-form.invalid .wpcf7-response-output,
.hbn-form.hbn-form--light form.wpcf7-form.failed .wpcf7-response-output,
.hbn-form.hbn-form--light form.wpcf7-form.aborted .wpcf7-response-output,
.hbn-form.hbn-form--light form.wpcf7-form.spam .wpcf7-response-output,
.hbn-form.hbn-form--light form.wpcf7-form.unaccepted .wpcf7-response-output {
	border-color: var(--hbn-color-error-on-light);
	color: var(--hbn-color-error-on-light);
}

/* Step indicator, native selects, Back/Next, and the group-size hint.
 * Shared field, chip, consent, and error rules stay above. */

.hbn-form .hbn-form__steps {
	color: var(--hbn-color-cream);
	font-family: var(--hbn-font-body);
	font-size: 13px;
	line-height: 1.4;
	margin: 0;
}

.hbn-form .hbn-form__step {
	align-items: stretch;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: var(--hbn-form-gap);
	margin: 0;
	min-inline-size: 0;
	padding: 0;
	width: 100%;
}

.hbn-form .hbn-form__step[hidden] {
	display: none;
}

.hbn-form .hbn-form__step > legend {
	font-weight: 600;
}

.hbn-form .hbn-form__step > legend:focus {
	outline: 2px solid var(--hbn-color-teal-on-dark);
	outline-offset: 2px;
}

.hbn-form .hbn-form__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	width: 100%;
}

.hbn-form .hbn-form__back {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 1px solid var(--hbn-color-teal-on-dark);
	border-radius: var(--hbn-radius-btn);
	box-sizing: border-box;
	color: var(--hbn-color-teal-on-dark);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--hbn-font-body);
	font-size: 15px;
	font-weight: 600;
	justify-content: center;
	line-height: 1.5;
	padding: 16px 24px;
	text-decoration: none;
	transition: none;
}

.hbn-form .hbn-form__back:hover,
.hbn-form .hbn-form__back:focus {
	background-color: transparent;
	color: var(--hbn-color-teal-on-dark);
	filter: none;
	translate: none;
}

.hbn-form .hbn-form__back:hover {
	opacity: 0.75;
}

.hbn-form .hbn-form__back:focus-visible {
	outline: 2px solid var(--hbn-color-teal-on-dark);
	outline-offset: 2px;
}

.hbn-form select,
.hbn-form .hbn-form__multi-toggle {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23f7f1ea' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-position: right 16px center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	cursor: pointer;
	padding-right: 44px;
}

.hbn-form select[multiple],
.hbn-form--light select[multiple] {
	background-image: none;
	min-height: 132px;
}

.hbn-form .hbn-form__heading {
	color: var(--hbn-color-cream);
	font-family: var(--hbn-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

.hbn-form--light .hbn-form__heading {
	color: var(--hbn-color-navy);
}

.hbn-form__control {
	position: relative;
}

/* Trip-form glyphs only. Font Awesome Free solid, SIL OFL. Not editable in HBN Icons. */
@font-face {
	font-display: swap;
	font-family: "HBN Form Icons";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/hbn-form-icons.woff2") format("woff2");
}

.hbn-form__icon {
	color: var(--hbn-color-teal-on-dark);
	display: block;
	font-family: "HBN Form Icons", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	height: 16px;
	left: 16px;
	line-height: 1;
	pointer-events: none;
	position: absolute;
	top: 17px;
	width: 16px;
	z-index: 1;
}

.hbn-form__icon::before {
	display: block;
}

.hbn-form__icon--pin::before {
	content: "\f3c5";
}

.hbn-form__icon--calendar::before {
	content: "\f133";
}

.hbn-form__icon--people::before {
	content: "\f0c0";
}

.hbn-form__icon--euro::before {
	content: "\f153";
}

.hbn-form--light .hbn-form__icon {
	color: var(--hbn-color-teal-on-light);
}

.hbn-form__multi .hbn-form__icon {
	top: 50%;
	transform: translateY(-50%);
}

.hbn-form .hbn-form__control :is(select, input, .hbn-form__multi-toggle) {
	padding-left: 44px;
}

.hbn-form .hbn-form__multi-toggle {
	text-align: left;
	transition: none;
}

.hbn-form__multi {
	position: relative;
}

.hbn-form__multi select {
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.hbn-form__multi:has(.hbn-form__multi-panel:not([hidden])) {
	z-index: 3;
}

.hbn-form .hbn-form__multi-toggle:hover,
.hbn-form .hbn-form__multi-toggle:focus {
	background-color: var(--hbn-color-navy);
	color: var(--hbn-color-cream);
	filter: none;
}

.hbn-form .hbn-form__multi-toggle.is-empty:hover,
.hbn-form .hbn-form__multi-toggle.is-empty:focus {
	color: var(--hbn-color-placeholder-on-dark);
}

.hbn-form__multi-panel {
	background-color: #07203c;
	border-radius: var(--hbn-radius-field);
	box-shadow: var(--hbn-shadow-form);
	display: flex;
	flex-direction: column;
	left: 0;
	margin: 4px 0 0;
	padding: 8px;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 2;
}

.hbn-form__multi-panel[hidden] {
	display: none;
}

.hbn-form .hbn-form__multi-option {
	appearance: none;
	background-color: transparent;
	border: 0;
	border-radius: var(--hbn-radius-field);
	box-shadow: none;
	color: var(--hbn-color-cream);
	cursor: pointer;
	font-family: var(--hbn-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	padding: 8px 12px;
	text-align: left;
	transition: none;
	width: 100%;
}

.hbn-form .hbn-form__multi-option[aria-selected="true"] {
	background-color: rgba(4, 23, 38, 0.05);
	color: var(--hbn-color-cream);
}

.hbn-form .hbn-form__multi-option:focus {
	background-color: transparent;
	color: var(--hbn-color-cream);
	filter: none;
}

.hbn-form .hbn-form__multi-option[aria-selected="true"]:focus {
	background-color: rgba(4, 23, 38, 0.05);
}

.hbn-form .hbn-form__multi-option:hover {
	background-color: rgba(4, 23, 38, 0.25);
	color: var(--hbn-color-cream);
	filter: none;
	transition: none;
}

.hbn-form .hbn-form__multi-option:focus-visible {
	outline: 2px solid var(--hbn-color-teal-on-dark);
	outline-offset: 2px;
}

.hbn-form__multi:has(select.wpcf7-not-valid) .hbn-form__multi-toggle {
	outline: 2px solid var(--hbn-color-error-on-dark);
	outline-offset: 2px;
}

.hbn-form select option {
	background-color: var(--hbn-color-cream);
	color: var(--hbn-color-navy);
}

.hbn-form select:has(> option[value=""]:checked),
.hbn-form .hbn-form__multi-toggle.is-empty {
	color: var(--hbn-color-placeholder-on-dark);
}

.hbn-form .hbn-form__hint {
	color: var(--hbn-color-cream);
	display: none;
	font-family: var(--hbn-font-body);
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
}

.hbn-form .hbn-form__field:has(option[value="More than 10"]:checked) .hbn-form__hint {
	display: block;
}

.hbn-form .hbn-form__hint a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hbn-form .hbn-form__hint a:focus-visible {
	outline: 2px solid var(--hbn-color-teal-on-dark);
	outline-offset: 2px;
}

.hbn-form--light .hbn-form__steps,
.hbn-form--light .hbn-form__hint {
	color: var(--hbn-color-navy);
}

.hbn-form--light .hbn-form__back {
	border-color: var(--hbn-color-navy);
	color: var(--hbn-color-navy);
}

.hbn-form--light .hbn-form__back:hover,
.hbn-form--light .hbn-form__back:focus {
	background-color: transparent;
	color: var(--hbn-color-navy);
}

.hbn-form--light .hbn-form__step > legend:focus,
.hbn-form--light .hbn-form__back:focus-visible,
.hbn-form--light .hbn-form__hint a:focus-visible {
	outline-color: var(--hbn-color-focus-on-light);
}

.hbn-form--light select,
.hbn-form--light .hbn-form__multi-toggle {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23072647' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}

.hbn-form--light select:has(> option[value=""]:checked),
.hbn-form--light .hbn-form__multi-toggle.is-empty {
	color: var(--hbn-color-placeholder-on-light);
}

.hbn-form--light .hbn-form__multi-toggle:hover,
.hbn-form--light .hbn-form__multi-toggle:focus {
	background-color: var(--hbn-color-bg);
	color: var(--hbn-color-navy);
}

.hbn-form--light .hbn-form__multi-toggle.is-empty:hover,
.hbn-form--light .hbn-form__multi-toggle.is-empty:focus {
	color: var(--hbn-color-placeholder-on-light);
}

.hbn-form--light .hbn-form__multi-panel {
	background-color: var(--hbn-color-bg);
	border: 1px solid var(--hbn-color-sand);
}

.hbn-form--light .hbn-form__multi-option {
	background-color: transparent;
	color: var(--hbn-color-navy);
}

.hbn-form--light .hbn-form__multi-option:focus {
	background-color: transparent;
	color: var(--hbn-color-navy);
}

.hbn-form--light .hbn-form__multi-option[aria-selected="true"]:focus {
	background-color: rgba(4, 23, 38, 0.05);
	color: var(--hbn-color-navy);
}

.hbn-form--light .hbn-form__multi-option:hover {
	background-color: rgba(4, 23, 38, 0.25);
	color: var(--hbn-color-navy);
}

.hbn-form--light .hbn-form__multi-option[aria-selected="true"] {
	background-color: rgba(4, 23, 38, 0.05);
	color: var(--hbn-color-navy);
}

@media (min-width: 768px) {
	.hbn-form__row {
		grid-template-columns: 1fr 1fr;
	}

	.hbn-form--steps .hbn-form__row {
		align-items: end;
	}

	.hbn-form__row.hbn-form__row--3 {
		align-items: end;
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (max-width: 767px) {
	.hbn-form-frame {
		max-width: none;
		min-width: 0;
		padding: 28px 7.7%;
		width: 100%;
	}

	.hbn-form .hbn-form__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.hbn-form input.wpcf7-submit,
	.hbn-form .hbn-form__next,
	.hbn-form .hbn-form__back {
		align-self: stretch;
		text-align: center;
		width: 100%;
	}
}

/* Contact info cards (Get in Touch column) */
.hbn-contact-card {
	background-color: var(--hbn-color-white);
	border: 1px solid rgba(3, 40, 68, 0.1);
	border-radius: var(--hbn-radius-card);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 24px;
	width: 100%;
}

.hbn-contact-card__email {
	align-items: center;
	color: var(--hbn-color-text);
	display: flex;
	font-family: var(--hbn-font-body);
	font-size: 15px;
	gap: 12px;
	line-height: 1.5;
	text-decoration: none;
}

.hbn-contact-card__email::before {
	background-color: var(--hbn-color-teal-on-light);
	content: "";
	flex: none;
	height: 28px;
	width: 2px;
}

.hbn-contact-card__email:hover {
	color: var(--hbn-color-navy);
}

.hbn-contact-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.hbn-contact-social {
	align-items: center;
	display: flex;
	gap: 12px;
}

.hbn-contact-social :where(img) {
	display: block;
	height: 40px;
	object-fit: contain;
	width: 40px;
}