/* =========================================================
   Debbarista – Bruiloft landing (ALGEMEEN)
   - Warm & speels
   - Geen omlijningen
   - Foto’s puur visueel (niet klikbaar)
   ========================================================= */

/* ✅ Vervang body.page-id-952 -> body  (geldt site-breed) */
body{
  --db-ink:#89452c;
  --db-muted:rgba(137,69,44,.78);
  --db-bg:#fdf7f3;
  --db-surface:#ffffff;

  --db-pop:#E9C7B6;
  --db-pop-2:#F1DFD6;

  --db-shadow:0 18px 44px rgba(137,69,44,.14);
  --db-shadow-soft:0 10px 22px rgba(137,69,44,.08);

  --db-radius:18px;
  --db-radius-lg:28px;

  --db-focus:0 0 0 4px rgba(233,199,182,.55);

  background:var(--db-bg);
  color:var(--db-ink);
}

/* Rust & typografie */
body .entry-content{ line-height:1.7; }
body .entry-content > * + *{ margin-top:clamp(18px,2.4vw,34px); }

body h1,
body h2,
body h3{
  color:var(--db-ink);
  letter-spacing:-0.015em;
  text-wrap:balance;
}
body p,
body li{
  color:var(--db-muted);
  font-size:clamp(16px,1.05vw,18px);
}

/* Container */
body .container{
  width:min(1100px, calc(100% - 40px));
  margin-inline:auto;
}

/* Geen omlijningen WP groepen */
body .wp-block-group,
body .wp-block-group.has-background{
  border:none !important;
  box-shadow:none !important;
  background-color:transparent;
}

/* Foto’s niet klikbaar (Jetpack/Lightbox vermijden) */
body figure.wp-block-image img,
body .db-img img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--db-radius-lg)!important;
  box-shadow:var(--db-shadow-soft)!important;
  pointer-events:none;
}
body figure.wp-block-image img:hover{
  filter:none;
  transform:none;
}

/* Buttons */
body .btn-primary,
body .wp-block-button .wp-block-button__link,
body a.wp-element-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  border-radius:999px;
  padding:14px 24px;
  font-weight:900;
  letter-spacing:.01em;
  text-decoration:none;

  background:linear-gradient(180deg, var(--db-ink), #7b3d28);
  color:#fff !important;

  border:none;
  box-shadow:0 16px 30px rgba(137,69,44,.18);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body .btn-primary:hover,
body .wp-block-button .wp-block-button__link:hover,
body a.wp-element-button:hover{
  transform:translateY(-2px);
  box-shadow:var(--db-shadow);
  filter:brightness(1.03);
}

body .btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:14px 22px;
  font-weight:900;
  text-decoration:none;

  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(241,223,214,.55));
  color:var(--db-ink) !important;

  border:1px solid rgba(137,69,44,.18);
  box-shadow:var(--db-shadow-soft);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body .btn-secondary:hover{
  transform:translateY(-2px);
  box-shadow:var(--db-shadow);
  filter:brightness(1.02);
}

/* HERO */
body .hero-bruiloft{
  padding:clamp(38px,5vw,76px) 0;
  background:
    radial-gradient(1200px 320px at 12% 0%, rgba(233,199,182,.75), transparent 60%),
    radial-gradient(900px 260px at 92% 25%, rgba(241,223,214,.65), transparent 55%),
    linear-gradient(180deg, rgba(233,199,182,.25), rgba(241,223,214,.12));
}
body .hero-bruiloft h1{
  font-size:clamp(34px,3.2vw,56px);
  line-height:1.05;
  margin:0 0 10px 0;
}
body .hero-slogan{
  font-weight:800;
  margin:0 0 14px 0;
}
body .hero-intro{ max-width:70ch; }
body .hero-usps{
  list-style:none;
  padding:0;
  margin:18px 0 0 0;
  display:grid;
  gap:10px;
}
body .hero-usps li{
  background:linear-gradient(180deg, #fff, rgba(241,223,214,.20));
  border-radius:999px;
  padding:10px 14px;
  box-shadow:var(--db-shadow-soft);
}
body .hero-cta{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* Secties */
body .why-debbarista,
body .services-bruiloft,
body .other-events,
body .region,
body .reviews,
body .final-cta{
  padding:clamp(34px,4.5vw,70px) 0;
}

body .trust-line{
  margin-top:16px;
  font-weight:800;
  color:var(--db-ink);
}

/* Cards / grids */
body .usp-grid,
body .services-grid,
body .other-grid,
body .reviews-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:20px;
}

body .card{
  background:linear-gradient(180deg, #fff, rgba(241,223,214,.20));
  border:none;
  border-radius:var(--db-radius-lg);
  padding:clamp(18px,2vw,26px);
  box-shadow:var(--db-shadow-soft);
  transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
}
body .card:hover{
  transform:translateY(-4px);
  box-shadow:var(--db-shadow);
}
body .card h3{
  margin-top:0;
  font-weight:900;
}

body .card-cta,
body .text-cta{
  display:inline-flex;
  margin-top:14px;
  font-weight:900;
  text-decoration:none;
  color:var(--db-ink);
}
body .card-cta:hover,
body .text-cta:hover{ text-decoration:underline; }

/* Reviews */
body blockquote.card{ margin:0; }
body blockquote.card cite{
  display:block;
  margin-top:10px;
  font-style:normal;
  font-weight:900;
  color:var(--db-ink);
}

/* Finale CTA extra */
body .final-cta{
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(233,199,182,.70), transparent 60%),
    radial-gradient(700px 220px at 90% 40%, rgba(241,223,214,.55), transparent 55%),
    linear-gradient(180deg, rgba(233,199,182,.20), rgba(241,223,214,.10));
}

/* Header laatste menu-item als CTA */
header .wp-block-navigation a{
  border-radius:999px;
  padding:10px 12px;
}
header .wp-block-navigation ul > li:last-child > a{
  background:linear-gradient(180deg, var(--db-ink), #7b3d28);
  color:#fff !important;
  padding:10px 18px;
  font-weight:900;
  box-shadow:0 14px 26px rgba(137,69,44,.18);
}
header .wp-block-navigation ul > li:last-child > a:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(137,69,44,.22);
}

/* Mobile */
@media (max-width: 900px){
  body .usp-grid,
  body .services-grid,
  body .other-grid,
  body .reviews-grid{
    grid-template-columns:1fr;
  }
  body .hero-cta{ flex-direction:column; align-items:stretch; }
  body .btn-primary,
  body .btn-secondary{ width:100%; }
}

/* Layout helper: images naast tekst (optioneel) */
body .db-media-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:22px;
  align-items:center;
}
@media (max-width: 900px){
  body .db-media-grid{ grid-template-columns:1fr; }
}

/* =========================
   Sticky header – Debbarista
   ========================= */
header{
  position: sticky;
  top: 0;
  z-index: 9999;

	/* force full-bleed even if theme centers alignfull */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
	
	
  background: rgba(253,247,243,0.96); /* jouw #fdf7f3 met transparantie */
  backdrop-filter: blur(200px);

  transition: box-shadow .25s ease, background-color .25s ease;
}

/* Subtiele schaduw zodra je scrolt */
body.scrolled header{
  box-shadow: 0 8px 26px rgba(137,69,44,.18);
}

/* Fix WP mobiele navigatie in combinatie met sticky header */
@media (max-width: 900px){
  header{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
  }

  /* Zorg dat het uitklapmenu/overlay boven alles komt */
  .wp-block-navigation__responsive-container{
    z-index: 100000 !important;
  }

  /* Voorkom “afkappen” van het menu in/onder de header */
  header, header *{
    overflow: visible;
  }
}


/* =========================
   FIX: header vouwt niet goed op mobiel
   ========================= */

/* Desktop: jouw full-bleed blijft intact */
@media (min-width: 901px){
  header{
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

/* Tablet & mobiel: reset alles */
@media (max-width: 900px){
  header{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* voorkomt verborgen layout-ruimte */
  header .wp-block-group,
  header .wp-block-navigation{
    margin: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

/* =========================
   FIX: WP mobile menu (Gutenberg) klapt niet goed uit
   ========================= */
@media (max-width: 900px){

  /* Overlay zelf: altijd full screen */
  .wp-block-navigation__responsive-container{
    position: fixed !important;
    inset: 0 !important;          /* top/right/bottom/left:0 */
    height: 100vh !important;
    width: 100vw !important;
    max-height: none !important;
    overflow: hidden !important;   /* scroll gaat naar content */
    z-index: 1000000 !important;
    background: rgba(253,247,243,0.98) !important; /* match jouw bg */
    backdrop-filter: blur(18px);
  }

  /* Inhoud binnen overlay: scrollbaar */
  .wp-block-navigation__responsive-container-content{
    height: 100vh !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 18px 16px 28px !important;
  }

  /* Zorg dat de knop/laatste item niet “over” andere items heen valt */
  header .wp-block-navigation ul > li:last-child > a{
    display: inline-flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
}