/* ==========================================================================
   Header + menu's — 1-op-1 naar de live site (www.webjongens.nl, YOOtheme + DJ-MegaMenu).
   Maten/kleuren overgenomen uit templates/yootheme_custom/css/custom.css en de gemeten
   live-weergave (1440 / 1200 / 1024 / 768 / 390 px).
   - ≥ 960px: header over de pagina heen (scrollt mee weg), hamburger → volledig scherm "Menu"
   - < 960px: mobiele balk (logo 100px), verschijnt weer bij omhoog scrollen; hamburger → offcanvas
   ========================================================================== */

:root {
  --lh-purple: #8438df;
  --lh-dark: #2e1352;
  --lh-pink: #f7148b;
  --lh-green: #c7fdbb;
  --lh-hover: #2d2e33;
}

.lh-container { box-sizing: border-box; max-width: 1480px; margin: 0 auto; padding: 0 15px; }
@media (min-width: 640px) { .lh-container { padding: 0 40px; } }

/* ---------------- Desktop header (≥ 960px) ---------------- */
.lh-header { display: none; }
@media (min-width: 960px) {
  .lh-header { display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 980; }
}
.lh-navbar { display: flex; align-items: center; justify-content: space-between; min-height: 194px; }
.lh-logo { display: block; flex-shrink: 0; align-self: flex-start; }
.lh-logo img { display: block; width: 194px; height: 194px; max-width: none; }
.lh-right { display: flex; align-items: center; gap: 15px; }

.lh-nav { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.lh-nav li { margin-right: 50px; }
.lh-nav a {
  display: flex; align-items: center; min-height: 40px;
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(15px, 2vw, 17px); line-height: 1.625;
  color: #fff; text-decoration: none; transition: color .1s ease-in-out, background-color .1s ease-in-out;
}
.lh-nav a:hover, .lh-nav a[aria-current] { color: var(--lh-hover); }
.lh-nav .lh-koffie {
  background: var(--lh-green) url(../images/system/icons/koffie-blauw.svg) no-repeat right 10px center / 20px;
  border-radius: 100px; color: var(--lh-dark); padding: 5px 40px 5px 20px; box-sizing: border-box;
}
.lh-nav .lh-koffie:hover, .lh-nav .lh-koffie[aria-current] { color: var(--lh-hover); }
/* Uitklappers (Sketch-structuur: Diensten ▾, Meer ▾) in de live-opmaak */
.lh-has-dd { position: relative; }
.lh-dd-toggle {
  display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(15px, 2vw, 17px); line-height: 1.625; color: #fff; transition: color .1s ease-in-out;
}
.lh-dd-toggle svg { width: 9px; height: 7px; transition: transform .2s; }
.lh-dd-toggle:hover, .lh-dd-toggle[aria-current], .lh-dd-toggle[aria-expanded="true"] { color: var(--lh-hover); }
.lh-dd { position: absolute; top: 100%; left: -30px; z-index: 5; min-width: 250px; padding-top: 12px; }
.lh-dd[hidden] { display: none; }
.lh-dd ul { margin: 0; padding: 20px 30px; list-style: none; border-radius: 15px; background: var(--lh-dark); box-shadow: 0 15px 40px rgba(46, 19, 82, .35); }
.lh-nav .lh-dd li { margin: 0; }
.lh-nav .lh-dd a { position: relative; min-height: 0; padding: 6px 0 6px 0; font-size: 17px; white-space: nowrap; transition: padding .15s, color .1s; }
.lh-nav .lh-dd a::before { content: ""; position: absolute; left: -2px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); opacity: 0; background: url(../images/system/icons/pijl-roze.svg) no-repeat center / contain; transition: opacity .15s; }
.lh-nav .lh-dd a:hover, .lh-nav .lh-dd a[aria-current] { color: #fff; padding-left: 30px; }
.lh-nav .lh-dd a:hover::before, .lh-nav .lh-dd a[aria-current]::before { opacity: 1; }
/* Meer items dan live: iets smallere tussenruimte tot 1440px, onder 1280px alleen de hamburger */
.lh-nav li { margin-right: 35px; }
@media (max-width: 1439px) { .lh-nav li { margin-right: 22px; } }
@media (max-width: 1279px) { .lh-nav { display: none; } }

.lh-tools { display: flex; align-items: center; gap: 10px; }

/* Zoeken — knop die uitklapt tot invoerveld (live: "searchbartop") */
.lh-search { position: relative; flex-shrink: 0; width: 47px; height: 47px; }
.lh-search input { position: absolute; right: 0; top: 0; z-index: 2; }
.lh-search input:not(.is-expanded):not(:focus) { color: transparent; background-color: transparent; cursor: pointer; }
.lh-search input:not(.is-expanded):not(:focus)::placeholder { color: transparent; }
.lh-search input {
  box-sizing: border-box; height: 47px; width: 47px; padding: 0; border: 0; outline: none; border-radius: 100px;
  background-color: rgba(46, 19, 82, .3137); color: #fff;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; font-size: 17px;
  transition: .5s ease-in-out;
}
.lh-search input::placeholder { color: #8f8f8f; }
.lh-search input.is-expanded, .lh-search input:focus {
  width: 260px; padding: 0 58px 0 18px; background-color: var(--lh-dark); border-radius: 99px;
  transition: all 500ms cubic-bezier(0, .11, .35, 2);
}
/* Zoekknop zoals in Sketch: 47px, #2E1352 op 50%, dunne witte loep (omtrek) */
.lh-search button {
  position: absolute; right: 0; top: 0; z-index: 3; display: grid; place-items: center; width: 47px; height: 47px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(46, 19, 82, .5); color: rgba(255, 255, 255, .7); transition: background-color .2s linear, color .2s;
}
.lh-search button svg { width: 20px; height: 20px; margin: 2px 0 0 3px; }
.lh-search button:hover { background: var(--lh-dark); color: #fff; }
.lh-search input.is-expanded + button, .lh-search input:focus + button { background: transparent; color: #fff; }
.lh-search button:focus-visible, .lh-toggler input:focus-visible + .lh-knobs, .lh-burger:focus-visible { outline: 2px solid var(--lh-green); outline-offset: 3px; }

/* Je/U-schakelaar (live: .toggler #button-3) */
.lh-toggler { position: relative; width: 70px; height: 40px; overflow: hidden; border-radius: 20px; flex-shrink: 0; }
.lh-toggler input { position: relative; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.lh-knobs, .lh-layer { position: absolute; inset: 0; }
.lh-knobs { z-index: 2; }
.lh-layer { z-index: 1; width: 100%; border-radius: 20px; background-color: rgba(46, 19, 82, .3137); transition: 1s ease all; }
.lh-knobs::before {
  content: "Je"; position: absolute; top: 0; left: 0; box-sizing: content-box; width: 32px; height: 22px; padding: 9px 4px;
  display: flex; align-items: center; justify-content: center; border-radius: 99%;
  background-color: var(--lh-dark); color: #fff; font-family: var(--font-heading); font-size: 10px; font-weight: 700; line-height: 1;
  transition: .3s ease all, left .3s cubic-bezier(.18, .89, .35, 1.15);
}
.lh-toggler input:active + .lh-knobs::before { width: 36px; border-radius: 2px; }
.lh-toggler input:checked:active + .lh-knobs::before { margin-left: -26px; }
.lh-toggler input:checked + .lh-knobs::before { content: "U"; left: 31px; background-color: var(--lh-pink); }

/* Hamburger (live: nav-toggler.svg 30×30) */
.lh-burger {
  display: block; width: 30px; height: 30px; padding: 0; border: 0; cursor: pointer; flex-shrink: 0;
  background: url(../images/system/nav-toggler.svg) no-repeat center / contain;
}

/* ---------------- Desktop "Menu" (volledig scherm, live: #tm-dialog) ---------------- */
.lh-dialog { position: fixed; inset: 0; z-index: 1010; overflow-y: auto; background: var(--lh-purple); color: #fff; opacity: 0; transition: opacity .15s linear; }
.lh-dialog[hidden] { display: none; }
.lh-dialog.is-open { opacity: 1; }
.lh-dialog-close {
  position: absolute; top: 0; right: 0; z-index: 2; width: 65px; height: 65px; padding: 20px; border: 0; background: transparent; cursor: pointer; color: #fff;
}
.lh-dialog-close svg { display: block; width: 25px; height: 25px; }
.lh-dialog-close line { stroke: #fff; stroke-width: 4px; transition: stroke .1s; }
.lh-dialog-close:hover line { stroke: var(--lh-pink); }
.lh-dialog-body { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; max-width: 1200px; margin: 0 auto; padding: 80px 20px; }
@media (min-width: 1240px) { .lh-dialog-body { padding: 0; } }
.lh-dialog-title { margin: 0 0 20px; padding: 0 0 20px; font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: clamp(40px, 5vw, 60px); line-height: clamp(45px, 5.5vw, 65px); }
.lh-dialog-grid { display: flex; align-items: center; gap: 0; }
.lh-tabs { flex-shrink: 0; margin: 0 100px 0 0; padding: 0; list-style: none; }
.lh-tabs a, .lh-tabs button {
  position: relative; display: block; padding: 4px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-heading); font-weight: 700; font-size: 25px; line-height: 40.625px; color: #fff; text-decoration: none;
}
.lh-tabs a:hover::before, .lh-tabs button:hover::before, .lh-tabs .is-active::before {
  content: ""; position: absolute; left: -45px; top: 10px; width: 30px; height: 30px;
  background: url(../images/system/icons/pijl-roze.svg) no-repeat center / contain;
}
.lh-panels { flex: 1; min-width: 0; padding-left: 40px; }
.lh-panel[hidden] { display: none; }
.lh-panel { padding-bottom: 32px; }
.lh-panel.is-active { animation: lh-slide-right .3s ease-out; }
@keyframes lh-slide-right { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.lh-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; column-gap: 0; margin: 0; padding: 0; list-style: none; }
.lh-links li { padding: 0 0 30px; }
.lh-link { display: flex; align-items: flex-start; gap: 10px; min-height: 65px; color: #fff; text-decoration: none; font-family: var(--font-heading); font-weight: 700; font-size: clamp(18px, 2vw, 20px); line-height: 32.5px; }
.lh-link img { width: 33px; height: 33px; margin-top: 5px; flex-shrink: 0; transition: transform .2s; }
.lh-link:hover img { transform: translateX(3px); }
.lh-link small { display: block; margin-top: 4.5px; font-family: var(--font-body); font-weight: 500; font-size: clamp(14.4px, 2vw, 15.3px); line-height: 25px; color: #fff; }
.lh-work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.lh-work a { position: relative; display: block; color: #fff; text-decoration: none; }
.lh-work img { display: block; width: 100%; aspect-ratio: 271 / 325; object-fit: cover; border-radius: 15px; }
.lh-work .lh-badge { position: absolute; top: 15px; left: 15px; padding: 2px 6px; border-radius: 99px; background: var(--lh-pink); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 12px; line-height: 1.5; }
.lh-work .lh-meta { display: block; margin-top: 10px; font-family: var(--font-body); font-weight: 500; font-size: clamp(14px, 2vw, 18px); line-height: 1.4; }
.lh-more {
  display: inline-block; margin-top: 30px; padding: 0 20px; border: 1px solid #fff; border-radius: 99px; color: #fff; text-decoration: none;
  font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: 38px; transition: color .1s, border-color .1s;
}
.lh-more:hover { color: var(--lh-pink); border-color: var(--lh-pink); }
@media (max-width: 1239px) {
  .lh-dialog-grid { flex-direction: column; align-items: flex-start; gap: 40px; }
  .lh-tabs { margin: 0 0 0 45px; }
  .lh-panels { padding-left: 0; width: 100%; }
  .lh-links, .lh-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------- Mobiele header (< 960px, live: tm-header-mobile + DJ-MegaMenu) ---------------- */
.lh-mobile { position: absolute; top: 0; left: 0; right: 0; z-index: 980; height: 100px; }
@media (min-width: 960px) { .lh-mobile { display: none; } }
.lh-mobile-bar { position: relative; }
.lh-mobile-bar .lh-container { display: flex; align-items: flex-start; justify-content: space-between; height: 80px; }
.lh-mobile .lh-logo img { width: 100px; height: 100px; }
.lh-mobile .lh-tools { gap: 10px; margin-top: 26px; margin-right: -5px; }
.lh-mobile .lh-search input.is-expanded, .lh-mobile .lh-search input:focus { width: min(250px, calc(100vw - 190px)); }
.lh-mobile-open { width: 40px; height: 35px; margin-top: 0; padding: 0; border: 0; cursor: pointer; background: url(../images/system/nav-toggler.svg) no-repeat center / 30px; }
/* Sticky bij omhoog scrollen (live: uk-sticky show-on-up, animatie slide-top) */
.lh-mobile.is-sticky .lh-mobile-bar { position: fixed; top: 0; left: 0; right: 0; background: var(--lh-purple); animation: lh-slide-top .2s ease-out; }
.lh-mobile.is-sticky.is-leaving .lh-mobile-bar { transform: translateY(-100%); transition: transform .2s ease-in; animation: none; }
@keyframes lh-slide-top { from { transform: translateY(-100%); } to { transform: none; } }

/* Offcanvas (live: .dj-offcanvas-dark .dj-offcanvas-right, schuift van rechts in) */
.lh-offcanvas { position: fixed; inset: 0 0 0 auto; z-index: 1010; width: 100%; overflow-y: auto; background: var(--lh-purple); color: #fff; transform: translateX(100%); transition: transform .3s ease; visibility: hidden; }
.lh-offcanvas.is-open { transform: none; visibility: visible; }
.lh-offcanvas-top { display: flex; justify-content: flex-end; height: 55px; }
.lh-offcanvas-close { width: 55px; height: 55px; padding: 16px; border: 0; background: none; cursor: pointer; }
.lh-offcanvas-close svg { display: block; width: 23px; height: 23px; }
.lh-offcanvas-close line { stroke: #fff; stroke-width: 4px; }
.lh-offcanvas-title { margin: 0; padding: 15px 15px 20px 25px; font-family: var(--font-heading); font-weight: 700; font-size: 30px; line-height: 35px; color: #fff; }
.lh-mnav { margin: 0; padding: 15px 0 0; list-style: none; }
.lh-mnav > li { position: relative; }
.lh-mnav > li > a, .lh-mnav > li > button {
  position: relative; display: block; margin: 0 0 30px 75px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 20px; color: #fff; text-decoration: none;
}
.lh-mnav > li > a::before, .lh-mnav > li > button::before {
  content: ""; position: absolute; left: -50px; top: -5px; width: 30px; height: 30px;
  background: url(../images/system/icons/pijl-roze.svg) no-repeat center / contain; transition: transform .2s;
}
.lh-mnav > li > button[aria-expanded="true"]::before { transform: rotate(-90deg); }
.lh-msub { margin: 0; padding: 0; list-style: none; }
.lh-msub[hidden] { display: none; }
.lh-msub a {
  position: relative; display: block; margin: 0 0 30px 75px; padding: 0 0 0 35px;
  font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 18px; color: #fff; text-decoration: none;
}
.lh-msub a::before {
  content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px;
  border-radius: 50%; background: rgb(46 19 82 / .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9c7f5' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 7 5 5-5 5'/%3E%3C/svg%3E") no-repeat center / 12px;
}
.lh-offcanvas-u { padding: 15px 15px 40px 25px; }
.lh-offcanvas-u button { border: 0; cursor: pointer; }
.lh-offcanvas-u a, .lh-offcanvas-u button {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 99px; background: var(--lh-pink); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 15px; text-decoration: none;
}
body.lh-locked { overflow: hidden; }