/*
 Theme Name: Blocksy Child
 Template: blocksy
 Version: 1.0
*/

/* hier kun je eigen CSS kwijt (optioneel) */
/* =========================================
   BeniroDev — Global + Header (Manrope)
   ========================================= */
:root{
  --bd-blue:#0A3A63;
  --bd-orange:#F57C00;
  --bd-text:#0E1117;
  --bd-muted:#718097;
}

/* ---------- Global ---------- */
body { letter-spacing:.1px; }
h1,h2,h3 { color:#0E1117; line-height:1.15; }
p { color:#2a2f36; }

/* ---------- Primary Button (one source of truth) ---------- */
.wp-block-button__link{
  background:var(--bd-blue);
  color:#fff !important;
  padding:.8rem 1.2rem;
  border-radius:12px;
  font-weight:600;
  transition:.2s;
}
.wp-block-button__link:hover{
  background:var(--bd-orange);
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(0,0,0,.12);
}

/* ---------- Hero ---------- */
.bd-hero{ padding:90px 0; }
.bd-hero .has-xx-large-font-size,
.bd-hero h1,.bd-hero h2{ font-weight:700; }
.bd-hero p{ max-width:820px; opacity:.95; }

/* ---------- USPs ---------- */
.bd-usps{ margin-bottom:60px; }
.bd-usps .wp-block-column{ padding:18px 16px; }
.bd-usps h4{ margin:0 0 6px; font-size:20px; }
.bd-usps p{ margin:0; opacity:.9; }
.bd-usps .wp-block-column:hover{
  background:#fff; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* ---------- Cards (Featured Modules) ---------- */
.bd-cards h2{ margin-bottom:32px; }
.bd-cards .wp-block-columns{ gap:22px !important; }
.bd-cards .wp-block-group{
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.06) !important;
}
.bd-cards .wp-block-group:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(0,0,0,.10) !important;
}
.bd-cards h4{ margin-bottom:8px; font-size:22px; }
.bd-cards p{ margin-bottom:14px; opacity:.9; }
.bd-cards .wp-block-button__link{ width:auto; }

/* ---------- About ---------- */
.bd-about p{ font-size:18px; }
.bd-about img{ border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.08); }

/* ---------- CTA ---------- */
.bd-cta{ padding:90px 0; }
.bd-cta h2,.bd-cta p{ color:#fff; }
.bd-cta .wp-block-button__link{ background:var(--bd-orange); color:#fff; }

/* ---------- Header (Blocksy) ---------- */
.site-header,.ct-header,.header{ background:#fff; }
/* subtiele scheidingslijn onder header */
.site-header{ box-shadow:inset 0 -1px 0 #EEF2F6; }

/* LOGO: safety cap zodat hij nooit pagina-groot wordt */
.site-branding img{
  height:auto;
  max-width:180px !important;   /* desktop cap */
  transition:transform .2s ease;
}
.ct-header-sticky .site-branding img{ max-width:150px !important; transform:scale(.95); }

/* Mobile logo cap */
@media (max-width:782px){
  .site-branding img{ max-width:96px !important; }
}

/* Menu (desktop) */
.header-menu .menu{ column-gap:22px; }
.header-menu .menu > li > a{
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:600;
  font-size:16px;      /* 15–17 afhankelijk van smaak */
  letter-spacing:0;
  color:var(--bd-blue);
  padding:14px 12px;
  position:relative;
  transition:color .15s ease;
}
/* Active + hover underline animatie */
.header-menu .menu > .current-menu-item > a,
.header-menu .menu > li > a:focus{ color:var(--bd-orange); }
.header-menu .menu > li > a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:8px;
  height:2px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .18s ease; opacity:.95;
}
.header-menu .menu > li:hover > a{ color:var(--bd-orange); }
.header-menu .menu > li:hover > a::after{ transform:scaleX(1); }

/* Header CTA (optioneel ‘Button’ element in Header Builder) */
.ct-header-cta .button, .ct-header-cta a.ct-button{
  background:var(--bd-orange); color:#fff !important; border-radius:12px;
  padding:10px 16px; font-weight:700;
  box-shadow:0 8px 18px rgba(245,124,0,.18);
  transition:transform .15s, box-shadow .15s, background .15s;
}
.ct-header-cta .button:hover, .ct-header-cta a.ct-button:hover{
  background:#E36F00; transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(245,124,0,.26);
}

/* Search icon */
.ct-header [class*="search"] svg{ width:18px; height:18px; }
.ct-header [class*="search"] svg path{ fill:var(--bd-blue); transition:fill .15s; }
.ct-header [class*="search"]:hover svg path{ fill:var(--bd-orange); }

/* Sticky header overall schaduw */
.ct-header-sticky .ct-header{ box-shadow:0 10px 24px rgba(0,0,0,.06); }

/* Offcanvas/Mobile menu */
.offcanvas{ background:#fff; }
.offcanvas .menu li a{
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px; font-weight:600; color:var(--bd-blue); padding:12px 6px;
}
.offcanvas .menu li a:hover,
.offcanvas .menu .current-menu-item > a{ color:var(--bd-orange); }
.ct-toggle-button{ font-weight:700; }

/* ---------- Responsive tweaks ---------- */
@media (max-width:782px){
  .bd-hero{ padding:64px 0; }
  .bd-cta{ padding:64px 0; }
  .header-menu .menu > li > a{ padding:12px 10px; font-size:15px; }
}
/* Outline button brand-stijl */
.is-style-outline > .wp-block-button__link {
  background:transparent !important;
  color: var(--bd-blue) !important;
  border:2px solid var(--bd-blue) !important;
}
.is-style-outline > .wp-block-button__link:hover {
  background: var(--bd-orange) !important;
  border-color: var(--bd-orange) !important;
  color:#fff !important;
}

/* Cards: equal heights + button bottom align */
.bd-cards .wp-block-group { display:flex; flex-direction:column; height:100%; }
.bd-cards .bd-card-body { flex:1; }
/* ===== Hero compact ===== */
.bd-hero__title{
  font-weight:800;
  font-size:clamp(32px, 4.2vw, 52px);
  line-height:1.15;
  margin:0 0 12px;
  color:#0E1117;
}
.bd-hero__sub{
  font-size:clamp(16px, 1.4vw, 19px);
  max-width:720px;
  opacity:.95;
  margin:0 0 28px;
}
.bd-hero--compact{ position:relative; overflow:hidden; }
.bd-hero--compact::after{
  content:""; position:absolute; right:-160px; top:-120px;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(10,58,99,.08), transparent 70%);
  pointer-events:none;
}

/* ===== USPs / Cards tweaks ===== */
.bd-usps h4{ margin:0 0 6px; }
.bd-cards h2{ margin-bottom:22px; font-size:clamp(22px,2.2vw,30px); }
.bd-cards .wp-block-group{ transition:transform .15s, box-shadow .15s; }
.bd-cards .wp-block-group:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(0,0,0,.10) !important; }

/* ===== Trust strip ===== */
.bd-trust__label{ font-size:13px; color:#7a8492; margin:0 0 6px; }
.bd-trust__logo img{ display:block; margin:0 auto; filter:grayscale(100%); opacity:.55; transition:.2s; }
.bd-trust__logo img:hover{ filter:none; opacity:.9; }

/* ===== Steps ===== */
.bd-step{
  background:#fff; border-radius:14px; padding:18px;
  box-shadow:0 10px 22px rgba(0,0,0,.06); transition:.15s;
}
.bd-step:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(0,0,0,.10); }
.bd-step__num{
  width:36px; height:36px; display:inline-grid; place-items:center;
  border-radius:10px; font-weight:800; color:#fff; background:#F57C00; margin-bottom:10px;
}
.bd-step h4{ margin:6px 0 8px; }
.bd-step p{ margin:0; opacity:.9; }

/* ===== About image ===== */
.bd-about__img img{ border-radius:14px; box-shadow:0 16px 44px rgba(0,0,0,.12); }

/* Mobile spacing */
@media (max-width:782px){
  .bd-hero{ padding-top:56px!important; padding-bottom:56px!important; }
}
/* ===== BeniroDev – Quick Polish ===== */

/* 1) Hero – iets compacter + zachte glow rechts */
.bd-hero { padding: 72px 0 56px; position: relative; }
.bd-hero::after{
  content:""; position:absolute; right:6%; top:18%;
  width:480px; height:480px; pointer-events:none;
  background: radial-gradient( circle at center,
              rgba(10,58,99,.10) 0%, rgba(10,58,99,0) 65% );
  filter: blur(2px);
}
.bd-hero h1 { font-size: clamp(36px, 4.2vw, 56px); line-height:1.1; margin-bottom:14px; }
.bd-hero p  { font-size: clamp(16px, 1.4vw, 18px); opacity:.95; }

/* knoppen net wat “punchier” */
.bd-hero .wp-block-buttons { gap: 10px; }
.bd-hero .wp-block-button__link { padding:.78rem 1.15rem; }

/* 2) USP rij – ritme & hover */
.bd-usps { padding: 36px 0 24px !important; }
.bd-usps .wp-block-columns { gap: 26px; }
.bd-usps .wp-block-column { transition: transform .12s ease, box-shadow .12s ease; border-radius:12px; }
.bd-usps .wp-block-column:hover{ transform: translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.06); }
.bd-usps h4{ margin:6px 0 4px; }
.bd-usps svg rect, .bd-usps svg path { stroke:#F57C00; }

/* 3) “How it works” – badges & kaarten */
.bd-steps { padding: 28px 0 8px; }
.bd-steps .step-card{
  display:flex; flex-direction:column; gap:10px;
  border-radius:14px; background:#fff; padding:22px 22px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
  height:100%;
}
.bd-steps .step-card:hover{ transform: translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,.10); }
.bd-steps .badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px;
  background: #F57C00; color:#fff; font-weight:800; font-size:14px;
}

/* 4) Cards – gelijke hoogte en strakke schaduw */
.bd-cards .wp-block-columns { gap: 22px !important; }
.bd-cards .wp-block-column > .wp-block-group{
  display:flex; flex-direction:column; height:100%;
  border-radius:14px; padding:20px; background:#fff !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.06) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.bd-cards .wp-block-column > .wp-block-group:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.10) !important;
}
.bd-cards .bd-card-body { flex: 1 1 auto; } /* tekstblok rekt mee */

/* 5) Section spacing harmoniseren */
.bd-hero + .bd-usps { margin-top: -10px; }
.bd-usps + .bd-steps { margin-top: 10px; }
.bd-steps + .bd-cards { margin-top: 10px; }
.bd-cards { padding: 32px 0 40px !important; }

/* 6) Mobile fine-tune */
@media (max-width: 782px){
  .bd-hero { padding: 56px 0 36px; }
  .bd-hero::after{ width:300px; height:300px; right:-40px; top:22%; }
  .bd-usps .wp-block-column:hover{ transform:none; box-shadow:none; }
}