/* Molt Studio · shared nav, loaded after each page's own styles.
   Desktop: two actions on the right, "Neem contact op" (secondary button to /contact) and "Start nu" (main button to /start).
   The logo is 1.1 × the old 24 px.
   Phone and tablet (up to 1080 px): the menu opens over the full width and height of the screen, as in brand book 04.1:
   large serif rows with an arrow on the right, the main button at the bottom, and "Menu" turns into "Sluiten".
   The burger keeps its square: filled for "Menu", only the outline (transparent middle) for "Sluiten", no ×.
   Phone gutter is 24 px for the header, the menu and the homepage hero, so the logo, the rows and the hero text line up.
   Diensten opens as a short list of the six services only; tools, prices and the feature card stay on desktop. */

/* ---------- desktop actions ---------- */
.nav .nav-brand{font-size:26.4px}
.nav-start{display:flex;align-items:center;gap:8px}
/* secondary button (brand book 04.2 "Tweede knop"): outline on Nacht, the main button stays Krijt */
.nav a.nav-ct{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:0;background:transparent;box-shadow:inset 0 0 0 1px #5c5c5a;font:600 14px/1 var(--body);color:var(--text);text-decoration:none;white-space:nowrap;transition:background .12s,box-shadow .12s}
.nav a.nav-ct:hover,.nav a.nav-ct:focus-visible{background:#ffffff12;box-shadow:inset 0 0 0 1px var(--text)}
.nav a.nav-ct:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.nav a.nav-ct[aria-current]{background:#ffffff12;box-shadow:inset 0 0 0 1px var(--text)}
.nav a.nav-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;text-decoration:none;white-space:nowrap}

/* ---------- burger: "Menu" (filled square) / "Sluiten" (outlined square) ---------- */
.nav-burger .nb-c{display:none}
.nav-burger[aria-expanded="true"] .nb-o{display:none}
.nav-burger[aria-expanded="true"] .nb-c{display:inline}

/* the mobile menu's own actions (hidden on desktop) */
.nav-m-start{display:none}

/* no announcement bar on phones (brand book 03.4), and none while the menu is open */
@media (max-width:720px){.mb{display:none!important}}
body:has(.nav-links.open) .mb{display:none!important}

@media (max-width:1080px){
  html:has(.nav-links.open){overflow:hidden}
  .nav-burger{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;margin-left:4px;padding:0 4px 0 12px;font:600 14px/1 var(--body);color:var(--text);background:transparent;box-shadow:none}
  .nav-burger[aria-expanded="true"]{background:transparent;color:var(--text);box-shadow:none}
  .nav-burger .nb-o::after,.nav-burger .nb-c::after{content:"";display:inline-block;width:8px;height:8px;margin-left:8px;background:currentColor;vertical-align:1px}
  .nav-burger .nb-c::after{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
  .nav-in{padding-left:24px;padding-right:20px}
  .nav-burger:focus-visible{outline:2px dotted var(--text);outline-offset:2px}
  body.scrim-on .lc-btn{display:none}

  /* full-width, full-height panel under the header */
  .nav-links{top:100%;left:0;right:0;height:calc(100dvh - 64px);max-height:none;padding:0 0 calc(16px + env(safe-area-inset-bottom));background:#0b0b0b;box-shadow:inset 0 1px #262626;overflow-y:auto;overscroll-behavior:contain}
  .nav-links.open{display:flex}
  .nav-links > a,.nav-links .nav-dd-btn{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:64px;padding:10px 24px;border:0;border-bottom:1px solid #262626;font:400 28px/1.1 var(--serif);letter-spacing:-.005em;color:var(--text);text-align:left}
  .nav-links > a:hover,.nav-links .nav-dd-btn:hover,.nav-links .nav-dd-btn[aria-expanded="true"]{background:#111;color:var(--text)}
  .nav-links > a[aria-current],.nav-links .nav-dd-btn.nav-dd-on{box-shadow:inset 3px 0 var(--text);padding-left:24px}
  .nav-links .nav-dd-btn span{display:none}
  .nav-links > a::after,.nav-links .nav-dd-btn::after{content:"→";flex:none;margin-left:16px;font:400 18px/1 var(--body);color:var(--muted);transition:transform .15s}
  .nav-links .nav-dd-btn[aria-expanded="true"]::after{transform:rotate(90deg);color:var(--text)}
  .nav-links .nav-dd-btn[aria-expanded="true"]{border-bottom-color:transparent}

  /* open dropdowns: indented list under the row */
  .nav-links .nav-dd-menu,.nav-links .nav-dd-menu.uc{padding:0 24px 12px;border-bottom:1px solid #262626;background:#111}
  .nav-links .nav-dd-menu > a,.nav-links .nav-dd-menu a.mm-item{min-height:44px;padding:10px 0;font-size:15px}
  .nav-links .nav-dd-menu .ps-h{margin:14px 0 4px}
  .nav-links .mm-main,.nav-links .mm-side{padding:4px 0}
  .nav-links .mm-bar{padding:10px 0 4px}
  .nav-links .mm-bar a{display:inline-flex;align-items:center;min-height:44px}
  /* Diensten: only the six services, so the menu fits without scrolling */
  .nav-links #navDd .mm-main > .ps-h:first-child,.nav-links #navDd .mm-sub,.nav-links #navDd .mm-grid-s,.nav-links #navDd .mm-side,.nav-links #navDd .mm-feat,.nav-links #navDd .mm-bar{display:none}
  .nav-links #navDd{padding-top:0;padding-bottom:8px}
  .nav-links #navDd .mm-main{padding:0}
  .nav-links #navDd a.mm-item{min-height:48px;padding:12px 0;font-size:16px}

  /* main button at the bottom of the panel */
  .nav-links .nav-m-start{display:grid;gap:8px;margin-top:auto;padding:24px 24px 0;border:0;background:#0b0b0b}
  .nav-m-start .nav-m-cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 20px;font:600 16px/1 var(--body);text-decoration:none}
  .nav-m-start .nav-m-ct{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;box-shadow:inset 0 0 0 1px #5c5c5a;font:600 15px/1 var(--body);color:var(--text);text-decoration:none}
  .nav-m-start .nav-m-ct:hover,.nav-m-start .nav-m-ct:focus-visible{background:#ffffff12;box-shadow:inset 0 0 0 1px var(--text)}
}
@media (max-width:700px){
  .nav-in{padding:6px 20px 6px 24px;min-height:56px}
  .nav-links{height:calc(100dvh - 56px)}
  .nav-start{display:none}
}
@media (prefers-reduced-motion:reduce){.nav-links > a::after,.nav-links .nav-dd-btn::after{transition:none}}

/* ---------- inside a scan pop-up ----------
   project.js opens /sitecheck, /seo-ai-check and /conversie-calculator as ?popup=1 in an iframe; the page's head then sets html.is-embed.
   Only the tool itself shows: no nav, announcement, footer, page intro, "more tools", chat or cookie banner.
   The pop-up has the title bar ("Sitecheck.exe", "Sluiten"), so the tool loses its own window bar. */
html.is-embed,html.is-embed body{background:transparent!important}
html.is-embed body{min-height:0!important;padding:0!important}
html.is-embed .nav,html.is-embed .nav-scrim,html.is-embed .mb,html.is-embed .foot,html.is-embed .tl-hero,html.is-embed .tl-more,html.is-embed .mbar,html.is-embed #lcBtn,html.is-embed #lcWin,html.is-embed #ckWin{display:none!important}
html.is-embed main{max-width:none!important;min-height:0!important;margin:0!important;padding:0!important}
html.is-embed main > .view{min-height:0!important;margin:0!important;padding:0!important}
html.is-embed .tl-tool{margin:0!important;padding:0!important}
html.is-embed .tl-tool > .win,html.is-embed .tl-tool > .calc{margin:0;border:0;box-shadow:none}
html.is-embed .tl-tool > .win > .titlebar,html.is-embed .ck-win > .mw-bar{display:none}
html.is-embed .tl-seo > #check{min-height:0;margin:0;padding:32px 32px 36px;border:0}
html.is-embed .tl-seo > #check > .wrap{max-width:none;margin:0;padding:0}
@media (max-width:700px){html.is-embed .tl-seo > #check{padding:20px 16px 28px}}