/* Colours and fonts. Change the look of the whole site here. */
:root {
  --page: #ffffd0;
  --text: #1a1a1a;
  --banner: #ffff00;
  --banner-text: #800000;
  --bijbel: #800000;
  --catechismus: #0000c0;
  --link: #0000ee;
  --font: Georgia, "Times New Roman", serif;
  --width: 46rem;
}

body {
  margin: 0;
  padding: 1rem;
  background: var(--page);
  color: var(--text);
  font: 1.125rem/1.6 var(--font);
}

header.site,
main {
  max-width: var(--width);
  margin: 0 auto;
}

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

/* Site header */
header.site {
  overflow: hidden; /* contain the floated image */
  margin-bottom: 1.5rem;
}
.site-image {
  float: right;
  width: 235px;
  max-width: 40%;
  height: auto;
  margin: 0 0 0.5rem 1rem;
}
.site-title {
  margin: 0.5rem 0;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: bold;
  line-height: 1.2;
}
.site-title a {
  color: inherit;
  text-decoration: none;
}
.site-subtitle {
  margin: 0;
  color: var(--catechismus);
}

/* Page heading and section headings: the yellow banners of the old site */
main h1,
.preek > h2 {
  display: inline-block;
  margin: 1rem 0;
  padding: 0.3rem 0.8rem;
  border: 2px solid var(--text);
  background: var(--banner);
  color: var(--banner-text);
  font-size: 1.25rem;
}
.preek > h2 {
  font-size: 1.4rem;
}

/* ::: bijbel */
.bijbel {
  color: var(--bijbel);
}
.bijbel > h2 {
  font-size: 1rem;
  text-decoration: underline;
}

/* ::: catechismus */
.catechismus {
  color: var(--catechismus);
}
.catechismus > h2 {
  font-size: 1.25rem;
}
.catechismus h3 {
  margin: 1.2rem 0 0.3rem;
  font-size: 1rem;
  font-style: italic;
  font-weight: normal;
  text-decoration: underline;
}
.catechismus p {
  margin: 0.2rem 0;
}

/* ::: inhoud (table of contents on the home page) */
.inhoud ul {
  columns: 2 20rem;
  column-gap: 2rem;
  padding: 0;
  list-style: none;
  font-weight: bold;
  font-size: 1rem;
}
.inhoud li {
  break-inside: avoid;
  margin-bottom: 0.25rem;
}
.inhoud a {
  display: inline-block;
  min-width: 6.5rem;
}

/* Images in page text (portraits on the in-memoriam page) */
main img {
  max-width: 100%;
  height: auto;
}

/* Tables (sermon index). Converted tables have an empty header row: hide it. */
main table {
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 1rem;
}
main td {
  padding: 0.2rem 0.8rem 0.2rem 0;
  vertical-align: top;
}
main thead tr:not(:has(th:not(:empty))) {
  display: none;
}