/* Site components for shows.theaardvark.co.uk. Tokens come from aard.shows.css. */

.skip-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	position: absolute;
	left: -999px;
	top: 0.5rem;
	z-index: 100;
	padding: 0.6rem 1rem;
	border-radius: 999px;
	background: var(--aard-contrast);
	color: var(--aard-contrast-inverse);
}
.skip-link:focus { left: 0.5rem; }

:focus-visible {
	outline: 3px solid var(--shows-focus);
	outline-offset: 3px;
	border-radius: 0.5rem;
}

/* aardCSS draws buttons a fainter 2px ring; use the same solid ring as links. */
.btn:focus-visible,
button:focus-visible {
	outline: 3px solid var(--shows-focus);
	outline-offset: 3px;
}

main:focus { outline: none; }

/* aardCSS puts a square marker on every li. Where a list is layout, drop it. */
.week-list li,
.site-footer li { list-style: none; }

/* Tap targets: 44px. */
header nav li a:not(.btn) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Buttons: pills, not rectangles. */
.btn { border-radius: 999px; }

.wordmark { font-size: 1.4rem; }

.site-footer { margin-top: 3rem; padding-block: 2rem; background: var(--aard-card-sectioning-background-color); }
.site-footer h2 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li a,
.site-footer .made-by a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
/* Links inside a sentence are exempt from the target size; give the lines room instead. */
.site-footer .credit { line-height: 1.9; }
.footer-cols { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }

/* Skeleton week list: a coloured pill per strand. */
.week-list { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.week-list li {
	padding: 0.9rem 1.4rem;
	border-radius: 56px 56px 56px 12px;
	background: var(--c);
	color: var(--on);
}