/* Gedeelde footer — exact de opmaak van de homepage.
   Variabelen hebben een terugvalwaarde zodat elke pagina gelijk oogt. */
/* ── GOOGLE REVIEW BANNER ── */

.grb-text strong { font-weight: 700; }
/* ── FOOTER REDESIGN ── */

/* ── CONTACT POPUP ── */

.contact-popup.open {
  opacity: 1; pointer-events: all; transform: translateY(0);
}
.contact-popup-item:last-child { border-bottom: none; }
.contact-popup-item:hover { color: var(--c-red, #E8294A); }
/* Top section: left info + right nav columns */

/* Nav columns */

.footer-nav-link:hover { color: #0F0E0C; }
/* Bottom bar */

.footer-wordmark span {
  background: linear-gradient(90deg, #E8294A, #FF6B9D, #A855F7, #3B82F6, #06B6D4, #E8294A);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowShift 4s linear infinite;
}
/* ALL footer bottom items same size and color */
.footer-link, 
.footer-link:hover, .footer-contact-btn:hover { color: #0F0E0C; }
/* Contact button inline flex for arrow */

.footer-contact-btn:hover 

/* ══ FOOTER ══════════════════════════════════════════════════════════ */

/* Row 1: social + GRB + address stacked on left, nav cols on right */

/* Nav columns — mobile: wrap, no overflow */

.footer-nav-link:hover { color: #0F0E0C; }
/* Bottom bar */

.footer-wordmark span {
  background: linear-gradient(90deg,#E8294A,#FF6B9D,#A855F7,#3B82F6,#06B6D4,#E8294A);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowShift 4s linear infinite;
}
.footer-link, 
.footer-link:hover, .footer-contact-btn:hover { color: #0F0E0C; }
.footer-contact-btn:hover 

/* Contact popup — fixed bottom-right, hidden by default */

.contact-popup.open {
  opacity: 1; pointer-events: all; transform: translateY(0);
}
.contact-popup-item:last-child { border-bottom: none; }
.contact-popup-item:hover { color: #E8294A; }
/* ══ BENTO FOOTER ════════════════════════════════════════════════════ */
.footer {
  padding: 20px 16px 0;
  background: #fff;
  border-top: 1px solid #E8E6E1;
}
/* Bento grid: two tiles side by side on mobile */
.footer-bento{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px;padding-bottom:80px;}
/* Tile: brand info */
.footer-tile{background:#F9F8F6;border-radius:12px;padding:14px 14px 12px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.footer-tile-brand{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;}
.footer-brand-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-social-row{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;}
.google-review-banner {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  border-radius: 100px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  text-decoration: none; color: #0F0E0C;
  font-size: 10px; font-weight: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  white-space: nowrap;
}
.grb-stars { color: #F4B400; font-size: 9px; }
.footer-address{font-size:10px;color:#9B9790;line-height:1.6;text-align:center;}
/* Tile: nav links */
.footer-tile-nav{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;}
.footer-nav-head{font-family:var(--ff-mono, 'JetBrains Mono', monospace);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0F0E0C;margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid var(--c-rule, #E8E6E1);text-align:left;width:100%;}
.footer-nav-link {
  font-size: 11px; color: #4A4840;
  text-decoration: none; line-height: 1.4;
  transition: color .12s;
}
.footer-nav-link:hover { color: #0F0E0C; }
/* Bottom strip */
.footer-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #E8E6E1;
  padding: 10px 0 84px;
  gap: 8px;
  flex-wrap: wrap;
}
.footer-wordmark {
  font-family: var(--ff-disp, 'Bricolage Grotesque', 'Inter', system-ui, sans-serif);
  font-size: 13px; font-weight: 800;
  letter-spacing: -.3px; color: #0F0E0C;
  white-space: nowrap;
}
.footer-wordmark span {
  background: linear-gradient(90deg,#E8294A,#FF6B9D,#A855F7,#3B82F6,#06B6D4,#E8294A);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowShift 4s linear infinite;
}
.footer-legal{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;}
.footer-link, .footer-contact-btn {
  font-family: var(--ff-body, 'DM Sans', system-ui, sans-serif);
  font-size: 10px; color: #9B9790;
  text-decoration: none;
  background: none; border: none; cursor: pointer; padding: 0;
  transition: color .12s; white-space: nowrap;
}
.footer-link:hover, .footer-contact-btn:hover { color: #0F0E0C; }
.footer-contact-btn {
  display: inline-flex; align-items: center; gap: 3px;
}
.footer-contact-arr {
  opacity: 0; transition: opacity .15s, transform .15s;
}
.footer-contact-btn:hover .footer-contact-arr { opacity:1; transform:translateX(2px); }
/* Contact popup */
.contact-popup {
  position: fixed; bottom: 72px; right: 16px;
  z-index: 9100;
  opacity: 0; pointer-events: none;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s;
}
.contact-popup.open { opacity: 1; pointer-events: all; transform: translateY(0); }
.contact-popup-inner {
  background: #fff; border: 1px solid #E8E6E1;
  border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12); min-width: 200px;
}
.contact-popup-label {
  font-family: var(--ff-mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #9B9790; margin-bottom: 10px;
}
.contact-popup-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 0; color: #0F0E0C;
  text-decoration: none; font-size: 13px; font-weight: 500;
  border-bottom: 1px solid #E8E6E1; transition: color .12s;
}
.contact-popup-item:last-child { border-bottom: none; }
.contact-popup-item:hover { color: #E8294A; }
/* Force cases spacing */

/* Footer bottom tile */
.footer-tile-bottom{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 14px;}
.footer-legal{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;}
/* Add bottom padding to clear sticky bar */
.footer-bento{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px;padding-bottom:80px;}
.footer-address .footer-hours-link{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);transition:border-color .15s,color .15s;}
.footer-address .footer-hours-link:hover{border-color:currentColor;}

/* Aanvullend uit de homepage: iconen en merkregel */
.social-icon {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid #E8E6E1;
  border-radius: 50%; background: #fff;
}
.social-icon svg { width: 13px; height: 13px; }
.footer-brand-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-wordmark span {
  background: linear-gradient(90deg, #E8294A, #FF6B9D, #A855F7, #3B82F6, #06B6D4, #E8294A);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowShift 4s linear infinite;
}
.footer-wordmark span {
  background: linear-gradient(90deg,#E8294A,#FF6B9D,#A855F7,#3B82F6,#06B6D4,#E8294A);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowShift 4s linear infinite;
}
.footer-wordmark {
  font-family: var(--ff-disp, 'Bricolage Grotesque', 'Inter', system-ui, sans-serif);
  font-size: 13px; font-weight: 800;
  letter-spacing: -.3px; color: #0F0E0C;
  white-space: nowrap;
}

/* Footer staat los van pagina-CSS zodat hij overal identiek oogt. */
footer.footer{padding:20px 16px 0;background:#fff;border-top:1px solid #E8E6E1;
  max-width:none;margin:0;box-sizing:border-box;}
footer .footer-bento{max-width:720px;margin-left:auto;margin-right:auto;}
footer .social-icon{width:28px;height:28px;flex:none;}
footer .social-icon svg{width:13px;height:13px;}
footer .footer-nav-head{color:#0F0E0C;}
footer .footer-nav-link{color:#4A4840;}
footer .footer-nav-link:hover{color:#0F0E0C;}
footer .footer-link,footer .footer-contact-btn{color:#9B9790;}
footer .footer-link:hover,footer .footer-contact-btn:hover{color:#0F0E0C;}
footer .footer-address{color:#9B9790;}

/* Kolommen exact gelijk: minmax(0,1fr) negeert de min-content-breedte,
   zodat tekstlengte of een nog niet geladen lettertype de indeling niet verschuift. */
footer .footer-bento{grid-template-columns:repeat(3,minmax(0,1fr));}
footer .footer-tile-brand,footer .footer-tile-bottom{grid-column:1/-1;}
footer .footer-nav-link,footer .footer-nav-head{overflow-wrap:anywhere;}

/* ── Footer: brede zoektegel naast de Loop-kaart, beide in glas ── */
footer .footer-bento{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;}
footer .footer-tile-zoek{grid-column:span 2;}

/* Zoektegel: rustige achtergrond, zonder gloed. */
footer .footer-tile-zoek{
  background:#F9F8F6;border:1px solid rgba(15,14,12,.07);border-radius:14px;
}

footer .footer-tile-zoek{align-items:flex-start;text-align:left;}
footer .footer-tile-zoek .footer-nav-head{border-bottom-color:rgba(15,14,12,.12);}
footer .ft-loop-card{display:flex;flex-direction:column;align-items:center;gap:8px;
  text-decoration:none;color:inherit;width:100%;}
footer .ft-loop-card .loopmark-svg{width:38px;height:38px;}
footer .ft-loop-name{font-family:var(--ff-disp,'Bricolage Grotesque',sans-serif);
  font-size:13px;font-weight:800;letter-spacing:-.2px;color:#0F0E0C;}
footer .ft-loop-desc{font-size:10px;line-height:1.35;color:#6B6866;}
footer .ft-loop-card:hover .ft-loop-name{color:#E8294A;}

/* Ook op smalle schermen blijft de verhouding 2/3 om 1/3, net als de rest van de bento. */
@media (max-width:520px){
  footer .footer-tile-loop{padding:12px 8px;}
  footer .footer-tile-loop .loopmark-svg{width:30px;height:30px;}
  footer .ft-loop-name{font-size:11.5px;}
  footer .ft-loop-desc{font-size:9px;line-height:1.3;}
  footer .footer-tile-zoek .footer-nav-link{font-size:10.5px;}
}
@media (prefers-reduced-motion:reduce){
  footer .loopmark-svg .lm-rot,footer .loopmark-svg .lm-rot2{animation:none;}
}

@media (prefers-reduced-motion:reduce){
  footer .footer-tile-loop::before{animation:none;}
}

footer .footer-tile-zoek .footer-nav-link{display:flex;align-items:center;gap:7px;}
footer .fn-ic{width:12px;height:12px;flex:none;opacity:.55;}
footer .footer-nav-link:hover .fn-ic{opacity:1;}

/* Loop-kaart: echt glas — semi-transparant, wat erachter ligt schemert door. */
footer .footer-tile-loop{
  position:relative;overflow:hidden;isolation:isolate;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:14px 12px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.34) 100%),
    radial-gradient(120% 90% at 12% 0%,rgba(232,41,74,.16),transparent 58%),
    radial-gradient(110% 90% at 92% 8%,rgba(80,140,255,.14),transparent 60%),
    radial-gradient(120% 100% at 60% 108%,rgba(176,75,255,.13),transparent 62%);
  -webkit-backdrop-filter:blur(22px) saturate(185%) brightness(1.06);
  backdrop-filter:blur(22px) saturate(185%) brightness(1.06);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 26px rgba(15,14,12,.09),0 1px 2px rgba(15,14,12,.05),
    inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.35),
    inset 1px 0 0 rgba(255,255,255,.4),inset -1px 0 0 rgba(255,255,255,.4);
}
footer .footer-tile-loop::before{
  content:"";position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.10) 62%,transparent 100%);
}
footer .footer-tile-loop::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:14px;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.26) 47%,transparent 58%);
}
@media (max-width:520px){
  footer .footer-tile-loop{padding:12px 8px;}
  footer .footer-tile-loop .loopmark-svg{width:30px;height:30px;}
}