/*
 * Typography — Indlu Yethemba Ministries
 * ----------------------------------------
 * De site staat op een donkere grond: bodytekst is crème, koppen zijn
 * Bricolage Grotesque, citaten en accenten Instrument Serif cursief.
 */

/* ----------------------------------------
 * BASIS
 * ---------------------------------------- */

body {
  font-family:              var(--font-body);
  font-size:                var(--text-base);
  font-weight:              var(--font-regular);
  line-height:              var(--leading-relaxed);
  color:                    var(--color-text-body);
  background-color:         var(--color-ink);
  -webkit-font-smoothing:   antialiased;
  overflow-x:               hidden;
}

/* ----------------------------------------
 * KOPPEN
 * ---------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-display);
  color:          var(--color-text-heading);
  line-height:    var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight:    var(--font-extrabold);
  margin-bottom:  var(--space-4);
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-heading-s); }
h3 { font-size: var(--text-chapter); }
h4 { font-size: var(--text-xl); }

/* Cursieve inzet binnen een kop, bijvoorbeeld "Huis van hoop." */
.it {
  font-family:  var(--font-serif);
  font-style:   italic;
  font-weight:  var(--font-regular);
  color:        var(--color-sun);
}

/* ----------------------------------------
 * BODYTEKST
 * ---------------------------------------- */

p {
  font-size:      var(--text-base);
  font-weight:    var(--font-regular);
  line-height:    var(--leading-relaxed);
  color:          var(--color-text-body);
  margin-bottom:  var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------
 * LINKS
 * ---------------------------------------- */

a {
  color:            inherit;
  text-decoration:  none;
  transition:       color var(--transition-fast);
}

a:hover {
  color: var(--color-sun);
}

/* ----------------------------------------
 * TOEGANKELIJKHEID
 * ---------------------------------------- */

.screen-reader-text {
  position:     absolute;
  width:        1px;
  height:       1px;
  padding:      0;
  overflow:     hidden;
  clip:         rect(1px, 1px, 1px, 1px);
  white-space:  nowrap;
  border:       0;
}

.skip-link:focus {
  position:           fixed;
  top:                var(--space-4);
  left:               var(--space-4);
  z-index:            999;
  width:              auto;
  height:             auto;
  clip:               auto;
  padding:            var(--space-3) var(--space-5);
  background:         var(--color-sun);
  color:              var(--color-ink);
  font-weight:        var(--font-bold);
  border-radius:      var(--radius-pill);
}