/*
Theme Name: Mondiale Werken 2025 (w Payment Buttons - 12/10/25)
Author: Communicatie - Mondiale Werken Regio Lier
Description: Responsive theme with news slider & events list. Colors: #60418b, #f47e67, #FFE4C3, #FFFFFF
Version: 1.0.0
Text Domain: mowe-theme
*/


:root{--mowe-primary:#60418b;--mowe-secondary:#f47e67;--mowe-bg:#FFE4C3;--mowe-white:#FFFFFF;--mowe-text:#2a1e3f}
html{box-sizing:border-box;scroll-behavior:smooth}*,*:before,*:after{box-sizing:inherit}
body{margin:0;color:var(--mowe-text);background:var(--mowe-bg);font-family:"Mukta Mahee",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
/* Make form controls inherit the site's typography */
button, input, select, textarea { 
  font: inherit; 
  color: inherit;      /* keeps footer color scheme */
  letter-spacing: inherit;
}
a{color:var(--mowe-primary);text-decoration:none}a:hover{text-decoration:underline}
.container{width:min(1200px,92vw);margin-inline:auto}
.site-header{background:#fff;border-bottom:6px solid var(--mowe-primary);position:sticky;top:0;z-index:10}
.header-inner{display:flex;align-items:center;gap:24px;padding:10px 0}
.site-title{font-weight:700;color:var(--mowe-primary)}
.nav-primary ul{list-style:none;display:flex;gap:28px;margin:0;padding:0}
.header-ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:14px;padding:10px 18px;font-weight:700;border:2px solid transparent}
.btn-help{background:var(--mowe-secondary);color:#fff}.btn-volunteer{background:var(--mowe-primary);color:#fff}.btn-donate{background:#E8E0F5;color:#4a3574;border-color:#d4c5f6}
.main{padding:24px 0 48px}
.hero{background:#fff;padding:16px 0;border-bottom:4px solid #e0d1f2}
.swiper{width:100%}.slide-inner{min-height:360px;background:#5e478f center/cover no-repeat;border-radius:16px;position:relative;overflow:hidden}
.slide-overlay{position:absolute;inset:auto 0 0 0;padding:18px 22px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.45));color:#fff}
.slide-label{font-weight:800;text-transform:uppercase;font-size:.9rem;letter-spacing:.04em;color:#54c792}.slide-title{font-size:1.8rem;margin:.3rem 0}.slide-more{font-weight:700}
.home-sections{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;margin-top:22px}
@media (max-width:1200px){.home-sections{grid-template-columns:1fr}}
.box{background:#fff;border-radius:16px;padding:16px;border:2px solid #eadbf4}.box h3{margin-top:0;color:var(--mowe-primary)}
.vac-list{display:grid;gap:10px}.vac-item{display:flex;justify-content:space-between;border:2px solid var(--mowe-primary);border-radius:14px;padding:10px 14px;color:#fff;background:var(--mowe-secondary)}.vac-item:nth-child(odd){background:var(--mowe-primary)}
.events-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}.event{display:flex;align-items:baseline;gap:10px;padding:10px 12px;background:#EFE8FA;border-radius:12px}.event-date{min-width:120px;color:#6c5aa6;font-weight:800}
.btn-outline{background:transparent;color:var(--mowe-primary);border:2px solid var(--mowe-primary);border-radius:14px;padding:10px 18px;font-weight:700}
.content{background:#fee4c2;border-radius:16px;padding:24px}/*.entry-title{color:var(--mowe-primary)}

/* ==========================================================================
   Mondiale Werken — Extra CSS (grouped, documented, output preserved)
   --------------------------------------------------------------------------
   Tweak guide:
     • Global knobs live in :root ( --top-stripe, --nav-h ).
     • Look for "← tweak" comments to safely change values.
     • Mobile overlay supports BOTH triggers:
         A) #mobile-menu-checkbox:checked …               (pure CSS)
         B) body.menu-open …                               (JS-assisted)
       Duplicates are intentional to preserve behavior.
   Brand colors:
     --purple: #60418b; --orange: #f47e67; --lavender: #E8E0F5; --bg: #FFE4C3
   ========================================================================== */


/* === 1) ROOT TOKENS ====================================================== */
:root{
  /* Height of the lavender menu band above the banner (32 / 48 / 64 / 80). */
  --nav-h: 32px;            /* ← tweak */
  /* Thin purple stripe at the very top of the page. */
  --top-stripe: 18px;       /* ← tweak */
}


/* === 2) HEADER FRAME & TOP STRIPE ======================================= */
.site-header{
  position: sticky; top: 0; z-index: 1000; background: #fff;
}
/* Thin purple stripe at the very top */
.site-header::before{
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: var(--top-stripe);
  background: #60418b; /* primary */
  z-index: 1001;
}
/* Scrolled down header: */
/* ============================================================
   HEADER — layout + exact 1/2 shrink + CTA icons
   (Lavender band .nav-primary stays fixed height)
   ============================================================ */

/* Tweakables */
:root{
  --brand-max-h: 120px;                       /* base logo cap */
  --brand-min-h: calc(var(--brand-max-h)/2);  /* exact half on scroll */
  --title-size: clamp(26px, 3.2vw, 52px);
  --subtitle-size: clamp(16px, 2.0vw, 26px);
  --cta-gap: 24px;
  --cta-icon: 36px;   /* ← try 36–40px */


  /* controls vertical rhythm of the brand area (below lavender) */
  --hi-pad-y: 18px;                           /* base vertical padding */
  --cta-h: 84px;                              /* base button height */
  --cta-pad-x: 28px;
  --cta-pad-y: 22px;
}

/* Keep these from your previous CSS */
.site-header{ position: sticky; top:0; z-index:1000; background:#fff; }
.site-header::before{
  content:""; position:absolute; inset:0 0 auto 0;
  height: var(--top-stripe); background:#60418b; z-index:1001;
}

/* LAVENDER BAND — full width */
.site-header .nav-primary{
  position:absolute; left:0; right:0; top: var(--top-stripe);
  height: var(--nav-h);
  background:#E8E0F5;
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:56px; z-index:1002; border-bottom:0;
}
.site-header .nav-primary ul{
  display:flex; gap:48px; margin:0; padding:0 42px 0 0;
  list-style:none; flex-wrap:wrap; margin-left:auto; justify-content:flex-end;
}
.site-header .nav-primary a{ color:#60418b; font-weight:700; text-decoration:none; }
.site-header .nav-primary a:hover{ color:#f47e67; }
@media (max-width:1200px){ .site-header .nav-primary ul{ gap:16px; padding:0 12px; } }
@media (max-width:1200px){ .site-header .nav-primary ul{ justify-content:center !important; } }

/* BRAND AREA (under lavender band) */
.header-inner{
  display:grid; grid-template-columns:auto 1fr;
  align-items:center; gap:28px;
  padding: calc(var(--top-stripe) + var(--nav-h) + var(--hi-pad-y)) 20px var(--hi-pad-y);
  transition: padding .25s ease;
  /* IMPORTANT: not positioned, so the lavender band positions against header */
  position: static;
}
.site-branding{ display:flex; align-items:center; gap:16px; min-width:0; }
.site-branding .custom-logo{
  max-height: var(--brand-max-h);
  height:auto; width:auto;
  transition: max-height .25s ease, transform .25s ease;
}
.site-branding-text{ display:flex; flex-direction:column; }
.site-title{
  color:#60418b; text-decoration:none; font-weight:800;
  font-size: var(--title-size); line-height:1.05;
  transition: font-size .25s ease, opacity .25s ease;
}
.site-description{ color:#f47e67; font-weight:700; font-size: var(--subtitle-size); }

/* CTAs */
.header-ctas{
  margin-left:auto; display:flex; flex-wrap:wrap; gap:var(--cta-gap);
}
.header-ctas .btn{
  display:flex; align-items:center; justify-content:center; gap:12px;
  min-height: var(--cta-h);
  padding: var(--cta-pad-y) var(--cta-pad-x);
  border-radius:18px; font-weight:800; text-decoration:none; line-height:1;
  transition: min-height .25s ease, padding .25s ease,
              box-shadow .25s ease, background-color .2s ease, color .2s ease;
}
.header-ctas .btn .label{ line-height:1; display:inline-block; }

/* Icon container + image */
.header-ctas .btn .icon{
  display:inline-flex; width:58px; height:58px;
  transition: width .25s ease, opacity .25s ease, transform .25s ease, margin .25s ease;
}
.header-ctas .btn .icon img{ width:100%; height:100%; display:block; }


/* Colors */
.btn-donate{   background:#E8E0F5; color:#60418b; }
.btn-donate:hover{   background:#dcd1f0; }
.btn-volunteer{ background:#60418b; color:#fff; }
.btn-volunteer:hover{ background:#54397b; }
.btn-help{     background:#f47e67; color:#fff; }
.btn-help:hover{     background:#e7725c; }

/* --- SCROLLED: EXACT 1/2 ----------------------------------------------- */
.site-header.is-scrolled .header-inner{
  padding: calc(var(--top-stripe) + var(--nav-h) + (var(--hi-pad-y)/2)) 16px calc(var(--hi-pad-y)/2);
}
.site-header.is-scrolled .site-branding .custom-logo{ max-height: var(--brand-min-h); }
.site-header.is-scrolled .site-title{ font-size: calc(var(--title-size)/2); }
.site-header.is-scrolled .site-description{ font-size: calc(var(--subtitle-size)/2); }

/* compact CTAs & hide icons, while keeping text perfectly centered */
.site-header.is-scrolled .header-ctas .btn{
  min-height: calc(var(--cta-h)/2);
  padding: calc(var(--cta-pad-y)/2) calc(var(--cta-pad-x)/2);
}
.site-header.is-scrolled .header-ctas .btn .icon{
  opacity:0; width:0; margin:0; transform:scale(.9);
}

/* Desktop: fully collapse the icon when scrolled so it can't force extra height */
@media (min-width: 901px){
  .site-header.is-scrolled .header-ctas .btn .icon{
    width: 0 !important;
    height: 0 !important;       /* ← add this */
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    overflow: hidden;
  }
  /* keep label perfectly centered */
  .site-header.is-scrolled .header-ctas .btn{ gap: 0; }
}

/* Set your preferred radius once */
:root{
  --mowe-radius-media: 16px; /* tweak as you like */
}

/* Media & Text — round the media area everywhere */
.wp-block-media-text .wp-block-media-text__media{
  border-radius: var(--mowe-radius-media, 16px);
  overflow: hidden;            /* ensures the image/background is clipped */
}

/* Handle <img> and <video> inside the media area */
.wp-block-media-text .wp-block-media-text__media img,
.wp-block-media-text .wp-block-media-text__media video{
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

/* If “Use as background” is enabled on the block */
.wp-block-media-text .wp-block-media-text__media[style*="background-image"]{
  /* border-radius above already clips the background */
  background-clip: padding-box;
}

/* Make it visible in the editor too */
.editor-styles-wrapper .wp-block-media-text .wp-block-media-text__media{
  border-radius: var(--mowe-radius-media, 16px);
  overflow: hidden;
}
.editor-styles-wrapper .wp-block-media-text .wp-block-media-text__media img,
.editor-styles-wrapper .wp-block-media-text .wp-block-media-text__media video{
  border-radius: inherit;
}




/* ----------------- MOBILE ---------------------- */

@media (max-width:1200px){
  .header-inner{ grid-template-columns:1fr; gap:10px;
    padding: calc(var(--top-stripe) + var(--nav-h) + 10px) 12px 14px;
  }
  .header-ctas{ order:3; width:100%; justify-content:space-between; }
  .header-ctas .btn{ flex:1 1 auto; }
  .site-header.is-scrolled .header-ctas .btn .icon{
    opacity:1; width:28px; transform:none; margin:0;
  }
}





/* BUG FIXED - Mobile pop up */
/* ----- CTAs only in the pop-up on mobile ----- */

/* Hide the banner CTAs on mobile */
@media (max-width: 1200px){
  .site-header .header-ctas{ display: none !important; }
}

/* The mobile CTA block is hidden by default */
.site-header .mobile-ctas{ display: none; }

/* MOBILE pop-up: keep desktop order + colors */
@media (max-width: 1200px){

  /* make the CTA stack flex so we can order items */
  #mobile-menu-checkbox:checked ~ .site-header .mobile-ctas{
    display: flex;                /* was grid */
    flex-direction: column;
    gap: 16px;
  }

  /* Order to match desktop: Donate, Volunteer, Help */
  .mobile-ctas .btn-donate{ order: 1; }
  .mobile-ctas .btn-volunteer{ order: 2; }
  .mobile-ctas .btn-help{ order: 3; }

  /* Ensure correct text colors (override nav-primary link color) */
  .site-header .nav-primary .mobile-ctas .btn-volunteer,
  .site-header .nav-primary .mobile-ctas .btn-help{
    color: #fff !important;       /* white text on purple & salmon */
  }
  .site-header .nav-primary .mobile-ctas .btn-donate{
    color: #60418b !important;    /* purple text on light lavender */
  }
}
/* MOBILE POP-UP: pull the menu list up under the buttons */
@media (max-width: 1200px){
  /* Make the pop-up a simple vertical column */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 12px !important;
  }

  /* Keep CTAs exactly as they are, just trim the space below them */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary .mobile-ctas{
    order: 1 !important;
    margin: 0 !important;
    padding: 14px 16px 8px !important;  /* <-- tiny gap under the buttons */
  }

  /* Hide the search block in the pop-up (it creates vertical space) */
  /* #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form{
  /*  display: none !important;
  }

  /* Reset the UL so it doesn't carry desktop spacing */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul{
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    margin: 0 16px !important;      /* side padding only */
    padding: 0 !important;
    gap: 5px !important;            /* spacing between links */

    /* kill desktop-specific spacing that pushes it down */
    margin-left: 0 !important;
  }

  /* Make each link a tidy touch target without extra top margin */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul > li{
    margin: 0 !important;
    padding: 0 !important;
  }
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul > li > a{
    display: block !important;
    padding: 8px 0 !important;       /* adjust if you want tighter/looser */
  }
}
/* POP-UP MENU: center menu items (mobile only) */
@media (max-width: 1200px){
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul{
    align-items: center !important;   /* center the column */
    text-align: center !important;    /* center inline content */
    width: 100%;
    margin: 0 !important;
  }
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul > li{
    width: 100% !important;           /* let links span full width */
  }
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul > li > a{
    display: block !important;
    width: 100% !important;
    text-align: center !important;    /* ensure the text itself is centered */
    padding: 10px 0 !important;       /* comfy touch target */
  }
}
/* ===== MOBILE POP-UP MENU TWEAKS ===== */
@media (max-width: 1200px){

  /* Lay out the pop-up as a vertical stack */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
  }

  /* 1) Put the SEARCH FORM at the very top (above the buttons) */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form{
    order: 1 !important;
    display: block !important;          /* override any previous display:none */
    width: 100% !important;
    margin: 10px 16px 8px !important;   /* <- space above the first button */
  }
  /* basic, safe styling for WP search form */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary .search-form .search-field{
    width: 100%;
    height: 42px;
    border-radius: 12px;
    padding: 0 12px;
    font-size: 16px;
  }
  

  /* 2) Keep the 3 CTAs exactly where they are, but make them thinner */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary .mobile-ctas{
    order: 2 !important;
    padding: 0 16px 8px !important;
    gap: 12px !important;
  }
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary .mobile-ctas .btn{
    min-height: 58px;                  /* ↓ was taller; make thinner */
    padding: 12px 16px;                 /* tighter vertical padding */
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
  }
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary .mobile-ctas .btn .icon{
    width: 26px; height: 26px;          /* slightly smaller icon for balance */
  }

  /* Menu list follows under the buttons, centered as before */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul{
    order: 3 !important;
    display: flex !important; flex-direction: column !important;
    gap: 6px !important; width: 100%; margin: 0 !important; padding: 0 16px !important;
    align-items: center !important; text-align: center !important;
  }
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul > li,
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul > li > a{
    width: 100% !important;
  }
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul > li > a{
    padding: 10px 0 !important;
    text-align: center !important;
  }
}
/* Mobile: keep site title/subtitle size fixed (no shrink, no animation) */
@media (max-width: 1200px){
  /* same size whether scrolled or not */
  .site-title{ font-size: var(--title-size) !important; transition: none !important; }
  .site-description{ font-size: var(--subtitle-size) !important; transition: none !important; }

  .site-header.is-scrolled .site-title{ font-size: var(--title-size) !important; }
  .site-header.is-scrolled .site-description{ font-size: var(--subtitle-size) !important; }
}


/* MENU IN COLUMNS */

/* === MOBILE POP-UP: two-column card menu === */
@media (max-width:1200px){
  /* Make the list a 2-col grid, same gutters as the CTAs */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul{
    order: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-auto-rows: 1fr;                 /* rows will follow link height */
    gap: 12px !important;
    padding: 0 16px 16px !important;     /* align with CTA side padding */
    margin: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    text-align: initial !important;      /* undo center from earlier rules */
  }

  /* Each <li> is a grid item */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul > li{
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }

  /* Card look for links: equal size, soft purple outline */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul > li > a{
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 60px;                         /* equal visual height */
    padding: 10px 12px !important;
    border-radius: 18px;
    background: transparent;
    border: 2px solid #d4c6f6;/* soft purple outline (#60418b) */
    text-align: center !important;
  }

  /* Hover/focus state (slightly stronger outline) */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul > li > a:hover,
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul > li > a:focus{
    border-color: rgba(97,66,139,.55);
    outline: none;
  }
}

/* === Exemption: 'Intern' (7th item) — small, subtle, centered === */
@media (max-width:1200px){
  /* Place it on its own row and center it */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul > li:nth-child(7){
    grid-column: 1 / -1;       /* span both cols */
    justify-self: center;      /* center within grid */
  }

  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul > li:nth-child(7) > a{
    width: auto !important;    /* no full-width card */
    min-width: 160px;          /* keep a good tap target */
    height: 40px !important;   /* smaller */
    padding: 6px 12px !important;
    border: none !important;   /* no outline */
    background: transparent !important;
    border-radius: 12px;
    text-align: center !important;
    color: rgba(97,66,139,.72) !important; /* muted purple text */
    opacity: .85;                              /* slightly transparent */
    box-shadow: none !important;
  }
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul > li:nth-child(7) > a:hover,
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul > li:nth-child(7) > a:focus{
    opacity: .95;
    text-decoration: underline;
    outline: none;
  }
}
/* === Tighten space under 'Intern' (mobile pop-up) === */
@media (max-width:1200px){
  /* reduce nav + list bottom padding */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary{
    padding-bottom: 0 !important;            /* was 12px */
  }
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul{
    padding: 0 16px 4px !important;          /* keep sides, tiny bottom */
  }

  /* make sure the Intern item itself adds no extra space */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul > li:nth-child(7){
    margin-bottom: 0 !important;
  }
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary > ul > li:nth-child(7) > a{
    margin-bottom: 0 !important;
    /* optional: slightly tighter link for an even smaller footprint */
    padding-bottom: 4px !important;
  }

  /* iOS safe-area friendly (keeps it flush without overlap) */
  @supports (padding: max(0px)){
    #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary{
      padding-bottom: max(0px, env(safe-area-inset-bottom)) !important;
    }
  }
}

/* SEARCH BAR FIX */
/* === Mobile pop-up: responsive search row === */
@media (max-width:1200px){
  /* Treat the form as the layout container */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary .search-form{
    order: 1 !important;
    position: relative;                 /* anchor the button */
    display: block !important;
    width: 100% !important;
    margin: 10px 16px 8px !important;

    /* tweakables */
    --search-btn-size: 52px;            /* purple square size */
    --search-gap: 8px;                  /* space between input and button */
    --search-radius: 14px;
  }

  /* Input fills the row and leaves room for the button */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary
  .search-form .search-field{
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 12px;
    padding-right: calc(var(--search-btn-size) + var(--search-gap));
    border-radius: var(--search-radius);
  }

  /* Show + align the submit button */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary
  .search-form .search-submit{
    display: grid !important;           /* unhide if it was hidden */
    place-items: center;
    position: absolute;
    top: 50%;                           /* <— perfectly centered vertically */
    right: 0;
    transform: translateY(-50%);
    width: var(--search-btn-size);
    height: var(--search-btn-size);
    border-radius: var(--search-radius);
    margin: 0; padding: 0; border: 0;

    background: #60418b;                /* theme purple */
    color: #fff;
    cursor: pointer;
  }

  /* Icon size inside the button (if it's an SVG or .icon) */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary
  .search-form .search-submit svg,
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary
  .search-form .search-submit .icon{
    width: 22px; height: 22px;
  }
}
/* === Mobile pop-up: make search responsive & align the button === */
@media (max-width:1200px){
  /* 1) The form as container */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"]{
    order:1 !important;
    position:relative;
    display:block !important;
    width:100% !important;
    margin:10px 16px 8px !important;

    /* tweakables */
    --search-btn-size: 52px;
    --search-gap: 8px;
    --search-radius: 14px;
  }

  /* 2) Input fills row; leaves room for button */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"]
  input[type="search"], 
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"]
  input[type="text"]{
    box-sizing:border-box;
    width:100%;
    height:48px;
    padding:0 12px;
    padding-right:calc(var(--search-btn-size) + var(--search-gap));
    border-radius:var(--search-radius);
  }

  /* 3) Button INSIDE the form */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"]
  button[type="submit"],
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"]
  input[type="submit"]{
    display:grid !important;            /* unhide if it was hidden */
    place-items:center;
    position:absolute;
    top:50%; right:0; transform:translateY(-50%); /* ← aligns vertically */
    width:var(--search-btn-size); height:var(--search-btn-size);
    border-radius:var(--search-radius);
    margin:0; padding:0; border:0;
    background:#60418b; color:#fff; cursor:pointer;
  }

  /* 4) Button as NEXT SIBLING of the form (if your icon is outside) */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"] + *[type="button"],
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"] + button,
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"] + a{
    display:grid !important; place-items:center;
    width:var(--search-btn-size); height:var(--search-btn-size);
    margin:0 16px 8px 8px; border-radius:var(--search-radius);
    background:#60418b; color:#fff;
    align-self:center;
  }
  /* If you use the sibling button, make the row flex */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary .search-row{
    display:flex; align-items:center; gap:var(--search-gap);
    margin:10px 0 8px;
  }
}
/* ==== Mobile pop-up: align & space the search row neatly ==== */
@media (max-width:1200px){
  /* Form becomes a row so input ends before the button */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"]{
    order:1 !important;
    display:flex !important;
    align-items:center;
    gap: 4px;                              /* ← space between input & button */
    position:static !important;
    width:100% !important;
    margin:10px 16px 8px !important;       /* aligns with the big buttons */

    /* tweakables */
    --search-btn-size: 50px;
    --search-radius: 14px;
  }

  /* If WP wraps the input in a <label>, let it flex */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"] > label{
    flex: 1 1 auto;
    margin:0; padding:0;
  }

  /* Input (direct or inside label) */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"] > label > input[type="search"],
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"] > input[type="search"]{
    box-sizing:border-box;
    width:100%;
    height:48px;
    border-radius: var(--search-radius);
    padding: 0 12px;                        /* text padding */
    padding-right: 2.25em;                  /* room for the ⓧ clear icon */
  }

  /* Submit button: sits a bit to the LEFT (aligns with card edges) */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"] > button[type="submit"],

  /* Nudge the iOS clear “x” a bit to the RIGHT */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"]
  input[type="search"]::-webkit-search-cancel-button{
    position: relative;
    /*right: -4px;                            /* move 4px toward the edge */
  }
}
@media (max-width:1200px){
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"] + button,
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"] + a{
    margin-right: 4px; /* pulls the button slightly left */
  }
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"]
  input[type="search"]{ margin-right: 12px; } /* small gap before the button */
}
/* === Mobile pop-up: nudge the iOS clear (×) only === */
@media (max-width:1200px){
  /* keep the input baseline consistent */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"]
  input[type="search"]{
    height: 48px;              /* your current height */
    line-height: 48px;         /* centers text; helps visual balance */
  }

  /* iOS clear icon: move slightly up/down & a hair to the right */
  #mobile-menu-checkbox:checked ~ header.site-header nav.nav-primary form[role="search"]
  input[type="search"]::-webkit-search-cancel-button{
    -webkit-appearance: searchfield-cancel-button; /* keep native glyph */
    transform: translateY(-200px);   /* ↑ negative = up, positive = down */
    margin-right: -4px;            /* push a bit toward the edge */
  }
}









/* === 3) PRIMARY NAV (lavender band, desktop) ============================ */
.site-header .nav-primary{
  position: absolute; left: 0; right: 0; top: var(--top-stripe);
  height: var(--nav-h);                        /* ← tweak via :root */
  background: #E8E0F5;                         /* soft lavender */
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 56px;                         /* space on right (search icon) */
  z-index: 1002; border-bottom: 0;
}
/* Menu list layout */
.site-header .nav-primary ul{
  display: flex; gap: 48px;                    /* ← tweak desktop gap */
  margin: 0; padding: 0; list-style: none; padding-right: 42px;
  flex-wrap: wrap; margin-left: auto; justify-content: flex-end;
}
/* Menu links */
.site-header .nav-primary a{
  color: #60418b; font-weight: 700; text-decoration: none;
}
.site-header .nav-primary a:hover{ color: #f47e67; }
/* Tablet/phone readability */
@media (max-width: 1200px){
  .site-header .nav-primary ul{ gap: 16px; padding: 0 12px; }  /* ← tweak */
}
/* Optionally center items on very small screens */
@media (max-width: 640px){
  .site-header .nav-primary ul{ justify-content: center !important; }
}


/* === 4) SEARCH CONTROL (icon + dropdown) ================================ */
/* Icon on lavender bar (right) */
.search-toggle{
  position: absolute; right: 14px;
  top: calc(var(--top-stripe) + (var(--nav-h) - 24px)/2); /* ~24px icon */
  z-index: 1003; color: #4a3574;
}
/* Dropdown panel */
.searchbar{
  position: absolute; right: 12px; top: calc(var(--top-stripe) + var(--nav-h));
  background: #fff; border-radius: 12px; padding: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.searchbar form{ display: flex; gap: 8px; }
.searchbar input{
  border: 2px solid #d8c8f3; border-radius: 10px; padding: 8px 12px;
  min-width: 220px;                               /* ← tweak input width */
}


/* === 5) BANNER SPACING (push banner below nav) ========================== */
.header-inner{
  padding-top: calc(var(--top-stripe) + var(--nav-h) + 16px) !important; /* ← */
  align-items: center; /* assumes .header-inner is flex in theme */
}


/* === 6) BRANDING (logo, title, subtitle) ================================ */
.site-branding{ display: flex; align-items: center; gap: 20px; }  /* ← tweak */
.site-branding .custom-logo-link{ display: inline-flex; line-height: 0; }
/* Logo size (keeps aspect ratio) */
.site-branding img.custom-logo{
  max-height: 64px; height: auto !important; width: auto !important;
}
@media (min-width: 1024px){
  .site-branding img.custom-logo{ max-height: 80px; } /* desktop bump */
}
/* Title */
.site-title{
  font-size: clamp(1.8rem, 1vw + 1rem, 2.8rem);
  line-height: 1.1; font-weight: 800; margin: 0;
}
/* Subtitle (tagline) */
.site-description{
  color: #f47e67; font-weight: 500; margin-top: 2px; line-height: 0.7;
}


/* === 7) HEADER CTAS (right-aligned in banner) =========================== */
.header-ctas{
  margin-left: auto; justify-content: flex-end; text-align: right;
}

/* === 8) FOOTER + NEWSLETTER ============================================ */

/* Newsletter strip with lines like the mockup */
.footer-newsletter{
  background:#FFFFFF; color:#60418b;
  border-top:8px solid #60418b;    /* thick top line */
  border-bottom:3px solid #60418b; /* thin separator above footer */
}
.newsletter-grid{
  display:grid; gap:24px;
  grid-template-columns: 1.4fr 1.8fr;
  align-items:center;
  padding:28px 0;
}
/* Inherit footer heading look/size */
.footer-newsletter h4{ color:#60418b; margin:0 0 10px; }
.footer-newsletter p{ margin:0; }

/* Form layout */
.newsletter-form{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  column-gap:20px;
}
.newsletter-form input[type="email"]{
  background:transparent; color:#60418b;
  border:none; border-bottom:2px solid #60418b;
  padding:14px 6px 10px;
  font-size: 1rem;       /* or: font-size: inherit; */
  font-weight: 400;      /* match footer copy */
  font-family: inherit;  /* ensures same font as footer */
  outline:none;
}
.newsletter-form input[type="email"]::placeholder{ color:#c8bdd9; }
.newsletter-form input[type="email"]:focus{ border-bottom-color:#f47e67; }

/* BUTTON — match homepage buttons (like .hero .hero-news-btn) */
.newsletter-button{
  appearance:none; -webkit-appearance:none;
  background:#fff;                 /* white fill */
  color:#60418b;                   /* brand purple text */
  border:2px solid #60418b;        /* 2px outline like hero button */
  text-decoration:none;
  display:inline-block;
  padding:10px 16px;               /* same feel as hero button */
  font-size: 1rem;       /* or: inherit */
  font-weight: 700;      /* match footer copy */
  line-height:1;
  cursor:pointer;
	
	

  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .08s ease;           /* tap/press effect */
}
.newsletter-button:hover,
.newsletter-button:focus{
  background:#60418b;
  color:#fff;
}
.newsletter-button:active{
  transform: translateY(1px) scale(0.98);
}
.newsletter-button:focus-visible{
  outline:2px solid rgba(96,65,139,.35);
  outline-offset:2px;
}
.newsletter-button[disabled]{
  pointer-events: none;
  opacity: .85;           /* subtle “inactive” cue */
  cursor: not-allowed;
}

.newsletter-button{
  border-radius: 12px; /* same rounded look as your other homepage buttons */
}


/* Hide honeypot field */
.newsletter-form .hp{ position:absolute; left:-5000px; }

/* Visually hidden label */
.sr-only{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Footer columns (site footer) */
.site-footer{
  background:#FFFFFF !important; color:#4a3574;
  border-top:0;                    /* thin line already drawn by newsletter */
  padding:28px 0 40px;
}
.footer-grid{
  display:grid; gap:32px;
  grid-template-columns: 1.2fr 1fr 1fr;
  align-items:start;
}
/* Headings */
.site-footer h4{ color:#60418b; margin:0 0 10px; }

/* Link lists */
.footer-links, .social-links{
  list-style:none; margin:0; padding:0;
  display:grid; gap:8px;
}
.footer-links a, .social-links a{
  color:#60418b; font-weight:400; text-decoration:none;
}
.footer-links a:hover, .social-links a:hover{
  color:#f47e67; text-decoration:underline;
}

/* Legal text */
.footer-legal{ font-size:1rem; }
.footer-legal a{ color:#60418b; text-decoration:underline; }
.footer-legal div + div{ margin-top:4px; }

/* Right-side heading + logo */
.footer-right h4{ margin:0 0 8px; color:#60418b; }
.footer-logo img{ max-height:44px; width:auto; display:block; margin-bottom:10px; }

/* Responsive */
@media (max-width: 1200px){
  .newsletter-grid{ grid-template-columns:1fr; row-gap:14px; }
  .newsletter-form{ grid-template-columns:1fr; row-gap:14px; }
  .footer-grid{ grid-template-columns:1fr; }
}



/* ========================================================================
   9) MOBILE: GLOBAL TOGGLES & OVERLAY MENU (≤1200px)
   ------------------------------------------------------------------------
   NOTE: We keep BOTH implementations to match your current theme behavior.
         A) pure CSS via #mobile-menu-checkbox
         B) JS-assisted via body.menu-open
         The duplicate sections below are intentional and order-preserving.
   ======================================================================== */

/* -- 9A) Make header non-sticky on mobile; hide desktop nav/search -------- */
@media (max-width: 1200px){
  .site-header{ position: static; }           /* frees vertical space */
  .header-inner{ padding-top: 16px !important; } /* remove lavender gap */
  .site-header .nav-primary{ display: none; } /* hidden until overlay */
  .search-toggle{ display: none; }
}

/* -- 9B) Mobile 'Menu' toggle button (floating) --------------------------- */
/* (Shown on mobile only; hidden on desktop further below) */
@media (max-width: 1200px){
  .mobile-menu-toggle{
    position: fixed; right: 14px; top: 12px; z-index: 2200;
    display: inline-flex; align-items: center; gap: 10px;
    background: #FFFFFF; border: 1px solid #E8E0F5; border-radius: 12px;
    padding: 10px 12px; cursor: pointer; text-decoration: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
  }
  .mobile-menu-label{ font-weight: 700; font-size: 0.95rem; color: #60418b; }
  .mobile-menu-toggle .bars{
    position: relative; width: 24px; height: 2px; background: #60418b;
    transition: transform .25s ease, background .25s ease;
  }
  .mobile-menu-toggle .bars::before,
  .mobile-menu-toggle .bars::after{
    content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: #60418b;
    transition: transform .25s ease, top .25s ease, opacity .25s ease;
  }
  .mobile-menu-toggle .bars::before{ top: -7px; }
  .mobile-menu-toggle .bars::after{  top:  7px; }
}
/* Hide the mobile toggle on desktop (duplicated intentionally) */
@media (min-width: 901px){
  .mobile-menu-toggle{ display: none !important; }
}

/* -- 9C) IMPLEMENTATION A: Checkbox (#mobile-menu-checkbox) --------------- */
@media (max-width: 1200px){
  /* Full-screen overlay when checked */
  #mobile-menu-checkbox:checked ~ .site-header .nav-primary{
    display: flex; position: fixed; inset: 0; height: 100vh; width: 100vw;
    z-index: 2000; background: #E8E0F5;
    padding: 80px 24px 32px; justify-content: center; align-items: center;
  }
  /* Vertical menu list */
  #mobile-menu-checkbox:checked ~ .site-header .nav-primary ul{
    flex-direction: column; gap: 24px; justify-content: center; align-items: center;
  }
  #mobile-menu-checkbox:checked ~ .site-header .nav-primary a{
    font-size: 1.2rem; font-weight: 700; color: #60418b;
  }
  /* Morph hamburger into “X” when open */
  #mobile-menu-checkbox:checked + .mobile-menu-toggle .bars{ transform: rotate(45deg); }
  #mobile-menu-checkbox:checked + .mobile-menu-toggle .bars::before{ top: 0; transform: rotate(90deg); }
  #mobile-menu-checkbox:checked + .mobile-menu-toggle .bars::after{ top: 0; opacity: 0; }
}

/* -- 9D) IMPLEMENTATION B: body.menu-open (JS-assisted) ------------------- */
@media (max-width: 1200px){
  body.menu-open .mobile-menu-toggle .bars{ transform: rotate(45deg); }
  body.menu-open .mobile-menu-toggle .bars::before{ top: 0; transform: rotate(90deg); }
  body.menu-open .mobile-menu-toggle .bars::after{ top: 0; opacity: 0; }

  body.menu-open .site-header .nav-primary{
    display: flex; position: fixed; inset: 0; height: 100vh; width: 100vw;
    z-index: 2000; background: #E8E0F5;
    padding: 80px 24px 32px; justify-content: center; align-items: center;
  }
  body.menu-open .site-header .nav-primary ul{
    flex-direction: column; gap: 18px; justify-content: center; align-items: center;
  }
  body.menu-open .site-header .nav-primary a{
    font-size: 1.2rem; font-weight: 700; color: #60418b;
  }
}
/* Hide the mobile toggle on desktop (duplicate kept to preserve order) */
@media (min-width: 901px){
  .mobile-menu-toggle{ display: none !important; }
}


/* -- 9E) Overlay menu tweaks (centered) + CTA pills on mobile ------------- */
@media (max-width: 1200px){
  /* Hide banner CTAs in normal mobile view (avoid overlap) */
  .header-ctas a{ display: none !important; }

  /* Center overlay content */
  body.menu-open .site-header .nav-primary{
    display:flex; position:fixed; inset:0; height:100vh; width:100vw;
    z-index:2000; background:#E8E0F5;
    padding:100px 24px 32px; justify-content:center; align-items:center; text-align:center;
  }
  body.menu-open .site-header .nav-primary ul{
    flex-direction:column; justify-content:center; align-items:center; gap:24px;
  }

  /* CTA pill styling when shown inside overlay (broad matchers kept) */
  body.menu-open .site-header .nav-primary li.menu-cta a,
  body.menu-open .site-header .nav-primary a[href*="help"],
  body.menu-open .site-header .nav-primary a[href*="zoek"],
  body.menu-open .site-header .nav-primary a[href*="hulp"],
  body.menu-open .site-header .nav-primary a[href*="gift"],
  body.menu-open .site-header .nav-primary a[href*="don"],
  body.menu-open .site-header .nav-primary a[href*="doneer"],
  body.menu-open .site-header .nav-primary a[href*="donatie"],
  body.menu-open .site-header .nav-primary a[href*="donation"]{
    display:inline-block; padding:12px 18px; border-radius:999px;
    font-weight:700; text-decoration:none; border:2px solid #60418b;
  }
}
/* Never show cloned CTA items in desktop nav */
@media (min-width: 901px){
  .site-header .nav-primary li.menu-cta{ display:none !important; }
}


/* -- 9F) OPTION B: Reuse desktop CTAs inside mobile pop-up ---------------- */
@media (max-width: 1200px){
  /* — Tweakables — */
  :root{
    --cta-h: 50px;               /* visual height per CTA */
    --cta-gap: 11px;             /* space between CTAs */
    --cta-stack: calc(3*var(--cta-h) + 2*var(--cta-gap));
    --group-anchor: 40vh;        /* move stack: lower 44vh / higher 36vh */
  }
  @supports (height: 1dvh){
    :root{ --group-anchor: 32dvh; } /* better on iOS toolbars */
  }

  /* Center overlay as a grid */
  body.menu-open .site-header .nav-primary,
  #mobile-menu-checkbox:checked ~ .site-header .nav-primary{
    display: grid; place-items: center; align-content: center;
    padding: 0 24px 32px; background: #E8E0F5;
  }

  /* Spacer equal to CTA stack height for perfect centering */
  body.menu-open .site-header .nav-primary::before,
  #mobile-menu-checkbox:checked ~ .site-header .nav-primary::before{
    content: ""; display: block; height: calc(var(--cta-stack) + -10px);
  }

  /* Re-show desktop CTAs (no recolors — uses desktop styles) */
  body.menu-open .header-ctas a[href*="/doneren"],
  body.menu-open .header-ctas a[href*="/vacatures"],
  body.menu-open .header-ctas a[href*="/hulp"],
  #mobile-menu-checkbox:checked ~ .site-header .header-ctas a[href*="/doneren"],
  #mobile-menu-checkbox:checked ~ .site-header .header-ctas a[href*="/vacatures"],
  #mobile-menu-checkbox:checked ~ .site-header .header-ctas a[href*="/hulp"]{
    display: block !important; position: fixed; left: 50%; transform: translateX(-50%);
    width: min(560px, 90vw); z-index: 3000; text-align: center;
    padding: 14px 18px !important; border-radius: 999px !important;
    font-weight: 700 !important; line-height: 1.2;
  }

  /* Vertical positions around --group-anchor */
  body.menu-open .header-ctas a[href*="/doneren"],
  #mobile-menu-checkbox:checked ~ .site-header .header-ctas a[href*="/doneren"]{
    top: calc(var(--group-anchor) - (var(--cta-stack)/2)); min-height: var(--cta-h);
  }
  body.menu-open .header-ctas a[href*="/vacatures"],
  #mobile-menu-checkbox:checked ~ .site-header .header-ctas a[href*="/vacatures"]{
    top: calc(var(--group-anchor) - (var(--cta-stack)/2) + var(--cta-h) + var(--cta-gap));
    min-height: var(--cta-h);
  }
  body.menu-open .header-ctas a[href*="/vacatures"],
  #mobile-menu-checkbox:checked ~ .site-header .header-ctas a[href*="/vacatures"]{
    top: calc(var(--group-anchor) - (var(--cta-stack)/2) + 2*(var(--cta-h) + var(--cta-gap)));
    min-height: var(--cta-h);
  }

  /* Menu list under the CTAs (truly centered) */
  body.menu-open .site-header .nav-primary ul,
  #mobile-menu-checkbox:checked ~ .site-header .nav-primary ul{
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 15px; margin: 0; padding: 0; text-align: center;
  }
}

/* Disable page scroll when checkbox-driven overlay is open */
@media (max-width: 1200px){
  html:has(#mobile-menu-checkbox:checked){
    overflow: hidden; height: 100dvh; overscroll-behavior: none;
  }
}

/* Transparent wrappers so the inline background-image on .slide-inner stays */
.hero,
.hero .swiper,
.hero .swiper-slide,
.hero .slide-overlay{
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* The image container: keep the bg-image, just ensure it covers */
.hero .slide-inner{
  /* no background: ... here! */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: clamp(280px, 25vw, 560px); /* ensure the image is visible */
}

/* Scope to the homepage hero slider */
.hero .swiper{
  /* Swiper CSS variables (v6+) */
  --swiper-theme-color: #f47e67;
  --swiper-pagination-color: #f47e67;
  --swiper-pagination-bullet-inactive-color: rgba(244,126,103,.35);
  --swiper-pagination-bullet-inactive-opacity: 1;
}
/* Fallback for older Swiper builds */
.hero .swiper .swiper-pagination-bullet{ background:#f47e67; opacity:.35; }
.hero .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active{ opacity:1; }


/* -- 9G) Mobile: logo pin + size/background states ----------------------- */
/* (Card-like logo button by default when open) */
@media (max-width: 1200px){
  body.menu-open .site-header .site-branding .custom-logo-link,
  #mobile-menu-checkbox:checked ~ .site-header .site-branding .custom-logo-link{
    position: fixed; top: 12px; left: 20px; z-index: 3200;
    display: inline-flex; padding: 6px; background: #FFFFFF;
    border: 1px solid #E8E0F5; border-radius: 12px; text-decoration: none;
  }
  /* Keep logo small at first */
  body.menu-open .site-header .site-branding img.custom-logo,
  #mobile-menu-checkbox:checked ~ .site-header .site-branding img.custom-logo{
    max-height: 26px; width: auto; height: auto;
  }
}
/* (Later override: bigger logo + remove white card) — ORDER IS IMPORTANT */
@media (max-width: 1200px){
  body.menu-open .site-header .site-branding img.custom-logo,
  #mobile-menu-checkbox:checked ~ .site-header .site-branding img.custom-logo{
    max-height: 66px;   /* ← tweak (e.g., 40px) */
    height: auto; width: auto;
  }
  body.menu-open .site-header .site-branding .custom-logo-link,
  #mobile-menu-checkbox:checked ~ .site-header .site-branding .custom-logo-link{
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    padding: 6px; /* keeps comfy tap target; set 0 for tighter */
  }
}




/* ------------- SEARCH BAR ------------------ */

.search-hero { margin: 24px 0 32px; }
.search-form{
  position: relative;
  border: 2px solid var(--purple);
  border-radius: 8px;
  background: var(--bg, #FFE4C3);
}
.search-field{
  width: 100%;
  padding: 14px 50px 14px 20px;
  font-size: 1.25rem;
  border: 0;
  outline: none;
  background: transparent;
  color: #2A1E3F;
}
.search-submit{
  position: absolute;
  right: 10px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; padding: 8px; cursor: pointer; line-height: 0;
  color: var(--purple);
}

/* Results */
.search-count{ text-align: right; font-size: .95rem; color: var(--purple); margin-top: 8px; }
.search-result{ padding: 20px 0; border-top: 2px solid var(--orange); }
.search-result .result-type{
  margin: 0 0 6px; font-weight: 700; letter-spacing: .06em; font-size: .9rem;
  color: #1e9f6e; /* accent for "NIEUWS" etc. */
}
.search-result .entry-title a{ color: var(--purple); text-decoration: none; }
.search-result .entry-title a:hover{ text-decoration: underline; }
.result-date{ display: inline-block; margin-top: 6px; color:#6b5a83; font-size:.95rem; }


/* === 10) CONTENT CARD REMOVAL (“white square”) ========================== */
/* Harmless outline to kill any browser white flash */
body{ outline:2px solid transparent !important; }
/* Remove the white card on pages, posts, archives, search */
.content{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; }
/* Keep nice spacing without the card */
.content > article{ padding:8px 0 24px; }
.content > article:last-of-type{ padding-bottom:0; }


/* === 11) MOBILE SAFE-AREA / BLACK BAR PATCH + SLIDER TEXT COLORS ========= */
@media (max-width: 1200px){
  /* Ensure the top purple stripe still renders */
  .site-header::before{
    content:""; position:absolute; inset:0 0 auto 0;
    height: var(--top-stripe); background: #60418b; z-index: 1001; opacity: 1;
  }
  /* Paint device safe-area with lavender (no black bar) */
  body::before{
    content:""; position: fixed; top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top, 0px); background: #E8E0F5;
    z-index: 3500; pointer-events: none;
  }
  /* Keep floating Menu button below safe-area */
  .mobile-menu-toggle{
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    z-index: 5000 !important;
  }
  /* Respect safe-area in overlay */
  body.menu-open .site-header .nav-primary,
  #mobile-menu-checkbox:checked ~ .site-header .nav-primary{
    padding-top: calc(env(safe-area-inset-top, 0px) + 80px) !important;
    z-index: 3000 !important;
  }
  /* Ensure background reaches true top */
  html, body, .wp-site-blocks{ background: #FFE4C3 !important; }
  /* Tighten title color rules so slider stays white */
  .content .entry-title,
  .content .wp-block-post-title,
  .content .page-title,
  .content h1, .content h2, .content h3{
    color: #60418b !important; /* purple only inside content area */
  }
  /* Keep slider/hero text white on mobile */
  .swiper .entry-title, .swiper h1, .swiper h2, .swiper h3,
  .home .swiper *{ color: #FFFFFF !important; }
}


/* === 12) MISC SAFETY & ADMIN BAR ======================================== */
/* Fix earlier typo that could cause odd overlays */
body.menu-open .site-header .nav-primary ul,
#mobile-menu-checkbox:checked ~ .site-header .nav-primary ul{
  display: flex; /* was "fixed" by mistake */
}
/* Optional: hide WP admin bar on mobile to avoid layout shift */
@media (max-width: 1200px){
  #wpadminbar{ display:none !important; }
  html{ margin-top:0 !important; }
}


/* Albus Search — nav-sized + icon scale-on-open */
#albus-search {
  /* smaller control so it fits the nav */
  font-size: 12px;
  border: solid 0.18em #60418b;
  display: inline-block;
  position: relative;
  border-radius: 2em;             /* was 2.5em */
  /* start as a small magnifier */
  transform: scale(0.5);          /* Step 2: 50% size by default */
  transform-origin: right center; /* grow from the right edge */
  transition: transform 150ms ease;
}

/* Grow only when the INPUT is focused (not when the reset button is) */
#albus-search:has(input[type="search"]:focus) {
  transform: scale(1);
}

/* Keep WHOLE box expanded whenever the input has content (CSS-only) */
#albus-search:has(input[type="search"]:not(:placeholder-shown)) {
  transform: scale(1);
}

/* INPUT — smaller pill + shorter open width */
#albus-search input[type="search"] {
  font-family: inherit;
  font-weight: bold;
  width: 2em;                     /* was 2.5em */
  height: 2em;                    /* was 2.5em */
  padding: 0.25em 1.8em 0.25em 0.4em; /* tightened */
  border: none;
  box-sizing: border-box;
  border-radius: 2em;
  background-color: transparent;  /* small state transparent */
  transition: width 800ms cubic-bezier(0.68,-0.55,0.27,1.55) 150ms,
              background-color 150ms ease;  /* animate bg too */
  -webkit-appearance: none;
  appearance: none;
}

#albus-search input[type="search"]:focus { outline: none; }

#albus-search input[type="search"]:focus,
#albus-search input[type="search"]:not(:placeholder-shown) {
  width: 12em;                    /* was 18em — fits nav */
  background-color: #ffffff;      /* open state white */
  transition: width 800ms cubic-bezier(0.68,-0.55,0.27,1.55),
              background-color 150ms ease;
}

/* KILL native clear icon(s) */
#albus-search input[type="search"]::-webkit-search-cancel-button,
#albus-search input[type="search"]::-webkit-search-decoration,
#albus-search input[type="search"]::-webkit-search-results-button,
#albus-search input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
  width: 0 !important; height: 0 !important; opacity: 0 !important;
  pointer-events: none !important; margin: 0 !important; padding: 0 !important;
}
#albus-search input[type="search"]::-ms-clear,
#albus-search input[type="search"]::-ms-reveal {
  display: none !important; width:0 !important; height:0 !important;
}

@media (min-width:901px){
/* RESET BUTTON — smaller handle, same X on open */
#albus-search button[type="reset"] {
  background: transparent;
  width: 1.2em;                   /* was 1.7em */
  height: 1.2em;                  /* was 1.7em */
  border: 0;
  padding: 0;
  outline: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: calc((2em / 2) - (1.2em / 2));
  right: calc((2em / 2) - (1.2em / 2));
  transform: rotate(-45deg) translateY(calc(2em - 0.18em));
  transition: transform 150ms ease-out 150ms;
}

#albus-search input[type="search"]:focus + button[type="reset"],
#albus-search input[type="search"]:not(:placeholder-shown) + button[type="reset"] {
  transform: rotate(-45deg) translateY(0);
  transition: transform 150ms ease-out 800ms;
}

#albus-search button[type="reset"]::before,
#albus-search button[type="reset"]::after {
  content: "";
  background-color: #60418b;
  width: 0.18em;                  /* thinner stroke */
  height: 1.2em;                  /* match handle size */
  position: absolute;
}

#albus-search button[type="reset"]::after {
  transform: rotate(90deg);
  opacity: 0;
  transition: transform 150ms ease-out, opacity 150ms ease-out;
}

#albus-search input[type="search"]:focus + button[type="reset"]::after,
#albus-search input[type="search"]:not(:placeholder-shown) + button[type="reset"]::after {
  opacity: 1;
  transition:
    top 150ms ease-out 950ms,
    right 150ms ease-out 950ms,
    opacity 150ms ease 950ms;
}
}
	
/* Default: hide mobile form on desktop */
.mobile-search-form { display: none; }

@media (max-width: 1200px) {
  /* Hide the desktop (animated) search on phones */
  .albus-search-form { display: none !important; }

  /* Show + style the mobile search */
  .mobile-search-form {
    display: flex;
    position: relative;
    width: 100%;
    margin: 1rem 0 .5rem;
  }

  .mobile-search-form input[type="search"] {
    flex: 1;
    height: 46px;                          /* big tap target */
    padding: 0 .9rem 0 0.9rem;              /* even padding */
    padding-right: 3.2rem;                  /* space for button */
    font-size: 16px;                        /* prevents iOS zoom */
    border: 2px solid #60418b;
    border-radius: 12px;
    background: #fff;
    outline: none;
  }

  .mobile-search-form .mobile-search-btn {
    position: absolute;
    right: 4px; top: 4px; bottom: 4px;
    width: 40px;
    display: inline-flex;
    align-items: center; justify-content: center;
    border: none;
    border-radius: 10px;
    background: #60418b;
    color: #fff;
    cursor: pointer;
  }

  .mobile-search-form .mobile-search-btn:active { transform: translateY(1px); }
}

/* Desktop: hide mobile search */
.mobile-search-form { display: none; }

@media (max-width: 1200px) {
  .albus-search-form { display: none; }   /* hide desktop search */
  .mobile-search-form { display: flex; }  /* show mobile search */
}
/* === MOBILE SEARCH — flex layout + desktop-like icon === */
@media (max-width: 1200px){

  /* 0) Local sizing vars (no nesting) */
  .mobile-search-form{
    --mob-input-h: clamp(44px, 9vw, 52px);                  /* input/button height */
    --mob-submit:  var(--mob-input-h);                       /* square submit */
    --mob-gap:     22px;                                     /* gap between input & submit */
    --mob-clear:   clamp(32px, calc(var(--mob-input-h)*0.75), 40px); /* ✕ scales with input */
  }

  /* 1) Use flex so input always fills up to the purple button */
  .mobile-search-form{
    display: flex !important;
    align-items: center;
    gap: var(--mob-gap);
    position: relative;          /* anchor the ✕ overlay */
    width: 100%;
    margin: 1rem 0 .5rem;
  }

  /* 2) Input grows, with padding for the ✕ that sits “inside” on the right */
  .mobile-search-form input[type="search"]{
    flex: 1 1 0%;                         /* CHANGED from 1 1 auto */
    min-width: 0;                          /* ADDED */
    height: 48px;
    margin-left: -15px;                    /* keep */
    padding-right: calc(var(--mob-clear) + 2px);  /* room for ✕ */
    border: 2px solid #60418b;
    border-radius: 12px;
    background: #fff;
    font-size: 16px;               /* avoid iOS zoom */
  }

  /* 3) Submit = fixed-width square; aligns with CTAs because it’s a sibling, not absolutely positioned */
  .mobile-search-form .mobile-search-btn{
    flex: 0 0 var(--mob-submit);
    height: 48px;
    width: 48px;
    border: 0;
    border-radius: 12px;
    background: #60418b;
    cursor: pointer;
    margin-right: 30px;                                   /* keep */
  }

  /* 4) Draw the magnifier with the same proportions as desktop */
  .mobile-search-form .mobile-search-btn::before,
  .mobile-search-form .mobile-search-btn::after{
    content:"";
    position: absolute;
    pointer-events: none;
  }
  /* circle */
  .mobile-search-form .mobile-search-btn::before{
    width: 18px; height: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    left: 50%; top: 50%;
    transform: translate(-70%,-70%); /* slight right/up bias like desktop */
  }
  /* handle (same angle as desktop) */
  .mobile-search-form .mobile-search-btn::after{
    width: 2px; height: 12px;
    background: #fff;
    left: 50%; top: 50%;
    transform: translate(2px, 1px) rotate(-45deg);
    transform-origin: top center;
  }

  /* 5) Clear (✕) sits inside the input, to the right edge (just left of the submit square) */
  .mobile-search-form .mobile-clear-btn{
    /*position: absolute;*/
    right: calc(var(--mob-submit) + var(--mob-gap) + 30px); /* CHANGED: account for submit margin */
    top: 6px; bottom: 6px;
    width: var(--mob-clear);
    border: 0;
    border-radius: 2px;
    background: transparent;
    display: none;                 /* only when there’s text */
    align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 3;                    /* ensure above input */
  }
  .mobile-search-form:has(input[type="search"]:not(:placeholder-shown)) .mobile-clear-btn{
    display: flex;
  }
  .mobile-search-form .mobile-clear-btn::before,
  .mobile-search-form .mobile-clear-btn::after{
    content:"";
    position:absolute;
    width:2px; height:16px; background:#60418b;
  }
  .mobile-search-form .mobile-clear-btn::before{ transform: rotate(45deg); }
  .mobile-search-form .mobile-clear-btn::after { transform: rotate(-45deg); }

  .mobile-search-form{ padding-inline: 16px; }

  /* 6) Kill native clear to avoid a double ✕ */
  .mobile-search-form input[type="search"]::-webkit-search-cancel-button{ display:none; }
}



/* ==== SEARCH RESULTS — match Nieuws list styling ==== */
/* Scope to search pages only so nothing else is affected */
.search-results .content{
  --mowe-purple: #60418b;
  --mowe-orange: #ea6d59;
  --mowe-green:  #0faa85;
  --mowe-text:   #5d4a43;
  --paper:       #f7ead5;
  background: var(--paper);
  padding: 1.25rem 1.25rem 2.5rem;
  border-radius: 10px;
}

/* Each result row: grid with left thumb + right body, orange separators */
.search-results .search-result{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.1rem 1.5rem;
  align-items: start;
  padding: 1.25rem 0;
  border-bottom: 2px solid var(--mowe-orange);
}

/* Rounded 16:9 thumbnail */
.search-results .result-thumb{
  display: block;
  width: 240px;
  aspect-ratio: 16/9;
  border-radius: 20px;
  overflow: hidden;
  background: #eee;
}
.search-results .result-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.search-results .result-thumb.no-thumb{ background: #e7d9c4; }

/* Body text colors */
.search-results .result-body{ color: var(--mowe-text); }

/* Type label (Nieuws/Pagina/Dienst/Project…) — uppercase green */
.search-results .result-type{
  margin: 0 0 .25rem;
  color: var(--mowe-green);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Title — bold purple */
.search-results .entry-title{
  margin: 0 0 .35rem;
}
.search-results .result-link{
  color: var(--mowe-purple);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.2vw, 2.05rem);
  line-height: 1.12;
  text-decoration: none;
}
.search-results .result-link:hover{
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* Date — only rendered for Nieuws in PHP; style as orange */
.search-results .result-date{
  display: block;
  color: var(--mowe-orange);
  font-weight: 700;
  margin-bottom: .55rem;
  font-size: .98rem;
}

/* Excerpt + Lees meer arrow */
.search-results .entry-excerpt{ max-width: 72ch; }
.search-results .more-link{
  font-weight: 800;
  text-decoration: none;
}
.search-results .more-link::after{
  content: " \2192"; /* → */
  font-weight: 800;
}

/* Pagination can use a bit of spacing */
.search-results .navigation.pagination{
  margin-top: 1.25rem;
}

/* Mobile: stack */
@media (max-width: 1200px){
  .search-results .search-result{ grid-template-columns: 1fr; }
  .search-results .result-thumb{ width: 100%; max-width: 520px; }
}










/* ------------------------------------------------------------- */

/* HOME PAGE: 4 SECTIES */ 

/* ------------------------------------------------------------- */

/* ===== HOME: 4 quick sections above the hero =====
   EDIT THESE:
   --tile-h-desktop  → desktop tile height
   --tile-h-mobile   → mobile tile height
   --mobile-desc-display → "none" to hide subtitle on mobile, "block" to show
   --quick-side-pad  → side padding of the full-width row (keep 0 to match the hero)
*/

.home-quick{
  --tile-h-desktop: clamp(220px, 28vh, 320px);  /* ← DESKTOP height */
  --tile-h-mobile : clamp(120px, 20vh, 180px);  /* ← MOBILE height  */
  --mobile-desc-display: none;                  /* none|block       */

  /* Make the tile row full-width like the slider */
  --quick-side-pad: 0px; /* set e.g. 24px if your hero has side gutters */

  --quick-gap: clamp(14px, 2.2vw, 24px);
  padding-top: clamp(8px, 1.8vw, 14px);
}

/* FULL-WIDTH grid (no internal max-width limiting it) */
.quick-grid{
  width: 100%;
  max-width: none;          /* ← remove cap */
  margin: 0;                /* ← no centering margin */
  padding-inline: var(--quick-side-pad); /* ← keep 0 to match hero */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--quick-gap);
}

.quick-card{
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  /* Base gradient in case no image uploaded yet */
  background: linear-gradient(160deg, #e8e1f3 0%, #d4c9e7 100%);
  min-height: var(--tile-h-desktop); /* ← DESKTOP height source */
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 2px 0 rgba(0,0,0,.08) inset;
  transition: transform .15s ease, box-shadow .15s ease;
}
.quick-card:hover{ transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,.16); }

/* background image + tint (layered correctly) */
.quick-bg{
  position: absolute; inset: 0;
  z-index: 0; /* bottom layer */
  background-size: cover; background-position: center;
  filter: saturate(1.05);
}
.quick-card::after{
  content: ""; position: absolute; inset: 0;
  z-index: 1; /* tint above image, below ribbon */
  background: var(--tint, linear-gradient(to bottom right, rgba(0,0,0,.28), rgba(0,0,0,.18)));
}

/* ribbon sits on top, opaque so text isn’t transparent */
.quick-ribbon{
  position: absolute; left: 0; right: 0;
  bottom: clamp(12px, 3%, 22px);
  z-index: 2; /* text fully opaque */
  display: flex; align-items: center; gap: .8rem;
  margin: 0 auto;
  width: calc(100% - 2*clamp(12px, 2.4vw, 22px));
  padding: .9rem 1.05rem;
  border-radius: 14px;
  background: var(--ribbon-bg, #6e4da3);  /* opaque */
  border: 2px solid rgba(255,255,255,.85);
}

.quick-icon{ width: clamp(40px, 4.6vw, 56px); height: auto; flex: 0 0 auto; margin-top: 2px; }
.quick-text{ display: block; min-width: 0; }
.quick-title{
  display: block; line-height: 1.08;
  font-weight: 800; font-size: clamp(18px, 2.2vw, 26px); color: #fff;
}
.quick-desc{
  display: block; margin-top: .25rem;
  font-size: clamp(12px, 1.4vw, 15px); color: #fff; /* no extra opacity */
  max-width: 42ch;
}
.quick-arrow{
  margin-left: auto; align-self: center;
  font-weight: 700; font-size: clamp(18px, 2.3vw, 24px); color: #fff;
  transition: transform .15s ease;
}
.quick-card:hover .quick-arrow{ transform: translateX(4px); }

/* Per-tile colors (tint + ribbon) */
.card--vacatures{ --tint: linear-gradient(to bottom right, rgba(110,77,163,.55), rgba(110,77,163,.25)); --ribbon-bg: #60418bBF; }
.card--hulp     { --tint: linear-gradient(to bottom right, rgba(234,130,80,.50), rgba(234,130,80,.20)); --ribbon-bg: #f47e69BF; }
.card--doneren  { --tint: linear-gradient(to bottom right, rgba(195,170,226,.45), rgba(195,170,226,.15)); --ribbon-bg: #e8dff6CC; }
.card--overons  { --tint: linear-gradient(to bottom right, rgba(175,131,190,.50), rgba(175,131,190,.20)); --ribbon-bg: #FFFFFFBF; }

/* === Bottom row: custom text colors === */
.card--doneren .quick-title,
.card--doneren .quick-desc,
.card--doneren .quick-arrow{
  color: #60418b;   /* pick your color for Doneren */
}

.card--overons .quick-title,
.card--overons .quick-desc,
.card--overons .quick-arrow{
  color: #60418b;   /* pick your color for Over ons */
}


/* Mobile: stack, keep all 4 visible; “Ik zoek hulp” first */
@media (max-width: 1200px){
  .quick-grid{
    grid-template-columns: 1fr;
    gap: clamp(8px, 2.4vw, 14px);
    padding-inline: var(--quick-side-pad); /* stays 0 unless you want gutters */
  }
  .quick-card{
    min-height: var(--tile-h-mobile); /* ← MOBILE height source */
  }
  .card--hulp{ order: -1; } /* show first on mobile */

  .quick-ribbon{ bottom: clamp(10px, 4%, 18px); }

  /* SUBTITLE VISIBILITY (toggle via --mobile-desc-display above) */
  .quick-desc{ display: var(--mobile-desc-display, none) !important; }
}










/* ================================================================
   Featured Project (Project in de kijker)
   - Locks media to the column width
   - Crops to 10:7 (height = 70% of width)
   - Never pushes the Events box out of view
   ================================================================= */

/* Let this column shrink inside the row/grid */
.home-sections > .featured-service { min-width: 0 !important; }

/* Card wrapper */
.featured-service .feature-card{
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;                 /* hide cropped parts */
  border-radius: 12px;
  text-decoration: none;
  box-sizing: border-box;
}

/* Image as background on a fixed-ratio box -> cannot widen the layout */
.featured-service .feature-thumb{
  width: 100%;
  aspect-ratio: 5 / 2;             /* max-height = 60% of width */
  background-size: cover;           /* crop without distortion */
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
}

/* Text area under the image */
.featured-service .feature-meta{
  padding: 12px 0 0;
}

/* Small label above the title */
.featured-service .feature-label{
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: .08em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--purple, #60418b);    /* uses theme var if present */
}

/* Title below the label */
.featured-service .feature-title{
  margin: .25rem 0 0;
  color: #2A1E3F;
  line-height: 1.2;
}

/* Optional: when no page is selected yet */
.featured-service .feature-empty{
  padding: 8px 0 0;
  color: #6b5a85;
  font-style: italic;
}

/* Nice hover lift (optional) */
@media (hover:hover) {
  .featured-service .feature-card:hover{
    transform: translateY(-2px);
    transition: transform .2s ease;
  }
}

/* Ensure columns can shrink: prevents media from widening the row */
.home-sections > .box,
.home-sections > .featured-service { min-width: 0 }

/* If .home-sections uses CSS Grid, make tracks shrinkable */
@supports (display: grid) {
  .home-sections { grid-template-columns: minmax(0,1fr) minmax(0,1fr) }
}

/* Featured Project card */
.featured-service .feature-card{
  display:block;
  width:100%;
  max-width:100%;
  text-decoration:none;
  border-radius:12px;
  overflow:hidden;             /* hide cropped parts */
  box-sizing:border-box;
}


/* Meta */
.featured-service .feature-meta{ padding:12px 0 0 }
.featured-service .feature-label{
  display:inline-block; font-size:.75rem; letter-spacing:.08em;
  font-weight:700; text-transform:uppercase; color:var(--purple,#60418b)
}
.featured-service .feature-title{ margin:.25rem 0 0; color:#2A1E3F; line-height:1.2 }

/* Safety: if an old <img class="feature-thumb"> still slips through, hide it */
.featured-service img.feature-thumb{ display:none !important }
/* Title styling for the featured project */
.featured-service .feature-title{
  color:#60418b;                 /* your purple */
  font-size:clamp(1.35rem, 1rem + 1.2vw, 1.7rem);  /* scales nicely */
  line-height:1.2;
  margin-top:.25rem;
  font-weight:700;
}

/* MOBILE VERSION */
/* Mobile: show Events first, Featured Project second */
@media (max-width: 1200px){
  .home-sections{ 
    display: flex !important;     /* override grid if any */
    flex-direction: column;
    gap: var(--grid-gap, 24px);    /* keep spacing; adjust if needed */
  }
  .home-sections > .box{ order: 1; }                 /* default (Events) */
  .home-sections > .box.featured-service{ order: 2; } /* push Featured below */
}

a.mowe-download-qr{
	color: #ffffff;
}

/* position context (keep if you already added it) */
.hero { position: relative; }

/* MEER NIEUWS KNOP 
 * _______________________________
 * */
.hero .hero-news-btn{
  position: absolute;
  right: 10px;      /* ← tweak horizontally */
  bottom: 25px;     /* ← tweak vertically */
  z-index: 20;

  background: #fff;             /* white fill */
  color: #60418b;               /* brand purple text */
  border: 2px solid #60418b;    /* outline */
  text-decoration: none;
}

/* Hover/focus */
.hero .hero-news-btn:hover,
.hero .hero-news-btn:focus{
  background: #60418b;
  color: #fff;
}

/* Optional: smaller screens */
@media (max-width: 1200px){
  .hero .hero-news-btn{
    right: 12px;
    bottom: 12 px;
    padding: 8px 12px;
    font-size: 0.95rem;
  }
}

/* Smooth hover like the others */
.hero .hero-news-btn{
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .08s ease;   /* for the tap/press effect */
}

/* Tiny press animation */
.hero .hero-news-btn:active{
  transform: translateY(1px) scale(0.98);
}

/* Accessible focus ring */
.hero .hero-news-btn:focus-visible{
  outline: 2px solid rgba(96,65,139,.35);
  outline-offset: 2px;
}

/* Respect reduced-motion preferences (optional) */
@media (prefers-reduced-motion: reduce){
  .hero .hero-news-btn{ transition: none; }
}

/* 1) Leave room on the right for the fixed hero button */
.hero .slide-overlay{
  padding-right: clamp(110px, 18vw, 240px); /* ≈ button width + margin */
  padding-bottom: 24px;                      /* a little bottom space */
}

/* 2) Mobile: no right reserve (button is closer), add bottom space instead */
@media (max-width: 1200px){
  .hero .slide-overlay{
    padding-right: 0;
    padding-bottom: 56px;  /* space for the button height */
  }
}

/* (Optional) make it feel clickable */
.hero .slide-more{ cursor: pointer; }

/* (Safety net) ensure overlay text accepts clicks if anything disabled it */
.hero .slide-overlay, .hero .slide-overlay *{ pointer-events: auto; }


/* Base look for the two section buttons (white fill, purple text/border) */
.home-sections .btn.btn-outline{
  background:#fff;
  color:#60418b;
  border:2px solid #60418b;
  text-decoration:none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .08s ease;
}

/* Hover/focus: match the hero button effect */
.home-sections .btn.btn-outline:hover,
.home-sections .btn.btn-outline:focus{
  background:#60418b;
  color:#fff;
  border-color:#60418b;
}

/* Optional: a tiny press effect + accessible focus */
.home-sections .btn.btn-outline:active{ transform: translateY(1px) scale(0.98); }
.home-sections .btn.btn-outline:focus-visible{ outline:2px solid rgba(96,65,139,.35); outline-offset:2px; }

/* Space above the "Volledige agenda" button */
.home-sections .box .events-actions{
  margin-top: 12px;   /* ← tweak this value to taste (e.g., 16–28px) */
}

/* If the list itself adds extra bottom margin, neutralize it */
.home-sections .box .events-list{
  margin-bottom: 0;
}

/* Optional: slightly tighter on small screens */
@media (max-width: 1200px){
  .home-sections .box .events-actions{ margin-top: 12px; }
}





/* ---------------------------------------*/

/* POST LAYOUT */

/* ---------------------------------------*/

/* ===== Single Post Layout ===== */
.post-single { --purple:#60418b; --orange:#f47e67; --ink:#824337; }

.post-hero {
  /* no flow-root here so the floated image can wrap with title + body */
  margin-bottom: 1.6rem;
}
.post-back { margin: 0 0 .75rem; }

.btn.btn--outline{
  display:inline-block; font-weight:700; border:2px solid var(--purple);
  border-radius:14px; padding:8px 14px; color:var(--purple); text-decoration:none;
}
.btn.btn--outline:hover{ background:var(--purple); color:#fff; transition:.2s ease; }

.post-cats{ list-style:none; margin:0 0 .5rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.cat-chip{
  display:inline-block; background:#E8E0F5; color:var(--purple); border-radius:999px;
  padding:.3rem .7rem; font-weight:700; text-decoration:none; font-size:.9rem;
}
.cat-chip:hover{ background:var(--purple); color:#fff; }

.entry-title{
  font-size:clamp(1.8rem, 2.4vw + 1rem, 2.8rem);
  line-height:1.15; color:var(--purple); margin:.25rem 0 .5rem;
}

.post-meta{ color:#6b607f; font-weight:600; margin-bottom:1.1rem; }

/* Wrapped image next to the title (desktop) */
.post-hero .post-featured{
  float:right;
  width:min(44%, 550px);
  margin:0 0 1rem 1.25rem;   /* gap between image and text */
  border-radius:22px;
  overflow:hidden;
  -webkit-shape-outside: inset(0 round 22px);
  shape-outside: inset(0 round 22px);
  /* optional nudge:
     margin-top:-4px; */
}
.post-hero .post-featured img{
  display:block; width:100%; height:auto; object-fit:cover;
}

/* Body text */
.entry-content{ font-size:1.0625rem; line-height:1.7; color:var(--ink); }
.entry-content > :is(h2,h3,h4){ color:var(--ink); margin-top:1.6em; }
.entry-content figure{ margin:1.2rem 0; }
.entry-content blockquote{
  border-left:4px solid var(--purple); padding:.75rem 1rem; margin:1rem 0; background:#faf8ff; border-radius:8px;
}

/* Line under the article: brand orange */
.post-footer{ margin-top:2rem; border-top:2px solid #f47e67; padding-top:1.25rem; }

.post-tags{ list-style:none; margin:0 0 1rem; padding:0; display:flex; gap:.5rem; flex-wrap:wrap; }
.tag-chip{ display:inline-block; background:#f6f3ff; color:var(--purple); border:1px solid #d8cfff;
  border-radius:999px; padding:.28rem .65rem; font-weight:600; }

.post-share{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.post-share .share-link{ text-decoration:none; font-weight:700; color:var(--purple); }
.post-share .share-link:hover{ color:#fff; background:var(--purple); border-radius:10px; padding:.2rem .5rem; }

/* Prevent footer jump: lock button/link dimensions */
.post-share .share-link,
.post-nav a{
  display:inline-block;
  padding:.2rem .5rem;             /* set padding by default */
  border:2px solid transparent;    /* reserve space for the border */
  border-radius:10px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.post-share .share-link:hover,
.post-nav a:hover{
  background:var(--purple);
  color:#fff;
  border-color:var(--purple);      /* color in the border */
  /* no padding change on hover */
}

/* Clear the float so the article encloses the image */
.post-single::after{ content:""; display:block; clear:both; }

/* Mobile: image appears BELOW the title */
@media (max-width: 1200px){
  .entry-title{ font-size:clamp(1.6rem, 5vw + 1rem, 2.2rem); }

  /* reorder header elements so figure comes after title/meta on mobile */
  .post-hero{ display:flex; flex-direction:column; }
  .post-hero .entry-title{ order:1; }
  .post-hero .post-meta{ order:2; }
  .post-hero .post-featured{
    order:3;
    float:none; width:100%;
    margin:0 0 1rem 0; border-radius:12px;
    -webkit-shape-outside:auto; shape-outside:auto;
  }
}










/* ---------------------------------------*/

/* NIEUWSPAGINA LAY-OUT */

/* ---------------------------------------*/

/* ==== NIEUWS ARCHIVE (match the sketch) ==== */
.page-nieuws.grouped-by-year,
.category-nieuws.grouped-by-year{
  --mowe-purple: #60418b;   /* titles */
  --mowe-orange: #ea6d59;   /* lines & year */
  --mowe-green:  #0faa85;   /* category */
  --mowe-text:   #5d4a43;   /* body */
  --paper:       #f7ead5;   /* warm background behind the list */
}

/* Give the archive a warm panel background (optional; remove if your page already has one) */
.page-nieuws.grouped-by-year .news-archive{
  background: var(--paper);
  padding: 1.25rem 1.25rem 2.5rem;
  border-radius: 10px;
}

/* YEAR HEADING: big year with an orange rule continuing to the right */
.grouped-by-year .year-heading{
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.75rem 0 0;
}
.grouped-by-year .year-heading .year-text{
  color: var(--mowe-orange);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.1;
}
.grouped-by-year .year-heading::after{
  content: "";
  height: 2px;
  background: var(--mowe-orange);
  flex: 1 1 auto;
  transform: translateY(2px);
}

/* LIST & ROWS */
.grouped-by-year .news-list{
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}
.grouped-by-year .news-item{
  display: grid;
  grid-template-columns: 240px 1fr;       /* thumbnail + content */
  gap: 1.1rem 1.5rem;
  align-items: start;
  padding: 1.25rem 0;
  border-bottom: 2px solid var(--mowe-orange);
}

/* THUMBNAIL (rounded 16:9) */
.grouped-by-year .news-thumb{
  display: block;
  width: 240px;
  aspect-ratio: 16/9;
  border-radius: 20px;
  overflow: hidden;
  background: #eee;
}
.grouped-by-year .news-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grouped-by-year .news-thumb.no-thumb{ background: #e7d9c4; }

/* BODY */
.grouped-by-year .news-body{ color: var(--mowe-text); }
.grouped-by-year .news-link{ text-decoration: none; }

/* CATEGORY (uppercase green) */
.grouped-by-year .news-cat{
  display: inline-block;
  margin-bottom: .25rem;
  color: var(--mowe-green);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* TITLE (bold purple) */
.grouped-by-year .news-title{
  display: block;
  font-weight: 800;
  color: var(--mowe-purple);
  font-size: clamp(1.35rem, 2.2vw, 2.05rem);
  line-height: 1.12;
  margin: 0 0 .35rem;
}
.grouped-by-year .news-link:hover .news-title{
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* DATE (small, bold, orange) */
.grouped-by-year .news-date{
  display: block;
  color: var(--mowe-orange);
  font-weight: 700;
  margin-bottom: .55rem;
  font-size: .98rem;
}

/* EXCERPT with bold 'Lees meer →' */
.grouped-by-year .news-excerpt{
  max-width: 72ch;
}
.grouped-by-year .news-excerpt a{
  font-weight: 800;
}
.grouped-by-year .news-excerpt a::after{
  content: " \2192";  /* → */
  font-weight: 800;
}

/* MOBILE: stack */
@media (max-width: 1200px){
  .grouped-by-year .news-item{ grid-template-columns: 1fr; }
  .grouped-by-year .news-thumb{ width: 100%; max-width: 520px; }
}

/* ===== NEWS FILTER BAR — match single-post .cat-chip look ===== */
.page-nieuws .news-filters{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin:.2rem 0 1rem; padding:0;
}

/* Base chip matches .cat-chip (from your single-post CSS) */
.page-nieuws .filter-chip{
  display:inline-block;
  background:#E8E0F5;
  color:var(--purple, #60418b);
  border-radius:999px;
  padding:.3rem .7rem;
  font-weight:700;
  text-decoration:none;
  font-size:.9rem;
  line-height:1;
  border:0; /* outline version not used here */
  position:relative;
}

/* Hover mirrors your .cat-chip:hover */
.page-nieuws .filter-chip:hover{
  background:var(--purple, #60418b);
  color:#fff;
  transition:.2s ease;
}

/* Selected state stays “inverted” and shows a small × */
.page-nieuws .filter-chip.is-active{
  background:var(--purple, #60418b);
  color:#fff;
}
.page-nieuws .filter-chip.is-active .chip-x{
  display:inline-block;
  margin-left:.45rem;
  font-weight:900;
  line-height:1;
}

/* Respect your color vars if defined on the page */
.page-nieuws{
  --purple:#60418b; /* fallback; your theme may already set this */
}









/* ---------------------------------------*/

/* GENERAL BUTTON */

/* ---------------------------------------*/

/* Mondiale Werken button style (force hover fill, no glow) */
:root{
  --mowe-primary: #60418b;
  --mowe-radius: 16px;
  --mowe-trans: 220ms cubic-bezier(.2,.6,.2,1);
}

/* Base (covers Gutenberg buttons + shared button class) */
.wp-block-button .wp-block-button__link,
a.wp-block-button__link,
.wp-element-button,
a.wp-element-button{
  display:inline-flex;
  align-items:center;
  gap:.5ch;
  padding:.72rem 1.2rem;
  border:2px solid var(--mowe-primary) !important;
  border-radius: var(--mowe-radius);
  background: transparent !important;          /* idle = transparent */
  background-color: transparent !important;
  color: var(--mowe-primary) !important;
  text-decoration: none !important;            /* no underline until hover */
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none !important;                 /* remove any “shine” */
  transition:
    background-color var(--mowe-trans),
    color var(--mowe-trans),
    border-color var(--mowe-trans);
  -webkit-tap-highlight-color: transparent;
}

/* Hover/focus: solid purple + white + underline */
.wp-block-button .wp-block-button__link:hover,
a.wp-block-button__link:hover,
.wp-element-button:hover,
a.wp-element-button:hover,
.wp-block-button .wp-block-button__link:focus-visible,
a.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
a.wp-element-button:focus-visible{
  background: var(--mowe-primary) !important;
  background-color: var(--mowe-primary) !important;
  border-color: var(--mowe-primary) !important;
  color: #fff !important;
  text-decoration: underline !important;
  box-shadow: none !important;                 /* no outer glow */
}

/* Ensure WP outline/fill styles don’t fight this */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link{
  background: transparent !important;
  background-color: transparent !important;
  color: var(--mowe-primary) !important;
  border-color: var(--mowe-primary) !important;
}

/* Accessibility: respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .wp-block-button .wp-block-button__link,
  .wp-element-button{
    transition: none;
  }
}


/* --------------------------- */
/* READ MORE BUTTONS */

:root{
  --mowe-primary:#60418b;
  --mowe-radius:16px;
  --mowe-trans:220ms cubic-bezier(.2,.6,.2,1);
}

/* Buttony summary */
.mowe-readmore > summary{
  display:inline-flex; align-items:center; gap:.6ch;
  padding:.9rem 1.2rem;
  border:2px solid var(--mowe-primary); border-radius:var(--mowe-radius);
  background:transparent; color:var(--mowe-primary);
  font-weight:600; font-size:1.06rem; line-height:1.2;
  cursor:pointer; user-select:none; list-style:none; text-decoration:none;
  transition:background-color var(--mowe-trans), color var(--mowe-trans), border-color var(--mowe-trans);
}
.mowe-readmore > summary::-webkit-details-marker{ display:none; }

.mowe-readmore > summary:hover,
.mowe-readmore > summary:focus-visible{
  background:var(--mowe-primary);
  color:#fff;
  outline:none;
}

/* Body spacing */
.mowe-readmore__body{ padding-top:.9rem; }

/* Icon sizing + rotation */
.mowe-rm__icon{ display:inline-flex; transform:rotate(-90deg); transition:transform var(--mowe-trans); }
.mowe-rm__icon svg{ width:1.125rem; height:1.125rem; stroke:currentColor; fill:none; }
.mowe-readmore[open] .mowe-rm__icon{ transform:rotate(0deg); }

/* Static icons (e.g., plus) don't rotate */
.mowe-rm__icon--static{ transform:none !important; }
.mowe-readmore[open] .mowe-rm__icon--static{ transform:none !important; }


/* ------------------ */
/* IMAGE BUTTONS */

:root{
  --mowe-radius-media: 16px; /* tweak as you like */
}

/* Core Image block — round the actual image */
.wp-block-image img{
  border-radius: var(--mowe-radius-media, 16px);
  display: block;             /* avoids stray inline gaps */
}

/* Keep WP's built-in circular style working */
.wp-block-image.is-style-rounded img{
  border-radius: 9999px;
}

/* (Optional) if you want full-bleed images to stay square */
.wp-block-image.alignfull img{
  border-radius: 0;
}

/* Editor preview */
.editor-styles-wrapper .wp-block-image img{
  border-radius: var(--mowe-radius-media, 16px);
}

/* Fixed height */
.wp-block-image img{
  max-width: 100%;          /* never overflow container */
  /* REMOVE width:auto; */  /* this was causing the “huge” images */
  height: 350px !important;  /* prevent distortion from any stray rules */
  display: block;
}

/* ------------------- */
/* BUG FIX */










/* ---------------------------------------*/

/* GENERAL PAGE LAY-OUT */

/* ---------------------------------------*/

/* ===== GENERAL PAGE (default template) ===== */

/* Hide the Dienst/Project kicker row if it ever appears on pages */
body.page .single-head .kicker{ display:none !important; }

/* Title */
body.page .entry-title,
body.page .single-title,
body.page .page-title{
  color: var(--mowe-primary);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin: .25rem 0 1rem;
  line-height: 1.06;
}

/* Body text + links */
body.page .entry-content{
  color: #824337;
}
body.page .entry-content p{
  font-size: 1.05rem;
  line-height: 1.7;
}
body.page .entry-content a{
  color: var(--mowe-primary);
  text-decoration: underline;
}

/* Featured image floated left with rounded wrap.
   Targets classic themes (.post-thumbnail),
   block themes (.wp-block-post-featured-image),
   and first image inside content as a fallback. */
body.page .post-thumbnail,
body.page .wp-block-post-featured-image,
body.page .entry-content > .wp-block-image:first-child,
body.page .entry-content img.wp-post-image{
  float: left;
  width: min(46%, 520px);
  margin: 0 1.5rem 1rem 0;
  border-radius: 1.2rem;
  overflow: hidden;
  -webkit-shape-outside: inset(0 round 1.2rem);
          shape-outside: inset(0 round 1.2rem);
}

/* Ensure the image fills its box nicely */
body.page .post-thumbnail img,
body.page .wp-block-post-featured-image img,
body.page .entry-content > .wp-block-image:first-child img,
body.page .entry-content img.wp-post-image{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: inherit;
}

/* Clear floats at the end of the content so footers/next blocks don't tuck under */
body.page .entry-content::after{
  content:"";
  display:block;
  clear:both;
}

/* Responsive: image full width, no wrap */
@media (max-width: 1200px){
  body.page .post-thumbnail,
  body.page .wp-block-post-featured-image,
  body.page .entry-content > .wp-block-image:first-child,
  body.page .entry-content img.wp-post-image{
    float: none;
    width: 100%;
    margin: 0 0 1rem 0;
    -webkit-shape-outside: auto;
            shape-outside: auto;
  }
}


/* ---------------------------------------*/

/* HORIZONTAL SCROLL */


/* Horizontal scroll container */
/* Horizontal scrolling row of images */
.logos-scroll{
  display:flex;                /* ensure side-by-side */
  flex-wrap:nowrap;            /* no wrapping to next line */
  gap: clamp(.5rem, 2vw, 1rem);
  overflow-x:auto;             /* enable horizontal scroll */
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding: 0 0 .5rem;
  scroll-snap-type: x mandatory;  /* nice snapping */
}

/* Each child (Image block) behaves like a slide */
.logos-scroll > .wp-block-image{
  flex: 0 0 auto;              /* don't shrink */
  scroll-snap-align: start;
}

/* Control visual size (uniform heights, width auto) */
.logos-scroll img{
  height: 72px;                /* adjust to taste */
  width: auto;
  display:block;
}

/* Thin scrollbar (optional) */
.logos-scroll{ scrollbar-width: thin; }
.logos-scroll::-webkit-scrollbar{ height: 8px; }
.logos-scroll::-webkit-scrollbar-thumb{ border-radius: 8px; background: rgba(0,0,0,.25); }


/* Nice thin scrollbar (optional) */
.hscroll{ scrollbar-width: thin; }
.hscroll::-webkit-scrollbar{ height: 8px; }
.hscroll::-webkit-scrollbar-thumb{ border-radius: 8px; background: rgba(0,0,0,.25); }
.hscroll::-webkit-scrollbar-track{ background: transparent; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hscroll{ scroll-behavior: auto; }
}










/* ---------------------------------------*/

/* EVENEMENTENPAGINA LAY-OUT */

/* ---------------------------------------*/

/* Title — apply same style on normal pages AND the Events archive */
body:is(.page, .post-type-archive-tribe_events) .entry-title,
body:is(.page, .post-type-archive-tribe_events) .single-title,
body:is(.page, .post-type-archive-tribe_events) .page-title{
  color: var(--mowe-primary);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin: .25rem 0 1rem;
  line-height: 1.06;
}











/* ---------------------------------------*/

/* DIENSTEN & PROJECTEN LAY-OUT */

/* ---------------------------------------*/

.domein-block{margin:1.5rem 0 2rem}
.domein-heading{margin:0 0 .5rem;color:var(--mowe-primary);font-size:1.35rem}
.domein-list{margin:0;padding-left:1rem}
.domein-list .domein-item{margin:.15rem 0;list-style:disc}
.domein-list a{text-decoration:none}
.domein-list a:hover{text-decoration:underline}
/* Put the cross-link on the right of the heading */
.domein-heading-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
}
.domein-crosslink{
  font-size:.95rem; text-decoration:none; border-bottom:1px solid transparent;
}
.domein-crosslink:hover{ border-bottom:1px solid currentColor; }

/* Make anchored section visible below sticky header */
.domein-block{ scroll-margin-top: 110px; } /* tweak to your sticky header height */

/* Highlight when jumped to via #anchor */
.domein-block:target{
  outline:2px solid var(--mowe-secondary);
  background:rgba(245,127,104,.08);
  border-radius:.5rem;
  padding: .25rem .25rem;
}


/* ===== SINGLE: Dienst / Project ===== */

.single-entry.styled{padding:1rem 0 2rem}

/* Top line with tag + domein-pill */
.single-head .kicker{
  font-weight:700; letter-spacing:.03em; display:flex; align-items:center; gap:.6rem;
}
.kicker-type{
  display:inline-block; padding:.15rem .55rem; border-radius:.55rem; 
  border:2px solid currentColor; text-transform:uppercase;
  line-height:1; font-size:.9rem;
}
/* Color the tag by type */
.single-entry--dienst .kicker-type{ color: var(--mowe-primary); }      /* purple */
.single-entry--project .kicker-type{ color: var(--mowe-secondary); }    /* orange */

/* Domein chip (links to Diensten anchor) */
.domein-pill{
  display:inline-block; border:2px solid var(--mowe-secondary); color:var(--mowe-secondary);
  padding:.15rem .55rem; border-radius:.55rem; text-decoration:none; font-weight:600;
}
.domein-pill:hover{ background:rgba(245,127,104,.12) }

.single-title{
  color:var(--mowe-primary);
  font-size:clamp(2rem, 4.5vw, 3.2rem);
  margin:.25rem 0 1rem; line-height:1.06;
}

/* === LAYOUT: wrap text around the image ===
   - We stop using grid; we float the image (and CTA) left.
   - Text in .single-right flows next to it and continues under it when long.
*/
.single-grid{ display:block; }              /* cancel any previous grid */
.single-left{ /* container only; floats are inside */ }
.single-right{ color:#824337; }             /* requested text color */
.single-right .entry-content p{ font-size:1.05rem; line-height:1.7; }
.single-right .entry-content a{ color:var(--mowe-primary); text-decoration:underline; }

/* Floated image with rounded shape for nicer wrap */
.single-figure{
  float:left;
  width:min(46%, 520px);
  margin:0 1.5rem 1rem 0;
  border-radius:1.2rem; overflow:hidden;
  /* make wrapping follow the rounded shape */
  -webkit-shape-outside: inset(0 round 1.2rem);
          shape-outside: inset(0 round 1.2rem);
}
.single-figure img{
  display:block; width:100%; height:auto;
  aspect-ratio: 4/3; object-fit:cover;
}

/* CTA card sits below the image, aligned left */
.cta-card{
  float:left; clear:left;
  width:min(46%, 520px);
  margin:.6rem 1.5rem 1rem 0;
  text-decoration:none; border-radius:1rem;
  background:#f6a48f; /* soft orange like the sketch */
  box-shadow:0 3px 20px rgba(0,0,0,.08);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cta-card:hover{ transform:translateY(-2px); box-shadow:0 6px 26px rgba(0,0,0,.12) }
.cta-card-inner{ display:grid; grid-template-columns:auto 1fr auto; gap:.8rem; align-items:center; padding:1rem 1.1rem }
.cta-icon{ width:56px; height:56px; object-fit:cover; border-radius:14px; background:#fff }
.cta-title{ display:block; color:#5d3f88; font-size:1.05rem }
.cta-sub{ display:block; color:#5d3f88; opacity:.9; font-size:.95rem }
.cta-arrow{ font-weight:900; font-size:1.4rem; color:#5d3f88 }

/* Info box at the bottom */
.info-box{
  clear:both; /* ensure it sits under floated elements */
  margin-top:1.25rem; border:2px solid var(--mowe-primary);
  border-radius:.8rem; padding:.9rem 1rem; background:rgba(97,66,139,.05);
}
.info-row{ display:flex; gap:.5rem; margin:.25rem 0; color:#824337; }
.info-label{ font-weight:700 }
.info-value{ flex:1 }

/* Anchored sections on overview pages (kept from before) */
.domein-block{ scroll-margin-top: 110px; }
.domein-block:target{
  outline:2px solid var(--mowe-secondary);
  background:rgba(245,127,104,.08);
  border-radius:.5rem;
  padding:.25rem;
}

/* Responsive */
@media (max-width: 1200px){
  .single-figure,
  .cta-card{
    float:none; width:100%; margin:0 0 1rem 0;
  }
}
/* Color the DIENST/PROJECT tag by post type */
body.single-dienst  .kicker-type { color: var(--mowe-primary);  border-color: var(--mowe-primary); }
body.single-project .kicker-type { color: var(--mowe-secondary); border-color: var(--mowe-secondary); }
/* ===== Dienst/Project: make the Domein tag look like the post cat-chip ===== */

/* same local palette used on posts */
.single-layout{ --purple:#60418b; --orange:#f47e67; --ink:#824337; }

/* Color the DIENST/PROJECT label by type (keeps your current behavior) */
body.single-dienst  .kicker-type { color: var(--purple);  border-color: var(--purple); }
body.single-project .kicker-type { color: var(--orange);  border-color: var(--orange); }

/* Domein tag = identical to .cat-chip */
.domein-pill{
  display:inline-block;
  background:#E8E0F5;                   /* same pill bg as posts */
  color:var(--purple);                   /* same text color as posts */
  border-radius:999px;
  padding:.3rem .7rem;
  font-weight:700;
  font-size:.9rem;
  text-decoration:none;
  border:none;                           /* remove earlier 2px border */
  line-height:1;
}
.domein-pill:hover{
  background:var(--purple);
  color:#fff;
}

/* spacing next to the DIENST/PROJECT label */
.kicker{ display:flex; align-items:center; gap:.5rem; }

/* ===== Relation sections on singles ===== */
.related{
  margin-top:1.5rem;
  padding-top:1.25rem;
  border-top:2px solid var(--mowe-secondary); /* brand orange line */
}
.related-title{
  color:var(--mowe-primary);                   /* brand purple */
  font-weight:800;
  margin:0 0 .6rem;
}

/* List layout */
.related-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.related-list li{ margin:0; }

/* Make the links look like your standard outline button */
.related-list a,
.related-dienst a{
  display:inline-block;
  font-weight:700;
  text-decoration:none;
  color:var(--mowe-primary);
  border:2px solid var(--mowe-primary);
  border-radius:14px;
  padding:.45rem .8rem;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.related-list a:hover,
.related-dienst a:hover{
  background:var(--mowe-primary);
  color:#fff;
  border-color:var(--mowe-primary);
}

/* Small screens: stack neatly */
@media (max-width:1200px){
  .related-list{ gap:.4rem; }
}
/* Arrow only for: Projecten van deze dienst */
.related.related-projects .related-list a{
  position: relative;
  padding-right: 1.9rem; /* room for the arrow */
}

.related.related-projects .related-list a::after{
  content: "→";
  position: absolute;
  right: .7rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  color: currentColor; /* follows text color (turns white on hover) */
  line-height: 1;
}




/* DIENSTEN and PROJECTEN archive pages */
/* ===== Diensten / Projecten overview ===== */
:root{
  --mowe-primary:#60418b;           /* purple */
  --mowe-secondary:#f47e67;         /* orange */
  --ink:#824337;                    /* body text */
  --peach:#FFE4C3;
}

/* container spacing (uses your existing .content wrapper) */
.content--dienst-overview,
.content--project-overview{ padding-bottom:2rem; }

/* One domein block */
.domein-block{ margin:1.2rem 0 1.6rem; }

/* Heading bar with icon */
.domein-heading-row{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.domein-heading{
  color: var(--bar-text, #fff);                 /* default bar color (will be overridden per domein) */
  display:flex; align-items:center; gap:.6rem;
  width:100%;
  color:#fff; font-weight:800; line-height:1; font-size:1.15rem;
  background:var(--bar);
  padding:.8rem 1rem; border-radius:.5rem;
  position:relative;
}
.domein-heading::before{
  /* ICON — replace url(...) with your real Media URLS if needed */
  --icon:url('wonen.svg');          /* default (overridden per domein below) */
  content:""; flex:0 0 28px; height:28px;
  background: #fff;
  -webkit-mask-image: var(--icon);
          mask-image: var(--icon);
  -webkit-mask-size: contain;       mask-size: contain;
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-position: center;    mask-position: center;
  opacity:.95;
}

/* List of items */
.domein-list{ list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:.6rem; }
.domein-item a{
  --accent: var(--bar);                                /* follows the heading color */
  display:block; text-decoration:none; font-weight:800;
  color: var(--mowe-primary);
  background: color-mix(in srgb, var(--peach) 78%, #fff 22%);
  border:2px solid color-mix(in srgb, var(--accent) 45%, #fff 55%);
  border-radius:.9rem; padding:.7rem 1rem;
  transition: background .2s ease, border-color .2s ease, transform .1s ease;
  position:relative;
}
.domein-item a::after{
  content:"→"; position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  font-weight:900; color: color-mix(in srgb, var(--accent) 80%, #000 20%);
}
.domein-item a:hover{
  background:#fff; border-color: var(--accent); transform:translateY(-1px);
}

/* Cross-link button under list */
.domein-crosslink{
  --accent: var(--bar);
  display:block; text-decoration:none; font-weight:700; margin-top:.5rem;
  background: color-mix(in srgb, var(--accent) 10%, #fff 90%);
  color: color-mix(in srgb, var(--accent) 80%, #000 20%);
  border:2px solid color-mix(in srgb, var(--accent) 40%, #fff 60%);
  border-radius:.9rem; padding:.7rem 1rem; position:relative;
  transition: background .2s ease, border-color .2s ease, transform .1s ease;
}
.domein-crosslink:hover{ background:#fff; border-color: var(--accent); transform:translateY(-1px); }

/* Arrow direction: forward on Diensten, back on Projecten */
.page-template-archive-dienst-php  .domein-crosslink::after{ content:"→"; position:absolute; right:1rem; top:50%; transform:translateY(-50%); font-weight:900; }
.page-template-archive-project-php .domein-crosslink::before{ content:"←"; position:absolute; left:1rem;  top:50%; transform:translateY(-50%); font-weight:900; }
.page-template-archive-project-php .domein-crosslink{ padding-left:2.1rem; } /* room for left arrow */

/* Hide cross-link for Domeinoverlappend (special case) */
.domein--domeinoverlappend .domein-crosslink{ display:none !important; }

/* ===== Per-domein color + icon mapping =====
   Set the bar color and icon per slug. Update icon URLs as needed. */
.domein--wonen .domein-heading{ --bar:#2EB67D; } /* green */
.domein--wonen .domein-heading::before{ --icon:url('wonen.svg'); }

.domein--materiele-en-administratieve-hulp .domein-heading{ --bar:var(--mowe-primary); } /* purple */
.domein--materiele-en-administratieve-hulp .domein-heading::before{ --icon:url('materiele-en-administratieve-hulp.svg'); }

.domein--onderwijs-en-taal .domein-heading{ --bar:var(--mowe-secondary); } /* orange */
.domein--onderwijs-en-taal .domein-heading::before{ --icon:url('onderwijs-en-taal.svg'); }

.domein--cultuur-en-vrije-tijd .domein-heading{ --bar:#3B82F6; } /* blue (pick your brand tint) */
.domein--cultuur-en-vrije-tijd .domein-heading::before{ --icon:url('cultuur-en-vrije-tijd.svg'); }

.domein--domeinoverlappend .domein-heading{ --bar:#6B7280; } /* neutral */
.domein--domeinoverlappend .domein-heading::before{ --icon:url('domeinoverlappend.svg'); }

/* Titles on the overview pages in brand purple */
.content--dienst-overview .entry-title,
.content--project-overview .entry-title{ color: var(--mowe-primary); }

/* Remove bullets + left padding on the lists */
.domein-list{ list-style:none; padding-left:0; margin:.6rem 0 0; }
.domein-list .domein-item{ list-style:none; }

/* Cross-link sits under the list with a bit of space */
.domein-crosslink{ display:block; margin-top:.6rem; }

/* If you used my earlier CSS that added pseudo arrows, neutralize them
   because we’ll put the arrows in the link text itself now */
.page-template-archive-dienst-php  .domein-crosslink::after,
.page-template-archive-project-php .domein-crosslink::before{ content:none; }

/* Cross-link buttons: purple + no hover hop */
.content--dienst-overview .domein-crosslink,
.content--project-overview .domein-crosslink{
  color: var(--mowe-primary) !important;          /* purple text */
  border: 2px solid var(--mowe-primary) !important;
}

/* Hover: keep color change, but no movement */
.content--dienst-overview .domein-crosslink:hover,
.content--project-overview .domein-crosslink:hover{
  background: var(--mowe-primary) !important;     /* fill purple on hover */
  color: #fff !important;
  border-color: var(--mowe-primary) !important;
  transform: none !important;                     /* stop the “hop” */
}


/* Responsive */
@media (max-width: 1200px){
  .domein-heading{ font-size:1rem; }
  .domein-item a{ padding:.65rem .9rem; }
}







/*---------------------------*/
/* DOE MEE - PAGINA */

.doemee-page-header{ margin: 1rem auto 1.25rem; }
.doemee-page-header .page-title{ font-size:clamp(2rem, 5vw, 3.25rem); color:#60418b; margin:.2rem 0; }
.doemee-page-header .page-intro{ max-width:60ch; color:#a15d3b; }

.doemee-tabs{ display:flex; gap:.5rem; margin:1rem 0 1.25rem; }
.doemee-tabs .tab{ border:1px solid #60418b; background:#fff; color:#60418b; padding:.6rem 1rem; border-radius:999px; font-weight:700; }
.doemee-tabs .tab.is-active{ background:#60418b; color:#fff; }

.doemee-cat{ margin-block:1rem 1.5rem; }
.doemee-cat-hero{
  position:relative; border-radius:20px; overflow:hidden; background:#f2edf9;
  background-size:cover; background-position:center; min-height:160px;
}
.doemee-cat-hero .doemee-cat-hero-overlay{
  position:relative; padding:1.2rem 1.2rem;
}
.doemee-cat-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, color-mix(in oklab, var(--accent,#60418b) 70%, white), transparent 60%);
}
.doemee-cat-title{ position:relative; color:#fff; font-weight:800; font-size:clamp(1.6rem, 4vw, 2.6rem); margin:0 0 .2rem; }
.doemee-cat-intro{ position:relative; color:#fff; max-width:48ch; margin:0; }

.doemee-item{ border-radius:14px; background:#e9f0ee; margin:.5rem 0; overflow:hidden; }
.doemee-item[open]{ background:#e8e0f6; }
.doemee-item-summary{ list-style:none; padding:1rem 1rem; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.doemee-item-title{ font-weight:800; }
.doemee-item-body{ padding:.6rem 1rem 1rem; }
.doemee-item-lead{ margin:.3rem 0 .6rem; font-weight:600; }
.doemee-cta .btn-pdf{ display:inline-block; padding:.6rem 1rem; border-radius:12px; background:#fff; color:#60418b; border:2px solid #60418b; font-weight:700; }
.doemee-cta .btn-pdf:hover{ background:#60418b; color:#fff; }


/* Doe een gift - knop */
/* -------------------------- */
/* Donate card beside the title (consolidated) */
.doemee-page-header.with-cta{
  display:grid;
  grid-template-columns: 1fr 280px; /* text | donate card */
  gap:20px;
  align-items:start;
}
.doemee-donate-cta{
  text-decoration:none;
  background:#eae2f6;
  color:#60418b;
  font-weight:800;
  padding:18px 20px;
  border-radius:18px;
  border:3px solid #d8c9f7;
  box-shadow:0 2px 0 #d8c9f7 inset;
  transition:transform .08s ease, background .18s ease;

  /* layout (icon above text) */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
}
.doemee-donate-cta:hover{ background:#e5dcf4; }
.doemee-donate-cta:active{ transform:translateY(1px); }

.doemee-donate-icon{ width:84px; height:84px; object-fit:contain; display:block; }

.doemee-donate-label{ font-weight:800; line-height:1.15; }
.doemee-donate-label .donate-lead{ display:block; font-weight:400; margin-bottom:2px; } /* 'Geen tijd?' */
.doemee-donate-label .donate-main{ display:block; font-weight:800; font-size:1.1rem; }   /* bold line */

@media (max-width:860px){
  .doemee-page-header.with-cta{ grid-template-columns:1fr; }
  .doemee-donate-cta{ justify-self:start; margin-top:8px; }
}
@media (max-width:420px){
  .doemee-donate-icon{ width:72px; height:72px; }
}



/* ===== Tabs full width (unchanged) ===== */
.doemee-tabs{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px auto 18px; }
.doemee-tabs .tab{ width:100%; padding:.9rem 1.2rem; border-radius:999px; font-weight:800; border:2px solid #60418b; background:#fff; color:#60418b; }
.doemee-tabs .tab.is-active{ background:#60418b; color:#fff; }

/* ===== Category accordion banner (flex layout, Safari-safe) ===== */
.doemee-cat-acc{ margin:18px 0 26px; border-radius:22px; overflow:hidden; background:#f2edf9; }
.doemee-cat-acc > summary { list-style:none; }
.doemee-cat-acc > summary::-webkit-details-marker{ display:none }

/* You can tweak the banner image height here */
.doemee-page{ --dm-hero-h: clamp(220px, 8vw, 340px); }  /* <-- change this if you want a different fixed height */

/* Banner layout: text | image (and reversed) */
.doemee-cat-hero{
  --accent:#60418b;
  position:relative;
  display:flex;
  flex-direction: row;             /* default: text left, image right */
  align-items: stretch;
  gap: 0;
  cursor: pointer;
  user-select: none;
}

.doemee-cat-hero.is-reverse{       /* reversed: image left, text right */
  flex-direction: row-reverse;
}

/* Text & image columns (set relative widths) */
.doemee-cat-hero-text{
  flex: 1.15 1 0;
  padding: 20px 22px;
  display:flex; flex-direction:column; justify-content:center;
  z-index: 1;
  /* soft color fade from text side towards image side */
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent) 78%, white) 0%,
    color-mix(in oklab, var(--accent) 62%, white) 45%,
    transparent 62%);
}
.doemee-cat-hero.is-reverse .doemee-cat-hero-text{
  background: linear-gradient(270deg,
    color-mix(in oklab, var(--accent) 78%, white) 0%,
    color-mix(in oklab, var(--accent) 62%, white) 45%,
    transparent 62%);
}

.doemee-cat-hero-media{
  flex: .85 1 0;
  position: relative;
  height: var(--dm-hero-h);        /* fixed height (change via --dm-hero-h) */
  overflow: hidden;
}
.doemee-cat-hero-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Headings */
.doemee-cat-title{ color:#fff; font-weight:900; letter-spacing:.2px; font-size:clamp(1.6rem,4vw,2.6rem); margin:0 0 .2rem; }
.doemee-cat-intro{ color:#fff; margin:0; max-width:52ch; }

/* Caret (on the TEXT side) */
.doemee-cat-caret::before{
  content:"▾";
  position:absolute;
  left:18px;                       /* default: text is on the left */
  right:auto;
  bottom:16px;
  font-size:1.4rem; line-height:1; color:#fff;
  transform-origin:center; transition: transform .15s ease;
}
.doemee-cat-hero.is-reverse .doemee-cat-caret::before{
  left:auto; right:18px;           /* text on the right → caret right */
}
.doemee-cat-acc[open] .doemee-cat-caret::before{ transform: rotate(180deg); }

/* Panel below banner */
.doemee-cat-panel{ padding: 8px 0 0; background:transparent; }

/* ===== Vacature accordions (unchanged; caret flip) ===== */
.doemee-list{ margin-top:8px; }
.doemee-item{ border-radius:14px; background:#eef3f6; margin:.5rem 0; overflow:hidden; }
.doemee-item[open]{ background:#ece4f8; }
.doemee-item-summary{ list-style:none; padding:1rem 1rem; display:flex; gap:10px; align-items:center; cursor:pointer; font-weight:800; color:#3c3161; }
.doemee-item-summary::-webkit-details-marker{ display:none }
.doemee-item-caret::before{
  content:"▾"; font-size:1.1rem; line-height:1; margin-left:auto; display:inline-block; transform-origin:center; transition:transform .15s ease;
}
details[open] > .doemee-item-summary .doemee-item-caret::before{ transform:rotate(180deg); }
.doemee-item-body{ padding:.6rem 1rem 1rem; }
.doemee-item-lead{ margin:.25rem 0 .6rem; font-weight:600; }
.doemee-cta .btn-pdf{ display:inline-block; padding:.6rem 1rem; border-radius:12px; background:#fff; color:#60418b; border:2px solid #60418b; font-weight:800; }
.doemee-cta .btn-pdf:hover{ background:#60418b; color:#fff; }
.doemee-empty{ opacity:.7; font-style:italic; padding:.5rem 1rem 0; }

/* Per-category accents (edit values to taste) */
.doemee-cat-acc[data-cat="huisvesting"]         .doemee-cat-hero{ --accent:#16a085; }
.doemee-cat-acc[data-cat="jeugd-onderwijs"]     .doemee-cat-hero{ --accent:#f07f4f; }
.doemee-cat-acc[data-cat="materiele-hulp"]      .doemee-cat-hero{ --accent:#8e44ad; }
.doemee-cat-acc[data-cat="gezondheid"]          .doemee-cat-hero{ --accent:#27ae60; }
.doemee-cat-acc[data-cat="cultuur-vrije-tijd"]  .doemee-cat-hero{ --accent:#3498db; }

/* Mobile: stack banner; fade becomes vertical */
/* Mobile: stack banner with IMAGE first, TEXT second */
@media (max-width: 600px){
  .doemee-cat-hero,
  .doemee-cat-hero.is-reverse{
    flex-direction: column-reverse;   /* ← was 'column' */
  }

  /* keep the soft fade on the text block */
  .doemee-cat-hero-text{
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--accent) 28%, white) 0%,
      transparent 60%);
  }

  /* mobile image height (tweak if you like) */
  .doemee-cat-hero-media{ height: clamp(180px, 88vw, 660px); }

  /* caret stays bottom-right on mobile */
  .doemee-cat-caret::before{ right:18px; left:auto; }
	
}

/* 1) Add a padding variable alongside your existing height variable */
.doemee-page{
  --dm-hero-h: clamp(220px, 8vw, 340px);   /* desktop/tablet */
  --dm-hero-pad-y: 20px;                    /* desktop/tablet text padding Y */
}

/* Use the padding variable on the text column */
.doemee-cat-hero-text{
  padding: var(--dm-hero-pad-y) 22px;
}

/* 2) Mobile-only: make the banner thicker */
@media (max-width: 600px){
  .doemee-page{
    /* ↑ increase both numbers to make it even thicker */
    --dm-hero-h: clamp(260px, 52vw, 420px); /* image height on phones */
    --dm-hero-pad-y: 28px;                  /* more top/bottom padding for text on phones */
  }
}
/* OVERRIDE GRADIENT */
/* Turn OFF gradients on category banners (solid color only) */
.doemee-cat-hero-text{
  background: var(--accent) !important;   /* solid fill on the text side */
}

/* If an older gradient overlay is still present, kill it */
.doemee-cat-hero::before{ content: none !important; }

/* Mobile too (keeps solid fill) */
@media (max-width: 600px){
  .doemee-cat-hero-text{ background: var(--accent) !important; }
}
/* Caret drawn on the summary itself (no extra markup needed) */
.doemee-cat-hero{ position: relative; } /* ensure positioning context */

.doemee-cat-hero::after{
  content: "▾";
  position: absolute;
  z-index: 3;                 /* above the gradient/image */
  bottom: 16px;
  font-size: 1.4rem;
  line-height: 1;
  color: #fff;
  transform-origin: center;
  transition: transform .15s ease;
  /* default (text on the left) */
  left: 18px;
  right: auto;
}

/* when the banner is reversed (text on the right), put caret on the right */
.doemee-cat-hero.is-reverse::after{
  left: auto;
  right: 18px;
}

/* flip arrow when the category accordion is open */
.doemee-cat-acc[open] > .doemee-cat-hero::after{
  transform: rotate(180deg);
}
/* Mobile: caret always bottom-right, no alternation */
@media (max-width: 600px){
  /* if you're using the ::after caret on the summary */
  .doemee-cat-hero::after{
    left: auto !important;
    right: 18px !important;
  }

  /* (only if you still use the old <span class="doemee-cat-caret"> approach) */
  .doemee-cat-caret::before{
    left: auto !important;
    right: 18px !important;
  }
}

/* === Vacature item layout tweaks === */
.doemee-page{
  /* keep this in sync with the banner text padding (banner uses 22px) */
  --dm-pad-x: 22px;
  --mowe-purple: #60418b;
}

/* Summary row (closed state) */
.doemee-item-summary{
  padding: 1.1rem var(--dm-pad-x);          /* more space on the right, aligned with banner */
  color: var(--mowe-purple);                 /* purple text */
}

/* Bigger title in purple */
.doemee-item-title{
  font-weight: 800;
  color: var(--mowe-purple);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);  /* grow a bit on wider screens */
}

/* Expanded content area */
.doemee-item-body{
  padding: .75rem var(--dm-pad-x) 1.2rem;    /* match right padding with summary */
  color: var(--mowe-purple);                 /* purple paragraphs */
}

/* Optional: lead/intro line under the title */
.doemee-item-lead{
  color: var(--mowe-purple);
  opacity: .92;
  margin: .25rem 0 .6rem;
}

/* Paragraph rhythm inside content */
.doemee-item-content p{ margin: .5rem 0 1rem; }
/* Use the same lavender when closed and open */
.doemee-item{
  background: #ece4f8;     /* lavender */
}
.doemee-item[open]{
  background: #ece4f8;     /* keep identical when open */
}

/* Make the description sit closer to the title */
.doemee-item-body{
  /* was: .75rem top padding — reduce it */
  padding: .35rem var(--dm-pad-x) 1.2rem;
}

/* Also trim the first lines’ margins for extra tightness */
.doemee-item-lead{
  margin: 0rem 0rem;   /* smaller top gap under the title */
}
.doemee-item-content > *:first-child{
  margin-top: .2rem;       /* if the first block is a <p>, pull it up a bit */
}

/* TEXT INVERSION */

/* Default banner text color stays white */
.doemee-cat-hero{ color:#fff; }

/* Make headings/intro + caret follow the summary’s color */
.doemee-cat-title,
.doemee-cat-intro{ color: currentColor; }
.doemee-cat-hero::after{ color: currentColor; }

/* Flip to purple only when the category has "Tekstkleur omkeren" checked */
.doemee-cat-acc.is-invert .doemee-cat-hero{ color:#60418b; } /* Mondiale purple */

/* Force a real, fixed-height image area on phones */
@media (max-width: 600px){
  .doemee-page{ --dm-hero-h: clamp(120px, 32vw, 320px); } /* tweak to show more image */

  .doemee-cat-hero,
  .doemee-cat-hero.is-reverse{
    flex-direction: column-reverse; /* image first, text second */
  }

  /* Reserve space for the image and prevent collapse */
  .doemee-cat-hero-media{
    flex: 0 0 var(--dm-hero-h) !important;   /* ← key: fixed flex-basis */
    height: var(--dm-hero-h) !important;
    overflow: hidden;
    position: relative;
  }
  .doemee-cat-hero-media img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;                 /* adjust if subject is cropped */
  }

  /* Let the text section take the remaining height */
  .doemee-cat-hero-text{
    flex: 1 1 auto;
  }
}







/* -------------------------------------------------
 
/*     	VERTALINGEN
     	
/* ------------------------------------------------- */

/* === HULP language bar === */
.hulp-lang-bar{
  display:flex; align-items:center; gap:.6rem;
  padding:.75rem 1rem; margin:0 0 1rem 0;
  background:#fff; border:2px solid var(--mowe-primary); border-radius:.6rem;
}
.hulp-lang-label{ font-weight:700; letter-spacing:.02em; color:var(--mowe-primary); }
.hulp-lang-select{
  font: inherit; padding:.4rem .6rem; border:1px solid #ccc; border-radius:.4rem;
}

/* Placeholder style for untranslated languages */
.hulp-lang-placeholder{
  padding:1rem; border:2px dashed #cbb6f0; background:#f7f2ff; border-radius:.6rem; color:#4b3b74;
}

/* Optional: simple RTL helpers scoped to /hulp (body.has class .is-rtl) */
.is-rtl .hulp-lang-bar{ direction:rtl; }
.is-rtl .hulp-lang-select{ text-align:right; }
/* Hide the theme's original title ONLY on /hulp pages.
   We re-insert a translated title as .hulp-title via functions.php */
.hulp-title-replaced .entry-title:not(.hulp-title){ display:none; }

/* Keep the untranslated placeholder looking like normal body text */
.hulp-lang-placeholder{ margin:0; padding:0; border:0; background:transparent; color:inherit; }

/* Small spacing between the selector and our re-inserted title */
.hulp-title{ margin-top:.8rem; }


/* ---------------------- */
/* HULP POP UP */
/* ---------------------- */
/* === HULP Disclaimer Modal === */
.hulp-disc-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(97,66,139,.6); /* purple tint */
  backdrop-filter:saturate(120%) blur(1px);
  padding:1rem;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.hulp-disc-overlay.is-open{ opacity:1; pointer-events:auto; }

.hulp-disc-modal{
  width:min(780px, 100%);
  background:#fff; color:var(--mowe-text, #2a1e3f);
  border-radius:1.6rem; box-shadow:0 20px 60px rgba(0,0,0,.25);
  padding:1.25rem 1.25rem 1rem;
}

.hulp-disc-tabs{
  display:flex; flex-wrap:wrap; gap:.25rem;
  padding:.25rem .25rem .75rem;
  border-bottom:1px solid #e8e3f4;
}
.hulp-disc-tab{
  appearance:none; border:0; background:transparent;
  padding:.5rem .75rem; border-radius:.6rem .6rem 0 0;
  font-weight:600; color:#6b5a8f; cursor:pointer;
  opacity:.8;
}
.hulp-disc-tab[aria-selected="true"]{
  background:#f7f2ff; opacity:1; color:#3f2e6b;
  border:1px solid #e8e3f4; border-bottom-color:#f7f2ff;
}

.hulp-disc-content{
  padding:1rem .25rem 0;
  max-height:52vh; overflow:auto;
}
.hulp-disc-content h1,.hulp-disc-content h2{ margin:.2rem 0 .6rem; color:#3f2e6b; }
.hulp-disc-content p{ line-height:1.55; margin:.6rem 0; }

.hulp-disc-actions{
  display:flex; justify-content:flex-start; padding:1rem .25rem .5rem;
}
.hulp-disc-cta{
  appearance:none; border:0; cursor:pointer;
  padding:.75rem 1rem; border-radius:.7rem;
  background:var(--mowe-secondary, #f47e67); color:#fff; font-weight:700;
  transition:transform .05s ease, opacity .2s ease;
}
.hulp-disc-cta[disabled]{ opacity:.6; cursor:not-allowed; }
.hulp-disc-cta:not([disabled]):active{ transform:translateY(1px); }

/* RTL inside the modal */
.hulp-disc-overlay[dir="rtl"] .hulp-disc-tabs{ direction:rtl; }
.hulp-disc-overlay[dir="rtl"] .hulp-disc-content{ direction:rtl; text-align:right; }



/* SWIPE FIX (chrome) */
/* --- Stop accidental side-scroll everywhere --- */
html, body{
  max-width: 100%;
  overflow-x: hidden;      /* fallback */
  overflow-x: clip;        /* modern: prevents horizontal scroll but doesn't create a scroll container */
  position: relative;
}

/* Keep every block inside the viewport */
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, canvas, svg, table {
  max-width: 100%;
  height: auto;
}

/* Word/URL overflow guards */
:where(p, li, h1, h2, h3, h4, h5, h6, .text){
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Gutenberg full-width blocks: avoid 100vw overflow due to scrollbar */
:root { --sbw: calc(100vw - 100%); }            /* scrollbar width */
.alignfull,
.wp-block-cover.alignfull,
.wp-block-image.alignfull,
.wp-block-group.alignfull {
  width: calc(100vw - var(--sbw));
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Only contain overscroll on coarse pointers (phones/tablets), not Mac trackpads */
@media (pointer: coarse){
  .horizontal-scroll,
  .carousel,
  .slider,
  .marquee { overscroll-behavior-inline: contain; }
}

/* Touch devices: prefer vertical panning globally, allow x-pan on carousels */
@media (pointer: coarse){
  body { touch-action: pan-y; }
  .horizontal-scroll, .carousel, .slider { touch-action: pan-x pan-y; }
}
/* Let overscroll chain to the viewport so Chrome can trigger history nav */
html, body, main, .site, .site-content {
  overscroll-behavior-x: auto !important;
}





/* HULPVRAAG / LIKELY REQUESTS */
/* --- Hulp: search bar + suggestions --- */
.hulp-zoek-wrap{ position:relative; margin:1rem 0 1.25rem; }
.hulp-zoek-input{
  width:100%; padding:.8rem 1rem; border-radius:.8rem;
  border:2px solid #e2d9f3; background:#fff; font:inherit;
}
.hulp-zoek-suggesties{
  position:absolute; left:0; right:0; top:100%; margin:.35rem 0 0;
  list-style:none; padding:.25rem; background:#fff; border:1px solid #e6e0f6;
  border-radius:.6rem; box-shadow:0 10px 25px rgba(0,0,0,.08); display:none; z-index:30;
}
.hulp-suggestie{ padding:.5rem .6rem; cursor:pointer; border-radius:.4rem; }
.hulp-suggestie:hover{ background:#f6f2ff; }

/* --- Hulp: category sections --- */
.hulp-term{ margin:1.2rem 0 1.6rem; }
.hulp-term-title{
  font-weight:800; color:#60418b; border-bottom:4px solid #60418b; padding-bottom:.25rem; margin-bottom:.6rem;
}
.hulp-grid{
  display:grid; gap:.6rem;
  grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
}
.hulp-card{
  display:flex; justify-content:space-between; align-items:center;
  padding:.8rem 1rem; border-radius:.6rem; background:#fff; border:2px solid #e6e0f6;
  cursor:pointer; text-align:left; transition:transform .05s ease, border-color .2s;
}
.hulp-card:hover{ border-color:#cdbbf2; transform:translateY(-1px); }
.hulp-card-title{ font-weight:700; line-height:1.2; }
.hulp-card-arrow{ opacity:.6; }

/* --- Hulp: modal --- */
/* Blur the page behind the Likely-Requests modal */
.hulp-need-overlay{
  background: rgba(97,66,139,.35); /* slightly lighter tint so blur shows through */
  -webkit-backdrop-filter: blur(1px); /* Safari */
  backdrop-filter: blur(1px);         /* Chrome/Edge/Firefox */
}
.hulp-need-overlay.is-open{ opacity:1; pointer-events:auto; }
.hulp-need-modal{
  background:#fff; width:min(720px,100%); border-radius:1.2rem; box-shadow:0 20px 60px rgba(0,0,0,.25);
  padding:1rem 1rem 1.2rem; position:relative; color:#2a1e3f;
}
.hulp-need-close{
  position:absolute; top:.4rem; <?php /* use logical ends for RTL */ ?> inset-inline-end:.4rem;
  appearance:none; border:0; background:transparent; font-size:1.6rem; line-height:1; cursor:pointer; color:#60418b;
}
.hulp-need-title{ margin:.2rem 0 .6rem; color:#60418b; font-size:1.4rem; }
.hulp-need-body p{ margin:.6rem 0; line-height:1.55; }
.hulp-need-cta .button{
  display:inline-block; background:#f47e67; color:#fff; font-weight:700; padding:.6rem .9rem; border-radius:.6rem; text-decoration:none;
}

/* --- Title row with two quick buttons --- */
.hulp-topbar{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin:.4rem 0 1.2rem;
}
.hulp-quick-actions{ display:flex; gap:.7rem; flex-wrap:wrap; }
.hulp-qbtn{
  display:flex; align-items:center; gap:.55rem;
  text-decoration:none; padding:.7rem .9rem; border-radius:.8rem; color:#fff; font-weight:800;
  box-shadow:0 4px 14px rgba(0,0,0,.12); transition:transform .05s ease, filter .2s ease;
}
.hulp-qbtn .arr{ opacity:.9; margin-inline-start:.25rem; }
.hulp-qbtn:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.hulp-qbtn-ico{ width:22px; height:22px; display:inline-block; }
.hulp-qbtn--emerg{ background:#60418b; }
.hulp-qbtn--appt { background:#f47e67; }
@media (max-width:1200px){
  .hulp-topbar{ flex-direction:column; align-items:stretch; }
  .hulp-quick-actions{ order:2; }
}

/* --- “Ik zoek hulp bij [type] …” row + search on right --- */
.hulp-lead-bar{
  display:grid; grid-template-columns: 1fr minmax(280px, 380px); gap:1rem; align-items:end; margin:.8rem 0 1.2rem;
}
@media (max-width:1200px){ .hulp-lead-bar{ grid-template-columns: 1fr; } }
.hulp-type-row{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.hulp-type-lead{ font-weight:800; color:#60418b; }
.hulp-type-links a{
  color:#60418b; text-decoration:none; font-weight:700; border-bottom:2px solid #60418b33; padding-bottom:.1rem; margin-inline-end:.5rem;
}
.hulp-type-links a:hover{ border-bottom-color:#60418b; }

/* --- Search + suggestions (scoped) --- */
.hulp-zoek-wrap{ position:relative; }
.hulp-zoek-input{ width:100%; padding:.7rem .9rem; border-radius:.8rem; border:2px solid #e2d9f3; background:#fff; font:inherit; }
.hulp-zoek-suggesties{
  position:absolute; left:0; right:0; top:100%; margin:.35rem 0 0;
  list-style:none; padding:.25rem; background:#fff; border:1px solid #e6e0f6;
  border-radius:.6rem; box-shadow:0 10px 25px rgba(0,0,0,.08); display:none; z-index:10;
}
.hulp-suggestie{ padding:.5rem .6rem; cursor:pointer; border-radius:.4rem; }
.hulp-suggestie:hover{ background:#f6f2ff; }

/* --- Category grid (3 columns) --- */
.hulp-terms-grid{ display:grid; gap:1rem; grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:1200px){ .hulp-terms-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){  .hulp-terms-grid{ grid-template-columns:1fr; } }

.hulp-term{ background:transparent; padding:.2rem 0; }
.hulp-term-title{
  display:inline-block; font-weight:800; color:#60418b; margin:.2rem 0 .4rem;
  border-bottom:4px solid #60418b; padding-bottom:.15rem;
}

/* --- List style (no white containers) --- */
.hulp-list{ list-style:none; margin:0; padding:0; }
.hulp-list li{ margin:.25rem 0; }
.hulp-list-item{
  appearance:none; border:0; background:transparent; cursor:pointer; width:100%;
  display:flex; justify-content:space-between; gap:.8rem; padding:.35rem 0; text-align:left;
  color:inherit; border-bottom:1px dashed #cbbcf0;
}
.hulp-list-item .txt{ font-weight:600; }
.hulp-list-item .arr{ opacity:.6; }
.hulp-list-item:hover{ border-bottom-color:#60418b; }

/* --- Modal (same shell as previous, kept tidy) --- */
.hulp-need-overlay{
  position:fixed; inset:0; z-index:9998; display:flex; align-items:center; justify-content:center;
  background:rgba(97,66,139,.55); padding:1rem; opacity:0; pointer-events:none; transition:opacity .2s;
}
.hulp-need-overlay.is-open{ opacity:1; pointer-events:auto; }
.hulp-need-modal{
  background:#fff; width:min(720px,100%); border-radius:1.2rem; box-shadow:0 20px 60px rgba(0,0,0,.25);
  padding:1rem 1rem 1.2rem; position:relative; color:#2a1e3f;
}
.hulp-need-close{ position:absolute; top:.4rem; inset-inline-end:.4rem; appearance:none; border:0; background:transparent; font-size:1.6rem; line-height:1; cursor:pointer; color:#60418b; }
.hulp-need-title{ margin:.2rem 0 .6rem; color:#60418b; font-size:1.4rem; }
.hulp-need-body p{ margin:.6rem 0; line-height:1.55; }
.hulp-need-cta .button{ display:inline-block; background:#f47e67; color:#fff; font-weight:700; padding:.6rem .9rem; border-radius:.6rem; text-decoration:none; }

/* Screen-reader only helper */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
/* Likely-Requests modal CTA: enforce white, no underline */
.hulp-need-cta .button,
.hulp-need-cta .button:visited,
.hulp-need-cta .button:hover,
.hulp-need-cta .button:focus{
  color:#fff !important;
  text-decoration:none !important;
}


/* Quick buttons: force white text and remove underline */
.hulp-qbtn,
.hulp-qbtn:visited,
.hulp-qbtn:hover,
.hulp-qbtn:focus {
  color:#fff !important;
  text-decoration:none !important;
}
.hulp-qbtn span { color:inherit; text-decoration:inherit; } /* ensure inner text follows */


/* Accordion containers (still 3 columns via .hulp-terms-grid) */
.hulp-acc { background:transparent; }

/* Banner head */
.hulp-acc-head{
  width:100%; display:flex; align-items:center; gap:.6rem;
  background:#60418b; color:#fff; font-weight:800; border:0; cursor:pointer;
  padding:.85rem 1rem; border-radius:.6rem; box-shadow:0 3px 14px rgba(0,0,0,.08);
}
.hulp-acc-title{ flex:1; text-align:start; }
.hulp-term-icon{ width:28px; height:28px; display:inline-block; }
.hulp-acc-caret{ margin-inline-start:.5rem; transition:transform .2s ease; }
.hulp-acc.is-open .hulp-acc-caret{ transform:rotate(180deg); }

/* Body (list) */
.hulp-acc-body{ padding:.4rem .2rem .2rem; }

/* Bottom contact CTA — purple outline on white */
.hulp-bottom-cta{ 
  margin: 1.6rem 0 0; 
  text-align: center; 
}

/* Contact button */
.hulp-bottom-cta .button,
.hulp-bottom-cta .button:visited{
  display:inline-block;
  background:#fff;                 /* white fill */
  color:#60418b !important;        /* purple text */
  text-decoration:none !important; /* no underline */
  font-weight:800;
  padding:.75rem 1rem;
  border-radius:.8rem;
  border:2px solid #60418b;        /* purple lining */
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  transition:background .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.hulp-bottom-cta .button:hover,
.hulp-bottom-cta .button:focus{
  background:#60418b;              /* fill on hover */
  color:#fff !important;           /* white text */
  box-shadow:0 6px 18px rgba(97,66,139,.25);
  transform:translateY(-1px);
  outline: none;
}

.hulp-bottom-cta .button .arr{
  margin-inline-start:.3rem; 
  opacity:.9;
}
/* Put the two buttons next to each other */
.hulp-need-cta{
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
}

/* Outline style for 'Meer info over …' button */
.hulp-need-cta .button.button--outline,
.hulp-need-cta .button.button--outline:visited{
  background:#fff;
  color:#f47e67 !important;
  border:2px solid #f47e67;
  text-decoration:none !important;
  font-weight:400;
  padding:.6rem .9rem;
  border-radius:.6rem;
}
.hulp-need-cta .button.button--outline:hover,
.hulp-need-cta .button.button--outline:focus{
  background:#f47e67;
  color:#fff !important;
}








/* OVERSCROLL */
/* Stop vertical overscroll/bounce on the page */
html, body{
  overscroll-behavior-y: none;   /* contain vertical overscroll */
}