/*
 * Accessible, "app-like" styling for the AdvicePro referral form, aligned
 * with the AHAC Referral Wizard prototype design system (WCAG 2.2 AA
 * target: persistent visible labels, high-contrast focus rings, generous
 * touch targets, dark-mode support, GOV.UK-style error summary/text).
 * Scoped to .advicepro-app so nothing here leaks into the rest of the site.
 */
.advicepro-app {
	--advicepro-teal: #233588;
	--advicepro-teal-dark: #1a2766;
	--advicepro-btn: #233588;
	--advicepro-btn-hover: #1a2766;
	--advicepro-card: #ffffff;
	--advicepro-paper: #f6f5f2;
	--advicepro-border: #dcd9d2;
	--advicepro-text: #2b2f31;
	--advicepro-text-soft: #5a5f61;
	--advicepro-focus: #d02628;
	--advicepro-error: #d02628;
	--advicepro-radius: 10px;
	font-family: "Atkinson Hyperlegible", Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: var(--advicepro-text);
	max-width: 560px;
	margin: 0 auto;
	/* Without this, native control chrome (select popups, date pickers, spin
	   buttons) follows the OS's own scheme instead of ours, which is how
	   author text ends up landing on a browser-forced-dark popup background. */
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	.advicepro-app {
		--advicepro-card: #262828;
		--advicepro-paper: #1c1d1d;
		--advicepro-border: #3d3f3f;
		--advicepro-text: #eeeeec;
		--advicepro-text-soft: #b7b9b7;
		--advicepro-focus: #ef5254;
		--advicepro-error: #ef5254;
		--advicepro-btn: #3a4ea3;
		--advicepro-btn-hover: #4e60ae;
		color-scheme: dark;
	}
}

/* Progressive enhancement: if a future site-wide dark-mode toggle sets
   data-theme on <html>, the form follows it regardless of OS preference. */
html[data-theme="dark"] .advicepro-app {
	--advicepro-card: #262828;
	--advicepro-paper: #1c1d1d;
	--advicepro-border: #3d3f3f;
	--advicepro-text: #eeeeec;
	--advicepro-text-soft: #b7b9b7;
	--advicepro-focus: #ef5254;
	--advicepro-error: #ef5254;
	--advicepro-btn: #3a4ea3;
	--advicepro-btn-hover: #4e60ae;
	color-scheme: dark;
}
html[data-theme="light"] .advicepro-app {
	--advicepro-card: #ffffff;
	--advicepro-paper: #f6f5f2;
	--advicepro-border: #dcd9d2;
	--advicepro-text: #2b2f31;
	--advicepro-text-soft: #5a5f61;
	--advicepro-focus: #d02628;
	--advicepro-error: #d02628;
	--advicepro-btn: #233588;
	--advicepro-btn-hover: #1a2766;
	color-scheme: light;
}

.advicepro-app *,
.advicepro-app *::before,
.advicepro-app *::after {
	box-sizing: border-box;
}

/*
 * The active theme's own typography rules (e.g. Astra's `h1`-`h6`/`label`
 * colours) apply directly to these elements and beat inherited `color` —
 * inheritance always loses to *any* declared value, regardless of
 * specificity. Without this, headings/labels/spans render in the theme's
 * colour instead of ours, which is invisible against a dark card. `inherit`
 * here still loses to the more specific colour rules declared below it in
 * this file (buttons, error text, review values), so those keep working.
 */
.advicepro-app h1,
.advicepro-app h2,
.advicepro-app h3,
.advicepro-app p,
.advicepro-app label,
.advicepro-app span,
.advicepro-app legend,
.advicepro-app dt,
.advicepro-app dd,
.advicepro-app li {
	color: inherit;
}

.advicepro-app .hidden-fields-container {
	border: none;
	margin: 0;
	padding: 0;
}

/* Progress indicator. */
.advicepro-progress-wrap {
	margin-bottom: 22px;
}
.advicepro-progress-label {
	display: flex;
	justify-content: space-between;
	font-size: 0.88rem;
	color: var(--advicepro-text-soft);
	margin-bottom: 8px;
	font-weight: 700;
}
.advicepro-progress-track {
	height: 8px;
	background: var(--advicepro-border);
	border-radius: 999px;
	overflow: hidden;
}
.advicepro-progress-fill {
	height: 100%;
	background: var(--advicepro-teal);
	border-radius: 999px;
	transition: width 0.25s ease;
}

/* Card. */
.advicepro-card {
	background: var(--advicepro-card);
	border: 1px solid var(--advicepro-border);
	border-radius: var(--advicepro-radius);
	padding: 26px;
}
.advicepro-card h2 {
	font-size: 1.4rem;
	margin: 0 0 6px;
}
.advicepro-step-sub {
	color: var(--advicepro-text-soft);
	margin: 0 0 20px;
	font-size: 1rem;
}

/* Fields. */
.advicepro-field {
	margin-bottom: 18px;
}
.advicepro-field:last-child {
	margin-bottom: 0;
}
.advicepro-app label {
	display: block;
	font-weight: 700;
	margin-bottom: 6px;
	font-size: 1rem;
}

.advicepro-app input[type="text"],
.advicepro-app input[type="email"],
.advicepro-app input[type="tel"],
.advicepro-app input[type="date"],
.advicepro-app input[type="number"],
.advicepro-app select,
.advicepro-app textarea {
	width: 100%;
	font: inherit;
	color: var(--advicepro-text);
	background: var(--advicepro-paper);
	border: 1px solid var(--advicepro-border);
	border-radius: 8px;
	padding: 12px 13px;
	/* Astra sets a fixed height on these elements; with box-sizing:border-box
	   that fixed height wins over our padding and squeezes/clips the text.
	   height:auto lets padding + line-height determine the box size instead,
	   the same on every field type so sizes stay visually consistent. */
	height: auto;
}
.advicepro-app textarea {
	min-height: 100px;
	resize: vertical;
}

.advicepro-app input:focus-visible,
.advicepro-app select:focus-visible,
.advicepro-app textarea:focus-visible,
.advicepro-app button:focus-visible,
.advicepro-app [tabindex]:focus-visible {
	outline: 3px solid var(--advicepro-focus);
	outline-offset: 2px;
}

/* Choice cards (radios/checkboxes presented as tappable rows). */
.advicepro-app .advicepro-choice-list {
	display: grid;
	gap: 10px;
	border: none;
	margin: 0 0 6px;
	padding: 0;
}
.advicepro-app .advicepro-choice {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--advicepro-border);
	border-radius: 8px;
	padding: 13px 14px;
	cursor: pointer;
	font-weight: 400 !important;
}
.advicepro-app .advicepro-choice:has(input:checked) {
	border-color: var(--advicepro-teal);
	background: color-mix(
		in srgb,
		var(--advicepro-teal) 8%,
		var(--advicepro-card)
	);
}
.advicepro-app .advicepro-choice input {
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	vertical-align: middle !important;
	flex: none;
	align-self: center;
}
.advicepro-app .advicepro-choice span {
	font-size: 1rem;
	font-weight: 600;
}
.advicepro-app .advicepro-choice-consent span {
	font-weight: 400;
}

/* "Organisation name" search-as-you-type combobox (templates/referral-form.php's
   'agency_organisation_name' field, driven by form-wizard.js's
   initReferringAgencyCombobox()). */
.advicepro-app .advicepro-combobox {
	position: relative;
}
.advicepro-app .advicepro-combobox-list {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 4px 0;
	max-height: 260px;
	overflow-y: auto;
	list-style: none;
	background: var(--advicepro-card);
	border: 1px solid var(--advicepro-border);
	border-radius: 8px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}
.advicepro-app .advicepro-combobox-list li[role="option"] {
	padding: 10px 14px;
	cursor: pointer;
	font-size: 1rem;
}
.advicepro-app .advicepro-combobox-list li[role="option"].is-active,
.advicepro-app .advicepro-combobox-list li[role="option"]:hover {
	background: color-mix(in srgb, var(--advicepro-teal) 10%, var(--advicepro-card));
}
.advicepro-app .advicepro-combobox-list .advicepro-combobox-more {
	padding: 8px 14px;
	font-size: 0.85rem;
	font-style: italic;
	color: var(--advicepro-text-soft);
}

/* Errors: GOV.UK-style summary box plus per-field inline error text. */
.advicepro-error-summary {
	border: 2px solid var(--advicepro-error);
	border-radius: 8px;
	padding: 16px 20px;
	margin-bottom: 20px;
	background: color-mix(
		in srgb,
		var(--advicepro-error) 8%,
		var(--advicepro-card)
	);
}
.advicepro-error-summary h2 {
	color: var(--advicepro-error);
	font-size: 1.1rem;
	margin: 0 0 8px;
}
.advicepro-error-summary ul {
	margin: 0;
	padding-left: 20px;
}
.advicepro-error-link {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: var(--advicepro-error);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
	text-align: left;
}

.advicepro-error-text {
	color: var(--advicepro-error);
	font-size: 0.85rem;
	margin: 6px 0 0;
}
.advicepro-field.is-invalid input,
.advicepro-field.is-invalid select {
	border-color: var(--advicepro-error);
}
.advicepro-app .advicepro-choice-list.is-invalid {
	outline: 2px solid var(--advicepro-error);
	outline-offset: 4px;
	border-radius: 8px;
}

/* Navigation. */
.advicepro-step-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 26px;
}
.advicepro-app button {
	font: inherit;
	cursor: pointer;
	border-radius: 8px;
	padding: 13px 22px;
	font-weight: 700;
	border: none;
}
.advicepro-btn-next,
.advicepro-btn-submit {
	background: var(--advicepro-btn);
	color: #fff;
	margin-left: auto;
}
.advicepro-btn-next:hover,
.advicepro-btn-submit:hover {
	background: var(--advicepro-btn-hover);
}
.advicepro-btn-prev {
	background: transparent !important;
	color: var(--advicepro-text) !important;
	border: 1px solid var(--advicepro-border) !important;
}
.advicepro-btn-prev:hover {
	background: var(--advicepro-paper) !important;
}

/* Review summary. */
.advicepro-review-summary {
	margin: 0;
}
.advicepro-review-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid var(--advicepro-border);
	padding-bottom: 8px;
	margin-bottom: 10px;
}
.advicepro-review-row dt {
	color: var(--advicepro-text-soft);
	margin: 0;
}
.advicepro-review-row dd {
	font-weight: 700;
	text-align: right;
	margin: 0;
}

/* Wizard steps: only the active step is shown; JS toggles .is-active.
   Active steps lay out their direct children (headings, fields, fieldsets)
   as a wrapping flex row so any field can opt into half-width via
   .advicepro-field--half (see referral-form.php's advicepro_render_wizard_field()). */
.advicepro-step {
	display: none;
}
.advicepro-step.is-active {
	display: flex;
	flex-wrap: wrap;
	column-gap: 14px;
}
.advicepro-step.is-active > * {
	flex: 1 1 100%;
	min-width: 0;
}
.advicepro-step.is-active > .advicepro-field--half {
	flex: 1 1 calc(50% - 7px);
	min-width: 220px;
}

/* Honeypot: hidden from sighted users, still reachable by simple bots. */
.advicepro-honeypot {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	height: 0;
	width: 0;
	overflow: hidden;
}

/* Fallback in case the theme doesn't already define this WP-standard utility class. */
.advicepro-app .screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

/* Confirmation / error states share the same card language. */
.advicepro-referral-confirmation,
.advicepro-referral-error {
	font-family: "Atkinson Hyperlegible", Arial, Helvetica, sans-serif;
	max-width: 560px;
	margin: 0 auto;
	background: var(--advicepro-card, #fff);
	border: 1px solid var(--advicepro-border, #dcd9d2);
	border-radius: 10px;
	padding: 26px;
}
.advicepro-referral-confirmation {
	border-color: #00a32a;
}
.advicepro-referral-error {
	border-color: #d63638;
}