/*
 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
*/

/* ============================================
   FRONTEND: Fix voor witrand rechts van full align blokken.
   ============================================ */
@media only screen and (max-width: 991px) {
  .alignfull,.wp-block-categories-list.alignfull {
      left: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      max-width: calc(100vw - 0em) !important; /* =FIX LMM */
      position: relative;
      right: 50%;
      width: 100vw
  }
}
/* ============================================
   FRONTEND: Marges
   ============================================ */
/* 1. Bricks vertical rhythm UIT voor Gutenberg-content
   (maar laat WooCommerce & Bricks-text met rust) */
.brxe-post-content:not([data-source="bricks"]) * + * {
    margin-block-start: 0 !important;
}

/* 2. Basis reset voor Gutenberg content in Bricks */
.brxe-post-content:not([data-source="bricks"]) {
    /* optioneel, als je dit niet al ergens anders doet */
    line-height: 1.6;
}

/* 3. Paragrafen & standaard tekstblokken */
.brxe-post-content:not([data-source="bricks"]) p,
.brxe-post-content:not([data-source="bricks"]) .wp-block-paragraph {
    margin: 0 0 1.5em;
    max-width:85rem;
}

/* 4. Lijsten */
.brxe-post-content:not([data-source="bricks"]) 
    ul:not([class*="splide__pagination"]):not(.wp-block-list), 
.brxe-post-content:not([data-source="bricks"]) 
    ol:not(.wp-block-list) {
    margin: 0 0 1.5em 1.5em;
    padding: 0;
}

.brxe-post-content:not([data-source="bricks"]) li > ul,
.brxe-post-content:not([data-source="bricks"]) li > ol {
    margin-top: 0.5em; /* iets ruimte tussen geneste lijsten */
}

/* 6. Blockquotes, pre, code-blokken */
.brxe-post-content:not([data-source="bricks"]) blockquote {
    margin: 2rem 0;
}

.brxe-post-content:not([data-source="bricks"]) pre,
.brxe-post-content:not([data-source="bricks"]) .wp-block-code {
    margin: 1.5rem 0;
}

/* 7. Laatste element in de content geen extra onderruimte */
.brxe-post-content:not([data-source="bricks"]) > *:last-child {
    margin-bottom: 0;
}


/* ================================
   IMAGE / FIGURE BLOCK SPACING FIX
   ================================ */

/* Frontend / Bricks contentgebied */
.brxe-post-content .wp-block-image,
.brxe-post-content figure.wp-block-image {
    margin-top: 0 !important;
    margin-bottom: var(--ruimte-s) !important;
}

/* Laatste image-block in content → geen marge onder */
.brxe-post-content .wp-block-image:last-child,
.brxe-post-content figure.wp-block-image:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================
   UNIVERSELE BLOCK SPACING
   Frontend + Gutenberg Editor
   ----------------------------------------------------------
   - Elk Gutenberg-block: geen marge boven
   - Elk Gutenberg-block: marge onder var(--ruimte-m)
   - Laatste block: marge onder = 0
   ========================================================== */

/* Paragrafen in Gutenberg-content via Bricks */

.brxe-post-content:not([data-source="bricks"]) p:last-child,
.brxe-post-content:not([data-source="bricks"]) .wp-block-paragraph:last-child {
    margin-bottom: 0 !important;
}
.wp-block-image, .wp-block-video, figure[class^=wp-block-] {
    margin: 0;
}

/* 1. BASIS — ALLE BLOKKEN */
.wp-block {
    margin-top: 0 !important;
    margin-bottom: var(--ruimte-m) !important;
}

/* 2. LAATSTE BLOCK IN EEN CONTAINER → GEEN ONDERMARGE */
.wp-block:last-child,
figure:last-child,
.button--section:last-child {
    margin-bottom: 0 !important;  
}

/* 3. NESTED BLOCKS (bijv. columns, groups, covers) */
.wp-block:last-child,
.wp-block > .wp-block:last-child,
.wp-block-group > .wp-block:last-child,
.wp-block-column > .wp-block:last-child,
.wp-block-cover > .wp-block:last-child,
.wp-block-media-text__content > .wp-block:last-child,
.brxe-gb-inner-blocks > .button--section:last-child {
    margin-bottom: 0 !important;
}



/* ============================================
   FRONTEND: Bricks back to top
   ============================================ */
.brxe-back-to-top.visible {
  opacity: 0 !important;
  display: none !important;
  visibility: hidden !important;
}

/* ============================================
   FRONTEND: Force footer naar bottom
   ============================================ */
.brx-body {
  min-height:100vh;
  min-height:100dvh;
}

/* ============================================
   FRONTEND: Hoofdmenu
   ============================================ */
.hoofdmenu .menu-item-has-children div a {
  padding-right:0px !important;
}
.hoofdmenu li {
  height:100%;
}
@media only screen and (max-width: 767px) {
  .hoofdmenu li {
    height:auto;
  }
}
.hoofdmenu ul {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}
.hoofdmenu ul li {
    padding-left: 0 !important;
}
.hoofdmenu ul.sub-menu {
  margin-top:1px !important;
}

/* ============================================
   FRONTEND: Hamburgermenu
   ============================================ */
.hoofdmenu .bricks-mobile-menu-toggle { 
  width: 44px; /* totale breedte hamburger */ 
  padding: 8px 0; /* we houden hem strak */ 
  flex-direction: column; 
  gap: 8px; 
  margin-top:-1rem;
} 
/* De balkjes */ 
.hoofdmenu .bricks-mobile-menu-toggle span { 
  display: block; 
  width: 100%; /* balk wordt net zo breed als de button */ 
  height: 4px; /* dikte van de balkjes */ 
  background: currentColor; /* gebruikt de kleur van het element */ 
  border-radius: 0px; 
}

/* ============================================
   FRONTEND: Topmenu
   ============================================ */
@media only screen and (max-width: 767px) {
  .topmenu__nav-link span.text { display:none; }
}

/* Header verschuiven bij scrollen */
/* Header omhoog schuiven */
header {
  position: fixed;        /* deze had je al werkend */
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transition: top 0.3s ease;
}

/* Na scroll (100px): header 55px omhoog */
header.header--up {
  top: -45px;
}

/* Container padding aanpassen bij scroll */
.container--scrollen {
  transition: padding 0.3s ease;
}



@media (max-width: 768px) {

  /* standaard toestand → GEEN transition */
  .positie--mobilemenu-scrollen.brxe-nav-nested.brx-open .brx-nav-nested-items {
    top: 4.5rem;
    width: auto;
    transition: none; /* <— belangrijk */
  }

  /* tijdens scroll → wél nette animatie */
  .is-scrolled .brx-nav-nested-items {
    top: 0 !important;
    transition: top 0.3s ease;
  }
}

/* ============================================
   FRONTEND: Button
   ============================================ */
.button--basis,
.forminator-button-submit {
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%); 
    background-image: url('/wp-content/uploads/icoon-pijl.webp') !important;
    background-repeat: no-repeat;
    background-size: 16px 10px;

    /* huidige positie */
    background-position-x: calc(100% - 2rem);
    background-position-y: calc(50% + 0px);

    /* animatie smooth */
    transition: background-position-x 0.2s ease;
}

/* bij hover 2px verder naar rechts */
.button--basis:hover,
.forminator-button-submit:hover {
    background-position-x: calc(100% - 2rem + 2px);
}




/* ============================================
   FRONTEND: Zoekbalk
   ============================================ */
.x-search-form {
    height: 4.5rem;
}


/* ============================================
   FOOTER
   ============================================ */
footer .privacybalk--menu ul {
    margin-left: 0;
    padding-left: 0;
    list-style-position: inside;
    margin-block-start: 0;
    margin-block-end: 0 !important;
}
footer .privacybalk--menu a:hover,
footer .privacybalk--tekst a:hover {
    opacity:0.85;
}

footer .footer__tekst h3 {
  color:#ffffff;
  font-size:var(--tekst-m);
}
footer .footer__tekst a {
  text-decoration:none;
}
footer .footer__tekst a:hover {
  opacity:0.85;
}



/* ==========================================================
   FRONTEND — STANDAARD KOPGROOTTES
   ========================================================== */

#brx-content h1.wp-block-heading {
  font-size: var(--kop-xxl);
  line-height: 1.1;
  margin-bottom: 0.5em;
  font-weight: 700;
  color:var(--dblauw);
}

#brx-content h2.wp-block-heading {
  font-size: var(--kop-xl);
  line-height: 1.1;
  margin-bottom: 0.5em;
  font-weight: 800;
  color:var(--blauw);
}

#brx-content h3.wp-block-heading {
  font-size: var(--kop-m);
  line-height: 1.1;
  margin-bottom: 0.3em;
  font-weight: 800;
  color:var(--dblauw);
  font-family: "Funnel Sans";
}

#brx-content h4.wp-block-heading {
  font-size: var(--kop-m);
  line-height: 1.1;
  margin-bottom: 0.2em;
  font-weight: 800;
  color:var(--dblauw);
  font-family: "Funnel Sans";
}

#brx-content h5.wp-block-heading {
  font-size: var(--kop-s);
  line-height: 1.1;
  margin-bottom: 0.1em;
  font-weight: 800;
  color:var(--dblauw);
  font-family: "Funnel Sans";
}

#brx-content h6.wp-block-heading {
  font-size: var(--kop-xs);
  line-height: 1.1;
  margin-bottom: 0;
  font-weight: 800;
  color:var(--dblauw);
  font-family: "Funnel Sans";
}

/* ==========================================================
   FRONTEND — PRESETS (Kop XS → XXL)
   ========================================================== */

#brx-content .has-kop-xs-font-size {
  font-size: var(--kop-xs) !important;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 0;
}

#brx-content .has-kop-s-font-size {
  font-size: var(--kop-s) !important;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 0.1em;
}

#brx-content .has-kop-m-font-size {
  font-size: var(--kop-m) !important;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 0.2em;
}

#brx-content .has-kop-l-font-size {
  font-size: var(--kop-l) !important;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 0.3em;
}

#brx-content .has-kop-xl-font-size {
  font-size: var(--kop-xl) !important;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 0.4em;
}

#brx-content .has-kop-xxl-font-size {
  font-size: var(--kop-xxl) !important;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 0.5em;
}

/* ==========================================================
   FRONTEND — Punt achter alle koppen binnen #brx-content
   ========================================================== */
/*#brx-content .gekleurdblok--section h1::after,
#brx-content .gekleurdblok--section h2::after,
#brx-content .gekleurdblok--section h3::after,
#brx-content .gekleurdblok--section h4::after,
#brx-content .gekleurdblok--section h5::after,
#brx-content .gekleurdblok--section h6::after,
#brx-content h1.wp-block-heading::after,
#brx-content h2.wp-block-heading::after,
/*#brx-content h3.wp-block-heading::after,
#brx-content h4.wp-block-heading::after,
#brx-content h5.wp-block-heading::after,
#brx-content h6.wp-block-heading::after,*/
/*#brx-content .has-kop-xs-font-size::after,
#brx-content .has-kop-s-font-size::after,
#brx-content .has-kop-m-font-size::after,
#brx-content .has-kop-l-font-size::after,
#brx-content .has-kop-xl-font-size::after,
#brx-content .has-kop-xxl-font-size::after {
  content: ".";
  margin-left: 0.02em;
}*/

.geen-punt::after {
  content: "" !important;
  margin-left: 0 !important;
}

/* ==========================================================
   FRONTEND — SmashBalloon Instagram Feed
   ========================================================== */
#sbi_load { display: none !important; }
.sbi_feedtheme_title_wrapper h3 { color:var(--dblauw); font-size: var(--kop-m) !important; }


/* ==========================================================
   FRONTEND — Losse Payoff
   ========================================================== */
.losse_payoff {
    color: var(--dblauw);
}

.losse_payoff span {
    color: var(--geel); /* of welke kleur de span moet hebben */
}


/* ==========================================================
   FRONTEND — Blauwe vinkjes bij opsommingen
   ========================================================== */
.brxe-post-content ul.wp-block-list li::after {
    content: none !important;
    background: none !important;
}
/* Geen standaard bullets + geen extra inspringing */
.brxe-post-content ul.wp-block-list {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

/* Tekst netjes uitlijnen met icoon */
.brxe-post-content ul.wp-block-list li {
    position: relative;
    margin-left: 0;
    padding-left: 1.8rem;   /* ruimte voor het vinkje */
    text-indent: 0;
}

/* Jouw vinkje (voorbeeld met SVG-achtergrond) */
.brxe-post-content ul.wp-block-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    width: 1.1rem;
    height: 1.1rem;

    background-image: url("/wp-content/uploads/vinkje-v2.svg"); /* jouw URL */
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
}

/* Vinkje Blauw voor gekleurde blokken */
.brxe-post-content  .gekleurdblok--section ul.wp-block-list li::before {
    background-image: url("/wp-content/uploads/vinkje-blauw.svg"); /* jouw URL */
}


/* ==========================================================
   FEATURES — Gutenbricks
   ========================================================== */
.achtergrondkleur--grijs-licht { background-color: var(--grijs-licht); }
.achtergrondkleur--wit { background-color: var(--grijs-wit); }

 /* GLOBALCLASS: DESKTOP BREED */
.section--fotostreep-links .fotostreep--strepen { position: absolute; top: 2rem; left: -6rem; }
.section--fotostreep-rechts .fotostreep--strepen { position: absolute; top: 2rem; right: -6.7rem; }

.section--fotostreep-links .container--foto-tekst { flex-direction: row-reverse !important; }
.section--fotostreep-rechts .container--foto-tekst { flex-direction: row !important; }

/* GLOBALCLASS: DESKTOP SMAL */
@media (max-width: 1279px) {
  .section--fotostreep-links .fotostreep--strepen { top: -2rem; left: 2rem; width: 9rem; position: absolute; }
  .section--fotostreep-rechts .fotostreep--strepen { top: -2rem; right: 1rem; width: 9rem; position: absolute; }
}

/* GLOBALCLASS: TABLET PORTRET */
@media (max-width: 991px) {
  .section--fotostreep-links .fotostreep--strepen { width: 8rem; }
  .section--fotostreep-rechts .fotostreep--strepen { width: 8rem; }  
}
/* GLOBALCLASS: MOBILE */
@media (max-width: 767px) {
  .section--fotostreep-links .container--foto-tekst { flex-direction: column-reverse !important; }
  .section--fotostreep-rechts .container--foto-tekst { flex-direction: column !important; }
}


/* ==========================================================
   FRONTEND - Linebreak 0px hoog aan voorkant
   ========================================================== */
.section--linebreak { height:0px !important; opacity:0 !important; }

/* ==========================================================
   FRONTEND - Geen border-top bij elke volgende accordion
   ========================================================== */
.gbr-accordion + .gbr-accordion {
    border-top: none !important;
}



/* ==========================================================
   FRONTEND - Forminator Forms
   ========================================================== */
.forminator-title { 
  font-size: var(--kop-m) !important;
  line-height: 1.1 !important;
  margin-bottom: 0.3em !important;
  font-weight: 800 !important;
  color: var(--dblauw) !important;
  font-family: "Funnel Sans" !important;
  margin-bottom:-1rem !important;
  padding-top:3rem !important;
}

.forminator-label {
  color: var(--dblauw) !important;
  font-size: var(--tekst-m) !important;
  text-align: left !important;
  text-transform: none !important;
  font-family: "Funnel Sans" !important;
  font-weight: 400 !important; 
  padding-bottom:0.7rem !important;
}

.forminator-input {
  color: var(--dblauw) !important;
  font-size: var(--tekst-m) !important;
  text-align: left !important;
  text-transform: none !important;
  background-color: var(--wit) !important;
  border: 1px solid var(--dblauw) !important;
  border-radius: 0.8rem !important;
}

.forminator-error-message {
   border-radius: 0.8rem !important;
   font-size:1.6rem !important;
}
.forminator-success p {
  font-size:1.6rem !important;
}

.forminator-textarea {
  color: var(--dblauw) !important;
  font-size: var(--tekst-m) !important;
  text-align: left !important;
  text-transform: none !important;
  background-color: var(--wit) !important;
  border: 1px solid var(--dblauw) !important;
  border-radius: 0.8rem !important; 
}

.forminator-select {
  color: var(--dblauw) !important;
  font-size: var(--tekst-m) !important;
  text-align: left !important;
  text-transform: none !important;
  color: var(--dblauw) !important;
  background-color: var(--wit) !important;
  border: 1px solid var(--dblauw) !important;
  border-radius: 0.8rem !important; 
  padding:2px 0 !important;
}

.forminator-design--flat .forminator-select2 + .forminator-select .selection .select2-selection--single[role="combobox"] {
  background-color: rgba(255,255,255, 0) !important;
}

.select2-selection__placeholder { color:#8299b6 !important; }

/* Extra CSS voor button, zie ook CSS basis-button */
.forminator-button-submit {
  text-decoration: none !important;
  font-size: 1.8rem !important;
  padding-top: 7px !important;
  padding-right: 4.5rem !important;
  padding-bottom: 9px !important;
  padding-left:2rem !important;
  transition: 0.3s !important;
  font-weight:700 !important;
}
.forminator-button-submit:hover {
  background-color:#f5eba8 !important;
  transition: 0.3s !important;
}
@media (max-width: 782px) {
    .forminator-ui.forminator-custom-form[data-design=flat] .forminator-button {
        width: auto !important;
    }
}


.forminator-radio .forminator-radio-bullet {
    border-width: 1px !important;
    border-style: solid !important;
    border-color:var(--dblauw) !important;
}
.forminator-ui#forminator-module-986.forminator-design--flat .forminator-radio {
    font-size: var(--tekst-m) !important;
}
.forminator-description {
    font-size: var(--tekst-s) !important;
}
.form-html-hoogte {
  height:0.01rem;
}
.forminator-repeater-label {
  display:none !important;
}


/* ============================================
   FRONTEND: Vacatures
   ============================================ */
ul.vacature-overzicht-opsomming {
  margin:0 !important;
}
ul.vacature-overzicht-opsomming li {
    text-indent: 0.25em !important;
}
@media (max-width: 767px) {
   ul.vacature-overzicht-opsomming li {
      text-indent: 0 !important;
  } 
}
.vacature-overzicht-opsomming.brxe-list .content .icon svg {
    margin-top: 0.5em;
    width:1.6rem;
    height:1.6rem;
}
.vacature--accordion-tekst ul li::after {
    content: none !important;
    background: none !important;
}
/* Geen standaard bullets + geen extra inspringing */
.vacature--accordion-tekst ul {
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Tekst netjes uitlijnen met icoon */
.vacature--accordion-tekst ul li {
    position: relative !important;
    margin-left: 0 !important;
    padding-left: 3rem !important;   /* ruimte voor het vinkje */
    text-indent: 0 !important;
}
/* Jouw vinkje (voorbeeld met SVG-achtergrond) */
.vacature--accordion-tekst ul li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.4em !important;
    width: 1.6rem !important;
    height: 1.6rem !important;

    background-image: url("/wp-content/uploads/vinkje-v2.svg") !important; /* jouw URL */
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: left center !important;
}
@media (max-width: 767px) {
  .vacature--titel {
    overflow-wrap: anywhere;
  }
}
/* Pijlt fix op mobiel */
.accordion-title-wrapper h3 { max-width:80%; }