/* ===== Socials Hub: HERO (Elementor) ===== */

.socials-hub .er-socials-hero{
  padding: 56px 16px;
  position: relative;
}

.socials-hub .er-socials-hero__card{
  position: relative;
  z-index: 1;
  max-width: 720px;
  width: 100%;
  padding: 22px 22px;
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 48px rgba(0,0,0,.10);
  text-align: center;
  backdrop-filter: blur(10px);
}

/* avatar */
.socials-hub .er-socials-hero__avatar img{
  width: 86px !important;
  height: 86px !important;
  object-fit: cover;
  border-radius: 999px !important;
  border: 3px solid rgba(255,255,255,.95);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}

/* handle */
.socials-hub .er-socials-hero__handle{
  margin: 12px 0 6px !important;
  font-weight: 900 !important;
  letter-spacing: .2px;
}

/* sub */
.socials-hub .er-socials-hero__sub{
  margin: 0 auto 14px !important;
  max-width: 48ch;
  opacity: .85;
}

/* CTA row */
.socials-hub .er-socials-hero__cta{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* buttons base */
.socials-hub .er-btn .elementor-button,
.socials-hub a.er-btn.elementor-button{
  border-radius: 999px !important;
  padding: 12px 16px !important;
  font-weight: 800 !important;
  border: 0 !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

/* IG button */
.socials-hub .er-btn--ig .elementor-button,
.socials-hub a.er-btn--ig.elementor-button{
  background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4) !important;
  color: #fff !important;
}

/* WA button */
.socials-hub .er-btn--wa .elementor-button,
.socials-hub a.er-btn--wa.elementor-button{
  background: linear-gradient(135deg, #25D366, #12b45a) !important;
  color: #fff !important;
}

/* hover */
.socials-hub .er-btn .elementor-button:hover,
.socials-hub a.er-btn.elementor-button:hover{
  transform: translateY(-1px);
  filter: saturate(1.07);
  box-shadow: 0 18px 38px rgba(0,0,0,.14);
}

/* Mobile tweaks */
@media (max-width: 768px){
  .socials-hub .er-socials-hero{
    padding: 34px 14px;
  }
  .socials-hub .er-socials-hero__card{
    padding: 18px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.90);
  }
}


/* =========================================================
   Socials page (page-id-9718): IG fade onder header,
   doorlopend over content + footer (desktop + mobiel)
   ========================================================= */

/* Header altijd boven alles */
body.page-id-9718 #masthead{
  position: relative !important;
  z-index: 50 !important;
}

/* Pak de wrapper direct NA de header (hierin zitten content + footer) */
body.page-id-9718 #masthead + *{
  position: relative !important;
  z-index: 1 !important;
}

/* Fade laag op die wrapper, zodat header nooit mee kleurt */
body.page-id-9718 #masthead + *::before{
  content:"" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;

  /* Iets sterker / meer aanwezig */
  background:
    radial-gradient(1500px 720px at 18% 8%, rgba(245,133,41,.24), transparent 62%),
    radial-gradient(1400px 720px at 88% 16%, rgba(221,42,123,.20), transparent 62%),
    radial-gradient(1500px 860px at 55% 92%, rgba(81,91,212,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 46%) !important;
}

/* Alle echte content boven de fade */
body.page-id-9718 #masthead + * > *{
  position: relative !important;
  z-index: 1 !important;
}

/* Veiligheid: oude fades uit (als je ooit iets anders probeerde) */
body.page-id-9718 #page::before,
body.page-id-9718 .site-content::before,
body.page-id-9718 .er-socials-hero::before{
  content: none !important;
  display: none !important;
}


/* ===== Mobiel: fade altijd zichtbaar en niet “wegvallend” ===== */
@media (max-width: 768px){
  body.page-id-9718 #masthead + *::before{
    background:
      radial-gradient(900px 520px at 20% 10%, rgba(245,133,41,.26), transparent 62%),
      radial-gradient(860px 520px at 85% 18%, rgba(221,42,123,.22), transparent 62%),
      radial-gradient(900px 620px at 55% 92%, rgba(81,91,212,.18), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 50%) !important;
  }
}

/* ===== FIX: IG fade altijd zichtbaar (desktop + mobiel) ===== */

/* Zorg dat we een page-wide achtergrond kunnen tekenen */
body.page-id-9718{
  position: relative;
}

/* Zet de fade als vaste “achtergrondlaag” voor deze pagina */
body.page-id-9718::before{
  content:"";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(1500px 720px at 18% 12%, rgba(245,133,41,.24), transparent 62%),
    radial-gradient(1400px 720px at 88% 18%, rgba(221,42,123,.20), transparent 62%),
    radial-gradient(1500px 860px at 55% 92%, rgba(81,91,212,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 46%);
}

/* Alles op de pagina boven de fade */
body.page-id-9718 #page{
  position: relative;
  z-index: 1;
}

/* Header mag NIET mee-faden: geef 'm gewoon een solide achtergrond */
body.page-id-9718 #masthead,
body.page-id-9718 .site-header{
  position: relative;
  z-index: 5;
  background: #f4ede1; /* match jouw beige header */
}

/* Mobiel: iets sterker */
@media (max-width: 768px){
  body.page-id-9718::before{
    background:
      radial-gradient(900px 520px at 20% 12%, rgba(245,133,41,.26), transparent 62%),
      radial-gradient(860px 520px at 85% 20%, rgba(221,42,123,.22), transparent 62%),
      radial-gradient(900px 620px at 55% 92%, rgba(81,91,212,.18), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 50%);
  }
}

/* ===== Socials (page-id-9718): footer ook IG-fade laten zien ===== */

/* Als de footer een background heeft, maskeert hij de fade.
   Maak 'm transparant op deze pagina. */
body.page-id-9718 .footer-wrap-main{
  background: transparent !important;
}

/* Soms zit de achtergrond op een inner wrapper, pak die ook mee */
body.page-id-9718 .footer-wrap-main .container,
body.page-id-9718 .footer-wrap-main .footer-inner,
body.page-id-9718 .footer-wrap-main .footer-wrap,
body.page-id-9718 footer,
body.page-id-9718 #colophon{
  background: transparent !important;
}

/* Als je footer margins gebruikt en je wilt dat het “blok” zelf gevuld lijkt:
   geef padding i.p.v. margin (margin laat de achtergrond erachter zien).
   Dit is optioneel, maar meestal mooier. */
body.page-id-9718 .footer-wrap-main{
  margin-top: 0 !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* Desktop: kaart mag breder dan Elementor max */
@media (min-width: 1024px){
  .socials-hub .er-socials-hero .er-socials-hero__card{
    max-width: 1100px !important;
    width: 100%;
  }
}

/* ===== Desktop override: breder dan 720px ===== */
@media (min-width: 1024px){
  body.page-id-9718 .socials-hub .er-socials-hero__card{
    max-width: 980px !important; /* pas aan: 900-1100 */
  }
}

/* ===== Socials hero card: compact IG-style header ===== */

.socials-hub .er-socials-hero__card{
  /* compacter */
  padding: 18px 18px !important;
  text-align: left !important;
}

/* We maken van de bovenste content een 2-koloms layout.
   Dit werkt het best als je markup roughly is:
   avatar wrapper + handle/sub wrappers in dezelfde card. */
.socials-hub .er-socials-hero__card{
  display: grid !important;
  grid-template-columns: 86px 1fr !important;
  grid-template-rows: auto auto auto !important;
  column-gap: 16px !important;
  row-gap: 8px !important;
  align-items: center !important;
}

/* Avatar links */
.socials-hub .er-socials-hero__avatar{
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
}

.socials-hub .er-socials-hero__avatar img{
  width: 76px !important;
  height: 76px !important;
  border-radius: 999px !important;
}

/* Handle rechts naast avatar */
.socials-hub .er-socials-hero__handle{
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;

  /* IG vibe */
  font-weight: 900 !important;
  font-size: 26px !important;
  letter-spacing: .1px !important;
  line-height: 1.05 !important;
}

/* Bio onder handle, nog steeds rechts */
.socials-hub .er-socials-hero__sub{
  grid-column: 2;
  grid-row: 2;
  margin: 0 !important;
  max-width: 60ch !important;
  opacity: .82 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

/* CTA’s onder alles, full width */
.socials-hub .er-socials-hero__cta{
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 10px !important;

  justify-content: flex-start !important;
  gap: 10px !important;
}

/* Buttons iets compacter en meer “IG” */
.socials-hub .er-btn .elementor-button,
.socials-hub a.er-btn.elementor-button{
  padding: 10px 14px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.10) !important;
}

/* Instagram-ish typography voor de hele card */
.socials-hub .er-socials-hero__card,
.socials-hub .er-socials-hero__card *{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Mobile: stapelt weer netjes (avatar boven, tekst eronder), maar nog steeds compact */
@media (max-width: 768px){
  .socials-hub .er-socials-hero__card{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    text-align: center !important;
    row-gap: 10px !important;
  }

  .socials-hub .er-socials-hero__avatar{
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
  }

  .socials-hub .er-socials-hero__handle{
    grid-column: 1;
    grid-row: 2;
    font-size: 24px !important;
    text-align: center !important;
  }

  .socials-hub .er-socials-hero__sub{
    grid-column: 1;
    grid-row: 3;
    text-align: center !important;
  }

  .socials-hub .er-socials-hero__cta{
    grid-column: 1;
    grid-row: 4;
    justify-content: center !important;
  }
}

/* ===== Instagram verified badge (Meta SVG) ===== */

.socials-hub .er-socials-hero__handle{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Meta verified badge als background-image */
.socials-hub .er-socials-hero__handle::after{
  content: "" !important;
  display: inline-block !important;

  width: 16px !important;
  height: 16px !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  /* Meta verified SVG (blauw) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-label='Verified' role='img' viewBox='0 0 40 40'%3E%3Cpath fill='rgb(0,149,246)' fill-rule='evenodd' d='M19.998 3.094 14.638 0l-2.972 5.15H5.432v6.354L0 14.64 3.094 20 0 25.359l5.432 3.137v5.905h5.975L14.638 40l5.36-3.094L25.358 40l3.232-5.6h6.162v-6.01L40 25.359 36.905 20 40 14.641l-5.248-3.03v-6.46h-6.419L25.358 0l-5.36 3.094Zm7.415 11.225 2.254 2.287-11.43 11.5-6.835-6.93 2.244-2.258 4.587 4.581 9.18-9.18Z'/%3E%3C/svg%3E") !important;

  /* optisch iets hoger zoals IG */
  transform: translateY(1px) !important;
  opacity: .98 !important;
}

/* desktop iets groter */
@media (min-width: 769px){
  .socials-hub .er-socials-hero__handle::after{
    width: 18px !important;
    height: 18px !important;
  }
}

/* ===== Instagram-style meta block ===== */

.socials-hub .er-ig-meta{
  margin-top: 12px;
  text-align: center;
  color: #262626;
}

/* role */
.socials-hub .er-ig-role{
  font-size: 13px;
  font-weight: 600;
  color: #8e8e8e;
  margin-bottom: 10px;
}

/* stats row */
.socials-hub .er-ig-stats{
  display: flex;
  justify-content: center;
  gap: 26px;
  margin-bottom: 14px;
}

.socials-hub .er-ig-stats div{
  text-align: center;
}

.socials-hub .er-ig-stats strong{
  display: block;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
}

.socials-hub .er-ig-stats span{
  font-size: 12px;
  color: #8e8e8e;
}

/* bio */
.socials-hub .er-ig-bio{
  font-size: 14px;
  line-height: 1.45;
  max-width: 52ch;
  margin: 0 auto;
}

.socials-hub .er-ig-bio div{
  margin-bottom: 4px;
}

.socials-hub .er-ig-bio span{
  color: #0095f6;
  font-weight: 600;
}

/* mobile tuning */
@media (max-width: 768px){
  .socials-hub .er-ig-stats{
    gap: 18px;
  }

  .socials-hub .er-ig-bio{
    font-size: 13.5px;
  }
}

/* =========================================================
   Socials Hub card: Instagram desktop layout (no dead space)
   Zet dit ONDERAAN je socials-hub.css
   ========================================================= */

/* Card: stop met center layout */
.socials-hub .er-socials-hero__card{
  text-align: left !important;
  display: grid !important;

  /* 2 kolommen: avatar | content */
  grid-template-columns: 96px 1fr !important;

  /* rijen: header, meta/stats, bio, ctas */
  grid-template-rows: auto auto auto auto !important;

  column-gap: 18px !important;
  row-gap: 10px !important;

  align-items: start !important;
}

/* Avatar links boven */
.socials-hub .er-socials-hero__avatar{
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  align-self: start !important;
}

.socials-hub .er-socials-hero__avatar img{
  width: 86px !important;
  height: 86px !important;
}

/* Handle rechts boven avatar */
.socials-hub .er-socials-hero__handle{
  grid-column: 2 !important;
  grid-row: 1 !important;

  margin: 0 !important;
  font-size: 28px !important;
  line-height: 1.05 !important;
}

/* Verified badge blijft naast handle */
.socials-hub .er-socials-hero__handle{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Meta blok (rol + stats) onder handle, links uitgelijnd */
.socials-hub .er-ig-meta{
  grid-column: 2 !important;
  grid-row: 2 !important;

  margin: 0 !important;
  text-align: left !important;
}

/* Rol: compact */
.socials-hub .er-ig-role{
  margin: 2px 0 8px !important;
  font-size: 13px !important;
}

/* Stats: links, op 1 regel */
.socials-hub .er-ig-stats{
  justify-content: flex-start !important;
  gap: 26px !important;
  margin: 0 0 8px !important;
}

/* Bio: links onder stats (niet center), breed genoeg */
.socials-hub .er-ig-bio{
  grid-column: 2 !important;
  grid-row: 3 !important;

  margin: 0 !important;
  max-width: 60ch !important;
  text-align: left !important;
}

/* CTA row onderaan, links */
.socials-hub .er-socials-hero__cta{
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;

  justify-content: flex-start !important;
  margin-top: 8px !important;
}

/* Mobile: terug naar stacked (jouw huidige gedrag) */
@media (max-width: 768px){
  .socials-hub .er-socials-hero__card{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto auto !important;
    text-align: center !important;
  }

  .socials-hub .er-socials-hero__avatar{
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
  }

  .socials-hub .er-socials-hero__handle{
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-content: center !important;
  }

  .socials-hub .er-ig-meta{
    grid-column: 1 !important;
    grid-row: 3 !important;
    text-align: center !important;
  }

  .socials-hub .er-ig-bio{
    grid-column: 1 !important;
    grid-row: 4 !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .socials-hub .er-socials-hero__cta{
    grid-column: 1 !important;
    grid-row: 5 !important;
    justify-content: center !important;
  }
}

/* =========================================================
   Socials Hub (page-id-9718) MOBILE FIX
   - card netjes binnen viewport
   - stats + bio strak
   - CTA buttons nooit meer overflow
   ========================================================= */
@media (max-width: 768px){

  /* iets minder lucht rondom de hero */
  body.page-id-9718 .socials-hub .er-socials-hero{
    padding: 22px 14px !important;
  }

  /* card: altijd binnen scherm */
  body.page-id-9718 .socials-hub .er-socials-hero__card{
    width: 100% !important;
    max-width: 92vw !important;
    margin: 0 auto !important;
    padding: 18px 16px !important;
    border-radius: 18px !important;
    text-align: center !important;
    overflow: hidden !important; /* voorkomt “uitsteken” */
  }

  /* avatar iets compacter */
  body.page-id-9718 .socials-hub .er-socials-hero__avatar img{
    width: 78px !important;
    height: 78px !important;
  }

  /* handle + badge: smaller en gecentreerd */
  body.page-id-9718 .socials-hub .er-socials-hero__handle{
    font-size: 24px !important;
    justify-content: center !important;
    margin: 6px 0 4px !important;
  }

  body.page-id-9718 .socials-hub .er-socials-hero__handle::after{
    width: 16px !important;
    height: 16px !important;
    transform: translateY(1px) !important;
  }

  /* “reiscontent creator” iets netter */
  body.page-id-9718 .socials-hub .er-ig-role{
    margin: 6px 0 10px !important;
    font-size: 13px !important;
  }

  /* stats: mag wrappen, geen rare spacing */
  body.page-id-9718 .socials-hub .er-ig-stats{
    flex-wrap: wrap !important;
    gap: 16px !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
  }

  body.page-id-9718 .socials-hub .er-ig-stats strong{
    font-size: 15px !important;
  }

  body.page-id-9718 .socials-hub .er-ig-stats span{
    font-size: 12px !important;
  }

  /* bio: altijd netjes binnen card */
  body.page-id-9718 .socials-hub .er-ig-bio{
    max-width: 34ch !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* CTA: STACKEN + full width zodat ze nooit buiten de card vallen */
  body.page-id-9718 .socials-hub .er-socials-hero__cta{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  body.page-id-9718 .socials-hub .er-btn .elementor-button,
  body.page-id-9718 .socials-hub a.er-btn.elementor-button{
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   Socials Hub MOBILE: force center EVERYTHING (hard override)
   ========================================================= */
@media (max-width: 768px){

  /* Card: center layout en alle children */
  body.page-id-9718 .socials-hub .er-socials-hero__card{
    text-align: center !important;
  }

  /* Maak alle directe blokken in de card gecentreerd */
  body.page-id-9718 .socials-hub .er-socials-hero__card > *{
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* Avatar wrapper en image */
  body.page-id-9718 .socials-hub .er-socials-hero__avatar{
    display: flex !important;
    justify-content: center !important;
  }
  body.page-id-9718 .socials-hub .er-socials-hero__avatar img{
    display: block !important;
    margin: 0 auto !important;
  }

  /* Handle + badge exact gecentreerd */
  body.page-id-9718 .socials-hub .er-socials-hero__handle{
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: fit-content !important;
    margin: 8px auto 6px !important;
    text-align: center !important;
  }

  /* Meta blok: role, stats, bio allemaal center */
  body.page-id-9718 .socials-hub .er-ig-meta,
  body.page-id-9718 .socials-hub .er-ig-role,
  body.page-id-9718 .socials-hub .er-ig-bio{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Stats: center en wrappen netjes */
  body.page-id-9718 .socials-hub .er-ig-stats{
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    width: fit-content !important;
    margin: 0 auto 12px !important;
  }

  /* Bio regels: geen rare inspringing */
  body.page-id-9718 .socials-hub .er-ig-bio div{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* CTA: center en knoppen netjes onder elkaar */
  body.page-id-9718 .socials-hub .er-socials-hero__cta{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 14px auto 0 !important;
  }

  body.page-id-9718 .socials-hub .er-btn .elementor-button,
  body.page-id-9718 .socials-hub a.er-btn.elementor-button{
    width: min(340px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex !important;
    justify-content: center !important;
  }

  /* Als Elementor stiekem een grid/flex layout op de card zet: kill die op mobiel */
  body.page-id-9718 .socials-hub .er-socials-hero__card{
    display: block !important;
  }
}

/* =========================================================
   Socials Hub MOBILE: CTA buttons fix (center + equal width)
   ========================================================= */
@media (max-width: 768px){

  /* CTA container: kolom, centered, nette gap */
  body.page-id-9718 .socials-hub .er-socials-hero__cta{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 18px !important;
  }

  /* De Elementor wrappers rond buttons kunnen soms de breedte verpesten */
  body.page-id-9718 .socials-hub .er-socials-hero__cta .elementor-widget,
  body.page-id-9718 .socials-hub .er-socials-hero__cta .elementor-widget-container{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Beide knoppen exact dezelfde breedte */
  body.page-id-9718 .socials-hub .er-socials-hero__cta .elementor-button,
  body.page-id-9718 .socials-hub .er-socials-hero__cta a.elementor-button{
    width: min(320px, 92%) !important;
    max-width: 320px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 14px 18px !important;
    font-size: 15px !important;
    line-height: 1 !important;

    margin: 0 !important;
  }

  /* Extra: voorkom dat de WhatsApp button breder/anders wordt door lange tekst */
  body.page-id-9718 .socials-hub .er-btn--wa .elementor-button,
  body.page-id-9718 .socials-hub a.er-btn--wa.elementor-button{
    white-space: nowrap !important;
  }
}