/* BesteFietsendrager: identiteit (palet, header, menu, footer). Voorvoegsel bfd-id-. Zie assets/branding/KLEUREN.md.
   Eigenaar: identiteitsagent (class-bfd-identity.php). Animatie in de footerstrook (.bfd-footer-lane) komt uit class-bfd-motion.php. */

/* ---- palet: Blocksy-variabelen (html:root wint van de inline :root van het thema). Alle bfd-css leest deze variabelen. ---- */
html:root{
	--bfd-id-c1:#0B5A73;--bfd-id-c2:#083F52;--bfd-id-mut:#4A5B66;--bfd-id-ink:#12242E;
	--bfd-id-line:#D5DEE4;--bfd-id-soft:#F3F7F9;--bfd-id-soft2:#E4EDF2;--bfd-id-white:#FFFFFF;
	--bfd-id-sky:#7FD3E6;--bfd-id-cta:#C8460A;--bfd-id-cta-h:#A93A06;
	--theme-palette-color-1:var(--bfd-id-c1);
	--theme-palette-color-2:var(--bfd-id-c2);
	--theme-palette-color-3:var(--bfd-id-mut);
	--theme-palette-color-4:var(--bfd-id-ink);
	--theme-palette-color-5:var(--bfd-id-line);
	--theme-palette-color-6:var(--bfd-id-soft);
	--theme-palette-color-7:var(--bfd-id-soft2);
	--theme-palette-color-8:var(--bfd-id-white);
	--bfd-id-hh:76px;--bfd-id-logo:44px;
	--theme-form-field-border-initial-color:var(--bfd-id-line);--theme-form-field-border-focus-color:var(--bfd-id-c1);--theme-form-field-border-radius:10px;--theme-form-field-height:48px;
}
/* nooit horizontaal scrollen (volbreed hero gebruikt 100vw); clip breekt het kleverige menu niet */
html,body{overflow-x:clip}
/* globale focusstijl (laag gewicht: eigen regels van onderdelen winnen) */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--bfd-id-c1);outline-offset:2px}
/* home: de hero sluit direct op de header aan (geen lege band) */
body.bfd-hm-home [data-vertical-spacing*="top"]{padding-top:0}
.bfd-hm-hero a:focus-visible,.bfd-hm-hero button:focus-visible{outline-color:#fff}

/* ---- header ---- */
#header .ct-header{background:var(--bfd-id-white);border-bottom:1px solid var(--bfd-id-line);box-shadow:0 1px 8px rgba(18,36,46,.05)}
#header [data-device="desktop"] [data-row*="middle"]{--height:var(--bfd-id-hh);min-height:var(--bfd-id-hh)}
#header [data-device="mobile"] [data-row*="middle"]{--height:60px;min-height:60px}
#header .site-logo-container{--logo-max-height:var(--bfd-id-logo)}
#header .site-logo-container img,#header .site-logo-container svg{width:auto;max-height:var(--bfd-id-logo);height:auto}
#header .site-title,#header .site-description{display:none}
@media (max-width:999.98px){#header .site-logo-container{--logo-max-height:36px}#header .site-logo-container img{max-height:36px}}
/* hoofdmenu rechts */
#header [data-device="desktop"] [data-column="middle"]{flex:1 1 auto;display:flex;justify-content:flex-end}
#header [data-device="desktop"] [data-column="end"]{gap:.5rem}
#header .menu>li>a,#header .ct-menu-link{font-weight:600;min-height:44px}
#header .menu>li:not(.bfd-id-cta)>a:hover,#header .menu>li.current-menu-item:not(.bfd-id-cta)>a,#header .menu>li.current-menu-ancestor:not(.bfd-id-cta)>a{color:var(--bfd-id-c1)}
#header .sub-menu a{min-height:44px;display:flex;align-items:center}
#header a:focus-visible,#header button:focus-visible{outline:3px solid var(--bfd-id-c1);outline-offset:2px;border-radius:4px}
/* Keuzehulp als knop (oranje #C8460A, witte tekst, contrast 4,84): de knop is 44 px hoog en gecentreerd, niet de hele headerhoogte */
#header .menu>li.bfd-id-cta{align-self:center;height:auto;--menu-item-height:auto}
#header .menu>li.bfd-id-cta>a{height:auto}
#header .menu>li.bfd-id-cta>a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.5rem 1.15rem!important;margin-left:.4rem;border-radius:999px;background:var(--bfd-id-cta)!important;color:#fff!important;font-weight:700;line-height:1.2}
#header .menu>li.bfd-id-cta>a:hover{background:var(--bfd-id-cta-h)!important;color:#fff!important}
/* landkeuze in het menu */
.menu-item.bfd-id-land{display:flex;align-items:center;margin-left:.4rem}
#header .bfd-id-land .bfd-landbtn{min-height:44px}
#header .menu>li.bfd-id-cta>a:focus-visible{outline-color:var(--bfd-id-c2)}
/* sticky op desktop (admin-balk meegerekend) */
@media (min-width:1000px){#header{position:sticky;top:0;z-index:60}.admin-bar #header{top:32px}}

/* ---- footer ---- */
.ct-footer,.ct-footer [data-row]{background-color:var(--bfd-id-ink)!important;color:var(--bfd-id-soft2)}
.ct-footer{margin-top:clamp(2.5rem,6vw,4.5rem);border-top:4px solid var(--bfd-id-c1)}
/* Blocksy zet 70 px ruimte boven en onder elke rij; dat was te veel. Hier: rustige, vaste ruimte. */
#footer.ct-footer [data-row="middle"]{padding:0}
#footer.ct-footer [data-row="middle"]>div{--container-spacing:0px;padding-top:clamp(2.2rem,4vw,3.2rem);padding-bottom:clamp(.8rem,2vw,1.2rem)}
#footer.ct-footer [data-row="bottom"]{padding:0;border-top:0}
#footer.ct-footer [data-row="bottom"]>div{--container-spacing:0px;padding-top:0;padding-bottom:1.6rem}
.ct-footer .bfd-f__h{display:flex;align-items:center;gap:.5rem;margin:0 0 .7rem;font-size:1.05rem;line-height:1.3;font-weight:700;letter-spacing:.01em;color:#fff}
.ct-footer .bfd-id-ic{display:inline-flex;flex:none;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:color-mix(in srgb,var(--bfd-id-sky) 16%,transparent);color:var(--bfd-id-sky)}
.ct-footer .bfd-f a{color:var(--bfd-id-soft2)}
.ct-footer .bfd-f a:hover{color:#fff}
.ct-footer .bfd-fl a{min-height:36px}
.ct-footer .bfd-fa,.ct-footer .bfd-fd{color:#C9D8E0}
.ct-footer .bfd-id-flogo{display:inline-block;margin:0 0 1rem;border-radius:8px}
.ct-footer .bfd-id-flogo svg{display:block;height:54px;width:auto;max-width:100%}
.ct-footer .bfd-id-flogo:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ct-footer [data-row="bottom"] .bfd-fd{margin-top:.9rem}
.ct-footer [data-row="bottom"] .bfd-fc{margin-bottom:0}
/* desktop: het merkblok (logo en korte tekst) staat links, zoals bij de andere sites; de rest verdeelt de ruimte */
@media (min-width:1000px){
	#footer.ct-footer [data-row="middle"]>div{--grid-template-columns:1.25fr 1.3fr .9fr .85fr;column-gap:2.6rem}
	#footer.ct-footer [data-row="middle"] [data-column="widget-area-4"]{order:-1}
}
@media (max-width:999.98px){
	.ct-footer .bfd-fl a{min-height:44px}
	#footer.ct-footer [data-row="middle"]>div{row-gap:1.8rem}
}

/* strook voor de footer-animatie (class-bfd-motion.php): de weg loopt over de volle breedte (breedte en dashes staan in bfd-motion.css); op mobiel verborgen */
.bfd-footer-lane{display:none}
@media (min-width:1000px){
	.bfd-footer-lane{display:block;height:56px;margin:0 0 1.1rem;background:none}
}
.ct-footer .widget_block>p:empty{display:none}
.ct-footer .bfd-f{margin-bottom:0}

/* ---- hulpklassen ---- */
@media (prefers-reduced-motion:reduce){#header,#header *{scroll-behavior:auto}}
/* Submenu: tekst altijd leesbaar op de donkere achtergrond, ook bij hover, focus, actief en huidige pagina */
#header .menu .sub-menu li>a,#header .menu .sub-menu .ct-menu-link{color:#fff!important;background:transparent}
#header .menu .sub-menu li>a:hover,#header .menu .sub-menu li>a:focus,#header .menu .sub-menu li>a:focus-visible,#header .menu .sub-menu li>a:active,#header .menu .sub-menu li.current-menu-item>a,#header .menu .sub-menu li.current-menu-ancestor>a{color:var(--bfd-id-sky,#7FD3E6)!important;background:rgba(255,255,255,.08)!important}
#header .menu .sub-menu li>a:focus-visible{outline:3px solid var(--bfd-id-sky,#7FD3E6);outline-offset:-3px}

/* ---- mobiel menu (uitklap #offcanvas): donkere petrolkleur, grote tikdoelen, Keuzehulp als knop, landkeuze onderaan ---- */
body #offcanvas.ct-panel .ct-panel-inner,[data-header] #offcanvas.ct-panel .ct-panel-inner{background-color:var(--bfd-id-c2)}
#offcanvas .ct-toggle-close{color:#fff}
#offcanvas .ct-toggle-close:focus-visible{outline:3px solid var(--bfd-id-sky);outline-offset:2px;border-radius:6px}
#offcanvas .mobile-menu>ul>li{border-bottom:1px solid rgba(255,255,255,.12)}
#offcanvas .mobile-menu>ul>li.bfd-id-cta,#offcanvas .mobile-menu>ul>li.bfd-id-land{border-bottom:0}
#offcanvas .mobile-menu .ct-menu-link{color:#fff;font-weight:700;font-size:1.1rem;min-height:52px;display:flex;align-items:center}
#offcanvas .mobile-menu .ct-menu-link:hover,#offcanvas .mobile-menu li.current-menu-item>.ct-menu-link,#offcanvas .mobile-menu li.current-menu-item>.ct-sub-menu-parent>.ct-menu-link{color:var(--bfd-id-sky)}
#offcanvas .mobile-menu .ct-sub-menu-parent{display:flex;align-items:center;justify-content:space-between}
#offcanvas .mobile-menu .ct-toggle-dropdown-mobile{min-width:44px;min-height:44px;color:#fff;border-radius:8px}
#offcanvas .mobile-menu .ct-toggle-dropdown-mobile:focus-visible{outline:3px solid var(--bfd-id-sky);outline-offset:-2px}
#offcanvas .mobile-menu .sub-menu>li{margin-left:.3rem;padding-left:.9rem;border-left:2px solid color-mix(in srgb,var(--bfd-id-sky) 45%,transparent)}
#offcanvas .mobile-menu .sub-menu>li:last-child{margin-bottom:.6rem}
#offcanvas .mobile-menu .sub-menu .ct-menu-link{font-weight:500;font-size:1rem;min-height:44px;color:#E4EDF2}
#offcanvas .mobile-menu .sub-menu .ct-menu-link:hover,#offcanvas .mobile-menu .sub-menu li.current-menu-item>.ct-menu-link{color:var(--bfd-id-sky);background:transparent}
#offcanvas .mobile-menu li.bfd-id-cta>a{display:flex;align-items:center;justify-content:center;min-height:52px;margin:1.1rem 0 0;padding:.6rem 1.2rem;border-radius:999px;background:var(--bfd-id-cta);color:#fff;font-weight:700;font-size:1.05rem}
#offcanvas .mobile-menu li.bfd-id-cta>a:hover{background:var(--bfd-id-cta-h);color:#fff}
#offcanvas .mobile-menu li.bfd-id-land{display:flex;justify-content:flex-start;margin:.9rem 0 0}
#offcanvas .mobile-menu li.bfd-id-land .bfd-landbtn{min-height:48px}

/* ---- landkeuze-dialoog (markup en basis in bfd-core.css; hier alleen de afwerking) ---- */
.bfd-land__box{border:1px solid var(--bfd-id-line);box-shadow:0 18px 50px rgba(8,63,82,.28)}
.bfd-land__t{font-size:1.2rem;font-weight:800;color:var(--bfd-id-ink)}
.bfd-land__p{color:var(--bfd-id-mut)}
.bfd-land__card{min-height:84px;border-radius:14px;transition:border-color .15s,background-color .15s}
.bfd-land__opt:hover .bfd-land__card{border-color:var(--bfd-id-c1)}
.bfd-land__opt input:checked+.bfd-land__card{border-color:var(--bfd-id-c1);background:var(--bfd-id-soft);box-shadow:inset 0 0 0 1px var(--bfd-id-c1)}
.bfd-land__go{border-radius:999px;background:var(--bfd-id-cta)}
.bfd-land__go:hover{background:var(--bfd-id-cta-h)}
.bfd-land__x{border-radius:50%;color:var(--bfd-id-mut)}
.bfd-land__x:hover{color:var(--bfd-id-ink);background:var(--bfd-id-soft)}
@media (prefers-reduced-motion:reduce){.bfd-land__card{transition:none}}

/* ---- koppen en tekst in gewone pagina's en artikelen (variabelen, zodat de eigen regels van onderdelen altijd winnen) ---- */
.entry-content h2{--theme-font-size:clamp(1.45rem,2.6vw,1.9rem);--theme-line-height:1.25}
.entry-content h3{--theme-font-size:clamp(1.2rem,2vw,1.4rem);--theme-line-height:1.3}
.entry-content h2,.entry-content h3{color:var(--bfd-id-ink)}
/* lopende tekst: leesbare regellengte, alles op dezelfde linkerrand (blokken van onderdelen zijn eigen wrappers en blijven volbreed) */
body:not(.bfd-hm-home) .entry-content>:where(p,ul,ol,h2,h3,h4,blockquote){max-width:75ch;margin-left:0!important;margin-right:auto!important}
body:not(.bfd-hm-home) .entry-content>:where(p,ul,ol){color:var(--bfd-id-ink)}
.entry-content>:where(h2,h3,h4)+:where(p,ul,ol){margin-top:.6em}
.entry-content>table{margin-left:0!important;width:auto;min-width:min(100%,30rem)}
body:not(.home) .hero-section[data-type="type-1"]{margin-bottom:1.1rem}
.entry-content a:not([class]){text-underline-offset:3px}

/* ---- lege staten: 404, geen zoekresultaten, blog zonder artikelen (tekst en knoppen uit bfd-site.js) ---- */
.ct-no-results{max-width:640px;margin:0 auto;text-align:center}
.ct-no-results .page-title{--theme-font-size:clamp(1.7rem,4vw,2.3rem);--theme-line-height:1.2;color:var(--bfd-id-ink)}
.ct-no-results .page-description{color:var(--bfd-id-mut)}
.bfd-empty{margin:0 0 1.4rem}
.bfd-empty__t{margin:0 0 .5rem;font-size:clamp(1.4rem,3vw,1.8rem);line-height:1.25;color:var(--bfd-id-ink)}
.bfd-empty__p{margin:0 auto;max-width:48ch;color:var(--bfd-id-mut)}
.bfd-empty__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin:1.4rem 0 0}
.ct-no-results .bfd-empty__btns a.bfd-btn{border-radius:999px;padding:.6rem 1.4rem}
@media (max-width:480px){.bfd-empty__btns a.bfd-btn{flex:1 1 100%}}
.ct-no-results .ct-search-form{margin-top:1.6rem}