/* ============================================
   chrome.css — kop en voet van alle pagina's (site en tools)
   Eén herkenbare Launching Impact-kop; de inhoud eronder is per playbook.
   Werkt met de tokens van site.css (homepage, productpagina) en van
   merk/merk.css (tools): elke kleur heeft een terugvaloptie.
   ============================================ */

:root{--kop-h:64px;--plak-h:64px}
.li-top,.li-foot{
  --li-bg:var(--paper,var(--cream));
  --li-ink:var(--ink);
  --li-soft:var(--ink-soft,var(--grey));
  --li-kraft:var(--kraft,#9C7B52);
  --li-accent:var(--accent,var(--rose,#C9615F));
  --li-display:var(--display,var(--font-display,'Playfair Display',Georgia,serif));
  --li-body:var(--body,var(--font-body,'DM Sans',system-ui,sans-serif));
  font-family:var(--li-body);
}
.li-wrap{max-width:1080px;margin:0 auto;padding-inline:20px}

/* ---------- kop ---------- */
.li-top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--li-bg) 94%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .2s}
#site-header{position:sticky;top:0;z-index:60}
#site-header .li-top{position:static}
.li-top.scrolled,#site-header.scrolled .li-top{box-shadow:0 6px 18px -14px rgba(42,32,24,.45)}
.li-top .li-wrap{display:flex;align-items:center;gap:10px 22px;padding-block:13px}
/* Woordmerk zoals het logo (merk/woordmerk.png): LAUNCHING dun en licht, impact cursief en donker */
.li-mark{--wm-licht:#D8D0C4;--wm-donker:#3D3630;font-family:var(--li-body);font-weight:300;text-transform:uppercase;font-size:21px;line-height:1;color:var(--wm-licht);text-decoration:none;white-space:nowrap;letter-spacing:.005em}
.li-mark i{font-family:var(--li-display);font-weight:400;text-transform:lowercase;font-size:1.3em;letter-spacing:0;color:var(--wm-donker);margin-left:.04em}
.li-mark img{display:block;height:32px;width:auto}
.li-pb{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--li-accent);text-decoration:none;border:1px solid color-mix(in srgb,var(--li-accent) 45%,transparent);padding:5px 10px;border-radius:2px;white-space:nowrap}
.li-pb[hidden],.li-nav[hidden],.li-cta[hidden]{display:none!important}
.li-pb:hover{background:color-mix(in srgb,var(--li-accent) 10%,transparent)}
.li-dot{width:8px;height:8px;border-radius:50%;background:var(--li-accent);flex:none}
.li-nav{display:flex;flex-wrap:wrap;gap:4px 20px;margin-left:auto;font-size:14.5px}
.li-nav a{color:var(--li-ink);text-decoration:none;padding-block:4px}
.li-nav a:hover,.li-nav a[aria-current="page"]{color:var(--li-kraft)}
.li-cta{display:inline-block;font:500 14px/1 var(--li-body);padding:10px 16px;border-radius:2px;text-decoration:none;
  background:var(--li-ink);color:var(--li-bg);border:1px solid var(--li-ink);white-space:nowrap}
.li-cta:hover{opacity:.88}
.li-cta .kort{display:none}

@media (max-width:760px){
  .li-top .li-wrap{flex-wrap:wrap;padding-block:10px 0;gap:8px 12px}
  .li-mark{font-size:19px}
  .li-mark{order:1}
  .li-cta{order:2;margin-left:auto;font-size:13px;padding:8px 12px}
  .li-cta .lang{display:none}.li-cta .kort{display:inline}
  .li-pb{order:3;font-size:10.5px;padding:4px 8px}
  .li-nav{order:4;flex:1 0 100%;min-width:0;margin:0;flex-wrap:nowrap;overflow-x:auto;gap:18px;padding-block:6px 10px;
    font-size:14px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .li-nav::-webkit-scrollbar{display:none}
  .li-nav a{white-space:nowrap}
  .li-pb:not([hidden])+.li-nav{flex:1 1 0;padding-left:2px}
}

/* ankers niet onder de vaste kop laten verdwijnen */
[id]{scroll-margin-top:calc(var(--plak-h) + 12px)}

/* ---------- voet ---------- */
.li-foot{background:var(--li-bg);color:var(--li-soft);border-top:1px solid var(--line);font-size:14px}
.li-foot-in{display:grid;grid-template-columns:1.3fr 1fr;gap:28px 48px;padding-block:40px 26px;align-items:start}
.li-foot .li-mark{font-size:22px}
.li-foot-brand p{margin:12px 0 0;max-width:30em;line-height:1.6}
.li-foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;align-content:start}
.li-foot-nav a{color:var(--li-ink);text-decoration:none}
.li-foot-nav a:hover{color:var(--li-kraft)}
.li-foot-meta{display:flex;flex-wrap:wrap;gap:8px 28px;padding-block:16px 34px;border-top:1px solid var(--line);font-size:13px}
.li-foot-meta a{color:inherit}
@media (max-width:640px){.li-foot-in{grid-template-columns:1fr}}

@media print{.li-top,.li-foot,#site-header{display:none!important}}