/**
 * HW Yachtcharter — fv2-additions.css
 * Luxury overlay bovenop front-v2.css
 * Palet: navy · champagne goud · ivoor · wit
 * Groen: uitsluitend CTA-knoppen
 */

/* ════════════════════════════════════════════════════
   1. LUXURY TOKEN OVERRIDES
   ════════════════════════════════════════════════════ */
:root {
  --fv2-gold:        #c5a56d;   /* champagne goud — hoofd-accent */
  --fv2-gold-light:  #e8d5b7;   /* licht goud — subtiele tint */
  --fv2-gold-dark:   #9e7c45;   /* donker goud — hover */
  --fv2-ivory:       #f5f0e8;   /* warm ivoor — lichte secties */
  --fv2-cream:       #faf7f2;   /* warme wit — kaart bg */
  --fv2-off-white:   #f5f0e8;   /* override koude off-white */
  --fv2-charcoal:    #1a1a2e;   /* diep navy-zwart voor tekst */
  --fv2-text:        #2d2d3a;   /* body tekst */
  --fv2-text-muted:  #3d3d4e;  /* was #6b6880 — verhoogd naar WCAG AA */   /* subtekst */

  /* Groen alleen voor knoppen */
  --fv2-green:       #1a5c3a;   /* donker, luxe groen */
  --fv2-green-hov:   #0f3d26;
}

/* ════════════════════════════════════════════════════
   2. SECTION LABELS — goud ipv rood
   ════════════════════════════════════════════════════ */
.fv2-section__label {
  color: var(--fv2-gold);
  letter-spacing: .14em;
}

/* Sierlijntje onder sectie-label */
.fv2-section__label::after {
  content: '';
  display: block;
  width: 32px;
  height: 1.5px;
  background: var(--fv2-gold);
  margin: 8px 0 0;
  opacity: .6;
}

/* Dark + navy sections */
.fv2-section--dark  .fv2-section__label,
.fv2-section--navy  .fv2-section__label,
.fv2-lastminute     .fv2-section__label,
.fv2-lead           .fv2-section__label {
  color: var(--fv2-gold);
}
.fv2-section--dark  .fv2-section__label::after,
.fv2-section--navy  .fv2-section__label::after,
.fv2-lastminute     .fv2-section__label::after,
.fv2-lead           .fv2-section__label::after {
  background: var(--fv2-gold);
  opacity: .45;
}

/* ════════════════════════════════════════════════════
   3. HERO — editorial, champagne accenten
   ════════════════════════════════════════════════════ */

/* Rode bovenlijn → gouden bovenlijn */
.fv2-hero { border-top-color: var(--fv2-gold); }

/* Eyebrow */
.fv2-hero__eyebrow {
  color: var(--fv2-gold);
  font-weight: 600;
  letter-spacing: .16em;
}

/* H1 accent (em) → goud */
.fv2-hero__title em { color: var(--fv2-gold); }

/* Decoratief scheidingslijntje boven h1 */
.fv2-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--fv2-gold);
  vertical-align: middle;
  margin-right: 10px;
  opacity: .7;
}

/* Sub-tekst */
.fv2-hero__sub { color: rgba(255,255,255,.72); }

/* Telefoonnummer knop → ghost goud */
.fv2-btn.fv2-btn--phone {
  border-color: rgba(197,165,109,.5);
  color: rgba(255,255,255,.9);
}
.fv2-btn.fv2-btn--phone:hover {
  border-color: var(--fv2-gold);
  background: rgba(197,165,109,.12);
  color: #fff;
}

/* Trust pills → dunner, eleganter */
.fv2-trust-pill {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  background: rgba(197,165,109,.1);
  border: 1px solid rgba(197,165,109,.3);
  padding: 4px 11px;
  letter-spacing: .04em;
  backdrop-filter: blur(4px);
}

/* Hero fallback achtergrond */
.fv2-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 10a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm0 14v26M26 36H14a26 26 0 0 0 52 0H54' stroke='%23c5a56d' stroke-opacity='.05' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"),
    linear-gradient(155deg, #090f1a 0%, #0c1a2e 50%, #111d2e 100%);
  background-size: 80px 80px, cover;
}

/* ════════════════════════════════════════════════════
   4. TRUST BAR — gouden iconen
   ════════════════════════════════════════════════════ */
.fv2-trustbar { background: #0c1220; }
.fv2-trustbar__item { color: rgba(255,255,255,.72); font-weight: 600; }
.fv2-trustbar__item svg { color: var(--fv2-gold); }
.fv2-trustbar__sep { background: rgba(197,165,109,.25); }

/* ════════════════════════════════════════════════════
   5. STATISTIEKEN SECTIE
   ════════════════════════════════════════════════════ */
.fv2-stats {
  background: var(--fv2-ivory);
  padding: 56px 0;
  border-bottom: 1px solid rgba(197,165,109,.2);
}
.fv2-stat {
  padding: 16px 24px;
  text-align: center;
  position: relative;
}
/* Divider via modifier class — werkt ongeacht Bootstrap col-wrapper */
.fv2-stat--border::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(197,165,109,.3);
}
@media(max-width:575px){
  .fv2-stat--border::before {
    left: auto; top: 0; width: 60%; height: 1px;
    left: 20%;
  }
}
.fv2-stat__number {
  display: block;
  font-family: var(--fv2-serif);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  color: var(--fv2-navy);
  line-height: 1;
  letter-spacing: -.02em;
}
.fv2-stat__label {
  display: block;
  margin-top: 8px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fv2-gold);
}

/* ── WhatsApp knop in hero ───────────────────────── */
.fv2-btn.fv2-btn--whatsapp {
  background: #25d366;
  color: #fff;
  border: none;
}
.fv2-btn.fv2-btn--whatsapp:hover {
  background: #1aad54;
  color: #fff;
}

/* ── Last minute fallback ────────────────────────── */
.fv2-lastminute__empty {
  text-align: center;
  padding: 32px 0 16px;
  color: rgba(255,255,255,.55);
  font-size: .95rem;
}

/* ── Reviews trust badges ────────────────────────── */
.fv2-trust-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--fv2-border);
}
.fv2-trust-badges__sep {
  width: 1px; height: 18px;
  background: var(--fv2-border);
  flex-shrink: 0;
}
.fv2-trust-badges__item {
  font-size: .72rem;
  font-weight: 800;
  color: rgba(15,27,42,.45);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Review sterren rechts ───────────────────────── */
.fv2-review__stars {
  color: var(--fv2-gold);
  font-size: .85rem;
  letter-spacing: 1px;
  flex-shrink: 0;
}

/* ── Lead form status (niet privacy) ────────────── */
.fv2-lead__status {
  min-height: 1.4em;
  font-size: .8rem;
  color: rgba(255,255,255,.55);
  text-align: center;
  margin-top: 8px;
}

/* ── Vloot kaart placeholder ─────────────────────── */
.fv2-yacht-card__img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(145deg, var(--fv2-navy-mid), var(--fv2-navy));
}

/* ── Section border-top in CSS (niet inline) ─────── */
.fv2-lead { border-top: 1px solid rgba(255,255,255,.08); }

/* ════════════════════════════════════════════════════
   6. BARRIÈRE / FEARBUSTERS — goud ipv groen
   ════════════════════════════════════════════════════ */
.fv2-barrier { background: var(--fv2-ivory); }

.fv2-fearbuster {
  background: var(--fv2-cream);
  border: 1px solid rgba(197,165,109,.2);
  border-top: 2px solid var(--fv2-gold);
  transition: box-shadow .2s, transform .2s;
}
@media(hover:hover){
  .fv2-fearbuster:hover {
    box-shadow: 0 8px 32px rgba(12,26,46,.1);
    transform: translateY(-2px);
  }
}
.fv2-fearbuster__icon {
  background: rgba(197,165,109,.12);
  color: var(--fv2-gold);
}
.fv2-fearbuster__title { color: var(--fv2-navy); }
.fv2-fearbuster__text { color: var(--fv2-text-muted); }

.fv2-barrier__lead { color: var(--fv2-text-muted); }
.fv2-barrier__answer { color: var(--fv2-navy); }
.fv2-barrier__answer span { color: var(--fv2-gold); }

/* ════════════════════════════════════════════════════
   7. FLEET KAARTEN — warmer, meer premium
   ════════════════════════════════════════════════════ */
.fv2-fleet__grid { background: transparent; }

.fv2-yacht-card {
  background: var(--fv2-cream);
  border-color: rgba(197,165,109,.2);
  box-shadow: 0 2px 16px rgba(12,26,46,.07);
}
@media(hover:hover){
  .fv2-yacht-card:hover {
    box-shadow: 0 12px 48px rgba(12,26,46,.14);
    transform: translateY(-4px);
  }
}

/* Badge: rood → goud/navy combo */
.fv2-yacht-card__badge {
  background: rgba(12,26,46,.75);
  color: var(--fv2-gold);
  border: 1px solid rgba(197,165,109,.4);
  backdrop-filter: blur(4px);
  font-size: .58rem;
  letter-spacing: .08em;
}

/* Card body */
.fv2-yacht-card__meta { color: var(--fv2-gold); font-weight: 600; font-size: .68rem; letter-spacing: .08em; }
.fv2-yacht-card__name a { color: var(--fv2-navy); }
.fv2-yacht-card__name a:hover { color: var(--fv2-gold); }

/* Specs */
.fv2-yacht-card__specs { border-color: rgba(197,165,109,.2); }
.fv2-yacht-card__spec  { border-right-color: rgba(197,165,109,.2); color: var(--fv2-text-muted); }
.fv2-yacht-card__spec strong { color: var(--fv2-navy); }

/* Footer */
.fv2-yacht-card__footer { border-top-color: rgba(197,165,109,.2); }
.fv2-yacht-card__price-label { color: var(--fv2-text-muted); }
.fv2-yacht-card__price { color: var(--fv2-navy); }

/* ════════════════════════════════════════════════════
   8. FRIESLAND BELEVENIS — rijkere foto-overlay
   ════════════════════════════════════════════════════ */
.fv2-experience__caption {
  background: linear-gradient(transparent, rgba(10,18,30,.85));
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,.8);
}

/* Route pills */
.fv2-route-pill {
  border-color: rgba(197,165,109,.2);
  transition: background .15s, border-color .15s;
}
.fv2-route-pill:hover {
  background: rgba(197,165,109,.08);
  border-color: rgba(197,165,109,.4);
}
.fv2-route-pill__icon  { color: var(--fv2-gold); }
.fv2-route-pill__name  { color: rgba(255,255,255,.9); font-size: .85rem; font-weight: 600; }
.fv2-route-pill__days  { color: var(--fv2-gold); font-size: .68rem; letter-spacing: .06em; }

/* ════════════════════════════════════════════════════
   9. REVIEWS — goud accent
   ════════════════════════════════════════════════════ */
.fv2-proof { background: var(--fv2-ivory); }

.fv2-review {
  background: var(--fv2-cream);
  border-color: rgba(197,165,109,.2);
  border-left: 2px solid var(--fv2-gold);
}

/* Grote aanhalingstekens */
.fv2-review::before {
  content: '\201C';
  font-family: var(--fv2-serif);
  font-size: 4rem;
  color: var(--fv2-gold);
  opacity: .25;
  line-height: .6;
  display: block;
  margin-bottom: 8px;
}

.fv2-review__text { color: var(--fv2-text); font-style: normal; }
.fv2-review__author { color: var(--fv2-navy); font-size: .78rem; letter-spacing: .04em; }
.fv2-rating-big__score { color: var(--fv2-navy); }
.fv2-rating-big__stars { color: var(--fv2-gold); }
.fv2-rating-big__label { color: var(--fv2-text-muted); }

/* ════════════════════════════════════════════════════
   10. LEAD CAPTURE — eleganter formulier
   ════════════════════════════════════════════════════ */
.fv2-lead { background: #0a1220; }

.fv2-lead__input {
  background: rgba(255,255,255,.06);
  border-color: rgba(197,165,109,.25);
  color: #fff;
  border-radius: 0;
  font-family: var(--fv2-font);
}
.fv2-lead__input:focus { border-color: var(--fv2-gold); }
.fv2-lead__input::placeholder { color: rgba(255,255,255,.3); }

/* ════════════════════════════════════════════════════
   11. BUTTON ALIASSEN
   ════════════════════════════════════════════════════ */
.fv2-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  font-family: var(--fv2-font);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--fv2-green);
  color: #fff;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.fv2-btn-primary:hover,
.fv2-btn-primary:focus-visible { background: var(--fv2-green-hov); color: #fff; }
.fv2-btn-primary:active { transform: scale(.98); }

.fv2-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  font-family: var(--fv2-font);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.45);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.fv2-btn-outline:hover,
.fv2-btn-outline:focus-visible { border-color: #fff; background: rgba(255,255,255,.07); color: #fff; }

.fv2-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  font-family: var(--fv2-font);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--fv2-green);
  color: #fff;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.fv2-btn-sm:hover { background: var(--fv2-green-hov); color: #fff; }

/* Primair .fv2-btn override ook */
.fv2-btn.fv2-btn--primary { background: var(--fv2-green); }
.fv2-btn.fv2-btn--primary:hover { background: var(--fv2-green-hov); }

/* ════════════════════════════════════════════════════
   12. SECTION NAVY VARIANT
   ════════════════════════════════════════════════════ */
.fv2-section--navy {
  background: var(--fv2-navy);
  color: #fff;
}
.fv2-section--navy .fv2-section__title { color: #fff; }
.fv2-section--navy .fv2-section__sub   { color: rgba(255,255,255,.6); }

/* ════════════════════════════════════════════════════
   13. TYPOGRAFIE + WITRUIMTE (Velas/Seafarer niveau)
   ════════════════════════════════════════════════════ */

/* Genereuze sectie-padding — luxury sites gebruiken 80-100px */
.fv2-section          { padding: 88px 0; }
.fv2-search-section   { padding: 64px 0; }
.fv2-lastminute       { padding: 72px 0; }
.fv2-lead             { padding: 80px 0; }

/* Sectie-titels: groter, meer serif, editoriaal */
.fv2-section__title {
  font-family: var(--fv2-serif);
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  letter-spacing: -.02em;
  line-height: 1.18;
  color: var(--fv2-navy);
  margin-bottom: 16px;
}
.fv2-section--dark .fv2-section__title,
.fv2-section--navy .fv2-section__title { color: #fff; }

/* Sub-tekst */
.fv2-section__sub {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--fv2-text-muted);
  max-width: 520px;
  margin-bottom: 36px;
}
.fv2-section--dark .fv2-section__sub,
.fv2-section--navy .fv2-section__sub { color: rgba(255,255,255,.62); }

/* Hero H1 — maximaal editoriaal */
.fv2-hero__title {
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: 24px;
}

/* Jachtkaart foto: hogere verhouding — meer foto = meer verlangen */
.fv2-yacht-card__img { height: 260px; }

/* Fleet grid: kaarten op grotere schermen iets breder grids */
@media(min-width:1200px) {
  .fv2-fleet__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

/* ════════════════════════════════════════════════════
   14. RESPONSIVE MOBIEL
   ════════════════════════════════════════════════════ */
@media(max-width:767px) {
  .fv2-hero__content   { padding-top: 80px; padding-bottom: 64px; }
  .fv2-fleet__grid     { grid-template-columns: 1fr; }
  .fv2-fearbusters     { grid-template-columns: 1fr; }
  .fv2-experience__grid{ grid-template-columns: 1fr; }
  .fv2-experience__photo--large { grid-row: auto; }
  .fv2-reviews-grid    { grid-template-columns: 1fr; }
  .fv2-routes          { grid-template-columns: 1fr; }
  .fv2-trustbar__item  { font-size: .65rem; }
  .fv2-stat            { padding: 16px; }
  .fv2-stat + .fv2-stat { border-left: none; border-top: 1px solid rgba(197,165,109,.2); }
}

/* ════════════════════════════════════════════════════
   15. TOEGANKELIJKHEID
   ════════════════════════════════════════════════════ */
@media(prefers-reduced-motion: reduce) {
  .fv2-hero__scroll,
  .fv2-yacht-card,
  .fv2-fearbuster,
  .fv2-btn, .fv2-btn-primary, .fv2-btn-outline, .fv2-btn-sm,
  .fv2-yacht-card__img img,
  .fv2-experience__photo img,
  .fv2-route-pill { transition: none !important; animation: none !important; transform: none !important; }
}