/* USB Cafe site-specific styling */

:root,
[data-theme="light"] {
	--usb-border-soft: #d9dee5;
	--usb-header-background: #ffffff;
	--usb-footer-background: #f6f7f8;
	--usb-table-heading: #f2f4f7;
	--usb-table-label: #fafbfc;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--usb-border-soft: #34404c;
		--usb-header-background: #11161c;
		--usb-footer-background: #161e26;
		--usb-table-heading: #202a34;
		--usb-table-label: #18212a;
	}
}

[data-theme="dark"] {
	--usb-border-soft: #34404c;
	--usb-header-background: #11161c;
	--usb-footer-background: #161e26;
	--usb-table-heading: #202a34;
	--usb-table-label: #18212a;
}

header {
	border-bottom: 1px solid var(--usb-border-soft);
	background: var(--usb-header-background);
}

/* Footer navigation and copyright alignment. */
footer {
	padding-block-end: var(--mc-space-3);
	border-top-color: var(--usb-border-soft);
	background: var(--usb-footer-background);
}

footer > .container.stack {
	flex-flow: row wrap;
	gap: 0;
}

footer > .container.stack > .reading-width {
	width: min(100%, var(--mc-reading-width));
	max-width: none;
	flex: 0 0 100%;
}

footer > .container.stack > .cluster {
	display: contents;
}

footer > .container.stack > .cluster > p {
	order: 2;
	flex: 0 0 100%;
	font-size: 1rem;
	font-weight: 600;
}

footer > .container.stack::after {
	order: 3;
	flex: 0 0 100%;
	border-block-start: var(--mc-border-width) solid var(--mc-border);
	content: "";
}

footer > .container.stack > small {
	order: 4;
	flex: 1 1 auto;
	padding-block-start: var(--mc-space-3);
}

footer > .container.stack > .cluster > a.push-end {
	display: flex;
	order: 5;
	align-items: center;
	margin-inline-start: auto;
	padding-block-start: var(--mc-space-3);
}

.desktop-nav {
	display: none;
}

.desktop-nav > a {
	padding: 0.45rem 0.7rem;
	border-radius: 0.75rem;
	color: var(--mc-text);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 150ms ease, box-shadow 150ms ease;
}

.desktop-nav > a:hover,
.desktop-nav > a:focus-visible {
	background: color-mix(in srgb, var(--mc-surface-strong) 55%, transparent);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%);
}

@media (min-width: 56rem) {
	header > nav.container {
		width: calc(100% - (var(--mc-gutter) * 2));
		max-width: none;
	}

	.desktop-nav {
		display: list-item;
	}

	.mobile-nav {
		display: none;
	}
}

.brand {
	letter-spacing: -0.035em;
}

h1,
h2 {
	letter-spacing: -0.025em;
}

.eyebrow {
	color: var(--mc-accent);
	letter-spacing: 0.08em;
}

main:has(> .illustrated-hero) {
	--illustrated-page-edge: max(var(--mc-gutter), calc((100vw - var(--mc-content-width)) / 2));
	padding-top: 0;
}

.illustrated-hero {
	position: relative;
	display: grid;
	width: 100vw;
	min-height: clamp(19rem, 32vw, 24rem);
	margin-inline: calc(50% - 50vw);
	margin-bottom: clamp(2rem, 4vw, 3rem);
	align-items: center;
	overflow: hidden;
	isolation: isolate;
	border-bottom: 1px solid var(--usb-border-soft);
	background: var(--mc-surface);
}

.illustrated-hero::before,
.illustrated-hero::after {
	position: absolute;
	inset: 0;
	content: "";
	pointer-events: none;
}

.illustrated-hero::before {
	z-index: -2;
	background-image: var(--hero-illustration);
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 58% auto;
}

.illustrated-hero::after {
	z-index: -1;
	background: linear-gradient(90deg, var(--mc-surface) 0 43%, color-mix(in srgb, var(--mc-surface) 92%, transparent) 53%, color-mix(in srgb, var(--mc-surface) 20%, transparent) 72%, transparent 84%);
}

.illustrated-hero-content {
	width: min(100%, calc(var(--illustrated-page-edge) + 39rem));
	margin-inline-start: 0;
	padding-block: clamp(1.75rem, 5vw, 3.5rem);
	padding-inline-start: var(--illustrated-page-edge);
	padding-inline-end: clamp(1.75rem, 5vw, 3.5rem);
}

.illustrated-hero h1 {
	letter-spacing: normal;
}

.illustrated-hero-content > p:has(> a[href^="#"]),
main:has(> section[aria-labelledby="usb-connectors"]) > section:first-child .reading-width > p:has(> a[href^="#"]) {
	padding-block-start: var(--mc-space-3);
	padding-block-end: 0;
	border-block-start: var(--mc-border-width) solid var(--mc-border);
	font-size: 0.95rem;
	font-weight: 600;
}

.illustrated-hero-content > p:has(> strong:first-child + a) {
	font-size: 0.9rem;
	font-weight: 400;
}

.illustrated-hero-content > p:has(> strong:first-child + a) > strong:first-child {
	font-weight: inherit;
}

@media (max-width: 40rem) {
	.illustrated-hero {
		display: flex;
		min-height: 0;
		flex-direction: column;
		align-items: stretch;
	}

	.illustrated-hero::before {
		position: relative;
		z-index: auto;
		inset: auto;
		width: 100%;
		height: 14rem;
		flex: 0 0 14rem;
		background-position: center;
		background-size: cover;
	}

	.illustrated-hero::after {
		display: none;
	}

	.illustrated-hero-content {
		width: 100%;
		margin-inline-start: 0;
		padding: var(--mc-space-6) var(--mc-gutter);
		background: var(--mc-surface);
	}
}

main:has(> section[aria-labelledby="usb-connectors"]) {
	padding-top: 0;
}

main:has(> section[aria-labelledby="usb-connectors"]) > section {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-5);
}

main:has(> section[aria-labelledby="usb-connectors"]) > section + section {
	margin-top: var(--mc-space-8);
}

main:has(> section[aria-labelledby="usb-connectors"]) > section:first-child {
	position: relative;
	width: 100vw;
	min-height: calc(100svh - 4.6875rem);
	margin-inline: calc(50% - 50vw);
	justify-content: center;
	overflow: hidden;
	isolation: isolate;
	padding-block: clamp(1.75rem, 5vw, 3.5rem);
	padding-inline: max(var(--mc-gutter), calc((100vw - var(--mc-content-width)) / 2));
	border: 1px solid var(--usb-border-soft);
	background:
		radial-gradient(circle at 88% 45%, color-mix(in srgb, var(--mc-accent) 32%, transparent) 0 8%, transparent 29%),
		radial-gradient(circle at 72% 104%, color-mix(in srgb, var(--mc-accent) 18%, transparent) 0 4%, transparent 35%),
		radial-gradient(circle at 96% -8%, color-mix(in srgb, var(--mc-accent) 15%, transparent) 0 5%, transparent 31%),
		linear-gradient(color-mix(in srgb, var(--mc-accent) 9%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--mc-accent) 9%, transparent) 1px, transparent 1px),
		linear-gradient(120deg, color-mix(in srgb, var(--mc-surface) 98%, var(--mc-accent)) 0 46%, color-mix(in srgb, var(--mc-surface) 90%, var(--mc-accent)) 100%);
	background-size: auto, auto, auto, 3rem 3rem, 3rem 3rem, auto;
}

main:has(> section[aria-labelledby="usb-connectors"]) > section:first-child::before,
main:has(> section[aria-labelledby="usb-connectors"]) > section:first-child::after {
	position: absolute;
	content: "";
	pointer-events: none;
}

main:has(> section[aria-labelledby="usb-connectors"]) > section:first-child::before {
	z-index: -2;
	right: clamp(-9rem, -4vw, -1rem);
	top: 50%;
	width: clamp(26rem, 46vw, 42rem);
	aspect-ratio: 1.45 / 1;
	transform: translateY(-50%) rotate(-8deg);
	background:
		radial-gradient(circle at 18% 27%, color-mix(in srgb, var(--mc-accent) 82%, transparent) 0 0.38rem, transparent 0.43rem),
		radial-gradient(circle at 43% 27%, color-mix(in srgb, var(--mc-accent) 58%, transparent) 0 0.28rem, transparent 0.34rem),
		radial-gradient(circle at 72% 27%, color-mix(in srgb, var(--mc-accent) 76%, transparent) 0 0.34rem, transparent 0.4rem),
		radial-gradient(circle at 32% 54%, color-mix(in srgb, var(--mc-accent) 64%, transparent) 0 0.3rem, transparent 0.36rem),
		radial-gradient(circle at 58% 54%, color-mix(in srgb, var(--mc-accent) 88%, transparent) 0 0.4rem, transparent 0.46rem),
		radial-gradient(circle at 84% 54%, color-mix(in srgb, var(--mc-accent) 54%, transparent) 0 0.28rem, transparent 0.34rem),
		radial-gradient(circle at 43% 79%, color-mix(in srgb, var(--mc-accent) 74%, transparent) 0 0.34rem, transparent 0.4rem),
		radial-gradient(circle at 72% 79%, color-mix(in srgb, var(--mc-accent) 62%, transparent) 0 0.3rem, transparent 0.36rem),
		linear-gradient(90deg, transparent 18%, color-mix(in srgb, var(--mc-accent) 46%, transparent) 18% 72%, transparent 72%) 0 27% / 100% 0.12rem no-repeat,
		linear-gradient(90deg, transparent 32%, color-mix(in srgb, var(--mc-accent) 36%, transparent) 32% 84%, transparent 84%) 0 54% / 100% 0.1rem no-repeat,
		linear-gradient(90deg, transparent 43%, color-mix(in srgb, var(--mc-accent) 40%, transparent) 43% 72%, transparent 72%) 0 79% / 100% 0.1rem no-repeat,
		linear-gradient(180deg, transparent 27%, color-mix(in srgb, var(--mc-accent) 34%, transparent) 27% 79%, transparent 79%) 43% 0 / 0.1rem 100% no-repeat,
		linear-gradient(180deg, transparent 27%, color-mix(in srgb, var(--mc-accent) 42%, transparent) 27% 79%, transparent 79%) 72% 0 / 0.11rem 100% no-repeat,
		linear-gradient(135deg, transparent 0 46%, color-mix(in srgb, var(--mc-accent) 14%, transparent) 47% 49%, transparent 50% 100%);
	filter: drop-shadow(0 1.5rem 2.5rem color-mix(in srgb, var(--mc-accent) 22%, transparent));
	opacity: 0.92;
}

main:has(> section[aria-labelledby="usb-connectors"]) > section:first-child::after {
	z-index: -1;
	inset: 0;
	background:
		linear-gradient(90deg, var(--mc-surface) 0 39%, color-mix(in srgb, var(--mc-surface) 96%, transparent) 49%, color-mix(in srgb, var(--mc-surface) 55%, transparent) 64%, transparent 79%),
		radial-gradient(circle at 69% 24%, color-mix(in srgb, var(--mc-accent) 74%, transparent) 0 0.22rem, transparent 0.28rem),
		radial-gradient(circle at 77% 72%, color-mix(in srgb, var(--mc-accent) 62%, transparent) 0 0.24rem, transparent 0.3rem),
		radial-gradient(circle at 91% 22%, color-mix(in srgb, var(--mc-accent) 68%, transparent) 0 0.2rem, transparent 0.27rem),
		radial-gradient(circle at 94% 76%, color-mix(in srgb, var(--mc-accent) 60%, transparent) 0 0.25rem, transparent 0.31rem),
		linear-gradient(90deg, transparent 65%, color-mix(in srgb, var(--mc-accent) 26%, transparent) 65% 79%, transparent 79%) 0 24% / 100% 1px no-repeat,
		linear-gradient(90deg, transparent 73%, color-mix(in srgb, var(--mc-accent) 22%, transparent) 73% 93%, transparent 93%) 0 72% / 100% 1px no-repeat,
		linear-gradient(180deg, transparent 22%, color-mix(in srgb, var(--mc-accent) 23%, transparent) 22% 76%, transparent 76%) 69% 0 / 1px 100% no-repeat,
		linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--mc-accent) 18%, transparent) 30% 82%, transparent 82%) 94% 0 / 1px 100% no-repeat;
	background-repeat: no-repeat;
}

main:has(> section[aria-labelledby="usb-connectors"]) > section:first-child > * {
	width: min(100%, 39rem);
	margin-block: 0;
	margin-inline-end: auto;
}

main:has(> section[aria-labelledby="usb-connectors"]) > section:first-child > .eyebrow {
	letter-spacing: 0.08em;
}

main:has(> section[aria-labelledby="usb-connectors"]) > section:first-child > h1 {
	letter-spacing: normal;
}

main:has(> section[aria-labelledby="usb-connectors"]) > section:first-child > p:has(> a[href^="#"]) a {
	font-weight: 600;
}

@media (min-width: 48rem) {
	main:has(> section[aria-labelledby="usb-connectors"]) > section:first-child::before {
		right: clamp(-2rem, 2vw, 4rem);
	}
}

main > section[aria-labelledby="usb-connectors"] > .columns,
main > section[aria-labelledby="usb-adapters"] > .columns,
main > section[aria-labelledby="usb-standards"] > .columns,
main > section[aria-labelledby="usb-charging"] > .columns,
main > section[aria-labelledby="usb-alternatives"] > .columns,
main > section[aria-labelledby="usb-products"] > .columns {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (min-width: 48rem) {
	main > section[aria-labelledby="usb-connectors"] > .columns,
	main > section[aria-labelledby="usb-adapters"] > .columns,
	main > section[aria-labelledby="usb-standards"] > .columns,
	main > section[aria-labelledby="usb-charging"] > .columns,
	main > section[aria-labelledby="usb-alternatives"] > .columns,
	main > section[aria-labelledby="usb-products"] > .columns {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

.table-wrap {
	border: 1px solid var(--usb-border-soft);
	border-radius: var(--mc-radius);
}

th,
td {
	border-bottom-color: var(--usb-border-soft);
}

thead th {
	background: var(--usb-table-heading);
}

tbody th {
	background: var(--usb-table-label);
}

tbody tr:last-child > th,
tbody tr:last-child > td {
	border-bottom: 0;
}

table a {
	font-weight: 600;
}

main:has(> .illustrated-hero[style*="usb-flash-drives.svg"]) > section[aria-labelledby="guide"] {
	width: 100vw;
	margin-block-start: var(--mc-space-8);
	margin-inline: calc(50% - 50vw);
	padding-block: clamp(2rem, 4vw, 3rem);
	padding-inline: max(var(--mc-gutter), calc((100vw - var(--mc-content-width)) / 2));
	border-block: 1px solid var(--usb-border-soft);
	background: color-mix(in srgb, var(--mc-accent) 6%, var(--mc-background));
}

main:has(> .illustrated-hero[style*="usb-flash-drives.svg"]) > section[aria-labelledby="guide"] > .reading-width {
	width: 100%;
}

main > section.stack > .reading-width > :last-child {
	margin-block-end: 0;
}

.related-article-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.related-article-card {
	display: flex;
	height: 100%;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
	color: var(--mc-text);
	text-decoration: none;
}

.related-article-card img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--mc-surface-strong);
}

.related-article-card h3 {
	margin: 0;
	padding: var(--mc-space-4);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.related-article-card:hover {
	color: var(--mc-accent-hover);
}

@media (min-width: 48rem) {
	.related-article-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}