/*
 * ISO Kickoff — public questionnaire styles.
 *
 * No framework, no build step, no web fonts: the form inherits the host theme's
 * typography and only imposes structure, colour and state.
 *
 * TWO RULES, both learned the hard way on a live site.
 *
 * 1. The questionnaire brings its own background. It used to inherit the page's
 *    and only darken itself when the VISITOR'S OPERATING SYSTEM asked for dark
 *    mode — so the same page was legible for one client and not for the next,
 *    depending on a setting neither they nor we control. It is now one
 *    deliberate dark panel for everybody, sitting on whatever the host section
 *    happens to be. Use .isok-wrap--light for a host that needs the reverse.
 *
 * 2. Every text colour is stated on the element, never inherited. A host theme
 *    that colours its content sections wins over an inherited value: the
 *    3|Strategy theme sets `.s3-legal p { color:#4f4f4f }` and
 *    `.s3-legal h2 { color:#141414 }`, and against this panel those measured
 *    2.11:1 and 1.06:1 — dark grey text on near-black, which is what a client
 *    reported as "I cannot read the questions". The selectors under
 *    "Host-theme defence" are two classes deep on purpose so that a
 *    one-class-plus-element rule cannot outrank them whatever order the
 *    stylesheets happen to load in.
 *
 * The palette is the 3|Strategy palette, token for token, so the questionnaire
 * reads as part of the site rather than as a plugin bolted onto it. Every
 * pairing below was measured against its own background; the lowest is 8.9:1,
 * against a WCAG AA requirement of 4.5:1 for body text.
 */

.isok-wrap {
	/* Brand greens. --isok-ink is what a client READS as the question; it is the
	   main brand green, #7DEEB2, at 12.2:1 on the panel. --isok-body is what
	   they TYPE, kept near-white on purpose: a long answer typed in green is
	   harder to proof-read than one typed in white, and the questions stay the
	   green thing on the screen. */
	--isok-ink: #7deeb2;
	--isok-body: #e9efec;
	--isok-muted: #a8c4b6;

	--isok-line: rgba(255, 255, 255, 0.10);
	--isok-line-strong: rgba(255, 255, 255, 0.22);

	--isok-canvas: #0b0b0b;
	--isok-surface: #101410;
	--isok-surface-alt: #161616;

	--isok-accent: #0ad173;
	--isok-accent-ink: #04180d;
	--isok-accent-soft: rgba(10, 209, 115, 0.16);

	--isok-danger: #ff9b9b;
	--isok-danger-bg: rgba(255, 107, 107, 0.10);
	--isok-success: #7deeb2;
	--isok-success-bg: rgba(10, 209, 115, 0.12);
	--isok-warning: #e8c168;
	--isok-warning-bg: rgba(232, 193, 104, 0.10);

	--isok-radius: 3px;

	max-width: 46rem;
	margin: 0 auto;
	padding: 2rem clamp(1rem, 4vw, 2.25rem);
	border: 1px solid var(--isok-line);
	border-radius: var(--isok-radius);
	background: var(--isok-canvas);
	color: var(--isok-body);
	line-height: 1.55;
}

/*
 * The light variant, for a host whose page is light and wants the questionnaire
 * to match. Selected with [isokickoff_form theme="light"]. Same tokens, same
 * rules; only the values move.
 */
.isok-wrap--light {
	--isok-ink: #14301f;
	--isok-body: #1c2530;
	--isok-muted: #4a5c52;

	--isok-line: #d7dde4;
	--isok-line-strong: #b6c0cb;

	--isok-canvas: #ffffff;
	--isok-surface: #ffffff;
	--isok-surface-alt: #f4f8f5;

	--isok-accent: #067f45;
	--isok-accent-ink: #ffffff;
	--isok-accent-soft: rgba(6, 127, 69, 0.12);

	--isok-danger: #9b2226;
	--isok-danger-bg: #fdf2f2;
	--isok-success: #1d6b45;
	--isok-success-bg: #f0f8f4;
	--isok-warning: #8a5a00;
	--isok-warning-bg: #fdf6e8;
}

/* --- Notices ---------------------------------------------------------- */

.isok-notice {
	margin: 0 0 1.5rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--isok-line);
	border-left-width: 4px;
	border-radius: var(--isok-radius);
	background: var(--isok-surface-alt);
	font-size: 0.95rem;
}

.isok-notice--success {
	border-left-color: var(--isok-success);
	background: var(--isok-success-bg);
}

.isok-notice--error {
	border-left-color: var(--isok-danger);
	background: var(--isok-danger-bg);
}

.isok-notice--warning {
	border-left-color: var(--isok-warning);
	background: var(--isok-warning-bg);
}

.isok-notice--info {
	border-left-color: var(--isok-accent);
}

/* --- Header ----------------------------------------------------------- */

.isok-head {
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 2px solid var(--isok-line);
}

.isok-head__title {
	margin: 0 0 0.5rem;
	line-height: 1.25;
}

.isok-head__intro p:last-child {
	margin-bottom: 0;
}

.isok-muted {
	color: var(--isok-muted);
	font-size: 0.9rem;
}

/* --- Sections --------------------------------------------------------- */

.isok-section {
	margin: 0 0 2.25rem;
	padding: 1.25rem 1.25rem 0.5rem;
	border: 1px solid var(--isok-line);
	border-radius: var(--isok-radius);
	background: var(--isok-surface);
}

.isok-section__title {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	line-height: 1.3;
}

.isok-section__intro {
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px dashed var(--isok-line);
	color: var(--isok-muted);
	font-size: 0.93rem;
}

.isok-section__intro p:last-child {
	margin-bottom: 0;
}

/* --- Questions -------------------------------------------------------- */

.isok-q {
	margin: 0 0 1.6rem;
}

.isok-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.isok-label {
	display: block;
	margin-bottom: 0.3rem;
	padding: 0;
	font-weight: 600;
}

.isok-req {
	color: var(--isok-danger);
	font-weight: 700;
}

.isok-clause {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.1rem 0.45rem;
	border: 1px solid var(--isok-line-strong);
	border-radius: 999px;
	color: var(--isok-muted);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	vertical-align: middle;
	white-space: nowrap;
}

.isok-help {
	margin: 0 0 0.5rem;
	color: var(--isok-muted);
	font-size: 0.88rem;
}

.isok-fieldnote {
	margin: 0.35rem 0 0;
	color: var(--isok-danger);
	font-size: 0.85rem;
	font-weight: 600;
}

/* --- Controls --------------------------------------------------------- */

.isok-input {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--isok-line-strong);
	border-radius: var(--isok-radius);
	background: var(--isok-surface);
	color: inherit;
	font: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.isok-textarea {
	min-height: 6.5rem;
	resize: vertical;
}

.isok-input--number,
.isok-input--date {
	max-width: 16rem;
}

.isok-input:focus,
.isok-radio:focus,
.isok-checkbox:focus,
.isok-btn:focus {
	outline: 2px solid var(--isok-accent);
	outline-offset: 2px;
}

.isok-input:focus {
	border-color: var(--isok-accent);
	box-shadow: 0 0 0 3px var(--isok-accent-soft);
}

.isok-choices {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-top: 0.35rem;
}

.isok-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.isok-choice label {
	font-weight: 400;
	cursor: pointer;
}

.isok-choice input {
	margin-top: 0.28rem;
	flex: 0 0 auto;
}

.isok-choices--scale {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.1rem;
}

.isok-q--error .isok-input {
	border-color: var(--isok-danger);
	background: var(--isok-danger-bg);
}

.isok-q--error .isok-label {
	color: var(--isok-danger);
}

/* --- Actions ---------------------------------------------------------- */

.isok-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 2px solid var(--isok-line);
}

.isok-btn {
	padding: 0.65rem 1.25rem;
	border: 1px solid var(--isok-accent);
	border-radius: var(--isok-radius);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.isok-btn--primary {
	background: var(--isok-accent);
	color: var(--isok-accent-ink);
}

.isok-btn--primary:hover {
	/* The theme's own button lightens g2 -> g1 on hover; matching it keeps the
	   questionnaire's submit button feeling like every other button on the site. */
	background: var(--isok-ink);
	color: var(--isok-accent-ink);
}

.isok-btn--ghost {
	background: transparent;
	color: var(--isok-accent);
}

.isok-btn--ghost:hover {
	background: var(--isok-surface-alt);
}

.isok-btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* --- Confirmation ----------------------------------------------------- */

.isok-done {
	padding: 2rem 1.5rem;
	border: 1px solid var(--isok-line);
	border-radius: var(--isok-radius);
	background: var(--isok-surface-alt);
	text-align: center;
}

.isok-done__title {
	margin: 0 0 0.5rem;
}

.isok-done__survey {
	margin: 0 0 1rem;
	font-weight: 600;
}

/* --- Full-bleed band ---------------------------------------------------- */

/*
 * On its own page the questionnaire spans the window, instead of being a dark
 * card with the host section showing down both sides.
 *
 * The reason is measured, not decorative: the host section here is white, and a
 * white gutter against this panel is a 19.7:1 luminance step running the whole
 * height of the reading area. The eye adapts to the brighter surround, so the
 * panel reads dimmer than it is and the green text loses apparent contrast —
 * worst on exactly the kind of document this is, ninety-odd questions somebody
 * sits with for twenty minutes. Carrying the dark across the full width removes
 * the step entirely.
 *
 * The BACKGROUND goes full width; the TEXT COLUMN does not. Left to fill a wide
 * screen the lines would run to 175-240 characters, well past the 45-75 that
 * people read without losing their place between one line and the next. So the
 * band stretches and the column inside it stays put, centred, with the side
 * padding absorbing whatever is left over.
 *
 * `overflow-x: clip` on the body is not optional: 50vw counts the vertical
 * scrollbar, so without it the negative margins overhang by the scrollbar's
 * width and the page scrolls sideways by ~15px. `clip` rather than `hidden`
 * because `hidden` would turn the body into a scroll container and break
 * position: sticky anywhere else on the page. Both are scoped to the body class
 * so nothing outside the questionnaire page is touched.
 */

body.isok-has-form {
	overflow-x: clip;
}

body.isok-has-form .isok-wrap {
	max-width: none;
	margin-inline: calc(50% - 50vw);
	padding-block: clamp(2rem, 5vw, 3.5rem);
	padding-inline: max(1.25rem, calc(50vw - 24rem));
	border-inline: 0;
	border-radius: 0;
}

/*
 * Without the body class — the shortcode embedded in some other layout — the
 * questionnaire stays the self-contained card defined at the top of this file.
 */

/* --- Host-theme defence ------------------------------------------------ */

/*
 * See rule 2 in the file header. Every selector here is two classes deep so
 * that a host rule of the shape `.some-section p` (specificity 0,1,1) cannot
 * outrank it (0,2,x) whatever order the stylesheets load in. Nothing below is
 * decoration: each line replaces a colour a host theme was observed to impose
 * on the questionnaire from the outside.
 */

.isok-wrap .isok-head__title,
.isok-wrap .isok-section__title,
.isok-wrap .isok-done__title,
.isok-wrap .isok-label {
	color: var(--isok-ink);
}

.isok-wrap .isok-help,
.isok-wrap .isok-muted,
.isok-wrap .isok-clause,
.isok-wrap .isok-section__intro,
.isok-wrap .isok-section__intro p,
.isok-wrap .isok-head__intro,
.isok-wrap .isok-head__intro p,
.isok-wrap .isok-done p {
	color: var(--isok-muted);
}

.isok-wrap .isok-choice,
.isok-wrap .isok-input,
.isok-wrap .isok-done__survey,
.isok-wrap .isok-notice {
	color: var(--isok-body);
}

.isok-wrap .isok-req,
.isok-wrap .isok-fieldnote,
.isok-wrap .isok-q--error .isok-label {
	color: var(--isok-danger);
}

/*
 * A host section may impose LAYOUT on a heading as well as colour: the
 * 3|Strategy theme turns `.s3-legal h2` into a flexbox and hangs a green bar
 * off its ::before. That bar belongs to the theme's own headings, not to a
 * questionnaire nested inside one, so it is cancelled here — and then applied
 * deliberately, one rule down, where it carries meaning.
 */
.isok-wrap .isok-head__title,
.isok-wrap .isok-section__title {
	display: block;
}

.isok-wrap .isok-head__title::before {
	content: none;
}

/*
 * The pipe: the site's signature mark, the "|" of 3|Strategy, repeated as a bar
 * before every kicker and heading. Each questionnaire section carries one, so a
 * client sees the same mark structuring the questionnaire that structures the
 * rest of the site. Drawn rather than typed, so it aligns to the cap height
 * whatever font the host theme lends us.
 */
.isok-wrap .isok-section__title {
	position: relative;
	padding-left: 0.85rem;
}

.isok-wrap .isok-section__title::before {
	content: '';
	position: absolute;
	top: 0.18em;
	left: 0;
	width: 3px;
	height: 1em;
	background: var(--isok-accent);
}

/*
 * Placeholders and the browser's own autofill. Chrome paints an autofilled
 * field with its own near-white background and near-black text, which on a dark
 * panel is the same unreadable pairing this file exists to prevent — so the
 * inset shadow repaints the field and -webkit-text-fill-color repaints the text.
 */
.isok-wrap .isok-input::placeholder {
	color: var(--isok-muted);
	opacity: 0.75;
}

.isok-wrap .isok-input:-webkit-autofill,
.isok-wrap .isok-input:-webkit-autofill:hover,
.isok-wrap .isok-input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--isok-body);
	box-shadow: 0 0 0 100px var(--isok-surface) inset;
}

/*
 * Radios and checkboxes. Left to itself a browser draws these in its own
 * light-mode blue on a white square; color-scheme tells it the panel is dark so
 * it draws its native dark-mode control instead, and accent-color makes the
 * checked state the brand green rather than the browser's blue.
 */
.isok-wrap {
	color-scheme: dark;
	accent-color: var(--isok-accent);
}

.isok-wrap--light {
	color-scheme: light;
}

/*
 * Honeypot.
 *
 * Moved off-canvas on the WRAPPER rather than hidden with display:none on the
 * input itself: display:none is the pattern automated form fillers learned to
 * skip, while an off-screen but rendered field still gets filled. Real users
 * never reach it — it is aria-hidden and tabindex="-1" in the markup.
 */
.isok-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Motion, contrast, print ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.isok-wrap *,
	.isok-wrap *::before,
	.isok-wrap *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

@media (prefers-contrast: more) {

	.isok-wrap {
		--isok-line: rgba(255, 255, 255, 0.28);
		--isok-line-strong: rgba(255, 255, 255, 0.55);
		--isok-muted: #cfe3d8;
		--isok-body: #ffffff;
	}

	.isok-wrap--light {
		--isok-line: #6b7480;
		--isok-line-strong: #3c454f;
		--isok-muted: #26332c;
		--isok-body: #000000;
	}
}

@media (max-width: 600px) {

	.isok-section {
		padding: 1rem 0.9rem 0.4rem;
	}

	.isok-actions .isok-btn {
		flex: 1 1 100%;
	}
}

@media print {

	.isok-actions,
	.isok-notice {
		display: none;
	}

	.isok-section {
		break-inside: avoid;
	}
}