/* GEGENEREERD door scripts/apply-header.mjs uit vernast-header.js — niet met de hand bewerken. */

  :root{
    --vh-bordeaux:#9e000f; --vh-bordeaux-deep:#6b000f;
    --vh-red:#e11d2a; --vh-red-hover:#ff2f3d;
    --vh-ink:#241016; --vh-mute:#7a6066;
    --vh-font:'Plus Jakarta Sans',-apple-system,system-ui,Segoe UI,sans-serif;
  }
  /* oude header weg */
  #header-outer,#header-space,#search-outer{display:none!important}
  body{margin:0}

  .vh-bar{position:fixed;top:0;left:0;right:0;z-index:9000;font-family:var(--vh-font);background:transparent;
    transition:transform .35s ease, background .25s ease}
  .vh-bar.vh-hidden{transform:translateY(-115%)}                 /* verborgen bij omlaag scrollen */
  .vh-inner{max-width:1240px;margin:0 auto;padding:14px 24px;transition:padding .25s ease}
  /* bij scrollen: enkel utility-balk inklappen, pill behoudt zijn glas-look (niet verdonkeren) */
  .vh-bar.vh-scrolled .vh-top{display:none}
  .vh-bar.vh-scrolled .vh-inner{padding-top:10px;padding-bottom:10px}

  /* utility-balk (transparant op de hero) */
  .vh-top{display:flex;align-items:center;justify-content:space-between;padding:0 8px 12px;font-size:13px}
  .vh-top .l{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
  .vh-top .l a,.vh-top .l span{color:rgba(255,255,255,.95);text-decoration:none;display:flex;align-items:center;gap:7px;font-weight:500;white-space:nowrap}
  .vh-top .l a:hover{color:#fff}
  .vh-top .l svg{width:14px;height:14px;opacity:.95}
  .vh-top .r .badge{display:flex;align-items:center;gap:8px;color:#ecd6d8;font-size:12.5px;white-space:nowrap}
  .vh-top .r .dot{width:7px;height:7px;border-radius:50%;background:#34d27b;box-shadow:0 0 0 4px rgba(52,210,123,.18)}

  /* DONKERE smoked-glass pill */
  .vh-shell{display:flex;align-items:center;gap:12px;padding:9px 13px 9px 18px;border-radius:18px;position:relative;
    background:linear-gradient(135deg, rgba(42,4,10,.62), rgba(22,0,6,.46));
    border:1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
    box-shadow:0 30px 60px -28px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.16)}
  .vh-brand{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
  .vh-brand img{height:26px;width:auto;display:block}

  .vh-nav{display:flex;align-items:center;gap:0;margin:0 auto}
  .vh-nav a,.vh-item>button{font-family:inherit;font-size:13.5px;font-weight:600;color:#fff;background:none;border:0;cursor:pointer;
    white-space:nowrap;padding:9px 10px;border-radius:11px;display:inline-flex;align-items:center;gap:5px;text-decoration:none;line-height:1;transition:background .15s}
  .vh-nav a:hover,.vh-item:hover>button,.vh-item.open>button{background:rgba(255,255,255,.12)}
  .vh-item>button .cv{width:11px;height:11px;opacity:.7;transition:transform .2s}
  .vh-item:hover>button .cv,.vh-item.open>button .cv{transform:rotate(180deg)}
  .vh-item{position:relative}

  .vh-act{display:flex;align-items:center;gap:10px;flex-shrink:0}
  .vh-cta{background:var(--vh-red);color:#fff;text-decoration:none;font-weight:700;font-size:14px;
    padding:12px 19px;border-radius:13px;white-space:nowrap;box-shadow:0 12px 26px -10px rgba(225,29,42,.65);transition:.15s}
  .vh-cta:hover{background:var(--vh-red-hover);transform:translateY(-1px)}

  /* WITTE dropdown / mega — blijft open (gap overbrugd met padding-top) */
  .vh-dd,.vh-mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
    padding-top:14px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;z-index:60}
  .vh-item:hover .vh-dd,.vh-item.open .vh-dd,.vh-item:hover .vh-mega,.vh-item.open .vh-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  .vh-panel{background:#fff;border:1px solid rgba(120,0,12,.1);border-radius:16px;box-shadow:0 40px 80px -28px rgba(70,0,8,.42)}
  .vh-dd .vh-panel{min-width:255px;padding:8px}
  .vh-mega .vh-panel{width:min(1120px,94vw);padding:22px;display:grid;grid-template-columns:repeat(6,1fr);gap:6px 14px}

  .vh-panel,.vh-panel a,.vh-panel h4{text-align:left}
  .vh-panel .lnk{display:block;padding:10px 14px;border-radius:11px;text-decoration:none;color:var(--vh-ink);font-size:14px;font-weight:600}
  .vh-panel .lnk:hover{background:rgba(158,0,15,.07);color:var(--vh-bordeaux)}
  .vh-panel h4{display:block;width:fit-content;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--vh-bordeaux-deep);font-weight:800;margin:0 0 14px 9px;padding:6px 12px 7px;border-radius:6px;box-shadow:0 6px 14px -6px rgba(107,0,15,.55)}
  .vh-panel .col a{display:block;padding:8px 9px;border-radius:9px;text-decoration:none;color:var(--vh-ink);font-size:13.5px;font-weight:500}
  .vh-panel .col a:hover{background:rgba(158,0,15,.07);color:var(--vh-bordeaux)}
  .vh-panel .col h4.sub{margin-top:40px}
  .vh-panel .foot{grid-column:1/-1;margin-top:10px;padding-top:16px;border-top:1px solid rgba(120,0,12,.12);
    display:flex;justify-content:space-between;align-items:center;gap:16px}
  .vh-panel .foot p{font-size:13px;line-height:1.5;color:var(--vh-mute)}
  .vh-panel .foot p b{color:var(--vh-ink)}
  .vh-panel .foot .vh-cta{padding:11px 18px;background:var(--vh-red);color:#fff;display:inline-block}

  /* burger + mobiel */
  .vh-burger{display:none;flex-direction:column;gap:5px;background:rgba(255,255,255,.12);border:0;padding:11px;border-radius:11px;cursor:pointer}
  .vh-burger i{width:20px;height:2px;background:#fff;border-radius:2px;display:block}
  .vh-burger i{transition:transform .3s,opacity .3s}
  .vh-burger.x i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .vh-burger.x i:nth-child(2){opacity:0}
  .vh-burger.x i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ===== mobiel fullscreen index-menu (schuift van onderaan in) ===== */
  body.vh-lock{overflow:hidden}
  .vh-fs{position:fixed;inset:0;z-index:9500;font-family:var(--vh-font);
    background:linear-gradient(160deg,#6e1212,#360808);
    display:flex;flex-direction:column;
    transform:translateY(100%);visibility:hidden;pointer-events:none;
    transition:transform .5s cubic-bezier(.5,0,.15,1),visibility 0s linear .5s}
  .vh-fs.open{transform:translateY(0);visibility:visible;pointer-events:auto;transition:transform .5s cubic-bezier(.5,0,.15,1)}
  .vh-fs .vhm-h{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;flex:none}
  .vh-fs .vhm-brand img{height:24px;width:auto;display:block}
  .vh-fs .vhm-close{width:46px;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;flex:none}
  .vh-fs .vhm-close i{width:20px;height:2px;background:#fff;border-radius:2px;display:block}
  .vh-fs .vhm-close i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .vh-fs .vhm-close i:nth-child(2){opacity:0}
  .vh-fs .vhm-close i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .vh-fs .vhm-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 22px}

  .vh-fs .vhm-rise{opacity:0;transform:translateY(26px);transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
  .vh-fs.open .vhm-rise{opacity:1;transform:translateY(0)}
  .vh-fs.open .vhm-list>.vhm-rise:nth-child(1){transition-delay:.12s}
  .vh-fs.open .vhm-list>.vhm-rise:nth-child(2){transition-delay:.18s}
  .vh-fs.open .vhm-list>.vhm-rise:nth-child(3){transition-delay:.24s}
  .vh-fs.open .vhm-list>.vhm-rise:nth-child(4){transition-delay:.30s}
  .vh-fs.open .vhm-list>.vhm-rise:nth-child(5){transition-delay:.36s}
  .vh-fs .vhm-foot .vhm-rise{transition-delay:.30s}
  .vh-fs.open .vhm-foot .vhm-rise:nth-child(2){transition-delay:.38s}

  .vh-fs .vhm-ix{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.14);color:#fff;cursor:pointer;text-decoration:none}
  .vh-fs .vhm-list>a.vhm-ix:last-child{border-bottom:0}
  .vh-fs .vhm-ix .n{font-size:12px;font-weight:800;color:#ff8a80;width:26px;flex:none;letter-spacing:.05em}
  .vh-fs .vhm-ix .t{font-size:24px;font-weight:800;letter-spacing:-.01em}
  .vh-fs .vhm-ix .vhm-chev{margin-left:auto;align-self:center;width:20px;height:20px;color:rgba(255,255,255,.7);transition:transform .3s;flex:none}
  .vh-fs .vhm-acc.open .vhm-ix .vhm-chev{transform:rotate(180deg)}
  .vh-fs .vhm-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1)}
  .vh-fs .vhm-acc.open .vhm-sub{grid-template-rows:1fr}
  .vh-fs .vhm-sub-inner{overflow:hidden}
  .vh-fs .vhm-cat{display:inline-block;background:rgba(255,255,255,.14);color:#ffd6d1;font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;padding:6px 13px;border-radius:9999px;margin:14px 0 4px 40px}
  .vh-fs .vhm-sub-inner a{display:block;color:rgba(255,255,255,.82);font-size:15px;font-weight:600;padding:7px 0 7px 40px;text-decoration:none}
  .vh-fs .vhm-sub-inner a:active{color:#fff}

  .vh-fs .vhm-foot{padding:16px 20px calc(24px + env(safe-area-inset-bottom));background:rgba(0,0,0,.22);display:flex;flex-direction:column;gap:12px;flex:none}
  .vh-fs .vhm-cta{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--vh-red);color:#fff;font-weight:800;font-size:16px;padding:15px;border-radius:12px;box-shadow:0 10px 26px rgba(200,20,20,.36);text-decoration:none}
  .vh-fs .vhm-cta svg{width:18px;height:18px}
  .vh-fs .vhm-call{display:flex;align-items:center;justify-content:center;gap:9px;color:#fff;font-weight:700;font-size:15px;text-decoration:none}
  .vh-fs .vhm-call svg{width:17px;height:17px;color:#ffb3ac}
  .vh-fs .vhm-hours{display:block;text-align:center;color:rgba(255,255,255,.66);font-size:12.5px;font-weight:500}
  .vh-fs .vhm-hours a{color:rgba(255,255,255,.82);text-decoration:none}

  @media(max-width:1140px){
    .vh-nav{display:none}
    .vh-burger{display:flex}
    .vh-act{margin-left:auto}          /* nav weg: logo links, burger rechts */
  }
  @media(max-width:680px){
    .vh-act .vh-cta{display:none}
    .vh-top .r{display:none}
    /* openingsuren blijven staan: balk compacter i.p.v. items verbergen */
    .vh-top{font-size:11px}
    .vh-top .l{gap:9px}
    .vh-top .l a,.vh-top .l span{gap:5px}
    .vh-top .l svg{width:12px;height:12px}
    .vh-inner{padding:10px 14px 12px}
  }
  @media(max-width:400px){
    /* te smal voor 3 items: mail wijkt, telefoon + openingsuren blijven */
    .vh-top .l .mail{display:none}
  }