/* ============================================================
   overrides.css — MASTER CLEAN (v111) — COMPLETE REPLACEMENT
   Fixes:
   - Mobiel: fixed nav balk + logo/hamburger netjes
   - Subpages: 2 kolommen (content links, sidebar rechts) + stacked asides
   - Subpages: content zachte achtergrond + cards voor sidebar
   - Slot-aside altijd weg (ook als niet echt empty)
   - Booking: nooit afgesneden (overflow visible) + iframe 100%
   - Cards: minder lucht bovenaan (first-child margin-top = 0)
   - Affiliate banners: NIET upscalen (blijft scherp), wel responsive
   - Homepage: hero + tiles + prefooter + linkblocks (optioneel)
   - Back-to-top
   ============================================================ */

/* ---------------------------
   0) VARIABLES
   --------------------------- */
:root{
  --wrap-max: 1200px;
  --wrap-pad: 16px;

  --gap: 26px;

  --radius-card: 16px;
  --radius-media: 18px;

  --footer-safe: 64px;

  /* Subpages */
  --sf-gap-under-nav-desktop: 18px;
  --sf-gap-under-nav-mobile: 14px;

  --sf-aside-w: 360px; /* sidebarbreedte desktop */
  --sf-gutter: 24px;   /* gutter tussen content en sidebar */

  --sf-content-pad-x-mobile: 12px;
  --sf-content-pad-x-desktop: 16px;

  /* Sidebar cards spacing */
  --sf-aside-pad-top: 10px;
  --sf-aside-pad-x: 12px;
  --sf-aside-pad-bottom-booking: 10px;
  --sf-aside-pad-bottom-map: 18px;
  --sf-aside-gap: 18px;
}

/* ---------------------------
   1) GLOBAL HELPERS
   --------------------------- */
[id]{ scroll-margin-top: 120px; }

.wrapper,
#main.wrapper{
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

img{
  max-width: 100% !important;
  height: auto !important;
}

/* ---------------------------
   2) NAV — ROBUUST + MOBIEL BALK
   --------------------------- */
#sfNav.sf-nav{
  z-index: 7000 !important;
}

@media (max-width: 980px){

  #sfNav.sf-nav{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    background: #fff !important;
    border-bottom: 1px solid #e6e6e6 !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;

    height: var(--nav-h-mobile, 92px) !important;
    display: flex !important;
    align-items: center !important;

    padding: 0 14px !important;
    box-sizing: border-box !important;
  }

  #sfNav .sf-nav__logo{
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
  }

  #sfNav .sf-nav__logo img{
    max-height: 58px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
  }

  #sfNav .sf-nav__toggle{
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 7100 !important;
  }
}

/* ---------------------------
   3) HOMEPAGE — HERO (optioneel)
   --------------------------- */
#hero{
  margin-top: var(--nav-h-desktop, 84px);
  background-size: cover;
  background-position: center;
  min-height: 460px;
  padding: 48px 0;
  display: flex;
  align-items: center;
}

@media (max-width: 980px){
  #hero{
    margin-top: var(--nav-h-mobile, 92px) !important;
    min-height: 340px;
    padding: 28px 0;
  }
}

#hero .wrapper{
  width: 100%;
  display: flex !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.hero-box{
  background: rgba(0,0,0,.20);
  color: #fff;
  border-radius: var(--radius-card);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  padding: 26px 30px;
  max-width: 560px;
  margin-left: 0;
  margin-right: auto;
}

@media (max-width: 980px){
  .hero-box{
    background: rgba(0,0,0,.26);
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.hero-box h1,
.hero-box p{
  color: #fff;
  margin: 0;
}
.hero-box h1{ margin-bottom: 10px; }

/* ---------------------------
   4) HOMEPAGE — TEGELS (optioneel)
   --------------------------- */
.sf-tiles{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--gap) !important;
  margin-top: 26px !important;
}

.sf-tiles .grid_4{
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  background: #fff !important;
  border: 1px solid #eee !important;
  border-radius: var(--radius-card) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.06) !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

.sf-tiles .grid_4:hover{
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.10) !important;
}

.sf-tiles .grid_4 h2{
  margin: 0 !important;
  padding: 16px 18px 10px !important;
}

.sf-tiles .grid_4 p{
  margin: 0 !important;
  padding: 0 18px 18px !important;
}

.sf-tiles .grid_4 img{
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 980px){
  .sf-tiles{ grid-template-columns: 1fr !important; }
  .sf-tiles .grid_4 img{ height: 210px !important; }
}

/* ---------------------------
   5) PREFOOTER (optioneel)
   --------------------------- */
.sf-prefooter-image{
  max-width: var(--wrap-max);
  margin: 56px auto;
  padding-left: var(--wrap-pad);
  padding-right: var(--wrap-pad);
}

.sf-prefooter-image img{
  width: 100%;
  height: auto;
  border-radius: var(--radius-media);
  display: block;
}

/* ---------------------------
   6) LINKBLOCKS (optioneel)
   --------------------------- */
.sf-linkblocks{
  max-width: var(--wrap-max);
  margin: 40px auto 70px;
  padding-left: var(--wrap-pad);
  padding-right: var(--wrap-pad);

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 88px;
}

.sf-linkblocks .grid_2,
.sf-linkblocks .grid_3{
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 980px){
  .sf-linkblocks{
    flex-direction: column;
    gap: 32px;
  }
}

.sf-linkblocks h3{ margin: 0 0 10px; }
.sf-linkblocks ul{ margin: 0; padding-left: 18px; }
.sf-linkblocks li{ margin: 6px 0; }

/* ============================================================
   7) SUBPAGES — ENIGE SYSTEEM
   Vereist: <body class="sf-subpage">
   ============================================================ */

/* Ruimte onder nav */
@media (min-width: 981px){
  body.sf-subpage #main.wrapper.sf-subpage-main{
    margin-top: calc(var(--nav-h-desktop, 84px) + var(--sf-gap-under-nav-desktop)) !important;
  }
}
@media (max-width: 980px){
  body.sf-subpage #main.wrapper.sf-subpage-main{
    margin-top: calc(var(--nav-h-mobile, 92px) + var(--sf-gap-under-nav-mobile)) !important;
  }
  body.sf-subpage #content > :first-child{ margin-top: 0 !important; }
}

/* Slot-aside altijd weg (ook als niet empty door whitespace/comments) */
body.sf-subpage #main > aside:first-of-type{
  display: none !important;
}

/* Content card */
body.sf-subpage #content{
  background: #faf9f7 !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;

  padding: 28px 28px 34px !important;
  padding-left: var(--sf-content-pad-x-mobile) !important;
  padding-right: var(--sf-content-pad-x-mobile) !important;
}

body.sf-subpage #content::after{
  content:"" !important;
  display: table !important;
  clear: both !important;
}

@media (min-width: 1024px){
  body.sf-subpage #content{
    padding-left: var(--sf-content-pad-x-desktop) !important;
    padding-right: var(--sf-content-pad-x-desktop) !important;
  }
}
@media (max-width: 980px){
  body.sf-subpage #content{
    padding-top: 20px !important;
    padding-bottom: 26px !important;
    border-radius: 14px !important;
  }
}

/* Sidebar cards: gedeelde stijl (minder lucht boven) */
body.sf-subpage #main.wrapper.sf-subpage-main > aside{
  box-sizing: border-box !important;
}

/* kill top-margins binnen cards (dit is jouw "teveel lucht" fix) */
body.sf-subpage #main.wrapper.sf-subpage-main > aside > :first-child{
  margin-top: 0 !important;
}
body.sf-subpage #main.wrapper.sf-subpage-main > aside h1,
body.sf-subpage #main.wrapper.sf-subpage-main > aside h2,
body.sf-subpage #main.wrapper.sf-subpage-main > aside h3{
  margin-top: 0 !important;
}

/* Desktop: 2 kolommen + cards */
@media (min-width: 1024px){

  body.sf-subpage #main.wrapper.sf-subpage-main::after{
    content:"" !important;
    display: table !important;
    clear: both !important;
  }

  body.sf-subpage #main.wrapper.sf-subpage-main > #content{
    float: left !important;
    width: calc(100% - var(--sf-aside-w) - var(--sf-gutter) - 1px) !important;
    margin-right: var(--sf-gutter) !important;
    box-sizing: border-box !important;
  }

  body.sf-subpage #main.wrapper.sf-subpage-main > aside{
    float: right !important;
    width: var(--sf-aside-w) !important;
    clear: right !important; /* booking + map onder elkaar */
    margin: 0 0 var(--sf-aside-gap) 0 !important;

    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.06) !important;

    padding: var(--sf-aside-pad-top) var(--sf-aside-pad-x) var(--sf-aside-pad-bottom-booking) !important;

    /* BELANGRIJK: niet knippen (booking zoekknop!) */
    overflow: visible !important;
  }
}

/* Mobiel/tablet: cards onder elkaar (ook met overflow visible) */
@media (max-width: 1023px){

  body.sf-subpage #main.wrapper.sf-subpage-main > aside{
    float: none !important;
    width: auto !important;
    clear: none !important;
    margin: 14px 0 0 0 !important;

    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.06) !important;

    padding: var(--sf-aside-pad-top) var(--sf-aside-pad-x) var(--sf-aside-pad-bottom-booking) !important;

    overflow: visible !important;
  }
}

/* Map: iets meer bottom (zonder :has) —
   pak de 3e aside (na slot) = meestal maps */
@media (min-width: 0px){
  body.sf-subpage #main.wrapper.sf-subpage-main > aside:nth-of-type(3){
    padding-bottom: var(--sf-aside-pad-bottom-map) !important;
  }
}

/* Iframes in sidebar altijd 100% + geen eigen margins */
body.sf-subpage #main > aside iframe{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  border: 0 !important;
  margin: 0 !important;
}

/* Booking iframe: iets extra zekerheid (soms wil booking breder rekenen) */
body.sf-subpage #main > aside iframe[name="sbox_iframe"]{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* Contentfoto’s subpages */
body.sf-subpage #content img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  margin: 16px 0 20px;
}
@media (max-width: 980px){
  body.sf-subpage #content img{
    border-radius: 12px;
    margin: 14px 0 18px;
  }
}

/* ============================================================
   8) SUBPAGES — Affiliate banners (NIET upscalen)
   ============================================================ */
body.sf-subpage #content a[rel~="nofollow"]{
  display: inline-block !important;
  vertical-align: top !important;

  width: auto !important;
  max-width: 360px !important;
  margin: 6px 12px 6px 0 !important;
  text-decoration: none !important;
}

body.sf-subpage #content a[rel~="nofollow"] > img{
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  border-radius: 12px !important;
}

@media (max-width: 980px){
  body.sf-subpage #content a[rel~="nofollow"]{
    max-width: 520px !important;
    margin-right: 0 !important;
  }
}

/* ---------------------------
   9) FOOTER
   --------------------------- */
footer{
  border-top: 1px solid #e6e6e6;
  margin-top: 40px;
}
#colophon{
  padding: 18px 0;
  text-align: center;
}

/* ---------------------------
   10) BACK TO TOP
   --------------------------- */
.sf-top{
  position: fixed !important;
  right: 18px !important;
  bottom: var(--footer-safe) !important;

  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;

  border: 1px solid #ddd !important;
  background: #fff !important;
  color: #000 !important;

  font-size: 18px !important;
  cursor: pointer !important;
  z-index: 99999 !important;

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

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transform: translateY(10px) !important;
  transition: opacity .25s ease, transform .25s ease !important;
}

.sf-top.show{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.sf-top.show:hover{
  transform: translateY(-2px) !important;
}

/* ---------------------------
   11) MOBIEL MENU BULLETS FIX
   --------------------------- */
@media (max-width: 820px){

  #sfNav .sf-nav__list li::after,
  #sfNav .sf-nav__list a::before,
  #sfNav .sf-nav__list a::after{
    content: none !important;
  }

  #sfNav .sf-nav__list{
    list-style: none !important;
  }

  #sfNav .sf-nav__list li{
    list-style: none !important;
    position: relative !important;
  }

  #sfNav .sf-nav__list li::before{
    content: "\2022" !important;
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #cfcfcf !important;
    font-family: Arial, sans-serif !important;
  }

  #sfNav .sf-nav__list a{
    padding-left: 26px !important;
  }
}

/* ============================================================
   ZW — MOBIEL BOOKING FIX (rechterkant afkappen)
   - Lege aside weg
   - Booking: subtiel schalen zodat knop "ZOEK" volledig zichtbaar is
   - Compenseer breedte zodat widget niet “kleiner” oogt
   - Padding rechts + onder iets ruimer
   ============================================================ */

body.sf-subpage #main.sf-subpage-main > aside:first-of-type{
  display:none !important;
}

@media (max-width: 980px){

  /* cards basis */
  body.sf-subpage #main.sf-subpage-main > aside{
    padding: 12px 12px 12px 12px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    margin: 0 0 14px 0 !important;
  }

  /* MAPS: normaal symmetrisch */
  body.sf-subpage #main.sf-subpage-main > aside:nth-of-type(3){
    padding: 12px 12px 14px 12px !important;
  }

  /* BOOKING card: iets meer rechts/onder */
  body.sf-subpage #main.sf-subpage-main > aside:nth-of-type(2){
    padding: 12px 14px 12px 12px !important; /* rechts + onder ruimer */
    overflow: visible !important;
  }

  /* iframes altijd responsive */
  body.sf-subpage #main.sf-subpage-main iframe{
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    border: 0 !important;
    margin: 0 !important;
  }

  /* === BOOKING: fix “ZO” i.p.v. “ZOEK” ===
     We schalen de inhoud iets omlaag (past dan wél),
     maar compenseren de breedte zodat het niet kleiner oogt. */
  body.sf-subpage #main.sf-subpage-main iframe[name="sbox_iframe"]{
    --bk-scale: .88;

    transform: scale(var(--bk-scale)) !important;
    transform-origin: top left !important;

    width: calc(100% / var(--bk-scale)) !important; /* compensatie */
    max-width: none !important;

    height: 230px !important; /* iets meer ruimte onder */
  }
}


/* ============================================================
   ZW — BOOKING MOBIEL: minder lucht onderin (final trim)
   ============================================================ */
@media (max-width: 980px){

  /* booking card: onderkant strakker */
  body.sf-subpage #main.sf-subpage-main > aside:nth-of-type(2){
    padding-bottom: 0px !important;   /* was ~12 */
  }

  /* booking iframe: iets lager maar knop blijft zichtbaar */
  body.sf-subpage #main.sf-subpage-main iframe[name="sbox_iframe"]{
    height: 228px !important;         /* was 250 */
  }
}


/* ============================================================
   Eifelgids – extra lucht onder banners + tussen banners en sfeerfoto
   ============================================================ */

/* 1) Maak van de bannercontainer een flex-wrap rij met gap */
.sf-affiliates{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;              /* ruimte tussen banners onderling */
  margin: 0 0 56px 0;     /* lucht ONDER banners (voor de sfeerfoto) */
}

/* 2) Zorg dat links/afbeeldingen strak en netjes blijven */
.sf-affiliates a{
  display: inline-block;
}

.sf-affiliates img{
  display: block;         /* voorkomt “onderrand-ruimte” door inline img baseline */
  max-width: 100%;
  height: auto;
}

/* 3) Extra lucht onder sfeerfoto (optioneel) */
.sf-prefooter-image{
  margin: 0 0 48px 0;
}

@media (max-width: 768px){
  .sf-affiliates{
    gap: 14px;
    margin-bottom: 28px;
  }
  .sf-prefooter-image{
    margin-bottom: 32px;
  }
}



/* ============================================================
   MEER LUCHT TUSSEN BANNERS (GRID / FLEX)
   ============================================================ */

aside,
aside > .grid,
aside > .cards{
  gap: 40px !important;
}



/* ============================================================
   HERO BOX — extra contrast alleen op desktop
   ============================================================ */

@media (min-width: 769px){
  #hero .hero-box{
    background: rgba(0,0,0,0.45);
    padding: 28px 34px;
    border-radius: 18px;

    /* subtiele diepte */
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  }
}


/* ============================================================
   SF PREFooter IMAGE — mobiel: geen horizontale overflow + zichtbaar beeld
   HTML:
   <div class="sf-prefooter-image"><img ...></div>
   ============================================================ */

@media (max-width: 768px){

  /* 1) voorkom dat 1 element de pagina breder maakt */
  html, body{
    overflow-x: hidden;
  }

  /* 2) container mag nooit breder zijn dan viewport */
  .sf-prefooter-image{
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* 3) img: forceer netjes binnen de container + echte hoogte */
  .sf-prefooter-image img{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 240px !important;           /* <- hier zie je direct effect */
    object-fit: cover !important;
    object-position: center 35% !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
}


/* ============================================================
   DESKTOP: minder lucht boven pre-footer sfeerfoto
   ============================================================ */
@media (min-width: 769px){
  .sf-prefooter-image{
    margin-top: 12px !important;   /* was waarschijnlijk groter */
    padding-top: 0 !important;
  }

  /* als er onder ook te veel zit (optioneel) */
  .sf-prefooter-image{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}


/* ============================================================
   TEGELS — titel (h2/h3) optisch iets meer naar links
   Robuust: werkt ook als cards/tiles met flex center werken
   ============================================================ */

#main :is(.sf-tiles, .tiles, .cards, .grid_4, .grid_3, .cta-grid, .sf-card-grid)
  :is(h2, h3){
  text-align: left !important;

  /* zorg dat hij niet “meecentreert” in flex layouts */
  width: 100%;
  justify-self: start;
  align-self: start;

  /* echte shift (werkt altijd) */
  position: relative;
  left: 5px;

  /* voorkom dat padding roet in het eten gooit */
  padding-left: 0 !important;
}


/* ============================================================
   AFFILIATE CARD – EIFELGIDS (ALTIJD 3 KOLOMMEN, SCHAALT MEE)
   Complete replacement block
   ============================================================ */

.sf-affiliates{
  background:#f5f7f9;
  padding:22px;
  margin:30px 0;
  border-radius:16px;
}

.sf-affiliates h2{
  margin:0 0 10px 0;
}

.sf-affiliates p{
  margin:0 0 14px 0;
}

.sf-affiliates .sf-affiliates__banners{
  display:flex !important;
  flex-wrap:nowrap !important;   /* 3 in één rij */
  gap:10px;
  margin-top:12px;
}

/* 3 gelijke kolommen binnen de beschikbare breedte */
.sf-affiliates .sf-affiliates__banners > a{
  display:block !important;
  flex:1 1 0 !important;
  min-width:0;                   /* belangrijk voor flex shrink */
  line-height:0;
  margin:0 !important;
  padding:0 !important;
}

/* Banner: vult de kolom, maar wordt nooit groter dan 240px */
.sf-affiliates .sf-affiliates__banners > a > img{
  display:block;
  width:100%;
  height:auto;
  max-width:240px;               /* voorkomt upscalen */
  border-radius:10px;
}