/*
 Theme Name:  Mees Consulting Child (One Page)
 Template:    twentytwentyfour
 Version:     1.0.2
*/
:root{--blue:#003366;--teal:#008080;--ink:#0f1a24;--bg:#ffffff}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
.mc-header{position:sticky;top:0;z-index:50;color:#fff}
.mc-header .hero{background:linear-gradient(135deg,#03465a,#007d7d)}
.mc-header .inner{padding:14px 0}
.mc-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mc-logo{display:flex;align-items:center;gap:10px}
.mc-logo img{height:32px;width:auto;border-radius:6px;box-shadow:0 1px 6px rgba(0,0,0,.25)}
.mc-name{font-weight:800;letter-spacing:.2px}
.mc-nav a{margin:0 10px;color:#fff;font-weight:600}
.mc-cta{background:#00a3a3;color:#fff;padding:8px 14px;border-radius:8px;font-weight:700}
.mc-burger{display:none;cursor:pointer;border:1px solid rgba(255,255,255,.5);border-radius:6px;padding:8px}
.mc-burger span{display:block;width:20px;height:2px;background:#fff;margin:4px 0}
.mc-panel{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;color:var(--blue);border-bottom:1px solid #e7eef2;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.mc-panel a{display:block;padding:12px 20px;border-top:1px solid #f0f3f6;color:var(--blue)}
.anchor{scroll-margin-top:80px}
.section{padding:64px 0}
h1,h2,h3{color:var(--blue);margin-top:0}
.lead{font-size:18px;opacity:.9}
.cards{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.card{background:#fff;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.06);padding:22px;border-top:6px solid var(--teal)}
.card.blue{border-top-color:var(--blue)}
.grid-2{display:grid;gap:30px;grid-template-columns:1fr 1fr}
@media (max-width:900px){.mc-nav,.mc-cta{display:none}.mc-burger{display:block}.grid-2{grid-template-columns:1fr}}
.hero-intro{background:#0e2f3b;color:#e9f6f6;padding:56px 0}
.hero-intro h1{color:#ffffff;margin-bottom:10px}
.hero-intro p{opacity:.9;max-width:820px}
.cta-bar{background:var(--teal);color:#fff;text-align:center;padding:40px 20px}
.footer{background:var(--blue);color:#fff;text-align:center;padding:22px;font-size:14px}
.footer a{color:#fff;text-decoration:underline}

/* ===== v1.0.4: White top bar + big cropped logo; headings modern; equal service cards ===== */

/* Topbar (white) above the gradient hero */
.mc-topbar{
  background:#ffffff;
  color:#0f1a24;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.mc-topbar .inner{ padding:10px 0; }
.mc-topbar .mc-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mc-topbar .mc-nav a{ color:#0f1a24; font-weight:700; }
.mc-topbar .mc-nav a:hover{ background:rgba(0,0,0,.06); border-radius:8px; }
.mc-topbar .mc-cta{ background:#00a3a3; color:#fff; padding:10px 16px; border-radius:12px; box-shadow:none; }
@media (max-width:900px){ .mc-topbar .mc-nav, .mc-topbar .mc-cta { display:none; } }

/* Cropped/zoomed logo using background-image (independent of file whitespace) */
.logo-crop{
  width:88px; height:88px; border-radius:16px;
  background:#fff url('images/logo.png') center/140% no-repeat;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  border:1px solid #e9eef2;
}
@media (max-width:900px){ .logo-crop{ width:68px; height:68px; } }

/* Site name next to big logo */
.mc-brandname{ font-weight:900; font-size:26px; margin-left:12px; color:#0f1a24; }

/* Keep existing gradient hero below */
.mc-header .hero{ background:linear-gradient(135deg,#03465a,#007d7d); }
.mc-header .inner{ padding:14px 0; }

/* Headings modern (no serif) */
h1,h2,h3{ font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; font-weight:800; letter-spacing:.2px; }

/* Equal columns for the 3 service cards */
.cards{ display:flex; gap:20px; flex-wrap:wrap; justify-content:center; }
.cards .card{ flex:1 1 280px; max-width:360px; }

/* Remove serif overrides if any leftover */
.hero-intro h1{ font-size:clamp(36px,6vw,64px); line-height:1.1; }

/* Slightly larger hero padding to balance bigger topbar */
.hero-intro{ padding:64px 0; }

/* ===== v1.0.5 ===== */
.logo-crop{ width:112px; height:112px; background:#fff url('images/logo.png') center/180% no-repeat; border-radius:20px; }
@media (max-width:900px){ .logo-crop{ width:82px; height:82px; } }
a.card{ display:block; color:inherit; text-decoration:none; }
a.card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.12); transition:all .2s ease; }
.mc-header .hero .inner .mc-row{ display:none !important; }


/* ===== v1.0.6: single header, bigger cropped logo, headings Inter, equal service cards ===== */
.mc-topbar{background:#fff;color:#0f1a24;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.mc-topbar .inner{padding:10px 0}
.mc-topbar .mc-nav a{color:#0f1a24;font-weight:700;margin:0 12px;padding:6px 8px}
.mc-topbar .mc-nav a:hover{background:rgba(0,0,0,.06);border-radius:8px}
.mc-topbar .mc-cta{background:#00a3a3;color:#fff;padding:10px 16px;border-radius:12px}
@media (max-width:900px){.mc-topbar .mc-nav,.mc-topbar .mc-cta{display:none}}
.logo-crop{width:136px;height:136px;border-radius:24px;background:#fff url('images/logo.png') center/240% no-repeat;box-shadow:0 10px 26px rgba(0,0,0,.22);border:1px solid #e9eef2}
@media (max-width:900px){.logo-crop{width:104px;height:104px}}
h1,h2,h3{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:800;letter-spacing:.2px}
#diensten .cards{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
#diensten .cards>.card,#diensten .cards>a.card{flex:1 1 280px;max-width:360px}
/* Verberg eventueel resterende hero-nav van oudere versies */
.mc-header .hero .inner .mc-row{display:none!important}


/* ===== v1.0.7: bigger logo only, remove brand text, remove green lines, grid services, hero CTA ===== */

/* Bigger, tighter cropped logo and more topbar breathing room */
.mc-topbar .inner{ padding:18px 0; }
.logo-crop{
  width:152px; height:152px;                 /* bigger */
  border-radius:26px;
  background:#fff url('images/logo.png') center/260% no-repeat; /* tighter crop */
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  border:1px solid #e9eef2;
}
@media (max-width:900px){ .logo-crop{ width:112px; height:112px; } }

/* In case the text node survived in HTML somewhere */
.mc-brandname{ display:none !important; }

/* Remove green lines on cards */
.card{ border-top:none !important; }
.card.blue{ border-top:none !important; }

/* Services in one clean row (desktop), responsive stack */
#diensten .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; justify-items:stretch; align-items:stretch; }
@media (max-width:980px){ #diensten .cards{ grid-template-columns:1fr; } }

/* Large CTA button inside hero-intro */
.hero-intro .big-cta{ display:inline-block; margin-top:18px; padding:14px 22px; background:#00a3a3; color:#fff; border-radius:14px; font-weight:800; box-shadow:0 10px 24px rgba(0,0,0,.18); }
.hero-intro .big-cta:hover{ filter:brightness(1.05); text-decoration:none; }


/* ===== v1.0.9: logo visibility fix and hero title on one line (nowrap) ===== */

/* Logo less zoomed and centered */
.logo-crop{
  width:152px;
  height:152px;
  border-radius:26px;
  background:#fff url('images/logo.png') center/180% no-repeat !important;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  border:1px solid #e9eef2;
}
@media (max-width:900px){
  .logo-crop{ width:112px; height:112px; background-size:200% !important; }
}

/* Hero title nowrap on desktop */
.hero-intro h1{ white-space:nowrap; }
@media (max-width:768px){
  .hero-intro h1{ white-space:normal; }
}


/* ===== v1.1.0: bigger visible logo, bird accents, remove lines, services grid ===== */

/* 1) Logo volledig zichtbaar en groter */
.logo-crop{
  width:176px; height:176px; border-radius:26px;
  background:#fff url('images/logo.png') center/contain no-repeat !important;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  border:1px solid #e9eef2;
}
@media (max-width:900px){ .logo-crop{ width:132px; height:132px; } }

/* 2) Vogeltje subtiel terug laten komen */
.hero-intro{ position:relative; }
.hero-intro::after{
  content:""; position:absolute; right:24px; top:18px; width:56px; height:56px; opacity:.12;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M24 40c10-2 16-8 16-16 5 6 10 7 18 4-4 6-8 10-18 12H24z" fill="%23aaf0e6"/><path d="M26 18c-2 8-10 6-14 6 4 4 6 9 9 12 4 4 9 2 9-4 0-5-1-9-4-14z" fill="%2300a3a3"/><circle cx="40" cy="22" r="2" fill="%23083b4c"/></svg>') center/contain no-repeat;
}
.section h2{ position:relative; padding-left:44px; }
.section h2::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:28px; height:28px; opacity:.9;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M24 40c10-2 16-8 16-16 5 6 10 7 18 4-4 6-8 10-18 12H24z" fill="%2300a3a3"/><path d="M26 18c-2 8-10 6-14 6 4 4 6 9 9 12 4 4 9 2 9-4 0-5-1-9-4-14z" fill="%23007777"/><circle cx="40" cy="22" r="2" fill="%23083b4c"/></svg>') center/contain no-repeat;
}

/* 3) Lijnen tussen secties weghalen (hard override) */
hr, .wp-block-separator{ display:none !important; }
.section, .section::before, .section::after,
.container::before, .container::after{ border:0 !important; box-shadow:none !important; }
.card{ border-top:none !important; }
.card.blue{ border-top:none !important; }
#over + .section, #diensten, #case, #contact{ border-top:0 !important; }
.wp-block-spacer{ display:none !important; }
.wp-block-group__inner-container{ border:0 !important; box-shadow:none !important; }
div[style*="border-top"], div[style*="border-bottom"]{ border:0 !important; }
div[style*="box-shadow"]{ box-shadow:none !important; }

/* 4) Diensten netjes naast elkaar */
#diensten .cards{
  display:grid; grid-template-columns:repeat(3, minmax(240px,1fr));
  gap:24px; align-items:stretch; justify-items:stretch; margin-top:30px;
}
@media (max-width:980px){ #diensten .cards{ grid-template-columns:1fr; } }
#diensten a.card{ display:block; color:inherit; text-decoration:none; }
#diensten a.card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.12); transition:all .2s ease; }
#diensten .cards > *:empty{ display:none; }


/* ===== v1.1.1: logo as rectangle, bird from logo, kill extra lines, force services grid ===== */

/* 1) LOGO: rechthoek, geen witte tile */
.logo-crop{
  width:220px; height:80px;               /* rechthoek */
  background:transparent url('images/logo.png') left/contain no-repeat !important;
  border-radius:8px; box-shadow:none; border:0;
}
@media (max-width:900px){ .logo-crop{ width:180px; height:64px; } }

/* 2) BIRD: gebruik linker deel van logo (alleen vogel) als icoon */
.bird-ico{ display:inline-block; width:34px; height:24px;
  background:url('images/logo.png') left/280% no-repeat; background-color:transparent; border-radius:0;
}
.section h2{ position:relative; padding-left:48px; }
.section h2::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:34px; height:24px; background:url('images/logo.png') left/280% no-repeat; opacity:.9;
}

/* 3) Lijnen/spacers: hard uitzetten */
hr, .wp-block-separator, .wp-block-spacer{ display:none !important; }
.wp-block-group, .wp-block-group__inner-container,
.section, .container{ border:0 !important; box-shadow:none !important; background-image:none !important; }
div[style*="border-top"], div[style*="border-bottom"], div[style*="box-shadow"]{ border:0 !important; box-shadow:none !important; }

/* 4) Diensten: 3 kolommen gegarandeerd, lege kolom verbergen */
#diensten .cards{ display:grid !important; grid-template-columns:repeat(3, minmax(260px,1fr)) !important; gap:24px; }
@media (max-width:980px){ #diensten .cards{ grid-template-columns:1fr !important; } }
#diensten .cards > *:empty{ display:none !important; }
#diensten .cards > .wp-block-column:empty{ display:none !important; }
#diensten .card, #diensten a.card{ margin:0 !important; border-top:none !important; }


/* ===== v1.1.2: bigger header logo & bird, services grid strong, tighter hero, remove hero CTA ===== */

/* 1) Header logo veel groter (links) */
.logo-crop{
  width:260px; height:96px;
  background:transparent url('images/logo.png') left/contain no-repeat !important;
  border:0; box-shadow:none; border-radius:8px;
}
@media (max-width:900px){ .logo-crop{ width:200px; height:74px; } }

/* 2) Hero watermark-vogel groter */
.hero-intro::after{ width:80px; height:80px; opacity:.14; right:28px; top:22px; }

/* 3) Diensten keihard naast elkaar (3 kolommen desktop) */
section#diensten .cards,
#diensten .cards,
#diensten .wp-block-columns{ 
  display:grid !important; 
  grid-template-columns:repeat(3, minmax(260px,1fr)) !important; 
  gap:24px !important; 
  align-items:stretch; 
}
@media (max-width:980px){
  section#diensten .cards,
  #diensten .cards,
  #diensten .wp-block-columns{ grid-template-columns:1fr !important; }
}
#diensten .cards > *:empty,
#diensten .wp-block-columns > *:empty{ display:none !important; }
#diensten .card, #diensten a.card{ margin:0 !important; border-top:none !important; max-width:none !important; }

/* 4) Tighter hero spacing */
.hero-intro{ padding:48px 0; }
.hero-intro h1{ margin-bottom:10px; }


/* ===== v1.1.3: force 3 services, bigger header logo (2x), bigger bird icons ===== */

/* Header logo ~2x */
.logo-crop{
  width:520px; height:192px;
  background:transparent url('images/logo.png') left/contain no-repeat !important;
  border:0; box-shadow:none; border-radius:8px;
}
@media (max-width:1200px){ .logo-crop{ width:420px; height:154px; } }
@media (max-width:900px){ .logo-crop{ width:340px; height:126px; } }

/* Bird icons 1.5x */
.section h2{ position:relative; padding-left:64px; }
.section h2::before{ width:51px; height:36px; }

/* Services: EXACT 3 columns, hide empty cards/columns */
#diensten .cards,
section#diensten .cards,
#diensten .wp-block-columns{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(260px,1fr)) !important;
  gap:24px !important;
  align-items:stretch;
}
@media (max-width:980px){
  #diensten .cards,
  section#diensten .cards,
  #diensten .wp-block-columns{ grid-template-columns:1fr !important; }
}

/* Kill empties (even if there's whitespace) */
#diensten .cards > .card:empty,
#diensten .wp-block-columns > .wp-block-column:empty{ display:none !important; }
#diensten .cards > .card{ margin:0 !important; border-top:none !important; max-width:none !important; }

/* In case an empty block has only a spacer inside */
#diensten .wp-block-columns > .wp-block-column .wp-block-spacer:only-child{ display:none !important; }