/* Styles for the bsdt site in docs/: the home page (body.home), the
 * mandoc -T html rendering of bsdt(1) (body.manual) and the license
 * (body.license). The HTML is built by `make docs` from templates/ and
 * man/bsdt.1; this file is edited by hand. Look and palette follow
 * divanv.com. */

/* Ubuntu Mono, served from this site (Latin subset, Ubuntu Font Licence:
 * fonts/UFL.txt) rather than imported from Google Fonts. An @import there
 * made loading a chain: this file, then Google's CSS, then the fonts. */
@font-face {
  font-family: "Ubuntu Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/UbuntuMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/UbuntuMono-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/UbuntuMono-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu Mono";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/UbuntuMono-BoldItalic.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --accent-color: #ab2b28; /* FreeBSD red */
  --background-color: #ffffff;
  --text-color: #111111;
  --title-color: #0f0c0a;
  --subtitle-color: #2f2925;
  --muted-color: #6b625c;
  --rule-color: #d9d4d0;
  --link-color: #1a4fb5;
  --link-color-visited: #5a3c99;
  --code-background: transparent;
  --inline-code-background: #000000;
  --inline-code-foreground: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent-color: #d9443f; /* FreeBSD red, lifted for contrast on black */
    --background-color: #0b0b0b;
    --text-color: #d8d8d8;
    --title-color: #ffffff;
    --subtitle-color: #a8a8a8;
    --muted-color: #8a8a8a;
    --rule-color: #2a2a2a;
    --link-color: #7fa6ff;
    --link-color-visited: #b199e8;
    --code-background: #0f0f0f;
    --inline-code-background: #ffffff;
    --inline-code-foreground: #000000;
  }
}

html {
  font-family: "Ubuntu Mono", "Courier New", Courier, monospace;
  background: var(--background-color);
}

body {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 22px 3rem;
  color: var(--text-color);
  background: var(--background-color);
  font-size: 14pt;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: -0.3px;
  word-spacing: 1px;
}

@media (max-width: 600px) {
  body { padding: 0 16px 2rem; font-size: 12.5pt; }
}

::selection { background: var(--accent-color); color: #ffffff; }

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

/* Nav bar, shared by every page. */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.5rem;
  padding: 17px 0 6px;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--accent-color);
}
.nav-title, .nav-title:visited {
  font-size: 1.4em;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--title-color);
  text-decoration: none;
}
.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav ul a, .nav ul a:visited { color: var(--subtitle-color); text-decoration: none; }
.nav a:hover { color: var(--accent-color); }

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--accent-color);
  color: var(--muted-color);
}

pre {
  margin: 0.75rem 0;
  padding: 14px;
  overflow-x: auto;
  background: var(--code-background);
  border: 1px solid var(--subtitle-color);
  font-family: inherit;
  word-spacing: normal;
  line-height: 1.5;
}

code { font-family: inherit; font-size: 1em; }

/* Home page */

.home code:not(pre code) {
  padding: 0 5px;
  background: var(--inline-code-background);
  color: var(--inline-code-foreground);
  overflow-wrap: break-word;
}

.hero h1 {
  margin: 2.5rem 0 0;
  font-size: 3.2em;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--title-color);
}
.hero h1::after {
  content: "_";
  color: var(--accent-color);
  animation: blink 1.2s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero h1::after { animation: none; }
}
.tagline {
  margin: 0.75rem 0 1rem;
  font-size: 1.25em;
  color: var(--subtitle-color);
}

.home h2 {
  margin: 2.75rem 0 0.5rem;
  font-size: 1.3em;
  color: var(--title-color);
}
.home h2 a, .home h2 a:visited { color: inherit; text-decoration: none; }
.home h2 a::before { content: "# "; color: var(--accent-color); }
.home h2 a:hover { color: var(--accent-color); }
.home h3 {
  margin: 1.5rem 0 0.25rem;
  font-size: 1em;
  color: var(--subtitle-color);
}
.home section { scroll-margin-top: 1rem; }

.prompt { color: var(--accent-color); user-select: none; }
.comment, .out { color: var(--muted-color); }

pre.terminal { margin: 1.5rem 0 0; }

ul.points { padding-left: 1.25rem; }
ul.points li { margin: 0.5rem 0; }
ul.points li::marker { color: var(--accent-color); }

.home table { width: 100%; border-collapse: collapse; }
.home td {
  padding: 0.35rem 0.75rem 0.35rem 0;
  border-bottom: 1px solid var(--rule-color);
  vertical-align: top;
}
.home td:first-child { white-space: nowrap; }
@media (max-width: 600px) {
  .home td:first-child { white-space: normal; }
}

figure { margin: 1.5rem 0; }
figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--subtitle-color);
}
figcaption { margin-top: 0.5rem; color: var(--muted-color); font-size: 0.9em; }

/* License */

pre.license { border: none; padding: 0; white-space: pre-wrap; }

/* Manual page: mandoc's classes, one per macro. The BSDT(1) header table
 * sits under the nav bar; the date/OS footer table is dropped. */

table.head {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  color: var(--subtitle-color);
}
table.head td { padding: 0; border: none; }
td.head-ltitle { font-weight: 700; color: var(--title-color); }
td.head-vol { text-align: center; }
td.head-rtitle { text-align: right; }
@media (max-width: 600px) {
  td.head-vol { display: none; }
}

h1.Sh {
  margin: 2rem 0 0.5rem;
  font-size: 1.15em;
  color: var(--title-color);
  letter-spacing: 0.4px;
}
h2.Ss { margin: 1.5rem 0 0.25rem; font-size: 1em; color: var(--subtitle-color); }

a.permalink, a.permalink:visited { color: inherit; text-decoration: none; }
a.permalink:hover { color: var(--accent-color); }

.Nm, .Cm, .Fl, .Ic, .Sy { font-weight: 700; }
var.Ar, .Pa { font-style: italic; }
code.Li {
  padding: 0 5px;
  background: var(--inline-code-background);
  color: var(--inline-code-foreground);
}

dl.Bl-tag { margin: 0.5rem 0; }
dl.Bl-tag > dt { margin-top: 0.75rem; }
dl.Bl-tag > dd { margin: 0 0 0 2rem; }
@media (max-width: 600px) {
  dl.Bl-tag > dd { margin-left: 1rem; }
}
dl.Bl-compact {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.25rem;
  row-gap: 0.15rem;
}
dl.Bl-compact > dt, dl.Bl-compact > dd { margin: 0; }
ul.Bl-bullet { padding-left: 1.5rem; }

div.Bd-indent { margin: 0.75rem 0; }
.manual pre { margin: 0; }

/* Long paths and URLs would otherwise overflow narrow screens. */
dt .Pa, .Pa { overflow-wrap: anywhere; }