/* Styles for the guides generated by the website_guides rake task.  A guide loads
   application.css as well, so the design tokens and the base typography come from
   there, and this file only has to style the markup rdoc generates. */

:root {
	--rdoc-muted: #6b6b6b;
	--rdoc-stripe: #fafaf7;
}

div#content {
	background-color: #FFF;
	border-radius: 12px;
	box-shadow: 0 24px 64px rgba(0,0,0,.15);
	overflow: hidden;
	padding: var(--gap);
}

/* Links, following the site's a.a */

div#content a {
	color: var(--red-primary);
	text-decoration: none;
	transition: filter 100ms;
}

div#content a:visited {
	color: var(--red-secondary);
}

div#content a:hover {
	color: var(--red-primary);
	filter: saturate(1.5);
}

/* Every heading is a link to itself, so headings keep the text colour */

div#content h1 a, div#content h2 a, div#content h3 a, div#content h4 a,
div#content h1 a:visited, div#content h2 a:visited,
div#content h3 a:visited, div#content h4 a:visited {
	color: inherit;
}

/* Documentation text */

div#content p {
	line-height: 1.5;
	margin: .75em 0;
}

div#content h1 {
	font-size: 28px;
	font-weight: 300;
	margin: 0 0 12px 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border);
}

div#content h2 {
	font-size: 22px;
	font-weight: 400;
	letter-spacing: -0.025em;
	margin: 1.4em 0 .4em 0;
}

div#content h3 {
	font-size: 18px;
	font-weight: 600;
	margin: 1.3em 0 .3em 0;
}

div#content h4 {
	font-size: 16px;
	font-weight: 600;
	margin: 1.2em 0 .3em 0;
}

div#content ul, div#content ol {
	line-height: 1.5;
	margin: .8em 0;
	padding-left: 1.5em;
}

div#content ul {
	list-style: disc;
}

div#content ol {
	list-style: decimal;
}

/* Code, styled as rdoc styles it */

div#content code, div#content pre {
	font: 14px Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
	overflow-wrap: break-word;
}

div#content code {
	background: #ffffe3;
	padding: 2px 3px;
	line-height: 1.4;
}

div#content h1 code, div#content h2 code,
div#content h3 code, div#content h4 code {
	font-size: 1.1em;
}

div#content pre {
	color: black;
	background: #eeeeee;
	border: 1px solid silver;
	border-radius: 7px;
	padding: 0.75em 0.8em;
	line-height: 1.5;
	overflow: auto;
}

/* Highlighted ruby, on a dark background */

div#content pre.ruby {
	background: #262626;
	color: #ffdead;
	padding: 0.75em 0.5em;
}

div#content pre.ruby span.ruby-identifier {
	color: #ffdead;
}

div#content pre.ruby span.ruby-constant,
div#content pre.ruby span.ruby-value {
	color: #7fffd4;
}

div#content pre.ruby span.ruby-keyword {
	color: aqua;
}

div#content pre.ruby span.ruby-operator {
	color: #00ffee;
}

div#content pre.ruby span.ruby-ivar {
	color: #eedd82;
}

div#content pre.ruby span.ruby-string {
	color: #faa;
}

div#content pre.ruby span.ruby-node,
div#content pre.ruby span.ruby-regexp {
	color: #ffa07a;
}

div#content pre.ruby span.ruby-comment {
	color: #fdf;
	font-weight: bold;
}

/* Note lists, which rdoc renders as tables */

div#content table.rdoc-list {
	display: block;
	width: 100%;
	margin: 1em 0;
	border-collapse: collapse;
	overflow-x: auto;
}

div#content table.rdoc-list td {
	border: 1px solid var(--border);
	padding: 8px 12px;
	vertical-align: top;
}

div#content table.rdoc-list td.label {
	font-weight: 600;
}

div#content table.rdoc-list tr:nth-child(2n) {
	background-color: var(--rdoc-stripe);
}