/* General styles for HTML elements. */

:root {
	--border-width-heading: 3px;
	--border-start-blockquote: 4px var( --border-style-base ) var( --background-color-interactive );
}

* {
	box-sizing: border-box;
}

html {
	font-size: 100%;
	scroll-padding-top: var( --size-header );
}

body {
	background-color: var( --background-color-interactive );
	color: var( --color-base );
	margin: 0;
	font-family: var( --font-family-system-sans );
	font-size: var( --font-size-medium );
	line-height: var( --line-height-medium );
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var( --color-emphasized );
	margin: 2rem 0 0;
	line-height: var( --line-height-xxx-small );
	transition: font-size var( --transition-duration-medium ), font-weight var( --transition-duration-medium );
}

h1,
h2,
h3,
h4,
h5 {
	font-weight: var( --font-weight-semi-bold );
}

h1 {
	border-bottom: var( --border-width-heading ) var( --border-style-base ) var( --border-color-light );
	margin-top: 0;
	padding-bottom: 2px;
	font-size: 1.5rem;
}

h2 {
	font-size: 1.25rem;
}

/* Reduce top margin when introductory headlines are following each other. */
h1 + h2 {
	margin-top: 1rem;
}

h3 {
	font-size: 1.125rem;
}

h4 {
	font-size: 1rem;
}

h5,
h6 {
	font-size: 1rem;
}

blockquote {
	margin: 1rem 0 0;
	border-left: var( --border-start-blockquote );
	padding: 0.5rem 2rem;
	font-family: var( --font-family-serif );
	font-size: 1.25rem;
	font-style: italic;
}

code,
pre,
.mw-code {
	font-family: var( --font-family-monospace );
}

p {
	margin: 2rem 0 0;
	overflow-wrap: break-word;
}

h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p,
p + p,
ul + p,
p:first-child {
	margin: 0.5rem 0 0;
}

pre,
.mw-code {
	background-color: var( --background-color-interactive-subtle );
	color: var( --color-emphasized );
	border: var( --border-base );
	padding: 0.75rem;
	font-size: 0.875rem;
	white-space: pre-wrap;
}

ol,
ul {
	margin: 0.5rem 0;
	padding: 0 0 0 1.125rem; /* Can't remain within our 8px based sizing due to browser defaults */
}

.content li {
	margin-top: 0.25rem;
}

.content li:first-child {
	margin-top: 0;
}

a {
	color: var( --color-progressive );
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: var( --color-visited );
}

a:active {
	color: var( --color-progressive--active );
}

b,
strong {
	font-weight: var( --font-weight-bold );
}

small {
	font-size: 0.8125rem;
}

sub,
sup {
	font-size: 0.6875rem;
}

code {
	background-color: var( --background-color-interactive-subtle );
	display: inline-block;
	/* Support: Chrome - prevent overflow for long code blocks. */
	max-width: 100%;
	padding: 0.125rem 0.25rem;
	font-size: 0.875rem;
}

.name {
	color: var( --color-base );
	font-size: 0.9375rem;
}

code,
.name,
.params .name {
	font-family: var( --font-family-monospace );
}

pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-wrap: normal;
	/* Make scrollable on very small screens if necessary. */
	overflow-x: auto;
}

dd > p:first-child {
	margin: 0;
}

/* Support Blink based browsers. */
/* They use `outline` for focus styles, we're only amending the color here, see T245887. */
:focus {
	outline-color: var( --outline-color-progressive--focus );
}

::placeholder {
	color: var( --color-placeholder );
	opacity: 1;
}

/* Text for Screen Readers only. */
.is-aural {
	display: block;
	position: absolute;
	clip: rect( 1px, 1px, 1px, 1px );
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0;
	overflow: hidden;
}

.is-aural.is-focusable:active,
.is-aural.is-focusable:focus {
	position: static;
	clip: auto;
	width: auto;
	height: auto;
	margin: 0;
	text-decoration: underline;
	overflow: visible;
}

/* Sitemap */
.sitemap {
	overflow-wrap: anywhere;
	word-break: normal;
}

@media ( min-width: 900px ) {
	.sitemap {
		column-count: 2;
		column-gap: 2rem;
	}
}

.sitemap-heading a {
	color: var( --color-placeholder );
}