/*
 Theme Name:     De VAO
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Custom Divi theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */

/* ==========================================================================
   VAO Amersfoort - site-CSS (alle pagina's)
   Kleuren verwijzen naar de globale VAO-kleuren (--gcid-vao-*), met hex als terugval.
   Gegenereerd door make-all.ps1 uit css\*.css - pas die bestanden aan en genereer opnieuw.
   Plak in Divi > Thema-opties > Aangepaste CSS (of in style.css van het child theme).
   ========================================================================== */

/* ===== Basis =====
   Alles wat Divi in het Design-tabblad kan (padding, hoogtes, afstanden, uitlijning, lettertypen,
   letterspatiering) staat in de JSON. Hier staat alleen wat Divi niet kan. */

/* verborgen kop voor schermlezers (Divi's "verbergen" haalt de kop ook bij hulpsoftware weg) */
body .vao-vw{position:absolute!important;width:1px;height:1px;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* koppen: mooi afbreken, ook bij lange samenstellingen */
body :is(.vao-hero,.vao-sectie,.vao-strook) :is(h1,h2,h3){text-wrap:balance;hyphens:auto;overflow-wrap:break-word}

/* accent in koppen: streep onder het laatste zinsdeel (nooit cursief, nooit gemengde gewichten) */
body .vao-streep{box-shadow:inset 0 -.085em 0 0 var(--gcid-vao-rood,#e0021a);padding-bottom:.02em}
body .vao-streep--wit{box-shadow:inset 0 -.085em 0 0 var(--gcid-vao-wit,#ffffff)}
body .vao-streep--rood{color:var(--gcid-vao-rood,#e0021a)}

/* ruimte tussen alinea's in een tekstblok (Divi kent dit niet per alinea) */
body .vao-tekst p + p{margin-top:1.05em}

/* ===== Knoppen ===== */
/* In Divi 5 is de knopmodule zelf het <a>-element: de klasse staat dus op a.et_pb_button. Padding staat in de JSON (13px 24px). */
html body #page-container .et_pb_section .vao-knop.et_pb_button{display:inline-flex;flex-direction:row!important;flex-wrap:nowrap;align-items:center;gap:.55rem;white-space:nowrap;transition:background .18s cubic-bezier(.32,.72,0,1),color .18s,border-color .18s,transform .18s cubic-bezier(.32,.72,0,1)}
/* Divi zet bij hover zelf padding 1em links/rechts: terugzetten */
html body #page-container .et_pb_section .vao-knop.et_pb_button:hover{padding:13px 24px!important}
html body #page-container .et_pb_section .vao-knop.et_pb_button:active{transform:translateY(1px)}
/* pijl in de knop */
html body #page-container .et_pb_section .vao-knop--pijl.et_pb_button::after{content:""!important;display:inline-block!important;position:static!important;width:15px;height:15px;margin:0!important;opacity:1!important;font-size:0!important;line-height:0!important;top:auto!important;left:auto!important;right:auto!important;align-self:center;transform:none!important;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");transition:transform .18s cubic-bezier(.32,.72,0,1)}
html body #page-container .et_pb_section .vao-knop--pijl.et_pb_button:hover::after{transform:translateX(3px)!important}
/* witte knop: rode pijl */
html body #page-container .et_pb_section .vao-knop--wit.vao-knop--pijl.et_pb_button::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0021a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
@media (max-width:767px){
  body .vao-knoppen .vao-knop{justify-content:center;white-space:normal;text-align:center}
}


/* ===== Header ===== */
/* Header blijft bovenaan staan. Divi zet overflow-x:hidden op #page-container en dat breekt sticky, daarom overflow-x:clip. */
header.et-l--header{position:sticky!important;top:0;z-index:100}
html body #page-container{overflow-x:clip!important;overflow-y:visible!important}

/* skiplink: pas zichtbaar bij toetsenbordfocus */
body .vao-skip{position:absolute;left:1.25rem;top:-100px;z-index:200;padding:.8rem 1.4rem;background:var(--gcid-vao-inkt,#1a1a1a);color:var(--gcid-vao-wit,#ffffff);border-radius:8px;font-weight:600;text-decoration:none}
body .vao-skip:focus{top:1rem}

body .vao-header{position:relative;z-index:100}
body .vao-header .et_pb_row,body .vao-header .et_pb_column{position:static}
body .vao-header .vao-scripts.et_pb_row{padding:0!important;min-height:0}

/* balk: marges gelijk aan de rest van de site (1290px incl. gutter) */
body .vao-header{border-bottom:1px solid transparent;transition:border-color .18s,box-shadow .18s,background-color .18s}
body .vao-header .vao-navbar.et_pb_row{position:relative;transition:min-height .18s cubic-bezier(.32,.72,0,1)}
body .vao-header.is-vast{border-bottom-color:rgba(26,26,26,.1);box-shadow:0 6px 24px -20px rgba(26,26,26,.55)}
body .vao-header.is-vast .vao-navbar.et_pb_row{min-height:70px!important}

/* merk: logo + naam */
body .vao-merk__logo img{display:block}

/* menu: alles tussen balk en uitklaplaag onpositioneerd, zodat het paneel onder de balk uitlijnt */
body .vao-nav,body .vao-nav .et_pb_menu_inner_container,body .vao-nav .et_pb_menu__wrap,body .vao-nav .et_mobile_nav_menu,body .vao-nav .mobile_nav{position:static!important}
body .vao-nav{flex:1 1 auto;width:auto;background:none!important;padding:0}
body .vao-nav .et_pb_menu_inner_container{display:flex;align-items:center;justify-content:flex-end;width:100%}
body .vao-nav .et_pb_menu__wrap{flex:0 1 auto;justify-content:flex-end;align-items:center}
body .vao-nav .et_pb_menu__wrap,body .vao-nav .et_pb_menu__menu,body .vao-nav nav.et-menu-nav{flex:1 1 auto;width:100%}
body .vao-nav ul.et-menu{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem);width:100%;margin:0;padding:0}
body .vao-nav ul.et-menu>li:first-child,body .vao-nav ul.et-menu>li.menu-cta{margin-left:auto!important}
body .vao-nav ul.et-menu>li{padding:0!important;margin:0!important;align-items:center!important}
body .vao-nav ul.et-menu>li>a{position:relative;display:inline-flex!important;align-self:center!important;height:auto!important;padding:.45rem 0!important;font-size:.9375rem;font-weight:500;line-height:1.6;color:var(--gcid-vao-inkt-70,#4a4a48);text-decoration:none;opacity:1;transition:color .18s cubic-bezier(.32,.72,0,1)}
body .vao-header .vao-nav ul.et-menu>li>a::after{content:"";position:absolute;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto;height:2px!important;transform:scaleX(0)!important;transform-origin:left;background:var(--gcid-vao-rood,#e0021a);transition:transform .18s cubic-bezier(.32,.72,0,1)}
body .vao-header .vao-nav ul.et-menu>li>a:hover{color:var(--gcid-vao-inkt,#1a1a1a)}
body .vao-header .vao-nav ul.et-menu>li>a:hover::after,body .vao-header .vao-nav ul.et-menu>li.current-menu-item>a::after,body .vao-header .vao-nav ul.et-menu>li.current_page_item>a::after{transform:scaleX(1)!important}
body .vao-nav ul.et-menu>li.current-menu-item>a,body .vao-nav ul.et-menu>li.current_page_item>a{color:var(--gcid-vao-inkt,#1a1a1a);font-weight:600}

/* knop Lid worden = menu-item met CSS-klasse "menu-cta" (Uiterlijk > Menu's > CSS-klassen) */
body .vao-nav ul.et-menu>li.menu-cta>a,body .vao-nav ul.et-menu>li.menu-cta.current-menu-item>a{padding:.82rem 1.5rem!important;border:1px solid var(--gcid-vao-rood,#e0021a);border-radius:8px;background:var(--gcid-vao-rood,#e0021a);color:var(--gcid-vao-wit,#ffffff)!important;font-size:.9375rem;font-weight:600;line-height:1.2;white-space:nowrap;transition:background .18s cubic-bezier(.32,.72,0,1),border-color .18s,transform .18s cubic-bezier(.32,.72,0,1)}
body .vao-header .vao-nav ul.et-menu>li.menu-cta>a::after{display:none!important}
body .vao-header .vao-nav ul.et-menu>li.menu-cta>a:hover{background:var(--gcid-vao-rood-diep,#ab0114);border-color:var(--gcid-vao-rood-diep,#ab0114);color:var(--gcid-vao-wit,#ffffff)!important}
body .vao-nav ul.et-menu>li.menu-cta>a:active{transform:translateY(1px)}

/* tablet en mobiel: hamburger + paneel onder de balk (Divi schakelt bij 980px) */
@media (max-width:980px){
  body .vao-nav{flex:0 0 auto}
  /* dicht: alleen de knop Lid worden blijft in de balk, links van de hamburger (zoals het prototype) */
  body .vao-nav{margin-left:auto}
  body .vao-nav .et_pb_menu__wrap{display:flex!important;flex-direction:row;align-items:center;gap:.55rem}
  body .vao-nav .et_pb_menu__menu{display:flex!important;flex:0 0 auto;width:auto}
  body .vao-nav nav.et-menu-nav{flex:0 0 auto;width:auto}
  body .vao-nav ul.et-menu{width:auto}
  body .vao-nav ul.et-menu>li:not(.menu-cta){display:none!important}
  body .vao-nav ul.et-menu>li.menu-cta{margin-left:0!important}
  body .vao-nav .et_mobile_nav_menu{display:block!important;margin:0;float:none}
  body .vao-nav{margin-left:auto}
  body .vao-nav .mobile_menu_bar{position:relative;display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:1px solid rgba(26,26,26,.1);border-radius:8px;transition:border-color .18s}
  body .vao-nav .mobile_menu_bar::before{content:"";display:block;width:46px;height:46px;font-size:0;line-height:0;position:static;background:center/20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E")}
  body .vao-nav .mobile_nav.opened .mobile_menu_bar::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
  body .vao-nav .mobile_nav.opened .mobile_menu_bar{border-color:rgba(255,255,255,.18)}
  /* paneel: schermvullend op inkt, genummerde items */
  body .vao-nav .et_mobile_menu{position:absolute!important;top:100%!important;left:0!important;right:0!important;width:auto!important;z-index:9999;box-sizing:border-box;margin:0;padding:1rem clamp(1.25rem,5vw,4rem) 2.5rem!important;background:var(--gcid-vao-inkt,#1a1a1a);border:0!important;counter-reset:vao-m}
  body .vao-nav .mobile_nav.opened .et_mobile_menu{display:block!important;height:calc(100dvh - 100%);overflow-y:auto;animation:vaoMenuIn .18s cubic-bezier(.32,.72,0,1)}
  body .vao-nav .et_mobile_menu li{padding:0!important;margin:0!important;width:100%;border:0!important;border-top:1px solid rgba(255,255,255,.18)!important}
  body .vao-nav .et_mobile_menu>li:last-child{border-bottom:1px solid rgba(255,255,255,.18)!important}
  body .vao-nav .et_mobile_menu li a{display:flex;align-items:baseline;gap:1rem;padding:.9rem 0!important;border:0!important;background:none!important;font-size:clamp(1.55rem,7vw,2.1rem)!important;letter-spacing:-.03em;color:var(--gcid-vao-wit,#ffffff)!important;text-decoration:none}
  body .vao-nav .et_mobile_menu>li>a::before{counter-increment:vao-m;content:"0" counter(vao-m);font-size:.7rem;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.6);min-width:2.4ch}
  /* Lid worden staat al in de balk naast de hamburger: niet nogmaals in het paneel */
  body .vao-nav .et_mobile_menu>li.menu-cta{display:none!important}
  body .vao-nav .et_mobile_menu>li:has(+ .menu-cta){border-bottom:1px solid rgba(255,255,255,.18)!important}
  body .vao-nav .et_mobile_menu .sub-menu{position:static;display:block;background:none;border:0;box-shadow:none;padding:0 0 0 1rem}
  html body #page-container .vao-nav .et_mobile_menu li>a,html body #page-container .vao-nav .et_mobile_menu li.current-menu-item>a,html body #page-container .vao-nav .et_mobile_menu li.current_page_item>a{color:var(--gcid-vao-wit,#ffffff)!important}
  /* geopend: balk wordt inkt */
  .et-l--header>.et_builder_inner_content .et_pb_section.vao-header.is-open{background-color:var(--gcid-vao-inkt,#1a1a1a)!important;border-bottom-color:transparent;box-shadow:none}
  body .vao-header.is-open .vao-merk__naam :is(h1,h2,h3,h4,h5,h6){color:var(--gcid-vao-wit,#ffffff)!important}
  body .vao-header.is-open .vao-merk__plaats p{color:var(--gcid-vao-wit,#ffffff)!important}
}
@keyframes vaoMenuIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (max-width:560px){
  body .vao-header.is-vast .vao-navbar.et_pb_row{min-height:64px!important}
  body .vao-nav ul.et-menu>li.menu-cta>a,body .vao-nav ul.et-menu>li.menu-cta.current-menu-item>a{padding:.58rem .8rem!important;font-size:.8125rem}
}
@media (prefers-reduced-motion:reduce){body .vao-nav .mobile_nav.opened .et_mobile_menu{animation:none}}


/* ===== Hero =====
   Foto, verloop, kleur, padding en hoogte staan in Divi. Geen eigen CSS nodig. */


/* ===== Welkom ===== */
/* Foto vult de hoogte van de tekstkolom. Wrap en foto liggen absoluut in de module, zodat de hoogte nooit van een percentage afhangt. Maten, afronding en kolomverdeling staan in Divi. */
body .vao-welkom__kolom-beeld.et_pb_column{align-self:stretch}
body .vao-welkom__beeld{position:relative;flex:1 1 auto;overflow:hidden}
body .vao-welkom__beeld .et_pb_image_wrap{position:absolute;inset:0;display:block}
body .vao-welkom__beeld img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 42%}
/* gestapeld: liggende uitsnede */
@media (max-width:980px){
  body .vao-welkom__beeld{flex:0 0 auto;aspect-ratio:16/10}
  body .vao-welkom__beeld img{object-position:center 45%}
}
@media (max-width:767px){
  body .vao-welkom__kolom-tekst{align-items:stretch}
  body .vao-welkom__kolom-tekst .vao-knop{width:100%;justify-content:center;white-space:normal;text-align:center}
}

/* ===== Iconenstrook =====
   Foto, verloop, padding, uitlijning en lettertypen staan in Divi. */
body .vao-strook__icoon svg{display:block}


/* ===== Programma (kaarten) =====
   Opmaak, afstanden, schaduw en de hover van rand en schaduw staan in Divi. Hier alleen het omhoog schuiven. */
body .vao-kaart:is(.et_pb_column,.et_pb_group){transition:transform .18s cubic-bezier(.32,.72,0,1)}
body .vao-kaart:is(.et_pb_column,.et_pb_group):hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){body .vao-kaart:is(.et_pb_column,.et_pb_group):hover{transform:none}}

/* ===== Heritage =====
   Alle opmaak staat in Divi. Hier alleen de doorlopende loper (een eindeloze animatie kent Divi niet). */
body .vao-loper.et_pb_section{overflow:hidden}
body .vao-loper__tekst p.vao-loper__spoor{display:flex;gap:3rem;width:max-content;margin:0;padding:0;animation:vaoSchuif 46s linear infinite}
body .vao-loper__spoor span{white-space:nowrap}
body .vao-loper:hover .vao-loper__spoor{animation-play-state:paused}
@keyframes vaoSchuif{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){body .vao-loper__tekst p.vao-loper__spoor{animation:none}}


/* ===== Nieuws =====
   Kaart, kleuren, afstanden en hover van rand en schaduw staan in Divi. Hier alleen wat Divi niet kent:
   een heel klikbare kaart, de pijl, het inzoomen van de foto en de compacte rijen op telefoon. */
body .vao-bericht{position:relative}
body .vao-bericht .et_pb_module{position:static}
body .vao-bericht .vao-bericht__beeld{position:relative;aspect-ratio:3/2;overflow:hidden}
body .vao-bericht__beeld .et_pb_image_wrap{position:absolute;inset:0;display:block}
body .vao-bericht__beeld img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .55s cubic-bezier(.32,.72,0,1)}
body .vao-bericht:hover .vao-bericht__beeld img{transform:scale(1.045)}
body .vao-bericht__tekstgroep{flex:1 1 auto}
body .vao-punt{display:inline-block;width:3px;height:3px;margin:0 .55rem;border-radius:50%;background:var(--gcid-vao-rood,#e0021a);vertical-align:middle}
/* "Lees verder": de link beslaat de hele kaart; de pijl schuift mee bij hover */
body .vao-bericht__lees a{display:inline-flex;align-items:center;gap:.4rem;color:inherit;text-decoration:none}
body .vao-bericht__lees a::before{content:"";position:absolute;inset:0}
body .vao-bericht__lees a::after{content:"";width:14px;height:14px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0021a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");transition:transform .18s cubic-bezier(.32,.72,0,1)}
body .vao-bericht:hover .vao-bericht__lees a::after{transform:translateX(3px)}
/* telefoon: eerste bericht groot, de rest als compacte rijen met een smalle foto */
@media (max-width:640px){
  body .vao-bericht:not(:first-child){flex-direction:row!important}
  body .vao-bericht:not(:first-child) .vao-bericht__beeld{flex:none;width:110px;aspect-ratio:auto;border-radius:12px 0 0 12px}
  body .vao-bericht:not(:first-child) .vao-bericht__tekstgroep{padding:14px 16px!important;min-width:0}
  body .vao-bericht:not(:first-child) .vao-bericht__lees{display:none}
}

/* Blog-module (Berichten): categorie + rode punt + datum boven de titel, geen tekst, pijl bij "Lees meer", hover */
body .vao-blog article.et_pb_post{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:0;margin:0;transition:transform .25s cubic-bezier(.32,.72,0,1),box-shadow .25s,border-color .25s}
body .vao-blog article.et_pb_post:hover{transform:translateY(-4px)}
body .vao-blog article.et_pb_post .et_pb_image_container,body .vao-blog article.et_pb_post .entry-featured-image-url{order:0;display:block;margin:0;overflow:hidden;aspect-ratio:3/2;position:relative}
body .vao-blog article.et_pb_post .entry-featured-image-url img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.32,.72,0,1)}
body .vao-blog article.et_pb_post:hover .entry-featured-image-url img{transform:scale(1.045)}
body .vao-blog article.et_pb_post .post-meta{order:1;display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;flex-wrap:wrap;font-size:0;line-height:1;margin:0;padding:24px 24px 0}
body .vao-blog article.et_pb_post .post-meta>*{font-size:14px;line-height:1.4}
body .vao-blog article.et_pb_post .post-meta a{pointer-events:none;color:inherit;text-decoration:none}
body .vao-blog article.et_pb_post .post-meta:has(a) .published::before{content:"";display:inline-block;width:4px;height:4px;margin:0 .6rem;border-radius:50%;background:var(--gcid-vao-rood,#e0021a);vertical-align:middle}
body .vao-blog article.et_pb_post .entry-title{order:2;margin:0;padding:10px 24px 0}
body .vao-blog article.et_pb_post .entry-title a{color:inherit}
body .vao-blog article.et_pb_post .post-content{order:3;margin:0;padding:18px 24px 24px;position:static}
body .vao-blog article.et_pb_post .post-content-inner,body .vao-blog article.et_pb_post .post-content>p{display:none}
body .vao-blog article.et_pb_post a.more-link{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;position:static}
body .vao-blog article.et_pb_post a.more-link::before{content:"";position:absolute;inset:0;z-index:1}
body .vao-blog article.et_pb_post a.more-link::after{content:"";width:14px;height:14px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0021a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");transition:transform .18s cubic-bezier(.32,.72,0,1)}
body .vao-blog article.et_pb_post:hover a.more-link::after{transform:translateX(3px)}


/* ===== Contact =====
   Kaart, kleuren, afstanden en lettertypen van de sectie staan in Divi. Hier alleen de opmaak van het
   Gravity Forms-formulier (dat markup van Gravity Forms is, geen Divi-module) en de witte contactlinks. */
body .vao-contactregel a{color:inherit;text-decoration:none}
body .vao-contactregel a:hover{text-decoration:underline}

/* --- Gravity Forms --- */
body .vao-gform .gform_wrapper{margin:0;max-width:none;font-family:inherit}
body .vao-gform .gform_wrapper.gform-theme--framework{--gf-form-gap-y:17px;--gf-ctrl-btn-font-size:15px;--gf-ctrl-btn-font-weight:600;--gf-ctrl-btn-padding-x:24px;--gf-ctrl-btn-padding-y:13px;--gf-ctrl-btn-radius:8px;--gf-ctrl-btn-bg-color-primary:var(--gcid-vao-rood,#e0021a);--gf-ctrl-btn-bg-color-hover-primary:var(--gcid-vao-rood-diep,#ab0114);--gf-ctrl-btn-color-primary:var(--gcid-vao-wit,#ffffff)}
body .vao-gform .gform_wrapper .gform_fields{row-gap:17px}
body .vao-gform .gform_wrapper .gfield_label{margin:0 0 6px;padding:0;font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;color:var(--gcid-vao-inkt,#1a1a1a)}
body .vao-gform .gform_wrapper .gfield_required{color:var(--gcid-vao-rood,#e0021a);font-weight:600}
body .vao-gform .gform_wrapper .gfield input[type=text],
body .vao-gform .gform_wrapper .gfield input[type=email],
body .vao-gform .gform_wrapper .gfield input[type=tel],
body .vao-gform .gform_wrapper .gfield textarea{box-sizing:border-box;width:100%;margin:0;padding:12.5px 14.4px;border:1px solid rgba(26,26,26,.1);border-radius:8px;background:var(--gcid-vao-papier,#f7f5f2);color:var(--gcid-vao-inkt,#1a1a1a);font-family:inherit;font-size:15px;line-height:1.5;min-height:0;box-shadow:none;transition:border-color .18s cubic-bezier(.32,.72,0,1),background .18s}
body .vao-gform .gform_wrapper .gfield ::placeholder{color:var(--gcid-vao-inkt-55,#656562);opacity:1}
body .vao-gform .gform_wrapper .gfield input[type=text]:focus,
body .vao-gform .gform_wrapper .gfield input[type=email]:focus,
body .vao-gform .gform_wrapper .gfield input[type=tel]:focus,
body .vao-gform .gform_wrapper .gfield textarea:focus{border-color:var(--gcid-vao-rood,#e0021a);background:var(--gcid-vao-wit,#ffffff);outline:none;box-shadow:0 0 0 3px rgba(224,2,26,.12)}
body .vao-gform .gform_wrapper .gfield textarea{min-height:128px;resize:vertical}
/* knop */
body .vao-gform .gform_wrapper .gform_footer,body .vao-gform .gform_wrapper .gform_page_footer{margin:24px 0 0;padding:0}
body .vao-gform .gform_wrapper .gform_footer .gform_button,body .vao-gform .gform_wrapper .gform_footer input[type=submit].gform_button,body .vao-gform .gform_wrapper .gform_footer .gform_button.et_pb_button{display:inline-flex;align-items:center;margin:0;padding:13px 24px!important;border:1px solid var(--gcid-vao-rood,#e0021a);border-radius:8px!important;background:var(--gcid-vao-rood,#e0021a);color:var(--gcid-vao-wit,#ffffff);font-family:inherit;font-size:15px!important;font-weight:600!important;line-height:1.2;cursor:pointer;transition:background .18s cubic-bezier(.32,.72,0,1),border-color .18s}
body .vao-gform .gform_wrapper .gform_button:hover{background:var(--gcid-vao-rood-diep,#ab0114);border-color:var(--gcid-vao-rood-diep,#ab0114)}
/* fouten en bevestiging */
body .vao-gform .gform_wrapper .gfield_validation_message,body .vao-gform .gform_wrapper .validation_message{margin:6px 0 0;padding:0;font-size:13.6px;color:#b42318;background:none;border:0}
body .vao-gform .gform_wrapper .gform_validation_errors{margin:0 0 24px;padding:16px 20px;border:1px solid #f0b5b0;border-radius:8px;background:#fff6f5;box-shadow:none}
body .vao-gform .gform_wrapper .gform_validation_errors h2{font-family:inherit;font-size:15px;font-weight:600;color:#b42318}
body .vao-gform .gform_confirmation_message{margin:0;font-size:16px;line-height:1.6;color:var(--gcid-vao-inkt,#1a1a1a)}
body .vao-gform .gform_confirmation_message p{margin:0}

/* Aanmeldformulier: sublabels, keuzevakjes en beschrijving */
body .vao-gform .gform_wrapper .gfield--type-name .gform-field-label--type-sub,body .vao-gform .gform_wrapper .gfield_description{font-family:inherit;font-size:13px;line-height:1.5;color:var(--gcid-vao-inkt-55,#656562)}
body .vao-gform .gform_wrapper .gfield--type-name .gform-field-label--type-sub{margin:5px 0 0}
body .vao-gform .gform_wrapper .gfield_description{padding:6px 0 0}
body .vao-gform .gform_wrapper .gfield_checkbox{gap:8px}
body .vao-gform .gform_wrapper .gfield_checkbox .gchoice{align-items:flex-start;gap:10px}
body .vao-gform .gform_wrapper .gfield_checkbox input[type=checkbox]{margin-top:3px;accent-color:var(--gcid-vao-rood,#e0021a)}
body .vao-gform .gform_wrapper .gfield_checkbox label{font-family:inherit;font-size:15px;font-weight:400;line-height:1.5;color:var(--gcid-vao-inkt-70,#4a4a48)}


/* ===== Footer =====
   Kleuren, lettertypen, afstanden, de sociale cirkels en hun hover staan in Divi. Hier alleen wat Divi niet kent:
   de linklijsten (menumodule) als verticale lijst zonder hamburger, en de links in de onderste regel. */
body .vao-footermenu{background:none!important;padding:0}
body .vao-footermenu .et_pb_menu_inner_container{display:block;width:auto;margin:0}
body .vao-footermenu .et_pb_menu__wrap{display:block;margin:0}
body .vao-footermenu .et_pb_menu__menu{display:block!important;width:auto}
body .vao-footermenu .et_mobile_nav_menu{display:none!important}
body .vao-footermenu nav.et-menu-nav{display:block}
body .vao-footermenu ul.et-menu{display:flex;flex-direction:column;align-items:flex-start;gap:8.8px;margin:0;padding:0}
body .vao-footermenu ul.et-menu>li{margin:0!important;padding:0!important}
body .vao-footermenu ul.et-menu>li>a{display:inline-block;padding:0!important;line-height:1.5;opacity:1;transition:color .18s cubic-bezier(.32,.72,0,1)}
body .vao-footermenu ul.et-menu>li>a::after{display:none!important}
/* onderste regel: de link naar de ontwerper is wit met een dunne streep */
body .vao-voet__onder a{color:var(--gcid-vao-wit,#ffffff);text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px;transition:text-decoration-color .18s}
body .vao-voet__onder a:hover{text-decoration-color:var(--gcid-vao-wit,#ffffff)}

/* ===== Subpagina's =====
   Opmaak, afstanden en lettertypen staan in Divi. Hier alleen wat Divi niet kent. */
/* foto in de paginakop vult de hoogte van de tekstkolom; gestapeld een liggende uitsnede */
body .vao-kopbeeld__kolom.et_pb_column{align-self:stretch}
body .vao-kopbeeld{position:relative;flex:1 1 auto;overflow:hidden}
body .vao-kopbeeld .et_pb_image_wrap{position:absolute;inset:0;display:block}
body .vao-kopbeeld img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 45%}
@media (max-width:980px){body .vao-kopbeeld{flex:0 0 auto;aspect-ratio:16/9}}/* link in lopende tekst: rood, vet, met een streepje (de link zit in een tekstmodule, dus niet in Divi in te stellen) */
body .vao-linktekst{color:var(--gcid-vao-rood,#e0021a);font-weight:600;text-decoration:none;box-shadow:inset 0 -1px 0 0 currentColor;transition:box-shadow .18s cubic-bezier(.32,.72,0,1)}
body .vao-linktekst:hover{box-shadow:inset 0 -2px 0 0 currentColor}

/* knop "licht" met pijl: inktpijl, rood bij hover */
html body #page-container .et_pb_section .vao-knop--licht.vao-knop--pijl.et_pb_button::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
html body #page-container .et_pb_section .vao-knop--licht.vao-knop--pijl.et_pb_button:hover::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0021a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}

/* veelgestelde vragen (Divi-accordeon): haarlijnen en een pijltje dat meedraait. De tekststijl staat in Divi. */
body .vao-faq .et_pb_toggle{margin:0;padding:0;border:0;border-bottom:1px solid rgba(26,26,26,.1);background:none}
body .vao-faq .et_pb_toggle:first-child{border-top:1px solid rgba(26,26,26,.1)}
body .vao-faq .et_pb_toggle_title{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;cursor:pointer;font-family:inherit;font-weight:800;font-size:clamp(1.05rem,1.5vw,1.25rem);letter-spacing:-.02em;color:var(--gcid-vao-inkt,#1a1a1a);transition:color .18s cubic-bezier(.32,.72,0,1)}
body .vao-faq .et_pb_toggle_title:hover{color:var(--gcid-vao-rood,#e0021a)}
body .vao-faq .et_pb_toggle_title::before{display:none}
body .vao-faq .et_pb_toggle_title::after{content:"";flex:none;width:10px;height:10px;margin-right:5px;border-right:1.5px solid var(--gcid-vao-rood,#e0021a);border-bottom:1.5px solid var(--gcid-vao-rood,#e0021a);transform:rotate(45deg) translateY(-2px);transition:transform .18s cubic-bezier(.32,.72,0,1);position:static;font-size:0}
body .vao-faq .et_pb_toggle_open .et_pb_toggle_title::after{transform:rotate(225deg) translateY(-2px)}
body .vao-faq .et_pb_toggle_content{padding:0 0 22px}
body .vao-faq .et_pb_toggle_content p{margin:0;font-size:17px;line-height:1.68;color:var(--gcid-vao-inkt-70,#4a4a48)}
/* ===== Nieuwsbericht =====
   Opmaak van de berichttekst die uit de WordPress-editor komt (koppen, lijsten, citaten): dat is markup van de inhoud, geen Divi-module. */
body .vao-artikel__foto .et_pb_image_wrap,body .vao-artikel__foto img{display:block;width:100%}
body .vao-artikel__foto img{aspect-ratio:16/7;object-fit:cover}
body .vao-artikel__inhoud{font-size:17px;line-height:1.68;color:var(--gcid-vao-inkt-70,#4a4a48)}
body .vao-artikel__inhoud > :first-child{font-size:clamp(1.1rem,1.4vw,1.25rem);line-height:1.6;color:var(--gcid-vao-inkt,#1a1a1a)}
body .vao-artikel__inhoud > * + *{margin-top:1.35rem}
body .vao-artikel__inhoud p{margin:0;padding:0}
body .vao-artikel__inhoud h2{margin:clamp(2.25rem,4vw,3.25rem) 0 0;padding:0;font-family:inherit;font-weight:800;font-size:clamp(1.7rem,2.9vw,2.5rem);line-height:1.04;letter-spacing:-.028em;color:var(--gcid-vao-inkt,#1a1a1a);text-wrap:balance}
body .vao-artikel__inhoud h3{margin:2rem 0 0;padding:0;font-family:inherit;font-weight:800;font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.2;letter-spacing:-.02em;color:var(--gcid-vao-inkt,#1a1a1a)}
body .vao-artikel__inhoud ul{display:grid;gap:.7rem;margin-left:0;padding-left:0;list-style:none}
body .vao-artikel__inhoud ul li{position:relative;padding-left:1.5rem}
body .vao-artikel__inhoud ul li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--gcid-vao-rood,#e0021a)}
body .vao-artikel__inhoud blockquote{margin:clamp(2.25rem,4vw,3.25rem) 0;padding:0 0 0 clamp(1.25rem,3vw,2.25rem);border:0;font-weight:800;font-size:clamp(1.35rem,2.3vw,1.9rem);line-height:1.22;letter-spacing:-.025em;color:var(--gcid-vao-inkt,#1a1a1a)}
body .vao-artikel__inhoud a{color:var(--gcid-vao-rood,#e0021a);font-weight:600}
/* "Lees verder" in de Loop-kaart is een linkmodule: kleur en grootte van de link */
body .vao-bericht__lees a{font-size:14px;font-weight:600;color:var(--gcid-vao-rood,#e0021a)}
/* Delen: de icoontjes gebruiken currentColor; grijs, rood bij hover (de rand en achtergrond staan in Divi) */
body .vao-delen__knop a{color:var(--gcid-vao-inkt-55,#656562);transition:color .18s cubic-bezier(.32,.72,0,1)}
body .vao-delen__knop:hover a{color:var(--gcid-vao-rood,#e0021a)}
body .vao-delen__knop svg{display:block;width:100%;height:100%}

/* Ledenpagina: logo netjes in het logovak */
body .vao-lid__logo .vao-lid__logo-img,body .vao-lid__logo .et_pb_image_wrap{display:flex;align-items:center;justify-content:center;max-width:100%}
body .vao-lid__logo img{width:auto;max-width:100%;max-height:72px;object-fit:contain;display:block}

/* Pagina Jonge ondernemers: brede groepsfoto in de paginakop, zoom op de groep */
body .vao-kopbeeld--groep img{object-position:79% center}
@media (max-width:980px){body .vao-kopbeeld--groep img{object-position:62% center}}


/* ===== Agenda (Hydrogen Calendar Embeds, FullCalendar-lijstweergave) =====
   De plugin tekent zelf HTML; daarom staat de opmaak hier. Lijkt op de agenda uit het ontwerp:
   datumregel in rood kapitaal, daaronder rijen met tijd, titel en een dunne lijn. */
body .fc{
  --fc-border-color:rgba(26,26,26,.1);
  --fc-page-bg-color:transparent;
  --fc-neutral-bg-color:transparent;
  --fc-list-event-hover-bg-color:var(--gcid-vao-papier,#f7f5f2);
  --fc-today-bg-color:transparent;
  --fc-button-bg-color:var(--gcid-vao-rood,#e0021a);--fc-button-border-color:var(--gcid-vao-rood,#e0021a);--fc-button-text-color:#fff;
  --fc-button-hover-bg-color:var(--gcid-vao-rood-diep,#ab0114);--fc-button-hover-border-color:var(--gcid-vao-rood-diep,#ab0114);
  --fc-button-active-bg-color:var(--gcid-vao-rood-diep,#ab0114);--fc-button-active-border-color:var(--gcid-vao-rood-diep,#ab0114);
  font-family:'Instrument Sans',system-ui,sans-serif;color:var(--gcid-vao-inkt,#1a1a1a)
}
/* kop met knoppen */
body .fc .fc-toolbar{margin-bottom:28px;gap:12px}
body .fc .fc-toolbar-title{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:28px;letter-spacing:-.02em;text-transform:capitalize}
body .fc .fc-button{font-family:'Instrument Sans',system-ui,sans-serif;font-weight:600;font-size:14px;text-transform:none;border-radius:999px;padding:.55em 1.1em;box-shadow:none!important;transition:background .18s,border-color .18s}
body .fc .fc-button:focus-visible{outline:2px solid var(--gcid-vao-inkt,#1a1a1a);outline-offset:2px}
body .fc .fc-button-group{gap:6px}
body .fc .fc-button-group>.fc-button{border-radius:999px;margin:0}
body .fc .fc-button:disabled{opacity:.4}
/* lijst */
body .fc .fc-view-harness,body .fc .fc-list{border:0;background:transparent}
body .fc .fc-list{border-top:1px solid rgba(26,26,26,.1)}
body .fc .fc-list-table{border-collapse:collapse;width:100%}
body .fc .fc-list-table td,body .fc .fc-list-table th{border:0}
/* datumregel: rood, kapitaal, ruim gespatieerd */
body .fc .fc-list-day>*{background:transparent}
body .fc .fc-list-day-cushion{display:flex;justify-content:space-between;gap:16px;padding:34px 0 10px;background:transparent!important}
body .fc .fc-list-day-cushion a,body .fc .fc-list-day-text,body .fc .fc-list-day-side-text{color:var(--gcid-vao-rood,#e0021a);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;pointer-events:none}
body .fc .fc-list-day-side-text{color:var(--gcid-vao-inkt-55,#656562)}
/* activiteiten */
body .fc .fc-list-event td{padding:18px 0;border-top:1px solid rgba(26,26,26,.1);border-bottom:0;background:transparent;vertical-align:baseline;transition:background .18s}
body .fc .fc-list-event:hover td{background:var(--gcid-vao-papier,#f7f5f2)}
body .fc .fc-list-event td:first-child{padding-left:12px}
body .fc .fc-list-event td:last-child{padding-right:12px}
body .fc .fc-list-event-time{width:150px;white-space:nowrap;color:var(--gcid-vao-inkt-55,#656562);font-size:15px;font-weight:400}
body .fc .fc-list-event-graphic{display:none}
body .fc .fc-list-event-title,body .fc .fc-list-event-title a{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:19px;line-height:1.3;letter-spacing:-.015em;color:var(--gcid-vao-inkt,#1a1a1a);text-decoration:none}
body .fc .fc-list-event-location{color:var(--gcid-vao-inkt-55,#656562);font-size:15px;font-weight:400;margin-top:4px}
body .fc .fc-list-event-title a:hover{color:var(--gcid-vao-rood,#e0021a)}
body .fc .fc-list-empty{background:transparent;color:var(--gcid-vao-inkt-55,#656562);font-size:17px;padding:40px 0}
body .fc .fc-list-empty-cushion{color:var(--gcid-vao-inkt-55,#656562)}
@media (max-width:640px){
  body .fc .fc-toolbar{flex-direction:column;align-items:flex-start}
  body .fc .fc-toolbar-title{font-size:22px}
  body .fc .fc-list-event{display:block;padding:14px 0;border-top:1px solid rgba(26,26,26,.1)}
  body .fc .fc-list-event td{display:block;border:0;padding:0 12px;width:auto}
  body .fc .fc-list-event-time{width:auto;font-size:14px;margin-bottom:4px}
  body .fc .fc-list-event-title,body .fc .fc-list-event-title a{font-size:17px}
}