/**
 * CJR Site Scanner: free site check.
 *
 * Everything is scoped under .cjr-fc so the host theme is not touched and
 * touches this as little as possible. Brand colours arrive as custom
 * properties on the wrapper (set inline by templates/free-check.php):
 * --cjr-fc-primary, --cjr-fc-accent, --cjr-fc-on-accent, --cjr-fc-ink and
 * --cjr-fc-fallback (the brand profile's font stack).
 *
 * Light surfaces only. The accent is used for things you press and for the
 * progress bar, nowhere else. One band (the report request) and no boxes:
 * sections are separated by space and type size.
 */

.cjr-fc {
	--cjr-fc-band: #eef1f5;
	--cjr-fc-field: #5b6472;
	--cjr-fc-quiet: #4a5160;

	box-sizing: border-box;
	max-width: 720px;
	margin: 0;
	padding: 0;
	background: #ffffff;
	color: var(--cjr-fc-ink, #1f2430);
	font-family: "Source Sans 3", var(--cjr-fc-fallback, Helvetica, Arial, sans-serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
}

.cjr-fc *,
.cjr-fc *::before,
.cjr-fc *::after {
	box-sizing: border-box;
}

.cjr-fc [hidden] {
	display: none !important;
}

.cjr-fc p {
	margin: 0 0 16px;
	font-size: 18px;
	line-height: 1.55;
}

.cjr-fc a {
	color: var(--cjr-fc-primary, #1a1a2e);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cjr-fc a:focus-visible,
.cjr-fc .cjr-fc-input:focus-visible,
.cjr-fc .cjr-fc-button:focus-visible {
	outline: 3px solid var(--cjr-fc-primary, #1a1a2e);
	outline-offset: 3px;
}

/* -- Type ----------------------------------------------------------------- */

.cjr-fc .cjr-fc-title,
.cjr-fc .cjr-fc-subtitle {
	margin: 0;
	padding: 0;
	color: var(--cjr-fc-primary, #1a1a2e);
	font-family: Poppins, var(--cjr-fc-fallback, Helvetica, Arial, sans-serif);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

.cjr-fc .cjr-fc-title {
	margin-bottom: 12px;
	font-size: 32px;
	line-height: 1.2;
}

.cjr-fc .cjr-fc-subtitle {
	margin: 48px 0 20px;
	font-size: 23px;
	line-height: 1.3;
}

.cjr-fc .cjr-fc-domain {
	overflow-wrap: anywhere;
}

.cjr-fc .cjr-fc-lede {
	max-width: 62ch;
}

.cjr-fc .cjr-fc-note {
	max-width: 62ch;
	color: var(--cjr-fc-quiet);
}

/* -- Score ---------------------------------------------------------------- */

.cjr-fc .cjr-fc-score {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 12px;
	margin: 0 0 8px;
}

.cjr-fc .cjr-fc-score-number {
	color: var(--cjr-fc-primary, #1a1a2e);
	font-family: Poppins, var(--cjr-fc-fallback, Helvetica, Arial, sans-serif);
	font-size: 84px;
	font-weight: 700;
	line-height: 1;
}

.cjr-fc .cjr-fc-score-of {
	font-size: 22px;
	font-weight: 600;
}

/* -- Top findings ---------------------------------------------------------- */

.cjr-fc .cjr-fc-top {
	margin: 0;
	padding: 0 !important; /* Themes (Divi) pad and number lists with ID-level selectors. */
	list-style: none !important;
	counter-reset: cjr-fc-top;
}

.cjr-fc .cjr-fc-item {
	position: relative;
	margin: 0 0 28px;
	padding: 0 0 0 56px !important;
	list-style: none !important;
	counter-increment: cjr-fc-top;
}

.cjr-fc .cjr-fc-item::before {
	content: counter( cjr-fc-top );
	position: absolute;
	top: -4px;
	left: 0;
	color: var(--cjr-fc-primary, #1a1a2e);
	font-family: Poppins, var(--cjr-fc-fallback, Helvetica, Arial, sans-serif);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.1;
}

.cjr-fc .cjr-fc-item-label {
	margin-bottom: 4px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
}

.cjr-fc .cjr-fc-item-action {
	max-width: 60ch;
	margin-bottom: 6px;
}

.cjr-fc .cjr-fc-item-priority {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

/* A square that fills with urgency: full, half, outline. No colour coding. */
.cjr-fc .cjr-fc-item-priority::before {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border: 2px solid var(--cjr-fc-ink, #1f2430);
	border-radius: 2px;
}

.cjr-fc .cjr-fc-priority-high::before {
	background: var(--cjr-fc-ink, #1f2430);
}

.cjr-fc .cjr-fc-priority-medium::before {
	background: linear-gradient( to right, var(--cjr-fc-ink, #1f2430) 50%, transparent 50% );
}

.cjr-fc .cjr-fc-clear {
	margin-top: 24px;
	font-size: 20px;
	font-weight: 600;
}

/* -- Withheld findings ----------------------------------------------------- */

.cjr-fc .cjr-fc-blur,
.cjr-fc .cjr-fc-blur li {
	list-style: none !important;
}

.cjr-fc .cjr-fc-blur {
	margin: 0;
	padding: 0 !important;
	filter: blur( 6px );
	user-select: none;
	pointer-events: none;
}

.cjr-fc .cjr-fc-blur li {
	margin: 0 0 14px;
	padding: 0 0 0 56px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
}

/* -- Forms ----------------------------------------------------------------- */

.cjr-fc .cjr-fc-form {
	margin: 0;
	padding: 0;
}

.cjr-fc .cjr-fc-label {
	display: block;
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
}

.cjr-fc .cjr-fc-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 14px;
}

.cjr-fc .cjr-fc-input {
	flex: 1 1 260px;
	min-width: 0;
	width: auto;
	height: auto; /* A theme (Avada) may give every text field a fixed height. */
	min-height: 52px;
	margin: 0;
	padding: 10px 14px;
	border: 2px solid var(--cjr-fc-field);
	border-radius: 6px;
	background: #ffffff;
	color: var(--cjr-fc-ink, #1f2430);
	font-family: inherit;
	font-size: 18px;
	line-height: 1.4;
	box-shadow: none;
}

/* A host theme may colour placeholders like typed text. Keep them clearly lighter. */
.cjr-fc .cjr-fc-input::placeholder {
	color: #6b7280;
	opacity: 1;
}

.cjr-fc .cjr-fc-button {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin: 0;
	padding: 10px 26px;
	border: 0;
	border-radius: 6px;
	background: var(--cjr-fc-accent, #e94560);
	color: var(--cjr-fc-on-accent, #ffffff);
	font-family: Poppins, var(--cjr-fc-fallback, Helvetica, Arial, sans-serif);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: filter 120ms ease-out;
}

.cjr-fc .cjr-fc-button:hover {
	filter: brightness( 0.9 );
}

.cjr-fc .cjr-fc-button[disabled] {
	cursor: default;
	filter: grayscale( 0.4 ) brightness( 0.95 );
}

/*
 * The link that is styled as a button keeps its own text colour inside a page
 * builder module that sets a link colour. On the live Divi page the module
 * printed ".et_pb_text_1 .et_pb_text_inner a { color: ... }" after this file,
 * with the same weight as the old selector here, so the button read blue on
 * blue. Only this one link is named: every other link is left alone.
 */
.cjr-fc a.cjr-fc-button-link,
.cjr-fc a.cjr-fc-button.cjr-fc-button-link,
.cjr-fc a.cjr-fc-button.cjr-fc-button-link:visited,
.cjr-fc a.cjr-fc-button.cjr-fc-button-link:hover,
.cjr-fc a.cjr-fc-button.cjr-fc-button-link:focus,
.cjr-fc a.cjr-fc-button.cjr-fc-button-link:active {
	color: var(--cjr-fc-on-accent, #ffffff) !important;
	text-decoration: none !important;
}

/* Honeypot: off screen for people, still in the markup for bots. */
.cjr-fc .cjr-fc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cjr-fc .cf-turnstile {
	margin: 0 0 14px;
}

/* The one band on the page: the report request. */
.cjr-fc .cjr-fc-lead {
	margin: 48px 0 0;
	padding: 28px;
	border-radius: 6px;
	background: var(--cjr-fc-band);
}

.cjr-fc .cjr-fc-lead .cjr-fc-subtitle {
	margin-top: 0;
}

.cjr-fc .cjr-fc-lead .cjr-fc-note {
	margin-bottom: 0;
}

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

.cjr-fc .cjr-fc-notice {
	margin: 0 0 24px;
	padding: 14px 18px;
	border-radius: 6px;
	background: var(--cjr-fc-band);
	font-weight: 600;
}

.cjr-fc .cjr-fc-notice-problem {
	background: #fbe9e9;
	color: #7a1216;
}

/* -- Progress -------------------------------------------------------------- */

.cjr-fc .cjr-fc-bar {
	height: 16px;
	margin: 20px 0 16px;
	border-radius: 6px;
	background: #dfe3e9;
	overflow: hidden;
}

.cjr-fc .cjr-fc-bar-fill {
	display: block;
	height: 100%;
	min-width: 16px;
	border-radius: 6px;
	background: var(--cjr-fc-accent, #e94560);
	transition: width 400ms ease-out;
}

.cjr-fc .cjr-fc-step {
	font-size: 20px;
	font-weight: 600;
}

/* -- Contact --------------------------------------------------------------- */

.cjr-fc .cjr-fc-contact {
	max-width: 62ch;
	margin: 40px 0 0;
}

/* -- Narrow screens (works from 360px) -------------------------------------- */

@media ( max-width: 520px ) {
	.cjr-fc .cjr-fc-title {
		font-size: 26px;
	}

	.cjr-fc .cjr-fc-subtitle {
		margin-top: 40px;
		font-size: 21px;
	}

	.cjr-fc .cjr-fc-score-number {
		font-size: 64px;
	}

	.cjr-fc .cjr-fc-item,
	.cjr-fc .cjr-fc-blur li {
		padding-left: 44px;
	}

	.cjr-fc .cjr-fc-item::before {
		font-size: 30px;
	}

	.cjr-fc .cjr-fc-input,
	.cjr-fc .cjr-fc-button {
		flex: 1 1 100%;
		width: 100%;
	}

	.cjr-fc .cjr-fc-lead {
		padding: 20px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cjr-fc .cjr-fc-button,
	.cjr-fc .cjr-fc-bar-fill {
		transition: none;
	}
}

/* -- Embedded on another site (public/js/embed.js) --------------------------
 *
 * The embed script draws the check inside <div data-cjr-embed="check"> on a
 * page of another site. Nothing in this section changes the shortcode page:
 * every rule either starts at [data-cjr-embed] or uses a class that only the
 * script adds (cjr-fc-bar-wait, cjr-fc-reserve, cjr-fc-busy).
 *
 * The script also carries a copy of the rules it needs for its first frame,
 * before this file has arrived (CRITICAL_CSS in embed.js). That copy must say
 * the same thing as this file, or the box moves when the file lands.
 * e2e/check-static.js fails when the two disagree.
 */

/* The check sits on the host page's own (light) surface. Its last
   paragraph's margin stays inside the box (flow-root), so the box's height is
   the whole of the room it takes: the script holds that height when a
   shorter answer replaces the first frame, and nothing below moves. */
[data-cjr-embed] .cjr-fc {
	display: flow-root;
	background: transparent;
}

/* Headings and notices the script moves focus to are not controls. */
[data-cjr-embed] .cjr-fc[tabindex="-1"]:focus,
[data-cjr-embed] .cjr-fc [tabindex="-1"]:focus {
	outline: none;
}

/* Room for a sticky header when the script scrolls a result into view. A
   host page can set --cjr-embed-offset on the container to match its own. */
[data-cjr-embed] .cjr-fc,
[data-cjr-embed] .cjr-fc .cjr-fc-title,
[data-cjr-embed] .cjr-fc .cjr-fc-notice {
	scroll-margin-top: var(--cjr-embed-offset, 96px);
}

/* Waiting: nothing to measure yet, so a segment travels along the bar. */
.cjr-fc .cjr-fc-bar-wait .cjr-fc-bar-fill {
	width: 30% !important; /* Beats the inline width a fragment carries. */
	min-width: 0;
	animation: cjr-fc-wait 1400ms ease-in-out infinite;
}

@keyframes cjr-fc-wait {
	from {
		transform: translateX( -100% );
	}

	to {
		transform: translateX( 334% );
	}
}

@keyframes cjr-fc-pulse {
	from {
		opacity: 0.25;
	}

	to {
		opacity: 0.6;
	}
}

/* Holds the height of text that has not arrived yet. */
.cjr-fc .cjr-fc-reserve {
	visibility: hidden;
}

/* A request is in flight: the spinner sits in the button's own padding, so
   the button does not change size. */
.cjr-fc .cjr-fc-button.cjr-fc-busy {
	position: relative;
}

.cjr-fc .cjr-fc-button.cjr-fc-busy::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 7px;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: cjr-fc-spin 700ms linear infinite;
}

@keyframes cjr-fc-spin {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	/* No travel: the whole bar fades in and out slowly instead. */
	.cjr-fc .cjr-fc-bar-wait .cjr-fc-bar-fill {
		width: 100% !important;
		animation: cjr-fc-pulse 1600ms ease-in-out infinite alternate;
	}

	.cjr-fc .cjr-fc-button.cjr-fc-busy::after {
		animation: none;
	}
}