/* =========================================================
   VAKANTIE NAAR NOORWEGEN - VOLLEDIGE CUSTOM CSS
   Versie: juli 2026 (herziene homepage)

   Dit is het complete bestand. Plak het in EEN keer, als
   vervanging van alles wat er nu staat. Niets samenvoegen,
   niets bewaren van de oude versie.

   Opbouw:
     DEEL 1 - Algemene artikel- en componentstijlen (ongewijzigd)
     DEEL 2 - Homepage (vervangt het oude deel 2 en deel 3)

   De oude "Homepage Fix V2" bestaat niet meer. Alles wat die
   met !important forceerde, wordt nu via specificiteit geregeld.
   ========================================================= */


/* =========================================================
   DEEL 1 - ALGEMENE VNN-CSS
   ========================================================= */
/* =========================================================
   Vakantie naar Noorwegen - custom stijl
   Volgorde: variabelen, header, notes, artikelcomponenten,
   tabellen, links, boekingsmodules, toegankelijkheid, mobiel.
   ========================================================= */

/* =========================================================
   Kleurvariabelen
   Alle --vnn-* tokens op één plek, zodat niets ongedefinieerd is.
   Pas de hex-waarden aan naar je exacte merkkleuren waar nodig;
   de blauwe en oranje tinten komen uit je bestaande CSS, de rest
   is daarop afgestemd.
   ========================================================= */

:root{
  /* Blauw (primair) */
  --vnn-blue:#001e60;          /* primair navy */
  --vnn-blue-mid:#003f8f;      /* accent en hover blauw */
  --vnn-blue-soft:#e8f0f9;     /* lichte blauwe achtergrond */

  /* Neutraal */
  --vnn-muted:#f6f8fa;         /* neutrale lichte achtergrond */
  --vnn-border:#dde3ea;        /* lichte randen */

  /* Crème (tips) */
  --vnn-cream:#fdf5e8;         /* crème achtergrond */
  --vnn-cream-border:#f0e2c4;  /* crème rand */

  /* Rood (waarschuwing) */
  --vnn-red:#e2492a;           /* warm rood */
  --vnn-red-dark:#b23417;      /* donker rood voor tekst */
  --vnn-red-soft:#fbeee9;      /* zacht rood achtergrond */

  /* Oranje (clickout en commercieel accent) */
  --vnn-orange:#ff4b00;
  --vnn-orange-dark:#c63b00;

  /* Link-tokens (afgeleid van bovenstaande) */
  --vnn-link-blue:var(--vnn-blue);
  --vnn-link-blue-hover:var(--vnn-blue-mid);
  --vnn-link-orange:var(--vnn-orange);
  --vnn-link-orange-dark:var(--vnn-orange-dark);
}

/* =========================================================
   Header signup verbergen
   ========================================================= */

.penci-header-signup-form{
  padding-top:0;
  padding-bottom:0;
  display:none;
}

/* =========================================================
   Algemeen infoblok: .vnn-note (+ varianten)
   Basis = info (blauw). Modifiers voor tip en waarschuwing.
   ========================================================= */

.entry-content .vnn-note,
.penci-entry-content .vnn-note{
  background:var(--vnn-muted);
  border:1px solid var(--vnn-border);
  border-left:5px solid var(--vnn-blue-mid);
  border-radius:10px;
  padding:1.25rem 1.5rem;
  margin:1.5rem 0;
}

.entry-content .vnn-note strong:first-child,
.penci-entry-content .vnn-note strong:first-child{
  color:var(--vnn-blue-mid);
}

/* Tip-variant (crème/oranje) */
.entry-content .vnn-note.vnn-note--tip,
.penci-entry-content .vnn-note.vnn-note--tip{
  background:var(--vnn-cream);
  border-color:var(--vnn-cream-border);
  border-left-color:#d98b1f;
}

.entry-content .vnn-note.vnn-note--tip strong:first-child,
.penci-entry-content .vnn-note.vnn-note--tip strong:first-child{
  color:var(--vnn-red-dark);
}

/* Waarschuwing-variant (zacht rood) */
.entry-content .vnn-note.vnn-note--warning,
.penci-entry-content .vnn-note.vnn-note--warning{
  background:var(--vnn-red-soft);
  border-color:#f1cabd;
  border-left-color:var(--vnn-red);
}

.entry-content .vnn-note.vnn-note--warning strong:first-child,
.penci-entry-content .vnn-note.vnn-note--warning strong:first-child{
  color:var(--vnn-red-dark);
}

/* =========================================================
   Artikelcomponenten
   De classes die in de ferry-hub en updateblokken worden gebruikt.
   ========================================================= */

/* --- Intro-lead --- */
.entry-content .vnn-hub-intro,
.penci-entry-content .vnn-hub-intro{
  font-size:1.15rem;
  line-height:1.7;
  font-weight:500;
  color:var(--vnn-blue);
  margin:0 0 1.5rem;
}

/* --- Auteurbyline --- */
.entry-content .vnn-byline,
.penci-entry-content .vnn-byline{
  font-size:.95rem;
  color:#5b6675;
  margin:0 0 1.75rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--vnn-border);
}

/* --- Callout-boxen: update, tip, route-note, experience --- */
.entry-content .vnn-update-note,
.entry-content .vnn-tip-box,
.entry-content .vnn-route-note,
.entry-content .vnn-experience-box,
.penci-entry-content .vnn-update-note,
.penci-entry-content .vnn-tip-box,
.penci-entry-content .vnn-route-note,
.penci-entry-content .vnn-experience-box{
  border-radius:12px;
  padding:1.25rem 1.5rem;
  margin:1.5rem 0;
}

/* Strakke binnenmarges voor alle boxen (geen dubbele witruimte) */
.entry-content .vnn-note > :first-child,
.entry-content .vnn-update-note > :first-child,
.entry-content .vnn-tip-box > :first-child,
.entry-content .vnn-route-note > :first-child,
.entry-content .vnn-experience-box > :first-child,
.entry-content .vnn-region-block > :first-child,
.penci-entry-content .vnn-note > :first-child,
.penci-entry-content .vnn-update-note > :first-child,
.penci-entry-content .vnn-tip-box > :first-child,
.penci-entry-content .vnn-route-note > :first-child,
.penci-entry-content .vnn-experience-box > :first-child,
.penci-entry-content .vnn-region-block > :first-child{
  margin-top:0;
}

.entry-content .vnn-note > :last-child,
.entry-content .vnn-update-note > :last-child,
.entry-content .vnn-tip-box > :last-child,
.entry-content .vnn-route-note > :last-child,
.entry-content .vnn-experience-box > :last-child,
.entry-content .vnn-region-block > :last-child,
.penci-entry-content .vnn-note > :last-child,
.penci-entry-content .vnn-update-note > :last-child,
.penci-entry-content .vnn-tip-box > :last-child,
.penci-entry-content .vnn-route-note > :last-child,
.penci-entry-content .vnn-experience-box > :last-child,
.penci-entry-content .vnn-region-block > :last-child{
  margin-bottom:0;
}

/* Update-note: opvallend, navy accent */
.entry-content .vnn-update-note,
.penci-entry-content .vnn-update-note{
  background:var(--vnn-blue-soft);
  border:1px solid var(--vnn-border);
  border-left:5px solid var(--vnn-blue-mid);
  margin-bottom:2rem;
}

.entry-content .vnn-update-note strong:first-child,
.penci-entry-content .vnn-update-note strong:first-child{
  color:var(--vnn-blue-mid);
}

/* Route-note: neutrale info */
.entry-content .vnn-route-note,
.penci-entry-content .vnn-route-note{
  background:var(--vnn-muted);
  border:1px solid var(--vnn-border);
  border-left:5px solid var(--vnn-blue-mid);
}

.entry-content .vnn-route-note strong:first-child,
.penci-entry-content .vnn-route-note strong:first-child{
  color:var(--vnn-blue-mid);
}

/* Tip-box: crème/oranje */
.entry-content .vnn-tip-box,
.penci-entry-content .vnn-tip-box{
  background:var(--vnn-cream);
  border:1px solid var(--vnn-cream-border);
  border-left:5px solid #d98b1f;
}

.entry-content .vnn-tip-box strong:first-child,
.penci-entry-content .vnn-tip-box strong:first-child{
  color:var(--vnn-red-dark);
}

/* Experience-box: persoonlijke ervaring, oranje accent */
.entry-content .vnn-experience-box,
.penci-entry-content .vnn-experience-box{
  background:var(--vnn-cream);
  border:1px solid var(--vnn-cream-border);
  border-left:5px solid var(--vnn-orange);
}

.entry-content .vnn-experience-box h3,
.penci-entry-content .vnn-experience-box h3{
  margin:0 0 .6rem;
  font-size:1.15rem;
  color:var(--vnn-red-dark);
}

/* --- Snelnavigatie (jumpnav) als chips --- */
.entry-content .vnn-jumpnav,
.penci-entry-content .vnn-jumpnav{
  list-style:none;
  margin:0 0 2rem;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.entry-content .vnn-jumpnav li,
.penci-entry-content .vnn-jumpnav li{
  margin:0;
}

.entry-content .vnn-jumpnav a,
.penci-entry-content .vnn-jumpnav a{
  display:inline-block;
  padding:.4rem .9rem;
  background:var(--vnn-muted);
  border:1px solid var(--vnn-border);
  border-radius:999px;
  font-size:.9rem;
  font-weight:600;
  color:var(--vnn-blue);
  text-decoration:none;
}

.entry-content .vnn-jumpnav a:hover,
.entry-content .vnn-jumpnav a:focus-visible,
.penci-entry-content .vnn-jumpnav a:hover,
.penci-entry-content .vnn-jumpnav a:focus-visible{
  background:var(--vnn-blue);
  border-color:var(--vnn-blue);
  color:#fff;
}

/* --- "Deze route past goed bij..." block --- */
.entry-content .vnn-region-block,
.penci-entry-content .vnn-region-block{
  background:var(--vnn-blue-soft);
  border:1px solid var(--vnn-border);
  border-radius:12px;
  padding:1.25rem 1.5rem;
  margin:1.5rem 0;
}

.entry-content .vnn-region-block h3,
.penci-entry-content .vnn-region-block h3{
  margin:0 0 .75rem;
  font-size:1.1rem;
  color:var(--vnn-blue);
}

.entry-content .vnn-region-block ul,
.penci-entry-content .vnn-region-block ul{
  margin:0;
  padding-left:1.2rem;
}

.entry-content .vnn-region-block li,
.penci-entry-content .vnn-region-block li{
  margin:.3rem 0;
}

/* --- CTA-box (bijv. "Route nog niet gekozen?" / kies je regio) --- */
.entry-content .vnn-cta-box,
.penci-entry-content .vnn-cta-box{
  background:#fff;
  border:2px solid var(--vnn-blue);
  border-radius:16px;
  padding:1.75rem;
  margin:2rem 0;
  box-shadow:0 10px 28px rgba(0,30,96,.10);
}

.entry-content .vnn-cta-box h2,
.penci-entry-content .vnn-cta-box h2{
  margin:0 0 .5rem;
  font-size:1.35rem;
  color:var(--vnn-blue);
}

.entry-content .vnn-cta-box > p,
.penci-entry-content .vnn-cta-box > p{
  margin:0 0 1.25rem;
  color:#4b5563;
}

.entry-content .vnn-cta-box ul,
.penci-entry-content .vnn-cta-box ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.85rem;
}

.entry-content .vnn-cta-box li,
.penci-entry-content .vnn-cta-box li{
  margin:0;
}

.entry-content .vnn-cta-box a,
.penci-entry-content .vnn-cta-box a{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  height:100%;
  padding:.9rem 1.1rem;
  background:var(--vnn-muted);
  border:1px solid var(--vnn-border);
  border-radius:12px;
  font-weight:700;
  color:var(--vnn-blue);
  text-decoration:none;
}

.entry-content .vnn-cta-box a:hover,
.entry-content .vnn-cta-box a:focus-visible,
.penci-entry-content .vnn-cta-box a:hover,
.penci-entry-content .vnn-cta-box a:focus-visible{
  background:var(--vnn-blue);
  border-color:var(--vnn-blue);
  color:#fff;
}

/* Sublabel binnen CTA-links (was inline zonder spacing) */
.entry-content .vnn-cta-small,
.penci-entry-content .vnn-cta-small{
  display:block;
  font-size:.82rem;
  font-weight:500;
  line-height:1.35;
  color:#6b7280;
}

.entry-content .vnn-cta-box a:hover .vnn-cta-small,
.entry-content .vnn-cta-box a:focus-visible .vnn-cta-small,
.penci-entry-content .vnn-cta-box a:hover .vnn-cta-small,
.penci-entry-content .vnn-cta-box a:focus-visible .vnn-cta-small{
  color:rgba(255,255,255,.85);
}

/* --- Keuzegrid met kaarten (bijv. Kopenhagen vs via Zweden) --- */
.entry-content .vnn-choice-grid,
.penci-entry-content .vnn-choice-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.25rem;
  margin:1.5rem 0 2rem;
}

.entry-content .vnn-choice-card,
.penci-entry-content .vnn-choice-card{
  background:#fff;
  border:1px solid var(--vnn-border);
  border-radius:12px;
  padding:1.25rem 1.4rem;
  box-shadow:0 6px 18px rgba(0,30,96,.06);
}

.entry-content .vnn-choice-card h3,
.penci-entry-content .vnn-choice-card h3{
  margin:0 0 .5rem;
  font-size:1.1rem;
  color:var(--vnn-blue);
}

.entry-content .vnn-choice-card p,
.penci-entry-content .vnn-choice-card p{
  margin:0 0 .75rem;
}

.entry-content .vnn-choice-card p:last-child,
.penci-entry-content .vnn-choice-card p:last-child{
  margin-bottom:0;
}

/* --- Slot-CTA (donker, "Verder plannen") --- */
.entry-content .vnn-final-cta,
.penci-entry-content .vnn-final-cta{
  background:var(--vnn-blue);
  color:#fff;
  border-radius:16px;
  padding:1.9rem;
  margin:2.5rem 0;
}

.entry-content .vnn-final-cta h2,
.penci-entry-content .vnn-final-cta h2{
  margin:0 0 .5rem;
  font-size:1.35rem;
  color:#fff;
}

.entry-content .vnn-final-cta > p,
.penci-entry-content .vnn-final-cta > p{
  margin:0 0 1.25rem;
  color:rgba(255,255,255,.85);
}

.entry-content .vnn-final-cta ul,
.penci-entry-content .vnn-final-cta ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.85rem;
}

.entry-content .vnn-final-cta li,
.penci-entry-content .vnn-final-cta li{
  margin:0;
}

.entry-content .vnn-final-cta a,
.penci-entry-content .vnn-final-cta a{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  height:100%;
  padding:.9rem 1.1rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
}

.entry-content .vnn-final-cta a:hover,
.entry-content .vnn-final-cta a:focus-visible,
.penci-entry-content .vnn-final-cta a:hover,
.penci-entry-content .vnn-final-cta a:focus-visible{
  background:#fff;
  color:var(--vnn-blue);
}

.entry-content .vnn-final-cta a .vnn-cta-small,
.penci-entry-content .vnn-final-cta a .vnn-cta-small{
  color:rgba(255,255,255,.75);
}

.entry-content .vnn-final-cta a:hover .vnn-cta-small,
.entry-content .vnn-final-cta a:focus-visible .vnn-cta-small,
.penci-entry-content .vnn-final-cta a:hover .vnn-cta-small,
.penci-entry-content .vnn-final-cta a:focus-visible .vnn-cta-small{
  color:var(--vnn-blue-mid);
}

/* --- Primaire CTA-knop (vaak een /go/-link) --- */
/* !important nodig omdat de /go/-linkregel verderop specifieker is */
.entry-content .vnn-primary-cta,
.penci-entry-content .vnn-primary-cta{
  display:inline-block;
  padding:.8rem 1.5rem;
  margin:.5rem 0 1rem;
  background:var(--vnn-orange);
  color:#fff !important;
  font-weight:700;
  text-decoration:none !important;
  border-radius:10px;
  box-shadow:0 6px 16px rgba(255,75,0,.25);
  transition:background .18s ease,transform .18s ease;
}

.entry-content .vnn-primary-cta:hover,
.entry-content .vnn-primary-cta:focus-visible,
.penci-entry-content .vnn-primary-cta:hover,
.penci-entry-content .vnn-primary-cta:focus-visible{
  background:var(--vnn-orange-dark);
  transform:translateY(-1px);
}

/* =========================================================
   Basis-tabelstijl voor ALLE content-tabellen
   ========================================================= */

.entry-content table,
.penci-entry-content table{
  width:100%;
  border-collapse:collapse;
  margin:1.5rem 0 2rem;
}

.entry-content table th,
.entry-content table td,
.penci-entry-content table th,
.penci-entry-content table td{
  border:1px solid var(--vnn-border);
  padding:.75rem;
  vertical-align:top;
  text-align:left;
}

.entry-content table thead,
.penci-entry-content table thead{
  background:var(--vnn-blue-soft);
}

.entry-content table th,
.penci-entry-content table th{
  color:var(--vnn-blue);
}

/* Lichte zebra-rijen */
.entry-content table tbody tr:nth-child(even),
.penci-entry-content table tbody tr:nth-child(even){
  background:#fbfcfd;
}

/* =========================================================
   Content links: intern, extern en /go/
   ========================================================= */

.entry-content p a,
.entry-content li a,
.entry-content table a,
.entry-content blockquote a,
.entry-content figcaption a,
.penci-entry-content p a,
.penci-entry-content li a,
.penci-entry-content table a,
.penci-entry-content blockquote a,
.penci-entry-content figcaption a{
  color:var(--vnn-link-blue);
  font-weight:600;
  text-decoration-line:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  text-decoration-color:rgba(0,30,96,.35);
  transition:color .18s ease,text-decoration-color .18s ease,background-color .18s ease;
}

.entry-content p a:hover,
.entry-content li a:hover,
.entry-content table a:hover,
.entry-content blockquote a:hover,
.entry-content figcaption a:hover,
.entry-content p a:focus-visible,
.entry-content li a:focus-visible,
.entry-content table a:focus-visible,
.entry-content blockquote a:focus-visible,
.entry-content figcaption a:focus-visible,
.penci-entry-content p a:hover,
.penci-entry-content li a:hover,
.penci-entry-content table a:hover,
.penci-entry-content blockquote a:hover,
.penci-entry-content figcaption a:hover,
.penci-entry-content p a:focus-visible,
.penci-entry-content li a:focus-visible,
.penci-entry-content table a:focus-visible,
.penci-entry-content blockquote a:focus-visible,
.penci-entry-content figcaption a:focus-visible{
  color:var(--vnn-link-blue-hover);
  text-decoration-color:currentColor;
}

/* Externe links: gestippelde onderstreping */
.entry-content p a[href^="http"]:not([href*="vakantienaarnoorwegen.nl"]):not([href*="/go/"]),
.entry-content li a[href^="http"]:not([href*="vakantienaarnoorwegen.nl"]):not([href*="/go/"]),
.entry-content table a[href^="http"]:not([href*="vakantienaarnoorwegen.nl"]):not([href*="/go/"]),
.entry-content blockquote a[href^="http"]:not([href*="vakantienaarnoorwegen.nl"]):not([href*="/go/"]),
.entry-content figcaption a[href^="http"]:not([href*="vakantienaarnoorwegen.nl"]):not([href*="/go/"]),
.penci-entry-content p a[href^="http"]:not([href*="vakantienaarnoorwegen.nl"]):not([href*="/go/"]),
.penci-entry-content li a[href^="http"]:not([href*="vakantienaarnoorwegen.nl"]):not([href*="/go/"]),
.penci-entry-content table a[href^="http"]:not([href*="vakantienaarnoorwegen.nl"]):not([href*="/go/"]),
.penci-entry-content blockquote a[href^="http"]:not([href*="vakantienaarnoorwegen.nl"]):not([href*="/go/"]),
.penci-entry-content figcaption a[href^="http"]:not([href*="vakantienaarnoorwegen.nl"]):not([href*="/go/"]){
  text-decoration-style:dotted;
  text-decoration-thickness:1.5px;
}

/* /go/-links: duidelijk herkenbaar als commerciële/clickout link */
.entry-content p a[href*="/go/"],
.entry-content li a[href*="/go/"],
.entry-content table a[href*="/go/"],
.entry-content blockquote a[href*="/go/"],
.entry-content figcaption a[href*="/go/"],
.penci-entry-content p a[href*="/go/"],
.penci-entry-content li a[href*="/go/"],
.penci-entry-content table a[href*="/go/"],
.penci-entry-content blockquote a[href*="/go/"],
.penci-entry-content figcaption a[href*="/go/"]{
  color:var(--vnn-link-orange-dark);
  font-weight:700;
  text-decoration-line:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-color:rgba(255,75,0,.45);
}

/* Clickout-symbool achter /go/-links */
.entry-content p a[href*="/go/"]::after,
.entry-content li a[href*="/go/"]::after,
.entry-content table a[href*="/go/"]::after,
.entry-content blockquote a[href*="/go/"]::after,
.entry-content figcaption a[href*="/go/"]::after,
.penci-entry-content p a[href*="/go/"]::after,
.penci-entry-content li a[href*="/go/"]::after,
.penci-entry-content table a[href*="/go/"]::after,
.penci-entry-content blockquote a[href*="/go/"]::after,
.penci-entry-content figcaption a[href*="/go/"]::after{
  content:" \2197"; /* pijl naar rechtsboven */
  font-size:.85em;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  display:inline-block;
  transform:translateY(-.04em);
}

.entry-content p a[href*="/go/"]:hover,
.entry-content li a[href*="/go/"]:hover,
.entry-content table a[href*="/go/"]:hover,
.entry-content blockquote a[href*="/go/"]:hover,
.entry-content figcaption a[href*="/go/"]:hover,
.entry-content p a[href*="/go/"]:focus-visible,
.entry-content li a[href*="/go/"]:focus-visible,
.entry-content table a[href*="/go/"]:focus-visible,
.entry-content blockquote a[href*="/go/"]:focus-visible,
.entry-content figcaption a[href*="/go/"]:focus-visible,
.penci-entry-content p a[href*="/go/"]:hover,
.penci-entry-content li a[href*="/go/"]:hover,
.penci-entry-content table a[href*="/go/"]:hover,
.penci-entry-content blockquote a[href*="/go/"]:hover,
.penci-entry-content figcaption a[href*="/go/"]:hover,
.penci-entry-content p a[href*="/go/"]:focus-visible,
.penci-entry-content li a[href*="/go/"]:focus-visible,
.penci-entry-content table a[href*="/go/"]:focus-visible,
.penci-entry-content blockquote a[href*="/go/"]:focus-visible,
.penci-entry-content figcaption a[href*="/go/"]:focus-visible{
  color:var(--vnn-link-orange);
  text-decoration-color:currentColor;
}

/* Geen underline op gelinkte afbeeldingen */
.entry-content a img,
.penci-entry-content a img{
  text-decoration:none;
}

/* Escape hatch: class="vnn-link-plain" verwijdert linkstyling */
.entry-content a.vnn-link-plain,
.penci-entry-content a.vnn-link-plain{
  color:inherit;
  font-weight:inherit;
  text-decoration:none;
}

.entry-content a.vnn-link-plain::after,
.penci-entry-content a.vnn-link-plain::after{
  content:none;
}

/* =========================================================
   Bookingmodule in artikelcontent - Direct Ferries
   ========================================================= */

#bookingmodule{
  box-sizing:border-box;
  width:100%;
  max-width:860px;
  min-height:360px;
  background:#eef5fb;
  border:2px solid #001e60;
  border-radius:18px;
  padding:18px;
  margin:2rem auto 2.5rem;
  box-shadow:0 12px 34px rgba(0,30,96,.16);
  overflow:hidden;
  position:relative;
}

#bookingmodule::before{
  content:"Veerboot naar Noorwegen zoeken";
  display:block;
  margin:-18px -18px 16px;
  padding:15px 18px;
  background:#001e60;
  color:#ffffff;
  font-size:19px;
  font-weight:700;
  line-height:1.25;
  text-align:center;
}

#bookingmodule::after{
  content:"Vergelijk routes, tijden en prijzen";
  display:block;
  margin:14px 2px 0;
  color:#001e60;
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  text-align:center;
}

#bookingmodule iframe,
#bookingmodule #dealFinder{
  display:block;
  width:100% !important;
  min-height:640px;
  height:640px !important;
  border:0;
  border-radius:12px;
  background:#ffffff;
}

@media (min-width:1024px){
  #bookingmodule{
    max-width:760px;
    min-height:360px;
  }
}

/* =========================================================
   Sidebar bookingmodule - Direct Ferries
   ========================================================= */

#bookingmodule-sidebar{
  box-sizing:border-box;
  width:100%;
  background:#ffffff;
  border:2px solid #ff4b00;
  border-radius:16px;
  padding:14px;
  margin:0 0 28px;
  box-shadow:0 10px 28px rgba(0,30,96,.14);
  overflow:hidden;
  position:relative;
}

#bookingmodule-sidebar::before{
  content:"Veerboot naar Noorwegen zoeken";
  display:block;
  margin:-14px -14px 12px;
  padding:13px 15px;
  background:#001e60;
  color:#ffffff;
  font-size:17px;
  font-weight:700;
  line-height:1.25;
  text-align:center;
}

#bookingmodule-sidebar::after{
  content:"Vergelijk routes, tijden en prijzen";
  display:block;
  margin:12px 2px 0;
  color:#4b5563;
  font-size:13px;
  line-height:1.35;
  text-align:center;
}

#bookingmodule-sidebar iframe,
#bookingmodule-sidebar #dealFinder{
  display:block;
  width:100% !important;
  min-height:660px;
  height:660px !important;
  border:0;
  background:#ffffff;
}

@media (min-width:1024px){
  .sidebar #bookingmodule-sidebar,
  .penci-sidebar-content #bookingmodule-sidebar,
  #secondary #bookingmodule-sidebar,
  aside #bookingmodule-sidebar{
    position:sticky;
    top:24px;
  }
}

/* =========================================================
   Toegankelijkheid: zichtbare focus
   ========================================================= */

.entry-content a:focus-visible,
.penci-entry-content a:focus-visible{
  outline:2px solid var(--vnn-blue);
  outline-offset:2px;
  border-radius:2px;
}

/* =========================================================
   Mobiel
   ========================================================= */

@media (max-width:700px){
  .entry-content .vnn-note,
  .entry-content .vnn-update-note,
  .entry-content .vnn-tip-box,
  .entry-content .vnn-route-note,
  .entry-content .vnn-experience-box,
  .entry-content .vnn-region-block,
  .penci-entry-content .vnn-note,
  .penci-entry-content .vnn-update-note,
  .penci-entry-content .vnn-tip-box,
  .penci-entry-content .vnn-route-note,
  .penci-entry-content .vnn-experience-box,
  .penci-entry-content .vnn-region-block{
    padding:1.2rem;
  }

  .entry-content .vnn-cta-box,
  .entry-content .vnn-final-cta,
  .penci-entry-content .vnn-cta-box,
  .penci-entry-content .vnn-final-cta{
    padding:1.35rem;
  }

  .entry-content .vnn-hub-intro,
  .penci-entry-content .vnn-hub-intro{
    font-size:1.08rem;
  }

  /* Grids naar één kolom */
  .entry-content .vnn-cta-box ul,
  .entry-content .vnn-final-cta ul,
  .entry-content .vnn-choice-grid,
  .penci-entry-content .vnn-cta-box ul,
  .penci-entry-content .vnn-final-cta ul,
  .penci-entry-content .vnn-choice-grid{
    grid-template-columns:1fr;
  }

  /* Brede tabellen horizontaal scrollbaar */
  .entry-content table,
  .penci-entry-content table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Bookingmodule in artikelcontent mobiel */
  #bookingmodule{
    min-height:520px;
    padding:12px;
    margin:1.5rem 0 2rem;
    border-radius:15px;
    background:#eef5fb;
  }

  #bookingmodule::before{
    margin:-12px -12px 12px;
    padding:13px 14px;
    font-size:16px;
  }

  #bookingmodule::after{
    font-size:13px;
  }

  #bookingmodule iframe,
  #bookingmodule #dealFinder{
    min-height:760px;
    height:760px !important;
    border-radius:10px;
  }

  #bookingmodule-sidebar{
    margin:24px 0;
    padding:12px;
    border-radius:14px;
  }

  #bookingmodule-sidebar::before{
    margin:-12px -12px 12px;
    font-size:16px;
  }

  #bookingmodule-sidebar iframe,
  #bookingmodule-sidebar #dealFinder{
    min-height:720px;
    height:720px !important;
  }
}


/* =========================================================
   DEEL 2 - HOMEPAGE
   Vervangt het oude DEEL 2 (homepage-css) en DEEL 3 (fix v2).

   Uitgangspunten:
   - Geen !important, behalve vier plekken waar WP-core of het
     Soledad-theme zelf !important gebruikt. Die staan gemarkeerd.
   - Scope via body:has(.vnn-home-hero): werkt op de testpagina
     en straks ongewijzigd op de echte frontpage.
   - Componentregels beginnen met :is(.entry-content,.penci-entry-content)
     zodat ze de contentregels uit DEEL 1 verslaan op specificiteit.
   ========================================================= */

/* =========================================================
   1. Tokens
   Vult de bestaande --vnn-* variabelen uit DEEL 1 aan.
   ========================================================= */

:root{
  --vnnh-wrap:1160px;         /* maximale contentbreedte */
  --vnnh-gutter:24px;         /* marge links/rechts op smalle schermen */
  --vnnh-gap:24px;            /* enige grid-gap op de pagina */

  --vnnh-radius:14px;         /* enige radius voor kaarten en blokken */
  --vnnh-radius-sm:9px;       /* knoppen, beelden binnen kaarten */
  --vnnh-radius-pill:999px;   /* chips */

  --vnnh-shadow:0 4px 16px rgba(0,30,96,.06);
  --vnnh-shadow-hover:0 14px 30px rgba(0,30,96,.13);

  --vnnh-ink:#1d2a3a;         /* kaarttitels en donkere tekst */
  --vnnh-ink-soft:#5b6879;    /* leads en kaartteksten */

  --vnnh-band-soft:#f3f6f9;
  --vnnh-band-sand:#fcf6eb;
  --vnnh-hairline:#e2e8f0;

  /* Typeschaal: H1 en H2 liggen nu duidelijk uit elkaar. */
  --vnnh-h1:clamp(2.05rem,4vw,3.4rem);
  --vnnh-h2:clamp(1.6rem,2.6vw,2.2rem);
}


/* =========================================================
   2. Theme-overrides
   Alleen op de homepage. Dit is het enige blok dat mag vechten
   met het Penci-theme.
   ========================================================= */

body:has(.vnn-home-hero){
  overflow-x:clip;
}

/* De H1 staat in de hero, dus de standaard paginatitel en meta weg. */
body:has(.vnn-home-hero) :is(
  .entry-title,
  .penci-entry-title,
  .post-title,
  .penci-page-header,
  .post-box-meta-single,
  .penci-entry-meta
){
  display:none;
}

/* Volledige breedte, geen sidebar. Penci zet hier eigen !important-
   regels neer, dus deze twee blokken hebben het ook nodig. */
body:has(.vnn-home-hero) :is(#main,.main-content,.penci-main-content){
  width:100%!important;
  max-width:none!important;
  float:none!important;
}

body:has(.vnn-home-hero) :is(#sidebar,#secondary,.penci-sidebar-content,.widget-area){
  display:none!important;
}

/* De contentwrapper mag full-bleed blokken niet afsnijden. */
body:has(.vnn-home-hero) :is(.post-entry,.entry-content,.penci-entry-content,.wp-block-post-content){
  max-width:none;
  overflow:visible;
}

/* Geen horizontale scrollbalk door de 100vw-banden. */
body:has(.vnn-home-hero) :is(.site,#page,.wrapper-boxed){
  overflow-x:clip;
}


/* =========================================================
   3. Layout: banden en secties
   ========================================================= */

/* Full-bleed zonder position-truc. */
:is(.entry-content,.penci-entry-content) :is(.vnn-home-hero,.vnn-home-band).alignfull{
  width:100vw;
  max-width:100vw;
  margin-right:calc(50% - 50vw);
  margin-left:calc(50% - 50vw);
}

:is(.entry-content,.penci-entry-content) .vnn-home-band{
  margin-top:0;
  margin-bottom:0;
}

:is(.entry-content,.penci-entry-content) .vnn-home-band--soft{
  background:var(--vnnh-band-soft);
}

:is(.entry-content,.penci-entry-content) .vnn-home-band--sand{
  background:var(--vnnh-band-sand);
}

:is(.entry-content,.penci-entry-content) .vnn-home-band--blue{
  background:var(--vnn-blue);
  color:#fff;
}

/* Eén sectiewrapper. Verticale ruimte staat alleen hier. */
:is(.entry-content,.penci-entry-content) .vnn-home-section{
  box-sizing:border-box;
  width:min(var(--vnnh-wrap),100% - var(--vnnh-gutter) * 2);
  margin-right:auto;
  margin-left:auto;
  padding-top:clamp(2.75rem,5vw,4.5rem);
  padding-bottom:clamp(2.75rem,5vw,4.5rem);
}

/* De intro sluit aan op de hero en mag compacter. */
:is(.entry-content,.penci-entry-content) .vnn-home-intro{
  padding-top:clamp(1.75rem,3vw,2.5rem);
  padding-bottom:clamp(1.75rem,3vw,2.5rem);
}


/* =========================================================
   4. Hero
   Geen paneel op de foto meer, alleen een gradient-scrim.
   Dat scheelt een kader en oogt rustiger.
   ========================================================= */

:is(.entry-content,.penci-entry-content) .vnn-home-hero{
  min-height:min(560px,80vh);
  margin-top:0;
  margin-bottom:0;
}

/* WP-core zet !important op .has-*-background-color, dus hier moet het. */
:is(.entry-content,.penci-entry-content) .vnn-home-hero .wp-block-cover__background{
  background:linear-gradient(
    100deg,
    rgba(0,18,58,.86) 0%,
    rgba(0,18,58,.66) 42%,
    rgba(0,18,58,.18) 100%
  )!important;
  opacity:1;
}

:is(.entry-content,.penci-entry-content) .vnn-home-hero .wp-block-cover__inner-container{
  box-sizing:border-box;
  width:min(var(--vnnh-wrap),100% - var(--vnnh-gutter) * 2);
  margin-right:auto;
  margin-left:auto;
}

:is(.entry-content,.penci-entry-content) .vnn-home-hero__inner{
  max-width:660px;
  margin:0;
  padding:0;
  text-shadow:0 1px 20px rgba(0,12,40,.4);
}

:is(.entry-content,.penci-entry-content) .vnn-home-eyebrow{
  margin:0 0 .7rem;
  color:rgba(255,255,255,.82);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

:is(.entry-content,.penci-entry-content) .vnn-home-hero h1{
  margin:0 0 1rem;
  color:#fff;
  font-size:var(--vnnh-h1);
  line-height:1.1;
  letter-spacing:-.02em;
}

:is(.entry-content,.penci-entry-content) .vnn-home-hero__lead{
  max-width:560px;
  margin:0 0 1.6rem;
  color:rgba(255,255,255,.92);
  font-size:clamp(1rem,1.5vw,1.15rem);
  line-height:1.6;
}


/* =========================================================
   5. Knoppen
   ========================================================= */

:is(.entry-content,.penci-entry-content) .vnn-home-buttons{
  gap:.7rem;
}

:is(.entry-content,.penci-entry-content) .vnn-home-button .wp-block-button__link{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  min-height:46px;
  padding:.7rem 1.35rem;
  border:2px solid transparent;
  border-radius:var(--vnnh-radius-sm);
  font-size:.98rem;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}

:is(.entry-content,.penci-entry-content) .vnn-home-button--primary .wp-block-button__link{
  background:var(--vnn-orange);
  border-color:var(--vnn-orange);
  color:#fff;
}

:is(.entry-content,.penci-entry-content) .vnn-home-button--primary .wp-block-button__link:hover,
:is(.entry-content,.penci-entry-content) .vnn-home-button--primary .wp-block-button__link:focus-visible{
  background:var(--vnn-orange-dark);
  border-color:var(--vnn-orange-dark);
  color:#fff;
}

:is(.entry-content,.penci-entry-content) .vnn-home-button--ghost .wp-block-button__link{
  background:transparent;
  border-color:rgba(255,255,255,.55);
  color:#fff;
}

:is(.entry-content,.penci-entry-content) .vnn-home-button--ghost .wp-block-button__link:hover,
:is(.entry-content,.penci-entry-content) .vnn-home-button--ghost .wp-block-button__link:focus-visible{
  background:#fff;
  border-color:#fff;
  color:var(--vnn-blue);
}

/* Rustige outline-knop onder een grid. */
:is(.entry-content,.penci-entry-content) .vnn-home-centered-buttons{
  justify-content:center;
  margin-top:2rem;
}

:is(.entry-content,.penci-entry-content) .vnn-home-outline-button .wp-block-button__link{
  background:transparent;
  border-color:var(--vnn-blue);
  color:var(--vnn-blue);
}

:is(.entry-content,.penci-entry-content) .vnn-home-outline-button .wp-block-button__link:hover,
:is(.entry-content,.penci-entry-content) .vnn-home-outline-button .wp-block-button__link:focus-visible{
  background:var(--vnn-blue);
  color:#fff;
}


/* =========================================================
   6. Sectiekoppen
   ========================================================= */

:is(.entry-content,.penci-entry-content) .vnn-home-section > h2{
  max-width:780px;
  margin:0 0 .7rem;
  color:var(--vnn-blue);
  font-size:var(--vnnh-h2);
  line-height:1.2;
  letter-spacing:-.015em;
}

:is(.entry-content,.penci-entry-content) .vnn-home-lead{
  max-width:720px;
  margin:0 0 2rem;
  color:var(--vnnh-ink-soft);
  font-size:1.05rem;
  line-height:1.65;
}

:is(.entry-content,.penci-entry-content) .vnn-home-band--blue :is(h2,.vnn-home-lead){
  color:#fff;
}

:is(.entry-content,.penci-entry-content) .vnn-home-band--blue .vnn-home-lead{
  color:rgba(255,255,255,.82);
}


/* =========================================================
   7. Grid
   Eén grid, drie varianten. Alle kolomlogica staat hier.
   ========================================================= */

:is(.entry-content,.penci-entry-content) .vnn-home-grid{
  display:grid;
  gap:var(--vnnh-gap);
  align-items:stretch;
}

:is(.entry-content,.penci-entry-content) .vnn-home-grid--3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

:is(.entry-content,.penci-entry-content) .vnn-home-grid--4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

@media (max-width:1000px){
  :is(.entry-content,.penci-entry-content) :is(.vnn-home-grid--3,.vnn-home-grid--4){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:620px){
  :is(.entry-content,.penci-entry-content) :is(.vnn-home-grid--3,.vnn-home-grid--4){
    grid-template-columns:minmax(0,1fr);
  }
}


/* =========================================================
   8. Kaart
   Eén component. Met .vnn-home-card--photo krijgt hij een beeld.
   Vervangt de vier losse kaartsystemen van de oude opzet.
   ========================================================= */

:is(.entry-content,.penci-entry-content) .vnn-home-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--vnnh-hairline);
  border-radius:var(--vnnh-radius);
  box-shadow:var(--vnnh-shadow);
  color:inherit;
  font-weight:400;
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

:is(.entry-content,.penci-entry-content) .vnn-home-card:hover,
:is(.entry-content,.penci-entry-content) .vnn-home-card:focus-visible{
  transform:translateY(-3px);
  border-color:#c8d5e4;
  box-shadow:var(--vnnh-shadow-hover);
}

:is(.entry-content,.penci-entry-content) .vnn-home-card:focus-visible{
  outline:3px solid var(--vnn-blue-mid);
  outline-offset:3px;
}

:is(.entry-content,.penci-entry-content) .vnn-home-card img{
  display:block;
  width:100%;
  max-width:none;
  margin:0;
  aspect-ratio:16 / 10;
  object-fit:cover;
  border:0;
  border-radius:0;
}

:is(.entry-content,.penci-entry-content) .vnn-home-card__body{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:.45rem;
  box-sizing:border-box;
  padding:1.15rem 1.2rem 1.25rem;
}

:is(.entry-content,.penci-entry-content) .vnn-home-card__label{
  color:var(--vnnh-ink-soft);
  font-size:.71rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}

:is(.entry-content,.penci-entry-content) .vnn-home-card__title{
  color:var(--vnn-blue);
  font-size:1.1rem;
  font-weight:700;
  line-height:1.3;
}

:is(.entry-content,.penci-entry-content) .vnn-home-card__text{
  color:var(--vnnh-ink-soft);
  font-size:.94rem;
  line-height:1.55;
}

:is(.entry-content,.penci-entry-content) .vnn-home-card__more{
  margin-top:auto;
  padding-top:.7rem;
  color:var(--vnn-orange-dark);
  font-size:.9rem;
  font-weight:700;
}

:is(.entry-content,.penci-entry-content) .vnn-home-card__more::after{
  content:" \2192";
  transition:transform .18s ease;
  display:inline-block;
}

:is(.entry-content,.penci-entry-content) .vnn-home-card:hover .vnn-home-card__more::after{
  transform:translateX(3px);
}


/* =========================================================
   9. Quicklinks (chips onder de intro)
   ========================================================= */

:is(.entry-content,.penci-entry-content) .vnn-home-intro__text{
  max-width:760px;
  margin:0 0 1.25rem;
  color:var(--vnnh-ink);
  font-size:1.1rem;
  line-height:1.7;
}

:is(.entry-content,.penci-entry-content) .vnn-home-quicklinks{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin:0;
}

:is(.entry-content,.penci-entry-content) .vnn-home-quicklinks a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:.5rem .95rem;
  background:#fff;
  border:1px solid var(--vnnh-hairline);
  border-radius:var(--vnnh-radius-pill);
  color:var(--vnn-blue);
  font-size:.9rem;
  font-weight:700;
  text-decoration:none;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}

:is(.entry-content,.penci-entry-content) .vnn-home-quicklinks a:hover,
:is(.entry-content,.penci-entry-content) .vnn-home-quicklinks a:focus-visible{
  background:var(--vnn-blue);
  border-color:var(--vnn-blue);
  color:#fff;
}


/* =========================================================
   10. Notice (actuele ferry-informatie)
   Slanke balk in plaats van een blok halverwege de pagina.
   ========================================================= */

:is(.entry-content,.penci-entry-content) .vnn-home-notice{
  margin:1.5rem 0 0;
  padding:1rem 1.15rem;
  background:var(--vnn-muted);
  border:1px solid var(--vnnh-hairline);
  border-left:4px solid var(--vnn-blue-mid);
  border-radius:var(--vnnh-radius-sm);
}

:is(.entry-content,.penci-entry-content) .vnn-home-notice p{
  margin:0;
  color:var(--vnnh-ink-soft);
  font-size:.94rem;
  line-height:1.6;
}

:is(.entry-content,.penci-entry-content) .vnn-home-notice p + p{
  margin-top:.5rem;
}

:is(.entry-content,.penci-entry-content) .vnn-home-notice strong{
  color:var(--vnn-blue);
}


/* =========================================================
   11. Stappen (blauwe band)
   Genummerd, omdat de volgorde hier echt iets betekent.
   ========================================================= */

:is(.entry-content,.penci-entry-content) .vnn-home-step{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  box-sizing:border-box;
  padding:1.5rem 1.4rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--vnnh-radius);
}

:is(.entry-content,.penci-entry-content) .vnn-home-step__number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin-bottom:.35rem;
  border:1px solid rgba(255,255,255,.45);
  border-radius:50%;
  color:#fff;
  font-size:.9rem;
  font-weight:700;
  line-height:1;
}

:is(.entry-content,.penci-entry-content) .vnn-home-step__title{
  color:#fff;
  font-size:1.08rem;
  font-weight:700;
  line-height:1.3;
}

:is(.entry-content,.penci-entry-content) .vnn-home-step p{
  margin:0;
  color:rgba(255,255,255,.8);
  font-size:.94rem;
  line-height:1.6;
}

/* Pijl-link, ook herbruikbaar buiten de stappen. */
:is(.entry-content,.penci-entry-content) .vnn-home-arrowlink{
  margin-top:auto;
  padding-top:.7rem;
  color:#ffc9b0;
  font-size:.9rem;
  font-weight:700;
  text-decoration:none;
  transition:color .18s ease;
}

:is(.entry-content,.penci-entry-content) .vnn-home-arrowlink::after{
  content:" \2192";
}

:is(.entry-content,.penci-entry-content) .vnn-home-arrowlink:hover,
:is(.entry-content,.penci-entry-content) .vnn-home-arrowlink:focus-visible{
  color:#fff;
  text-decoration:underline;
}


/* =========================================================
   12. Forumblok (zandband)
   ========================================================= */

:is(.entry-content,.penci-entry-content) .vnn-home-forum{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.6rem;
  margin-top:var(--vnnh-gap);
  padding:1.6rem 1.5rem;
  background:#fff;
  border:1px solid var(--vnn-cream-border);
  border-radius:var(--vnnh-radius);
}

:is(.entry-content,.penci-entry-content) .vnn-home-forum h3{
  margin:0;
  color:var(--vnn-blue);
  font-size:1.15rem;
  line-height:1.3;
}

:is(.entry-content,.penci-entry-content) .vnn-home-forum p{
  max-width:700px;
  margin:0;
  color:var(--vnnh-ink-soft);
  font-size:.96rem;
  line-height:1.6;
}

:is(.entry-content,.penci-entry-content) .vnn-home-forum .vnn-home-arrowlink{
  margin-top:.35rem;
  padding-top:0;
  color:var(--vnn-orange-dark);
}

:is(.entry-content,.penci-entry-content) .vnn-home-forum .vnn-home-arrowlink:hover,
:is(.entry-content,.penci-entry-content) .vnn-home-forum .vnn-home-arrowlink:focus-visible{
  color:var(--vnn-orange);
}


/* =========================================================
   13. Laatste artikelen (core latest-posts blok)
   WP levert hier een ul/li met floats. Rechtzetten.
   ========================================================= */

:is(.entry-content,.penci-entry-content) .vnn-home-latest{
  display:grid;
  gap:var(--vnnh-gap);
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0;
  padding:0;
  list-style:none;
}

@media (max-width:1000px){
  :is(.entry-content,.penci-entry-content) .vnn-home-latest{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:620px){
  :is(.entry-content,.penci-entry-content) .vnn-home-latest{
    grid-template-columns:minmax(0,1fr);
  }
}

:is(.entry-content,.penci-entry-content) .vnn-home-latest li{
  min-width:0;
  margin:0;
  padding:0;
}

:is(.entry-content,.penci-entry-content) .vnn-home-latest li::before{
  content:none;
}

:is(.entry-content,.penci-entry-content) .vnn-home-latest .wp-block-latest-posts__featured-image{
  float:none;
  width:100%;
  margin:0 0 .8rem;
}

:is(.entry-content,.penci-entry-content) .vnn-home-latest .wp-block-latest-posts__featured-image a{
  display:block;
}

:is(.entry-content,.penci-entry-content) .vnn-home-latest .wp-block-latest-posts__featured-image img{
  display:block;
  width:100%;
  max-width:none;
  margin:0;
  aspect-ratio:16 / 10;
  object-fit:cover;
  border-radius:var(--vnnh-radius-sm);
}

:is(.entry-content,.penci-entry-content) .vnn-home-latest .wp-block-latest-posts__post-title{
  display:block;
  color:var(--vnn-blue);
  font-size:1.02rem;
  font-weight:700;
  line-height:1.4;
  text-decoration:none;
}

:is(.entry-content,.penci-entry-content) .vnn-home-latest .wp-block-latest-posts__post-title:hover,
:is(.entry-content,.penci-entry-content) .vnn-home-latest .wp-block-latest-posts__post-title:focus-visible{
  color:var(--vnn-blue-mid);
  text-decoration:underline;
}

:is(.entry-content,.penci-entry-content) .vnn-home-latest .wp-block-latest-posts__post-date{
  display:block;
  margin-top:.4rem;
  color:var(--vnnh-ink-soft);
  font-size:.82rem;
}


/* =========================================================
   14. Slot-CTA
   Bewust divs in plaats van ul/li: dan raken de contentregels
   uit DEEL 1 (.entry-content li a) deze links niet.
   ========================================================= */

:is(.entry-content,.penci-entry-content) .vnn-home-final{
  padding:clamp(1.75rem,4vw,2.75rem);
  background:var(--vnn-blue);
  border-radius:var(--vnnh-radius);
  color:#fff;
}

:is(.entry-content,.penci-entry-content) .vnn-home-final h2{
  max-width:720px;
  margin:0 0 .7rem;
  color:#fff;
  font-size:var(--vnnh-h2);
  line-height:1.2;
  letter-spacing:-.015em;
}

:is(.entry-content,.penci-entry-content) .vnn-home-final__lead{
  max-width:720px;
  margin:0 0 1.75rem;
  color:rgba(255,255,255,.82);
  font-size:1.02rem;
  line-height:1.6;
}

:is(.entry-content,.penci-entry-content) .vnn-home-final__links{
  display:grid;
  gap:.75rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

@media (max-width:820px){
  :is(.entry-content,.penci-entry-content) .vnn-home-final__links{
    grid-template-columns:minmax(0,1fr);
  }
}

:is(.entry-content,.penci-entry-content) .vnn-home-final__links a{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  padding:.95rem 1.1rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--vnnh-radius-sm);
  color:#fff;
  font-weight:700;
  text-decoration:none;
  transition:background-color .18s ease,border-color .18s ease;
}

:is(.entry-content,.penci-entry-content) .vnn-home-final__links a:hover,
:is(.entry-content,.penci-entry-content) .vnn-home-final__links a:focus-visible{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.4);
}

:is(.entry-content,.penci-entry-content) .vnn-home-final__links small{
  color:rgba(255,255,255,.72);
  font-size:.85rem;
  font-weight:400;
  line-height:1.45;
}


/* =========================================================
   15. Mobiel
   Alleen wat niet met clamp of aspect-ratio op te lossen is.
   ========================================================= */

@media (max-width:700px){
  :is(.entry-content,.penci-entry-content) .vnn-home-hero{
    min-height:480px;
  }

  /* Verticale scrim: op smalle schermen loopt de tekst over de
     volle breedte, dus een gradient van links naar rechts werkt niet. */
  :is(.entry-content,.penci-entry-content) .vnn-home-hero .wp-block-cover__background{
    background:linear-gradient(
      180deg,
      rgba(0,18,58,.45) 0%,
      rgba(0,18,58,.82) 100%
    )!important;
  }

  :is(.entry-content,.penci-entry-content) .vnn-home-buttons{
    width:100%;
  }

  :is(.entry-content,.penci-entry-content) .vnn-home-button{
    width:100%;
  }

  :is(.entry-content,.penci-entry-content) .vnn-home-button .wp-block-button__link{
    width:100%;
    justify-content:center;
  }
}


/* =========================================================
   16. Toegankelijkheid
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  :is(.entry-content,.penci-entry-content) :is(
    .vnn-home-card,
    .vnn-home-card__more::after,
    .vnn-home-quicklinks a,
    .vnn-home-button .wp-block-button__link,
    .vnn-home-final__links a
  ){
    transition:none;
  }

  :is(.entry-content,.penci-entry-content) .vnn-home-card:hover{
    transform:none;
  }
}

/* =========================================================
   Grids en kaarten in gewone pagina's en artikelen
   (buiten de homepage-secties)
   ========================================================= */

:is(.entry-content,.penci-entry-content) > .vnn-home-grid{
  margin:1.5rem 0 3rem;
}

/* Laatste grid op de pagina hoeft geen extra ruimte onderin */
:is(.entry-content,.penci-entry-content) > .vnn-home-grid:last-child{
  margin-bottom:1rem;
}

/* =========================================================
   DEEL 3 - FOOTER EN RUIMTE BOVEN DE HOMEPAGE-HERO
   Toegevoegd 2026-09-25.
   ========================================================= */

/* Het thema reserveert standaard 60px onder de header voor een
   paginatitel. Op de homepage staat de hero daar al full-bleed,
   dus die marge is dubbelop. */
body:has(.vnn-home-hero) header.header-header-2{
  margin-bottom:0!important;
}

/* Onderste footerbalk (copyright + terug naar boven) gebruikte nog
   het oude petrolblauw met grijze tekst: slecht leesbaar en een
   andere kleur dan de rest van de site. Vervangen door het vaste
   --vnn-blue van de site, met het oranje voor de link/knop. */
#footer-section{
  background:var(--vnn-blue,#001e60);
}
#footer-section #footer-copyright p{
  margin:0;
  color:rgba(255,255,255,.75);
  font-size:.92rem;
}
#footer-section #footer-copyright a{
  color:#fff;
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.4);
  text-underline-offset:2px;
}
#footer-section #footer-copyright a:hover{
  text-decoration-color:#fff;
}
#footer-section .go-to-top{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem 1rem;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  color:#fff;
  font-size:.82rem;
  text-decoration:none;
  transition:background .2s,border-color .2s;
}
#footer-section .go-to-top span{display:inline-flex;align-items:center;gap:.4rem}
#footer-section .go-to-top br{display:none}
#footer-section .go-to-top:hover{
  background:var(--vnn-orange,#ff4b00);
  border-color:var(--vnn-orange,#ff4b00);
}

/* Widgetkolommen: accentstreepje onder de titel, oranje bij hover
   op de links, zodat de footer bij de rest van de site hoort. */
#widget-area .widget-title{
  position:relative;
  padding-bottom:.6rem;
  margin-bottom:1rem;
}
#widget-area .widget-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:32px;
  height:3px;
  border-radius:2px;
  background:var(--vnn-orange,#ff4b00);
}
#widget-area .footer-widget-wrapper a:hover{
  color:var(--vnn-orange,#ff4b00)!important;
}


/* =========================================================
   DEEL 4 - LANDINGSPAGINA /type-reis/
   Toegevoegd 2026-09-25. De categorie-omschrijving staat vast
   op een klein setje toegestane tags (WordPress' kses voor
   term-omschrijvingen laat geen div/svg/class toe), dus dit is
   puur opmaak op de bestaande Penci-structuur.
   ========================================================= */

.category-type-reis .penci-category-description-inner{
  max-width:760px;
  padding:1.1rem 1.4rem;
  border-left:3px solid var(--vnn-orange,#ff4b00);
  background:var(--vnnh-band-soft,#f3f6f9);
  border-radius:0 var(--vnnh-radius-sm,9px) var(--vnnh-radius-sm,9px) 0;
  font-size:1.02rem;
  line-height:1.65;
}
.category-type-reis .penci-category-description-inner p{margin:0 0 .8rem}
.category-type-reis .penci-category-description-inner p:last-child{margin-bottom:0}
.category-type-reis .penci-category-description-inner strong{color:var(--vnn-blue,#001e60)}
.category-type-reis .penci-category-description-inner a{
  color:var(--vnn-blue,#001e60);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--vnn-orange,#ff4b00);
  text-underline-offset:2px;
}


/* DEEL 9 (04-11-2026): mobiele header, menu, ferrywidget, foto-marges */

/* Mobiel: logo staat in de menubalk (penci_header_logo_mobile), losse logobalk weg */
@media (max-width:960px){
  #header .inner-header.penci-header-second{display:none}
}

/* Smalle desktop: menu op een regel houden, anders valt de tweede regel van de sticky balk over de tekst */
@media (min-width:961px) and (max-width:1240px){
  #navigation.header-layout-bottom ul.menu > li > a{padding-left:9px !important;padding-right:9px !important}
}
@media (min-width:961px) and (max-width:1080px){
  #navigation.header-layout-bottom ul.menu > li > a{padding-left:6px !important;padding-right:6px !important;font-size:11px !important}
}

/* Ferrywidget sidebar: compact, formulier klapt open */
#bookingmodule-sidebar::after{content:none;display:none}
#bookingmodule-sidebar .vnn-fw-text{margin:0 0 12px;color:#4b5563;font-size:14px;line-height:1.4;text-align:center}
#bookingmodule-sidebar .vnn-fw-details > summary{display:block;cursor:pointer;list-style:none;background:#ff4b00;color:#fff;font-weight:700;font-size:15px;text-align:center;padding:11px 14px;border-radius:10px}
#bookingmodule-sidebar .vnn-fw-details > summary::-webkit-details-marker{display:none}
#bookingmodule-sidebar .vnn-fw-details > summary:hover{background:#c63b00}
#bookingmodule-sidebar .vnn-fw-details[open] > summary{margin-bottom:12px;background:#001e60}
#bookingmodule-sidebar .vnn-fw-hub{display:block;margin-top:12px;text-align:center;font-size:14px;font-weight:600;color:#001e60}
@media (min-width:1024px){
  .sidebar #bookingmodule-sidebar,
  .penci-sidebar-content #bookingmodule-sidebar,
  #secondary #bookingmodule-sidebar,
  aside #bookingmodule-sidebar{position:relative;top:auto}
}

/* Meer ruimte onder foto's in artikelen */
.entry-content figure:not(.wp-block-table),
.penci-entry-content figure:not(.wp-block-table),
.entry-content .wp-caption,
.penci-entry-content .wp-caption{margin-bottom:28px}
.entry-content figure:not(.wp-block-table) figcaption,
.penci-entry-content figure:not(.wp-block-table) figcaption{margin-bottom:0}
.entry-content p > img:only-child,
.penci-entry-content p > img:only-child{margin-bottom:12px}