/* D&D Tech — sitebrede extra's (geladen via site.js → assets/js/extra.js).
   1. WhatsApp-knop rechtsonder  2. Printopmaak (licht, zonder menu/effecten) */

/* ---------- 1. WhatsApp-knop ---------- */
.wa-knop{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:40;
  display:inline-flex;align-items:center;gap:.55em;padding:.75em 1.1em;border-radius:999px;
  background:#25d366;color:#04140a;font-weight:600;font-size:var(--fs-sm);
  box-shadow:0 6px 24px rgba(0,0,0,.45);transition:transform .2s var(--ease),box-shadow .2s}
.wa-knop:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(37,211,102,.35)}
.wa-knop svg{width:22px;height:22px;flex:none;fill:currentColor}
@media (max-width:600px){.wa-knop span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .wa-knop{padding:.8em}}
.nav-open .wa-knop{display:none}
/* Laatste inhoud valt op mobiel niet onder de knop (controle 16-10, DD-16) */
@media (max-width:600px){.heeft-wa .site-footer{padding-bottom:calc(70px + env(safe-area-inset-bottom))}}

/* ---------- 2. Print ---------- */
@media print{
  @page{margin:16mm 14mm}
  :root{--text:#111;--text-dim:#222;--text-mute:#555;--line:#ccc;--line-strong:#999;--surface:#fff;--cyan:#006d80}
  html,body{background:#fff!important;color:#111!important;font-size:11pt}
  body::before,.skip-link,.site-header,.site-nav,.nav-toggle,.wa-knop,.hero__canvas,.hero__vignette,.cta-row,.btn,.site-footer .grid,canvas,video,[data-print="nee"]{display:none!important}
  main{padding-top:0!important}
  .section,.page-hero{padding-block:10pt!important;background:none!important;border:0!important}
  .card,.kh-stat,.faq details,.note{background:none!important;border:1px solid #bbb!important;box-shadow:none!important;backdrop-filter:none!important;break-inside:avoid}
  .grad-text{background:none!important;color:#111!important;-webkit-text-fill-color:#111}
  .reveal{opacity:1!important;transform:none!important}
  h1{font-size:22pt} h2{font-size:16pt} h3{font-size:13pt}
  h1,h2,h3{break-after:avoid;color:#111}
  p,li,td{color:#222!important}
  a{color:#111!important;text-decoration:underline}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;word-break:break-all}
  .faq details{display:block}
  .faq details>*:not(summary){display:block!important}
  .site-footer{background:none!important;border-top:1px solid #bbb;padding:8pt 0 0}
  .site-footer__bottom{margin:0;border:0;color:#555}
  img{max-width:60%!important}
}

/* Links in lopende tekst niet alleen aan de kleur herkenbaar (WCAG 1.4.1) */
main p a:not(.btn), main li a:not(.btn), main dd a:not(.btn), main details a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* FOTO-2025:BEGIN */
.founders:has(.team-foto){grid-template-columns:1fr}
.team-foto{display:block;margin:0 auto;padding:var(--space-3);width:100%;max-width:260px;justify-self:center;align-self:center}
/* Vast vierkant kader: de foto kan in geen enkele browser (ook Safari) uitgerekt worden */
.team-foto__kader{position:relative;width:100%;height:0;padding-top:100%;overflow:hidden;border-radius:var(--radius-sm)}
.team-foto__kader img{position:absolute;top:0;left:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;object-position:50% 40%}
.team-foto figcaption{display:block;text-align:center;margin-top:var(--space-2)}
/* Tablet en opengeklapte vouwtelefoon: kaart | foto | kaart, kaarten even hoog en compact */
@media (min-width:700px){
  .founders:has(.team-foto){grid-template-columns:minmax(0,1fr) 200px minmax(0,1fr);align-items:stretch;gap:var(--space-4)}
  .team-foto{max-width:200px;padding:var(--space-2)}
  .founders:has(.team-foto) .founder{display:block;padding:var(--space-5)}
  .founders:has(.team-foto) .founder__avatar{float:left;width:52px;height:52px;font-size:1.3rem;margin:0 var(--space-3) var(--space-2) 0}
  .founders:has(.team-foto) .founder .role{margin-bottom:var(--space-3)}
  .founders:has(.team-foto) .founder p{clear:both}
}
@media (min-width:1100px){
  .founders:has(.team-foto){grid-template-columns:minmax(0,1fr) 240px minmax(0,1fr);gap:var(--space-5)}
  .team-foto{max-width:240px;padding:var(--space-3)}
  .founders:has(.team-foto) .founder{display:flex;padding:var(--space-6)}
  .founders:has(.team-foto) .founder__avatar{float:none;width:84px;height:84px;font-size:2rem;margin:0}
  .founders:has(.team-foto) .founder p{clear:none}
}
/* FOTO-2025:EINDE */