/*
Theme Name:   GeneratePress Child
Author:       Jeroen van Buuren
Description:  Child theme voor ORenAI
Template:     generatepress
Version:      1.0
*/

/* ============================================================================
   ORenAI layout v0.2 — 2026-01-26
   Basis: VBCA layout-principes (header/nav/pills/responsive) + OR-tool (Gravity)
   Let op: Kleuren (palet) later harmoniseren — nu: technisch robuust + match PHP.
===============================================================================

   INHOUDSOPGAVE
   ---------------------------------------------------------------------------
   0.  Design tokens (layout/typografie; kleur later)
   1.  Header basis
   2.  Logo (links)
   3.  Navigatie / hoofdmenu (structuur)
   4.  Menu-knoppen (pills)
   5.  Responsive regels
       5.1 Mobiel (≤ 767px)
       5.2 Tablet (768px–1024px)
       5.3 Desktop (≥ 1025px)
       5.4 Fail-safe ultraklein (≤ 360px)

   6.  Content spacing basis (VBCA-principe, maar veilig site-breed)
        6.1 Variant A — H1 gevolgd door P
		6.2 Variant B — H1 gevolgd door H2/H3 (template) 
		6.3 Mobiel: titel schaal (alle varianten die je toevoegt)
		6.4 KOPTEKSTEN ALGEMEEN (site-breed) 
		6.5 HOME (page-id-26): gekleurde koppen + bold (alleen waar jij class zet)
		6.6 Accentblok – antraciet achtergrond met witte tekst
		6.7 Home (page-id-26)
   7.  Mobiel padding & block-group reset (excl. GravityView single)
   8.  Optioneel: page-id spacingmodel — SKELET (later invullen)
   9.  Pagina Digitale Soevereiniteit (page-id-363) — analoog aan VBCA

   100. GravityView single view (A4 max breedte)
   110. OR-tool basis (scoped)
   120. OR-tool themascores ([or_tool_themascores]) — nieuwe classes
   130. OR-tool terugkoppeling ([per_thema_terugkoppeling]) — nieuwe classes
   900. Tijdelijk / debug (gereserveerd)
============================================================================ */

/* ============================================================================
   0. Design tokens – layout & typografie
============================================================================ */
:root{
  /* Kleuren H2 (H3) op Homepage pagina's meer verkoop en CTA */
  --orenai-accent-compact: #2A9DB0; /* turquoise */
  --orenai-accent-verdiep: #1E8E3E; /* groen */
  --orenai-kop-default: #8A3B1A;    /* koper/bruin */
  --orenai-kop-neutral: #1a1a1a;

  /* Koppen op Home iets steviger (blauw/groen leest anders te licht) */
  --orenai-kop-weight-home: 800;

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

/* ============================================================================
   1. Header basis
============================================================================ */
.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: 275px;
  height: 275px;
}

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

/* ============================================================================
   2. Logo (links) – positionering & schaal
============================================================================ */
.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 kleurkeuzes hier) */
.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: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  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;
}

/* Actieve menu-item: subtiel, geen kleur (kleur via Customizer) */
.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
============================================================================ */

/* 5.1 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 */
  .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 subtiel omhoog */
  .site-header .site-branding img{ transform: translateY(-3px); }

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

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

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

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

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

/* ============================================================================
   6. Pagina-opmaak / spacing-model — ORenAI (page-id gestuurd)
   ---------------------------------------------------------------------------
   Doel: VBCA-achtige rust, strakke afstand tussen:
   - header (entry-header)
   - paginatitel (H1)
   - eerste contentregel (p of subkop)

   Variants:
   A) H1 gevolgd door P     (Home-achtige pagina’s)
   B) H1 gevolgd door H2/H3 (pagina’s met directe subkop onder titel)

   ✅ Nu ingevuld:
   - ORenAI Home OR-leden = page-id-26 => Variant A

   🟨 Nog te vullen (later):
   - voeg page-id’s toe in Variant A/B waar nodig
============================================================================ */

/* ----------------------------------------
   6.1 Variant A — H1 gevolgd door P
----------------------------------------- */

/* Entry-header spacing (Variant A) */
.page-id-26 header.entry-header{
  margin-top: -1em !important;
  margin-bottom: -2em !important;
  padding-bottom: 0 !important;
}

/* Titelstyling (Variant A) */
.page-id-26 .entry-header .entry-title{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.15 !important;
}

/* Content reset direct onder titel (Variant A) */
.page-id-26 .entry-content{
  padding-top: 0 !important;
}

/* Voorkom “dubbele topmarge” bij eerste blokken (Variant A) */
.page-id-26 .entry-content > :first-child{
  margin-top: 0 !important;
}

/* Paragraafritme op deze pagina (Variant A) */
.page-id-26 .entry-content p{
  margin-top: 0.4em !important;
  margin-bottom: 0.4em !important;
}

/* ----------------------------------------
   6.2 Variant B — H1 gevolgd door H2/H3 (template)
   (alleen: eerste subkop direct onder titel compacter)
----------------------------------------- */
/*
.page-id-XXX header.entry-header{
  margin-top: -1em !important;
  margin-bottom: -1.5em !important;
  padding-bottom: 0 !important;
}

.page-id-XXX .entry-header .entry-title{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.15 !important;
}

.page-id-XXX .entry-content > :is(h2.wp-block-heading, h3.wp-block-heading):first-child{
  margin-top: 0.15em !important;
  margin-bottom: 0 !important;
}
*/

/* ----------------------------------------
   6.3 Mobiel: titel schaal (alle varianten die je toevoegt)
----------------------------------------- */
@media (max-width: 480px){
  .page-id-26 .entry-header .entry-title{
    font-size: 32px !important;
    line-height: 1.15 !important;
    margin-bottom: 0 !important;
  }
}

/* ----------------------------------------
   6.4 KOPTEKSTEN ALGEMEEN (site-breed)
   H2/H3 semantisch goed, maar visueel compact.
----------------------------------------- */
.entry-content h2{
  font-size: 26px;
  line-height: 1.35;
  margin-top: 0.9em;
  margin-bottom: 0.25em;
}

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

/* ============================================================================
   6.5 HOME (page-id-26): gekleurde koppen + bold (alleen waar jij class zet)
   Gebruik in WP per kop:
   - blauw/turquoise:  orenai-kop-compact
   - groen:            orenai-kop-verdiep
============================================================================ */

.page-id-26 .entry-content :is(h2.wp-block-heading, h3.wp-block-heading).orenai-kop-compact {
  color: var(--orenai-accent-compact);
  font-weight: var(--orenai-kop-weight-home);
}

.page-id-26 .entry-content :is(h2.wp-block-heading, h3.wp-block-heading).orenai-kop-verdiep {
  color: var(--orenai-accent-verdiep);
  font-weight: var(--orenai-kop-weight-home);
}

.page-id-26 .entry-content :is(h2.wp-block-heading, h3.wp-block-heading).orenai-kop-neutral {
  color: var(--orenai-kop-neutral);
  font-weight: var(--orenai-kop-weight-home);
}


/* ============================================================================
   6.6 HOME (page-id-26): Accentblok rechts (Plan je training)
   Doel: strak antraciet blok zonder overbodige witruimte, met optische balans
============================================================================ */

/* 6.6.1 Basisstijl voor het accentblok (herbruikbaar, zonder paginalock) */
.orenai-blok-accent {
  background-color: #222;
  color: #fff !important;
  padding: 1.25em 15px;
  margin: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.orenai-blok-accent p,
.orenai-blok-accent li,
.orenai-blok-accent a {
  color: #fff !important;
}

.orenai-blok-accent ul,
.orenai-blok-accent ol {
  margin-left: 0;
}

.orenai-blok-accent .wp-block-button__link {
  color: #fff !important;
}

/* 6.6.2 Specifieke correcties voor Home (page-id-26) */
.page-id-26 .orenai-blok-accent.wp-block-group {
  padding: 0 !important;
  margin: 0 !important;
}

.page-id-26 .orenai-blok-accent.wp-block-group > :first-child {
  margin-top: 0 !important;
  padding-top: 10px !important;
}

.page-id-26 .orenai-blok-accent.wp-block-group > :last-child {
  margin-bottom: 0 !important;
  padding-bottom: 40px !important;
}

/* 6.6.3 Typografie-aanpassingen voor visueel evenwicht */
.page-id-26 .orenai-blok-accent h2 {
  font-size: 1.625rem !important;   /* optisch evenwicht met Dag verdiepend */
}

.page-id-26 .orenai-blok-accent h2:first-of-type {
  margin-bottom: 0.5em !important;  /* extra lucht tussen heading en logo */
}


/* ============================================================================
   6.7 HOME (page-id-26): Tight layout voor nested Columns
   Doel: geen extra witruimte door Gutenberg block gaps/marges
============================================================================ */

/* 6.7.1 Verminder spacing tussen en binnen kolommen */
.page-id-26 .orenai-cols-tight.wp-block-columns,
.page-id-26 .orenai-cols-tight .wp-block-columns {
  gap: 16px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.page-id-26 .orenai-cols-tight .wp-block-column {
  padding: 0 !important;
}

/* 6.7.2 Verwijder extra witruimte binnen groups in kolommen */
.page-id-26 .orenai-cols-tight .wp-block-group {
  margin: 0 !important;
  padding: 0 !important;
}

/* 6.7.3 Marges voor tekstblokken binnen kolommen */
.page-id-26 .orenai-cols-tight :is(h2, h3) {
  margin-top: 0.6em !important;
  margin-bottom: 0.25em !important;
}

.page-id-26 .orenai-cols-tight p {
  margin-top: 0.4em !important;
  margin-bottom: 0.4em !important;
}

.page-id-26 .orenai-cols-tight :is(ul, ol) {
  margin-top: 0.35em !important;
  margin-bottom: 0.35em !important;
}


/* ============================================================================
   7. Mobiel padding & block-group reset (excl. GravityView single)
   - VBCA-achtig gedrag, maar voorkomt dat we de A4 GravityView layout “stuk” maken
============================================================================ */
@media (max-width: 480px){

  /* Alleen niet-GravityView pagina’s padding geven */
  body:not(.single-gravityview) .inside-article{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Gutenberg groepen op mobiel niet “in laten springen” */
  body:not(.single-gravityview) .entry-content .wp-block-group{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ============================================================================
   8. Optioneel: page-id spacingmodel — SKELET (later invullen)
============================================================================ */
/*
Voorbeeld later:
.page-id-XXX header.entry-header { ... }
.page-id-XXX .entry-content { ... }

@media (max-width: 1024px){
  .page-id-XXX .entry-header .entry-title{ ... }
}
*/

/* =========================================================================
   9.0 Pagina Digitale Soevereiniteit (page-id-363) — analoog aan VBCA layout
=========================================================================== */

/* == Header spacing per pagina == */
.page-id-363 header.entry-header {
  margin-top: -1em !important;
  margin-bottom: -1.5em !important;
  padding-bottom: 0 !important;
}

/* == Titelstyling == */
.page-id-363 .entry-header .entry-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.15 !important;
}

@media (max-width: 480px) {
  .page-id-363 .entry-header .entry-title {
    font-size: 32px !important;
    line-height: 1.15 !important;
    margin-bottom: 0 !important;
  }
}

/* == Inhoudspadding en eerste blok reset == */
.page-id-363 .entry-content {
  padding-top: 0 !important;
}

.page-id-363 .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-363 .entry-content p {
  margin-top: 0.4em !important;
  margin-bottom: 0.4em !important;
}

.page-id-363 .entry-content blockquote {
  margin-top: 0.3em !important;
  margin-bottom: 0.3em !important;
}

.page-id-363 .entry-content blockquote p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* == Kopteksten algemeen (sitebreed) == */
.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 (eerste H2/H3) */
.page-id-363 .entry-content > :is(h2.wp-block-heading, h3.wp-block-heading):first-child {
  margin-top: 0.15em !important;
  margin-bottom: 0 !important;
}

@media (max-width: 480px) {
  .page-id-363 .entry-content > :is(h2.wp-block-heading, h3.wp-block-heading):first-child {
    margin-top: 0.2em !important;
    margin-bottom: 0 !important;
  }
}

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

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

@media (max-width: 480px) {
  .page-id-363 .inside-article {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .page-id-363 .entry-content .wp-block-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ============================================================================
   100. GRAVITYVIEW — Max A4 breedte voor single view
============================================================================ */
body.single-gravityview .inside-article,
body.single-gravityview #main.site-main,
body.single-gravityview #primary.content-area{
  max-width: 793px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* ============================================================================
   110. OR-TOOL — Basis (scoped) | Nieuwe PHP classes
============================================================================ */
.or-tool{
  /* Bewust beperkt: geen sitebrede typografie overrulen.
     Alleen OR-tool blokken zelf. */
}

.or-tool__error{
  margin: 0.6em 0;
  padding: 0.6em 0.8em;
  border: 1px solid #ddd;
  background: #fafafa;
  color: #333;
}

.or-tool__heading{
  margin: 0.6em 0 0.4em 0;
}

/* ============================================================================
   120. OR-TOOL — themascores ([or_tool_themascores])
============================================================================ */
.or-tool__themascores{
  margin-bottom: 2em;
}

.or-tool__themascore-table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
}

/* kolom 1 vaste breedte (zoals oude CSS) */
.or-tool__themascore-table th:nth-child(1),
.or-tool__themascore-table td:nth-child(1){
  width: 360px;
  max-width: 400px;
  white-space: nowrap;
}

/* overige kolommen auto */
.or-tool__themascore-table th:nth-child(2),
.or-tool__themascore-table td:nth-child(2),
.or-tool__themascore-table th:nth-child(3),
.or-tool__themascore-table td:nth-child(3){
  width: auto;
}

/* rijhoogte + borders */
.or-tool__themascore-table td,
.or-tool__themascore-table th{
  height: 55px;
  vertical-align: middle;
  padding: 0.15em;
  text-align: left;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  overflow: hidden;
}

/* koprij */
.or-tool__themascore-table th{
  background-color: #f2f2f2;
  font-weight: bold;
  font-size: 30px;
  line-height: 1.2;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}

/* thema cel */
.or-tool__thema-with-icon{
  display: flex;
  align-items: center;
  gap: 0.6em;
  box-sizing: border-box;
  line-height: 1.3;
}

.or-tool__thema-icon{
  display: inline-block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
  background-color: #fff;
  flex-shrink: 0;
}

.or-tool__thema-name{
  display: inline-block;
}

/* scorebar (nieuwe namespaced classes) */
.or-tool__scorebar{
  background-color: #eee;
  height: 1.6em;
  width: 100%;
  position: relative;
  border-radius: 0px 20px 20px 0px;
}

.or-tool__scorefill{
  height: 100%;
  border-radius: 0px 20px 20px 0px;
}

.or-tool__scorefill--rood{
  background-color: #CC5500; /* later palet */
}

.or-tool__scorefill--oranje{
  background-color: #FF8C00; /* later palet */
}

/* ============================================================================
   130. OR-TOOL — terugkoppeling ([per_thema_terugkoppeling])
============================================================================ */
.or-tool__feedback{
  margin-top: 3em;
}

/* thema-sectie */
.or-tool__thema{
  margin-bottom: 2em;
}

.or-tool__thema-title{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0.5em 0 0.4em 0;
  font-size: 1.35em;
  font-weight: 700;
}

.or-tool__thema-title .or-tool__thema-icon{
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.or-tool__thema-title-text{
  line-height: 1.2;
}

/* subkoppen Belangrijk / Verbeterbaar */
.or-tool__subhead{
  font-size: 1.05em;
  font-weight: 600;
  margin: 0.8em 0 0.3em 0;
}

.or-tool__subhead--belangrijk{
  color: #993300; /* later palet */
}

.or-tool__subhead--verbeterbaar{
  color: #CC6600; /* later palet */
}

/* feedback blokken */
.or-tool__feedback-block{
  margin-bottom: 1em;
}

.or-tool__feedback-block-head{
  margin-bottom: 0.2em;
}

/* toelichting / advies */
.or-tool__note{
  font-style: italic;
  color: #555;
}

.or-tool__advice{
  font-weight: bold;
  margin-top: 0.3em;
  color: #2C5C34; /* later palet */
}

.or-tool__advice-label{
  font-weight: bold;
  color: #2C5C34; /* later palet */
}

.or-tool__advice-text{
  display: block;
  font-weight: normal;
  color: #2C5C34; /* later palet */
}

/* ============================================================================
   900. TIJDELIJK / DEBUG (gereserveerd)
============================================================================ */