/* ==========================================================================
   DECLAER — universele header
   Overgezet uit Declaer-onze-diensten.html, blok "UNIVERSELE HEADER".
   Dat is de actuele gedeelde component; Declaer-header.html is een oudere
   versie zonder tagline en met een ander dropdownpatroon.
   ========================================================================== */

/* Egaal wit, zodat de balk loskomt van de lichtblauwe hero eronder.
   Doorschijnend warmwit liep visueel over in de hero en zweefde daardoor niet. */
.dhdr{position:sticky;top:0;z-index:70;background:var(--paper-2);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 3%,transparent),
             0 6px 18px -14px color-mix(in srgb,var(--ink) 22%,transparent);
  transition:box-shadow .2s ease;}
.dhdr.scrolled{box-shadow:0 10px 30px -14px color-mix(in srgb,var(--ink) 34%,transparent);}

.skip{position:absolute;left:-9999px;top:0;z-index:80;background:var(--accent);color:var(--paper-2);
      padding:10px 16px;font-family:var(--display);font-weight:600;text-transform:uppercase;}
.skip:focus{left:8px;top:8px;}

.dhdr-main{display:flex;align-items:center;gap:22px;height:66px;}
.dhdr.scrolled .dhdr-main{height:56px;}

.dbrand{display:flex;align-items:center;gap:11px;color:var(--ink);flex:none;text-decoration:none;
        transition:transform .2s ease;transform-origin:left center;}
.dhdr.scrolled .dbrand{transform:scale(.9);}
.dbrand .tick{width:22px;height:22px;color:var(--accent);flex:none;}
.dbrand-tx{display:flex;flex-direction:column;gap:2px;line-height:1;}
.dbrand-name{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:.02em;}
.dbrand-tag{font-family:var(--body);font-style:italic;font-weight:400;font-size:10.5px;
            letter-spacing:.005em;color:var(--muted);white-space:nowrap;}
@media(max-width:600px){.dbrand-tag{display:none;}}

.dnav{display:flex;align-items:center;gap:4px;margin-left:14px;}
.dnav > a,.dd-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:15px;color:var(--muted);padding:10px 12px;
  border-radius:8px;transition:color .15s ease,background .15s ease;}
.dnav > a:hover,.dd-btn:hover,.dd.open .dd-btn{color:var(--ink);
  background:color-mix(in srgb,var(--ink) 5%,transparent);}
.dnav .dd-btn.is-current,.dnav > a.is-current{color:var(--ink);}
.dnav [aria-current="page"]{color:var(--accent);}
.dd-btn .chev{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease;}
.dd.open .dd-btn .chev{transform:rotate(180deg);}

.dd{position:static;}
.dd-panel{position:absolute;left:0;right:0;top:100%;background:var(--paper-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:var(--sh-hover);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:5;}
.dd.open .dd-panel{opacity:1;visibility:visible;transform:none;}
.dd-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.1fr;gap:30px;padding:30px 0 34px;}
.dd-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
      color:var(--faint);margin-bottom:12px;}
.dd-col a{display:block;min-height:24px;padding:8px 10px;margin:0 -10px;border-radius:8px;
  font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--ink);
  transition:background .14s ease,color .14s ease;}
.dd-col a small{display:block;font-family:var(--body);font-weight:400;font-size:12.5px;
  color:var(--muted);margin-top:1px;letter-spacing:0;}
.dd-col a:hover{background:var(--accent-soft);color:var(--accent-deep);}

.dd-promo{background:var(--ink);color:var(--on-ink);border-radius:14px;padding:22px;
  display:flex;flex-direction:column;gap:10px;}
.dd-cta-t{font-family:var(--display);font-weight:700;font-size:19px;text-transform:uppercase;
  letter-spacing:-.01em;color:var(--paper-2);margin:0;}
.dd-promo p{margin:0;color:var(--muted-on-ink);font-size:13.5px;}
.dd-promo a{margin-top:auto;color:var(--accent-2);font-family:var(--display);font-weight:600;
  font-size:14px;display:inline-flex;gap:7px;align-items:center;}
.dd-all{grid-column:1 / -1;border-top:1px solid var(--line);padding-top:14px;}
.dd-all a{color:var(--accent);font-family:var(--display);font-weight:600;font-size:14.5px;
  display:inline-flex;gap:8px;align-items:center;}

.dd-mini{position:relative;}
.dd-mini .dd-panel{left:0;right:auto;width:max-content;min-width:238px;border:1px solid var(--line);
  border-radius:0 0 14px 14px;box-shadow:var(--sh-hover);}
.ddm-list{padding:12px;}
.ddm-list a{display:block;padding:10px 12px;border-radius:9px;font-family:var(--display);
  font-weight:600;font-size:15.5px;color:var(--ink);transition:background .14s ease,color .14s ease;}
.ddm-list a small{display:block;font-family:var(--body);font-weight:400;font-size:12.5px;
  color:var(--muted);margin-top:1px;letter-spacing:0;}
.ddm-list a:hover{background:var(--accent-soft);color:var(--accent-deep);}

/* rechtercluster */
.dhdr-r{margin-left:auto;display:flex;align-items:center;gap:16px;flex:none;}
.dhdr-r .tel{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;}
.dhdr-r .tel svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.8;}
.dbtn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;
  font-size:14.5px;padding:11px 19px;border:1.5px solid var(--accent);background:var(--accent);
  color:var(--paper-2);border-radius:10px;cursor:pointer;box-shadow:var(--sh-btn);
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease;}
.dbtn:hover{background:var(--accent-deep);border-color:var(--accent-deep);transform:translateY(-2px);
  box-shadow:var(--sh-btn-hover);}
.dbtn .a{transition:transform .15s ease;}
.dbtn:hover .a{transform:translateX(4px);}

.dlang{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.03em;color:var(--faint);}
.dlang .globe{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.6;margin-right:2px;}
.dlang a,.dlang .cur,.dlang .soon{padding:4px 5px;border-radius:5px;color:var(--faint);
  transition:color .14s ease,background .14s ease;}
.dlang [aria-current="true"]{color:var(--ink);font-weight:700;}
.dlang .soon{opacity:.55;cursor:default;}
.dlang a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent);}
.dlang .sep{color:var(--line-2);}

/* burger + mobiel menu */
.dburger{display:none;margin-left:auto;background:none;border:1.5px solid var(--line-2);border-radius:9px;
  padding:9px 12px;gap:8px;align-items:center;cursor:pointer;font-family:var(--display);font-weight:600;
  font-size:14px;text-transform:uppercase;color:var(--ink);}
.dburger .bars{width:18px;height:12px;position:relative;display:inline-block;}
.dburger .bars::before,.dburger .bars::after,.dburger .bars i{content:"";position:absolute;left:0;right:0;
  height:2px;background:currentColor;border-radius:2px;}
.dburger .bars::before{top:0;}
.dburger .bars i{top:5px;}
.dburger .bars::after{bottom:0;}

.dmenu{display:none;border-top:1px solid var(--line);background:var(--paper);
  max-height:calc(100dvh - 67px);overflow-y:auto;}
.dmenu.open{display:block;}
.dmenu .wrap{padding:8px 0 22px;}
.dmenu > .wrap > a,.dmenu-dd > button{display:flex;justify-content:space-between;align-items:center;
  width:100%;background:none;border:0;cursor:pointer;padding:16px 0;border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:600;font-size:18px;text-transform:uppercase;color:var(--ink);}
.dmenu-dd > button .chev{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease;}
.dmenu-dd.open > button .chev{transform:rotate(180deg);}
.dmenu-sub{display:none;padding:6px 0 14px;}
.dmenu-dd.open .dmenu-sub{display:block;}
.dmenu a,.dmenu-sub a{min-height:24px;display:flex;align-items:center;}
.dmenu-sub .sub-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:12px 0 4px;}
.dmenu-sub a{display:block;padding:9px 0 9px 2px;font-family:var(--display);font-weight:600;
  font-size:15.5px;color:var(--muted);}
.dmenu-sub a:hover{color:var(--ink);}
.dmenu .dbtn{margin-top:18px;width:100%;justify-content:center;}

@media(max-width:1040px){
  .dnav,.dhdr-r .tel,.dhdr-r .dbtn{display:none;}
  .dburger{display:inline-flex;}
  .dhdr-r{gap:12px;}
  .dlang a{padding:8px 7px;}
}
@media(min-width:1041px){.dmenu{display:none !important;}}

@media(prefers-reduced-motion:reduce){
  .dd-panel,.dd-btn .chev,.dmenu-dd > button .chev,.dbtn,.dbtn .a,.dhdr-main,.dbrand{transition:none;}
}

/* ==========================================================================
   Afwijkende homepage-header (.hdr)
   Losse balk met ankernavigatie. Zie INSTALLATIE.md: dit wijkt bewust af van
   de gedeelde component en staat alleen op de voorpagina.
   ========================================================================== */

.hdr{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.hdr-in{display:flex;align-items:center;gap:24px;height:64px;}
.hdr .brand{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:.02em;
  display:flex;align-items:center;gap:10px;color:var(--ink);}
.hdr .brand .tick{width:22px;height:22px;color:var(--accent);}
.hdr .nav{display:flex;gap:26px;margin-left:26px;}
.hdr .nav a{font-family:var(--display);font-weight:600;font-size:15px;color:var(--muted);
  transition:color .15s ease;padding-block:8px;}
.hdr .nav a:hover{color:var(--ink);}
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:18px;}
.hdr-r .txtlink{color:var(--ink);}
.hdr .btn{padding:10px 18px;font-size:14.5px;}
.menu-btn{display:none;align-items:center;gap:8px;margin-left:auto;background:none;
  border:1.5px solid var(--line-2);padding:9px 13px;cursor:pointer;font-family:var(--display);
  font-weight:600;font-size:14px;text-transform:uppercase;color:var(--ink);}
.menu-btn .bars{width:18px;height:12px;position:relative;display:inline-block;}
.menu-btn .bars::before,.menu-btn .bars::after,.menu-btn .bars i{content:"";position:absolute;
  left:0;right:0;height:2px;background:currentColor;}
.menu-btn .bars::before{top:0;}
.menu-btn .bars i{top:5px;}
.menu-btn .bars::after{bottom:0;}
.mnav{display:none;border-top:1px solid var(--line);background:var(--paper);}
.mnav.open{display:block;}
.mnav .wrap{padding:6px 0 20px;}
.mnav a{display:block;padding:15px 0;border-bottom:1px solid var(--line);font-family:var(--display);
  font-weight:600;font-size:18px;text-transform:uppercase;color:var(--ink);}
.mnav .btn{margin-top:18px;width:100%;justify-content:center;}

@media(max-width:940px){
  .hdr .nav,.hdr-r{display:none;}
  .menu-btn{display:inline-flex;}
}
@media(min-width:941px){.mnav{display:none !important;}}