/*
 * Alle regels hieronder zijn genest onder .dtf-bestemming (de wrapper om de
 * hele bestemmingspagina in templates/single-bestemming.php). Zo kan deze
 * CSS nooit per ongeluk de rest van het thema (header, footer, andere
 * paginatypes) beïnvloeden — ook niet de generieke regels zoals h1/h2/a.
 */
.dtf-bestemming{
  --ink:#2b2b2b;
  --ink-soft:#6b6b6b;
  --paper:#ffffff;
  --paper-alt:#f6f5f8;
  --line:#e6e2ea;
  --brand:#5F1B8A;
  --brand-dark:#431264;
  --accent:#F2883A;
  --accent-soft:#f6ddc4;
  --gradient:linear-gradient(135deg,#3B2467 0%,#C23B5C 55%,#F2883A 100%);
  --white:#ffffff;
  --radius:10px;
  --radius-btn:5px;
  --shadow:0 10px 30px rgba(43,20,60,0.10);
  --font-head:'Lora',Georgia,'Times New Roman',serif;
  --font-body:'Noto Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-ui:'Noto Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
}
.dtf-bestemming *{box-sizing:border-box;}
.dtf-bestemming h1,
.dtf-bestemming h2,
.dtf-bestemming h3{
  font-family:var(--font-head);
  font-weight:700;
  color:var(--ink);
  margin:0 0 0.4em 0;
}
.dtf-bestemming a{color:var(--brand);}
.dtf-bestemming .wrap{max-width:1040px;margin:0 auto;padding:0 24px;}
.dtf-bestemming .photo{
  width:100%;height:100%;
  background:linear-gradient(135deg,var(--ph1,#3B2467) 0%,var(--ph2,#F2883A) 100%);
}

/* HERO */
.dtf-bestemming .hero{
  position:relative;min-height:max(54vh,420px);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.dtf-bestemming .hero .photo{position:absolute;inset:0;z-index:0;}
.dtf-bestemming .hero .photo img{width:100%;height:100%;object-fit:cover;display:block;}
.dtf-bestemming .hero .photo::after{
  content:"";position:absolute;inset:0;background:rgba(20,8,30,0.32);
}
.dtf-bestemming .hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:72px;z-index:1;display:block;}
.dtf-bestemming .hero .wrap{
  position:relative;z-index:2;width:100%;
  /*
   * Veel thema's (waaronder dit thema) hangen het logo los over de hero
   * heen, tot zo'n 230px vanaf de linkerkant van het scherm. Op brede
   * schermen staat de gecentreerde .wrap daar vanzelf al voorbij, maar op
   * laptop-/tabletbreedtes (waar .wrap dichter tegen de linkerrand zit)
   * schuift deze regel de hero-tekst net zo ver naar rechts als nodig om
   * altijd naast het logo te blijven — zonder op brede schermen onnodig
   * veel extra ruimte te pakken.
   */
  padding-left:clamp(24px, calc(235px - (100vw - 1040px) / 2), 260px);
}
.dtf-bestemming .hero-content{
  display:flex;flex-direction:column;padding:40px 0 92px;
}
.dtf-bestemming .eyebrow{
  display:inline-block;background:var(--accent);color:#fff;
  font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;margin-bottom:14px;width:fit-content;
}
.dtf-bestemming .hero h1{color:#fff;font-size:clamp(32px,5vw,54px);margin-bottom:10px;}
.dtf-bestemming .hero p{color:#f1ece0;max-width:560px;font-size:17px;margin:0;}

/* TOC (in hero) */
.dtf-bestemming .toc-bar{margin-top:34px;}
.dtf-bestemming .toc-label{font-family:var(--font-ui);font-size:11.5px;font-weight:700;color:#fff;opacity:.9;text-transform:uppercase;letter-spacing:.05em;margin:0 0 10px 4px;text-shadow:0 1px 4px rgba(0,0,0,0.35);}
.dtf-bestemming .toc{display:flex;flex-wrap:wrap;gap:8px;}
.dtf-bestemming .toc a{
  display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
  font-family:var(--font-ui);font-size:13.5px;font-weight:600;padding:6px 16px 6px 6px;border-radius:999px;
  background:#fff;transition:transform .15s ease,background .15s ease;box-shadow:0 4px 14px rgba(0,0,0,0.12);
}
.dtf-bestemming .toc a:hover{background:var(--accent-soft);transform:translateY(-2px);}
.dtf-bestemming .toc a .ic-circle{
  width:28px;height:28px;border-radius:50%;flex:none;color:#fff;
  display:flex;align-items:center;justify-content:center;background:var(--brand);
}
.dtf-bestemming .toc a:nth-child(2n) .ic-circle{background:var(--accent);}
.dtf-bestemming .toc a:nth-child(3n) .ic-circle{background:#C23B5C;}
.dtf-bestemming .toc a .ic-circle svg{width:14px;height:14px;}

.dtf-bestemming section{padding:56px 0;scroll-margin-top:130px;}
.dtf-bestemming section.alt{background:var(--paper-alt);}
.dtf-bestemming .section-head{max-width:620px;margin-bottom:28px;}
.dtf-bestemming .kicker{color:var(--accent);font-family:var(--font-ui);font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px;display:block;}
.dtf-bestemming .section-head p{color:var(--ink-soft);margin:0;padding-right:8px;}

/* Carousel-cards (Uitgelicht + Excursies) */
.dtf-bestemming .carousel-wrap{position:relative;}
.dtf-bestemming .carousel{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:10px;margin:0 -2px;scrollbar-width:none;
}
.dtf-bestemming .carousel::-webkit-scrollbar{display:none;}
.dtf-bestemming .h-card{
  flex:0 0 235px;scroll-snap-align:start;
  border-radius:var(--radius);overflow:hidden;position:relative;height:260px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
}
.dtf-bestemming .h-card .thumb{height:140px;position:relative;flex:none;}
.dtf-bestemming .h-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.dtf-bestemming .h-card .source-badge{
  position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;padding:4px 9px 4px 7px;border-radius:999px;color:#fff;
}
.dtf-bestemming .h-card .source-badge svg{width:13px;height:13px;}
.dtf-bestemming .source-badge.blog{background:var(--brand);}
.dtf-bestemming .source-badge.excursie{background:var(--accent);}
.dtf-bestemming .h-card .h-body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:6px;flex:1;}
.dtf-bestemming .h-card .h-body h3{font-size:14.5px;margin:0;line-height:1.3;}
.dtf-bestemming .h-card .h-source-label{font-size:11.5px;color:var(--ink-soft);line-height:1.45;}
.dtf-bestemming .h-card .h-cta{margin-top:auto;font-size:12.5px;font-weight:700;color:var(--brand);text-decoration:none;}
/* Bloglijst (Uitgelicht) toont een korte samenvatting i.p.v. een label, dus die kaarten zijn iets hoger en de tekst wordt na een paar regels afgekapt. */
.dtf-bestemming .h-card-excerpt .h-card{height:310px;}
.dtf-bestemming .h-card-excerpt .h-source-label{
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.dtf-bestemming .carousel-static{overflow:visible;}
.dtf-bestemming .carousel-static .carousel{flex-wrap:wrap;overflow:visible;}
.dtf-bestemming .h-card .h-cta:hover{color:var(--brand-dark);}
.dtf-bestemming .car-btn{
  position:absolute;top:calc(50% - 16px);width:38px;height:38px;border-radius:50%;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--brand-dark);
  font-size:18px;z-index:3;
}
.dtf-bestemming .car-btn.prev{left:-18px;}
.dtf-bestemming .car-btn.next{right:-18px;}
@media (max-width:700px){ .dtf-bestemming .car-btn{display:none;} }

/* Placeholder card wanneer er nog geen gekoppelde blogs zijn */
.dtf-bestemming .h-card.empty{
  align-items:center;justify-content:center;text-align:center;padding:20px;color:var(--ink-soft);font-size:13.5px;
}

/* WEER */
.dtf-bestemming .weather-card{
  background:var(--gradient);
  border-radius:var(--radius);color:#fff;padding:30px;box-shadow:var(--shadow);
}
.dtf-bestemming .weather-card .top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px;margin-bottom:22px;}
.dtf-bestemming .weather-card h2{color:#fff;margin:0;}
.dtf-bestemming .avg-pill{
  display:inline-flex;align-items:center;background:rgba(255,255,255,0.14);
  padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;
}
.dtf-bestemming .months{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.dtf-bestemming .month{background:rgba(255,255,255,0.08);border-radius:10px;padding:12px 6px;text-align:center;}
.dtf-bestemming .month .m{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;opacity:.8;margin-bottom:6px;}
.dtf-bestemming .month .ic{margin-bottom:6px;display:flex;align-items:center;justify-content:center;}
.dtf-bestemming .wicon{width:22px;height:22px;stroke:currentColor;opacity:.95;}
.dtf-bestemming .month .t{font-size:14.5px;font-weight:700;}
.dtf-bestemming .month .t small{font-weight:400;opacity:.75;font-size:11.5px;}
.dtf-bestemming .weather-foot{margin-top:18px;font-size:12.5px;opacity:.85;}

/* Map */
.dtf-bestemming .map-card{position:relative;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line);}
.dtf-bestemming .dtf-map{height:440px;width:100%;background:var(--paper-alt);}
.dtf-bestemming .dtf-map.adding{cursor:crosshair;}
.dtf-bestemming .map-add-btn{
  position:absolute;top:14px;right:14px;z-index:1000;display:flex;align-items:center;gap:7px;
  background:#fff;color:var(--brand-dark);border:none;border-radius:999px;padding:9px 16px 9px 12px;
  font-family:var(--font-body);font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,0.18);
  transition:background .15s ease,color .15s ease;
}
.dtf-bestemming .map-add-btn svg{width:15px;height:15px;flex:none;}
.dtf-bestemming .map-add-btn:hover{background:var(--accent-soft);}
.dtf-bestemming .map-add-btn.active{background:var(--brand);color:#fff;}
.dtf-bestemming .map-pin-icon{
  position:relative;width:24px;height:24px;border-radius:50% 50% 50% 0;
  background:var(--accent);transform:rotate(-45deg);
  box-shadow:0 2px 6px rgba(20,8,30,0.4);
}
.dtf-bestemming .map-pin-icon::after{
  content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;background:#fff;border-radius:50%;
}
.dtf-bestemming .pin-form{display:flex;flex-direction:column;gap:8px;min-width:180px;font-family:var(--font-body);}
.dtf-bestemming .pin-form input,
.dtf-bestemming .pin-form textarea{
  border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13.5px;
  font-family:var(--font-body);outline:none;
}
.dtf-bestemming .pin-form input:focus,
.dtf-bestemming .pin-form textarea:focus{border-color:var(--brand);}
.dtf-bestemming .pin-form button{
  background:var(--brand);color:#fff;border:none;border-radius:8px;padding:8px 12px;
  font-family:var(--font-body);font-size:13px;font-weight:700;cursor:pointer;
}
.dtf-bestemming .pin-form button:hover{background:var(--brand-dark);}
.dtf-bestemming .pin-form .pin-error{color:#b32d2e;font-size:12px;margin:0;}
.dtf-bestemming .leaflet-popup-content-wrapper{border-radius:12px;box-shadow:var(--shadow);}
.dtf-bestemming .leaflet-popup-content{font-family:var(--font-body);font-size:13.5px;margin:11px 14px;}
.dtf-bestemming .leaflet-popup-content strong{font-family:var(--font-head);font-size:14.5px;}
.dtf-bestemming .pin-tag{display:inline-block;margin-top:4px;font-size:11px;font-weight:700;color:var(--brand-dark);background:#efe4f6;padding:2px 8px;border-radius:999px;}

/* FAQ */
.dtf-bestemming .faq{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;align-items:start;}
.dtf-bestemming .faq-col{min-width:0;}
.dtf-bestemming .faq-item{border-bottom:1px solid var(--line);}
.dtf-bestemming .faq-item summary{
  list-style:none;cursor:pointer;padding:18px 4px;font-weight:700;font-size:16px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.dtf-bestemming .faq-item summary::-webkit-details-marker{display:none;}
.dtf-bestemming .faq-item summary .plus{color:var(--accent);font-size:20px;font-weight:400;transition:transform .2s;}
.dtf-bestemming .faq-item[open] summary .plus{transform:rotate(45deg);}
.dtf-bestemming .faq-item .a{padding:0 4px 20px;color:var(--ink-soft);font-size:15px;max-width:680px;}

/* Voorbereiding: uitgelichte blogs + affiliate-rijen */
.dtf-bestemming .prep-blogs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:36px;}
.dtf-bestemming .prep-blog-card{position:relative;height:190px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:block;text-decoration:none;}
.dtf-bestemming .prep-blog-card .photo{position:absolute;inset:0;}
.dtf-bestemming .prep-blog-card .photo img{width:100%;height:100%;object-fit:cover;display:block;}
.dtf-bestemming .prep-blog-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,8,30,0.72) 0%,rgba(20,8,30,0.1) 55%,transparent 100%);}
.dtf-bestemming .prep-blog-tag{
  position:absolute;top:12px;left:12px;z-index:2;background:rgba(255,255,255,0.92);color:var(--brand-dark);
  font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;
}
.dtf-bestemming .prep-blog-label{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:#fff;font-size:13.5px;font-style:italic;line-height:1.4;}
.dtf-bestemming .prep-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;}
.dtf-bestemming .prep-col-label{font-family:var(--font-ui);font-size:11.5px;font-weight:700;color:var(--brand-dark);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;}
.dtf-bestemming .prep-row{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);}
.dtf-bestemming .prep-icon{
  width:34px;height:34px;border-radius:10px;flex:none;color:#fff;background:var(--brand);
  display:flex;align-items:center;justify-content:center;
}
.dtf-bestemming .prep-row:nth-of-type(3n-1) .prep-icon{background:var(--accent);}
.dtf-bestemming .prep-row:nth-of-type(3n) .prep-icon{background:#C23B5C;}
.dtf-bestemming .prep-icon svg{width:17px;height:17px;}
.dtf-bestemming .prep-row .t{display:flex;flex-direction:column;gap:1px;}
.dtf-bestemming .prep-row .t strong{font-size:14.5px;}
.dtf-bestemming .prep-row .t span{font-size:12px;color:var(--ink-soft);}
.dtf-bestemming .prep-row .go{margin-left:auto;color:var(--line);flex:none;}
.dtf-bestemming .prep-row .go svg{width:16px;height:16px;}
.dtf-bestemming .prep-row:hover .t strong{color:var(--brand);}
.dtf-bestemming .prep-row:hover .go{color:var(--accent);}
.dtf-bestemming .prep-note{margin-top:20px;font-size:12.5px;color:var(--ink-soft);font-style:italic;}

/* Reisadvies (live, Rijksoverheid — serverside opgehaald, zie DTF_Reisadvies) */
.dtf-bestemming .reisadvies-card{
  display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);margin-bottom:36px;
}
.dtf-bestemming .reisadvies-icon{
  width:40px;height:40px;border-radius:10px;flex:none;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.dtf-bestemming .reisadvies-icon svg{width:20px;height:20px;}
.dtf-bestemming .reisadvies-top{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:7px;}
.dtf-bestemming .reisadvies-top h3{font-size:16px;margin:0;color:var(--ink);}
.dtf-bestemming .reisadvies-live{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--font-ui);font-size:10.5px;font-weight:700;
  color:#3aa76d;text-transform:uppercase;letter-spacing:.04em;
}
.dtf-bestemming .reisadvies-dot{width:7px;height:7px;border-radius:50%;background:#3aa76d;animation:dtf-pulse-dot 2s infinite;}
@keyframes dtf-pulse-dot{
  0%{box-shadow:0 0 0 0 rgba(58,167,109,.5);}
  70%{box-shadow:0 0 0 6px rgba(58,167,109,0);}
  100%{box-shadow:0 0 0 0 rgba(58,167,109,0);}
}
.dtf-bestemming .reisadvies-text{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:0 0 8px;}
.dtf-bestemming .reisadvies-date{font-size:12px;color:var(--ink-soft);margin-bottom:10px;}
.dtf-bestemming .reisadvies-cta{font-size:13px;font-weight:700;color:var(--brand);text-decoration:none;}
.dtf-bestemming .reisadvies-cta:hover{color:var(--brand-dark);}

@media (max-width:820px){
  .dtf-bestemming .feature-card{grid-template-columns:1fr;max-width:420px;}
  .dtf-bestemming .feature-card .thumb{height:180px;}
  .dtf-bestemming .months{grid-template-columns:repeat(4,1fr);}
  .dtf-bestemming .prep-blogs{grid-template-columns:1fr;}
  .dtf-bestemming .prep-grid{grid-template-columns:1fr;gap:0;}
  .dtf-bestemming .faq{grid-template-columns:1fr;gap:0;}
}
@media (max-width:560px){
  .dtf-bestemming .months{grid-template-columns:repeat(3,1fr);}
  .dtf-bestemming .dtf-map{height:340px;}
  .dtf-bestemming .map-add-btn span{display:none;}
  .dtf-bestemming .map-add-btn{padding:10px;}
  .dtf-bestemming .wrap{padding:0 20px;}
  .dtf-bestemming section{padding:40px 0;scroll-margin-top:96px;}
  /* Op mobiel is er te weinig breedte om tekst naast het logo te schuiven
     (zoals hierboven op desktop) — hier valt de tekst daarom onder het
     logo, met genoeg ruimte erboven om het niet te overlappen. */
  .dtf-bestemming .hero .wrap{padding-left:20px;}
  .dtf-bestemming .hero-content{padding:150px 0 72px;}
  .dtf-bestemming .toc-bar{padding:12px;}
  .dtf-bestemming .h-card-excerpt .h-card{height:290px;}
}