/*
Theme Name:   GeneratePress Child
Author:       Jeroen van Buuren / ChatGPT-4o
Description:  Child theme voor VBCA
Template:     generatepress
Version:      1.0.0
*/

/* ============================
   ⬇ VBCA layout v5.9.0 — 2026-01-04
   Oorspronkelijk in Customizer Extra CSS
   Nu overgezet naar style.css
   ============================ */
/* =========================================================================
   VBCA / BNA layout v6.1.5
   Gepubliceerd: 2026-01-24
   Auteur: ChatGPT-4o voor Jeroen van Buuren
---------------------------------------------------------------------------

   📂 INHOUDSOPGAVE
   ------------------------------------------------------------------------
   0. Design tokens
   1. Header basis
      1.1 Profielfoto
   2. Logo (links)
   3. Navigatie / hoofdmenu
   4. Menu-knoppen (pills)
      4.1 Basis: menu-links als pill buttons
	  4.2 Actieve menu-item: subtiel gewicht, geen extra kleur
	  4.3 Mobile/Tablet: verberg overbodige hamburger/toggle (menu staat al zichtbaar)
   5. Responsive regels
      5.1 Mobiel (≤ 767px)
      5.2 Tablet (768px–1024px)
      5.3 Desktop (≥ 1025px)
      5.4 Fail-safe: ultrakleine schermen
      5.5 Detail hulp bij pagina CV Professionele achtergrond
   6. Pagina’s opmaak in groep-vorm (page-id gestuurd spacingmodel)
      6.1 HEADER POSITIONERING PER PAGINA
	  6.2 TITELSTYLING PER PAGINA
	  6.3 INHOUDSPOSITIONERING & RESET
	  6.4 ELEMENTSPECIFIEKE SPACING
	  6.5 KOPTEKSTEN ALGEMEEN
	  6.6 LIJSTEN
	  6.7 RESPONSIVE CORRECTIES
      6.8 Kaderblok / samenvatting (vbca-kader)
   7. Mailknop styling (vbca-mailknop)
   8. Titel verbergen op mobiel/tablet (alleen homepagina)
	  8.1 Intro H2 als rustige lead (page-id 870)
=========================================================================== */

/* =========================================================================
   0. Design tokens – layout & typografie (kleur via Customizer)
=========================================================================== */
:root {
  /* Afmetingen menu-pills */
  --btn-pad-x: 14px;
  --btn-pad-y: 8px;
  --btn-radius: 999px;

  /* Grid & spacing */
  --gap: 10px;
  --pill-min: clamp(88px, 28vw, 140px);
  --nav-max:  clamp(340px, 96vw, 620px);

  /* Header edge spacing per breakpoint */
  --edge-m: 2px;   /* mobiel */
  --edge-t: 0px;   /* tablet */
  --edge-d: 0px;   /* desktop */

  /* Merkkleuren */
  --vbca-roestbruin: #a03c00;
}

/* =========================================================================
   1. Header basis + generieke profielfoto (kleur via Customizer)
=========================================================================== */

.site-header {
  position: static;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.site-header .inside-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  gap: 8px;
  padding-inline: var(--edge-m);
  padding-block: 2px;
}

/* ==== Profielfoto rond (component, geen merkkleur) ==== */
.avatar-rond {
  display: inline-block;
  overflow: hidden;
  border-radius: 50%;
  width: 275px;
  height: 275px;
}

.avatar-rond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* =========================================================================
   2. Logo (links) – positionering & schaal (kleur via Customizer)
=========================================================================== */

.site-header .site-logo {
  order: 1;
  margin: 0;
  text-align: left;
  align-self: center;
}

.site-header .site-branding {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  max-width: 100%;
}

.site-header .site-branding img {
  display: block;
  height: auto;
  width: auto;
  max-height: 100%;
}

/* =========================================================================
   3. Navigatie / hoofdmenu – structuur & positionering
=========================================================================== */

.site-header .main-navigation {
  order: 3;
  flex: 1 0 100%;
  width: 100%;
  margin-top: 2px;
}

@media (min-width: 1025px) {
  .site-header .main-navigation {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    margin-top: 0;
  }
}

/* Structuur van de menulijst, geen visuele styling */
.main-navigation .main-nav > ul,
.main-navigation .menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.main-navigation .main-nav > ul > li,
.main-navigation .menu > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* =========================================================================
   4. Menu-knoppen (pills)
=========================================================================== */

/* 4.1 Basis: menu-links als pill buttons */
.main-navigation .menu > li > a,
.main-navigation .main-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 5px 14px;
  border-radius: 999px;
  line-height: 1.1;

  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;

  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

/* Hover en focus blijven kleurmatig via Customizer */

/* 4.2 Actieve menu-item: subtiel gewicht, geen extra kleur */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset;
}

/* 4.3 Mobile/Tablet: verberg overbodige hamburger/toggle (menu staat al zichtbaar) */
@media (max-width: 1024px) {

  /* 1) Toggle knop (hamburger) weg */
  .main-navigation .menu-toggle {
    display: none !important;
  }

  /* 2) Eventuele overgebleven rij/ruimte weg (lege balk effect) */
  .main-navigation .inside-navigation {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 0 !important;
  }

  /* 3) Indien GeneratePress nog extra spacing/border op de nav zet */
  .main-navigation {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
}



/* =======================================================
    5. Responsive regels 
========================================================= */

/* -- Mobiel (≤ 767px) -- */
@media (max-width: 767px) {

  /* Verberg hamburger en forceer zichtbaar menu */
  #site-navigation .menu-toggle {
    display: none !important;
  }
  #site-navigation .main-nav {
    display: block !important;
  }

  /* Header compacter maken */
  .site-header,
  .site-header .inside-header,
  .site-header .inside-header-grid-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }


  .site-header .inside-header {
    padding-bottom: 2px !important;
  }

  /* Logo omhoog trekken */
  .site-header .site-branding img {
    transform: translateY(-3px);
  }

  /* Pills compacter plaatsen onder logo */
  .site-header .main-navigation {
    margin: 4px auto 0 !important;
    padding: 0 !important;
    max-width: var(--nav-max);
  }

  /* Menu als 3-koloms pill-grid */
  .main-navigation .main-nav > ul,
  .main-navigation .main-nav > ul.menu,
  .main-navigation .menu {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(var(--pill-min), max-content)) !important;
    justify-content: center;
    column-gap: var(--gap);
    row-gap: 4px;
    margin-inline: auto;
    padding: 0;
  }

  .main-navigation .main-nav > ul > li,
  .main-navigation .menu > li {
    margin: 0 !important;
  }
}

/* -- Tablet (768px–1024px) -- */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-header .inside-header {
    padding-top: 0 !important;
    padding-bottom: 2px !important;
  }

  .site-header .main-navigation {
    margin-top: 4px !important;
  }
    .site-header .inside-header {
    padding-inline: 20px !important;
  }

}

/* -- Desktop (≥ 1025px) -- */
@media (min-width: 1025px) {
  .site-header .inside-header {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    padding-block: 0;
  }

  .site-header .site-branding {
    order: 1 !important;
    margin-right: auto !important;
  }

  .site-header .main-navigation {
    order: 2 !important;
    margin-left: auto !important;
  }

  .site-header .inside-header-grid-container {
    padding-inline: var(--edge-d);
  }

  .main-navigation .menu {
    display: flex;
    align-items: center;
    gap: var(--gap);
    margin: 0;
    padding: 0;
  }

  .main-navigation .menu > li {
    margin: 0;
  }
}

/* -- Ultrakleine schermen (≤ 360px) -- */
@media (max-width: 360px) {
  .site-header .site-logo {
    max-width: 100% !important;
  }
}

/* -- Pagina-specifiek: CV kernprofiel-lijst fix -- */
.page-id-586 ul.kernprofiel-afronding {
  margin-bottom: 0;
}


/* =========================================================================
   6. Pagina-opmaak in groep-vorm — layout v6.1.4 met page-id-870
   Sturing op spacing van header, titel, inhoud en elementen
=========================================================================== */

/* ==6.1 HEADER POSITIONERING PER PAGINA === */

/* Scenario 1: Pagina met H1 gevolgd door P (Home) */
.page-id-18 header.entry-header,
.page-id-870 header.entry-header {
  margin-top: -1em !important;
  margin-bottom: -2em !important;
  padding-bottom: 0 !important;
}

/* Scenario 2: Pagina’s met H1 gevolgd door H2 */
.page-id-10 header.entry-header,
.page-id-14 header.entry-header,
.page-id-586 header.entry-header,
.page-id-759 header.entry-header,
.page-id-16 header.entry-header,
.page-id-12 header.entry-header {
  margin-top: -1em !important;
  margin-bottom: -1.5em !important;
  padding-bottom: 0 !important;
}


/* ==6.2 TITELSTYLING PER PAGINA === */
.page-id-870 .entry-header .entry-title,
.page-id-18 .entry-header .entry-title,
.page-id-10 .entry-header .entry-title,
.page-id-14 .entry-header .entry-title,
.page-id-586 .entry-header .entry-title,
.page-id-759 .entry-header .entry-title,
.page-id-16 .entry-header .entry-title,
.page-id-12 .entry-header .entry-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.15 !important;
}

@media (max-width: 480px) {
  .page-id-870 .entry-header .entry-title,
  .page-id-18 .entry-header .entry-title,
  .page-id-10 .entry-header .entry-title,
  .page-id-14 .entry-header .entry-title,
  .page-id-586 .entry-header .entry-title,
  .page-id-759 .entry-header .entry-title,
  .page-id-16 .entry-header .entry-title,
  .page-id-12 .entry-header .entry-title {
    font-size: 32px !important;
    line-height: 1.15 !important;
    margin-bottom: 0 !important;
  }
}


/* ==6.3 INHOUDSPOSITIONERING & RESET === */
.page-id-870 .entry-content,
.page-id-10 .entry-content,
.page-id-18 .entry-content,
.page-id-14 .entry-content,
.page-id-586 .entry-content,
.page-id-759 .entry-content,
.page-id-16 .entry-content,
.page-id-12 .entry-content {
  padding-top: 0 !important;
}

.page-id-870 .entry-content > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.page-id-10 .entry-content > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.page-id-18 .entry-content > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.page-id-14 .entry-content > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.page-id-586 .entry-content > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.page-id-759 .entry-content > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.page-id-16 .entry-content > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.page-id-12 .entry-content > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* === 6.4 ELEMENTSPECIFIEKE SPACING === */
.page-id-870 .entry-content p,
.page-id-10 .entry-content p,
.page-id-18 .entry-content p,
.page-id-14 .entry-content p,
.page-id-586 .entry-content p,
.page-id-759 .entry-content p,
.page-id-16 .entry-content p,
.page-id-12 .entry-content p {
  margin-top: 0.4em !important;
  margin-bottom: 0.4em !important;
}

.page-id-870 .entry-content blockquote,
.page-id-10 .entry-content blockquote,
.page-id-18 .entry-content blockquote,
.page-id-14 .entry-content blockquote,
.page-id-586 .entry-content blockquote,
.page-id-759 .entry-content blockquote,
.page-id-16 .entry-content blockquote,
.page-id-12 .entry-content blockquote {
  margin-top: 0.3em !important;
  margin-bottom: 0.3em !important;
}

.page-id-870 .entry-content blockquote p,
.page-id-10 .entry-content blockquote p,
.page-id-18 .entry-content blockquote p,
.page-id-14 .entry-content blockquote p,
.page-id-586 .entry-content blockquote p,
.page-id-759 .entry-content blockquote p,
.page-id-16 .entry-content blockquote p,
.page-id-12 .entry-content blockquote p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* === 6.5 KOPTEKSTEN ALGEMEEN === */
/* H2/H3 semantisch goed, maar visueel compact */
.entry-content h2 {
  font-size: 22px;
  line-height: 1.25;
  margin-top: 0.9em;
  margin-bottom: 0.25em;
}

.entry-content h3 {
  font-size: 20px;
  line-height: 1.15;
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}


/* Subkop direct onder titel compacter (alleen eerste H2/H3 in entry-content) */
.page-id-870 .entry-content > :is(h2.wp-block-heading, h3.wp-block-heading):first-child,
.page-id-10  .entry-content > :is(h2.wp-block-heading, h3.wp-block-heading):first-child,
.page-id-18  .entry-content > :is(h2.wp-block-heading, h3.wp-block-heading):first-child,
.page-id-14  .entry-content > :is(h2.wp-block-heading, h3.wp-block-heading):first-child,
.page-id-586 .entry-content > :is(h2.wp-block-heading, h3.wp-block-heading):first-child,
.page-id-759 .entry-content > :is(h2.wp-block-heading, h3.wp-block-heading):first-child,
.page-id-16  .entry-content > :is(h2.wp-block-heading, h3.wp-block-heading):first-child,
.page-id-12  .entry-content > :is(h2.wp-block-heading, h3.wp-block-heading):first-child {
  margin-top: 0.15em !important;
  margin-bottom: 0 !important;
}



/* === 6.6 LIJSTEN === */
.entry-content ul,
.entry-content ol {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}


/* === 6.7 RESPONSIVE CORRECTIES === */
@media (min-width: 767px) {
  .site-content {
    align-items: flex-start !important;
  }
}

@media (max-width: 480px) {
  .page-id-870 .inside-article,
  .page-id-10 .inside-article,
  .page-id-18 .inside-article,
  .page-id-14 .inside-article,
  .page-id-586 .inside-article,
  .page-id-759 .inside-article,
  .page-id-16 .inside-article,
  .page-id-12 .inside-article {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .page-id-870 .entry-content .wp-block-group,
  .page-id-10 .entry-content .wp-block-group,
  .page-id-18 .entry-content .wp-block-group,
  .page-id-14 .entry-content .wp-block-group,
  .page-id-586 .entry-content .wp-block-group,
  .page-id-759 .entry-content .wp-block-group,
  .page-id-16 .entry-content .wp-block-group,
  .page-id-12 .entry-content .wp-block-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ============================================================================
   6.8 Kaderblok / samenvatting (vbca-kader) — STRAKKE interne spacing
   Gebruik: zet kop + tekst + bullets in een Group en geef class: vbca-kader
============================================================================ */

.vbca-kader{
  background: rgba(0,0,0,0.02);
  border-left: 3px solid rgba(0,0,0,0.14);
  border-radius: 10px;

  /* Binnenruimte (boven/onder/links/rechts) */
  padding: 4px 10px;

  /* Buitenruimte t.o.v. andere blokken */
  margin: 6px 0 16px;

  /* Gutenberg: geen “ruimte tussen blokken” binnen dit kader */
  --wp--style--block-gap: 0px;
}

/* Gutenberg inner wrapper: geen extra ruimte */
.vbca-kader .wp-block-group__inner-container{
  margin: 0;
  padding: 0;
}

/* Start bovenin strak */
.vbca-kader > *:first-child,
.vbca-kader .wp-block-group__inner-container > *:first-child{
  margin-top: 0;
}

/* Eind onderin strak */
.vbca-kader > *:last-child,
.vbca-kader .wp-block-group__inner-container > *:last-child{
  margin-bottom: 0;
}

/* Kop in kader: compact, kleur volgt tekstkleur */
.vbca-kader h2,
.vbca-kader h3,
.vbca-kader .wp-block-heading{
  color: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 4px;
}

/* Tekst compact */
.vbca-kader p{
  margin: 0 0 4px;
}

/* Lijst: dit pakt de “lucht na laatste bullet” */
.vbca-kader ul{
  margin: 0;
  padding-left: 1.05em;
}

.vbca-kader li{
  margin: 2px 0;
}

/* Eerste kader op pagina: niet extra naar beneden duwen */
.entry-content > .vbca-kader:first-child{
  margin-top: 0;
}




/* =========================================================================
   7. Mailknop styling (vbca-mailknop)
=========================================================================== */

.vbca-mailknop {
  background-color: var(--vbca-merkgroen); /* standaard kleur */
  color: #ffffff;
  font-weight: 600;
  border-radius: 999px;
  padding: 10px 18px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
}

.vbca-mailknop:hover,
.vbca-mailknop:focus {
  background-color: #005640; /* iets donkerder groen */
  color: #ffffff;
}

/* =========================================================================
   8. Titel verbergen op mobiel/tablet (alleen homepagina)
   ========================================================================= */
@media (max-width: 1024px) {
  .page-id-870 .entry-header .entry-title {
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* 8.1 Home – Intro H2 als rustige lead (page-id 870)
   Doel: semantisch H2 behouden, visueel 18px/bold/tekstkleur */
   .page-id-870 h2.wp-block-heading.home-intro-h2 {
  font-size: 18px;
  font-weight: 700;
  color: inherit;
  line-height: 1.35;
  margin: 0 0 10px;
}
/* testregel – 13:05 */