.elementor-126 .elementor-element.elementor-element-8686c07{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-126 .elementor-element.elementor-element-8686c07:not(.elementor-motion-effects-element-type-background), .elementor-126 .elementor-element.elementor-element-8686c07 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-4f07d2a */<header id="site-header" aria-label="Hoofdnavigatie" style="isolation:isolate;">
  <style>
    :root{
      --bg:#0b1220; --fg:#ffffff; --muted:#cbd5e1;
      --primary:#5e60ce; --primary-600:#4c4fb1; --border:#1f2937; --ring:#7DD3FC;
      --panel:rgba(255,255,255,.06); --shadow:0 12px 34px rgba(2,6,23,.22);
    }

    /* Forceer donkere header zodat knop-tekst niet “verdwijnt” */
    #site-header{background:var(--bg); color:var(--fg); box-shadow:0 1px 0 rgba(148,163,184,.18)}
    #site-header *{box-sizing:border-box}
    #site-header .wrap{max-width:1240px;margin:0 auto;padding:12px 16px 10px;display:flex;flex-direction:column;gap:12px}

    /* Rij 1: logo gecentreerd */
    #site-header .brand{display:flex;justify-content:center;align-items:center;gap:10px}
    #site-header .brand img{height:44px;width:auto;display:block;background:#fff;border-radius:10px}
    #site-header .brand .name{font-weight:700;letter-spacing:.2px}

    /* Rij 2: menubalk (donkere panel) */
    #site-header nav{display:block}
    #site-header .bar{
      display:flex;justify-content:center;align-items:center;gap:14px;
      border:1px solid var(--border);border-radius:12px;padding:8px;background:var(--panel)
    }
    #site-header .menu{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
    #site-header .menu>li{position:relative}
    #site-header .menu a,#site-header .menu button{
      display:inline-flex;align-items:center;gap:6px;padding:10px 10px;border-radius:10px;
      color:var(--fg);text-decoration:none;font-weight:600;background:none;border:0;cursor:pointer
    }
    #site-header .menu a:hover,#site-header .menu button:hover{background:var(--panel)}
    #site-header .menu a:focus-visible,#site-header .menu button:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

    /* Dropdowns (desktop) */
    #site-header .dropdown{
      position:absolute;left:0;top:100%;min-width:260px;margin-top:8px;padding:8px;border-radius:12px;
      background:#0f172a;border:1px solid var(--border);box-shadow:var(--shadow);display:none
    }
    #site-header .dropdown a{display:flex;justify-content:space-between;gap:10px;padding:10px;border-radius:10px;color:#e5e7eb;text-decoration:none}
    #site-header .dropdown a small{color:var(--muted);font-weight:500}
    #site-header .dropdown a:hover{background:var(--panel);color:#fff}
    @media (hover:hover){
      #site-header .menu>li:hover .dropdown,
      #site-header .menu>li:focus-within .dropdown{display:block}
    }

    /* Actieknoppenrij (desktop) */
    #site-header .actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
    #site-header .btn{
      display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;font-weight:700;
      text-decoration:none;border:1px solid rgba(255,255,255,.2);background:var(--panel);color:#fff
    }
    #site-header .btn:hover{background:rgba(255,255,255,.12)}
    #site-header .btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
    #site-header .btn-primary:hover{background:var(--primary-600)}
    #site-header .btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

    /* Mobiel/tablet */
    #nav-toggle{display:none}
    #site-header .mobile-bar{display:none;justify-content:space-between;align-items:center;gap:8px}
    @media (max-width:980px){
      #site-header .bar{display:none}              /* verberg desktopmenu */
      #site-header .mobile-bar{display:flex}       /* toon Menu + Afspraak */
      #site-header .drawer{
        display:none;margin-top:8px;border:1px solid var(--border);border-radius:12px;padding:10px;background:#0f172a
      }
      #nav-toggle:checked ~ nav .drawer{display:block}
      #site-header .drawer .menu{flex-direction:column;gap:6px}
      #site-header .drawer .dropdown{position:static;margin:6px 0 0 0;display:none;max-height:60vh;overflow:auto;border-radius:10px}
      #site-header .drawer .menu>li.open .dropdown{display:block}
      #site-header .brand img{height:40px}
    }

    /* Ultra-wide ademruimte */
    @media (min-width:1440px){ #site-header .wrap{max-width:1360px} }
    #site-header, #site-header .wrap, #site-header nav{overflow:visible}
  </style>

  <div class="wrap">
    <!-- Logo -->
    <a class="brand" href="/" aria-label="Meskincare home">
      <img src="https://meskincare.be/wp-content/uploads/2025/09/Copy-of-Deliziaskincare.png" alt="Meskincare logo" width="160" height="44" loading="eager" fetchpriority="high">
      <span class="name" aria-hidden="true">Meskincare</span>
    </a>

    <!-- Desktop: menubalk -->
    <nav aria-label="Hoofdmenu">
      <!-- Actieknoppen rij (blijft donker, dus tekst zichtbaar) -->
      <div class="actions" aria-label="Contact acties">
        <a class="btn" href="tel:+32470112399">📞 Bellen</a>
        <a class="btn" href="https://wa.me/32470112399" target="_blank" rel="noopener">💬 WhatsApp</a>
        <a class="btn btn-primary" href="/afspraak/">Afspraak</a>
      </div>

      <div class="bar" role="menubar" aria-label="Navigatiebalk">
        <ul class="menu">
          <li><a href="/">Home</a></li>
          <li><a href="/over-ons/">Over ons</a></li>

          <li>
            <button type="button" aria-haspopup="true" aria-expanded="false">Behandelingen ▾</button>
            <div class="dropdown" role="menu" aria-label="Behandelingen">
              <a href="/behandelingen/hydrafacial/"><span>HydraFacial</span><small>reiniging & hydratatie</small></a>
              <a href="/behandelingen/hifu/"><span>HIFU</span><small>lifting zonder snijden</small></a>
              <a href="/behandelingen/laserontharing/"><span>Laserontharing</span><small>duurzame reductie</small></a>
              <a href="/behandelingen/coolsculpting/"><span>Coolsculpting</span><small>cryolipolyse</small></a>
              <a href="/behandelingen/infuzion/"><span>Infuzion</span><small>huidboost</small></a>
              <a href="/behandelingen/emt-ems/"><span>EMT-EMS</span><small>spierversteviging</small></a>
              <a href="/behandelingen/headspa/"><span>Headspa</span><small>hoofdhuid & wellness</small></a>
              <a href="/behandelingen/tanning/"><span>Tanning</span><small>egale teint</small></a>
              <a href="/behandelingen/teen-facial/"><span>Teen Facial</span><small>acne-educatie</small></a>
            </div>
          </li>

          <li><a href="/tarieven/">Tarieven</a></li>

          <li>
            <button type="button" aria-haspopup="true" aria-expanded="false">Locaties ▾</button>
            <div class="dropdown" role="menu" aria-label="Locaties">
              <a href="/locaties/antwerpen/"><span>Antwerpen (Wilrijk)</span><small>naast A12</small></a>
              <a href="/locaties/brussel/"><span>Brussel</span><small>info & route</small></a>
              <a href="/locaties/gent/"><span>Gent</span><small>info & route</small></a>
              <a href="/locaties/leuven/"><span>Leuven</span><small>info & route</small></a>
              <a href="/locaties/mechelen/"><span>Mechelen</span><small>info & route</small></a>
              <a href="/locaties/hasselt/"><span>Hasselt</span><small>info & route</small></a>
            </div>
          </li>

          <li><a href="/blog/">Blog</a></li>
          <li><a href="/faq/">FAQ</a></li>
          <li><a href="/contact/">Contact</a></li>
        </ul>
      </div>

      <!-- Mobiel/tablet: Menu-knop + drawer -->
      <div class="mobile-bar" aria-hidden="true">
        <label class="btn" for="nav-toggle">☰ Menu</label>
        <a class="btn btn-primary" href="/afspraak/">Afspraak</a>
      </div>
      <input id="nav-toggle" type="checkbox" hidden>

      <div class="drawer" aria-label="Mobiele navigatie">
        <ul class="menu">
          <li><a href="/">Home</a></li>
          <li><a href="/over-ons/">Over ons</a></li>
          <li>
            <button type="button" aria-haspopup="true" aria-expanded="false">Behandelingen ▾</button>
            <div class="dropdown" role="menu">
              <a href="/behandelingen/hydrafacial/"><span>HydraFacial</span><small>reiniging & hydratatie</small></a>
              <a href="/behandelingen/hifu/"><span>HIFU</span><small>lifting zonder snijden</small></a>
              <a href="/behandelingen/laserontharing/"><span>Laserontharing</span><small>duurzame reductie</small></a>
              <a href="/behandelingen/coolsculpting/"><span>Coolsculpting</span><small>cryolipolyse</small></a>
              <a href="/behandelingen/infuzion/"><span>Infuzion</span><small>huidboost</small></a>
              <a href="/behandelingen/emt-ems/"><span>EMT-EMS</span><small>spierversteviging</small></a>
              <a href="/behandelingen/headspa/"><span>Headspa</span><small>hoofdhuid & wellness</small></a>
              <a href="/behandelingen/tanning/"><span>Tanning</span><small>egale teint</small></a>
              <a href="/behandelingen/teen-facial/"><span>Teen Facial</span><small>acne-educatie</small></a>
            </div>
          </li>
          <li><a href="/tarieven/">Tarieven</a></li>
          <li>
            <button type="button" aria-haspopup="true" aria-expanded="false">Locaties ▾</button>
            <div class="dropdown" role="menu">
              <a href="/locaties/antwerpen/"><span>Antwerpen (Wilrijk)</span><small>naast A12</small></a>
              <a href="/locaties/brussel/"><span>Brussel</span><small>info & route</small></a>
              <a href="/locaties/gent/"><span>Gent</span><small>info & route</small></a>
              <a href="/locaties/leuven/"><span>Leuven</span><small>info & route</small></a>
              <a href="/locaties/mechelen/"><span>Mechelen</span><small>info & route</small></a>
              <a href="/locaties/hasselt/"><span>Hasselt</span><small>info & route</small></a>
            </div>
          </li>
          <li><a href="/blog/">Blog</a></li>
          <li><a href="/faq/">FAQ</a></li>
          <li><a href="/contact/">Contact</a></li>
        </ul>
      </div>
    </nav>
  </div>

  <script>
    // Mobiele submenus togglen; sluit bij klik buiten of Escape
    (function(){
      const root = document.getElementById('site-header');
      const mq = window.matchMedia('(max-width:980px)');
      const drawer = root.querySelector('.drawer');
      const toggles = drawer.querySelectorAll('.menu > li > button');
      const checkbox = document.getElementById('nav-toggle');

      toggles.forEach(btn=>{
        btn.addEventListener('click', ()=>{
          if(!mq.matches) return;
          const li = btn.parentElement;
          const open = li.classList.toggle('open');
          btn.setAttribute('aria-expanded', open ? 'true':'false');
          toggles.forEach(b=>{ if(b!==btn){ b.parentElement.classList.remove('open'); b.setAttribute('aria-expanded','false'); }});
        });
      });
      document.addEventListener('click', e=>{
        if(!root.contains(e.target)){
          toggles.forEach(b=>{ b.parentElement.classList.remove('open'); b.setAttribute('aria-expanded','false'); });
          if(checkbox.checked) checkbox.checked = false;
        }
      });
      document.addEventListener('keydown', e=>{
        if(e.key==='Escape'){
          toggles.forEach(b=>{ b.parentElement.classList.remove('open'); b.setAttribute('aria-expanded','false'); });
          if(checkbox.checked) checkbox.checked = false;
        }
      });
    })();
  </script>
</header>/* End custom CSS */