/**
 * APS Photography : huisstijl voor vanilla-cookieconsent v3
 * Laden na vendor/cookieconsent/cookieconsent.css.
 */

#cc-main {
  --cc-font-family: 'Raleway', Arial, sans-serif;

  --cc-bg: #FFFFFF;
  --cc-primary-color: #1A1A2E;
  --cc-secondary-color: #555566;

  --cc-link-color: #CC1122;

  --cc-btn-primary-bg: #CC1122;
  --cc-btn-primary-color: #FFFFFF;
  --cc-btn-primary-border-color: #CC1122;
  --cc-btn-primary-hover-bg: #A50E1B;
  --cc-btn-primary-hover-color: #FFFFFF;
  --cc-btn-primary-hover-border-color: #A50E1B;

  --cc-btn-secondary-bg: #FFFFFF;
  --cc-btn-secondary-color: #CC1122;
  --cc-btn-secondary-border-color: #CC1122;
  --cc-btn-secondary-hover-bg: #CC1122;
  --cc-btn-secondary-hover-color: #FFFFFF;
  --cc-btn-secondary-hover-border-color: #CC1122;

  --cc-toggle-on-bg: #CC1122;
  --cc-toggle-off-bg: #888899;
  --cc-toggle-readonly-bg: #E2E2E8;
  --cc-toggle-readonly-knob-bg: #FFFFFF;

  --cc-cookie-category-block-bg: #F5F5F5;
  --cc-cookie-category-block-border: #E2E2E8;
  --cc-cookie-category-block-hover-bg: #F0F0F4;
  --cc-cookie-category-block-hover-border: #E2E2E8;
  --cc-cookie-category-expanded-block-bg: #FFFFFF;

  --cc-separator-border-color: #E2E2E8;
  --cc-footer-bg: #F5F5F5;
  --cc-footer-color: #555566;
  --cc-footer-border-color: #E2E2E8;
  --cc-overlay-bg: rgba(26, 26, 46, .65);

  --cc-btn-border-radius: 6px;
  --cc-modal-border-radius: 6px;
  --cc-pm-toggle-border-radius: 20px;
}

/* Titels in de serif van de site. */
#cc-main .cm__title,
#cc-main .pm__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  letter-spacing: .01em;
}

#cc-main .cm,
#cc-main .pm {
  box-shadow: 0 8px 40px rgba(26, 26, 46, .18);
}

/* Drie gelijkwaardige knoppen: zelfde vorm, zelfde gewicht, zelfde breedte.
   De library zet "Instellingen" in een aparte groep, waardoor die knop standaard
   een andere breedte krijgt. Wij laten de groepen vervallen en leggen de drie
   knoppen zelf in gelijke kolommen. */
#cc-main .cm__btns {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: .5rem;
}
#cc-main .cm__btn-group {
  display: contents;
}
#cc-main .cm__btn + .cm__btn,
#cc-main .cm--wide .cm__btn + .cm__btn,
#cc-main .cm--inline .cm__btn + .cm__btn,
#cc-main .cm__btn-group + .cm__btn-group,
#cc-main .cm--wide .cm__btn-group + .cm__btn-group {
  margin: 0;
}

/* De library geeft "Instellingen" standaard een lichter uiterlijk. Wij zetten de
   drie knoppen van de eerste laag bewust identiek, zodat accepteren, weigeren en
   instellingen even zwaar wegen. */
#cc-main .cm__btn,
#cc-main .cm__btn--secondary {
  background-color: var(--cc-btn-secondary-bg);
  color: var(--cc-btn-secondary-color);
  border-color: var(--cc-btn-secondary-border-color);
}
#cc-main .cm__btn:hover,
#cc-main .cm__btn--secondary:hover {
  background-color: var(--cc-btn-secondary-hover-bg);
  color: var(--cc-btn-secondary-hover-color);
  border-color: var(--cc-btn-secondary-hover-border-color);
}

#cc-main .cm__btn {
  padding: .85rem .6rem;
  font-family: 'Raleway', Arial, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  border-width: 1px;
  border-style: solid;
  transition: background-color .3s cubic-bezier(.4, 0, .2, 1),
              color .3s cubic-bezier(.4, 0, .2, 1);
}

#cc-main .pm__btn {
  font-family: 'Raleway', Arial, sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .8rem 1.25rem;
}

#cc-main .cm__desc,
#cc-main .pm__section-desc,
#cc-main .pm__section-desc-wrapper {
  line-height: 1.65;
}

#cc-main .pm__badge {
  background: rgba(204, 17, 34, .08);
  color: #CC1122;
  font-weight: 600;
}

@media (max-width: 640px) {
  #cc-main .cm__btns {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
}

/* Cookie-instellingen in de footer: zelfde uitzicht als de andere footerlinks. */
.footer-legal button.footer-legal-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.footer-legal button.footer-legal-btn:hover {
  color: #CC1122;
}