/* your styles go here */
/* Example site test */

/* Achtergrond: perkament-achtig of kasteel */
body {
    /*background-color: #f5e6cc;*/ /* Perkamentkleur */
    background-image: url('/images/parchment.jpg'); /* Voeg een afbeelding toe */
    background-repeat: repeat;
    background-attachment: fixed;
    color: #3c2f2f; /* Donkerbruine tekst */
    font-family: 'Cinzel', 'Grenze', 'Uncial Antiqua', serif; /* Gotische font */
}

/* Headers in gotische stijl */
h1, h2, h3, h4 {
    font-family: 'Cinzel', 'Grenze', 'Uncial Antiqua', serif;
    color: #8b0000; /* Donkerrood */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    letter-spacing: 2px;
}

/* Decoratieve borders zoals manuscripten */
.article, .post {
    border: 10px solid transparent;
    border-image: url('/images/border-medieval.png') 30 round; /* Optionele decoratieve border */
    padding: 20px;
    background: rgba(255, 255, 240, 0.8); /* Licht ivoor overlay */
}

/* Navigatie middeleeuws maken */
nav {
    background-color: #4a2c2a;
    border-bottom: 5px solid gold;
}


.box-image-text .image {
    min-height: 190px;
    max-height: 190px;
}

.box-image-text .image img {
    max-height: 190px;
    margin: auto;
}

.box-simple {
    min-height: 230px;
}
.home-carousel {
    position: relative;
    background: url(../../img/ricardo-cruz-P8LZaU52NME-unsplash.jpg) center center repeat;
    background-size: cover;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.home-carousel .dark-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.bar.background-image-fixed-2 {
    background: url(../../img/tyson-moultrie-qT_ZkTOsjKI-unsplash.jpg) center top no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

#heading-breadcrumbs {
    /*background: url(../../img/texture-bw.jpg) center center repeat;*/
    background: url(../../img/ricardo-cruz-P8LZaU52NME-unsplash.jpg) center bottom repeat;
    padding: 20px 0;
    margin-bottom: 40px;
}

#heading-breadcrumbs h1 {
    color: #fff;
}


.calendar-year {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  text-align: center;
}
.calendar-year header {
  width: 100%;
}

.calendar-month {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  list-style-type: none;
  padding: 0px;
  text-align: center;
  width: calc(100% / 4);
  margin: 20px;
}
.calendar-month header {
  width: 100%;
}

.calendar-weekdays {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  text-align: center;
  width: 100%;
}
.calendar-weekdays li {
  width: calc(100% / 7);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 40px;
  font-size: 10px;
  opacity: 0.6;
}
.calendar-weekdays li.calendar-weekday-sat, .calendar-weekdays li.calendar-weekday-sun {
  opacity: 1;
}

.calendar-days {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  text-align: center;
}
.calendar-days li {
  width: calc(100% / 7);
}

.calendar-day {
  line-height: 30px;
  font-size: 11.1111111111px;
  text-align: center;
}
.calendar-day.calendar-day-future {
  opacity: 0.4;
}
.calendar-day.calendar-day-has-articles {
  color: #ffffff;
  position: relative;
}
.calendar-day.calendar-day-has-articles::before {
  content: "";
  width: 22px;
  height: 22px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #467fbf;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 50%;
}
.calendar-day.calendar-day-has-articles a {
  color: #ffffff;
}
.calendar-day.calendar-day-has-articles a em {
  display: none;
}
.calendar-day.calendar-day-is-today {
  position: relative;
  font-weight: 800;
  color: #467fbf;
}
.calendar-day.calendar-day-is-today::before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2px solid #467fbf;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 50%;
}