/**
 * NovaBP Bookkeeping — Get Your Free Business Financial Health Check (section 9)
 *
 * The one section on this page built from two halves rather than one widget:
 * `Nova_Book_Health_Check_Widget` renders the intro column, and the card beside
 * it is Elementor containers holding an Elementor Pro `form` — the same
 * submission path the Contact page already uses. So this file dresses both, and
 * the `.nova-book-hc__*` classes below are applied to containers and core
 * widgets from the page, not printed by a widget's render().
 *
 * The container tree the classes expect:
 *
 *   .nova-book-hc                 section shell (padding set in Elementor)
 *     .nova-book-hc__inner        row, two columns
 *       .nova-book-hc__col        → widget → .nova-book-hc__intro
 *       .nova-book-hc__card       gradient-border shell
 *         .nova-book-hc__panel    white plate
 *           .nova-book-hc__head   icon + title + subtitle
 *           .nova-book-hc__form   Pro form widget
 *           .nova-book-hc__note   reassurance line
 *
 * Figma reference: node 2165:8912
 */

/*
 * Division of labour with Elementor. The containers own their *layout* —
 * direction, gaps, alignment and the section padding — because those are
 * container controls an author can reach in the editor, and Elementor's
 * generated `--flex-direction` / `--gap` would otherwise be a second source of
 * truth fighting this file. Everything below is decoration and the sizing
 * Elementor's controls cannot express: the content measure, the equal split,
 * the gradient shells, the glyph disc and the form fields.
 */
.nova-book-hc {
	--nova-book-hc-field-border: var(--nova-tax-border);
	--nova-book-hc-placeholder: #6a7076;

	background-color: var(--nova-tax-white);
}

.nova-tax.nova-book-hc .nova-book-hc__inner {
	width: 100%;
	max-width: var(--nova-tax-content-max);
	margin-inline: auto;
}

/*
 * Both halves are drawn 600px wide inside the 1280px measure, which is exactly
 * what an even split with the 80px gap gives — so they are written as equal
 * flex children rather than pinned to 600px, and narrow together below 1440.
 *
 * `min-width: 0` because flex items floor at their content width without it,
 * and the form's inputs have a default intrinsic width that would otherwise
 * push the card past its half.
 */
.nova-tax.nova-book-hc .nova-book-hc__col,
.nova-tax.nova-book-hc .nova-book-hc__card {
	flex: 1 1 0;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Intro column
 * ------------------------------------------------------------------------ */

.nova-book-hc__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nova-book-hc__item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-tax-heading);
}

/*
 * Figma sets the tick in a 28px-tall box beside the first line of copy so it
 * centres against that line rather than the paragraph. 18px text at 1.5 is a
 * 27px line, so the box height is what aligns them.
 */
.nova-book-hc__item-icon {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	height: 27px;
}

.nova-book-hc__item .nova-tax-icon {
	width: 20px;
	height: 20px;
	color: var(--nova-tax-green);
}

/* ---------------------------------------------------------------------------
 * Card
 *
 * Both the fill and the border are gradients, so the border is transparent and
 * two background layers paint it — the wash clipped to the padding box, the
 * border gradient to the border box.
 * ------------------------------------------------------------------------ */

.nova-tax.nova-book-hc .nova-book-hc__card {
	padding: 8px;
	border: 1px solid transparent;
	border-radius: 28px;
	background:
		linear-gradient(0deg, #d7e1f6 0%, #fff 100%) padding-box,
		linear-gradient(0deg, #96b5f9 0%, #dbe5fa 100%) border-box;
}

.nova-tax.nova-book-hc .nova-book-hc__panel {
	padding: 32px;
	background-color: var(--nova-tax-white);
	border-radius: 20px;
}

/* ---------------------------------------------------------------------------
 * Card head
 *
 * The 60px glyph disc is painted here rather than placed as a widget: it is one
 * of the theme's own icons, and a mask keeps it colour-controlled from CSS
 * without an attachment in the media library.
 * ------------------------------------------------------------------------ */

/*
 * Block flow, not flex. The head has to stack a glyph disc above two widgets,
 * and the disc is drawn with pseudo-elements — but a container's own `::before`
 * is not available: Elementor reserves `.e-con:before` for the container
 * background overlay and gives it `position: absolute`, which lifts anything put
 * there straight out of the flow. So the disc hangs off the title widget below
 * instead, and the head is plain block layout with margins rather than a gap.
 */
.nova-tax.nova-book-hc .nova-book-hc__head {
	display: block;
	text-align: center;
}

.nova-tax.nova-book-hc .nova-book-hc__head > * + * {
	margin-block-start: 8px;
}

/* The disc. `margin: 0 auto` is what centres it without an alignment context. */
.nova-tax.nova-book-hc .nova-book-hc__card-title {
	position: relative;
}

.nova-tax.nova-book-hc .nova-book-hc__card-title::before {
	content: "";
	display: block;
	width: 60px;
	height: 60px;
	margin: 0 auto 16px;
	background-color: var(--nova-tax-surface);
	border-radius: 100px;
}

/*
 * The glyph, masked over the disc. It has to be a second pseudo-element: one
 * element cannot carry both the disc's flat tint and a masked foreground, and a
 * mask applies to the whole background including that tint. 16px down centres
 * the 28px glyph in the 60px disc.
 */
.nova-tax.nova-book-hc .nova-book-hc__card-title::after {
	content: "";
	position: absolute;
	inset-block-start: 16px;
	inset-inline-start: 50%;
	width: 28px;
	height: 28px;
	background-color: var(--nova-tax-primary);
	transform: translateX(-50%);
	mask-image: url("../icons/chats-teardrop.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-image: url("../icons/chats-teardrop.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	pointer-events: none;
}

.nova-tax.nova-book-hc .nova-book-hc__card-title,
.nova-tax.nova-book-hc .nova-book-hc__card-title .elementor-heading-title {
	font-family: var(--nova-tax-font);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nova-tax-heading);
}

.nova-tax.nova-book-hc .nova-book-hc__card-sub,
.nova-tax.nova-book-hc .nova-book-hc__card-sub p {
	margin: 0;
	font-family: var(--nova-tax-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-tax-body);
}

/* ---------------------------------------------------------------------------
 * Pro form
 *
 * Elementor's own controls could set most of this, but they would set it per
 * placement — keeping it here means the section looks the same wherever the
 * card is rebuilt, and matches how every other field on the site is drawn.
 *
 * Everything here carries the full `.nova-tax.nova-book-hc` prefix rather than
 * the block class alone. The Global Kit styles bare tags, and its
 * `.elementor-kit-9 input:not([type="button"]):not([type="submit"])` scores
 * (0,3,1) — it sets `border-width: 0`, a 2px radius and its own padding, and
 * beats any two-class selector. Textareas and selects are not in that rule,
 * which is exactly how the inputs ended up as the only borderless fields.
 * ------------------------------------------------------------------------ */

/*
 * Elementor's form ships its field widths as `.elementor-col-50` and friends
 * but never makes the wrapper a flex row — on a page that loads no legacy
 * column CSS the groups end up stacked regardless of the width they were given.
 *
 * `margin: 0` undoes the widget's own column-gap machinery: the form's "Columns
 * Gap" control emits `margin-inline: calc(-10px/2)` on this wrapper (and the
 * matching padding on each group), which pulled every field 5px outside the
 * panel's 32px padding — the head and the reassurance line sat at 32px while the
 * fields sat at 27px. The gutters here are paid by the group rules below
 * instead, so the widget's negative margins have nothing left to compensate for.
 */
.nova-tax.nova-book-hc .nova-book-hc__form .elementor-form-fields-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	row-gap: 24px;
	column-gap: 16px;
	margin: 0;
}

/*
 * The 16px gutter is a real `column-gap`, so each width subtracts its share of
 * it — two 50% halves plus a gap would not fit on one line otherwise. Paying it
 * as padding on the second group instead is what left the name pair uneven
 * (264px beside 248px) when Figma draws them identical.
 */
.nova-tax.nova-book-hc .nova-book-hc__form .elementor-field-group.elementor-col-50 {
	width: calc(50% - 8px);
}

.nova-tax.nova-book-hc .nova-book-hc__form .elementor-field-group.elementor-col-25 {
	width: calc(25% - 12px);
}

.nova-tax.nova-book-hc .nova-book-hc__form .elementor-field-group.elementor-col-75 {
	width: calc(75% - 4px);
}

.nova-tax.nova-book-hc .nova-book-hc__form .elementor-field-group.elementor-col-100 {
	width: 100%;
}

.nova-tax.nova-book-hc .nova-book-hc__form .elementor-field-group {
	margin: 0;
	padding: 0;
	gap: 8px;
}

.nova-tax.nova-book-hc .nova-book-hc__form .elementor-field-label {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	font-family: var(--nova-tax-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--nova-tax-heading);
}

.nova-tax.nova-book-hc .nova-book-hc__form .elementor-mark-required .elementor-field-label::after {
	margin-inline-start: 2px;
	color: #f34e31;
}

/*
 * 48px tall, exactly as Figma draws the field. Its 16px padding is the
 * horizontal inset only — a 16px block padding around a 24px line box would make
 * the field 58px and, with five of them stacked, push the card 50px past the
 * design. Single-line fields centre their text in the 48px box on their own.
 */
.nova-tax.nova-book-hc .nova-book-hc__form .elementor-field-textual,
.nova-tax.nova-book-hc .nova-book-hc__form select.elementor-field {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0 16px;
	background-color: var(--nova-tax-white);
	border: 1px solid var(--nova-book-hc-field-border);
	border-radius: 8px;
	font-family: var(--nova-tax-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-tax-heading);
	box-shadow: none;
}

/* The textarea keeps the full 16px box — its text starts at the top edge. */
.nova-tax.nova-book-hc .nova-book-hc__form textarea.elementor-field-textual {
	min-height: 140px;
	padding: 16px;
	resize: vertical;
}

/*
 * The character counter novabp-book-health-check.js appends. Overlaid on the
 * textarea's bottom-right corner rather than placed below it, which is where
 * Figma draws it and keeps the field's own height unchanged; the group is the
 * positioning context, and the inset clears the browser's resize grip.
 */
.nova-tax.nova-book-hc .nova-book-hc__form .elementor-field-type-textarea {
	position: relative;
}

.nova-tax.nova-book-hc .nova-book-hc__form .nova-book-hc__counter {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-end: 28px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--nova-book-hc-placeholder);
	pointer-events: none;
}

.nova-tax.nova-book-hc .nova-book-hc__form .elementor-field-textual::placeholder {
	color: var(--nova-book-hc-placeholder);
	opacity: 1;
}

.nova-tax.nova-book-hc .nova-book-hc__form .elementor-field-textual:focus,
.nova-tax.nova-book-hc .nova-book-hc__form select.elementor-field:focus {
	border-color: var(--nova-tax-primary);
	outline: none;
}

/*
 * Two classes for the same reason the base sheet gives its buttons two: the
 * Global Kit styles bare `button`, and a lone `.elementor-button` ties with it
 * on specificity.
 */
.nova-tax.nova-book-hc .nova-book-hc__form .elementor-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 48px;
	padding: 0 16px;
	background-color: var(--nova-tax-primary);
	border: 0;
	border-radius: 8px;
	font-family: var(--nova-tax-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: none;
	color: var(--nova-tax-white);
	transition: background-color 0.2s ease;
}

.nova-tax.nova-book-hc .nova-book-hc__form .elementor-button:hover,
.nova-tax.nova-book-hc .nova-book-hc__form .elementor-button:focus {
	background-color: #0a1d4d;
	color: var(--nova-tax-white);
}

/*
 * The arrow that closes the button. Painted as a mask over the theme's own
 * `arrow-up-right.svg` rather than set as the widget's icon, so it matches every
 * other button in the design system and does not pull Font Awesome onto the page
 * for one glyph.
 */
.nova-tax.nova-book-hc .nova-book-hc__form .elementor-button::after {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background-color: currentcolor;
	mask-image: url("../icons/arrow-up-right.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-image: url("../icons/arrow-up-right.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

/* ---------------------------------------------------------------------------
 * Reassurance line
 * ------------------------------------------------------------------------ */

/*
 * Figma sets this 16px under the button, but the line is a widget of its own and
 * the panel it sits in has one gap for all three children — the 40px the head
 * needs above the form. The difference is paid back here rather than by dropping
 * the container to 16px and re-adding 24px above the form, which would move the
 * correction onto the element that already sizes correctly.
 */
.nova-tax.nova-book-hc .nova-book-hc__note {
	margin-block-start: -24px;
}

.nova-book-hc .nova-book-hc__note,
.nova-book-hc .nova-book-hc__note p {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	font-family: var(--nova-tax-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-tax-body);
}

.nova-book-hc .nova-book-hc__note p::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	/* Navy, not the usual accent green — Figma draws this badge in Primary/500. */
	background-color: var(--nova-tax-primary);
	mask-image: url("../icons/seal-check.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-image: url("../icons/seal-check.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

/* ---------------------------------------------------------------------------
 * Responsive
 *
 * Figma supplies desktop only. Everything below 1440 is an addition.
 * ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	/*
	 * The row stacks here — intro first, card beneath at the full measure — but
	 * that break lives in the container's own tablet settings, not in this file.
	 * All that is left for CSS is what the split leaves behind.
	 */
	.nova-tax.nova-book-hc .nova-book-hc__col,
	.nova-tax.nova-book-hc .nova-book-hc__card {
		flex: 0 0 auto;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.nova-book-hc__item {
		font-size: 16px;
	}

	.nova-tax.nova-book-hc .nova-book-hc__panel {
		padding: 20px;
	}

	.nova-tax.nova-book-hc .nova-book-hc__card-title,
	.nova-tax.nova-book-hc .nova-book-hc__card-title .elementor-heading-title {
		font-size: 24px;
	}

	/*
	 * Every field goes full width. The name pair would hold about six characters
	 * a side at this measure, and the country code even less.
	 */
	.nova-tax.nova-book-hc .nova-book-hc__form .elementor-field-group.elementor-col-25,
	.nova-tax.nova-book-hc .nova-book-hc__form .elementor-field-group.elementor-col-50,
	.nova-tax.nova-book-hc .nova-book-hc__form .elementor-field-group.elementor-col-75 {
		width: 100%;
	}
}