/* DuemmerGaense website. The design is the old site's, docs/HANDOFF_0000_Modernize_Website.md §2.3 and Step 1. */
:root {
  --brown: #603813;
  --hover: #B58750;
  --sand: #c7b299;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0 10px;
  background: #fff;
  color: #000;
  font-family: Arial, Helvetica, Verdana, sans-serif;
  font-size: 15px;
}

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

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

/* Header: the logo sits at x 55, y 60 and the stripe directly under it, as on the old site. */
.site-header {
  padding: 60px 0 0 45px;
  border-bottom: 5px solid var(--sand);
}

.site-header img {
  display: block;
}

/* Menu: one layout at every width, it simply wraps. */
.site-nav {
  margin-top: 20px;
  padding-left: 48px;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: 5px 0;
  font-size: 12pt;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--hover);
}

/* Column: 600px; the overhanging art starts at the logo's left edge, so the text starts 46px further right. */
.site-main {
  max-width: 600px;
  margin: 40px 0 0 91px;
  padding-bottom: 54px;
}

.art {
  display: block;
  max-width: none;
  margin-left: -46px;
}

h1 {
  margin: 20px 0;
  color: var(--brown);
  font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: normal;
}

.site-main > h1:first-child {
  margin-top: 0;
}

h2,
h3 {
  margin: 0;
  font-size: inherit;
}

p {
  margin: 0 0 1.15em;
}

.chapter {
  margin-top: 2.3em;
}

/* The gap of a blank line between paragraphs, as the proof's empty paragraphs gave it. */
.spaced {
  margin-top: 3.4em;
}

.toc {
  margin: 0 0 1.15em;
  padding: 0;
  list-style: none;
}

.news {
  margin: 1em 0 2.1em;
}

.goose {
  display: block;
  margin: 40px auto 0;
}

.site-footer {
  height: 35px;
  margin-bottom: 10px;
  background: var(--sand);
}

/* Phones: 16px gutter in total, less space around the logo, the art fits the column. */
@media (max-width: 800px) {
  .site-header {
    padding: 16px 6px 0;
  }

  .site-nav {
    margin-top: 12px;
    padding-inline: 6px;
  }

  .site-main {
    margin: 24px 6px 0;
    padding-bottom: 32px;
  }

  .art {
    max-width: 100%;
    margin-left: 0;
  }
}

/* Language switch, in the menu row. Only rendered with two or more enabled languages (_Layout.cshtml). */
.site-nav .lang {
  margin-left: auto;
  padding: 5px 0;
  font-size: 12pt;
}

.site-nav .lang a {
  display: inline;
  padding: 0;
}