/* ── Caribious huisstijl-fonts voor Activities Bonaire ───────────────────
   Pacifico = het lettertype van het Caribious-logo (display/headers)
   Nourd    = Hanken Design Co. — commercieel, nog niet gelicentieerd.
              Tot die er is valt hij terug op Outfit (vergelijkbare
              geometrische sans). Licentie binnen? Zet dan het @font-face
              blok onderaan aan en je bent klaar.
   ───────────────────────────────────────────────────────────────────── */

:root{
  --display: "Pacifico", cursive;
  --sans:    "Nourd", "Outfit", system-ui, -apple-system, sans-serif;
  --serif:   var(--sans);          /* alles wat vroeger Fraunces was */
}

body{ font-family: var(--sans); letter-spacing: 0; }

/* ── Subheaders / kaarttitels: stevige sans, geen script ─────────────── */
.cat h3, .card h3, .story-card h3, .rel-card h3, .faq-item summary,
.cruise-badge strong, .tour-section h2, .related h2, .page-error h2,
h3, h4, h5{
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ── Prijzen, cijfers, statistieken: altijd sans, nooit script ───────── */
.card .price b, .stat b, .split .visual .float .big, .book-card .price b,
.book-card .total-line b, .rev-score .big, .rel-card .meta b, .mob-book b,
.itin .it-time{
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ── Mobiel menu terug naar sans (was Fraunces) ──────────────────────── */
.mobile a{ font-family: var(--sans); font-weight: 700; }

/* ── DISPLAY: de echte headers in Pacifico ───────────────────────────── */
.hero h1, .sec-head h2, .cruise-content h2, .signature h2, .cta h2,
.titleblock h1, .page-hero h1, .cat-hero h1{
  font-family: var(--display);
  font-weight: 400;              /* Pacifico heeft maar één gewicht */
  font-style: normal;
  letter-spacing: 0;             /* script verdraagt geen negatieve tracking */
  line-height: 1.28;             /* stokken en staarten hebben lucht nodig */
  padding-bottom: .06em;         /* voorkomt afgeknipte staarten */
}
.hero h1{ font-size: clamp(2.1rem, 4.9vw, 4rem); margin:.3em 0 .5em }
.sec-head h2{ font-size: clamp(1.7rem, 3.1vw, 2.5rem) }
.cruise-content h2{ font-size: clamp(1.7rem, 3.1vw, 2.45rem) }
.signature h2{ font-size: clamp(1.7rem, 3.4vw, 2.7rem) }
.cta h2{ font-size: clamp(1.55rem, 2.6vw, 2.2rem); line-height:1.3 }
.titleblock h1{ font-size: clamp(1.7rem, 3.4vw, 2.7rem) }

/* Pacifico kent geen cursief — accent met kleur i.p.v. schuinstand */
.hero h1 em, .sec-head h2 em, .signature h2 em{
  font-style: normal;
  color: var(--gold);
}

/* ── Variant B: ook subheaders in Pacifico (html.pacifico-subs) ──────── */
html.pacifico-subs .cat h3,
html.pacifico-subs .card h3,
html.pacifico-subs .story-card h3,
html.pacifico-subs .rel-card h3,
html.pacifico-subs .faq-item summary,
html.pacifico-subs .tour-section h2,
html.pacifico-subs .related h2{
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.34;
}

/* ── Nourd zelf hosten zodra de licentie er is ───────────────────────── */
/*
@font-face{ font-family:"Nourd"; src:url("fonts/nourd-regular.woff2") format("woff2");
            font-weight:400; font-display:swap }
@font-face{ font-family:"Nourd"; src:url("fonts/nourd-medium.woff2") format("woff2");
            font-weight:500; font-display:swap }
@font-face{ font-family:"Nourd"; src:url("fonts/nourd-semibold.woff2") format("woff2");
            font-weight:600; font-display:swap }
@font-face{ font-family:"Nourd"; src:url("fonts/nourd-bold.woff2") format("woff2");
            font-weight:700; font-display:swap }
@font-face{ font-family:"Nourd"; src:url("fonts/nourd-extrabold.woff2") format("woff2");
            font-weight:800; font-display:swap }
*/

/* ── BUGFIX categoriekaarten ─────────────────────────────────────────────
   .d1–.d8 zetten een gradient-fallback via de `background`-SHORTHAND.
   Die shorthand reset background-size naar `auto` en -position naar 0 0,
   en overschrijft daarmee de `cover` van .ph (zelfde specificiteit, maar
   later in het stylesheet). Gevolg: de categoriefoto's werden op ware
   grootte vanaf linksboven getoond in plaats van passend geschaald —
   vandaar dat je vooral lucht zag. Hier zetten we cover terug.
   ───────────────────────────────────────────────────────────────────── */
.cat .ph{ background-size:cover; background-position:center; }

/* ── Tourkaarten homepage: alleen titel, prijs en View ─────────────
   Bewust `article.card`: dat zijn alleen de bestsellers op de homepage.
   De catalogus (tours.html + categoriepagina's) gebruikt `<a class="card">`
   en houdt zijn operatornaam, sterren en eigen marges.
   Weg: de samenvatting, de duur, het aantal talen, "Instant confirmation" en
   de losse TripAdvisor-regel. De reviewregel wordt server-side ingevoegd
   met een inline `display:flex`, en inline stijl wint van een stylesheet
   — vandaar !important op díe ene regel.
   ───────────────────────────────────────────────────────────────────── */
article.card .body .desc,
article.card .body .instant,
article.card .body .meta{ display:none }
article.card .body > div:not(.foot){ display:none !important }

/* titel mag nu direct tegen de prijsregel aan */
article.card .body h3{ margin-bottom:0 }
article.card .body .foot{ margin-top:14px }

/* ── Hero leesbaar maken ─────────────────────────────────────────────────
   1. De inleidende zin eruit.
   2. `.hero-inner` zet een text-shadow die ALLES eronder erft, ook de
      labels EXPERIENCE / DATE / GUESTS in de zoekbalk. Daar hoort hij niet.
   3. Donkerder sluier links, zodat witte letters op elke foto blijven staan.
   ───────────────────────────────────────────────────────────────────── */
.hero p.lead{ display:none }
.hero .searchbar, .hero .searchbar *{ text-shadow:none }
.hero-bg .veil{ background:
  linear-gradient(100deg,rgba(3,20,26,.94) 0%,rgba(3,20,26,.84) 42%,rgba(3,20,26,.6) 72%,rgba(3,20,26,.42) 100%),
  linear-gradient(180deg,rgba(3,20,26,.62) 0%,rgba(3,20,26,.34) 26%,rgba(3,20,26,.34) 52%,rgba(3,20,26,.8) 100%) }
.hero h1{ margin-bottom:.3em }

/* "booked in seconds." als hele zin op zijn eigen regel */
.hero h1 em{ display:block }

/* ── Paginakoppen die in de eerste ronde gemist waren ────────────────────
   .pagehero  = tours.html + de negen categoriepagina's
   .legal     = privacy, voorwaarden, annulering
   .post-head = blogartikel      .not-found = 404 op de blog
   ───────────────────────────────────────────────────────────────────── */
.pagehero h1, .legal h1, .post-head h1, .not-found h1{
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1.28;
  padding-bottom: .06em;
}
.pagehero h1  { font-size: clamp(1.85rem, 4vw, 2.9rem) }
.page-hero h1 { font-size: clamp(2rem, 4.3vw, 3rem) }
.post-head h1 { font-size: clamp(1.9rem, 4.2vw, 3rem) }
.legal h1     { font-size: clamp(1.75rem, 3.4vw, 2.4rem) }
.not-found h1 { font-size: 1.9rem }

.pagehero h1 em, .page-hero h1 em, .post-head h1 em{
  font-style: normal;
  color: var(--gold);
}