/* =========================================
   BeniroDev — Global styling
   ========================================= */

/* Verberg WP site-title/description (naast logo) */
.site-title,
.site-description {
  display: none !important;
}

/* ---------- CSS Vars ---------- */
:root {
  --bd-blue:   #0A3A63;
  --bd-orange: #F57C00;
  --bd-text:   #0E1117;
  --bd-muted:  #718097;

  /* Header logo-hoogtes */
  --bd-logo-desktop: 36px;
  --bd-logo-sticky: 30px;

  /* Blocksy content spacing minimaliseren */
  --content-spacing: 0px;
}

/* ---------- Global ---------- */
html, body {
  margin: 0;
  padding: 0;
}

body { letter-spacing: .1px; }
h1, h2, h3 { color: var(--bd-text); line-height: 1.15; }
p { color: #2a2f36; }

/* =========================================
   Buttons
   ========================================= */

.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);
}

/* Outline style */
.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;
}

/* Generic bd-btn (bij snippets/docs) */
.bd-btn {
  background: var(--bd-blue);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
}
.bd-btn:hover {
  background: var(--bd-orange);
}

/* Outline-variant voor bd-btn */
.bd-btn.is-style-outline {
  background: transparent;
  color: var(--bd-blue);
  border: 2px solid var(--bd-blue);
  border-radius: 12px;
  padding: 8px 14px;
  font-weight: 800;
  text-decoration: none;
}
.bd-btn.is-style-outline:hover {
  background: var(--bd-orange);
  color: #fff;
  border-color: var(--bd-orange);
}

/* =========================================
   Header (Blocksy) — compact BeniroDev
   ========================================= */

/* Basis header look */
.site-header,
.ct-header {
  background: #fff;
  box-shadow: inset 0 -1px 0 #EEF2F6; /* subtiel lijntje onder header */
  padding: 0 !important;
  margin: 0 !important;
}

/* Logo algemeen (fallback) */
.site-branding img {
  height: auto;
  max-width: 180px;
  transition: transform .2s ease;
}

/* Geen extra gap tussen header en content */
.ct-header + .site-main,
.site-header + .site-main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Mobiel logo wat kleiner */
@media (max-width: 782px) {
  .site-branding img {
    max-width: 110px;
  }
}

/* Desktop: compacte header */
@media (min-width: 960px) {

  /* Header-rijen/container plat en auto */
  .ct-header [data-row],
  .ct-header .ct-header-main,
  .ct-header .ct-header-main-inner,
  .ct-header .ct-container {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Branding blok */
  .ct-header .site-branding {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
  }

  /* Logo bepaalt headerhoogte */
  .ct-header .site-branding img {
    max-height: var(--bd-logo-desktop) !important;
    height: auto !important;
    width: auto;
  }

  /* Sticky header iets kleiner */
  .ct-header-sticky .site-branding img {
    max-height: var(--bd-logo-sticky) !important;
  }

  /* Menu-links compact */
  .header-menu .menu > li > a {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 1.1;
    font-size: 15px;
  }
}

/* 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;
  color: var(--bd-blue);
  padding: 14px 12px;
  position: relative;
  transition: color .15s ease;
}
.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-knop */
.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); }

/* 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; }

/* =========================================
   Hero-sectie (binnen de normale container)
   ========================================= */

.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 .bd-hero__title {
  font-weight:800;
  font-size:clamp(32px, 4.2vw, 52px);
  line-height:1.15;
  margin:0 0 12px;
  color:var(--bd-text);
}
.bd-hero .bd-hero__sub {
  font-size:clamp(16px, 1.4vw, 19px);
  max-width:720px;
  opacity:.95;
  margin:0 0 28px;
}
.bd-hero .wp-block-buttons { gap:10px; }
.bd-hero .wp-block-button__link { padding:.78rem 1.15rem; }

/* USPs */
.bd-usps { padding:36px 0 24px !important; margin-bottom:60px; }
.bd-usps .wp-block-columns { gap:26px; }
.bd-usps .wp-block-column {
  padding:18px 16px;
  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:0 0 6px; font-size:20px; }
.bd-usps p { margin:0; opacity:.9; }

/* Cards (Featured Modules) */
.bd-cards { padding:32px 0 40px !important; }
.bd-cards h2 { margin-bottom:22px; font-size:clamp(22px,2.2vw,30px); }
.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; }
.bd-cards h4 { margin-bottom:8px; font-size:22px; }
.bd-cards p { margin-bottom:14px; opacity:.9; }

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

/* 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; }

/* =========================================
   Snippets – archive + cards
   ========================================= */

.bd-snippet-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
}
@media (max-width:1100px) {
  .bd-snippet-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:680px) {
  .bd-snippet-grid { grid-template-columns: 1fr; }
}

.bd-snippet-card {
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  background:#fff;
  border-radius:14px;
  padding:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
.bd-snippet-card:hover {
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(0,0,0,.10);
}

/* Badge in kaart */
.bd-chip {
  display:inline-block;
  background:#EEF2F6;
  color:#0A3A63;
  font-weight:700;
  border-radius:999px;
  padding:.25rem .7rem;
  margin:.6rem 0;
  white-space:nowrap;
}
.bd-chip--premium { background:#FFF5E9; color:#B45309; }

.bd-snippet-card .badge,
.bd-snippet-card .bd-chip {
  position:absolute;
  top:12px; right:12px;
  z-index:2;
}

/* Titel + excerpt + knop */
.bd-snippet-card .title {
  margin:0 0 6px;
  font-size:18px;
  line-height:1.25;
}
.bd-snippet-card .title a {
  color:#0A3A63;
  text-decoration:none;
}
.bd-snippet-card .title a:hover { color:#F57C00; }

.bd-snippet-card .excerpt {
  margin:6px 0 12px;
  color:#2a2f36;
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:6em;
}

.bd-snippet-card .btn {
  margin-top:auto;
  align-self:flex-start;
  background:var(--bd-blue);
  color:#fff;
  padding:.55rem .9rem;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.bd-snippet-card .btn:hover {
  background:var(--bd-orange);
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(245,124,0,.22);
}

/* =========================================
   Filterbar + teller + paginatie
   ========================================= */

.bd-filterbar { margin:14px 0 10px; }

.bd-filterbar__row {
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;
  align-items:flex-end;
  background:#fff;
  border-radius:12px;
  padding:12px 14px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

.bd-filterbar label {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  color:#718097;
  min-width:220px;
  flex:0 0 auto;
}
.bd-filterbar label:nth-child(1) { min-width:240px; }
.bd-filterbar label:nth-child(2) { min-width:220px; }
.bd-filterbar .bd-filterbar__search { min-width:280px; }

.bd-filterbar select,
.bd-filterbar input[type="search"] {
  width:100%;
  padding:10px 12px;
  border:1px solid #E5EAF0;
  border-radius:10px;
  outline:none;
  font-size:15px;
  box-sizing:border-box;
}

.bd-filterbar__btn {
  background:var(--bd-blue);
  color:#fff;
  border:0;
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
  height:44px;
}
.bd-filterbar__btn:hover { background:var(--bd-orange); }

@media (max-width:640px) {
  .bd-filterbar__row > label,
  .bd-filterbar__row > .bd-filterbar__search {
    flex:1 1 100%;
    min-width:100%;
  }
}

/* Teller boven grid */
.bd-resultsbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:8px 0 14px;
}
.bd-resultsbar__count {
  color:#718097;
  font-size:14px;
}

/* Paginatie */
.bd-pagination {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  margin:18px 0 8px;
}
.bd-pagination .bd-page a,
.bd-pagination .bd-page span {
  display:inline-block;
  min-width:38px;
  text-align:center;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #E5EAF0;
  color:#0A3A63;
  background:#fff;
  font-weight:700;
}
.bd-pagination .bd-page a:hover {
  background:#0A3A63;
  color:#fff;
  border-color:#0A3A63;
}
.bd-pagination .bd-page .current {
  background:#0A3A63;
  color:#fff;
  border-color:#0A3A63;
}

/* Lege staat */
.bd-empty {
  background:#fff;
  border-radius:14px;
  padding:24px;
  text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  margin:10px 0;
}
.bd-empty h4 { margin:0 0 8px; }
.bd-empty p { margin:0 0 14px; color:#667085; }
.bd-empty__btn {
  display:inline-block;
  background:#0A3A63;
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
}
.bd-empty__btn:hover {
  background:#F57C00;
  color:#fff;
}

/* =========================================
   Snippet SINGLE – header + code
   ========================================= */

/* Titel + badge op één regel */
.single-snippets .bd-header,
.single-snippet  .bd-header {
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:6px 0 14px;
}

.single-snippet .entry-header .entry-title,
.single-snippets .entry-header .entry-title {
  font-size:clamp(22px, 2.6vw, 32px);
  line-height:1.25;
  margin:6px 0 8px;
  font-weight:700;
}

/* Badge stijl */
.bd-badge {
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  vertical-align:middle;
}
.bd-badge--free { background:rgba(10,58,99,.10); color:#0A3A63; }
.bd-badge--pro  { background:#F57C00; color:#fff; }

/* Codeblok */
.bd-code-wrap { position:relative; margin:0; }

.bd-code-actions {
  position:absolute;
  right:16px; top:16px;
  display:flex; gap:10px;
  z-index:2;
}
.bd-copy-btn, .bd-expand-btn {
  appearance:none;
  border:0;
  outline:0;
  cursor:pointer;
  font-weight:700;
  padding:8px 12px;
  border-radius:10px;
  background:var(--bd-blue);
  color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.bd-copy-btn:hover, .bd-expand-btn:hover {
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(0,0,0,.26);
  background:#0b477d;
}

.bd-code {
  background:#0f172a;
  color:#e5e7eb;
  border-radius:12px;
  padding:18px 20px;
  white-space:pre;
  overflow:auto;
  line-height:1.45;
  box-shadow:0 18px 28px rgba(2,6,23,.18) inset;
}
.bd-code.collapsed {
  max-height:260px;
  position:relative;
  overflow:hidden;
}
.bd-code.collapsed::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0; height:64px;
  background:linear-gradient(to bottom, rgba(15,23,42,0), rgba(15,23,42,1));
  pointer-events:none;
}

/* fallback voor <pre> in content */
.entry-content pre {
  background:#0f172a;
  color:#e2e8f0;
  border-radius:10px;
  padding:16px;
  max-height:420px;
  overflow:auto;
  font-size:14px;
  line-height:1.5;
  white-space:pre;
}

/* Sidebar */
.bd-aside { position:sticky; top:24px; }
.bd-meta-card, .bd-recent-card {
  background:#fff;
  border-radius:16px;
  padding:16px 18px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}

.single-snippets .site-main .single-snippet,
.single-snippet  .site-main .single-snippet {
  margin-bottom:48px;
}

/* =========================================
   Mini chips (tags) + kicker
   ========================================= */

.bd-chip-mini {
  display:inline-block;
  font-size:12px;
  font-weight:700;
  line-height:1;
  border-radius:999px;
  padding:4px 8px;
  background:#EEF2F6;
  color:#0A3A63;
}
.bd-chip-mini--free { background:#EAF4FF; color:#0A3A63; }
.bd-chip-mini--pro  { background:#FFF5E9; color:#B45309; }
.bd-chip-mini--tag  { background:#F2F4F7; color:#475467; font-weight:600; }

.bd-kicker {
  color:#718097;
  font-size:14.5px;
  margin:0 0 8px;
}

/* =========================================
   Cart link / EDD / checkout
   ========================================= */

.bd-cart-link {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-weight:700;
  text-decoration:none;
  color:#0A3A63;
}
.bd-cart-icon { font-size:1.15rem; line-height:1; }
.bd-cart-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.15rem;
  height:1.15rem;
  border-radius:999px;
  background:#0A3A63;
  color:#fff;
  font-size:.75rem;
  padding:0 .35rem;
  margin-left:.25rem;
}

/* Hero boven checkout */
.bd-co-hero {
  max-width:920px;
  margin:0 auto 12px;
  padding:10px 2px;
}
.bd-co-hero h1 {
  margin:0 0 6px;
  font-size:clamp(22px,3.5vw,28px);
  color:#0A3A63;
}
.bd-co-hero p { margin:0; color:#4b5563; }

/* Checkout container */
.edd-checkout { max-width:920px; margin:0 auto; }
#edd_checkout_form_wrap {
  background:#fff;
  border-radius:16px;
  padding:22px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}
#edd_checkout_cart,
.edd-cart {
  border-collapse:separate;
  border-spacing:0;
  width:100%;
}
#edd_checkout_cart th {
  font-weight:700;
  color:#0A3A63;
  border-bottom:1px solid #E7EEF5;
  padding:10px;
}
#edd_checkout_cart td {
  border-bottom:1px solid #F1F5F9;
  padding:12px 10px;
  vertical-align:middle;
}
.edd_cart_total { font-weight:800; color:#0A3A63; }
.edd-submit,
.edd-checkout a.edd-submit {
  background:#0A3A63;
  border:none;
  color:#fff;
  border-radius:12px;
  padding:10px 16px;
  font-weight:700;
}
.edd-coupon-code-wrap input[type="text"] { border-radius:10px; }

/* =========================================
   Documents – grid & cards (re-using snippet look)
   ========================================= */

.bd-doc-grid { /* gebruikt .bd-snippet-grid voor kolommen */ }

.bd-doc-card .title a { color:#0A3A63; text-decoration:none; }
.bd-doc-card .title a:hover { color:#F57C00; }

.bd-doc-meta {
  color:#718097;
  font-size:13px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:.25rem 0 .4rem;
}
.bd-doc-tags .bd-chip-mini { margin-right:6px; }

.bd-doc-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.bd-doc-actions .btn {
  background:var(--bd-blue);
  color:#fff;
  padding:.55rem .9rem;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  transition:background .15s, transform .15s, box-shadow .15s;
}
.bd-doc-actions .btn:hover {
  background:var(--bd-orange);
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(245,124,0,.22);
}
.bd-doc-actions .btn.is-style-outline {
  background:transparent;
  color:var(--bd-blue);
  border:2px solid var(--bd-blue);
}
.bd-doc-actions .btn.is-style-outline:hover {
  background:var(--bd-orange);
  color:#fff;
  border-color:var(--bd-orange);
}

/* =========================================
   Hero banner (Library / Home / Docs / etc.)
   ========================================= */

/* Full-bleed wrapper breekt uit de container */
.ct-container .bd-hero-bleed,
.container .bd-hero-bleed,
.entry-content .bd-hero-bleed,
.site-main .bd-hero-bleed {
  position:relative;
  display:block;
  width:100vw;
  max-width:100vw;
  left:50%;
  transform:translateX(-50%);
  margin-left:0;
  margin-right:0;
  margin-top:0;
  padding-top:0;
  z-index:1;
}

/* Banner body */
.bd-hero-banner {
  position:relative;
  min-height:clamp(260px,36vw,440px);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  border-radius:0;
  box-shadow:none;
  display:grid;
  align-items:end;
}
.bd-hero-banner::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0) 72%,
    rgba(255,255,255,.85) 96%,
    #fff 100%
  );
}

/* Overlay in de banner */
.bd-hero-banner__overlay {
  position:absolute;
  left:clamp(18px,6vw,64px);
  bottom:clamp(14px,5vw,42px);
}
.bd-hero-banner__overlay .bd-hero__title {
  margin:0 0 6px;
  font-weight:800;
  font-size:clamp(28px,5.2vw,56px);
  color:#fff;
  text-shadow:0 3px 16px rgba(0,0,0,.25);
}
.bd-hero-banner__overlay .bd-hero__sub {
  margin:0;
  max-width:980px;
  font-size:clamp(14px,1.6vw,18px);
  color:#eef3f8;
}

/* Pagina-varianten met blauwe overlay */
.bd-hero-banner--library{
  background-image:
    linear-gradient(
      to bottom,
      rgba(10,58,99,0) 0%,
      rgba(10,58,99,0.55) 60%,
      #ffffff 100%
    ),
    url('https://benirodev.com/wp-content/uploads/2025/11/newbanner.png');
}

.bd-hero-banner--home{
  background-image:
    linear-gradient(
      to bottom,
      rgba(10,58,99,0) 0%,
      rgba(10,58,99,0.55) 60%,
      #ffffff 100%
    ),
    url('https://benirodev.com/wp-content/uploads/2025/11/newbanner.png');
}

.bd-hero-banner--modules {
  background-image:
    linear-gradient(
      to bottom,
      rgba(10,58,99,0) 0%,
      rgba(10,58,99,0.55) 60%,
      #ffffff 100%
    ),
    url('https://benirodev.com/wp-content/uploads/2025/11/modules-hero.jpg');
}

.bd-hero-banner--docs {
  background-image:
    linear-gradient(
      to bottom,
      rgba(10,58,99,0) 0%,
      rgba(10,58,99,0.55) 60%,
      #ffffff 100%
    ),
    url('https://benirodev.com/wp-content/uploads/2025/11/docs-hero.jpg');
}

.bd-hero-banner--contact {
  background-image:
    linear-gradient(
      to bottom,
      rgba(10,58,99,0) 0%,
      rgba(10,58,99,0.55) 60%,
      #ffffff 100%
    ),
    url('https://benirodev.com/wp-content/uploads/2025/11/contact-hero.jpg');
}

/* Intro direct onder banner iets compacter */
.bd-hero--compact { padding-top:6px; }

/* Verberg alle paginatitels (we gebruiken eigen hero-titels) */
.entry-header .entry-title,
.ct-page-title {
  display: none !important;
}

/* =========================================
   Responsive tweaks
   ========================================= */

@media (max-width:782px) {
  .bd-hero { padding:56px 0 36px; }
  .bd-hero::after { width:300px; height:300px; right:-40px; top:22%; }
  .header-menu .menu > li > a {
    padding:12px 10px;
    font-size:15px;
  }
}

@media (max-width:900px) {
  .bd-actions { justify-content:flex-start; }
  .bd-aside { position:static; }
}
/* =========================================
   BeniroDev – header + hero FINAL override
   ========================================= */

/* Logo-breedte op desktop in één variabele */
:root {
  --bd-logo-width-desktop: 150px;
}

/* ---------- HEADER DESKTOP ---------- */
@media (min-width: 960px) {

  /* Basis header: strak, dunne witte balk */
  header#header.ct-header,
  .site-header,
  .ct-header {
    background: #fff;
    box-shadow: inset 0 -1px 0 #EEF2F6;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Alle header-rijen/container plat + auto hoogte */
  header#header.ct-header [data-row],
  .ct-header .ct-header-main,
  .ct-header .ct-header-main-inner,
  .ct-header .ct-container {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Branding blok netjes gecentreerd */
  .ct-header .site-branding {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
  }

  /* Logo: ongeveer 150px breed */
  .ct-header .site-branding img,
  header#header .site-branding img,
  .site-logo-container img {
    max-width: var(--bd-logo-width-desktop) !important;
    max-height: none !important;
    height: auto !important;
    width: auto;
  }

  /* Sticky iets kleiner */
  .ct-header-sticky .site-branding img {
    max-width: calc(var(--bd-logo-width-desktop) * 0.85) !important;
  }

  /* Menu-links: zelfde grootte als submenu (16px) */
  .header-menu .menu > li > a {
    font-size: 16px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    line-height: 1.1;
  }
}

/* Alle rare geforceerde hoogtes van eerdere tests uitschakelen */
header#header,
header#header > div,
header#header > div > div,
.ct-header-row[data-row="middle"],
#main-container > #header > div > div {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  outline: none !important;
}

/* Geen extra ruimte tussen header en content */
.ct-header + .site-main,
.site-header + .site-main,
body.home .site-main,
body.page-id-61 .site-main {  /* 61 = Library (#61 (geen titel)) */
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Zorg dat de hero direct onder de header begint */
.bd-hero-bleed {
  margin-top: 0 !important;
}

/* ---------- HERO BANNER HOOGTE ---------- */
/* Lager en wat logischer clamp (min 220 – max 360px) */
.bd-hero-banner {
  min-height: clamp(220px, 32vw, 360px) !important;
}
/* Submenu compacter dan hoofdmenu */
.header-menu .menu li ul.sub-menu > li > a {
  font-size: 14px;          /* iets kleiner dan main menu */
  padding: 6px 14px;        /* minder hoog, maar nog goed klikbaar */
  font-weight: 500;         /* mag ook 600 blijven als je dat mooier vindt */
}

/* Hoverkleur gelijk houden */
.header-menu .menu li ul.sub-menu > li > a:hover {
  color: var(--bd-orange);
}
/* Fix: geen extra witruimte tussen header en full-width hero */
#main .ct-container-full {
  padding-top: 0 !important;
}
/* =========================================
   Fine-tune hero spacing (home + fullwidth)
   ========================================= */

/* 1. Weg met de extra top-padding van de fullwidth container
   (die gap tussen header en banner) */
#main.ct-container-full,
#main .ct-container-full {
  padding-top: 0 !important;
}

/* 2. Home-hero titel netter positioneren */
.bd-hero-banner--home .bd-hero__title {
  padding-left: 3px;
  padding-top: 0;
  padding-bottom: 24px;
}
/* Submenu-typografie iets kleiner dan hoofdmenu */
.header-menu .sub-menu > li > a {
  font-size: 12px;
  padding: 6px 12px !important;
  font-weight: 600;
}
/*/* =========================================
   Hero banner – overal dezelfde positie
   ========================================= */

/* Hoogte van de banners (mag je nog fine-tunen) */
.bd-hero-banner {
  position: relative;
  min-height: clamp(260px, 36vw, 360px);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  align-items: end;
}

/* Overlayblok met titel + sub */
.bd-hero-banner__overlay {
  position: absolute;
  left: clamp(18px, 6vw, 64px);
  bottom: 75px;            /* hier speel je mee: 64 / 72 / 80 etc. */
}

/* Zorg dat alle H1’s gelijk zijn, ook Home */
.bd-hero-banner__overlay .bd-hero__title {
  margin: 0 0 8px;
  padding: 0;
}

/* Subregel ook strak */
.bd-hero-banner__overlay .bd-hero__sub {
  margin: 0;
}

/* Oude YellowPencil-paddings overruulen */
.bd-hero-banner--home h1,
.bd-hero-banner--library h1,
.bd-hero-banner--modules h1,
.bd-hero-banner--docs h1,
.bd-hero-banner--contact h1 {
  padding: 0 !important;
}

/* Op mobiel wat dichter bij onderkant */
@media (max-width: 782px) {
  .bd-hero-banner__overlay {
    bottom: 32px;
  }
}
.bd-hero-banner__overlay {
  position: absolute;
  left: clamp(18px, 6vw, 64px);
  bottom: clamp(80px, 9vw, 175px);  /* schaalt mee met scherm */
}
/* =========================================
   HERO – overal dezelfde hoogte + positie
   ========================================= */

/* Zelfde hoogte voor alle hero-banners */
.bd-hero-banner {
  position: relative;
  min-height: 206px;      /* jouw YellowPencil-hoogte, voor alle pagina's */
  height: auto;           /* nooit vastzetten op 206px, blijft responsive */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  align-items: end;
}

/* Tekstblok op vaste afstand van de onderkant (175px vond je mooi) */
.bd-hero-banner__overlay {
  position: absolute;
  left: clamp(18px, 6vw, 64px);
  bottom: 175px;          /* hier speel je mee als je hem hoger/lager wilt */
}

/* Titel-padding overal gelijk */
.bd-hero-banner .bd-hero__title {
  margin: 0 0 6px;
  padding: 0 0 8px 3px;   /* klein duwtje naar links + beetje ruimte naar subregel */
}

/* Mobile: tekst wat lager zodat het niet klem komt */
@media (max-width: 782px) {
  .bd-hero-banner {
    min-height: 220px;
  }
  .bd-hero-banner__overlay {
    bottom: 32px;
  }
}