/*
 * @author Rijk van Zanten <rijkvanzanten@me.com> (https://rijks.website)
 * @date 08-06-2019
 * @toc
 * - Globals
 * – Bulma Overrides
 * - Groep / Discipline colors
 * - Components
 * - Pages
 */

/* Globals
 * ============================================================================================== */
dl {
  margin-bottom: 1rem;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 1rem;
}

fieldset + fieldset {
  margin-top: 3rem;
}

legend {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

h1, h2, h3, h4, h5, .title {
  font-family: "Roboto Slab", sans-serif;
}

template {
  display: none;
}
/* ============================================================================================== */


/* Bulma Overrides
 * ============================================================================================== */
@media screen and (min-width: 1024px) {
  .navbar {
    min-height: 5rem;
  }
}

.menu-list a {
  color: hsl(0, 0%, 71%);
}

.card, .button {
  border-radius: 8px;
  overflow: hidden;
}

.box.has-image {
  padding: 0;
  overflow: hidden;
}

.image.has-blur-background {
  overflow: hidden;
}

.image.has-blur-background img:first-child {
  transform: scale(2);
  filter: blur(20px) saturate(2);
}

.image.has-blur-background img:last-child {
  object-fit: contain;
}
/* ============================================================================================== */


/* Groep / Discipline colors
 * ============================================================================================== */
.has-text-groep-1 { color: #F44335 !important; }
.has-text-groep-2 { color: #E91E63 !important; }
.has-text-groep-3 { color: #9C27B0 !important; }
.has-text-groep-4 { color: #673AB7 !important; }
.has-text-groep-5 { color: #3F51B5 !important; }
.has-text-groep-6 { color: #2196F3 !important; }
.has-text-groep-7 { color: #00BCD4 !important; }
.has-text-groep-8 { color: #009688 !important; }
.has-text-leerkracht { color: #607D8B !important; }
.has-background-groep-1 { background-color: #F44335 !important; }
.has-background-groep-2 { background-color: #E91E63 !important; }
.has-background-groep-3 { background-color: #9C27B0 !important; }
.has-background-groep-4 { background-color: #673AB7 !important; }
.has-background-groep-5 { background-color: #3F51B5 !important; }
.has-background-groep-6 { background-color: #2196F3 !important; }
.has-background-groep-7 { background-color: #00BCD4 !important; }
.has-background-groep-8 { background-color: #009688 !important; }
.has-background-leerkracht { background-color: #607D8B !important; color: #fff !important; }
.has-hover-groep-1:hover { background-color: #F44335 !important; color: #fff !important; }
.has-hover-groep-2:hover { background-color: #E91E63 !important; color: #fff !important; }
.has-hover-groep-3:hover { background-color: #9C27B0 !important; color: #fff !important; }
.has-hover-groep-4:hover { background-color: #673AB7 !important; color: #fff !important; }
.has-hover-groep-5:hover { background-color: #3F51B5 !important; color: #fff !important; }
.has-hover-groep-6:hover { background-color: #2196F3 !important; color: #fff !important; }
.has-hover-groep-7:hover { background-color: #00BCD4 !important; color: #fff !important; }
.has-hover-groep-8:hover { background-color: #009688 !important; color: #fff !important; }
.has-hover-leerkracht:hover { background-color: #607D8B !important; color: #fff !important; }

.has-text-beeldend { color: #2196F3 !important; }
.has-text-dans { color: #FFC105 !important; }
.has-text-drama { color: #4CAF4F !important; }
.has-text-erfgoed { color: #F44335 !important; }
.has-text-muziek { color: #673AB7 !important; }
.has-text-media { color: #FFEB3A !important; }
.has-text-taal { color: #E91E63 !important; }
.has-background-beeldend { background-color: #2196F3 !important; }
.has-background-dans { background-color: #FFC105 !important; }
.has-background-drama { background-color: #4CAF4F !important; }
.has-background-erfgoed { background-color: #F44335 !important; }
.has-background-muziek { background-color: #673AB7 !important; }
.has-background-media { background-color: #FFEB3A !important; }
.has-background-taal { background-color: #E91E63 !important; }
.has-hover-beeldend:hover { background-color: #2196F3 !important; color: #fff !important; }
.has-hover-dans:hover { background-color: #FFC105 !important; color: #fff !important; }
.has-hover-drama:hover { background-color: #4CAF4F !important; color: #fff !important; }
.has-hover-erfgoed:hover { background-color: #F44335 !important; color: #fff !important; }
.has-hover-muziek:hover { background-color: #673AB7 !important; color: #fff !important; }
.has-hover-media:hover { background-color: #FFEB3A !important; color: #fff !important; }
.has-hover-taal:hover { background-color: #E91E63 !important; color: #fff !important; }
/* ============================================================================================== */


/* Components
 * ============================================================================================== */
.header-art {
  width: 100%;
  height: 24vw;
  background: linear-gradient(135deg, #FFDC57 25%, transparent 25%) -12px 0,
    linear-gradient(225deg, #FFDC57 25%, transparent 25%) -12px 0,
    linear-gradient(315deg, #FFDC57 25%, transparent 25%),
    linear-gradient(45deg, #FFDC57 25%, transparent 25%);
  background-size: 25px 25px !important;
  background-color: #FFF68D;
  max-height: 260px;
}

.card > .item-code {
  position: absolute;
  top: 0;
  right: 0;
  background-color: white;
  z-index: 5;
  padding: 0 8px;
  border-bottom-left-radius: 8px;
  border-left: 1px solid #d4d4d4;
  border-bottom: 1px solid #d4d4d4;
}

.card-discipline {
  display: flex;
  height: 6px;
}

.card-discipline span {
  flex-grow: 1;
}
/* ============================================================================================== */

/* Page Specifics
 * ============================================================================================== */
.index .columns {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.aanbod .columns {
  align-items: flex-start;
}

.aanbod-items {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 32px;
  align-items: flex-start;
}

@media (min-width: 769px) {
  .aanbod-items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .aanbod-items {
    grid-template-columns: repeat(3, 1fr);
  }
}

.aanbod-filter label {
  display: block;
  margin-bottom: 0.2rem;
}

.aanbod-filter fieldset {
  margin: 1rem 0;
}

.aanbod-tags {
  display: grid;
  gap: 8px;
}

.adressenlijst .logo {
  height: 6rem;
  margin-bottom: 1rem;
  object-fit: contain;
  max-width: 90%;
}

.adressenlijst .column {
  margin-bottom: 3rem;
}

.jaarverslagen small {
  margin-right: 1rem;
}

/* Inschrijven */
.activiteit-item {
  margin-bottom: 2rem;
}

#add {
  margin-bottom: 2rem;
}

.formulieren small {
  margin-right: 1rem;
}
/* ============================================================================================== */