/*
 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: 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"]),
.brxe-post-content:not([data-source="bricks"]) ol {
    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 {
 clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%); 
}
.button--basis {
    background-image: url('/wp-content/uploads/icoon-pijl.webp');
    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 {
    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 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.05em;
}

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