/**
 * Site Design System — Starter Template
 *
 * 1. Fonts & Base
 * 2. Custom Utilities
 * 3. Back to top
 * 4. Module styles (FAQ, sliders, news)
 */


/* ==========================================================================
   1. Fonts & Base
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --color-primary: #c45d3e;
  --color-primary-dark: #a34a2f;
  --color-secondary: #78716c;
  --color-light: #faf9f6;
  --color-dark: #1c1917;
  --font-color: #292524;
  --color-surface: #f5f0eb;
}

html, body {
  margin: 0;
  padding: 0;
  color: var(--font-color);
  font-family: 'Outfit', sans-serif;
}

h1, h2, h3, .h1, .h2, .h3 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
}

img {
  max-width: 100%;
}

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dark); }


/* ==========================================================================
   2. Custom Utilities
   ========================================================================== */

.img-cover {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.taalswitcher { float: right; }
.taalswitcher a.active { cursor: default; opacity: 0.7; }


/* ==========================================================================
   3. Back to top
   ========================================================================== */

#back-to-top {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  z-index: 9999;
  width: 2rem;
  height: 2rem;
  text-align: center;
  background: #fff;
  color: #444;
  cursor: pointer;
  text-decoration: none;
  display: none;
  align-items: center;
  justify-content: center;
}

#back-to-top.show {
  display: flex;
}


/* ==========================================================================
   4. Module styles
   ========================================================================== */

/* FAQ */
.faq-title {
  transition: transform .35s;
}
.faq-title::after {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: .75rem;
  text-rendering: auto;
  content: "\f078";
  margin-right: .75rem;
}
.faq-title[aria-expanded="true"] {
  transform: scale(1.025);
}
.faq-title[aria-expanded="true"]::after {
  content: "\f077";
}

/* Foto slider */
.slick-list { margin: 0 !important; }
.slick-next, .slick-prev { z-index: 100; }
#slider .slide { position: relative; }
#slider .slide, #slider .slide a { color: white; }
#slider .slide img { width: 100%; }
#slider .slide .slide-caption {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  width: 100%;
  background: rgba(0,0,0,.5);
}

/* Foto slider basic */
#slider_basic .slide { padding: 0 10px; }
#slider_basic .slide, #slider_basic .slide a { color: white; }
#slider_basic .slide img { width: 100%; }
#slider_basic .slide h2, #slider_basic .slide p { position: absolute; max-width: 100%; }
#slider_basic .slide h2 { bottom: 15%; left: 2%; font-size: 36px; }
#slider_basic .slide p { bottom: 8%; left: 2%; font-weight: 600; }

.slick-dots {
  display: flex;
  justify-content: center;
  padding: 0;
  list-style: none;
  margin: 1.5rem 0 0;
}
.slick-dots li { padding: 0 .25rem; }
.slick-dots button {
  cursor: pointer;
  color: #b8b9ba;
  background: none;
  border: none;
  padding: .125rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  transition: color .25s ease-in-out;
}
.slick-dots button:focus { outline: 0; box-shadow: none; }
.slick-dots li.slick-active button { color: #58595a; }

/* Nieuws */
.nieuws-jaar-heading,
.nieuws-maand-heading {
  border-radius: .25rem;
  transition: background .15s;
}
.nieuws-jaar-heading:hover, .nieuws-jaar-heading:focus,
.nieuws-maand-heading:hover, .nieuws-maand-heading:focus {
  background: rgba(0,0,0,.025);
}
.nieuws-link { transition: transform .15s; }
.nieuws-link:hover:not(.disabled),
.nieuws-link:focus:not(.disabled) {
  transform: translateX(.25rem);
}