/*
 * Split from components.css. Selectors unchanged.
 * Toolkit single.
 */

/* ---------- Toolkit ---------- */

.single-toolkit.has-post-palette {
	background: var(--wpx-post-1, var(--c-nav));
	color: var(--c-white);
}

.single-toolkit .wpx-toolkit,
.single-toolkit .wpx-toolkit__body {
	background: var(--wpx-post-1, var(--c-nav));
	color: var(--c-white);
}

.single-toolkit .wpx-toolkit :is(h1, h2, h3, h4, h5, h6, p, li, strong, em, figcaption) {
	color: var(--c-white);
}

.single-toolkit .wpx-toolkit p.wpx-toolkit__badge {
	color: var(--c-text);
}

.single-toolkit .wpx-toolkit .wpx-prose a {
	color: var(--c-white);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.single-toolkit .wpx-toolkit .wpx-prose a:hover,
.single-toolkit .wpx-toolkit .wpx-prose a:focus-visible {
	color: var(--c-white);
}

.single-toolkit .wpx-button--ghost {
	border-color: rgb(255 255 255 / 40%);
	color: var(--c-white);
}

.single-toolkit .wpx-button--ghost:hover,
.single-toolkit .wpx-button--ghost:focus-visible {
	border-color: var(--c-white);
	background: rgb(255 255 255 / 12%);
	color: var(--c-white);
}

.wpx-toolkit__title {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-h1);
	font-weight: 400;
	color: var(--c-white);
}

.wpx-toolkit__badge {
	display: inline-block;
	margin: 0 0 var(--sp-3);
	padding: var(--sp-2) var(--sp-3);
	background: rgb(255 255 255 / 88%);
	color: var(--c-text);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.wpx-toolkit__date {
	margin: 0 0 var(--sp-6);
	font-size: var(--fs-sm);
	color: var(--c-white);
	opacity: 0.9;
}

.wpx-toolkit__body {
	padding-block: var(--sp-8) var(--sp-10);
	background: var(--wpx-post-1, var(--c-nav));
	color: var(--c-white);
}

.wpx-toolkit__rail {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}

.wpx-toolkit__layout {
	display: grid;
	gap: var(--sp-8);
}

@media (width >= 64rem) {
	.wpx-toolkit__layout {
		grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
		align-items: start;
		gap: var(--sp-10);
	}
}

.wpx-toolkit-overview,
.wpx-toolkit-overview__intro h2,
.wpx-toolkit-section,
.wpx-toolkit__credits {
	scroll-margin-top: calc(4.5rem + var(--sp-4));
}

.wpx-toolkit-toc {
	margin: 0;
	padding: var(--sp-4);
	border: 1px solid rgb(255 255 255 / 28%);
	color: inherit;
}

@media (width >= 64rem) {
	.wpx-toolkit-toc {
		position: sticky;
		top: calc(4.5rem + var(--sp-4));
	}
}

.wpx-toolkit-toc__title {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.wpx-toolkit-toc__list {
	display: grid;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpx-toolkit-toc__list a {
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
}

.wpx-toolkit-toc__list a:hover,
.wpx-toolkit-toc__list a:focus-visible,
.wpx-toolkit-toc__list a[aria-current='true'] {
	color: var(--c-white);
	opacity: 1;
	text-decoration: underline;
}

.wpx-toolkit-overview > * + * {
	margin-top: var(--sp-6);
}

.wpx-toolkit-overview__heading {
	margin: 0;
	font-size: var(--fs-h3);
	font-weight: 400;
}

.wpx-toolkit-overview__intro {
	max-width: var(--w-prose);
}

.wpx-toolkit-overview__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.wpx-toolkit-section {
	padding-block: var(--sp-8);
	border-top: 1px solid rgb(255 255 255 / 18%);
}

.wpx-toolkit-section__banner {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 16rem;
	margin-bottom: var(--sp-6);
	overflow: hidden;
	background: var(--c-night);
}

.wpx-toolkit-section__banner-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wpx-toolkit-section__banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 35%);
}

.wpx-toolkit-section__banner .wpx-toolkit-section__title {
	position: relative;
	z-index: 1;
	max-width: 20ch;
	margin: 0;
	padding: var(--sp-5);
	color: var(--c-white);
	font-weight: 300;
	text-align: center;
	text-shadow: 0 2px 12px rgb(0 0 0 / 45%);
}

.wpx-toolkit-section__grid {
	display: grid;
	gap: var(--gutter);
}

@media (width >= 56rem) {
	.wpx-toolkit-section.is-split .wpx-toolkit-section__grid {
		grid-template-columns: 1.4fr 1fr;
		align-items: start;
	}
}

.wpx-toolkit-section__actions {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}

.wpx-toolkit__credits,
.wpx-toolkit__disclaimer {
	margin-top: var(--sp-8);
	padding-top: var(--sp-6);
	border-top: 1px solid rgb(255 255 255 / 18%);
}

.wpx-toolkit__disclaimer {
	opacity: 0.85;
}