/* Language switch of the guide sites (gids-vertaal). One <details> in the header; works without JavaScript. */
.tl{position:relative;flex:none;order:1;font:600 .88rem/1 var(--sans,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif)}
.tl summary{list-style:none;display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:.4rem .8rem;border:1.5px solid var(--night,var(--zk-fg,currentColor));border-radius:999px;color:var(--night,var(--zk-fg,inherit));cursor:pointer;letter-spacing:.04em;background:transparent;box-sizing:border-box}
.tl summary::-webkit-details-marker{display:none}
.tl summary svg{width:1.1em;height:1.1em;flex:none}
.tl summary:hover,.tl[open] summary{background:var(--night,var(--zk-fg,currentColor));color:var(--paper,var(--zk-bg,#fff))}
.tl summary:focus-visible,.tl-list a:focus-visible{outline:2px solid var(--gold,var(--zk-accent,#17605b));outline-offset:2px}
.tl-list{position:absolute;right:0;top:calc(100% + .35rem);z-index:40;min-width:10rem;padding:.3rem;background:var(--paper,var(--zk-bg,#fff));color:var(--ink,var(--zk-fg,#171b24));border:1px solid var(--line,var(--zk-rand,#d9d3c4));border-radius:.7rem;box-shadow:0 14px 34px -14px rgba(0,0,0,.4)}
.tl-list a{display:block;padding:.7rem .85rem;border-radius:.45rem;color:inherit;text-decoration:none;font-weight:500;font-size:.95rem;white-space:nowrap}
.tl-list a:hover{background:var(--zk-hover,rgba(127,127,127,.14))}
.tl-list a[aria-current]{font-weight:700;color:var(--acc,var(--zk-accent,inherit))}
@media (max-width:560px){.tl summary{padding:.4rem .65rem}}
/* "Other brands in our guides" (block at the bottom of every page) */
.gv-xg{margin:2rem 0 0;padding:1.2rem 0 0;border-top:1px solid rgba(127,127,127,.35);font:400 .9rem/1.5 var(--sans,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif)}
.gv-xg h2{margin:0 0 .6rem;font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:inherit;opacity:.85}
.gv-xg ul{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:0;padding:0;list-style:none}
.gv-xg a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
/* ===== kop (24 Oct 2026): one header for every guide, loaded after the guide's own stylesheet =====
   Owner: the wordmark and "unofficial guide" overlapped the menu. Cause: on wide screens logo, wordmark, six links, search, language and shop button
   had to share one nowrap row; the box of the wordmark shrank and its text spilled over the links. Now: below 64em the guide's own phone header
   (logo, search, language, menu button); from 64em two rows that cannot collide, whatever the language: row 1 = logo and wordmark on the left,
   search, language and shop button on the right; row 2 = the menu links (they wrap, they never overlap).
   tools/check.py of every guide runs /opt/fg/gids-vertaal/kop_check.mjs (bounding boxes at 375, 768, 1024, 1280, 1440 and 1920 px, every language). */
header.top .top-row{flex-wrap:wrap}
header.top .brand{min-width:0;max-width:100%}
header.top .brand-text,header.top .brand-name,header.top .brand-tag{white-space:nowrap}
@media (min-width:64em){
header.top{position:relative;top:auto}
header.top .top-row{flex-wrap:wrap;align-items:center;gap:0 .75rem;padding-top:.7rem;padding-bottom:0}
header.top .top-row .brand{flex:0 0 auto;margin-right:auto;margin-bottom:.7rem}
header.top .top-row .zk-knop,header.top .top-row .tl,header.top .top-row .top-cta{margin-bottom:.7rem}
header.top .top-row .zk-knop{order:1;width:auto;justify-content:center;padding:.4rem .8rem}
header.top .top-row .zk-knop span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
header.top .top-row .tl{order:2}
header.top .top-row .top-cta{order:3;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
header.top .top-row .menu-btn{display:none}
header.top .top-row .nav,header.top .top-row .nav.is-open{order:9;flex:0 0 100%;width:100%;display:flex;flex-direction:row;flex-wrap:wrap;gap:0 1.75rem;padding:0;overflow:visible;-webkit-mask-image:none;mask-image:none;border-top:1px solid var(--line,rgba(127,127,127,.3))}
header.top .top-row .nav a,header.top .top-row .nav.is-open a{padding:.62rem 0;white-space:nowrap;font-size:.95rem}
}
@media (min-width:64em) and (max-width:89.99em){
header.top .top-row .zk-knop{width:2.75rem;padding:.4rem}
header.top .top-row .zk-knop span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
header.top .top-row .top-cta{padding-left:1rem;padding-right:1rem;font-size:.88rem}
}