/*
Theme Name: Sancti Child
Template: sancti-theme
Version: 1.0
*/

/* Gebruik van de variabelen in de rest van de CSS */
body {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  background-color: var(--background-color);
  margin: 0;
}

h1 {
  font-family: var(--h1-font-family);
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  line-height: var(--h1-line-height);
  text-transform: var(--h1-text-transform);
  margin: 0;
}

h2 {
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  text-transform: var(--h2-text-transform);
  margin: 0;
}

h3 {
  font-family: var(--h3-font-family);
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
  text-transform: var(--h3-text-transform);
  margin: 0;
}

h4 {
  font-family: var(--h4-font-family);
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  text-transform: var(--h4-text-transform);
  color: var(--text-color);
  margin: 0;
}

/* Voeg hier andere CSS regels toe voor H3, H4, enzovoort */

button {
  background-color: var(--primary-color);
  color: var(--text-color);
  border: 1px solid var(--primary-color);
  font-family: var(--body-font-family);
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  color: var(--text-color);
  text-decoration: underline;
}

/* General */
:where(.wp-site-blocks) > * {
  margin: 0;
}

.block-editor-block-list__layout.is-root-container
  > :where(:not(.alignleft):not(.alignright):not(.alignfull)):not(.cta-block) {
  max-width: 1440px !important;
}

/* WooCommerce meldingen netjes onder elkaar */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  border-top: 4px solid var(--secondary-color);
  background-color: var(--beige-color);
  color: var(--secondary-color);
  line-height: 2rem;
}

.woocommerce .woocommerce-message .button {
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  background-color: var(--button-3-background-color);
  color: var(--button-3-color);
}

.woocommerce-message::before {
  content: '✔️ ';
  margin-right: 8px;
}