/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
/* Ruimte onder laatste P-fix */
:where(body > *:not(header):not(footer) p:last-of-type) {
    margin-bottom: 1.2em;
}

/* Ruimte onder GB-columns fix */
:where(.wp-block-columns) {
    margin-bottom: 0px !important;
}

h1.wp-block-heading { font-size: var(--kop-l); font-weight:300; margin-bottom: var(--ruimte-xs); }
h2.wp-block-heading { font-size: var(--kop-l); font-weight:300; margin-bottom: var(--ruimte-xxs); }
h3.wp-block-heading { font-size: var(--kop-m); font-weight:300; }
h4.wp-block-heading { font-size: var(--kop-s); font-weight:300; }
h5.wp-block-heading { font-size: var(--tekst-m); }
h6.wp-block-heading { font-size: var(--tekst-s); }

.has-kopl-font-size { font-size: var(--kop-l) !important; margin-bottom: var(--ruimte-xs) !important; }
.has-kopm-font-size { font-size: var(--kop-m) !important; margin-bottom: var(--ruimte-xxs) !important; }
.has-kops-font-size { font-size: var(--kop-s) !important; }
.has-medium-font-size { font-size: var(--tekst-m) !important; }
.has-small-font-size { font-size: var(--tekst-s) !important; }


/* Kolommen gap in Gutenberg */
:root {
  --wp--preset--spacing--none: 0px;
  --wp--preset--spacing--small: var(--ruimte-s);
  --wp--preset--spacing--medium: var(--ruimte-m);
  --wp--preset--spacing--large: var(--ruimte-l);
  --wp--preset--spacing--extralarge: var(--ruimte-xl);
  --wp--preset--spacing--extraextralarge: var(--ruimte-xxl);  
}


/* Checlist met vinkje */
ul.wp-block-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

ul.wp-block-list li {
  position: relative;
  padding-left: 1.5em;
}

ul.wp-block-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.6em; /* iets lager dan eerder */
  width: 1.1em;
  height: 1.1em;
  color: #224A7F;  
  background-color: #E3CD65;
  border: 1px solid #E3CD65; /* extra ruimte rondom zonder het vinkje te vergroten */
  box-sizing: content-box;   /* belangrijk: zorgt dat border erbuiten valt */  
  font-size: 0.7em;
  font-weight: bold;
  line-height: 1.1em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Blauwe lijst */
ul.wp-block-list.list-blauw li::before {
  color: #E3CD65;  
  background-color: #224A7F;
  border: 1px solid #224A7F; /* extra ruimte rondom zonder het vinkje te vergroten */
  box-sizing: content-box;   /* belangrijk: zorgt dat border erbuiten valt */  
}
/* Blauwe lijst bij .is-geel-blok */
.is-geel-blok ul.wp-block-list li::before {
  color: #E3CD65;  
  background-color: #224A7F;
  border: 1px solid #224A7F; /* extra ruimte rondom zonder het vinkje te vergroten */
  box-sizing: content-box;   /* belangrijk: zorgt dat border erbuiten valt */  
}


/* Witte tekst bij .is-blauw-blok */
.is-blauw-blok .gbr-kolombreedte-tekst :not(.has-text-color):not(a),
.is-blauw-blok .gbr-kolombreedte-tekst *:not(.has-text-color):not(a) {
  color: #ffffff;
}
/* Heeft gele links */
.heeft-gele-links p a {
  color: var(--geel);
  text-decoration: underline;
}
.heeft-gele-links p a:hover {
  color: var(--geel-l1);
  text-decoration: underline;
}


.met-scheidingslijn > .wp-block-column:not(:last-child) {
  border-right: 1px solid #ccc;
  padding-right: 1em;
  margin-right: 1em;
}




/* GBR Positie afbeelding */
.gbr-positie-afbeelding-links {
  display: flex;
  flex-direction: row;
}

.gbr-positie-afbeelding-rechts {
  display: flex;
  flex-direction: row-reverse !important;
}

@media (max-width: 991px) {
  .gbr-positie-afbeelding-rechts {
    display: flex;
    flex-direction: column-reverse !important;
  }
}

/* GBR Breedte kolommen Afbeelding / Tekst */
/* 50/50 */
.gbr-breedte-afbeeldingtekst-50x50 .gbr-kolombreedte-afbeelding {
  width:50%;
}
.gbr-breedte-afbeeldingtekst-50x50 .gbr-kolombreedte-tekst {
  width:50%;
}
/* 60/40 */
.gbr-breedte-afbeeldingtekst-60x40 .gbr-kolombreedte-afbeelding {
  width:60%;
}
.gbr-breedte-afbeeldingtekst-60x40 .gbr-kolombreedte-tekst {
  width:40%;
}
/* 40/60 */
.gbr-breedte-afbeeldingtekst-40x60 .gbr-kolombreedte-afbeelding {
  width:40%;
}
.gbr-breedte-afbeeldingtekst-40x60 .gbr-kolombreedte-tekst {
  width:60%;
}
/* 75/25 */
.gbr-breedte-afbeeldingtekst-75x25 .gbr-kolombreedte-afbeelding {
  width:75%;
}
.gbr-breedte-afbeeldingtekst-75x25 .gbr-kolombreedte-tekst {
  width:25%;
}
/* 25/75 */
.gbr-breedte-afbeeldingtekst-25x75 .gbr-kolombreedte-afbeelding {
  width:25%;
}
.gbr-breedte-afbeeldingtekst-25x75 .gbr-kolombreedte-tekst {
  width:75%;
}


/* Foto aan onderkant laten uitsteken */
.gbr-overlappen-kleurvlak-ja .gbr-kolombreedte-tekst {
  padding-top: var(--ruimte-xxl);
  padding-bottom: var(--ruimte-xxl);
}
.gbr-overlappen-kleurvlak-ja .gbr-kolombreedte-afbeelding {
  margin-top: var(--ruimte-xxl);
}
.gbr-overlappen-kleurvlak-ja .gbr-kolombreedte-afbeelding img {
  margin-bottom: calc(-1 * var(--ruimte-xxl));
  z-index:1;
}
.gbr-overlappen-kleurvlak-ja {
  padding-top:0px !important;
  padding-bottom:0px !important;
}


/* Bug fix op mobiel voor opvulblok */
.opvulblok .brxe-container { width:100% !important; }

@media (max-width: 991px) {
.gbr-breedte-afbeeldingtekst-50x50 .gbr-kolombreedte-afbeelding { width:100%; }
.gbr-breedte-afbeeldingtekst-50x50 .gbr-kolombreedte-tekst { width:100%; }
.gbr-breedte-afbeeldingtekst-60x40 .gbr-kolombreedte-afbeelding { width:100%; }
.gbr-breedte-afbeeldingtekst-60x40 .gbr-kolombreedte-tekst { width:100%; }
.gbr-breedte-afbeeldingtekst-40x60 .gbr-kolombreedte-afbeelding { width:100%; }
.gbr-breedte-afbeeldingtekst-40x60 .gbr-kolombreedte-tekst { width:100%; }
.gbr-breedte-afbeeldingtekst-75x25 .gbr-kolombreedte-afbeelding { width:100%; }
.gbr-breedte-afbeeldingtekst-75x25 .gbr-kolombreedte-tekst { width:100%; }  
.gbr-breedte-afbeeldingtekst-25x75 .gbr-kolombreedte-afbeelding { width:100%; }
.gbr-breedte-afbeeldingtekst-25x75 .gbr-kolombreedte-tekst { width:100%; }    
/* Overlappen afbeelding */
.gbr-overlappen-kleurvlak-ja .gbr-kolombreedte-tekst { padding-top: var(--ruimte-xxl); padding-bottom: 0; }
.gbr-overlappen-kleurvlak-ja .gbr-kolombreedte-afbeelding { margin-top: 0; padding-bottom:var(--ruimte-xxl) !important; }    
.gbr-overlappen-kleurvlak-ja { padding-bottom:var(--ruimte-xxl) !important; /* Alleen ondrkant ivm verdwijnen tekst volgend blok */ }  
}




/* Figure in Gutenberg geen padding geven */
figure {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.wp-block-image, .wp-block-video, figcaption, figure {
    margin: 0;
}



/* Kolommen met strepen/zonder strepen */
.wp-block-columns {
  display: flex;
  gap: var(--ruimte-xl);
  flex-wrap: nowrap;
}

.wp-block-column {
  position: relative;
  padding-top: var(--ruimte-s);
  padding-bottom: var(--ruimte-s);
  padding-right: 0;
}

.wp-block-column::after,
.wp-block-column::before {
  content: none;
}


/* STREPEN: verticale lijnen op desktop */
.wp-block-columns.strepen .wp-block-column:not(:last-child) {
  padding-right: var(--ruimte-xl);
}

.wp-block-columns.strepen .wp-block-column:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: var(--blauw-l-2);
}


/* ===== MOBIEL ===== */
@media (max-width: 991px) {
  .wp-block-columns {
    flex-direction: column;
    gap: var(--ruimte-xl);
  }

  .wp-block-column {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
  }

  /* Geen lijnen op mobiel */
  .wp-block-column::after,
  .wp-block-column::before {
    display: none !important;
  }
}





/* Bug fix accordion FAQ + uitlijnen mobiel */
@media (max-width: 767px) {
  .accordion-title-wrapper {
    flex-wrap: nowrap;
    align-items: flex-start !important;
  }
}




/* Blok met blauwe bg en blad in Gutenberg */
.blauwe-bg-blad {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(https://westerduin.linkmastermonkey.com/wp-content/uploads/blad-blauwblok-1024x603.png);
  background-blend-mode: normal;
  background-color: var(--blauw);
  position: relative;
}

.blauwe-bg-blad::before {
    background-image: linear-gradient(rgba(34, 74, 127, 0.96), rgba(34, 74, 127, 0.96));
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}
/* Witte tekst bij .blauwe-bg-blad */
.blauwe-bg-blad :not(.has-text-color):not(a),
.blauwe-bg-blad *:not(.has-text-color):not(a) {
  color: #ffffff;
}


/* Bug fix kolommen buiten kader op breakpoint 767 */
.wp-block-columns {
  flex-wrap: nowrap !important;
}


/* Aanmelden-knop zichtbaar op 767 */
.show767 {
  display:none;
}
@media (max-width: 767px) {
  .show767 {
    display:block;
    }
}