/*
Theme Name: Roel2025
Theme URI: http://example.com/twenty-twenty-two-child/
Description: Hello stranger
Author: Roel van Gorkum
Author URI: http://example.com
Template: twentytwentyfive
Version: 1.0.0
*/




@font-face {
  font-family: 'ManropeRoel';
  src: url('/wp-content/themes/Roel2025/assets/fonts/manrope/Manrope700.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'InterRoel';
  src: url('/wp-content/themes/Roel2025/assets/fonts/inter/Inter.woff2') format('woff2');
  font-weight: 400 700;  /* only if that one file really supports both */
  font-style: normal;
  font-display: swap;
}


body{
  font-family: 'InterRoel', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
}

h1,h2,h3,h4,h5,h6,.wp-block-heading{
  font-family: 'ManropeRoel', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
}





/* Force normal wrapping everywhere: text, headings, and lists */
body,
.wp-site-blocks,
.wp-block,

/* Paragraph-type content */
p,
blockquote,
figcaption,

/* Headings */
h1, h2, h3, h4, h5, h6,

/* Lists */
ul,
ol,
li {
  text-wrap: auto !important;
}


/*Voor de stijl van de kortings banner*/
[data-sale-banner] {
  text-align: center;
  font-size: 0.8em;
  font-weight: bold;
}

/*Voor de stijl van de aftel naar 0 plekken banner*/

.weekly-spots-text {
	font-size: 0.9em;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	text-align: center;
}
@media (max-width: 768px) {
	.weekly-spots-text {
		font-size: 0.8em;
		line-height: 1.2;
			font-weight: 600;
		color: #fff;
	text-align: center;
	}
}


/* PAGINA KLEUR GRIJS MAKEN VAN QUIZ PAGINA*/
body.page-id-34477 {
  background-color: #f6f6f6;
}

/* Voor typeform meer ruimte maken om CLS te voorokmen */
.typeform-reserved-space {
  min-height: 700px;
}

@media (max-width: 768px) {
  .typeform-reserved-space {
    min-height: 400px;
  }
}

/* Een groep hide-group hiden met de knop toggle-button class */
/* Hidden by default */
.hide-group {
  display: none;
}

/* Shown after click */
.hide-group.is-visible {
  display: block;
}


/* Bepaalde blokken met dezez class alleen op mobiel of desktop laten zien */
/* Default: desktop-first */
.mobile-only {
  display: none;
}

/* Mobile */
@media (max-width: 782px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }
}




@media (max-width: 1024px) {
  .wp-block-columns.stack-early.is-layout-flex {
    flex-direction: column;
  }

  .wp-block-columns.stack-early.is-layout-flex > .wp-block-column {
    flex-basis: 100%;
    width: 100%;
  }
}

/* Captions left aligned, en zorgen dat ze niet full width zijn op bmobile. */
@media (max-width: 782px) {
  body.single-post figcaption.wp-element-caption,
  body.blog figcaption.wp-element-caption,
  body.archive figcaption.wp-element-caption {
    padding-left: 0;
    padding-right: 0;
  }
}

  .wp-block-image.alignfull figcaption,
  .alignfull .wp-block-image figcaption {
      text-align: left;
  
}
@media (max-width: 782px) {
  .wp-block-image.alignfull figcaption,
  .alignfull .wp-block-image figcaption {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--wp--style--root--padding-left, 6px);
    padding-right: var(--wp--style--root--padding-right, 6px);

  }
}


/* DIT IS WAARMEE IK HET MOBILE MENU MOOI MAAI LINKS ALIGNED MET MENU LOGO ENZO Overlay menu (hamburger) only: padding, background, logo, submenu alignment */

/* Mobile overlay menu (hamburger): padding, background, logo/heading, submenu alignment */
@media (max-width: 1200px) {
    
  /* Open overlay container */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    padding: 80px 0 0 20px;
    background: #fff;
    min-height: 100vh;
    box-sizing: border-box;
  }

  /* "Menu" heading inside overlay */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content::before {
    content: "Menu";
    position: fixed;
    top: 13px;
    left: 20px;
    z-index: 2;
    pointer-events: none;

    font-family: "ManropeRoel", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
  }

  /* Submenu links alignment in overlay */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.has-child
    > ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu
    a.wp-block-navigation-item__content {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding-left: 0;
    font-size: 0.95em;
  }
    /* Submenu links dichter op elkaar */
  @media (max-width: 1200px) {
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    > .wp-block-navigation-item
    > a.wp-block-navigation-item__content {
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.2;
  }
}

  /* Tighten: parent item ("Course") -> first submenu item spacing */
  .wp-block-navigation__responsive-container.is-menu-open
    li.wp-block-navigation-item.has-child.wp-block-navigation-submenu
    > a.wp-block-navigation-item__content {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    li.wp-block-navigation-item.has-child.wp-block-navigation-submenu
    > ul.wp-block-navigation__submenu-container {
    margin-top: 4px; /* space between Course and Benefits */
    padding-top: 0;
    
  }

  .wp-block-navigation__responsive-container.is-menu-open
    li.wp-block-navigation-item.has-child.wp-block-navigation-submenu
    + li.wp-block-navigation-item {
    margin-top: -14px;
  }


/* Put "close" to the LEFT of the X icon in the open overlay menu */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

/* Default (fallback, e.g. English) */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close::before {
  content: "close";
  font-size: 1rem;
  line-height: 1;
  position: relative;
  top: -1px;
}

/* Dutch */
html[lang="nl-NL"] 
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close::before {
  content: "sluit";
}


}


/* Touch devices: remove focus outline/box-shadow on submenu parents (if applied via :focus-within) */
@media (max-width: 1200px) and (hover: none) {
  .wp-block-navigation__responsive-container
    .wp-block-navigation-item.has-child:focus-within {
    outline: none;
    box-shadow: none;
  }
}








/* EINDE */



/* Post card styling */
.wp-block-post-template > .wp-block-post {
  background: #fff;
  border: 1px solid #ccccd6;
  border-radius: 10px;
  overflow: hidden;
}





/* Desktop hover submenu: background, border, spacing */
@media (min-width: 783px) {

  /* Dropdown panel */
  .wp-block-navigation .wp-block-navigation-item.has-child.wp-block-navigation-submenu
  > .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
    background-color: #f6f6f6;
border-left: 0px solid #CCCCD6;
border-right: 1px solid #CCCCD6;
border-bottom: 1px solid #CCCCD6;
border-top: 0;
    border-radius: 0px 0px 10px 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 0px;
    padding-right: 4px;

    /* ✅ shrink-wrap so there is no big empty right side */
    width: max-content;
    min-width: 20px;
    

    /* ✅ subtle bottom-right shadow */
    box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, 0.3);
  }

  /* Submenu list items */
  .wp-block-navigation .wp-block-navigation-item.has-child.wp-block-navigation-submenu
  > .wp-block-navigation__submenu-container.wp-block-navigation-submenu
  > .wp-block-navigation-item {
    background-color: #f6f6f6;
    border-radius: 10px;
  }

  /* Submenu links */
  .wp-block-navigation .wp-block-navigation__submenu-container.wp-block-navigation-submenu
  > .wp-block-navigation-item
  > a.wp-block-navigation-item__content {

    line-height: 1.25;
     font-size: 1rem;

  }

}












/* Remove native marker in all states */
details.wp-block-details > summary {
  list-style: none;
}
details.wp-block-details > summary::-webkit-details-marker {
  display: none;
}
details.wp-block-details > summary::marker {
  content: "";
}

/* Single filled triangle */
details.wp-block-details > summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: .38em solid transparent;
  border-bottom: .38em solid transparent;
  border-left: .55em solid currentColor;
  margin-right: .55em;
  transition: transform .15s ease;
  transform-origin: 50% 50%;
}

/* Open = rotate same arrow down */
details.wp-block-details[open] > summary::before {
  transform: rotate(90deg);
}











@media (max-width: 782px){
  :where(main, .wp-site-blocks) :where(h1,h2,h3,h4,h5,h6,[id]) {
    scroll-margin-top: 80px;
  }
}

@media (min-width: 783px){
  :where(main, .wp-site-blocks) :where(h1,h2,h3,h4,h5,h6,[id]) {
    scroll-margin-top: 110px;
  }
}

/* Keep default disclosure arrow on iOS */
.wp-site-blocks details > summary {
  display: list-item;
}

/* Base */
.thumbswap {
  position: relative;
}

.thumbswap input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* TEXT GROUPS */
.thumbswap .ts-text {
  display: none;
}

#ts1:checked ~ .thumbswap-text .ts-text1 {
  display: block;
}

#ts2:checked ~ .thumbswap-text .ts-text2 {
  display: block;
}

/* IMAGES */
.thumbswap-main .ts-img {
  display: none;
  margin: 0;
}

#ts1:checked ~ .thumbswap-main .ts-img1 {
  display: block;
}

#ts2:checked ~ .thumbswap-main .ts-img2 {
  display: block;
}

.thumbswap-main img {
  width: 100%;
  height: auto;
  display: block;
}

/* THUMBNAILS */
.thumbswap-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.thumbswap-thumbs img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 6px;
}

/* Active thumbnail */
#ts1:checked ~ .thumbswap-thumbs label[for="ts1"] img,
#ts2:checked ~ .thumbswap-thumbs label[for="ts2"] img {
  outline: 2px solid #002F6C;
  outline-offset: 2px;
}
/* TEXT STYLING CONTROLS */
.thumbswap .ts-title {
  font-size: 1.2rem;   /* ← H4 size (change this) */
  line-height: 0.5;
  margin: 0 0 0rem 0;  /* ← space below headline */
}

.thumbswap .ts-subtitle {
  font-size: 1rem;    /* ← subheadline size (change this) */
  line-height: 1.6;
  margin-bottom: 10px;             /* controlled only by title margin */
}
/* Subheadline underline with adjustable inset */
.thumbswap .thumbswap-text p {
  position: relative;
  padding-bottom: 0.3rem; /* space between text and line */
  margin-bottom: 1.25rem;
}

/* The line itself */
.thumbswap .thumbswap-text p::after {
  content: "";
  position: absolute;
  left: 0px;   /* ← inset from left (change this) */
  right: 6px;  /* ← inset from right (change this) */
  bottom: 0;
  height: 1px;
  background-color: #CCCCD6;
}
/* Instruction label next to thumbnails */
.thumbswap-label {
  font-size: 1rem;

  line-height: 1;
  margin-right: 6px;
  white-space: nowrap;
}

/* Align label + thumbs nicely */
.thumbswap-thumbs {
  align-items: center;       /* vertical alignment */
  justify-content: flex-start;   /* keep centered as a group */
}




/* Change Gutenberg striped table row color */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: #F6F6F6
; 
}

/*Dit is voor het proces met de 3 bollen*/
/* /* ===============================
   Timeline (row-based, final)
================================ */
.timeline-row {
  --dot: 35px;               /* circle size (inner) */
  --dot-border-w: 2px;       /* circle border width */
  --line: 3px;               /* line thickness */
  --gap: 16px;               /* space between columns */
  --space: 56px;             /* space between steps */

  --line-color: #000d2d;
  --dot-bg: #fff;
  --dot-border: #000d2d;
}

/* ===============================
   Each step row (Columns block)
================================ */
.timeline-row > .wp-block-columns {
  display: flex;
  column-gap: var(--gap);
  align-items: stretch;   /* left rail matches content height */
  margin: 0;              /* IMPORTANT: no row margins */
}

/* ===============================
   LEFT column (dot + line)
================================ */
.timeline-row__rail {
  position: relative;
  flex: 0 0 calc(var(--dot) + (2 * var(--dot-border-w)));
  min-width: calc(var(--dot) + (2 * var(--dot-border-w)));
  display: flex;
  justify-content: flex-start;
  padding-bottom: var(--space); /* spacing INSIDE rail so line continues */
}

/* No spacing after last step */
.timeline-row > .wp-block-columns:last-child .timeline-row__rail {
  padding-bottom: 0;
}

/* Vertical line (perfectly centered through dots) */
.timeline-row__rail::before {
  content: "";
  position: absolute;
  left: calc((var(--dot) + (2 * var(--dot-border-w))) / 2);
  transform: translateX(calc(var(--line) / -2));
  top: 0;
  bottom: 0;
  width: 0;
  border-left: var(--line) dotted var(--line-color);
}





/* First step: no line above dot 1 */
.timeline-row > .wp-block-columns:first-child
.timeline-row__rail::before {
  top: calc((var(--dot) + (2 * var(--dot-border-w))) / 2);
}

/* Last step: no line below dot 3 */
.timeline-row > .wp-block-columns:last-child
.timeline-row__rail::before {
  bottom: calc((var(--dot) + (2 * var(--dot-border-w))) / 2);
}

/* Dot (number paragraph) */
.timeline-row__rail > p {
  width: var(--dot);
  height: var(--dot);
  margin: 0;
  border-radius: 10px;
  background: var(--dot-bg);
  border: var(--dot-border-w) solid var(--dot-border);
  color: #000d2d;
  font-weight: 800;
  font-size: calc(var(--dot) * 0.6);
  line-height: 1;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1; /* dot above line */
}

/* ===============================
   RIGHT column (content)
================================ */
.timeline-row h4 {
  margin: 0;
  min-height: var(--dot);     /* ensures vertical centering vs dot */
  display: flex;
  align-items: center;
}

/* List spacing cleanup */
.timeline-row .wp-block-list {
  margin: 12px 0 0;
}

.timeline-row ul,
.timeline-row ol {
  margin: 0;
  padding-left: 1.2em;
}



p a:hover,
p a:focus,
li a:hover,h3 a:hover, h3 a:focus,
li a:focus {
  text-decoration: underline;
}




/* Core Gutenberg button hover color */
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
  background-color: #0060dd;
  color: #fff;
}
/* Alternate Gutenberg button: same sizing, different colors */
.wp-block-button.lichte-knop .wp-block-button__link,
.wp-block-button.lichte-knop-2 .wp-block-button__link {
  background-color: #ffffff;
  color: #002F6C;
  border: 2px solid #002F6C;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 25px;
  padding-right: 25px;
}

/* Keyboard focus (all devices) */
.wp-block-button.lichte-knop .wp-block-button__link:focus-visible,
.wp-block-button.lichte-knop-2 .wp-block-button__link:focus-visible {
  background-color: #002F6C;
  color: #ffffff;
}

/* Hover ONLY on hover-capable devices */
@media (hover: hover) and (pointer: fine) {
  .wp-block-button.lichte-knop .wp-block-button__link:hover,
  .wp-block-button.lichte-knop-2 .wp-block-button__link:hover {
    background-color: #002F6C;
    color: #ffffff;
  }
}


/* Base (desktop) – exclude header mobile button */
.wp-block-button:not(.mobile-button-header) .wp-block-button__link {
  font-weight: 600;
}

/* Menu text next to Gutenberg hamburger icon */
.wp-block-navigation__responsive-container-open {
  display: inline-flex;
  align-items: center;
  gap: .25em;
}

.wp-block-navigation__responsive-container-open::before {
  content: "menu";
  font-size: 1rem;
  line-height: 1;
  position: relative;
  top: -1px; /* move text up 1px */
}

/* Body cells: top-aligned (content only) */
.wp-block-table tbody td,
.wp-block-table tbody th {
  vertical-align: top;
}

/* Header row: bottom-aligned */
.wp-block-table thead th {
  vertical-align: bottom;
}




/* =========================================
   Review expand / collapse (NO JS, uses :has)
   - Collapsed: show short + "Expand review" at bottom
   - Expanded: hide short, show full + "Collapse review" BELOW full text
   ========================================= */
.review-toggle{
  font-size: 1rem;

}

/* Hide full text by default */
.review-full{
  display: none;
}

/* Default labels: show Expand, hide Collapse */
.review-details .collapse-label{ display: none !important; }
.review-details .expand-label{ display: inline !important; }

/* When open: swap labels */
.review-details[open] .expand-label{ display: none !important; }
.review-details[open] .collapse-label{ display: inline !important; }

/* When open: show full text */
.review-details[open] .review-full{
  display: block;
}

/* When open: hide the short text OUTSIDE <details> (requires :has) */
.review-toggle:has(.review-details[open]) .review-short{
  display: none;
}

/* Make <details> a vertical layout and put toggle at the bottom */
.review-details{
  display: flex;
  flex-direction: column;
}

/* Full text first, summary last (so Collapse ends BELOW full text) */
.review-details .review-full{ order: 1; }
.review-details summary{ order: 2; margin-top: 10px; }

/* Summary styling + remove marker */
.review-details summary{
  cursor: pointer;
  list-style: none;
  font-weight: 600;
      color: #444;
}
  
@media (hover: hover) {
  .review-details summary:hover {
    color: #0085ff;
  }
}


/*Pijltje voor expand collapse review goed zetten*/
.review-details .arrow {
  font-size: 12px;
}



/* === Google-style review card (Inter only, legacy sizes) === */


.g-review-container--split-radius .g-review {
  background: #ffffff;
  padding: 16px;
  border-radius: 10px 10px 0 0;
  margin: 0;
    border: 0px solid #CCCCD6; /* 👈 outline */
}

.g-review-container--split-radius .lazy-video {
  border-radius: 0 0 10px 10px;
  margin: 0;
  overflow: hidden; /* ensures the poster respects the radius */
    margin-bottom: 30px;
    
}

.g-review {
  background: #ffffff;
  border-radius: 10px;
  padding: 16px; /* optional but usually needed so content doesn’t touch edges */
  margin-bottom: 30px;
        border: 0px solid #CCCCD6; /* 👈 outline */
        
}

/* Header */
.g-review-header{
  display:flex;
  align-items:flex-start;
  gap:12px; /* matches margin-right:12px on image */
}

/* Avatar circle (matches 35px image) */
.g-review-avatar{
  width:35px;
  height:35px;
  border-radius:50%;
  background:#8e8e8e;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:16px; /* visually matches initial in 35px circle */
  line-height:1;
  flex-shrink:0;
      margin-left:2px;
}
.g-review-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Name + review count */
.g-review-name{
  font-size:1rem;   /* from inline style */
  font-weight:600; /* from inline style */
  line-height:1;

}

.g-review-count{
  font-size:14px;  /* from inline style */
  color:#444;
  margin-top:2px;  /* from inline style */
}

/* Stars + time */
.g-review-meta{
  display:flex;
  align-items:center;
  gap:6px;
    flex-wrap: wrap;
  margin-top:8px;   /* from inline style */
  margin-bottom:8px;

}


/* Meta row: consistent vertical alignment everywhere */



/* Stars (Google-like, 5 and 4) */
.g-stars{
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
  --s:16px;--g:1px;
  width:calc(5*var(--s) + 4*var(--g));height:var(--s);
  display:inline-block;vertical-align:middle;flex:0 0 auto;
  background:#dadce0;
  -webkit-mask:repeat-x 0 50%/calc(var(--s) + var(--g)) var(--s) var(--star);
          mask:repeat-x 0 50%/calc(var(--s) + var(--g)) var(--s) var(--star);
}
.g-stars--5{background:#fbbc04}
.g-stars--4{position:relative}
.g-stars--4::after{
  content:"";position:absolute;inset:0;
  width:calc(4*var(--s) + 3*var(--g));
  background:#fbbc04;-webkit-mask:inherit;mask:inherit;
}



.g-review-time{
  font-size:14px;
  color:#444;
  padding-left:5px;
  white-space:nowrap;
  line-height:1.8;
}
/* Tablet-only fix: keep <summary> clickable, but visually place it at the bottom when open */
@media (min-width: 783px) and (max-width: 1024px) {

  /* Only when expanded */
  .g-review .review-details[open]{
    position: relative;
    padding-bottom: 2.2em; /* reserve space for the summary at the bottom */
  }

  .g-review .review-details[open] > summary{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    margin-top: 0;         /* your existing margin-top becomes irrelevant */
    padding-top: 10px;     /* recreate spacing from text */
    background: #fff;      /* prevents text showing behind it if it overlaps */
  }

}





/* Mobile */
@media (max-width: 782px){
  .wp-block-buttons .wp-block-button:not(.mobile-button-header):not(.lichte-knop){
    flex: 0 0 100%;
  }
}

/* Tablet */
@media (min-width: 783px) and (max-width: 1024px){
  .wp-block-buttons .wp-block-button:not(.mobile-button-header):not(.lichte-knop):not(.mobile-button-roel){
    flex: 0 0 70%;
  }
}


/* Desktop – default buttons */
@media (min-width: 1025px) {
  .wp-block-buttons .wp-block-button.brede-knop-desktop {
    flex: 0 0 40%;
  }
}

/* Header button: never use percentage widths, never wrap */
.wp-block-buttons .wp-block-button.mobile-button-header.wp-block-button {
  flex: 0 0 auto;
  max-width: none;
}







/* Dit is voor de knop meer reviews */

/* ---------------------------
   NO-JS 3-state reviews pager
   1) revstep1: show Group 1 + divider/button 1
   2) revstep2: show Group 1+2 + divider/button 2
   3) revstep3: show Group 1+2+3 + divider/button 3
---------------------------- */

/* Hide radios without scrolling/jumping on mobile */
.reviews-pager .reviews-step{
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Default: only Group 1 visible */
.reviews-pager .reviews-group-2,
.reviews-pager .reviews-group-3{
  display: none;
}

/* Divider wrapper: hidden by default (so only one shows per state) */
.reviews-pager .reviews-divider{
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 22px 0;
}

/* Lines left and right */
.reviews-pager .reviews-divider::before,
.reviews-pager .reviews-divider::after{
  content: "";
  flex: 1 1 auto;
  height: 0px;
  background: rgba(17,17,17,0.14);
  min-width: 20px;
}

/* Button styling */
.reviews-pager .reviews-more-btn{
  flex: 0 0 auto;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(17,17,17,0.15);
  background: #fff;
  color: #111;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  text-decoration: none;
}

/* Smaller arrow */
.reviews-pager .reviews-more-btn .arrow{
  font-size: 0.55em;
  line-height: 1;
}

/* Hover only on hover-capable devices */
@media (hover: hover) {
  .reviews-pager .reviews-more-btn:hover{
   /*  border-color: #000;*/
    color: #0085ff;
  }
}

/* Keyboard focus */
.reviews-pager .reviews-more-btn:focus-visible{
  outline: 2px solid #0085ff;
  outline-offset: 2px;
}

/* ---------- STATE LOGIC (Gutenberg-safe via :has) ---------- */

/* STATE 1: Group 1 only, show divider/button 1 */
.reviews-pager:has(#revstep1:checked) .reviews-group-2,
.reviews-pager:has(#revstep1:checked) .reviews-group-3{
  display: none;
}
.reviews-pager:has(#revstep1:checked) .reviews-divider-1{
  display: flex;
}

/* STATE 2: show Group 2, show divider/button 2 */
.reviews-pager:has(#revstep2:checked) .reviews-group-2{
  display: block;
}
.reviews-pager:has(#revstep2:checked) .reviews-group-3{
  display: none;
}
.reviews-pager:has(#revstep2:checked) .reviews-divider-2{
  display: flex;
}

/* STATE 3: show Group 2 + 3, show divider/button 3 */
.reviews-pager:has(#revstep3:checked) .reviews-group-2,
.reviews-pager:has(#revstep3:checked) .reviews-group-3{
  display: block;
}
.reviews-pager:has(#revstep3:checked) .reviews-divider-3{
  display: flex;
}





/* Einde meer reviews knop */




/* Calm, accessible focus */
.more-reviews__btn:focus-visible{
  outline: 2px solid #0085ff;
  outline-offset: 2px;
}

/* Spacing between blocks */
.more-reviews[open]{
  margin-top: 10px;
}




/* Focus styling: show outline only for keyboard users (focus-visible) */
a:focus,
button:focus,
summary:focus {
  outline: transparent;
}

/* Keyboard focus (accessible) */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid #0085ff;
  outline-offset: 2px;
}
/* Remove underline for focused links inside mobile navigation overlay */
.wp-block-navigation__responsive-container a:focus,
.wp-block-navigation__responsive-container a:focus-visible {
  text-decoration: none;
}



/* Align the mobile close (X) button with the original hamburger position */
.wp-block-navigation__responsive-container-close {
    top: 17px;    /* Adjust this to match your header's top spacing */
    right: 20px;  /* Adjust this to match your header's side spacing */
    position: absolute;
}






ul.wp-block-list.icon-list {
  list-style: none;
  padding-left: 0;
}
ul.wp-block-list.icon-list > li{
  position: relative;
  padding-left: 28px;
}
ul.wp-block-list.icon-list > li::before{
  content:"";
  position:absolute;
  left:0;
  top:.1em;
  width:21px;
  height:21px;
  background: no-repeat center / contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%234BAEAE'/%3E%3Cpath d='M18 33 L28 43 L46 22' stroke='%23fff' stroke-width='7.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
ul.wp-block-list.icon-list.grey > li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%23CCCCCC'/%3E%3Cpath d='M18 33 L28 43 L46 22' stroke='%23fff' stroke-width='7.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}



/* Only change size on mobile */
@media (max-width: 782px){
  ul.wp-block-list.icon-list > li::before{ width:20px; height:20px; }
}


/* Dit is voor mijn video lazyload */

/* Dit is voor mijn video lazyload */

/* Base responsive video wrapper */
.lazy-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.video-radius-10 {
  border-radius: 10px;
}

.video-radius-0 {
  border-radius: 0;
}

/* Poster image fills box */
.lazy-video__poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Center play button */
.lazy-video__btn{
  position:absolute;
  inset:0;
  margin:auto;
  width:72px;
  height:72px;
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:transform .12s ease, background-color .12s ease;
}

.lazy-video__btn:focus-visible{
  outline:3px solid #fff;
  outline-offset:4px;
}

/* Play icon (triangle) */
.lazy-video__icon{
  width:0;
  height:0;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  border-left:18px solid #fff;
  margin-left:3px;
  transition:transform .12s ease, filter .12s ease;
}

/* Hover state: slightly larger + brighter */
.lazy-video__btn:hover{
  background:rgba(0,0,0,.70);
  transform:scale(1.03);
}

.lazy-video__btn:hover .lazy-video__icon{
  transform:scale(1.06);
  filter:drop-shadow(0 0 2px rgba(255,255,255,.65));
}

/* After loading: ensure iframe fills */
.lazy-video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}


/*mobile language switcher maken translatepress*/
/* "Language: English / Nederlands" inside the mobile hamburger overlay */
/* Language links in mobile hamburger menu */
.roel-mobile-language-links {
  display: none;
}

@media (max-width: 1200px) {
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .roel-mobile-language-links {
    display: block;
    position: fixed;
    top: 65px;
    left: 20px;
    z-index: 3;
    font-size: 1rem;
    line-height: 1.2;
  }
}



/* HIERMEE MAAK IK DE BROWSER LANGUAGE POPUP (IN FUNCTIONS PHP) MOOI */
/* Browser language popup */

.roel-lang-reminder {
  position: fixed;
  left: 16px;
  right: 16px;
  top: 60px;
  z-index: 9999;

  margin-left: auto;   /* center horizontally */
  margin-right: auto;  /* center horizontally */
}

@media (min-width: 768px) {
  .roel-lang-reminder {
    left: 16px;
    right: 16px;
    top: 90px;
    max-width: 400px;
  }
}

.roel-lang-reminder__inner {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px 16px;
  border-radius: 10px;
  background: #E4FBFB;
  border: 1px solid #CCCCD6;
  box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
  .roel-lang-reminder__inner {
    border-radius: 10px;
  border: 1px solid #CCCCD6;
  }
}

.roel-lang-reminder__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  text-decoration: underline;
  color: #000;
  line-height: 1.2;
  font-weight: 600;
}

.roel-lang-reminder__link:hover,
.roel-lang-reminder__link:focus-visible {
  text-decoration: underline;
  color: #0085ff;
}

.roel-lang-reminder__flag {
  display: inline-flex;
  flex: 0 0 auto;
}

.roel-lang-reminder__close {
  margin-left: auto;
  align-self: flex-start;

  border: 0;
  background: transparent;
  color: #000;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  padding: 0;
  margin-right: -4px;
  border-radius: 0px;
  cursor: pointer;
}

/* ✅ No grey hover background, only blue X */
.roel-lang-reminder__close:hover,
.roel-lang-reminder__close:focus-visible {
  background: transparent;
  color: #0085ff;
}

/* Keep your visible keyboard focus outline */
.roel-lang-reminder__close:focus-visible {
  outline: 2px solid #0085ff;
  outline-offset: 2px;
}




/* Afprijzing streep */


.wp-block-button.nolink > .wp-block-button__link {
  cursor: default;
  pointer-events: none;
}