/*
Theme Name: bar+ 2.0
Theme URI: https://barplus.be
Author: bar+
Description: Eigen thema voor bar+, versie 2.0 met meer beweging en interactie op Collectie, Architectuur en 3D maatwerk (naast het bestaande thema bar+ te installeren). Intro met logo-animatie, menu met blokjes en vier pagina's (Collectie, Architectuur, 3D maatwerk, Contact).
Version: 3.46.5
Requires at least: 6.0
Requires PHP: 7.4
License: Alle rechten voorbehouden
Text Domain: barplus-2
*/

/* ---------- Huisstijl en maten ---------- */
:root{
  color-scheme:light;
  --bg:#FBFAF7;
  --ink:#D6D5CB;   /* RAL 9002 grijswit  RGB 214,213,203 */
  --blue:#0086B2;  /* RAL 5012 lichtblauw RGB 0,134,178 */
  --sand:#D0B084;  /* RAL 1001 beige      RGB 208,176,132 */
  --W:min(72vw,734px,calc(65.7vh*1.925));
  --k:1;
  --t0:calc(20px + env(safe-area-inset-top,0px));
  --bw:calc(var(--W)*var(--k)*.084);
  --SH:calc(var(--W)*var(--k)/1.925);
  --bh:calc(var(--SH)*.148);
  --stack:calc(var(--SH)*.89);
}
@media(min-width:700px){:root{--W:min(48.96vw,499px,calc(44.68vh*1.925));--k:.5625}}
body.admin-bar{--t0:calc(52px + env(safe-area-inset-top,0px))}
@media(max-width:782px){body.admin-bar{--t0:calc(66px + env(safe-area-inset-top,0px))}}

*,*::before,*::after{box-sizing:border-box}
html{height:100%;background:var(--bg);scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){html{overflow-y:scroll}}
body{margin:0;min-height:100%;background:var(--bg);color:var(--blue);font-family:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Blokjes, woorden en logo (op elke pagina) ---------- */
.railbg{position:fixed;top:0;left:0;right:0;height:calc(var(--t0) + var(--stack) + 14px);background:var(--bg);z-index:25}
.blk{position:fixed;z-index:30;display:block;left:20px;top:calc(var(--t0) + var(--SH)*var(--d,0));width:var(--bw);height:var(--bh);background:var(--sand);opacity:0;pointer-events:none;
  transition:background-color .6s,box-shadow .3s,opacity .4s} /* 3.16.0: geen left/top/width/height-transitie meer: elke verplaatsing loopt via FLIP (front.js flip()) */
.blk.nt{transition:none}
@keyframes blkSh{0%,100%{box-shadow:0 0 0 rgba(0,0,0,0)}30%,65%{box-shadow:0 10px 20px rgba(0,0,0,.22)}}
body.trv .blk{animation:blkSh .8s ease-in-out}
.blk,.wd,#logo,#menu a{-webkit-tap-highlight-color:transparent}
.blk.vis{opacity:1;pointer-events:auto}
.blk.blue{background:var(--blue)}
@media(hover:hover){body.inpage .blk:not(.blue):hover{background:transparent;box-shadow:inset 0 0 0 2px var(--sand)}}
.blk.hv:not(.blue){background:transparent;box-shadow:inset 0 0 0 2px var(--sand)}
.wd{position:fixed;z-index:30;left:calc(20px + var(--bw) + 14px);top:calc(var(--t0) + var(--SH)*var(--d,0) + var(--bh)/2);transform:translateY(-50%);
  padding:8px 10px;margin-left:-10px;color:var(--ink);font-size:1rem;line-height:1.2;text-decoration:none;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .5s,color .25s}
.wd.vis{opacity:1;pointer-events:auto}
.wd.act,.wd.hl{color:var(--blue)}
#logo{position:fixed;z-index:30;right:20px;top:var(--t0);display:block;height:var(--stack);width:calc(var(--stack)*.9327);
  max-width:calc(100vw - 20px - 20px - var(--bw) - 14px - 100px - 20px);opacity:0;pointer-events:none;transition:opacity .5s}
@media(min-width:700px){#logo{width:calc(var(--stack)*2.9345)}}
#logo.vis{opacity:1;pointer-events:auto}
#logo img{display:block;width:100%;height:100%;object-fit:contain;object-position:right top}
#logo .lg-m{display:none}
@media(max-width:699px){#logo .lg-d{display:none}#logo .lg-m{display:block}}

/* ---------- Inhoud van de pagina's ---------- */
.site-main{padding:calc(var(--t0) + var(--stack) + 36px) 24px 60px}
.entry{max-width:960px;margin:0 auto}
@keyframes bpin{from{opacity:0}to{opacity:1}}
.entry>*{margin-top:0;margin-bottom:24px}
.entry p{line-height:1.55;font-size:.95rem}
@media(max-width:600px){.entry p{font-size:1.05rem}.entry .pg-arch .cap{font-size:.85rem}}
.entry .lead{font-size:clamp(1.1rem,2.6vw,1.5rem);line-height:1.5;margin:0 0 36px;max-width:36em}
.entry h1,.entry h2,.entry h3{color:var(--blue);line-height:1.25}
.entry h3{margin:0 0 8px;font-size:1.1rem;font-weight:600}
.entry a{color:var(--blue)}
.entry img{max-width:100%;height:auto}
.entry .wp-block-image{margin-bottom:14px}
.entry .wp-block-image img{width:100%}
.wp-block-columns{display:flex;flex-wrap:wrap;gap:24px}
@media(min-width:782px){.wp-block-columns{flex-wrap:nowrap}}
.wp-block-column{flex:1 1 0;min-width:0}
@media(max-width:781px){.wp-block-column{flex-basis:100%}}
.wp-block-columns.cards{margin-bottom:0}
.card{border:1px solid var(--ink);padding:16px}
.card p{margin:0}
.ph{aspect-ratio:4/3;background:var(--sand);margin:0 0 14px}
.steps{margin-top:36px!important;padding:20px;background:var(--ink)}
.steps h3{margin:0 0 8px}
.steps p{margin:0}
.wp-block-button__link{background:var(--blue)!important;color:#fff!important;border-radius:0!important}

/* ---------- Voorpagina met intro ---------- */
body.bp-front{height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
#stage{position:relative;width:var(--W);aspect-ratio:3072/1596;cursor:default}
#stage.ready{cursor:pointer}
#stage video{position:absolute;inset:0;width:100%;height:100%;display:block;background:transparent;mix-blend-mode:multiply}
#v1{z-index:3}#v2{z-index:2}#v3{z-index:1}
.hide{visibility:hidden}
#hint{position:absolute;left:0;right:0;bottom:-2.2em;z-index:5;text-align:center;font-size:.85rem;letter-spacing:.08em;color:var(--sand);opacity:0;transition:opacity .15s}
#stage.ready #hint{opacity:1;animation:bpp 2s ease-in-out infinite}
@keyframes bpp{50%{opacity:.35}}
#menu{position:absolute;left:57%;top:0;bottom:0;z-index:5;pointer-events:none}
#menu a{position:absolute;left:0;transform:translateY(-50%);white-space:nowrap;text-decoration:none;color:var(--sand);font-size:clamp(1.1rem,3.1vw,1.9rem);opacity:0;transition:opacity .4s,color .2s;pointer-events:none}
#menu.on a{opacity:1;pointer-events:auto}
#menu.on a:nth-child(2){transition-delay:.08s}#menu.on a:nth-child(3){transition-delay:.16s}#menu.on a:nth-child(4){transition-delay:.24s}
#menu a:hover,#menu a:focus-visible,#menu a.hl{color:var(--blue)}
@media(min-width:700px){#menu a{font-size:clamp(.9rem,2.5vw,1.54rem)}#hint{font-size:.68rem}}
#stage.away{pointer-events:none}
#stage.away video{visibility:hidden}
#stage.away #menu a{opacity:0;transition:opacity .4s}
/* 2.95.0 ondertitel menu: enkel op pc bij hover/focus, rolt zacht in onder de titel (opacity + transform); gsm: geen ondertitel */
#menu a .sub{display:none}
@media(min-width:700px) and (hover:hover){#menu a .sub{display:block;position:absolute;left:0;top:100%;margin-top:.2em;width:max-content;max-width:min(30rem,calc(43vw - 16px));white-space:normal;line-height:1.3;font-size:clamp(.74rem,.98vw,.94rem);letter-spacing:.01em;color:#9a998f;opacity:0;transform:translateY(-.45em);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
#menu.on a:hover .sub,#menu.on a:focus-visible .sub,#menu.on a.hl .sub{opacity:1;transform:none}
#menu a{translate:0 0;transition:opacity .4s,color .2s,translate .6s cubic-bezier(.2,.7,.2,1)}#menu.on a:hover,#menu.on a:focus-visible,#menu.on a.hl{translate:0 -.45em}
#menu.on a:nth-child(2){transition-delay:.08s,0s,0s}#menu.on a:nth-child(3){transition-delay:.16s,0s,0s}#menu.on a:nth-child(4){transition-delay:.24s,0s,0s}} /* 2.96.0: titel schuift zacht omhoog, titel + ondertitel samen rond het blokje */
#stage.away #menu a .sub{opacity:0;transition:opacity .4s}
#skip{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:16px;z-index:40;background:none;border:0;font:inherit;font-size:.8rem;color:#8a8a8a;cursor:pointer;padding:8px}
#skip:hover{color:var(--ink)}
html.fromcorner #stage{visibility:hidden}
html.fromcorner .blk,html.fromcorner .wd,html.fromcorner #logo{opacity:1;pointer-events:auto}
body.bp-front .site-main{display:none}
body.bp-front.bp-page{height:auto;min-height:100%;overflow:visible;display:block;padding-top:0;padding-bottom:0}
body.bp-front.bp-page .site-main{display:block}
body.bp-front.bp-page #stage,body.bp-front.bp-page #skip{display:none}

.social{display:flex;gap:var(--gp,calc(var(--SH)*.019));align-items:center}
.social a{color:var(--blue);display:block;width:var(--sz,var(--bw));height:var(--sz,var(--bw));opacity:.9;transition:opacity .2s}
.social a:hover,.social a:focus-visible{opacity:1}
.social svg{display:block;width:100%;height:100%}
.entry .social{margin-top:44px}
#soc{position:fixed;left:20px;bottom:calc(10px + env(safe-area-inset-bottom,0px));flex-direction:column;align-items:flex-start;z-index:30;opacity:0;pointer-events:none;transition:opacity .6s}
#soc.on{opacity:1;pointer-events:auto}
body.bp-page #soc{display:none}
body.sw .blk,body.sw .wd{transition:none!important}

.entry .contact-tel{margin-top:32px;margin-bottom:0}
.entry .contact-tel+.social{margin-top:24px}

/* beeld + pijltje */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.hero{display:flex;flex-direction:column;height:calc(100vh - var(--t0) - var(--stack) - 36px - 24px);height:calc(100svh - var(--t0) - var(--stack) - 36px - 24px);min-height:260px;margin-bottom:0!important}
.hero-img{flex:1;min-height:0;position:relative;background:var(--sand);overflow:hidden}
.hero-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none!important}
.hero-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:.9rem;letter-spacing:.04em}
.hero-arrow{flex:none;height:64px;display:flex;align-items:center;justify-content:center;color:var(--blue);text-decoration:none}
.hero-arrow svg{width:30px;height:30px;animation:bpbob 2.2s ease-in-out infinite}
@keyframes bpbob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.hero-arrow svg{animation:none}}
.info{scroll-margin-top:calc(var(--t0) + var(--stack) + 24px);padding-top:24px}
#info{scroll-margin-top:calc(var(--t0) + var(--stack) + 14px)}
/* zachte overgang */
.site-main{transition:opacity .25s ease}
.site-main.out{opacity:0}
.site-main.out.slow{transition:opacity .55s ease}
.site-main.soft{animation:bpsoft .45s ease both}
.site-main.fo{opacity:0;transition:opacity .14s ease}
html,body{transition:background-color .9s ease}
@keyframes bpsoft{from{opacity:0}to{opacity:1}}

.hero-title{flex:none;box-sizing:border-box;width:100%;max-width:960px;margin:0 auto!important;padding:4px 24px 24px;color:var(--blue);font-size:clamp(1.3rem,3vw,2.1rem)!important;line-height:1.3!important;font-weight:500!important;max-width:960px!important}

.hero-title .ht1,.hero-title .ht2{display:block}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ---------- Voetregel met bedrijfsgegevens (niet op de intro van de voorpagina) ---------- */
.bp-foot{box-sizing:border-box;padding:0 24px calc(28px + env(safe-area-inset-bottom,0px));text-align:center;font-size:.75rem;line-height:1.6;letter-spacing:.02em;color:#C4C2B6}
.bp-foot a{color:inherit;text-decoration:none}
.bp-foot a:hover{color:var(--blue)}
body.bp-front:not(.bp-page) .bp-foot{display:none}

/* telefoon: banner (blokjes, woorden en logo) 15% minder hoog op de pagina's; de intro en het menu blijven zoals ze zijn */
@media(max-width:699px){
	body.inpage{--k:.85;--bw:calc(var(--W)*var(--k)*.084);--SH:calc(var(--W)*var(--k)/1.925);--bh:calc(var(--SH)*.148);--stack:calc(var(--SH)*.89)}
	body.inpage .wd{font-size:.92rem}
}