/*
 * rawnix.css -- shared look for rawnix.org (landing page + mandoc man pages)
 * Colours and type taken from cgit's cgit.css (upstream master, incl. its
 * prefers-color-scheme: dark block) so rawnix.org matches git.rawnix.org.
 */

:root {
	color-scheme: light dark;
	--bg:     white;    /* div#cgit background          */
	--fg:     #333;     /* div#cgit color               */
	--title:  #000;     /* table#header td.main a       */
	--muted:  #777;     /* td.sub, tabs, footer         */
	--link:   blue;     /* div#cgit a                   */
	--rule:   #ccc;     /* table.tabs border-bottom     */
	--bar:    #eee;     /* div.path, list header, panel */
	--alt:    #f7f7f7;  /* table.list odd rows          */
	--glow:   rgba(255, 214, 0, .55);
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg:    #171717;
		--fg:    #eee;
		--title: #eee;
		--muted: #999;
		--link:  #3af;
		--rule:  #444;
		--bar:   #333;
		--alt:   #1f1f1f;
		--glow:  rgba(255, 214, 0, .3);
	}
}

html { background: var(--bg); }
body {
	margin: 0 auto;
	padding: 4px 8px 2em;
	max-width: 60em;
	font-family: sans-serif;
	font-size: 10pt;
	line-height: 1.4;
	color: var(--fg);
	background: var(--bg);
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible {
	outline: 2px solid var(--link);
	outline-offset: 2px;
	border-radius: 1px;
}

/* "monospace, monospace" stops browsers shrinking/growing the generic family */
pre, code, kbd, samp { font-family: monospace, monospace; font-size: 100%; }

/* ---- landing page ------------------------------------------------ */

/* centre the whole landing page in the window */
body.landing {
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-bottom: 4px;
}

.mark {
	position: relative;
	display: flex;
	justify-content: center;
	padding: 4rem 3rem;
	isolation: isolate;
}
.mark::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	margin: auto;
	width: 46em;
	max-width: 100%;
	height: 100%;
	background: radial-gradient(closest-side, var(--glow), transparent);
	animation: glow 7s ease-in-out infinite;
}
@keyframes glow {
	0%, 100% { opacity: .75; transform: scale(.94); }
	50%      { opacity: 1;   transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
	.mark::before { animation: none; }
}
.mark img {
	display: block;
	max-width: 100%;
	height: auto;
}

.intro {
	text-align: center;
	max-width: 40em;
	margin: 0 auto;
}
.intro p { margin: 0 0 1.2em; }
.intro .what { color: var(--muted); }
.intro nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4em 2em;
	font-size: 115%;
	margin-bottom: 1.5em;
}
.intro .mirror code {
	padding: .1em .4em;
	background: var(--bar);
}

@media (max-width: 480px) {
	.mark { padding: 3rem 1rem; }
}

/* ---- mandoc -Thtml -Ostyle=/rawnix.css --------------------------- */

table.head, table.foot {
	width: 100%;
	border-collapse: collapse;
	color: var(--muted);
}
table.head { border-bottom: solid 3px var(--rule); margin-bottom: 1em; }
table.foot { border-top: solid 1px var(--rule); margin-top: 2em; font-size: 90%; }
td.head-vol  { text-align: center; }
td.head-rtitle, td.foot-os { text-align: right; }
td.head-ltitle, td.head-rtitle { color: var(--title); font-weight: bold; }

.manual-text { padding: 0 1em; max-width: 50em; }
h1.Sh {
	margin: 1.5em 0 .5em -1em;
	padding: .1em .5em;
	font-size: 110%;
	color: var(--title);
	background: var(--bar);
}
h2.Ss { margin: 1em 0 .4em -.5em; font-size: 100%; color: var(--title); }
a.permalink { color: inherit; }

.Nm, .Fl, .Cm, .Ic, .Sy { font-weight: bold; }
.Ar, .Va, .Fa { font-style: italic; }
.Pa { font-style: italic; }
.Xr { color: var(--link); }

dl.Bl-tag > dt { font-weight: normal; margin-top: .6em; }
dl.Bl-tag > dd { margin-left: 4em; }
.Bd-indent { margin-left: 2em; }
.Bd pre, pre.Li {
	padding: .5em;
	background: var(--alt);
	border-left: solid 3px var(--rule);
	overflow-x: auto;
}