/* The menu of the caseflows.eu home and early-access pages, in the look of the site menu (siteNavigation), so a
   visitor sees one menu on every page. The markup is generated from site.json by tools/home-menu.js. */
.cfm{gap:14px}
.cfm-nav{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.cfm-l{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:0;border-radius:12px;background:none;color:var(--ink);font:inherit;font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer}
.cfm-l:hover,.cfm-l[aria-current]{background:rgba(33,29,24,.07)}
.cfm-l:focus-visible,.cfm-dd-menu a:focus-visible{outline:2px solid var(--rust);outline-offset:2px}
.cfm-pijl{font-size:10px;line-height:1}
.cfm-dd{position:relative}
.cfm-dd-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:250px;padding:6px;background:var(--card);border:1.5px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);z-index:60}
/* A bridge over the gap between button and menu, so moving the pointer down does not close it. */
.cfm-dd-menu::before{content:'';position:absolute;left:0;right:0;top:-8px;height:8px}
.cfm-dd:hover .cfm-dd-menu,.cfm-dd:focus-within .cfm-dd-menu,.cfm-dd-btn[aria-expanded="true"]+.cfm-dd-menu{display:block}
.cfm-dd-menu a{display:block;padding:9px 12px;border-radius:10px;color:var(--ink);font-size:15px;text-decoration:none;white-space:nowrap}
.cfm-dd-menu a:hover,.cfm-dd-menu a[aria-current]{background:rgba(33,29,24,.07)}
.cfm .btn{min-height:40px;padding:0 18px;font-size:15px;white-space:nowrap;text-decoration:none}
/* The language switcher, here too so a hand-made page that links menu.css needs nothing of its own. */
.cfm .lang{display:flex;align-items:center;gap:2px;font-size:14px;font-weight:500}
.cfm .lang a{color:var(--muted);text-decoration:none;padding:4px 7px;border-radius:999px}
.cfm .lang a:hover{color:var(--ink)}
.cfm .lang a[aria-current]{color:var(--ink);font-weight:600;border:1.5px solid var(--ink)}
.cfm-fbtn{color:var(--muted)}
/* Below 1100px the menu items fold behind the menu button; opened, they drop down as a list under the header
   with the dropdowns written out, since a phone has no hover. */
.cfm-mbtn{display:none;order:1;margin-left:auto;border:1.5px solid var(--ink)}
@media (max-width:1100px){
  .cfm-mbtn{display:inline-flex}
  .cfm-nav{order:2}
  .cfm-nav .cfm-l:not(.cfm-fbtn),.cfm-dd{display:none}
  .cfm.cfm-open{flex-wrap:wrap}
  .cfm-open .cfm-nav{width:100%;flex-wrap:wrap}
  .cfm-open .cfm-nav>.cfm-l:not(.cfm-fbtn),.cfm-open .cfm-dd{display:block;order:5;flex-basis:100%;text-align:left}
  .cfm-open .cfm-nav>.cfm-l:not(.cfm-fbtn):first-child{margin-top:10px}
  .cfm-open .cfm-nav .cfm-dd-btn{display:flex;margin-top:6px;pointer-events:none;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.04em;padding-bottom:2px}
  .cfm-open .cfm-dd-btn .cfm-pijl{display:none}
  .cfm-open .cfm-dd-menu{display:block;position:static;min-width:0;padding:0 0 6px;background:none;border:0;box-shadow:none}
  .cfm-open .cfm-dd-menu::before{display:none}
  .cfm-open .cfm-dd-menu a{white-space:normal}
}
/* The menu is as wide as the site menu; below 1500px the feedback button keeps only its icon (its text stays as title and label). */
@media (max-width:1500px){.cfm-fbtn .cfm-fbtekst{display:none}}

/* The feedback window: the same route as the site's feedback button (/public/site-feedback). */
.cfm-fb{width:calc(100% - 32px);max-width:520px;padding:24px;border:1.5px solid var(--ink);border-radius:16px;background:var(--card);color:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.cfm-fb::backdrop{background:rgba(33,29,24,.45)}
.cfm-fb h2{margin:0;font-family:'Fraunces',Georgia,serif;font-size:26px;font-weight:500}
.cfm-fb p{margin:8px 0 0;font-size:15px;color:var(--muted)}
.cfm-fb textarea,.cfm-fb input[type=email]{display:block;width:100%;margin-top:12px;padding:10px 12px;border:1.5px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:15px;box-sizing:border-box}
.cfm-fb textarea{min-height:120px;resize:vertical}
.cfm-fb label{display:block;margin-top:14px;font-size:14px;font-weight:600}
.cfm-fb label span{display:block;font-weight:400;color:var(--muted)}
.cfm-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cfm-fb-acties{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.cfm-fb-acties .cfm-l{border:1.5px solid var(--ink)}
.cfm-fb-uitslag{font-weight:500}
/* On a phone the logo gets its own row and the menu (button, language, feedback) the row below it, so the page stays as wide as the screen. */
/* On a phone the feedback button goes: a bare question mark there did not read as feedback (Ton, 05-11-2026). */
@media (max-width:640px){.cfm-nav .cfm-fbtn{display:none}.cfm{flex-wrap:wrap}.cfm-nav{width:100%;justify-content:space-between;gap:8px}.cfm .btn{padding:0 14px}}