/* =============================================================================
   FLID enquiry component
   A professional legal intake card, not a contact-form plugin.
   Desktop: a genuine position:sticky rail beside the article.
   Mobile:  one inline form plus a compact bottom action bar.
   ============================================================================= */

:root {
	--enq-navy: #0f2740;
	--enq-navy-700: #17395c;
	--enq-ink: #12202f;
	--enq-muted: #5a6b7d;
	--enq-line: #d8dfe7;
	--enq-line-strong: #9aa7b5;
	--enq-gold: #c9a227;
	--enq-gold-dark: #a8871d;
	/* Text-safe gold. #a8871d is 3.42:1 on white, which fails WCAG 2.1 AA
	   for the small uppercase eyebrow and the required marker. This token is
	   4.86:1 on white and 4.73:1 on --enq-surface-alt. --enq-gold-dark stays
	   for the focus ring, where 3:1 is the applicable threshold. */
	--enq-gold-text: #8a6e13;
	--enq-surface: #ffffff;
	--enq-surface-alt: #fbfcfd;
	--enq-radius: 12px;
	--enq-radius-sm: 8px;
	--enq-danger: #9b1c1c;
}

/* ---------- the card -------------------------------------------------- */
.flid-enq {
	background: var(--enq-surface);
	border: 1px solid var(--enq-line);
	border-block-start: 3px solid var(--enq-gold);
	border-radius: var(--enq-radius);
	padding: 22px;
	box-shadow: 0 1px 2px rgba(15, 39, 64, .04), 0 8px 24px rgba(15, 39, 64, .06);
	color: var(--enq-ink);
	font-size: .9375rem;
	line-height: 1.45;
}
.flid-enq * { box-sizing: border-box; }
.flid-enq [hidden] { display: none !important; }

.flid-enq-eyebrow {
	margin: 0 0 .22rem;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--enq-gold-text);
}
.flid-enq-title {
	margin: 0 0 .25rem;
	font-size: 1.15rem;
	line-height: 1.22;
	font-weight: 600;
	color: var(--enq-navy);
	letter-spacing: -.005em;
}
.flid-enq-intro {
	margin: 0 0 .55rem;
	font-size: .75rem;
	line-height: 1.36;
	color: var(--enq-muted);
}

/* ---------- fields ------------------------------------------------------ */
.flid-enq .flid-f { margin-block-end: .35rem; }
.flid-enq label {
	display: block;
	font-size: .9375rem;   /* 15px */
	font-weight: 600;
	color: var(--enq-ink);
	margin-block-end: .15rem;
	line-height: 1.28;
}
.flid-enq .flid-req { color: var(--enq-gold-text); font-weight: 700; }
.flid-enq .flid-hint {
	display: block;
	font-size: .6875rem;
	font-weight: 400;
	color: var(--enq-muted);
	margin-block-start: .1rem;
	line-height: 1.35;
}

.flid-enq input[type="text"],
.flid-enq input[type="email"],
.flid-enq input[type="tel"],
.flid-enq select,
.flid-enq textarea {
	width: 100%;
	min-height: 44px;
	padding: .55rem .7rem;
	font: inherit;
	font-size: .9375rem;
	color: var(--enq-ink);
	background-color: var(--enq-surface);
	border: 1px solid var(--enq-line-strong);
	border-radius: var(--enq-radius-sm);
	-webkit-text-fill-color: var(--enq-ink);
	appearance: none;
}
.flid-enq textarea {
	min-height: 72px;
	resize: vertical;
	line-height: 1.4;
}
.flid-enq select {
	background-image: linear-gradient(45deg, transparent 50%, var(--enq-muted) 50%),
	                  linear-gradient(135deg, var(--enq-muted) 50%, transparent 50%);
	background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-inline-end: 1.9rem;
}
.flid-enq input::placeholder, .flid-enq textarea::placeholder { color: #8b98a6; }

.flid-enq input:focus-visible,
.flid-enq select:focus-visible,
.flid-enq textarea:focus-visible,
.flid-enq button:focus-visible,
.flid-enq a:focus-visible,
.flid-enq .flid-file-ui:focus-within {
	outline: 3px solid var(--enq-gold);
	outline-offset: 1px;
	border-color: var(--enq-navy);
}
.flid-enq [aria-invalid="true"] { border-color: var(--enq-danger); }

/* Autofill keeps the same ink as everything else. */
.flid-enq input:-webkit-autofill,
.flid-enq input:-webkit-autofill:hover,
.flid-enq input:-webkit-autofill:focus,
.flid-enq textarea:-webkit-autofill {
	-webkit-text-fill-color: var(--enq-ink);
	box-shadow: 0 0 0 40px var(--enq-surface) inset;
}

/* phone: country code + number on one row */
.flid-enq .flid-tel { display: flex; gap: .4rem; align-items: stretch; }
.flid-enq .flid-tel .flid-cc { flex: 0 0 7.4rem; min-width: 0; font-size: .875rem; padding-inline: .55rem 1.7rem; }
.flid-enq .flid-tel input[type="tel"] { flex: 1 1 auto; min-width: 0; }

.flid-enq .flid-err {
	display: block;
	margin-block-start: .2rem;
	font-size: .75rem;
	font-weight: 600;
	color: var(--enq-danger);
	line-height: 1.35;
}

/* ---------- upload ------------------------------------------------------ */
/* The native control is taken out of the visual layer; the label is the target. */
.flid-enq .flid-file input[type="file"] {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
.flid-enq .flid-file-row {
	display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.flid-enq .flid-file-ui {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; min-width: 44px;
	padding: .4rem .85rem; margin: 0;
	font-size: .8125rem; font-weight: 600;
	color: var(--enq-navy); background: var(--enq-surface-alt);
	border: 1px dashed var(--enq-line-strong); border-radius: var(--enq-radius-sm);
	cursor: pointer; white-space: nowrap;
}
.flid-enq .flid-file-ui:hover { border-color: var(--enq-navy); background: #f4f7fa; }
.flid-enq .flid-file-row .flid-hint { flex: 1 1 8rem; margin: 0; }
.flid-enq .flid-file-chosen {
	display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
	margin: .4rem 0 0; font-size: .8125rem;
}
.flid-enq .flid-file-name { font-weight: 600; word-break: break-all; }
.flid-enq .flid-file-remove {
	min-height: 44px; padding: .3rem .6rem;
	font: inherit; font-size: .78rem; font-weight: 600;
	color: var(--enq-danger); background: none;
	border: 1px solid currentColor; border-radius: var(--enq-radius-sm);
	cursor: pointer;
}

/* ---------- actions ----------------------------------------------------- */
.flid-enq .flid-actions { margin-block-start: .55rem; }
.flid-enq .flid-submit {
	display: block; width: 100%;
	min-height: 46px; padding: .55rem 1rem;
	font: inherit; font-size: 1.0625rem; font-weight: 600;   /* 17px */
	color: #fff; background: var(--enq-navy);
	border: 1px solid var(--enq-navy);
	border-radius: var(--enq-radius-sm);
	cursor: pointer;
}
.flid-enq .flid-submit:hover { background: var(--enq-navy-700); border-color: var(--enq-navy-700); }
.flid-enq .flid-consent-note {
	margin: .4rem 0 0;
	font-size: .65rem; line-height: 1.32; color: var(--enq-muted);
}
.flid-enq .flid-consent-note a { color: var(--enq-muted); }
/* WhatsApp is a discreet text link, never a second competing button. */
.flid-enq .flid-alt {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	display: inline-block; margin-block-start: .45rem;
	font-size: .78rem; font-weight: 500;
	color: var(--enq-muted);
	text-decoration-color: var(--enq-line-strong);
	text-underline-offset: .16em;
}
.flid-enq .flid-alt strong, .flid-enq .flid-alt b { font-weight: 600; }
.flid-enq .flid-alt:hover { color: var(--enq-navy); text-decoration-color: var(--enq-gold); }

/* ---------- notices ----------------------------------------------------- */
.flid-enq .flid-notice {
	margin: 0 0 .8rem; padding: .7rem .85rem;
	border-radius: var(--enq-radius-sm); font-size: .8125rem; line-height: 1.45;
}
.flid-enq .flid-notice.is-error {
	background: #fdf2f2; border: 1px solid #f0c4c4; color: var(--enq-danger);
}
.flid-enq .flid-notice.is-error a { color: var(--enq-danger); font-weight: 600; }
.flid-enq .flid-notice.is-error ul { margin: .4rem 0 0; padding-inline-start: 1.1rem; }
.flid-enq .flid-notice.is-error li { margin-block-end: .2rem; }
.flid-enq .flid-notice.is-ok {
	background: #f1f8f3; border: 1px solid #bcdcc6; color: #14532d;
}
.flid-enq .flid-notice:focus-visible { outline: 3px solid var(--enq-gold); outline-offset: 2px; }

/* The honeypot: the only visually hidden field, and it occupies no layout space. */
.flid-enq .flid-hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important; height: 1px !important;
	overflow: hidden !important;
}
.flid-enq .screen-reader-text {
	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;
}

/* =============================================================================
   Desktop: content left, sticky enquiry rail right
   ============================================================================= */
@media (min-width: 1024px) {
	/* 70/30. The rail is a real grid track, and align-self:start is what lets
	   sticky work inside a grid item at all — a stretched item has nowhere to
	   travel. */
	.flid-cols {
		display: grid;
		/* The rail is sized in its own right (350-390px) and the article takes
		   the remainder. Expressing it as a percentage cannot satisfy both the
		   68-72% target and the 350px minimum at 1024px, and a legible form is
		   the constraint that matters. */
		grid-template-columns: minmax(0, 1fr) clamp(350px, 26vw, 390px);
		gap: 2rem;
		align-items: start;
	}
	@media (min-width: 1280px) {
		.flid-cols { gap: 2.5rem; }
	}
	.flid-col-main { min-width: 0; }

	/* The rail is the full-height grid track. It is NOT itself sticky: it is the
	   room the sticky stack travels in. A sticky element can only move inside a
	   parent taller than itself, so the track stretches and the stack sticks.
	   Because the track ends where the grid row ends, the stack releases before
	   the footer without any measurement or script. */
	.flid-rail {
		align-self: stretch;
		height: 100%;
		width: 100%;
		justify-self: stretch;
		position: relative;
		max-height: none;
		overflow: visible;
	}

	/* One sticky element holding both the Google control and the enquiry card,
	   so the two can never overlap or separate. */
	.flid-rail-sticky {
		position: sticky;
		/* enquiry.js refines this once it has measured the real stack; the
		   declaration below is the correct value before it runs. */
		top: var(--flid-rail-top, calc(var(--flid-admin-bar, 0px) + var(--flid-header-h, 0px) + 16px));
		display: flex;
		flex-direction: column;
		gap: .85rem;
		max-height: none;
		overflow: visible;
	}
	body.admin-bar .flid-rail { --flid-admin-bar: 32px; }

	.flid-rail .flid-enq { padding: 20px; }
	.flid-rail .flid-enq-fields,
	.flid-rail .flid-enq > form {
		display: block;
		max-height: none;
		overflow: visible;
		min-height: 0;
	}

	/* The inline instance is the mobile form; the rail takes over here. The
	   success confirmation is the exception and stays visible at every width. */
	.flid-enq-inline { display: none; }
	.flid-enq-inline.flid-enq-confirm { display: block; max-width: 45rem; }
}

@media (max-width: 1023.98px) {
	.flid-rail { display: none; }
}

/* Only a viewport shorter than the card itself falls back to normal flow.
   Everything between that and a comfortable fit is handled by the measured
   bottom-anchored offset in enquiry.js. */
@media (min-width: 1024px) and (max-height: 480px) {
	.flid-rail-sticky { position: static; }
}
.flid-rail-sticky.flid-rail-flow { position: static; }

/* =============================================================================
   Mobile and tablet: compact bottom action bar
   ============================================================================= */
.flid-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60;
	display: none;
	gap: .5rem;
	padding: .5rem .75rem;
	padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
	padding-inline-start: calc(.75rem + env(safe-area-inset-left, 0px));
	padding-inline-end: calc(.75rem + env(safe-area-inset-right, 0px));
	background: rgba(255, 255, 255, .97);
	border-block-start: 1px solid var(--enq-line);
	box-shadow: 0 -6px 20px rgba(15, 39, 64, .08);
}
@supports (backdrop-filter: blur(6px)) {
	.flid-bar { background: rgba(255, 255, 255, .9); backdrop-filter: blur(6px); }
}
@media (max-width: 1023.98px) {
	.flid-bar { display: flex; }
	/* Reserved up front so the bar never causes a layout shift when it paints,
	   and never sits over the footer. */
	body.flid-has-bar { padding-bottom: var(--flid-bar-h, 4.25rem); }

	/* The bar is fixed, so a control scrolled to the very bottom would sit
	   behind it. A scroll margin means focus always lands clear of it. */
	.flid-enq input,
	.flid-enq select,
	.flid-enq textarea,
	.flid-enq button,
	.flid-enq a[href],
	.flid-enq .flid-file-ui,
	.flid-enq .flid-notice {
		scroll-margin-block-end: calc(var(--flid-bar-h, 4.25rem) + 1rem);
		scroll-margin-block-start: calc(var(--flid-header-h, 0px) + 1rem);
	}
}
.flid-bar > * {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .5rem .75rem;
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	border-radius: var(--enq-radius-sm);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}
.flid-bar-primary { color: #fff; background: var(--enq-navy); border: 1px solid var(--enq-navy); }
.flid-bar-primary:hover { background: var(--enq-navy-700); }
.flid-bar-alt { color: var(--enq-navy); background: #fff; border: 1px solid var(--enq-line-strong); }
.flid-bar-alt:hover { border-color: var(--enq-navy); }
.flid-bar a:focus-visible, .flid-bar button:focus-visible {
	outline: 3px solid var(--enq-gold-dark); outline-offset: 2px;
}

/* The inline form sits in the article; give it a sensible reading measure. */
.flid-enq-inline { max-width: 34rem; margin-block: 1.5rem 2rem; }

/* At large text sizes the rail layout is abandoned in favour of the inline
   form, which is what 200% zoom resolves to at most desktop widths. */
@media (max-width: 1023.98px), (max-width: 1400px) and (min-resolution: 1.5dppx) {
	.flid-cols { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.flid-enq, .flid-bar, .flid-rail, .flid-rail-sticky { transition: none !important; }
}

@media print {
	.flid-bar, .flid-rail { display: none !important; }
}

/* =============================================================================
   Google preferred sources
   The control itself is Google's, drawn by Google's library into the slot
   below. Nothing here restyles, recolours or reshapes it — only the block it
   sits in is styled, and the slot reserves its height so a late-arriving
   third-party button cannot shift the page.
   ============================================================================= */
.flid-ps {
	background: #fff;
	border: 1px solid var(--enq-line);
	border-radius: 12px;
	padding: 16px 18px;
	box-shadow: 0 1px 2px rgba(15, 39, 64, .04);
}
.flid-ps-title {
	margin: 0 0 .3rem;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--enq-navy);
	letter-spacing: 0;
}
.flid-ps-text {
	margin: 0 0 .7rem;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--enq-ink-600, #4a5568);
}
/* Height is reserved before Google's script answers. 44px is the control's
   drawn height plus its own margin; the slot never collapses and never grows. */
.flid-ps-slot {
	min-height: 44px;
	display: flex;
	align-items: center;
}
.flid-ps-slot > div[google-add-preferred-source-btn] { min-height: 40px; }

.flid-ps.is-preview { border-style: dashed; background: #fcfcfd; }
.flid-ps-pending {
	margin: 0;
	font-size: .78rem;
	line-height: 1.5;
	color: #6b5a1c;
}

/* Compact control in the mobile dock. */
.flid-ps-dock {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: none;
	display: flex;
	align-items: center;
	min-height: 44px;
	min-width: 44px;
}
.flid-ps-dock.is-preview .flid-ps-pending {
	font-size: .68rem;
	line-height: 1.2;
	max-width: 6.5rem;
	color: #6b5a1c;
}

/* The dock is a row of equal-priority controls; the Google control keeps its
   own intrinsic width and the two site actions share what is left. */
@media (max-width: 1023.98px) {
	.flid-bar { gap: .5rem; }
	.flid-bar .flid-bar-primary,
	.flid-bar .flid-bar-secondary { flex: 1 1 0; min-width: 0; }
	/* The Google control keeps its intrinsic size but must not be the reason
	   the row overflows. */
	.flid-bar .flid-ps-dock { flex: 0 1 auto; min-width: 0; overflow: hidden; }
}

/* At 320px the dock cannot hold three controls without overflowing — measured
   at 468px of content in a 320px viewport. The consultation action is the one
   that has to be there, and WhatsApp is already one tap away in the urgent
   strip pinned above. So WhatsApp stands down at the narrowest widths only. */
@media (max-width: 389.98px) {
	.flid-bar { gap: .4rem; padding-inline: .5rem; }
	.flid-bar .flid-bar-secondary { display: none; }
	.flid-bar > * { font-size: .88rem; }
}

/* A hub-page panel is wider than a rail panel but keeps the same measure. */
.flid-ps-standalone { max-width: 34rem; margin-block: 2rem; }

@media (prefers-reduced-motion: reduce) {
	.flid-ps { transition: none !important; }
}

/* Compact rail variant. The sticky stack has a height budget: every pixel the
   Google control takes is a pixel the enquiry form cannot have, so in the rail
   the explanatory sentence is dropped to a single line and the control sits
   beside it. The full panel is used on the update hubs, where there is room. */
.flid-ps-rail {
	padding: 10px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: wrap;
}
.flid-ps-rail .flid-ps-title {
	margin: 0;
	font-size: .8rem;
	font-weight: 600;
	flex: 1 1 8rem;
}
.flid-ps-rail .flid-ps-slot { min-height: 40px; flex: 0 0 auto; }
.flid-ps-rail .flid-ps-pending { font-size: .72rem; }


/* =============================================================================
   Rail height budget
   ============================================================================= */
@media (min-width: 1024px) {
	/* The Google control becomes a single row beside its label. */
	.flid-rail .flid-ps-rail { padding: 8px 12px; gap: .6rem; }
	.flid-rail .flid-ps-rail .flid-ps-title { font-size: .78rem; line-height: 1.3; }
	.flid-rail .flid-ps-rail .flid-ps-slot { min-height: 36px; }

	.flid-rail-sticky { gap: .65rem; }

	.flid-rail .flid-enq { padding: 16px 18px; }
	.flid-rail .flid-enq-intro { font-size: .8rem; line-height: 1.45; margin-block-end: .7rem; }
	.flid-rail .flid-enq-title { margin-block-end: .2rem; }
	.flid-rail .flid-consent-note { font-size: .74rem; line-height: 1.4; }
	.flid-rail .flid-actions { gap: .45rem; }

	/* Field rhythm. The controls themselves stay at their full 44px; only the
	   space between them is reduced, and only in the rail. */
	.flid-rail .flid-f { margin-block-end: .3rem; }
	.flid-rail .flid-f:last-child { margin-block-end: 0; }

	/* The file control becomes one row: the button and its hint side by side
	   instead of stacked. Nothing is hidden and the button keeps its 44px. */
	.flid-rail .flid-file .flid-file-ui { margin-block-start: 0; }
	.flid-rail .flid-file > label { margin-block-end: .1rem; }
	.flid-rail .flid-file .flid-hint { font-size: .72rem; }
	.flid-rail .flid-enq .flid-submit { min-height: 44px; }
	.flid-rail .flid-enq { padding-block: 14px; }
}

/* -----------------------------------------------------------------------------
   Split mode.
   The sticky stack has a hard budget — it cannot be taller than the viewport,
   or part of it is unreachable at every scroll position. When the Google
   control tips it past that budget, the choice is between losing the sticky
   form and losing the shared container. The form is what the visitor came for,
   so the control steps out: it stays visible at the top of the rail, in normal
   flow, and the form alone becomes the sticky element.
   There is still exactly one sticky element in the rail, so the two can never
   overlap — which is the property the shared container existed to guarantee.
   ----------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	/* The wrapper stands down as the sticky element, but it must still be as
	   tall as the rail track, because a sticky element can only travel inside a
	   parent taller than itself. Without the height it hugged its children and
	   the card scrolled clean off the screen — measured at 1366x600, the card
	   reported position:sticky while sitting at top:-11409. Computed position
	   alone proves nothing; the coordinate is the test. */
	.flid-rail-sticky.flid-rail-split {
		position: static;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.flid-rail-sticky.flid-rail-split > .flid-enq {
		position: sticky;
		top: var(--flid-rail-top, calc(var(--flid-admin-bar, 0px) + var(--flid-header-h, 0px) + 16px));
		flex: 0 0 auto;
	}
	/* The Google control keeps its natural place above the card and does not
	   stretch to fill the taller wrapper. */
	.flid-rail-sticky.flid-rail-split > .flid-ps { flex: 0 0 auto; }
}