/* Elements: page, text, headings, links, media, focus, and the helper classes WordPress expects. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Checkboxes, radio buttons and range sliders in ink instead of the browser's blue */
html {
	accent-color: var(--cc-ink);
}

body {
	margin: 0;
	background: var(--cc-white);
	color: var(--cc-ink);
	font-family: var(--cc-font-body);
	font-size: var(--cc-size-body);
	line-height: var(--cc-line-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--cc-space-4);
	font-family: var(--cc-font-heading);
	font-weight: 600;
	line-height: var(--cc-line-heading);
	text-transform: none;
	letter-spacing: 0;
}

h1 { font-size: var(--cc-size-h1); }
h2 { font-size: var(--cc-size-h2); }
h3 { font-size: var(--cc-size-h3); }
h4,
h5,
h6 { font-size: var(--cc-size-h4); }

p,
ul,
ol,
dl,
figure,
table,
blockquote {
	margin: 0 0 var(--cc-space-4);
}

/* Links: underlined inside running text (they are the same black as the text); elsewhere underlined on hover. */
a {
	color: var(--cc-ink);
	text-decoration: none;
	text-decoration-thickness: var(--cc-line);
	text-underline-offset: 0.2em;
}

a:hover,
:where(p, li, dd, td, blockquote, figcaption) a {
	text-decoration-line: underline;
}

:where(p, li, dd, td, blockquote, figcaption) a:hover {
	text-decoration-thickness: var(--cc-line-strong);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* Embedded videos (a product video, YouTube in posts) fit the column at 16:9 instead of a fixed 560px. */
iframe,
embed,
object {
	max-width: 100%;
}

iframe[src*="youtube"],
iframe[src*="youtu.be"],
iframe[src*="vimeo"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

hr {
	border: 0;
	border-top: var(--cc-line) solid var(--cc-grey-200);
	margin: var(--cc-space-6) 0;
}

code {
	font-size: var(--cc-size-small);
}

:focus-visible {
	outline: var(--cc-focus) solid var(--cc-ink);
	outline-offset: var(--cc-focus);
}

.cc-site-content:focus {
	outline: none;
}

[hidden] {
	display: none !important;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cc-skip-link {
	position: absolute;
	top: var(--cc-space-2);
	left: var(--cc-space-2);
	z-index: 100;
	padding: var(--cc-space-2) var(--cc-space-4);
	background: var(--cc-ink);
	color: var(--cc-white);
	transform: translateY(-200%);
}

.cc-skip-link:focus {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}