/*
 * blog.fraservalley.nl — alleen wat aan deze site eigen is
 *
 * De letters, de kleuren, de hoekradius en de vorm van de onderdelen komen
 * uit /huisstijl/: Bootstrap, thema-basis.css en thema-fraservalley.css, in
 * die volgorde. Dit bestand voegt er één ding aan toe — de leeskolom van een
 * blog — en verder zo min mogelijk.
 *
 * Dat de blog met dit ene bestand kon volstaan, was de toets waarvoor de
 * huisstijl in twee lagen is opgezet. Er staat hier geen enkele kleurwaarde
 * en geen enkele lettersoort; alles gaat via de Bootstrap-variabelen die de
 * merklaag zet, dus deze site volgt vanzelf het lichte en het donkere thema.
 */

/* --- De kolom ------------------------------------------------------------
   66 tekens is de regellengte waarop lopende tekst het prettigst leest. Bij
   17px Spectral komt dat neer op ongeveer 34rem. In tekens begrensd en niet
   in een percentage: dezelfde 60% is op een laptop een halve regel en op een
   27-inch een dubbele, en het is de regellengte die begrensd moet worden. */

.kolom {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  /* 1.25rem en niet 72px: op een telefoon van 390px bleef daar bij Feeder
     246px tekst over, vier woorden per regel. */
  padding: 0 1.25rem;
}

.kolom-breed {
  max-width: 48rem;
}

/* --- De kop --------------------------------------------------------------
   Merkteken, naam en drie verwijzingen. Geen menu dat inklapt: drie items
   passen op elke breedte naast elkaar of eronder. */

.kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 1.5rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.kop .merk {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--bs-primary);
  text-decoration: none;
}

.kop .merkteken {
  display: block;
  width: 44px;
  height: auto;
}

.kop .woordmerk {
  font-family: var(--hs-font-label);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: var(--hs-label-spatie);
  text-transform: uppercase;
  color: var(--bs-body-color);
}

.kop-navigatie {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-family: var(--hs-font-label);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: var(--hs-label-spatie);
  text-transform: uppercase;
}

.kop-navigatie a {
  color: var(--bs-secondary-color);
  text-decoration: none;
}

.kop-navigatie a:hover,
.kop-navigatie a:focus-visible {
  color: var(--bs-body-color);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* --- Paginakoppen -------------------------------------------------------- */

main {
  padding: 2.5rem 0 4rem;
}

.paginakop {
  margin: 0 0 0.5rem;
}

.paginakop-bij {
  margin: 0 0 2.5rem;
  color: var(--bs-secondary-color);
}

/* --- Tags ---------------------------------------------------------------- */

.taglijst {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.tag {
  display: inline-block;
  padding: 0.15em 0.6em;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  font-family: var(--hs-font-label);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: var(--hs-label-spatie);
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  text-decoration: none;
}

.tag:hover,
.tag:focus-visible {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

.tag-actief {
  border-color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

.tag-klein {
  padding: 0.05em 0.45em;
  font-size: 0.6875rem;
}

.tagoverzicht {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tagoverzicht li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}

.tagoverzicht-aantal {
  color: var(--bs-secondary-color);
  font-size: 0.9375rem;
}

/* --- De artikellijst -----------------------------------------------------
   Titel, datum, tag, inleiding, 'Meer lezen'. Niets anders — geen
   afbeelding, geen leestijd, geen auteursregel. */

.artikellijst {
  margin: 0;
  padding: 0;
  list-style: none;
}

.artikellijst-item + .artikellijst-item {
  margin-top: 2.75rem;
  padding-top: 2.75rem;
  border-top: 1px solid var(--bs-border-color);
}

.artikellijst-titel {
  margin: 0 0 0.4rem;
  font-size: 1.5rem;
}

.artikellijst-titel a {
  color: var(--bs-heading-color);
  text-decoration: none;
}

.artikellijst-titel a:hover,
.artikellijst-titel a:focus-visible {
  color: var(--bs-primary);
}

.artikellijst-bij,
.artikel-bij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.9rem;
  font-family: var(--hs-font-label);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: var(--hs-label-spatie);
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.artikellijst-inleiding {
  margin: 0 0 0.75rem;
}

.artikellijst-meer {
  margin: 0;
  font-family: var(--hs-font-label);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: var(--hs-label-spatie);
}

.artikellijst-meer a {
  text-decoration: none;
}

.artikellijst-meer a:hover,
.artikellijst-meer a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.leeg {
  color: var(--bs-secondary-color);
  font-style: italic;
}

/* --- Het artikel zelf ---------------------------------------------------- */

.artikel-kop {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.artikel-kop h1 {
  margin: 0 0 0.6rem;
}

/* De inleiding staat ook op de overzichtspagina. Hier herhaalt hij zich dus,
   met opzet: wie via een zoekmachine binnenkomt heeft die pagina niet gezien,
   en de inleiding is wat het stuk aankondigt. Iets groter en lichter dan de
   lopende tekst, zodat het als aankondiging leest en niet als eerste alinea. */
.artikel-inleiding {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--bs-secondary-color);
}

.artikel-tekst > *:first-child {
  margin-top: 0;
}

.artikel-tekst h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.375rem;
}

.artikel-tekst h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.125rem;
}

.artikel-tekst p,
.artikel-tekst ul,
.artikel-tekst ol {
  margin: 0 0 1.15rem;
}

.artikel-tekst li + li {
  margin-top: 0.35rem;
}

.artikel-tekst blockquote {
  margin: 1.75rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--bs-primary);
  color: var(--bs-secondary-color);
  font-style: italic;
}

.artikel-tekst code {
  font-size: 0.9em;
}

.artikel-tekst pre {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.artikel-tekst hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--bs-border-color);
}

.artikel-terug {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bs-border-color);
  font-family: var(--hs-font-label);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: var(--hs-label-spatie);
}

.artikel-terug a {
  text-decoration: none;
}

/* --- De voet ------------------------------------------------------------- */

.voet {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 3rem;
  border-top: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}

.voet p {
  margin: 0 0 0.5rem;
}

.voet-fijn {
  font-size: 0.8125rem;
  max-width: 34rem;
}