/* ==========================================================================
   
   VARS
   
   ========================================================================== */

/* ---------------------------------------------------
   Font vars
   ------------------------------------------------ */
:root {
  --text-dark-muted-h: 215;
  --text-dark-muted-s: 16%;
  --text-dark-muted-l: 47%;
  --text-dark-muted-a: 1;
  --text-dark-muted: hsl(var(--text-dark-muted-h) var(--text-dark-muted-s) var(--text-dark-muted-l) / var(--text-dark-muted-a));
  --text-dark-muted-weight: 600; /* of 600, 400, whatever */

  --text-light-muted-h: 220;
  --text-light-muted-s: 13%;
  --text-light-muted-l: 91%;
  --text-light-muted-a: 1;
  --text-light-muted: hsl(var(--text-light-muted-h) var(--text-light-muted-s) var(--text-light-muted-l) / var(--text-light-muted-a));
  --text-light-muted-weight: 600; /* of 600, 400, whatever */
}

/* ---------------------------------------------------
   Link vars
   ------------------------------------------------ */
:root {
  --link-color: var(--accent, #7b61ff);
  --link-underline-color: var(--link-color);
  --link-underline-thickness: 2px;
  --link-underline-offset: 0.12em;
  --link-underline-speed: 260ms;
  --link-underline-ease: cubic-bezier(.2,.7,.2,1);
  --link-dot-size: 2px;
  --link-dot-gap: 6px;
  --link-focus-outline: 3px solid color-mix(in srgb, var(--link-color) 40%, black 60%);
  --link-focus-offset: 4px;
  --link-scale-hover: 1.06;
}

/* ---------------------------------------------------
   Background vars
   ------------------------------------------------ */
:root{
  /* kleurcomponenten voor bl-bg-ultra-light (gegeven waarden) */
  --bl-bg-ultra-light-h: 220;
  --bl-bg-ultra-light-s: 13%;
  --bl-bg-ultra-light-l: 98%;
  --bl-bg-ultra-light-a: 1;
  --bl-bg-light-h: 216;
  --bl-bg-light-s: 6%;
  --bl-bg-light-l: 90%;
  --bl-bg-light-a: 1; /*was 0.3 */
  --bl-accent-56-h: 86;
  --bl-accent-56-s: 77%;
  --bl-accent-56-l: 56%;
  --bl-accent-56-a: 1;
  --bl-accent-ultra-dark-h: 132;
  --bl-accent-ultra-dark-s: 11%;
  --bl-accent-ultra-dark-l: 15%;
  --bl-accent-ultra-dark-a: 1;

  /* samengestelde kleurvariabele (modern syntax met slash voor alpha) */
  --bl-bg-ultra-light: hsl(var(--bl-bg-ultra-light-h) var(--bl-bg-ultra-light-s) var(--bl-bg-ultra-light-l) / var(--bl-bg-ultra-light-a));
  --bl-bg-light: hsl(var(--bl-bg-light-h) var(--bl-bg-light-s) var(--bl-bg-light-l) / var(--bl-bg-light-a));
  --bl-accent-56: hsl(var(--bl-accent-56-h) var(--bl-accent-56-s) var(--bl-accent-56-l) / var(--bl-accent-56-a));
  --bl-accent-ultra-dark: hsl(var(--bl-accent-ultra-dark-h) var(--bl-accent-ultra-dark-s) var(--bl-accent-ultra-dark-l) / var(--bl-accent-ultra-dark-a));
}

/* ---------------------------------------------------
   Taxonomy pill button vars
   ------------------------------------------------ */
ul.bl-pill,
.brxe-post-taxonomy.bl-pill { /* extra selector voor Bricks' naming */
  /* default tokenwaarden, per-UL te overschrijven */
  --pill-bg: var(--neutral-ultra-light, hsl(0 0% 96%));
  --pill-bg-hover: var(--accent-light, hsl(140 60% 70%));
  --pill-color: var(--text-dark);
  --pill-color-hover: var(--text-dark);
  --btn-height: 24px;
  --pill-padding-block: var(--space-xs);
  --pill-padding-inline: var(--space-xs);
}
/* Modifier classes op de UL (aanbevolen voor consistente palettes) */
ul.bl-pill.bl-pill--accent {
  --pill-bg: var(--accent-light);
  --pill-bg-hover: var(--accent);
  --pill-color: var(--accent-contrast, #fff);
}
ul.bl-pill.bl-pill--muted {
  --pill-bg: var(--neutral-ultra-light);
  --pill-bg-hover: hsl(220 6% 84%);
  --pill-color: #222;
}

/* ---------------------------------------------------
   Workflow duration pill button vars
   ------------------------------------------------ */
:root{
  --pill-duration-padding-block: .18rem;
  --pill-duration-padding-inline: .6rem;
  --pill-duration-font-size: .875rem;
  --pill-duration-line-height: 1;
  --pill-duration-min-height: 28px;
  --pill-duration-border-width: 1px;
  --pill-duration-border: rgba(0,0,0,.06);

  /* basis palette (fallback) */
  --pill-duration-bg: #f1f3f4;
  --pill-duration-color: #1f2933;
}


/* ---------------------------------------------------
   Space vars
   ------------------------------------------------ */
:root{
  /* kleurcomponenten voor bl-bg-ultra-light (gegeven waarden) */
  --bl-space-xs: 0.5rem;
  --bl-space-s: 1rem;
  --bl-space-m: 1.5rem;
  --bl-space-l: 2rem;
}

/* ---------------------------------------------------
   Dark mode var overrides
   ------------------------------------------------ */
/* html.color-scheme--alt {
  --text-light-orig: var(--text-light);
  --text-light-muted-orig: var(--text-light-muted);
  --dv-text-light: var(--text-light-muted);
  --text-dark-orig: var(--text-dark);
  --text-dark-muted-orig: var(--text-dark-muted);
  --dv--text-dark: var(--text-light);
  --dv--text-dark: var(--text-light);
} */


/* ==========================================================================
   
   UTILITY CLASSES
   
   ========================================================================== */

/* font */
.bl-section-lede {
  color: var(--text-dark-muted);
  font-weight: var(--text-dark-muted-weight);
}
.bl-section-lede-light {
  color: var(--text-light-muted);
  font-weight: var(--text-light-muted-weight);
}

/* background classes */
.bl-bg-ultra-light {
  background-color: var(--bl-bg-ultra-light);
}
.bl-bg-light {
  background-color: var(--bl-bg-light);
}

.bl-bg-gradient-linear-accent {
    background-image: linear-gradient(135deg, var(--accent), var(--bl-accent-56));
}
.bl-bg-gradient-linear-accent-light {
    background-image: linear-gradient(135deg, var(--bl-bg-ultra-light), var(--bl-bg-light));
}
.bl-bg-gradient-linear-accent-dark {
    background-image: linear-gradient(135deg, var(--bl-accent-ultra-dark),hsl(var(--bl-accent-ultra-dark-h) var(--bl-accent-ultra-dark-s) 18% / 1));
}

.bl-bg-gradient-radial-accent-light {
  /* fallback solid with low opacity */
  background-color: rgba(129,208,27, 0.02); /* pas rgb/alpha aan naar je primary */
  /* en daarna de gradient (modern browsers gebruiken gradient boven) */
  background-image: radial-gradient(circle at 50% 50%, rgba(129,208,27,0.1), transparent 30%);
}
.bl-bg-gradient-radial-accent-dark {
  background-color: hsl(var(--bl-accent-ultra-dark-h) var(--bl-accent-ultra-dark-s) var(--bl-accent-ultra-dark-l) / 1);
  background-image: radial-gradient(
    circle at 50% 50%,
    hsl(var(--bl-accent-ultra-dark-h) var(--bl-accent-ultra-dark-s) var(--bl-accent-ultra-dark-l) / 0.1),
    transparent 70%
  );
}

/* ---------------------------------------------------
   Utility: Animated gradient + icon overlay
   ------------------------------------------------ */
.bl-bg-gradient-animated{
  --icons-url: url('/wp-content/uploads/2025/08/SoMe-icons.svg');
  --icons-opacity: .05;

  /* Light palette */
  --bl-color-1: #ee7752;
  --bl-color-2: #e73c7e;
  --bl-color-3: #23a6d5;
  --bl-color-4: #23d5ab;

  --bl-angle: -45deg;
  --bl-speed: 30s;

  /* zelfde blending als light mode houden */
  --bl-blend-mode: overlay;
  --bl-gradient-opacity: 1;

  position: relative;
  isolation: isolate;
}

/* Dark mode kleuren */
.color-scheme--alt .bl-bg-gradient-animated{
  --bl-color-1: #923521;
  --bl-color-2: #711439;
  --bl-color-3: #135774;
  --bl-color-4: #126b56;
}

/* Icons-laag */
.bl-bg-gradient-animated::after{
  content:"";
  position:absolute; inset:0;
  background-image: var(--icons-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--icons-opacity);
  pointer-events:none;
  z-index:0;
}

/* Gradient-laag */
.bl-bg-gradient-animated::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(var(--bl-angle),
              var(--bl-color-1), var(--bl-color-2),
              var(--bl-color-3), var(--bl-color-4));
  background-size: 400% 400%;
  animation: bl-gradient var(--bl-speed) ease-out infinite;

  mix-blend-mode: var(--bl-blend-mode);
  opacity: var(--bl-gradient-opacity);

  pointer-events:none;
  z-index:1;
}

/* Content boven de lagen */
.bl-bg-gradient-animated > *{ position: relative; z-index: 2; }

@keyframes bl-gradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

@media (prefers-reduced-motion: reduce){
  .bl-bg-gradient-animated::before{ animation:none; }
}


/* ==========================================================================
   
   GLOBAL STYLES
   - self-explanatory
   
   ========================================================================== */

/* ========================================================================== */
/* === BUILDER TWEAKS ======================================================= */
/* ========================================================================== */

.bricks-draggable-item.is-active-element, [data-id][data-script-id].is-active-element {
  outline: 3px solid red !important;
}

/* ========================================================================== */
/* === DARK MODE TWEAKS ===================================================== */
/* ========================================================================== */

/* All headers */
/* html.color-scheme--alt h1,
html.color-scheme--alt h2,
html.color-scheme--alt h3,
html.color-scheme--alt h4,
html.color-scheme--alt h5,
html.color-scheme--alt h6,
html.color-scheme--alt .h1,
html.color-scheme--alt .h2,
html.color-scheme--alt .h3,
html.color-scheme--alt .h4,
html.color-scheme--alt .h5,
html.color-scheme--alt .h6,
html.color-scheme--alt .h--1,
html.color-scheme--alt .h--2,
html.color-scheme--alt .h--3,
html.color-scheme--alt .h--4,
html.color-scheme--alt .h--5,
html.color-scheme--alt .h--6 {
  color: var(--dv--text-dark);
}

/* home hero title */
html.color-scheme--alt body.home section.bm-hero-38 h1 {
  color: var(--text-light-orig);
} */

/* button alpha icon */
/* html.color-scheme--alt .fr-icon-button-alpha--dark.fr-icon-button-alpha--dark.fr-icon-button-alpha--dark {
  color: var(--text-dark-orig);
  --icon-color: var(--text-dark-orig);
} */

/* html.color-scheme--alt .fr-icon-button-alpha {
  --icon-color: var(--text-light);
} */

/* ========================================================================== */
/* === LINK STYLE =========================================================== */
/* ========================================================================== */

/* ---------------------------------------------------
   Alleen content-links in <main>, GEEN buttons/badges
   ------------------------------------------------ */
main a[href]
  :not([role="button"])
  :not(.btn)
  :not([class*="btn"])
  :not(.button)
  :not([class*="button"])
  :not(.bricks-button) { /* <— extra uitsluiting */
  color: var(--link-color);
  position: relative;
  text-decoration: none;
  -webkit-text-decoration-skip: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -------------------------------------
   Animated dotted underline via ::after
   ---------------------------------- */
main a[href]
  :not([role="button"])
  :not(.btn)
  :not([class*="btn"])
  :not(.button)
  :not([class*="button"])
  :not(.bricks-button)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--link-underline-offset));
  height: var(--link-underline-thickness);
  pointer-events: none;

  transform-origin: left center;
  transform: scaleX(0);
  transition:
    transform var(--link-underline-speed) var(--link-underline-ease),
    opacity calc(var(--link-underline-speed) / 1.4) var(--link-underline-ease);
  opacity: 0;

  background-image: repeating-linear-gradient(
    90deg,
    var(--link-underline-color) 0,
    var(--link-underline-color) var(--link-dot-size),
    transparent var(--link-dot-size),
    transparent calc(var(--link-dot-size) + var(--link-dot-gap))
  );
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-size: auto 100%;
  will-change: transform, opacity;
}

/* show underline on hover/focus/active */
main a[href]
  :not([role="button"])
  :not(.btn)
  :not([class*="btn"])
  :not(.button)
  :not([class*="button"])
  :not(.bricks-button):hover::after,
main a[href]
  :not([role="button"])
  :not(.btn)
  :not([class*="btn"])
  :not(.button)
  :not([class*="button"])
  :not(.bricks-button):focus::after,
main a[href]
  :not([role="button"])
  :not(.btn)
  :not([class*="btn"])
  :not(.button)
  :not([class*="button"])
  :not(.bricks-button).active::after {
  transform: scaleX(1);
  opacity: 1;
}

/* keyboard focus */
main a[href]
  :not([role="button"])
  :not(.btn)
  :not([class*="btn"])
  :not(.button)
  :not([class*="button"])
  :not(.bricks-button):focus {
  outline: none;
}
main a[href]
  :not([role="button"])
  :not(.btn)
  :not([class*="btn"])
  :not(.button)
  :not([class*="button"])
  :not(.bricks-button):focus-visible {
  outline: var(--link-focus-outline);
  outline-offset: var(--link-focus-offset);
  color: var(--link-color);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  main a[href]
    :not([role="button"])
    :not(.btn)
    :not([class*="btn"])
    :not(.button)
    :not([class*="button"])
    :not(.bricks-button)::after {
    transition: none;
    transform: scaleX(1);
    opacity: 1;
  }
}

/* Fallback for older browsers */
@supports not (background-image: repeating-linear-gradient(90deg, black 0, black 1px, transparent 1px)) {
  main a[href]
    :not([role="button"])
    :not(.btn)
    :not([class*="btn"])
    :not(.button)
    :not([class*="button"])
    :not(.bricks-button) {
    text-decoration: none;
    border-bottom: var(--link-underline-thickness) dotted var(--link-underline-color);
    padding-bottom: 0.06em;
  }
  main a[href]
    :not([role="button"])
    :not(.btn)
    :not([class*="btn"])
    :not(.button)
    :not([class*="button"])
    :not(.bricks-button)::after {
    display: none;
  }
  main a[href]
    :not([role="button"])
    :not(.btn)
    :not([class*="btn"])
    :not(.button)
    :not([class*="button"])
    :not(.bricks-button):hover,
  main a[href]
    :not([role="button"])
    :not(.btn)
    :not([class*="btn"])
    :not(.button)
    :not([class*="button"])
    :not(.bricks-button):focus {
    border-bottom-color: color-mix(in srgb, var(--link-underline-color) 80%, black 20%);
  }
}

/* ---------------------------------------------------
   EXCLUSIONS: taxonomy badges (geen dotted underline)
   ------------------------------------------------ */

/* Taxonomy component: target UL container en bricks-badges */
main .brxe-post-taxonomy.category a[href],
main .brxe-post-taxonomy a.bricks-button {
  text-decoration: none;
  position: relative;
}

/* Kill pseudo-underline binnen taxonomy/badges */
main .brxe-post-taxonomy.category a[href]::after,
main .brxe-post-taxonomy a.bricks-button::after {
  content: none !important;
}

/* Optioneel: ook hover/focus expliciet clean houden */
main .brxe-post-taxonomy.category a[href]:hover::after,
main .brxe-post-taxonomy.category a[href]:focus::after,
main .brxe-post-taxonomy a.bricks-button:hover::after,
main .brxe-post-taxonomy a.bricks-button:focus::after {
  content: none !important;
}

/* ----------------------------------------------------------
   Link colours inside offcanvas (behaviour blijft hetzelfde)
   ------------------------------------------------------- */

.x-offcanvas_inner.x-offcanvas_left.x-offcanvas_ready {
  --off-link-color: var(--text-dark, #222);
  --off-link-hover: var(--accent, #666);
}

/* Offcanvas: stijl links (los van de content-link regels) */
.x-offcanvas_inner.x-offcanvas_left.x-offcanvas_ready a[href] {
  color: var(--off-link-color);
}

/* Onderstreep-pseudo kleur in offcanvas */
.x-offcanvas_inner.x-offcanvas_left.x-offcanvas_ready a[href]::after {
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--off-link-color) 0,
      var(--off-link-color) var(--link-dot-size, 2px),
      transparent var(--link-dot-size, 2px),
      transparent calc(var(--link-dot-size, 2px) + var(--link-dot-gap, 6px))
    ) !important;
}

/* hover / focus in offcanvas */
.x-offcanvas_inner.x-offcanvas_left.x-offcanvas_ready a[href]:hover,
.x-offcanvas_inner.x-offcanvas_left.x-offcanvas_ready a[href]:focus {
  color: var(--off-link-hover);
}
.x-offcanvas_inner.x-offcanvas_left.x-offcanvas_ready a[href]:hover::after,
.x-offcanvas_inner.x-offcanvas_left.x-offcanvas_ready a[href]:focus::after {
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--off-link-hover) 0,
      var(--off-link-hover) var(--link-dot-size, 2px),
      transparent var(--link-dot-size, 2px),
      transparent calc(var(--link-dot-size, 2px) + var(--link-dot-gap, 6px))
    ) !important;
  transform: scaleX(1);
  opacity: 1;
}

/* Focus zichtbaar houden in offcanvas */
.x-offcanvas_inner.x-offcanvas_left.x-offcanvas_ready a[href]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--off-link-color) 25%, black 75%);
  outline-offset: 4px;
}

/* Reduced motion respect in offcanvas */
@media (prefers-reduced-motion: reduce){
  .x-offcanvas_inner.x-offcanvas_left.x-offcanvas_ready a[href]::after{
    transition: none;
    transform: scaleX(1);
    opacity: 1;
  }
}

/* ========================================================================== */
/* === TAXONOMY PILLS ======================================================= */
/* ========================================================================== */

/* styling target: li > a.bricks-button */
ul.bl-pill li > a.bricks-button,
.brxe-post-taxonomy.bl-pill li > a.bricks-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pill-padding-block) var(--pill-padding-inline);
  height: var(--btn-height);
  min-height: var(--btn-height);
  line-height: 1;
  box-sizing: border-box;
  border-radius: 9999px;
  background-color: var(--pill-bg);
  color: var(--pill-color);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
  will-change: background-color, color;
  overflow: hidden;
}

/* hover / focus */
ul.bl-pill li > a.bricks-button:hover,
ul.bl-pill li > a.bricks-button:focus-visible,
.brxe-post-taxonomy.bl-pill li > a.bricks-button:hover,
.brxe-post-taxonomy.bl-pill li > a.bricks-button:focus-visible {
  background-color: var(--pill-bg-hover);
  color: var(--pill-color-hover);
}

/* Optional: meer specifieke selector als iets jouw rules overschrijft */
/* gebruik alleen als je merkt dat andere styles het blijft overrulen */
/*
ul.bl-pill li > a.bricks-button {
  background-color: var(--pill-bg) !important;
  transition: background-color 0.3s ease !important;
}
*/

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  ul.bl-pill li > a.bricks-button {
    transition: none !important;
    will-change: auto;
  }
}

/* ========================================================================== */
/* === WORKFLOW DURATION PILLS ============================================== */
/* ========================================================================== */
/* Base: container met __meta--pill + data-duration, value met __meta-value */
[class*="__meta--pill"][data-duration] [class*="__meta-value"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pill-duration-padding-block) var(--pill-duration-padding-inline);
  font-size: var(--pill-duration-font-size);
  line-height: var(--pill-duration-line-height);
  min-height: var(--pill-duration-min-height);
  box-sizing: border-box;
  white-space: nowrap;
  border-radius: 9999px;
  user-select: none;
  cursor: default;
  transition: background-color .22s, color .22s, transform .12s;

  /* variant via afgeleide vars; geen clash met taxonomy pills */
  background-color: var(--pill-duration-surface, var(--pill-duration-bg));
  color: var(--pill-duration-text, var(--pill-duration-color));
  border: var(--pill-duration-border-width) solid var(--pill-duration-outline, var(--pill-duration-border, transparent));
}

[class*="__meta--pill"][data-duration] [class*="__meta-value"]:hover,
[class*="__meta--pill"][data-duration] [class*="__meta-value"]:focus {
  /* transform: translateY(-1px); */
}

@media (prefers-reduced-motion: reduce) {
  [class*="__meta--pill"][data-duration] [class*="__meta-value"] {
    transition: none;
    transform: none;
  }
}

/* Groottevarianten (optioneel) */
[class*="__meta--pill"].is-sm {
  --pill-duration-font-size: .8rem;
  --pill-duration-padding-block: .12rem;
  --pill-duration-padding-inline: .45rem;
  --pill-duration-min-height: 22px;
}

[class*="__meta--pill"].is-lg {
  --pill-duration-font-size: 1rem;
  --pill-duration-padding-block: .3rem;
  --pill-duration-padding-inline: .8rem;
  --pill-duration-min-height: 32px;
}

/* ===== Kleurmapping op basis van data-duration ===== */
[class*="__meta--pill"][data-duration="1-2 weken"] {
  --pill-duration-bg: #fff;
  --pill-duration-color:  #1f8a46;
  --pill-duration-border: #1f8a46;
}

[class*="__meta--pill"][data-duration="2-3 weken"] {
  --pill-duration-bg: #fff;
  --pill-duration-color: #8b4011;
  --pill-duration-border: #8b4011;
}

[class*="__meta--pill"][data-duration="3-4 weken"] {
  --pill-duration-bg: #fff;
  --pill-duration-color: #b97709;
  --pill-duration-border: #b97709;
}

[class*="__meta--pill"][data-duration="4-6 weken"] {
  --pill-duration-bg: #fff;
  --pill-duration-color: #640aca;
  --pill-duration-border: #640aca;
}

[class*="__meta--pill"][data-duration="5-7 weken"] {
  --pill-duration-bg:  #fff;
  --pill-duration-color: #be1000;
  --pill-duration-border: #be1000;
}

/* ===========================================================================
   
   SEARCH
   - in header & /search
   
   =========================================================================== */

/* -------------------------------
   overlay bij live search results
   ---------------------------- */
/* Search overlay die verschijnt wanneer de search button actief is */
.x-header-search_toggle-open[aria-expanded="true"] ~ .x-search-form::before,
.x-header-search_toggle-open[aria-expanded="true"] ~ * .x-search-form::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998; /* Zorg dat het onder de search form maar boven de rest zit */
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Alternatieve methode als de bovenstaande CSS selector niet werkt door de DOM structuur */
body.search-overlay::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Zorg ervoor dat de search form boven de overlay komt */
.x-search-form {
    position: relative;
    z-index: 999;
}

/* Optioneel: voorkom scrollen wanneer overlay actief is */
body.search-overlay {
    overflow: hidden;
}

/* Smooth transition voor de overlay */
.x-search-form::before {
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}
.x-search-form > div.brxe-container {
    z-index: 999;
}



/* ===========================================================================
   
   FILTERS
   - on /workflows, /blog, /taxonomoy-term
   
   =========================================================================== */

/* ------------------------------
   Hide/show active filters label
   --------------------------- */

/* Verberg het label standaard */
.bl-filter-block__active-filter-container .bl-filter-block__label,
.bl-filter-block__active-filter-container .brxe-text-basic.bl-filter-block__label {
  display: none;
  visibility: hidden;
}

/* Toon label als er één of meer li's in de active-filters UL staan */
.bl-filter-block__active-filter-container:has(.brxe-filter-active-filters li)
  .bl-filter-block__label,
.bl-filter-block__active-filter-container:has(.brxe-filter-active-filters li)
  .brxe-text-basic.bl-filter-block__label {
  display: inline-block;
  visibility: visible;
}

/* -------------------------------
   Close button for active filters
   ------------------------------- */

/* Variabele voor icoongrootte */
ul.brxe-filter-active-filters {
  --close-size: 22px; /* tweak naar smaak */
  --close-gap: 10px;  /* ruimte tussen icoon en rechterrand */
}

/* Zorg dat li geen clipping veroorzaakt */
ul.brxe-filter-active-filters li {
  overflow: visible !important;
  box-sizing: border-box;
}

/* De 'pill' knop: ruimte vrijmaken rechts voor het icoon */
ul.brxe-filter-active-filters .bricks-button.circle {
  position: relative;                      /* context voor ::after */
  padding-right: calc(var(--close-size) + var(--close-gap) + 8px);
  overflow: visible;                        /* just in case */
}

/* Close-icoon, verticaal gecentreerd */
ul.brxe-filter-active-filters .bricks-button.circle::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--close-gap);
  transform: translateY(-50%);

  width: var(--close-size);
  height: var(--close-size);

  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='%23000'/><path d='M7 7 L17 17 M17 7 L7 17' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  pointer-events: none;                     /* klik blijft op de knop */
  transition: transform .14s ease, opacity .12s ease;
}

/* Hover feedback */
ul.brxe-filter-active-filters .bricks-button.circle:hover::after {
  transform: translateY(-50%) scale(1.06);
  opacity: 0.98;
}

/* Kleiner icoon op small screens */
@media (max-width: 480px) {
  ul.brxe-filter-active-filters {
    --close-size: 20px;
    --close-gap: 8px;
  }
}

/* ------------------------
   Post type as pill button
   --------------------- */

/* Zorg dat de lijst items naast elkaar staan */
ul.brxe-filter-radio.bl-pill {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* ruimte tussen de pills */
  padding: 0;
  margin: 0;
  list-style: none;
}

ul.brxe-filter-radio.bl-pill li {
  display: inline-flex;
}

/* Algemene pill styling voor radio opties */
ul.brxe-filter-radio.bl-pill li label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pill-padding-block) var(--pill-padding-inline);
  height: var(--btn-height);
  min-height: var(--btn-height);
  line-height: 1;
  box-sizing: border-box;
  border-radius: 9999px;
  background-color: var(--pill-bg);
  color: var(--pill-color);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
  will-change: background-color, color;
  overflow: hidden;
}

/* Hover + focus */
ul.brxe-filter-radio.bl-pill li label:hover,
ul.brxe-filter-radio.bl-pill li label:focus-visible {
  background-color: var(--pill-bg-hover);
  color: var(--pill-color-hover);
}

/* Radio input: volledig verbergen */
ul.brxe-filter-radio.bl-pill li input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Actieve (geselecteerde) pill */
ul.brxe-filter-radio.bl-pill li input[type="radio"]:checked + .brx-option-text {
  background-color: var(--pill-bg-active, var(--pill-bg-hover));
  color: var(--pill-color-active, var(--pill-color-hover));
  border-radius: 9999px;
  padding: var(--pill-padding-block) var(--pill-padding-inline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  min-height: var(--btn-height);
}