/* ==========================================================================
   DPM186 Template-kit — kit.css
   Alleen gedeelde functionaliteit: mobiel menu, formulierstatus, honeypot,
   demo-badge en reveal. Het ontwerp zelf staat in css/site.css.
   Kleuren nemen de tekstkleur over (currentColor) zodat elk ontwerp klopt.
   ========================================================================== */

/* ---------- Mobiel menu (js/menu.js) ---------- */
.mnav-btn{display:none;appearance:none;background:none;border:1.5px solid currentColor;color:inherit;width:42px;height:42px;border-radius:8px;cursor:pointer;flex:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0;position:relative;z-index:1001}
.mnav-btn span{display:block;width:18px;height:2px;background:currentColor;transition:transform .25s}
.mnav-btn.open span:first-child{transform:translateY(3.5px) rotate(45deg)}
.mnav-btn.open span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mnav-btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.mnav-panel{position:fixed;left:0;right:0;bottom:0;z-index:999;padding:24px 20px 32px;display:flex;flex-direction:column;overflow-y:auto}
.mnav-panel[hidden]{display:none}
.mnav-panel a{text-decoration:none;font-size:1.9rem;line-height:1.1;padding:16px 0;border-bottom:1px solid rgba(128,128,128,.28);color:inherit}
.mnav-panel a.mnav-cta{border:0;margin-top:26px;align-self:flex-start;font-size:1rem;padding:16px 22px;line-height:1.2}
@media(max-width:900px){.mnav-btn{display:inline-flex}}
@media(max-width:520px){.mnav-hide{display:none!important}}

/* ---------- Formulier ---------- */
.form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form__status { margin-top: 18px; padding: 14px 16px; border: 1px solid currentColor; line-height: 1.5; font-size: .95rem; }
.form__status a { color: inherit; }
.form__status--ok { border-style: dashed; }
form[data-contact] button[disabled] { opacity: .6; cursor: progress; }

/* ---------- Reveal (optioneel: class="reveal") ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Demo-badge (alleen op dpm186.nl; wordt uit de download gehaald) ---------- */
.demo-badge { position: fixed; right: 12px; bottom: 12px; z-index: 1100; font: 600 11px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 8px 10px; border-radius: 4px; background: rgba(0, 0, 0, .78); color: #fff; text-decoration: none; }
@media (max-width: 700px) {
  .demo-badge { right: 0; bottom: auto; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; padding: 10px 5px; font-size: 9px; border-radius: 0 4px 4px 0; opacity: .82; }
}