/* Digitale Didactiek.com — Robert Mol */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,700&display=swap');

:root{
  --green:#143D2F;
  --cream:#FFF9EE;
  --ink:#0C0C0D;
  --link:#0066CC;
  --accent:#C4552E;
  --line:#E2DCCF;
  --maxw:1240px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--cream);
  font-size:16px;
  line-height:1.55;
}
img{max-width:100%;display:block}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.site-header{background:#fff}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{width:30px;height:35px;object-fit:contain}
.brand-name{font-size:18px;font-weight:700;line-height:1.2}
.brand-sub{font-size:12px;font-weight:400;line-height:1.2}

.nav-toggle{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  font-size:24px;line-height:1;color:var(--ink);padding:6px 8px;
}
.site-nav{margin-left:auto}
.site-nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0}
.site-nav a{color:var(--ink);font-size:16px;font-weight:400;text-decoration:none}
.site-nav a:hover{color:var(--accent);text-decoration:none}
.site-nav a.active{color:var(--accent)}

/* ---------- green band ---------- */
.band{background:var(--green)}
.band p{
  max-width:var(--maxw);margin:0 auto;padding:10px 24px;
  color:#fff;font-size:15px;font-weight:700;text-align:center;
}

/* ---------- main ---------- */
main{background:var(--cream);padding:26px 0 56px}
.page{max-width:var(--maxw);margin:0 auto;padding:0 24px}

h1{font-size:30px;font-weight:700;margin:12px 0 22px}
h2{font-size:20px;font-weight:700;margin:26px 0 12px}
p{margin:0 0 14px}

/* ---------- home grid ---------- */
.home{display:grid;grid-template-columns:335px 1fr;gap:30px;align-items:start}
.col-head{font-size:18px;font-weight:700;margin:0 0 14px;line-height:1.35}

.book img{border-radius:2px;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.book a:hover img{opacity:.93}

.home-right{display:flex;flex-direction:column}
.home-top{display:grid;grid-template-columns:258px 312px 1fr;gap:24px;align-items:start}

.tile{display:block;margin-bottom:14px;border-radius:8px;overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease}
.tile:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.13)}
.tile img{width:100%;height:auto}
.tile.keynote img{max-width:289px}

.profile{text-align:center}
.profile img.photo{width:100%;max-width:159px;margin:0 auto 10px;border-radius:2px}
.profile .name{font-size:18px;font-weight:700;margin:0}
.profile .role{font-size:17px;font-weight:400;margin:0 0 6px;line-height:1.3}
.profile .ask{font-size:18px;font-weight:700;text-decoration:underline}

.linkedin-block{margin-top:18px;text-align:center}
.linkedin-block p{font-size:17px;font-weight:700;margin:0 0 6px}
.linkedin-block img{width:217px;max-width:100%;margin:0 auto}

/* ---------- apps ---------- */
.apps-section{margin-top:26px;text-align:center}
.apps-section .apps-head{font-size:18px;font-weight:700;margin:0 0 16px}
.apps{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:20px}
.apps a{
  display:block;width:90px;border-radius:8px;overflow:hidden;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.10);transition:transform .15s ease, box-shadow .15s ease
}
.apps a:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.16)}
.apps img{width:100%;height:auto}
.mail-cta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.mail-cta p{font-size:18px;font-weight:700;margin:0}
.mail-cta img{width:44px;height:44px}
.apps-note{max-width:760px;margin:18px auto 0;font-size:15px}

/* ---------- content pages ---------- */
@media (min-width:981px){.page.sub{padding-left:60px}}
.content{max-width:860px}
.content p{font-size:16px}
.content ul{margin:0 0 16px;padding-left:22px}
.content li{margin-bottom:6px}
.content ul.list-plain{list-style:none;padding-left:0}
.list-plain li{margin-bottom:4px}
.cv-block{margin:0 0 18px}
.cv-block .cv-head{font-weight:700;margin:0 0 4px}
.cv-block ul{list-style:none;padding-left:26px;margin:0}
.cv-block li{margin-bottom:3px}
.cv-note{padding-left:26px;font-size:14px;color:#4a4a4a;margin:-2px 0 8px}

.with-aside{display:grid;grid-template-columns:1fr 208px;gap:44px;align-items:start}
.aside-photo img{width:100%;border-radius:2px}
.aside-photo a{display:block;margin-top:14px}
.aside-photo .caption{font-size:12px;text-align:center;margin:8px 0 10px;color:#4a4a4a}

.keynote-group{margin-bottom:22px}
.keynote-group h2{margin:0 0 8px;font-size:18px;color:var(--green)}
.keynote-group ol{margin:0;padding-left:22px}
.keynote-group li{margin-bottom:6px}

.booking-links{margin-top:28px;font-size:16px}
.booking-links .sep{color:#9a9a9a;padding:0 6px}

.card-img{margin:26px 0 10px;max-width:860px}
.card-img img{width:100%;border:1px solid var(--line);border-radius:4px}

.kvk{font-size:13px;color:#5a5a5a;margin-top:26px}

/* ---------- footer ---------- */
.site-footer{background:#fff;padding:22px 0}
.footer-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.site-footer .copy{font-size:14px}
.site-footer .mini{font-size:11px;color:#bdbdbd}
.site-footer .mini:hover{color:#8a8a8a;text-decoration:none}
.site-footer .mini-img{width:13px;height:12px;opacity:.35}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .home{grid-template-columns:1fr}
  .home-top{grid-template-columns:1fr 1fr}
  .profile{grid-column:1 / -1}
  .profile img.photo{max-width:180px}
  .book{max-width:335px;margin:0 auto}
  .with-aside{grid-template-columns:1fr}
  .aside-photo{max-width:240px}
}
@media (max-width:640px){
  .nav-toggle{display:block}
  .site-nav{
    flex-basis:100%;margin-left:0;display:none;order:3;
    border-top:1px solid var(--line);margin-top:12px;padding-top:12px
  }
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;gap:12px}
  .home-top{grid-template-columns:1fr}
  .band p{font-size:13px;text-align:left}
  h1{font-size:24px}
  .apps a{width:78px}
}