/* === FULL CM.BE OVERRIDE (HEADER + HERO) === */

:root{
  --cm-green:#2F6A3B;
  --cm-green-2:#3B7A46;
  --cm-soft:#E9F2EA;
  --cm-border:#D9E2DC;
  --cm-text:#111827;
  --cm-muted:#6B7280;
}

/* Page background like cm.be */
html, body{
  margin:0 !important;
  padding:0 !important;
  min-height:100vh !important;
  background:#FFFFFF !important;
  font-family:"Arial","Helvetica Neue",sans-serif !important;
  color:var(--cm-text) !important;
}

/* Background layer wrapper (full width) */
.benu-bg{
  min-height:unset !important;
  background:#FFFFFF !important;
  padding-bottom:18px !important;
}

.benu-bg-inner{
  max-width:1400px !important;
  margin:0 auto !important;
  padding:0 28px 40px !important;
}

/* Top green bar */
.cm-topbar{
  background:var(--cm-green);
  color:#FFFFFF;
  font-size:14px;
}

.cm-topbar-inner{
  max-width:1400px;
  margin:0 auto;
  padding:12px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.cm-topbar a{
  color:#FFFFFF !important;
  text-decoration:none !important;
  font-weight:600;
  margin:0 6px;
}

.cm-topbar-left{
  font-weight:700;
}

.cm-topbar-sep{
  opacity:.85;
  margin:0 4px;
}

/* Main header row */
.cm-header{
  padding:14px 0 18px !important;
  border-bottom:1px solid #EEF2F7;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px;
}

.cm-header-left{
  display:flex;
  align-items:center;
  gap:26px;
  min-width:0;
}

.cm-logo img{
  width:56px;
  height:56px;
  object-fit:contain;
  border-radius:999px;
  background:#FFFFFF;
}

/* Nav with separators */
.cm-nav{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
  flex-wrap:wrap;
}

.cm-nav-item{
  color:var(--cm-green) !important;
  text-decoration:none !important;
  font-weight:800;
  font-size:20px;
  line-height:1.1;
  padding:6px 0;
  position:relative;
}

.cm-nav-item + .cm-nav-item{
  padding-left:18px;
}

.cm-nav-item + .cm-nav-item::before{
  content:"";
  position:absolute;
  left:6px;
  top:50%;
  transform:translateY(-50%);
  width:2px;
  height:22px;
  background:#B7D1BE;
  border-radius:2px;
}

/* Search + Mijn CM */
.cm-header-right{
  display:flex;
  align-items:center;
  gap:14px;
}

.cm-search{
  display:flex;
  align-items:center;
  gap:10px;
  border:2px solid #2F6A3B;
  border-radius:999px;
  padding:10px 14px;
  min-width:280px;
  background:#FFFFFF;
}

.cm-search input{
  border:none !important;
  outline:none !important;
  width:100%;
  font-size:16px;
}

.cm-search-icon{
  color:var(--cm-green);
  font-size:16px;
}

.cm-mijncm{
  display:flex;
  align-items:center;
  gap:10px;
  background:#A7D3B2;
  color:#0B1F16 !important;
  text-decoration:none !important;
  font-weight:800;
  border-radius:999px;
  padding:10px 16px;
  border:1px solid #9BC9A8;
  white-space:nowrap;
}

.cm-mijncm-icon{
  font-size:18px;
}

/* HERO like screenshot */
.cm-hero{
  margin-top:24px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:56px !important;
  align-items:start !important;
}

/* This is where the CM “borders” live: big radius + shadow + subtle dark overlay */
.cm-hero-media{
  height:520px !important;
  border-radius:34px !important;
  overflow:hidden !important;
  background-image:url('../img/cm-hero-left.jpeg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  box-shadow:0 18px 45px rgba(15,23,42,0.20) !important;
  position:relative !important;
}

/* Subtle darkening like cm.be (top/left) */
.cm-hero-media::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0) 70%);
}

/* Right hero content */
.cm-hero-content{
  padding-top:70px !important;
}

.cm-hero-content h2{
  font-size:56px !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  margin:0 0 14px 0 !important;
  position:relative !important;
  padding-bottom:20px !important;
  color:#111827 !important;
}

.cm-hero-content h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:6px;
  width:54px;
  height:4px;
  background:var(--cm-green);
  border-radius:4px;
}

.cm-hero-content p{
  font-size:18px !important;
  line-height:1.65 !important;
  margin:0 !important;
  color:#111827 !important;
  max-width:640px;
}

/* Green “CM” in the hero title */
.cm-accent{
  color:var(--cm-green) !important;
}

/* Foreground content should start directly under the hero (no huge top padding) */
/* Card / buttons keep CM green */
.btn, button.btn, a.btn, .kbo-btn-primary, .benu-btn, .btn-primary{
  background:var(--cm-green) !important;
  border-color:var(--cm-green) !important;
  color:#FFFFFF !important;
}

.btn:hover, button.btn:hover, a.btn:hover, .kbo-btn-primary:hover, .btn-primary:hover{
  background:var(--cm-green-2) !important;
  border-color:var(--cm-green-2) !important;
}

/* Inputs */
input, select, textarea{
  border-radius:8px !important;
  border:1px solid #C9D7CF !important;
}

input:focus, select:focus, textarea:focus{
  border-color:var(--cm-green) !important;
  box-shadow:0 0 0 2px rgba(47,106,59,0.18) !important;
  outline:none !important;
}

/* Footer */
.cm-footer{
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid #E5E7EB;
  font-size:0.8rem;
  color:#6B7280;
  text-align:center;
}

@media (max-width: 1100px){
  .cm-uptodate .page-shell{ min-height:unset !important; align-items:flex-start !important; }
  .cm-hero{
    grid-template-columns:1fr !important;
    g/* Layout below hero */
.cm-index .page-shell{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding:40px 16px 56px !important;
}

.cm-uptodate .page-shell{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  padding:40px 16px 64px !important;
  min-height:calc(100vh - 760px) !important; /* topbar+header+hero */
}

.cm-index .page-shell .container,
.cm-uptodate .page-shell .container{
  max-width:1100px;
}

ap:20px !important;
  }
  .cm-hero-media{
    height:360px !important;
  }
  .cm-hero-content{
    padding-top:10px !important;
  }
  .page-shell{
    padding-top:520px !important;
  }
  .cm-search{ min-width:220px; }
  .cm-nav-item{ font-size:18px; }
}

@media (max-width: 700px){
  .cm-topbar-inner{ padding:10px 16px; }
  .benu-bg-inner{ padding:0 16px 32px !important; }
  .cm-search{ display:none; }
  .cm-hero-content h2{ font-size:38px !important; }
}

/* === EINDE CM.BE OVERRIDE === */


/* BENU.nl inspired UI stylesheet */
:root{
  --benu-green:#7AC143;
  --benu-darkgreen:#006838;
  --text-dark:#1D1D1B;
  --text-muted:#6B7280;
  --surface:#FFFFFF;
  --border-soft:#E2E8F0;
  --input-border:#D1D9E6;
}

/* Global reset */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  min-height:100vh;
  font-family:"Arial","Helvetica Neue",sans-serif;
  color:var(--text-dark);
  background:linear-gradient(145deg,#F5FAF7 0%,#FFFFFF 45%,#E3F3E8 100%);
  background-size:cover;
  background-position:center top;
  margin:0;
  padding:32px 16px;
}

body{
  min-height:100vh;
  font-family:"Arial","Helvetica Neue",sans-serif;
  color:var(--text-dark);
  background:linear-gradient(145deg,#F5FAF7 0%,#FFFFFF 45%,#E3F3E8 100%);
  background-size:cover;
  background-position:center top;
  margin:0;
  padding:32px 16px;
}

@media (max-width:768px){
  body{
  min-height:100vh;
  font-family:"Arial","Helvetica Neue",sans-serif;
  color:var(--text-dark);
  background:linear-gradient(145deg,#F5FAF7 0%,#FFFFFF 45%,#E3F3E8 100%);
  background-size:cover;
  background-position:center top;
  margin:0;
  padding:32px 16px;
}
}

/* Layout shell */
.page-shell,
main.container{
  width:100%;
  max-width:960px;
  margin:0 auto;
}

/* BENU logo */
.benu-logo{
  display:block;
  margin:0 auto 24px auto;
  max-width:180px;
}

/* Hero panel / tekstborder card (up-to-date & others) */
.panel,
.kbo-card,
.form-card{
  position:relative;
  z-index:2;
  width:100%;
  background:var(--surface);
  border-radius:16px;
  padding:32px 32px 28px;
  border:3px solid var(--border-soft);
  border-top:5px solid var(--benu-green);
  box-shadow:0 18px 40px rgba(15,23,42,0.22);
  text-align:left;
}

@media (max-width:576px){
  .panel,
  .kbo-card,
  .form-card{
    padding:24px 20px 22px;
  }
}

/* Typografie */
h1,h2,h3,h4{
  margin:0 0 12px;
  color:var(--benu-darkgreen);
  font-weight:600;
}

h1{
  font-size:1.6rem;
}

h2{
  font-size:1.4rem;
}

p{
  margin:0 0 12px;
  line-height:1.6;
}

.eyebrow,
.eyebrow-label{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--benu-darkgreen);
  font-weight:600;
  margin-bottom:10px;
}

.text-muted,
.note{
  color:var(--text-muted);
}

.small{
  margin-top:8px;
  font-size:0.85rem;
  color:var(--text-muted);
}

/* Buttons – BENU stijl */
.btn,
.btn-primary,
a.btn,
a.btn-primary,
button.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border-radius:999px;
  border:none;
  background:var(--benu-green);
  color:#FFFFFF;
  font-size:0.98rem;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease,transform .1s ease,box-shadow .2s ease;
  box-shadow:0 8px 20px rgba(122,193,67,.45);
}

.btn-primary{
  border-color:transparent;
}

.btn:hover,
.btn-primary:hover,
a.btn:hover,
a.btn-primary:hover,
button.btn-primary:hover{
  background:var(--benu-darkgreen);
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(0,0,0,.18);
}

.btn:active,
.btn-primary:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}

/* Formulieren – BENU look */
label{
  display:block;
  font-size:0.9rem;
  font-weight:500;
  margin-bottom:6px;
}

label .req{
  color:#B00020;
  margin-left:4px;
  font-weight:600;
}

input,
select,
textarea,
.form-control{
  width:100%;
  padding:11px 12px;
  border-radius:8px;
  border:1px solid var(--input-border);
  font-size:0.95rem;
  color:var(--text-dark);
  background:#FFFFFF;
  transition:border-color .15s ease,box-shadow .15s ease;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus{
  outline:none;
  border-color:var(--benu-green);
  box-shadow:0 0 0 1px rgba(122,193,67,.15);
}

.field-error{
  display:block;
  margin-top:4px;
  font-size:0.8rem;
  color:#B00020;
}

/* Page content wrapper inside cards */
.page-content{
  padding:0;
}

.card-title{
  font-size:1.45rem;
  font-weight:600;
  margin-bottom:4px;
}

.text-center{text-align:center;}

/* Header-sticky voor loading/bedankt (minimalistisch) */
.header-sticky{
  position:relative;
  width:100%;
  margin:0 auto 16px auto;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:0.85rem;
  color:var(--text-muted);
}

/* Utility spacing (voor bootstrap classes fallback) */
.mt-4{margin-top:1.5rem;}

/* === BENU homepage-like background layer === */
html, body{
  margin:0;
  padding:0;
  min-height:100vh;
  font-family:"Arial","Helvetica Neue",sans-serif;
  color:var(--text-dark);
  background:#F6F8FC;
}

body{
  background:#F6F8FC;
}

/* Fixed decorative BENU shell in the background */
.benu-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none; /* volledig niet klikbaar zoals gevraagd */
  background:linear-gradient(180deg,#F6F8FC 0%,#EDF2FB 40%,#E3ECFB 100%);
  overflow:hidden;
}

.benu-bg-inner{
  max-width:1200px;
  margin:0 auto;
  padding:24px 24px 80px;
}

/* Header bovenaan zoals BENU */
.benu-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0 18px;
}

.benu-header-logo{
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:.06em;
  color:#003B73;
  display:flex;
  align-items:center;
  gap:6px;
}

.benu-header-cross{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:6px;
  background:#7AC143;
  color:#FFFFFF;
  font-size:1.1rem;
  font-weight:700;
}

/* Zoekbalk */
.benu-header-search{
  flex:1;
  max-width:520px;
  margin:0 32px;
  display:flex;
  align-items:center;
}

.benu-search-input{
  flex:1;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid #D3DFF0;
  background:#FFFFFF;
  font-size:0.92rem;
  color:#6B7280;
}

.benu-search-icon{
  margin-left:-42px;
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.98rem;
  color:#64748B;
}

/* Top navigatie */
.benu-header-nav{
  display:flex;
  align-items:center;
  gap:20px;
  font-size:0.9rem;
  color:#1F2937;
}

.benu-header-nav span{
  font-weight:500;
}

/* Hero gedeelte onder de header */
.benu-hero{
  margin-top:28px;
  display:grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  gap:32px;
  align-items:stretch;
}

.benu-hero-left{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#CCE4F9;
}

/* Simulatie van de foto */
.benu-hero-photo{
  height:220px !important;
  background:transparent !important;
}

/* Overlay card in de hero */
.benu-hero-overlay{
  position:absolute;
  left:8%;
  bottom:8%;
  max-width:60%;
  background:#FFFFFF;
  border-radius:20px;
  padding:18px 22px 18px;
  box-shadow:0 18px 28px rgba(15,23,42,0.18);
}

.benu-hero-overlay h2{
  margin:0 0 8px;
  color:#003B73;
  font-size:1.2rem;
}

.benu-hero-overlay p{
  margin:0;
  font-size:0.9rem;
  color:#1F2937;
}

/* Rechter kolom met bullets */
.benu-hero-right{
  align-self:center;
  background:#E5EDF9;
  border-radius:18px;
  padding:20px 22px;
}

.benu-hero-right h3{
  margin:0 0 10px;
  color:#003B73;
  font-size:1.05rem;
}

.benu-hero-right ul{
  margin:0;
  padding-left:18px;
  font-size:0.9rem;
  color:#111827;
}

.benu-hero-right li{
  margin-bottom:6px;
}

/* Voor kleinere schermen stapelt alles onder elkaar */
@media (max-width:900px){
  .benu-bg-inner{
    padding:18px 16px 64px;
  }
  .benu-header{
    flex-wrap:wrap;
    gap:10px;
  }
  .benu-header-search{
    order:3;
    margin:8px 0 0 0;
  }
  .benu-hero{
    grid-template-columns: minmax(0,1fr);
    margin-top:18px;
  }
}

/* Foreground shell voor jouw kaarten */
.page-shell{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:160px 16px 56px;
}

@media (max-width:768px){
  .page-shell{
    padding-top:140px;
    padding-bottom:32px;
  }
}



/* ================= PATCH (MOBIEL): TOPBAR WEG + LOGO LINKS + HAMBURGER RECHTS ================= */
@media (max-width: 768px){

  /* Verwijder de bovenste balk met Contact/Lid/NL/Geen lid/Professioneel volledig */
  .cm-topbar{
    display:none !important;
  }

  /* Header: alleen logo + hamburger zichtbaar */
  .cm-nav,
  .cm-search,
  .cm-mijncm{
    display:none !important;
  }

  .cm-header{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    padding:10px 0 12px !important;
  }

  .cm-header-left{
    gap:10px !important;
  }

  /* Hamburger knop */
  .cm-hamburger{
    display:flex !important;
    flex-direction:column;
    gap:4px;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    border:2px solid rgba(47,106,59,0.20);
    background:#FFFFFF;
    cursor:pointer;
  }
  .cm-hamburger span{
    width:22px;
    height:3px;
    background:var(--cm-green);
    border-radius:2px;
    display:block;
  }

  /* Panel "Werk je gegevens bij" bovenop alles, netjes in het midden (met hero zichtbaar erachter) */
  .cm-uptodate .page-shell{
    position:fixed !important;
    inset:0 !important;
    z-index:50 !important;
    height:100svh !important;
    height:100dvh !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:14px 12px !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }
  .cm-uptodate .page-shell .panel{
    pointer-events:auto !important;
    width:100% !important;
    max-width:560px !important;
    max-height:calc(100svh - 28px) !important;
    max-height:calc(100dvh - 28px) !important;
    overflow:auto !important; /* safety net */
    -webkit-overflow-scrolling:touch;
  }
  .cm-uptodate .page-shell .panel::-webkit-scrollbar{ width:0; height:0; }
  .cm-uptodate .page-shell .panel{ scrollbar-width:none; }

  /* Header blijft boven de overlay klikbaar */
  .cm-header{
    position:relative;
    z-index:100 !important;
  }

  /* Hero: zichtbaar maar compacter */
  .cm-hero{
    grid-template-columns:1fr !important;
    gap:16px !important;
    margin-top:12px !important;
  }
  .cm-hero-media{
    height:240px !important;
    border-radius:22px !important;
  }
  .cm-hero-content{
    padding-top:0 !important;
  }
  .cm-hero-content h2{
    font-size:30px !important;
    padding-bottom:14px !important;
  }
  .cm-hero-content p{
    font-size:15px !important;
    line-height:1.45 !important;
  }

  /* Card iets compacter zodat hij in één keer past */
  .panel{
    padding:18px 16px 16px !important;
    border-radius:14px !important;
  }
  .panel .eyebrow{
    margin-bottom:8px !important;
    font-size:0.72rem !important;
  }
  .panel h1{
    font-size:1.25rem !important;
    margin-bottom:10px !important;
  }
  .panel p{
    font-size:0.92rem !important;
    line-height:1.45 !important;
    margin-bottom:10px !important;
  }
  .panel p.small{
    display:none !important;
  }
  .btn{
    padding:11px 18px !important;
    font-size:0.95rem !important;
  }
}

/* ================= Mobile menu overlay ================= */
.cm-mobile-menu{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(17,24,39,0.35);
  padding:16px;
}
.cm-mobile-menu.active{ display:block; }
.cm-mobile-menu-panel{
  width:min(420px, 100%);
  max-height:calc(100vh - 32px);
  overflow:auto;
  background:#FFFFFF;
  border-radius:18px;
  box-shadow:0 18px 45px rgba(15,23,42,0.25);
  padding:18px 18px 10px;
}
.cm-mobile-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.cm-mobile-menu-title{
  font-weight:900;
  color:var(--cm-green);
  font-size:18px;
}
.cm-mobile-close{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid #E5E7EB;
  background:#FFFFFF;
  cursor:pointer;
  font-weight:900;
  color:#111827;
}
.cm-mobile-menu a{
  display:block;
  padding:12px 6px;
  font-size:18px;
  font-weight:800;
  color:var(--cm-green) !important;
  text-decoration:none !important;
  border-radius:12px;
}
.cm-mobile-menu a:hover{ background:#F1F5F9; }
.cm-mobile-divider{
  border:none;
  border-top:1px solid #E5E7EB;
  margin:10px 0;
}
.cm-mobile-primary{
  background:#A7D3B2;
  color:#0B1F16 !important;
  padding:12px 12px !important;
}



/* ================= PATCH: ACHTERGROND TERUG (MOBIEL) =================
   - Topbar wordt weer een groene strip (zonder tekst)
   - Hero/borders blijven volledig zichtbaar (iets groter)
   - Desktop blijft ongewijzigd */
@media (max-width: 768px){

  /* Groene strip bovenaan terug, maar zonder Contact/Lid/NL tekst */
  .cm-topbar{
    display:block !important;
    background: var(--cm-green) !important;
    height:12px !important;
    padding:0 !important;
  }
  .cm-topbar-inner{
    display:none !important;
  }

  /* Hero/borders duidelijker zichtbaar achter de card */
  .cm-hero{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    margin-top:14px !important;
  }
  .cm-hero-media{
    height:320px !important;
    border-radius:26px !important;
  }
  .cm-hero-content h2{
    font-size:34px !important;
  }
  .cm-hero-content p{
    font-size:16px !important;
  }

  /* Zorg dat de achtergrondlaag niet "wit" wordt door eerdere overrides */
  .benu-bg{
    background:linear-gradient(180deg,#F6F8FC 0%,#EDF2FB 40%,#E3ECFB 100%) !important;
  }
}