/* Website Security Check. Brand: charcoal #222, off-white #f4f4ef, lime #dce85d, olive #3d4119.
   Outfit headings and Atkinson Hyperlegible text come from the theme. Status is always written, never colour alone. */

.c11y-sc {
	max-width: 960px;
	margin: 0 auto;
	padding: 40px 16px 80px;
	display: grid;
	gap: 24px;
	color: #222222;
	font-size: 1rem;
	line-height: 1.6;
}
.c11y-sc > * { min-width: 0; }
.c11y-sc [hidden] { display: none !important; }
.c11y-sc,
.c11y-sc *,
.c11y-sc *::before,
.c11y-sc *::after { box-sizing: border-box; }
.c11y-sc h2,
.c11y-sc h3,
.c11y-sc h4,
.c11y-sc h5 { font-family: Outfit, "Segoe UI", system-ui, sans-serif; color: #222222; }
.c11y-sc h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
.c11y-sc h2:focus { outline: none; }
.c11y-sc p { margin: 0 0 10px; font-size: inherit; }
.c11y-sc a { color: #3d4119; text-underline-offset: 3px; }
.c11y-sc-card { padding: clamp(20px, 4vw, 36px); border-radius: 22px; background: #ffffff; }

/* Forms */
.c11y-sc label { display: block; margin: 0 0 6px; font-weight: 700; }
.c11y-sc-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.c11y-sc-row input { flex: 1 1 16rem; min-width: 0; }
.c11y-sc input[type="text"],
.c11y-sc input[type="email"] {
	width: 100%;
	min-height: 48px;
	padding: .6rem .8rem;
	border: 2px solid #555555;
	border-radius: 10px;
	background: #ffffff;
	color: #222222;
	font: inherit;
}
.c11y-sc-row input[type="text"] { width: auto; }
.c11y-sc input[aria-invalid="true"] { border-color: #a61b2b; }
.c11y-sc input:focus-visible,
.c11y-sc a:focus-visible,
.c11y-sc pre:focus-visible,
.c11y-sc button:focus-visible { outline: 3px solid #222222; outline-offset: 2px; box-shadow: 0 0 0 6px #dce85d; }
.c11y-sc-tick { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 12px; }
.c11y-sc-tick input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: #222222; }
.c11y-sc .c11y-sc-tick label { margin: 0; font-weight: 400; }
.c11y-sc-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.c11y-sc-error:empty,
.c11y-sc-progress:empty,
.c11y-sc-status:empty { display: none; }
.c11y-sc-error { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: #fdecee; border: 1px solid #e7b3bb; color: #8a1c2b; font-weight: 700; }
.c11y-sc-error:focus,
.c11y-sc-status:focus { outline: none; }
.c11y-sc-progress { margin: 14px 0 0; font-weight: 700; }
.c11y-sc-status { font-weight: 700; }
.c11y-sc-small { font-size: .9rem; color: #555555; }
.c11y-sc-row ~ .c11y-sc-small { margin-top: 12px; }

/* Buttons */
.c11y-sc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 2px solid #222222;
	border-radius: 999px;
	background: #222222;
	color: #ffffff;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
.c11y-sc .c11y-sc-btn { color: #ffffff; }
.c11y-sc-btn:hover { background: #3d4119; border-color: #3d4119; }
.c11y-sc-btn[disabled] { opacity: .6; cursor: wait; }
.c11y-sc .c11y-sc-btn--lime { background: #dce85d; border-color: #dce85d; color: #222222; }
.c11y-sc .c11y-sc-btn--ghost { background: #ffffff; color: #222222; }
.c11y-sc .c11y-sc-btn--ghost:hover { background: #f4f4ef; border-color: #222222; }

/* Results */
.c11y-sc-meta { color: #555555; overflow-wrap: anywhere; }
.c11y-sc-line { font-weight: 600; }
.c11y-sc-limit { padding: 10px 14px; border-left: 4px solid #dce85d; border-radius: 8px; background: #f4f4ef; }
.c11y-sc-group { margin-top: 28px; }
#c11y-sc-unlock { scroll-margin-top: 110px; }
.c11y-sc .c11y-sc-group h3 { margin: 0 0 12px; padding-bottom: 6px; border-bottom: 2px solid #222222; font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
.c11y-sc-items { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.c11y-sc-item { padding: 16px 18px; border-radius: 16px; border-left: 6px solid #9a9a8a; background: #f4f4ef; min-width: 0; }
.c11y-sc-item--pass { border-left-color: #2c6a3f; }
.c11y-sc-item--fix { border-left-color: #8a4b00; }
.c11y-sc-item--managed { border-left-color: #2f6aa3; }
.c11y-sc-item__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.c11y-sc .c11y-sc-item h4 { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.c11y-sc-badge { padding: 3px 12px; border: 1.5px solid transparent; border-radius: 999px; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.c11y-sc-badge--pass { background: #e4f1e7; color: #245a35; }
.c11y-sc-badge--fix { background: #fbeed9; color: #6f3c00; border-color: #8a4b00; }
.c11y-sc-badge--managed { background: #e7f1fb; color: #123a63; border-color: #2f6aa3; }
.c11y-sc-badge--unknown { background: #ffffff; color: #555555; border-color: #767676; }
.c11y-sc-detail { margin: 6px 0 4px; font-weight: 600; overflow-wrap: anywhere; }
.c11y-sc-why { margin: 0; color: #555555; font-size: .95rem; }
.c11y-sc-fix { margin-top: 12px; padding-top: 12px; border-top: 1px solid #dcdcd2; }
.c11y-sc .c11y-sc-fix h5 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; }
.c11y-sc-fix ol { margin: 0; padding-left: 1.3rem; display: grid; gap: 4px; }
.c11y-sc-fix pre { margin: 12px 0 0; padding: 12px 14px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 10px; background: #222222; color: #ffffff; font-size: .88rem; line-height: 1.5; }
.c11y-sc-fix code { background: none; color: inherit; font-family: Consolas, Menlo, monospace; }

/* Email and next steps */
.c11y-sc-panel { padding: clamp(20px, 4vw, 36px); border-radius: 22px; background: #222222; color: #ffffff; min-width: 0; }
.c11y-sc .c11y-sc-panel h2 { color: #ffffff; }
.c11y-sc .c11y-sc-panel a:not(.c11y-sc-btn) { color: #dce85d; }
.c11y-sc-panel .c11y-sc-small { margin-top: 12px; color: #e4e4da; }
.c11y-sc-panel input[type="email"] { max-width: 32rem; }
.c11y-sc-panel .c11y-sc-btn--lime { margin-top: 14px; }
.c11y-sc .c11y-sc-panel--light { background: #dce85d; color: #222222; }
.c11y-sc .c11y-sc-panel--light h2 { color: #222222; }
.c11y-sc-next { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.c11y-sc-about { padding: 0 4px; }
.c11y-sc-about ul { margin: 0 0 16px; padding-left: 1.2rem; }
.c11y-sc .c11y-sc-about h3 { margin: 0 0 6px; font-size: 1.2rem; }

/* Download PDF */
.c11y-sc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.c11y-sc-actions .c11y-sc-small { margin: 0; }
.c11y-sc-print,
.c11y-sc-print-end { display: none; }
.c11y-sc-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Printing and Save as PDF: only the report, as a branded document. Brand colours are kept, as status badges use them.
   Page margin boxes add page numbers, and Chrome then leaves out its own date, title and address at the page edges. */
@media print {
	@page {
		margin: 14mm 14mm 16mm;
		/* Empty top boxes keep the browser from printing its own date and title there. */
		@top-left { content: " "; }
		@top-right { content: " "; }
		@bottom-left { content: "CoreA11y Website Security Check"; font: 8pt "Atkinson Hyperlegible", Arial, sans-serif; color: #555555; }
		@bottom-right { content: "Page " counter(page) " of " counter(pages); font: 8pt "Atkinson Hyperlegible", Arial, sans-serif; color: #555555; }
	}
	html { margin-top: 0 !important; }
	body,
	:has(> #main),
	#main { background: #ffffff !important; }
	/* The theme slides headings in as they scroll into view, which never happens in print. */
	.x-reveal { transform: none !important; opacity: 1 !important; transition: none !important; animation: none !important; }
	body > :not(:has(#main)),
	:has(> #main) > :not(#main),
	#main > :not(.c11y-sc),
	.c11y-sc-actions,
	.c11y-sc-next,
	.c11y-sc > .c11y-sc-small { display: none !important; }
	.c11y-sc { max-width: none; padding: 0; gap: 14px; font-size: 11pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

	.c11y-sc-print { display: block; border-radius: 14px; overflow: hidden; background: #222222; color: #ffffff; }
	.c11y-sc-print p { margin: 0; }
	.c11y-sc-print__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid #444444; }
	.c11y-sc .c11y-sc-print__logo { display: flex; align-items: center; gap: 9px; }
	.c11y-sc-print__logo > span[aria-hidden] { display: flex; align-items: center; gap: 9px; }
	.c11y-sc-print__logo svg { display: block; }
	.c11y-sc-print__word { font: 700 17pt/1 Outfit, "Segoe UI", system-ui, sans-serif; letter-spacing: -.01em; color: #ffffff; }
	.c11y-sc-print__word span { margin: 0 1px; padding: 0 3px 1px; border-radius: 4px; background: #dce85d; color: #222222; }
	.c11y-sc .c11y-sc-print__tag { font-size: 9pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #dce85d; }
	.c11y-sc-print__title { padding: 16px 22px 18px; border-bottom: 6px solid #dce85d; }
	.c11y-sc .c11y-sc-print__eyebrow { font-size: 9pt; letter-spacing: .12em; text-transform: uppercase; color: #cfcfc4; }
	.c11y-sc .c11y-sc-print h1 { margin: 2px 0 8px; font-family: Outfit, "Segoe UI", system-ui, sans-serif; font-size: 24pt; font-weight: 700; line-height: 1.15; color: #ffffff; overflow-wrap: anywhere; }
	.c11y-sc .c11y-sc-print__link { font-size: 8.5pt; color: #cfcfc4; overflow-wrap: anywhere; }

	.c11y-sc-card { padding: 0; border-radius: 0; }
	.c11y-sc h2 { font-size: 16pt; }
	.c11y-sc-group { margin-top: 16px; }
	.c11y-sc .c11y-sc-group h3 { break-after: avoid; page-break-after: avoid; }
	.c11y-sc-item { break-inside: avoid; page-break-inside: avoid; }
	.c11y-sc-fix pre { white-space: pre-wrap; overflow: visible; }
	.c11y-sc a { color: #222222; }

	.c11y-sc-print-end { display: block; margin-top: 6px; padding: 14px 18px; border-radius: 14px; border-left: 6px solid #dce85d; background: #f4f4ef; break-inside: avoid; page-break-inside: avoid; font-size: 10pt; }
	.c11y-sc .c11y-sc-print-end p { margin: 0 0 4px; }
	.c11y-sc .c11y-sc-print-end p:last-child { margin: 0; color: #555555; }
}