/* =========================================================================
   Gatcha — "shell" stijl voor de WordPress-contactpagina (page-contact.php).
   Bevat ENKEL de header/footer/mobiel-menu/knop-stijlen van de statische
   one-pager (gatcha-web). BEWUST GEEN globale reset of content-regels, zodat
   de WPForms/Gutenberg-content van de contactpagina ongemoeid blijft.
   Bron: gatcha-web/assets/css/style.css (header/footer-secties).
   ========================================================================= */

:root{
  --primary:#5170ff; --primary-dk:#3a4fd6; --primary-lt:#E9ECFF;
  --accent:#c1ff72; --accent-dk:#7fae1b;
  --dark:#191919; --dark-soft:#23262f;
  --text:#191919; --muted:#5b6573; --light:#F6F7FB;
  --page-accent:var(--accent); --page-accent-ink:var(--dark);
}

/* Gescopete box-sizing + mini-reset, ALLEEN binnen de shell-onderdelen */
.site-header, .site-footer, .mobile-menu,
.site-header *, .site-footer *, .mobile-menu *{box-sizing:border-box}
.site-header ul, .site-footer ul, .mobile-menu nav{margin:0;padding:0;list-style:none}
.site-footer p, .site-footer h4{margin:0}
.site-header img, .site-footer img, .mobile-menu img{max-width:100%;display:block}

/* ===== Buttons (pill — zoals live gatcha.eu) ===== */
.site-header .btn,.mobile-menu .btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.74rem 1.5rem;border-radius:9999px;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:.95rem;text-decoration:none;border:2px solid transparent;
  cursor:pointer;transition:filter .15s,background .15s,color .15s;line-height:1.15}
.site-header .btn-cta,.mobile-menu .btn-cta{background:var(--accent);color:var(--dark);border-color:var(--accent)}
.site-header .btn-cta:hover,.mobile-menu .btn-cta:hover{filter:brightness(.95)}

/* ===== Site header (merk-gematcht, donker) ===== */
.site-header{background:var(--dark);position:sticky;top:0;z-index:200;border-bottom:1px solid rgba(255,255,255,.08);font-family:'Montserrat',sans-serif}
.site-header .inner{max-width:1280px;margin:0 auto;padding:.6rem 1.5rem;display:flex;align-items:center;gap:2rem}
.site-header .logo{display:flex;align-items:center;flex-shrink:0}
.site-header .logo img{height:42px;width:auto;display:block}
.site-header nav.main-nav{flex:1;display:flex;gap:1.8rem;align-items:center}
.site-header nav.main-nav a{color:#fff;text-decoration:none;font-size:.94rem;font-weight:600;font-family:'Montserrat',sans-serif}
.site-header nav.main-nav a:hover{color:var(--accent)}
.site-header .header-right{display:flex;align-items:center;gap:1rem}

/* Taalswitcher (NL/EN) */
.site-header .lang{position:relative}
.site-header .lang>button{background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:700;font-size:.8rem;
  padding:.38rem .7rem;border-radius:9999px;cursor:pointer;display:flex;align-items:center;gap:.35rem;font-family:'Montserrat',sans-serif}
.site-header .lang>button svg{width:10px;height:10px}
.site-header .lang ul{position:absolute;right:0;top:130%;background:#fff;border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.22);
  list-style:none;padding:.3rem;min-width:78px;display:none}
.site-header .lang:hover ul,.site-header .lang.open ul{display:block}
.site-header .lang ul a{display:block;padding:.35rem .65rem;color:var(--text);text-decoration:none;font-weight:700;font-size:.82rem;border-radius:6px}
.site-header .lang ul a:hover{background:var(--light)}

/* Hamburger (mobiel) */
.site-header .hamburger{display:none;background:transparent;border:none;cursor:pointer;width:30px;height:22px;position:relative;padding:0}
.site-header .hamburger span{position:absolute;left:0;height:2.5px;width:100%;background:#fff;border-radius:3px;transition:.25s}
.site-header .hamburger span:nth-child(1){top:0}
.site-header .hamburger span:nth-child(2){top:9.5px}
.site-header .hamburger span:nth-child(3){top:19px}

/* Mobiel overlay-menu */
.mobile-menu{position:fixed;inset:0;background:var(--dark);z-index:400;display:flex;flex-direction:column;
  padding:1.4rem 1.5rem 2rem;transform:translateX(100%);transition:transform .28s ease;visibility:hidden;font-family:'Montserrat',sans-serif}
.mobile-menu.open{transform:translateX(0);visibility:visible}
.mobile-menu .mm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}
.mobile-menu .mm-top img{height:40px}
.mobile-menu .mm-close{background:transparent;border:none;color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.mobile-menu nav{display:flex;flex-direction:column;gap:.4rem}
.mobile-menu nav a{color:#fff;text-decoration:none;font-size:1.3rem;font-weight:700;font-family:'Rubik',sans-serif;
  padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-menu nav a:hover{color:var(--accent)}
.mobile-menu .mm-actions{margin-top:auto;display:flex;flex-direction:column;gap:1rem;padding-top:2rem}
.mobile-menu .mm-actions .btn{width:100%}
.mobile-menu .mm-lang{display:flex;gap:1rem;color:#8a93a8;font-size:.85rem;font-weight:700}
.mobile-menu .mm-lang a{color:#8a93a8;text-decoration:none}
.mobile-menu .mm-lang a:hover{color:var(--accent)}
body.menu-open{overflow:hidden}

/* ===== Site footer ===== */
.site-footer{background:var(--dark);color:#aeb6c4;padding:4rem 1.5rem 2rem;font-family:'Montserrat',sans-serif}
.site-footer .inner{max-width:1280px;margin:0 auto}
.site-footer .columns{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:2.5rem;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:2.5rem;margin-bottom:1.5rem}
.site-footer .f-logo img{height:46px;width:auto;margin-bottom:1.1rem}
.site-footer p.f-tag{font-size:.9rem;color:#9aa3b2;max-width:320px;line-height:1.65}
.site-footer h4{font-size:.78rem;color:#fff;text-transform:uppercase;letter-spacing:2px;margin-bottom:1.1rem;font-weight:800;font-family:'Montserrat',sans-serif}
.site-footer ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.site-footer a{color:#aeb6c4;text-decoration:none;font-size:.9rem}
.site-footer a:hover{color:var(--accent)}
.site-footer .contact-list{font-size:.9rem;line-height:1.95;color:#aeb6c4}
.site-footer .contact-list a{color:#aeb6c4}
.site-footer .bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem 1.6rem;font-size:.8rem;flex-wrap:wrap;color:#8a93a8}
.site-footer .bottom .legal{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center}
.site-footer .bottom a{color:#8a93a8}
.site-footer .bottom .credit a{color:var(--accent);font-weight:700}

/* ===== Responsive ===== */
@media(max-width:900px){
  .site-header nav.main-nav{display:none}
  .site-header .header-right .lang,.site-header .header-right .btn-cta{display:none}
  .site-header .hamburger{display:block}
}
@media(max-width:760px){.site-footer .columns{grid-template-columns:1fr;gap:2rem}}

/* =========================================================================
   Hard overrides — neutraliseer lekkende "bare element" thema-CSS.
   style.min.css bevat o.a.  header{position:fixed;width:calc(100% - 48px);
   transform:translateX(-50%);border-radius:16px;...}  en
   footer{padding:96px 64px 64px!important;margin:64px 24px 24px;border-radius:24px}
   die anders onze one-pager header/footer kapotmaken. Hier forceren we de
   one-pager-layout terug (specificiteit .site-header/.site-footer > bare element).
   ========================================================================= */
.site-header{position:sticky;top:0;left:auto;right:auto;transform:none;width:100%;max-width:none;margin:0;padding:0;border-radius:0;background:var(--dark)}
.site-header nav.main-nav{position:static;left:auto;right:auto;transform:none}
.site-footer{position:static;left:auto;right:auto;transform:none;width:auto;max-width:none;margin:0;border-radius:0;padding:4rem 1.5rem 2rem !important}

/* =========================================================================
   Calendly-keuze naast het contactformulier.
   .contact-form-row bevat nu: [info 352px] [formulier .form-group] [Calendly].
   Formulier en Calendly groeien gelijk; bij smal scherm wrappen ze netjes.
   ========================================================================= */
#page .contact-form-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:24px;align-items:stretch}
#page .contact-form-row .form-group{flex:1 1 380px;display:flex;flex-direction:column}
.calendly-group{flex:1 1 380px;display:flex;flex-direction:column;background:#fdfdfd;border:1px solid #dcdcdc;
  border-radius:16px;box-shadow:0 4px 24px 0 rgba(0,0,0,.04);padding:40px;min-width:0}
.calendly-group .cal-head{margin-bottom:8px}
.calendly-group .cal-or{display:inline-block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:.7rem;
  letter-spacing:2px;text-transform:uppercase;color:#5170ff;background:#E9ECFF;border-radius:9999px;padding:.25rem .7rem;margin-bottom:.8rem}
.calendly-group .cal-head h3{font-family:'Rubik',sans-serif;font-size:1.3rem;font-weight:700;line-height:1.25;margin:0 0 .4rem;color:#191919}
.calendly-group .cal-head p{font-family:'Montserrat',sans-serif;font-size:1rem;line-height:1.6;color:#5b6573;margin:0}
.calendly-embed{flex:1;min-width:280px;min-height:660px;margin-top:16px}
@media(max-width:1100px){ .calendly-embed{min-height:700px} }
@media(max-width:600px){ .calendly-group{padding:24px} .calendly-embed{min-height:760px} }

/* --- Layout-herziening: formulier + Calendly = twee gelijke keuze-kolommen,
       info/reviews als volle-breedte band eronder (3 smalle kolommen pasten niet
       netjes in de 1152px-rij). --- */
#page .contact-form-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:28px;align-items:stretch}
#page .contact-form-row .form-group{flex:1 1 420px;order:1}
.calendly-group{flex:1 1 420px;order:2}
#page .contact-form-row .min-width-352{flex:1 1 100%;order:3;min-width:0;max-width:none;margin-top:8px;border-top:1px solid #E6E8F0;padding-top:32px}
@media(max-width:820px){ #page .contact-form-row .form-group, .calendly-group{flex:1 1 100%} }

/* --- Info/reviews als nette intro-band BOVEN de keuze (niet eronder) ---
   Volgorde: hero -> info+reviews -> [formulier | Calendly]. */
#page .contact-form-row{align-items:flex-start}
#page .contact-form-row .min-width-352{
  order:-1; flex:1 1 100%; min-width:0; max-width:none;
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:20px 48px;
  margin:0 0 4px; padding:0 0 28px; border-top:0; border-bottom:1px solid #E6E8F0;
}
#page .contact-form-row .min-width-352 > .wp-block-group:first-child{flex:1 1 300px; margin:0}
#page .contact-form-row .min-width-352 > .wp-block-group:nth-child(2){
  flex:1 1 420px; margin:0; display:flex; flex-direction:row; flex-wrap:wrap; gap:12px;
}
#page .contact-form-row .min-width-352 .info-card.w-100{width:auto; flex:1 1 220px}

/* =========================================================================
   Herziening v2 — clean & gelijke kaarten.
   - lange intro-tekst verborgen (hero pitcht dit al)
   - reviews = slanke gecentreerde trust-strip bovenaan
   - formulier + Calendly = twee even hoge, uitgelijnde kaarten
   ========================================================================= */
#page .contact-form-row{align-items:stretch}

/* Trust-strip (reviews) bovenaan, gecentreerd; intro-tekst weg */
#page .contact-form-row .min-width-352{
  order:-1; flex:1 1 100%; min-width:0; max-width:none;
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px;
  margin:0 0 4px; padding:0; border:0;
}
#page .contact-form-row .min-width-352 > .wp-block-group:first-child{display:none}
#page .contact-form-row .min-width-352 > .wp-block-group:nth-child(2){
  display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:12px; margin:0; flex:0 1 auto;
}
#page .contact-form-row .min-width-352 .info-card.w-100{width:auto; flex:0 1 auto; margin:0}

/* Twee gelijke, uitgelijnde keuze-kaarten */
#page .contact-form-row .form-group{display:flex; flex-direction:column}
.calendly-group{display:flex; flex-direction:column}
.calendly-group .calendly-embed{flex:1 1 auto; min-height:600px; margin-top:16px}
.calendly-group .calendly-embed iframe{height:100% !important; min-height:600px}

/* reviews echt horizontaal naast elkaar (overrule WP flex-vertical) */
#page .contact-form-row .min-width-352 > .wp-block-group:nth-child(2){flex-direction:row !important; align-items:stretch !important}
#page .contact-form-row .min-width-352 .info-card.w-100{width:auto !important; flex:0 1 320px}

/* =========================================================================
   v3 — clean toggle: formulier OF Calendly (één tegelijk, gecentreerd).
   Overrulet de eerdere side-by-side layout.
   ========================================================================= */
#page .contact-form-row{display:block !important; max-width:880px; margin-left:auto; margin-right:auto}
#page .contact-form-row .min-width-352{display:none !important}   /* intro + reviews weg = rustiger */

.gatcha-toggle{display:flex; gap:6px; background:#EEF0F6; border:1px solid #E6E8F0; border-radius:9999px;
  padding:6px; max-width:520px; margin:0 auto 28px}
.gatcha-toggle button{flex:1; border:0; background:transparent; cursor:pointer; padding:.72rem 1rem; border-radius:9999px;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:.92rem; color:#5b6573; transition:background .15s,color .15s,box-shadow .15s}
.gatcha-toggle button:hover{color:#191919}
.gatcha-toggle button.active{background:#fff; color:#191919; box-shadow:0 2px 8px rgba(0,0,0,.08)}

#page .contact-form-row .form-group{width:100%; max-width:880px; margin:0 auto}
.calendly-group{width:100%; max-width:880px; margin:0 auto}
.form-group.is-hidden, .calendly-group.is-hidden{display:none !important}
.calendly-group .cal-or{display:none}
.calendly-embed{min-height:680px; margin-top:18px}
.calendly-embed iframe{min-height:680px}

.calendly-embed, .calendly-embed iframe{width:100% !important}

/* =========================================================================
   v4 — terug naar TWEE KOLOMMEN naast elkaar (formulier | Calendly),
   gelijk hoog & uitgelijnd. Overrulet de toggle-versie (v3).
   Intro-tekst + losse reviews blijven verborgen voor rust.
   ========================================================================= */
#page .contact-form-row{display:flex !important; flex-direction:row; flex-wrap:wrap; gap:28px; align-items:stretch; max-width:1152px; margin:0 auto}
#page .contact-form-row .min-width-352{display:none !important}
#page .contact-form-row .form-group{flex:1 1 420px; max-width:none; margin:0; display:flex; flex-direction:column}
.calendly-group{flex:1 1 420px; max-width:none; margin:0; display:flex; flex-direction:column}
.form-group.is-hidden, .calendly-group.is-hidden{display:flex !important}
.gatcha-toggle{display:none !important}
.calendly-group .cal-or{display:none}
/* Calendly vult de kaart; kalender verticaal gecentreerd zodat een eventueel
   hoogteverschil met het formulier gebalanceerd oogt i.p.v. lege onderkant. */
.calendly-embed{flex:1 1 auto; min-height:560px; margin-top:18px}
.calendly-embed iframe{width:100% !important}
@media(max-width:820px){
  #page .contact-form-row .form-group, .calendly-group{flex:1 1 100%}
  .calendly-embed iframe{width:100% !important}
}