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

/* ============================
   ⬇ VBCA layout v5.9.0 — 2026-01-04
   Oorspronkelijk in Customizer Extra CSS
   Nu overgezet naar style.css
   ============================ */
/* =========================================================================
   VBCA / BNA layout v6.1.4
   Gepubliceerd: 2026-01-17
   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)
   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)
   7. Mailknop styling (vbca-mailknop)
=========================================================================== */

/* =========================================================================
   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: sticky;
  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: 200px;
  height: 200px;
}

.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)
=========================================================================== */
.main-navigation .menu > li > a,
.main-navigation .main-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 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 */

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


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

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

  /* Verberg hamburger en forceer zichtbaar menu */
  .main-navigation .menu-toggle {
    display: none !important;
  }
  .main-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: var(--gap);
    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
=========================================================================== */

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


/* === 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: 0 !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: 0 !important;
    margin-bottom: 0 !important;
  }
}


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


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


/* === KOPTEKSTEN ALGEMEEN === */
.entry-content h2 {
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}

.entry-content h3 {
  margin-top: 1.2em;
  margin-bottom: 0.3em;
}

.page-id-870 .entry-content h5.wp-block-heading,
.page-id-10 .entry-content h5.wp-block-heading,
.page-id-18 .entry-content h5.wp-block-heading,
.page-id-14 .entry-content h5.wp-block-heading,
.page-id-586 .entry-content h5.wp-block-heading,
.page-id-759 .entry-content h5.wp-block-heading,
.page-id-16 .entry-content h5.wp-block-heading,
.page-id-12 .entry-content h5.wp-block-heading {
  margin-top: 0.15em !important;
  margin-bottom: 0 !important;
}


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


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