/* Gedeelde site-onderdelen: header, mobiel menu, WhatsApp-knop, social-blok, footer.
   Bron: _dev/design/SiteHeader.dc.html, SiteSocial.dc.html, SiteFooter.dc.html. */

:root{--idm-header-h:122px} /* topbar 44 + menubalk 78 */
main.has-header-offset{padding-top:var(--idm-header-h)}

/* ---------- Header ---------- */
.sh-head{position:fixed;top:0;left:0;right:0;z-index:60;color:var(--idm-navy);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sh-head.is-scrolled{transform:translateY(-44px)}
.sh-head.is-hidden{transform:translateY(-100%)}
.admin-bar .sh-head{top:32px}
.sh-wrap{max-width:var(--idm-max);margin:0 auto;padding:0 var(--idm-gutter)}

.sh-top{background:#ECEFF3;height:44px}
.sh-top-in{height:100%;display:flex;align-items:stretch;justify-content:space-between;gap:16px}
.sh-top a{color:var(--idm-navy);text-decoration:none}
.sh-top a:hover{color:var(--idm-red)}
.sh-sw{display:flex;align-items:flex-end;gap:2px;font-size:14px}
.sh-sw a{height:36px;display:flex;align-items:center;padding:0 16px;border-radius:6px 6px 0 0;background:var(--idm-white);font-weight:600;transition:background .3s,color .3s}
.sh-sw a.off{background:transparent;font-weight:500}
.sh-sw a.off:hover{background:rgba(255,255,255,.6);color:var(--idm-navy)}
.sh-funda{align-self:center;display:flex;align-items:center;gap:10px;font-size:13px}
.sh-funda img{display:block;width:50px;height:18px}
.sh-stars{display:flex;gap:2px;color:#F5B301}
.sh-contact{align-self:center;display:flex;gap:22px;font-size:13px}
.sh-contact a{display:inline-flex;align-items:center;gap:7px}

.sh-bar{background:var(--idm-white);border-bottom:1px solid #E6EBF1;transition:box-shadow .4s}
.sh-head.is-scrolled .sh-bar{box-shadow:0 10px 30px -22px rgba(12,39,76,.45)}
.sh-nav{padding-top:16px;padding-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.sh-logo{display:flex}
.sh-logo img{display:block;width:160px;height:46px}
.sh-links{display:flex;gap:32px;align-items:center;margin:0;padding:0;list-style:none}
.sh-link{text-decoration:none;font-weight:500;font-size:16px;color:var(--idm-navy);position:relative}
.sh-link:hover{color:var(--idm-navy)}
.sh-link.on{color:var(--idm-red)}
.sh-link::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--idm-red);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sh-link:hover::after,.sh-link.on::after{transform:scaleX(1)}
.sh-actions{display:flex;gap:14px;align-items:center}
.sh-funda-logo{display:flex}
.sh-funda-logo img{display:block;width:84px;height:30px}
.sh-btn{padding:13px 22px;gap:10px;font-size:15px}
.sh-burger{width:48px;height:48px;border-radius:50%;border:1.5px solid #D5DCE6;background:var(--idm-white);color:var(--idm-navy);align-items:center;justify-content:center;cursor:pointer;padding:0}
.sh-burger span{display:flex}
.sh-burger .sh-ic-close,.sh-burger[aria-expanded="true"] .sh-ic-open{display:none}
.sh-burger[aria-expanded="true"] .sh-ic-close{display:flex}

/* Mobiel menu */
.sh-mnav{position:fixed;inset:0;z-index:55;background:var(--idm-navy);visibility:hidden;clip-path:circle(0% at calc(100% - 44px) 88px);display:flex;flex-direction:column;justify-content:center;gap:16px;padding:120px 28px 48px;transition:clip-path .7s cubic-bezier(.65,0,.35,1),visibility 0s .7s}
.sh-mnav.open{visibility:visible;clip-path:circle(150% at calc(100% - 44px) 88px);transition:clip-path .7s cubic-bezier(.65,0,.35,1)}
.sh-mlinks{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
.sh-m{color:var(--idm-white);text-decoration:none;font-size:38px;font-weight:500;letter-spacing:-.02em}
.sh-m:hover,.sh-m.on{color:#FF8A84}
.sh-mcontact{margin-top:24px;display:flex;gap:22px;flex-wrap:wrap;font-size:18px}
.sh-mcontact a{color:#C9D3E0;text-decoration:none}
.sh-mcontact a:hover{color:var(--idm-white)}
html.menu-open{overflow:hidden}

.sh-show-sm{display:none!important}

/* WhatsApp-knop */
.sh-wa{position:fixed;right:24px;bottom:24px;z-index:51;width:62px;height:62px;border-radius:50%;background:var(--idm-navy);color:var(--idm-white);display:flex;align-items:center;justify-content:center;box-shadow:0 16px 34px -12px rgba(12,39,76,.6);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sh-wa:hover{color:var(--idm-white);transform:translateY(-3px)}
.sh-wa-badge{position:absolute;top:-2px;right:-2px;width:20px;height:20px;border-radius:50%;background:var(--idm-red);color:var(--idm-white);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--idm-white)}

@media (max-width:900px){
  .sh-hide-sm{display:none!important}
  .sh-show-sm{display:flex!important}
  .sh-wa{width:54px;height:54px;right:14px;bottom:14px}
}
@media (max-width:782px){.admin-bar .sh-head{top:46px}}
/* Tussenbreedtes (tablet/kleine laptop): menubalk past niet meer naast logo + knoppen */
.sh-link{white-space:nowrap}
@media (max-width:1240px){.sh-funda-logo{display:none!important}.sh-links{gap:24px}}
@media (max-width:1100px){.sh-nav .sh-hide-sm{display:none!important}.sh-nav .sh-burger.sh-show-sm{display:flex!important}}

/* ---------- Social ---------- */
.so{background:var(--idm-white);padding:104px 0}
.so-head{max-width:var(--idm-max);margin:0 auto 40px;padding:0 var(--idm-gutter);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.so-id{display:flex;gap:18px;align-items:center}
.so-ring{width:64px;height:64px;border-radius:50%;padding:3px;background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7);display:flex;flex:0 0 auto}
.so-ring span{flex:1;border-radius:50%;background:var(--idm-white);display:flex;align-items:center;justify-content:center;border:2px solid var(--idm-white)}
.so-ring img{width:42px;height:auto}
.so-eyebrow{margin:0 0 6px;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--idm-red)}
.so-h{margin:0;font-size:clamp(28px,3vw,42px);line-height:1.1;letter-spacing:-.02em;font-weight:500;color:var(--idm-navy)}
.so-btns{display:flex;gap:10px;flex-wrap:wrap}
.so-follow{text-decoration:none;height:50px;padding:0 22px;border-radius:var(--idm-pill);background:var(--idm-navy);color:var(--idm-white);font-weight:500;font-size:15px;display:inline-flex;align-items:center;gap:10px;transition:box-shadow .3s}
.so-follow:hover{color:var(--idm-white);box-shadow:0 14px 30px -12px rgba(12,39,76,.55)}
.so-follow--light,.so-follow--light:hover{background:var(--idm-soft);color:var(--idm-navy)}
.so-mq{overflow:hidden}
.so-track{display:flex;gap:16px;width:max-content;padding-right:16px;animation:so-mq 70s linear infinite}
.so-mq:hover .so-track,.so-mq:focus-within .so-track{animation-play-state:paused}
@keyframes so-mq{to{transform:translateX(-50%)}}
.so-post{position:relative;display:block;flex:0 0 auto;width:clamp(300px,30vw,520px);aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:#D3DAE3}
.so-post img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.so-ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,39,76,.85),rgba(12,39,76,0) 55%);color:var(--idm-white);display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:26px;opacity:0;transition:opacity .35s;font-size:17px;line-height:1.45;font-weight:500}
.so-post:hover img{transform:scale(1.07)}
.so-post:hover .so-ov,.so-post:focus-visible .so-ov{opacity:1}
@media (max-width:900px){
  .so{padding:64px 0}
  .so-track{gap:12px;padding-right:12px;animation-duration:55s}
  .so-post{width:72vw;border-radius:20px}
  .so-ov{opacity:1;font-size:15px;padding:18px}
}
@media (prefers-reduced-motion:reduce){.so-track{animation:none}}

/* ---------- Footer ---------- */
.sf{background:var(--idm-navy);color:var(--idm-white);padding:96px 0 36px}
.sf a{color:#C9D3E0;text-decoration:none}
.sf a:hover{color:var(--idm-white)}
.sf-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-bottom:64px;border-bottom:1px solid #23406B}
.sf-h{margin:0;font-size:clamp(44px,6vw,96px);line-height:1;letter-spacing:-.03em;font-weight:500}
.sf-h span{color:var(--idm-red)}
.sf .sf-btn{padding:20px 32px;border-radius:var(--idm-pill);background:var(--idm-red);color:var(--idm-white);font-weight:500;font-size:18px;transition:box-shadow .3s}
.sf .sf-btn:hover{color:var(--idm-white);box-shadow:0 14px 30px -12px rgba(0,0,0,.55)}
.sf-cols{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px}
.sf-logo img{display:block;width:168px;height:48px}
.sf-logo p{margin:22px 0 0;font-size:16px;line-height:1.6;color:#C9D3E0}
.sf-title{margin:0 0 16px;font-size:18px;font-weight:500}
.sf-acc{all:unset;display:flex;width:100%;justify-content:space-between;align-items:center;font-size:18px;font-weight:500;color:var(--idm-white);cursor:default;box-sizing:border-box}
.sf-acc:focus-visible{outline:2px solid var(--idm-white);outline-offset:4px}
.sf-pl{display:none}
.sf-c{display:grid;grid-template-rows:1fr}
.sf-c>div{overflow:hidden}
.sf-list{margin:0;padding:0;list-style:none;font-size:16px;line-height:1.9}
.sf-bottom{margin-top:64px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:#A9B8CC}
@media (max-width:900px){
  .sf{padding-top:64px}
  .sf-h{font-size:44px}
  .sf-cols{display:flex;flex-direction:column;gap:0;margin-top:40px}
  .sf-logo{margin-bottom:28px}
  .sf-col{border-top:1px solid #23406B}
  .sf-col:last-child{border-bottom:1px solid #23406B}
  .sf-title{margin:0}
  .sf-acc{cursor:pointer;padding:20px 0}
  .sf-pl{display:flex;width:32px;height:32px;border-radius:50%;background:#16345E;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .sf-acc[aria-expanded="true"] .sf-pl{transform:rotate(45deg)}
  .sf-c{grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
  .sf-c.is-open{grid-template-rows:1fr}
  .sf-list{padding-bottom:18px}
  .sf-bottom{flex-direction:column;margin-top:40px}
}

/* ---------- Gedeeld: statuslabel en pijlknop op woningkaarten ---------- */
.ab-badge{position:absolute;top:14px;left:14px;font-size:13px;font-weight:600;padding:7px 13px;border-radius:var(--idm-pill)}
.ab-badge--red{background:var(--idm-red);color:var(--idm-white)}
.ab-badge--white{background:var(--idm-white);color:var(--idm-navy)}
.ab-badge--navy{background:var(--idm-navy);color:var(--idm-white)}
.ab-go{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--idm-soft);display:flex;align-items:center;justify-content:center}

/* ---------- Kruimelpad ---------- */
.crumb{display:flex;gap:8px;align-items:center;font-size:15px;flex-wrap:wrap}
.crumb a{color:var(--idm-navy);text-decoration:none}
.crumb a:hover{color:var(--idm-red)}
.crumb .crumb-home{display:inline-flex}
.crumb [aria-current]{color:var(--idm-navy);font-weight:500}