/* ============================================================
   footer.css — Het Portaal modern footer
   Ported from portaal-web Footer.tsx. Scope: body.hetportaal.
   Loads AFTER modern.css. Reuses modern.css tokens + navbar navy.
   Fonts inherited (Raleway / Source Sans Pro — NOT Inter).
   Classes namespaced .hp-foot* to avoid Bootstrap/parent .site-footer.
   ============================================================ */

body.hetportaal .hp-footer{
  background:var(--hp-nav-dark, #16314c);
  color:rgba(255,255,255,.7);
  padding:80px 0 32px;
  margin-top:var(--hp-space-8);
}
body.hetportaal .hp-footer .hp-foot-inner{
  max-width:var(--hp-container);
  margin:0 auto;
  padding:0 var(--hp-gutter);
}

/* ---- top grid ---- */
body.hetportaal .hp-foot-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:56px;
}
body.hetportaal .hp-foot-grid h4{
  color:#fff;
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  margin:0 0 22px;
}
body.hetportaal .hp-foot-grid ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:11px;
}
body.hetportaal .hp-foot-grid li a{
  font-size:14.5px;
  color:rgba(255,255,255,.7);
  text-decoration:none;
  transition:color .15s ease;
}
body.hetportaal .hp-foot-grid li a:hover{ color:#fff; text-decoration:none; }

/* ---- about column ---- */
/* logo PNG has an opaque white background (no alpha) — present it on a
   white rounded chip rather than filtering, so it stays legible on navy */
body.hetportaal .hp-foot-logo{
  display:inline-block;
  background:#fff;
  padding:12px 16px;
  border-radius:var(--hp-radius-md);
  margin-bottom:18px;
  line-height:0;
}
body.hetportaal .hp-foot-logo img{
  max-width:180px;
  height:auto;
  width:auto;
  display:block;
}
body.hetportaal .hp-foot-about p{
  font-size:14.5px;
  color:rgba(255,255,255,.6);
  margin:0 0 22px;
  line-height:1.55;
  max-width:320px;
}
body.hetportaal .hp-foot-contact{
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:14px;
}
body.hetportaal .hp-foot-contact a,
body.hetportaal .hp-foot-contact span{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:rgba(255,255,255,.7);
  text-decoration:none;
  transition:color .15s ease;
}
body.hetportaal .hp-foot-contact a:hover{ color:#fff; }
body.hetportaal .hp-foot-contact svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
  color:var(--hp-secondary, #bcd5f0);
}

/* ---- bottom bar ---- */
body.hetportaal .hp-foot-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  font-size:12.5px;
  color:rgba(255,255,255,.5);
}
body.hetportaal .hp-foot-socials{
  display:flex;
  gap:8px;
}
body.hetportaal .hp-foot-socials a{
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease;
}
body.hetportaal .hp-foot-socials a:hover{ background:rgba(255,255,255,.16); }
body.hetportaal .hp-foot-socials svg{
  width:15px;
  height:15px;
  color:#fff;
  fill:currentColor;
}
body.hetportaal .hp-foot-legal{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
}
body.hetportaal .hp-foot-legal a,
body.hetportaal .hp-foot-legal span{
  color:rgba(255,255,255,.5);
  text-decoration:none;
  transition:color .15s ease;
}
body.hetportaal .hp-foot-legal a:hover{ color:#fff; }

/* ---- responsive ---- */
@media (max-width:980px){
  body.hetportaal .hp-foot-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  body.hetportaal .hp-footer{ padding-top:56px; }
}
@media (max-width:600px){
  body.hetportaal .hp-foot-grid{ grid-template-columns:1fr; gap:28px; }
  body.hetportaal .hp-foot-about p{ max-width:none; }
  body.hetportaal .hp-foot-bottom{ flex-direction:column; align-items:flex-start; }
}