/* Opnameformulieren, nieuwe opzet (Berber, 5 nov 2026). Bouwt voort op css/style.css:
   project-hero, block, block-head, intake-layout, timeline, help-grid, cta-band en faq-item.
   style.css staat in de bouw binnen .tn-project (.tn-project .help-grid enz.), dus selectors hier\n   beginnen met body .tn-project om die te overschrijven. */

/* ---------- formulierpagina: kaart met het Zoho-formulier ---------- */
body .tn-project .of-layout{grid-template-columns:300px minmax(0,1fr);}
body .tn-project .of-formkaart{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(28,35,56,.08);
  overflow:hidden;
}
body .tn-project .of-formkop{
  background:var(--navy);
  color:var(--white);
  padding:20px 28px;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 18px;
}
body .tn-project .of-formkop h2{color:var(--white); font-size:20px; line-height:1.3; margin:0;}
body .tn-project .of-formkop span{font-size:13.5px; color:rgba(255,255,255,.75);}
body .tn-project .of-formkop a{color:var(--white); text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:3px;}
body .tn-project .of-formkop a:hover{color:var(--orange);}
body .tn-project .of-formvak{padding:8px 12px 12px; min-height:640px;}
body .tn-project .of-formvak iframe{display:block; width:100%; border:0;}
body .tn-project .of-formvoet{
  border-top:1px solid var(--line);
  background:var(--bg-soft);
  padding:16px 28px;
  font-size:14px; color:var(--ink-soft); line-height:1.6;
}
body .tn-project .of-formvoet p{margin:0;}
body .tn-project .of-formvoet p + p{margin-top:8px;}
body .tn-project .of-formvoet strong{color:var(--ink);}
body .tn-project .of-formvoet a{color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:3px;}

/* ---------- "leg dit klaar" ---------- */
body .tn-project .of-klaar{
  background:var(--bg-soft);
  border-radius:var(--radius);
  padding:24px 24px 20px;
  margin-bottom:34px;
}
body .tn-project .of-klaar h2{font-size:18px; line-height:1.3; margin:6px 0 14px;}
/* "Leg dit klaar" is een uitklapblok; op desktop staat het altijd open en is de kop geen knop */
body .tn-project .of-klaar summary{list-style:none; display:block; pointer-events:none;}
body .tn-project .of-klaar summary::-webkit-details-marker{display:none;}
body .tn-project .of-klaar-tik{display:none;}
body .tn-project .of-vink{list-style:none; margin:0; padding:0;}
body .tn-project .of-vink li{
  position:relative;
  padding:0 0 12px 30px;
  font-size:14px; line-height:1.55; color:var(--ink);
}
body .tn-project .of-vink li:last-child{padding-bottom:0;}
body .tn-project .of-vink li::before{
  content:"";
  position:absolute; left:0; top:2px;
  width:20px; height:20px; border-radius:50%;
  background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
}
body .tn-project .of-vink li .of-uitleg{display:block; color:var(--ink-soft); font-size:13.5px;}
body .tn-project .of-vink a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:3px;}
body .tn-project .of-vink a:hover{color:var(--orange);}
/* de tijdlijn mag hier niet zelf plakken: de hele linkerkolom plakt */
body .tn-project .of-layout .timeline{position:static;}
body .tn-project .of-zij{position:sticky; top:calc(var(--kop-hoogte, 0px) + 28px); align-self:start;}

/* ---------- keuzepagina: drie routes ---------- */
body .tn-project .of-routes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;}
body .tn-project .of-route{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 28px 26px;
}
body .tn-project .of-route.is-uitgelicht{border:2px solid var(--orange); box-shadow:0 10px 30px rgba(242,141,45,.14);}
body .tn-project .of-route-label{
  align-self:flex-start;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange); margin-bottom:10px;
}
body .tn-project .of-route h3{font-size:21px; line-height:1.25; margin:0 0 12px;}
body .tn-project .of-route > p{font-size:15px; color:var(--ink-soft); line-height:1.65; margin:0 0 16px;}
body .tn-project .of-route .of-vink{margin-bottom:22px;}
body .tn-project .of-route .of-vink li{font-size:14.5px;}
body .tn-project .of-route-acties{margin-top:auto; display:flex; flex-direction:column; gap:10px; align-items:flex-start;}
body .tn-project .of-route-acties .btn{font-size:14.5px; padding:12px 22px;}
body .tn-project .of-route-acties .of-sub{font-size:13.5px; color:var(--ink-soft);}
body .tn-project .of-route-acties .of-sub a{color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:3px;}

/* ---------- keuzepagina: wat je nodig hebt ---------- */
body .tn-project .of-nodig{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 28px;}
body .tn-project .of-nodig-item{
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:0 16px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px;
}
body .tn-project .of-nodig-item .num{
  width:44px; height:44px; border-radius:50%;
  background:var(--navy); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px;
}
body .tn-project .of-nodig-item h3{font-size:17px; line-height:1.3; margin:2px 0 8px;}
body .tn-project .of-nodig-item p{font-size:14.5px; color:var(--ink-soft); line-height:1.65; margin:0;}
body .tn-project .of-nodig-item a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:3px;}
body .tn-project .of-nodig-item a:hover{color:var(--orange);}

/* ---------- hulpband met drie kaarten ---------- */
body .tn-project .of-help{grid-template-columns:repeat(3,minmax(0,1fr));}
body .tn-project .of-help .help-card{display:flex; flex-direction:column;}
body .tn-project .of-help .help-card .btn{margin-top:auto; align-self:flex-start;}

body .tn-project .of-faq{max-width:860px;}

@media (max-width:1100px){
  body .tn-project .of-routes{grid-template-columns:1fr;}
  body .tn-project .of-help{grid-template-columns:1fr;}
}
@media (max-width:900px){
  body .tn-project .of-layout{grid-template-columns:1fr;}
  /* op mobiel staat "Leg dit klaar" ingeklapt boven het formulier */
  body .tn-project .of-zij{position:static;}
  body .tn-project .of-klaar{margin-bottom:20px; padding:16px 20px;}
  body .tn-project .of-klaar summary{pointer-events:auto; cursor:pointer; position:relative; padding-right:36px;}
  body .tn-project .of-klaar summary::after{
    content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
    width:28px; height:28px; border-radius:50%; background:var(--orange); color:var(--white);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; line-height:1;
  }
  body .tn-project .of-klaar[open] summary::after{content:"\2212";}
  body .tn-project .of-klaar h2{margin:4px 0 2px;}
  body .tn-project .of-klaar-tik{display:block; font-size:13.5px; color:var(--ink-soft);}
  body .tn-project .of-klaar[open] summary{margin-bottom:14px;}
  body .tn-project .of-nodig{grid-template-columns:1fr;}
  body .tn-project .of-formkop{padding:18px 20px;}
  body .tn-project .of-formvak{padding:4px 4px 8px;}
  body .tn-project .of-formvoet{padding:14px 20px;}
}