/* Yorkshire Techy Quick SEO Check */
.yt-qsc {
	--yt-forest: #1F4A2C;
	--yt-lime: #8DC63F;
	--yt-ink: #1d2420;
	--yt-muted: #5c665f;
	--yt-line: #e2e8e3;
	--yt-soft: #f4f8f1;
	--yt-good: #5f9e2a;
	--yt-ok: #d9922b;
	--yt-poor: #c8412f;
	max-width: 820px;
	margin: 0 auto;
	color: var(--yt-ink);
	font-family: inherit;
	line-height: 1.5;
	box-sizing: border-box;
}
.yt-qsc *, .yt-qsc *::before, .yt-qsc *::after { box-sizing: inherit; }

.yt-qsc__eyebrow {
	display: inline-block;
	background: var(--yt-forest);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.35em 0.8em;
	border-radius: 3px;
}
.yt-qsc__heading {
	color: var(--yt-forest);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1.15;
	margin: 0.5em 0 0.4em;
}
.yt-qsc__lead { font-size: 1.1rem; color: var(--yt-muted); margin: 0 0 1.4em; max-width: 640px; }

.yt-qsc__form { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.yt-qsc__input {
	flex: 1 1 320px;
	min-height: 56px;
	padding: 0 1rem;
	font-size: 1.05rem;
	border: 2px solid var(--yt-line);
	border-radius: 6px;
	background: #fff;
	color: var(--yt-ink);
}
.yt-qsc__input:focus { outline: none; border-color: var(--yt-lime); box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.25); }
.yt-qsc__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-height: 56px;
	padding: 0 1.6rem;
	background: var(--yt-lime);
	color: var(--yt-forest);
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.yt-qsc__button:hover, .yt-qsc__button:focus-visible { background: #7db532; color: var(--yt-forest); transform: translateY(-1px); }
.yt-qsc__button:disabled { opacity: 0.6; cursor: wait; transform: none; }

.yt-qsc__sr, .yt-qsc__hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.yt-qsc__hp { left: -9999px; }

.yt-qsc__error { margin: 0.8em 0 0; color: var(--yt-poor); font-weight: 600; }
.yt-qsc__error[hidden], .yt-qsc__loading[hidden], .yt-qsc__result[hidden] { display: none; }

.yt-qsc__loading { margin-top: 2rem; padding: 2rem; text-align: center; background: var(--yt-soft); border-radius: 10px; }
.yt-qsc__spinner {
	width: 44px; height: 44px; margin: 0 auto 1rem;
	border: 4px solid rgba(31, 74, 44, 0.15);
	border-top-color: var(--yt-lime);
	border-radius: 50%;
	animation: yt-qsc-spin 0.9s linear infinite;
}
@keyframes yt-qsc-spin { to { transform: rotate(360deg); } }
.yt-qsc__loading-text { font-weight: 700; color: var(--yt-forest); margin: 0; }
.yt-qsc__loading-note { color: var(--yt-muted); font-size: 0.9rem; margin: 0.3em 0 0; }

.yt-qsc__result {
	margin-top: 2rem;
	padding: clamp(1.25rem, 4vw, 2.25rem);
	background: #fff;
	border: 1px solid var(--yt-line);
	border-top: 6px solid var(--yt-forest);
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(31, 74, 44, 0.08);
}
.yt-qsc__label { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yt-muted); }
.yt-qsc__site { display: block; word-break: break-all; margin-bottom: 1.5rem; }

.yt-qsc__score-row { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.yt-qsc__ring { position: relative; width: 150px; height: 150px; flex: 0 0 150px; }
.yt-qsc__ring-svg { width: 100%; height: 100%; }
.yt-qsc__ring-bg { fill: none; stroke: var(--yt-line); stroke-width: 10; }
.yt-qsc__ring-fg { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.2s ease; }
.yt-qsc__ring-fg.yt-qsc--good { stroke: var(--yt-lime); }
.yt-qsc__ring-fg.yt-qsc--ok { stroke: var(--yt-ok); }
.yt-qsc__ring-fg.yt-qsc--poor { stroke: var(--yt-poor); }
.yt-qsc__ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.yt-qsc__ring-score { font-size: 2.8rem; font-weight: 800; color: var(--yt-forest); line-height: 1; }
.yt-qsc__ring-of { font-size: 0.8rem; color: var(--yt-muted); }

.yt-qsc__summary { flex: 1 1 320px; }
.yt-qsc__badge { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3em 0.7em; border-radius: 3px; }
.yt-qsc__badge.yt-qsc--good { background: #e8f4d9; color: #3d6b16; }
.yt-qsc__badge.yt-qsc--ok { background: #fbefdc; color: #8a5510; }
.yt-qsc__badge.yt-qsc--poor, .yt-qsc__badge.yt-qsc--none { background: #f9e1dd; color: #8f2a1d; }
.yt-qsc__verdict { font-size: 1.1rem; margin: 0.5em 0 1em; }

.yt-qsc__bars { display: grid; gap: 0.9rem; }
.yt-qsc__bar-top { display: flex; justify-content: space-between; font-weight: 700; }
.yt-qsc__bar-name { color: var(--yt-forest); }
.yt-qsc__track { height: 8px; background: var(--yt-line); border-radius: 4px; overflow: hidden; margin: 0.3em 0 0.2em; }
.yt-qsc__fill { height: 100%; width: 0; border-radius: 4px; transition: width 1.2s ease; }
.yt-qsc__fill.yt-qsc--good { background: var(--yt-lime); }
.yt-qsc__fill.yt-qsc--ok { background: var(--yt-ok); }
.yt-qsc__fill.yt-qsc--poor { background: var(--yt-poor); }
.yt-qsc__bar-blurb { font-size: 0.85rem; color: var(--yt-muted); }

.yt-qsc__lcp { display: flex; align-items: baseline; gap: 0.6rem; margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--yt-line); flex-wrap: wrap; }
.yt-qsc__lcp-num { font-size: 1.8rem; color: var(--yt-forest); }

.yt-qsc__findings { margin-top: 1.5rem; }
.yt-qsc__sub { font-size: 1.15rem; color: var(--yt-forest); margin: 0 0 0.6em; }
.yt-qsc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.yt-qsc__item { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.8rem 1rem; background: var(--yt-soft); border-radius: 6px; }
.yt-qsc__tag { flex: 0 0 auto; min-width: 82px; text-align: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3em 0.5em; border-radius: 3px; color: #fff; margin-top: 0.15em; }
.yt-qsc__tag--technical { background: var(--yt-forest); }
.yt-qsc__tag--text { background: #3f7a4f; }
.yt-qsc__tag--trust { background: #6c8f2e; }
.yt-qsc__more { color: var(--yt-muted); font-style: italic; margin: 0.8em 0 0; }

.yt-qsc__cta { margin-top: 1.75rem; padding: 1.5rem; background: var(--yt-forest); color: #fff; border-radius: 8px; }
.yt-qsc__cta-title { color: #fff; font-size: 1.3rem; margin: 0 0 0.3em; }
.yt-qsc__cta-text { margin: 0 0 1.1em; color: rgba(255, 255, 255, 0.88); }
.yt-qsc__cta .yt-qsc__small { color: rgba(255, 255, 255, 0.75); margin-bottom: 0; }
.yt-qsc__cta .yt-qsc__small a { color: var(--yt-lime); }
.yt-qsc__choices { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.yt-qsc__choice { display: inline-block; padding: 0.75em 1.3em; background: var(--yt-lime); color: var(--yt-forest); font-weight: 700; text-decoration: none; border-radius: 6px; }
.yt-qsc__choice:hover { background: #7db532; color: var(--yt-forest); }

.yt-qsc__small { font-size: 0.8rem; color: var(--yt-muted); margin: 1rem 0 0; }

@media (max-width: 560px) {
	.yt-qsc__score-row { justify-content: center; text-align: left; }
	.yt-qsc__button { width: 100%; text-align: center; padding: 0.6rem 1rem; }
	.yt-qsc__lcp { display: block; }
	.yt-qsc__item { flex-direction: column; gap: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
	.yt-qsc__spinner { animation-duration: 3s; }
	.yt-qsc__ring-fg, .yt-qsc__fill { transition: none; }
}

/* Keep link and button colours fixed regardless of theme or page builder link styles. */
.yt-qsc .yt-qsc__cta .yt-qsc__small a,
.yt-qsc .yt-qsc__cta .yt-qsc__small a:link,
.yt-qsc .yt-qsc__cta .yt-qsc__small a:visited {
	color: var(--yt-lime) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	font-weight: 600;
}
.yt-qsc .yt-qsc__cta .yt-qsc__small a:hover,
.yt-qsc .yt-qsc__cta .yt-qsc__small a:focus-visible {
	color: #fff !important;
}
.yt-qsc a.yt-qsc__button,
.yt-qsc a.yt-qsc__button:link,
.yt-qsc a.yt-qsc__button:visited,
.yt-qsc a.yt-qsc__choice,
.yt-qsc a.yt-qsc__choice:link,
.yt-qsc a.yt-qsc__choice:visited {
	color: var(--yt-forest) !important;
	text-decoration: none !important;
}
