/**
 * Finewerk Audit Section
 *
 * Scoped, BEM-style styles for the dark-green split lead-capture section.
 * All custom properties are namespaced with --fw-as- to avoid collisions.
 * The two green surfaces (section + panel) carry CSS fallbacks here; the
 * editable Elementor background groups override them per instance.
 */

/* ------------------------------------------------------------------
 * Typography defaults (see assets/css/fonts.css)
 *
 * Hubot Sans for headings/titles/stat numbers, Archivo for everything
 * else. Declared at single-class specificity — the tag group through a
 * zero-specificity :where() — so an explicit Elementor Typography
 * control (which Elementor writes at element-id specificity) always
 * overrides it. No !important anywhere.
 * ---------------------------------------------------------------- */

.finewerk-audit-section {
	font-family: var(--fw-font-body);
}

.finewerk-audit-section :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--fw-font-title);
}

/* Form controls do not inherit the document font: the UA sheet gives
   button/input/select/textarea their own `font: 400 13.33px Arial`.
   Opt them back into the component's face. */
.finewerk-audit-section :where(button, input, select, textarea, optgroup) {
	font-family: inherit;
}

.finewerk-audit-section {
	--fw-as-accent: #C8F8A9;
	--fw-as-accent-border: #ADDA90;
	--fw-as-deep-green: #0F3D3A;
	--fw-as-content-width: 55%;
	--fw-as-column-gap: 0px;
	--fw-as-divider-color: rgba(255, 255, 255, 0.08);
	--fw-as-divider-width: 1px;
	--fw-as-item-spacing: 22px;
	--fw-as-field-gap: 10px;
	--fw-as-input-height: 52px;
	--fw-as-review-spacing: 20px;
	--fw-as-review-avatar: 52px;
	--fw-as-review-overlap: 23px;
	--fw-as-review-ring: #ffffff;
	--fw-as-review-ring-width: 2px;
	--fw-as-review-star: #F3AA3C;
	--fw-as-review-star-size: 18px;
	--fw-as-toggle-height: 52px;
	--fw-as-arrow-size: 1em;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: 20px;
	background: linear-gradient(180deg, #101F1B 0%, #1E4237 100%);
	color: #ffffff;
}

.finewerk-audit-section__inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	column-gap: var(--fw-as-column-gap);
	width: 100%;
}

/* ---------- Left content column ---------- */

.finewerk-audit-section__content {
	flex: 0 0 var(--fw-as-content-width);
	max-width: var(--fw-as-content-width);
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 60px 56px;
}

.finewerk-audit-section__eyebrow {
	display: block;
	margin: 0 0 22px;
	color: var(--fw-as-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.4;
}

.finewerk-audit-section__heading {
	margin: 0 0 40px;
	color: #ffffff;
	font-family: var(--fw-font-title);
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: 0.01em;
}

.finewerk-audit-section__list {
	margin: 0;
}

.finewerk-audit-section__item {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 26px;
	align-items: baseline;
	padding: var(--fw-as-item-spacing) 0;
	border-top: var(--fw-as-divider-width) solid var(--fw-as-divider-color);
}

.finewerk-audit-section__item-num {
	color: var(--fw-as-accent);
	font-family: var(--fw-font-title);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
}

.finewerk-audit-section__item-title {
	color: #ffffff;
	font-family: var(--fw-font-title);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

.finewerk-audit-section__item-text {
	grid-column: 2;
	margin: 6px 0 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 15px;
	line-height: 1.6;
}

.finewerk-audit-section__note {
	margin: auto 0 0;
	padding-top: 40px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 15px;
	line-height: 1.7;
}

/* ---------- Right form panel ---------- */

.finewerk-audit-section__panel {
	flex: 1 1 auto;
	min-width: 0;
	padding: 56px 48px;
	background: linear-gradient(180deg, #0F2A22 0%, #133129 100%);
}

.finewerk-audit-section__form-title {
	margin: 0 0 8px;
	color: #ffffff;
	font-family: var(--fw-font-title);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
}

.finewerk-audit-section__form-subtitle {
	margin: 0 0 28px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	line-height: 1.5;
}

.finewerk-audit-section__form[hidden] {
	display: none;
}

.finewerk-audit-section__form {
	display: flex;
	flex-direction: column;
	row-gap: var(--fw-as-field-gap);
}

/*
 * Every control — text inputs, the service dropdown, the language toggle,
 * the submit button and the disclaimer — is a direct child here, so one
 * row-gap gives the whole form a single consistent rhythm.
 */
.finewerk-audit-section__form [data-fw-form-body] {
	display: flex;
	flex-direction: column;
	row-gap: var(--fw-as-field-gap);
}

.finewerk-audit-section__field {
	display: flex;
	flex-direction: column;
	row-gap: 9px;
	min-width: 0;
}

.finewerk-audit-section__label {
	color: rgba(255, 255, 255, 0.85);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Inputs are styled only within the widget scope. */
.finewerk-audit-section__input {
	/* width:100% sits alongside padding and a border here, so the border
	   box is what keeps every control inside the panel. */
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: var(--fw-as-input-height);
	padding: 0 16px;
	background-color: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	color: #ffffff;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s ease;
}

.finewerk-audit-section__input--textarea {
	min-height: calc(var(--fw-as-input-height) * 2);
	padding-top: 14px;
	padding-bottom: 14px;
	resize: vertical;
}

.finewerk-audit-section__input::placeholder {
	color: rgba(255, 255, 255, 0.45);
	opacity: 1;
}

.finewerk-audit-section__input:focus-visible {
	outline: 2px solid var(--fw-as-accent);
	outline-offset: 2px;
}

/* Invalid state applied by the shared Finewerk forms handler. */
.finewerk-audit-section__input.is-fw-invalid {
	border-color: #f2a6a6;
}

/* ---------- Language toggle ---------- */

.finewerk-audit-section__lang {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px;
}

/* Visually hidden but focusable radios drive the :checked pill state. */
.finewerk-audit-section__lang-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.finewerk-audit-section__lang-option {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--fw-as-toggle-height);
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.finewerk-audit-section__lang-radio:checked + .finewerk-audit-section__lang-option {
	border-color: var(--fw-as-accent-border);
	color: var(--fw-as-accent);
	background-color: rgba(200, 248, 169, 0.08);
}

.finewerk-audit-section__lang-radio:focus-visible + .finewerk-audit-section__lang-option {
	outline: 2px solid var(--fw-as-accent);
	outline-offset: 2px;
}

/* ---------- Service dropdown ---------- */

.finewerk-audit-section__select-wrap {
	position: relative;
	display: block;
}

.finewerk-audit-section__input--select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 42px;
	cursor: pointer;
}

/* Native option lists are painted by the OS, so force a readable pair. */
.finewerk-audit-section__input--select option {
	background-color: #10201C;
	color: #ffffff;
}

.finewerk-audit-section__select-arrow {
	position: absolute;
	top: 50%;
	right: 18px;
	width: 9px;
	height: 9px;
	margin-top: -6px;
	border-right: 2px solid rgba(255, 255, 255, 0.6);
	border-bottom: 2px solid rgba(255, 255, 255, 0.6);
	transform: rotate(45deg);
	pointer-events: none;
}

/* ---------- Submit + disclaimer ---------- */

.finewerk-audit-section__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: 10px;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, #D9FCC2 0%, #C8F8A9 100%);
	color: var(--fw-as-deep-green);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.finewerk-audit-section__submit:hover {
	filter: brightness(1.04);
}

.finewerk-audit-section__submit:focus-visible {
	outline: 2px solid var(--fw-as-accent);
	outline-offset: 3px;
}

.finewerk-audit-section__submit-arrow {
	font-size: var(--fw-as-arrow-size);
	line-height: 1;
	transition: transform 0.2s ease;
}

.finewerk-audit-section__submit:hover .finewerk-audit-section__submit-arrow {
	transform: translateX(3px);
}

.finewerk-audit-section__disclaimer {
	margin: 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 12.5px;
	line-height: 1.5;
	text-align: center;
}

/* ---------- Review strip ---------- */

/*
 * Sits directly below the form inside the panel. Colours, sizes and the
 * spacing above it are all Elementor-controlled; the values here are the
 * reference design as a fallback.
 */
.finewerk-audit-section__review {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	box-sizing: border-box;
	margin-top: var(--fw-as-review-spacing);
	padding: 22px;
	border: 1px solid #353434;
	border-radius: 14px;
	background-color: #1E1D1D;
}

/* The strip is decorative twice over; this is what a screen reader gets. */
.finewerk-audit-section__review-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * row-reverse + reversed markup reproduces the reference stacking: each
 * portrait overlaps the one to its right, and the count badge sits on top.
 */
.finewerk-audit-section__review-avatars {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	flex: 0 0 auto;
}

.finewerk-audit-section__review-avatar {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--fw-as-review-avatar);
	height: var(--fw-as-review-avatar);
	overflow: hidden;
	border: var(--fw-as-review-ring-width) solid var(--fw-as-review-ring);
	border-radius: 50%;
	background-color: #2A2A2A;
}

.finewerk-audit-section__review-avatar + .finewerk-audit-section__review-avatar {
	margin-right: calc(-1 * var(--fw-as-review-overlap));
}

.finewerk-audit-section__review-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.finewerk-audit-section__review-extra {
	z-index: 1;
	overflow: visible;
	background-color: #1A1A1A;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
}

.finewerk-audit-section__review-text {
	display: flex;
	flex-direction: column;
	row-gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
}

.finewerk-audit-section__review-rating {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 12px;
	row-gap: 4px;
}

.finewerk-audit-section__review-stars {
	display: inline-flex;
	align-items: center;
	column-gap: 8px;
	/* Stars read as centred against the big score, not baseline-aligned. */
	align-self: center;
	margin-right: 10px;
}

.finewerk-audit-section__review-star {
	display: block;
	line-height: 0;
	color: var(--fw-as-review-star);
}

.finewerk-audit-section__review-star--empty {
	opacity: 0.28;
}

.finewerk-audit-section__review-star svg {
	display: block;
	width: var(--fw-as-review-star-size);
	height: var(--fw-as-review-star-size);
	fill: currentColor;
}

.finewerk-audit-section__review-figure {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 12px;
	row-gap: 2px;
}

.finewerk-audit-section__review-score {
	color: #ffffff;
	font-family: var(--fw-font-title);
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
}

.finewerk-audit-section__review-count {
	color: #8F8E8E;
	font-size: 14px;
	line-height: 1.4;
}

.finewerk-audit-section__review-caption {
	margin: 0;
	color: #8F8E8E;
	font-size: 15px;
	line-height: 1.4;
}

/* ---------- Submission states ---------- */

/*
 * The shared handler renders one status region; these custom properties
 * tune the generic states in forms.css for this dark green panel.
 */
.finewerk-audit-section__status {
	--fw-form-border: var(--fw-as-accent-border);
	--fw-form-radius: 12px;
	--fw-form-color: #ffffff;
	--fw-form-success-border: var(--fw-as-accent-border);
	--fw-form-success-bg: rgba(200, 248, 169, 0.08);
	--fw-form-error-border: rgba(242, 166, 166, 0.75);
	--fw-form-error-bg: rgba(242, 166, 166, 0.1);
	margin-top: 14px;
}

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

@media (prefers-reduced-motion: reduce) {
	.finewerk-audit-section__input,
	.finewerk-audit-section__lang-option,
	.finewerk-audit-section__submit,
	.finewerk-audit-section__submit-arrow {
		transition: none;
	}

	.finewerk-audit-section__submit:hover .finewerk-audit-section__submit-arrow {
		transform: none;
	}
}

/* ---------- Responsive ---------- */

/* Tablet: tighten columns and padding. */
@media (max-width: 1024px) {
	.finewerk-audit-section__content {
		padding: 44px 36px;
	}

	.finewerk-audit-section__panel {
		padding: 44px 36px;
	}

	.finewerk-audit-section__heading {
		margin-bottom: 30px;
	}
}

/* Mobile: stack content above the form panel, full width. */
@media (max-width: 767px) {
	.finewerk-audit-section__inner {
		flex-direction: column;
		row-gap: var(--fw-as-column-gap);
	}

	.finewerk-audit-section__content,
	.finewerk-audit-section__panel {
		/* width:100% plus padding needs the border box, or the columns
		   overflow the section and push the form off-screen. */
		box-sizing: border-box;
		flex-basis: auto;
		max-width: 100%;
		width: 100%;
		padding: 36px 24px;
	}

	.finewerk-audit-section__note {
		padding-top: 28px;
	}

	.finewerk-audit-section__lang {
		grid-template-columns: 1fr;
	}

	/* Narrow panel: let the score line wrap under the stars if it must. */
	.finewerk-audit-section__review {
		gap: 14px;
	}

	.finewerk-audit-section__review-stars {
		margin-right: 4px;
	}
}

/* Very narrow: stack the portraits above the rating. */
@media (max-width: 400px) {
	.finewerk-audit-section__review {
		align-items: flex-start;
	}

	.finewerk-audit-section__review-text {
		flex-basis: 100%;
	}
}

/* ==========================================================================
   Bottom sheet stack  (audit-bottom.png)
   ==========================================================================
   Two decorative "sheets" hanging below the section's bottom edge, like tabs
   stacked behind the card. The section root clips its own children
   (overflow: hidden + radius), so the sheets live in a clipped strip that is
   a sibling of the section inside a shell wrapper:

       .finewerk-audit-section-shell        position: relative; its border box
                                            ends exactly at the section's
                                            bottom edge — the stack reserves
                                            NO space inside the widget, so a
                                            background applied to any ancestor
                                            (Elementor wrapper or container)
                                            also ends at the content edge and
                                            can never fill behind the sheets
           .finewerk-audit-section          normal flow → the whole visual
           __sheets                         absolute strip hanging below the
                                            shell (top: 100%), overflow:
                                            hidden — clips both sheets to
                                            their exact visible bands
               __sheet--back   (darker)     painted first  → lower band
               __sheet--front  (lighter)    painted second → upper band

   Each sheet is taller than its visible band, but the STRIP clips the excess
   — the stack never relies on the section being opaque, so it renders
   correctly even when the instance's section background is transparent and
   an ancestor paints the green (the audit-visual-bug.png failure). Because
   the strip hangs outside the shell's box, the element that follows the
   widget needs its normal page gap (any non-zero Elementor gap/padding
   covers the 20px hang).

   Geometry and colors measured from the reference (values are the 1x half of
   the 2x capture): ~10px visible per sheet, ~12px bottom corner radius,
   front sheet inset ~5px per side at #B9B9B9, back sheet ~22px at #888888.
   The greys match no existing Finewerk utility (accent/deep-green/gradient/
   grain/glass), so they are local custom properties here.
   ========================================================================== */

/* Static fallback matching the section's own 20px: the widget wrapper is
   where the instance-level background utility (fw-bg-gradient)
   paint, so it must round like the card. The grain overlay follows via its
   own border-radius: inherit. NO overflow clipping here — the sheet strip
   hangs below the wrapper's box and must never be cut. The Elementor
   "Section border radius" control overrides both in sync. */
.elementor-widget-finewerk_audit_section,
.finewerk-audit-section-shell {
	border-radius: 20px;
}

.finewerk-audit-section-shell {
	--fw-as-sheet-hang: 10px;
	--fw-as-sheet-radius: 12px;
	--fw-as-sheet-front-inset: 5px;
	--fw-as-sheet-front-bg: #B9B9B9;
	--fw-as-sheet-back-inset: 22px;
	--fw-as-sheet-back-bg: #888888;
	position: relative;
	/* Flex column so an externally stretched widget (Elementor height /
	   stretched container item) passes its extra height down to the section
	   instead of leaving a bare band the section background does not cover.
	   With an auto-height wrapper both rules are inert and the shell simply
	   wraps its content. */
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

/* The section grows with whichever column is taller (the form panel included
   — flex containers never shrink below their content), and additionally
   fills the shell when the shell is stretched from outside. Never a fixed
   height: the form can push it taller at any time. A flex column itself, so
   that in the stretched case the inner two-column row grows along with it
   and both column backgrounds keep reaching the bottom edge. */
.finewerk-audit-section-shell > .finewerk-audit-section {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.finewerk-audit-section-shell > .finewerk-audit-section > .finewerk-audit-section__inner {
	flex: 1 1 auto;
}

/* The strip owns the hang area below the section and clips the sheets to
   their visible bands. Decorative only, so it never catches the pointer. */
.finewerk-audit-section-shell__sheets {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: calc(var(--fw-as-sheet-hang) * 2);
	overflow: hidden;
	pointer-events: none;
}

.finewerk-audit-section-shell__sheet {
	position: absolute;
	/* Taller than the visible band on purpose: the bottom corner radius gets
	   its full curve, and the strip clips the excess above. */
	height: 40px;
	border-radius: 0 0 var(--fw-as-sheet-radius) var(--fw-as-sheet-radius);
}

.finewerk-audit-section-shell__sheet--front {
	left: var(--fw-as-sheet-front-inset);
	right: var(--fw-as-sheet-front-inset);
	bottom: var(--fw-as-sheet-hang);
	background: var(--fw-as-sheet-front-bg);
}

.finewerk-audit-section-shell__sheet--back {
	left: var(--fw-as-sheet-back-inset);
	right: var(--fw-as-sheet-back-inset);
	bottom: 0;
	background: var(--fw-as-sheet-back-bg);
}