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

/* Bricks reset */
/* 1. Globaal alle onderstrepingen uitzetten */
a:where(:not(.wp-element-button)) {
    text-decoration: none !important;
}
footer a:hover {
    text-decoration: underline !important;
}

/* ============================================
   FRONTEND: Uitschakelen Back-to-top
   ============================================ */
.brxe-back-to-top { display:none !important; }


/* 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:100rem;
}

/* 4. Lijsten */
.brxe-post-content:not([data-source="bricks"]) ul,
.brxe-post-content:not([data-source="bricks"]) ol {
    margin: 0 0 1.5em 1.5em; /* onder + inspringing */
    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-m) !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;
}



/* 2. Alleen in paragrafen weer onderstrepen */
p a {
    text-decoration: underline;
}

/* Topmenu */
@media only screen and (max-width: 768px) {
  .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: -55px;
}

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

.container--scrollen.is-scrolled {
  padding-top: var(--ruimte-s);
  padding-bottom: var(--ruimte-s);
}

@media (max-width: 768px) {

  /* standaard toestand → GEEN transition */
  .positie--mobilemenu-scrollen.brxe-nav-nested.brx-open .brx-nav-nested-items {
    top: 5.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;
  }
}






/* Zoekbalk */
#brxe-yhiykh .x-search-form {
    height: 5.5rem;
}

/* MegaMenu */
.menu-vet { font-weight: 700; }

/* Menu-item is de 'anker' */
/* Menu-item als referentie */
.dropdown-megamenu {
  position: relative;
}

/* Basis: pijl bestaat, maar is onzichtbaar, lager en ZONDER transition */
.dropdown-megamenu::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;

  transform: translate(-50%, 25px); /* start lager */
  opacity: 0;

  border-width: 0 40px 40px 40px;
  border-style: solid;
  border-color: transparent transparent var(--bg-rood-1) transparent;

  pointer-events: none;
  z-index: 9999;

  /* belangrijk: geen animatie in de basisstaat */
  transition: none;
}

/* Als het menu "open" is → pijl verschijnt, beweegt omhoog én krijgt transition + delay */
.dropdown-megamenu.open::after {
  opacity: 1;
  transform: translate(-50%, 14px);

  /* hier zetten we de animatie + delay */
  transition:
    opacity 0.15s ease 0.06s,
    transform 0.15s ease 0.06s;
}


@media only screen and (max-width: 768px) {
  /* Mobiel menu */
  .brxe-nav-nested.brx-open .brx-submenu-toggle,
  header ul > li.menu-item {
      padding: var(--ruimte-m);
  }
  .mm-block__nav-menu ul > li.menu-item,
  ul.topmenu__nav-items > li.menu-item{
      padding: 0;
  }
  
  .dropdown-megamenu::after,
  .dropdown-megamenu.open::after {
    display:none;
  }

  /* Basis: alle carets neutraal */
  .brx-submenu-toggle svg {
    transform: rotate(0deg);
    transition: transform 0.25s ease;
  }

  /* Alleen hoofditems met megamenu én open → caret draaien */
  li.dropdown-megamenu.open .brx-submenu-toggle svg {
    transform: rotate(180deg);
  }
}


@media only screen and (max-width: 580px) {
  .menu--offerte-button { display:none !important; }
}



/* Footer */
.footerkolom__tekst a {
  text-decoration:none;
}
.footerkolom__tekst a:hover {
  text-decoration:underline;
  color:var(--paars-donker);
}




/* HEADINGS */
h1.wp-block-heading { font-size: var(--kop-xxl); line-height:1.1; margin-bottom:0; }
h2.wp-block-heading { font-size: var(--kop-xl); line-height:1.1; margin-bottom:0.6em; }
h3.wp-block-heading { font-size: var(--kop-l); line-height:1.1; margin-bottom:0.4em; }
h4.wp-block-heading { font-size: var(--kop-m); line-height:1.1; margin-bottom:0.3em; }
h5.wp-block-heading { font-size: var(--kop-s); line-height:1.1; margin-bottom:0.2em; }
h6.wp-block-heading { font-size: var(--kop-xs); line-height:1.1; margin-bottom:0.1em; }

/* HEADINGS GESTYLED VIA GUTENBERG */
/* ========== PRESET STYLING VOOR GUTENBERG HEADING GROOTTES ========== */

/* Kop XS */
.has-kop-xs-font-size {
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.1em !important;
}

/* Kop S */
.has-kop-s-font-size {
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.2em !important;
}

/* Kop M */
.has-kop-m-font-size {
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.3em !important;
}

/* Kop L */
.has-kop-l-font-size {
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.4em !important;
}

/* Kop XL */
.has-kop-xl-font-size {
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 0.6em !important;
}

/* Kop XXL */
.has-kop-xxl-font-size {
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 0.8em !important;
}



/* ================================
   Automatische gap tussen buttons
   ================================ */
.button--section {
    margin-right: var(--ruimte-s);
    margin-top: var(--ruimte-l);
    margin-bottom: var(--ruimte-m);
}

/* Optioneel: laatste knop in een rij zonder extra marge */
.button--section:last-child {
    margin-right: 0;
}

.button-basis::after {
    content: "›";
    margin-left: -0.2em;
    display: inline-flex;
    align-items: center;
    transform: translateY(0px); /* optionele mini-fix */
    transition: transform .25s ease, opacity .25s ease;
}
.button-basis:hover::after {
    content: "›";
    margin-left: -0.2em;
    display: inline-flex;
    align-items: center;
    transform: translateX(2px); /* optionele mini-fix */
}

.button-icoon,
.button-icoon:hover {
    display: inline-flex; /* of flex */
    flex-direction: row-reverse; /* draait de volgorde om */
    align-items: center;
    gap: 0.5em; /* optioneel: ruimte tussen icon en tekst */
}
.button-icoon::after,
.button-icoon:hover::after {
    content: "›";
    margin-left: -1em;
    display: inline-flex;
    align-items: center;
    opacity:0;
}


/* ================================================
   Gutenberg media radius — applies to all media
   ================================================ */
.wp-block img,
.wp-block figure img,
.wp-block-image img,
.wp-block-media-text__media img,
.wp-block-video video,
.wp-block-embed iframe,
.wp-block-gallery img,
.wp-block-gallery figure,
.wp-block-cover img,
.wp-block-cover video {
    border-radius: var(--radius-s);
    overflow: hidden;
}

/* ============================================
   EDITOR: Links in P en Headings paars
   ============================================ */
.brxe-post-content p a,
h1.wp-block-heading a,
h2.wp-block-heading a,
h3.wp-block-heading a,
h4.wp-block-heading a,
h5.wp-block-heading a,
h6.wp-block-heading a {
    color: var(--groen-donker) !important;
    text-decoration: underline !important;
}

.brxe-post-content p a:hover,
h1.wp-block-heading a:hover,
h2.wp-block-heading a:hover,
h3.wp-block-heading a:hover,
h4.wp-block-heading a:hover,
h5.wp-block-heading a:hover,
h6.wp-block-heading a:hover {
    color: var(--paars-donker) !important;
}


/* ============================================
   FRONTEND: Wisselende achtergrondkleur
   ============================================ */
/* Frontend */
.bg-container.bg-container--odd {
    background-color: #fff;
}
.bg-container.bg-container--even {
    background-color: var(--bg-rood-1);
}
.bg-container.bg-container--even .has-rood-color {
    color: var(--rood-donker) !important;
}

/* ============================================
   FRONTEND: Gap kolommen
   ============================================ */
/* Frontend */
.wp-block-columns.is-layout-flex {
    gap: var(--ruimte-xxl) !important;
}

/* ============================================
   FRONTEND: Geen marge onder kolommen
   ============================================ */
:where(.wp-block-columns) {
    margin-bottom: 0px !important;
}