/*
Theme Name: Engelandovertocht
Description: Child theme van Kadence voor engelandovertocht.nl (FerryGoGo B.V.). Het hele designsysteem staat in dit ene bestand; pagina's hebben geen eigen CSS.
Template: kadence
Version: 0.4.0
Text Domain: eo-kadence
*/

/* ==========================================================================
   Lettertypes (zelf gehost, SIL Open Font License)
   ========================================================================== */

@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/outfit-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/outfit-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/figtree-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("fonts/figtree-latin-wght-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   Tokens (bron van waarheid: design/DESIGN.md)
   ========================================================================== */

:root {
  --eo-zee: #0B63CE;
  --eo-diep: #0F2340;
  --eo-lucht: #EEF5FB;
  --eo-wit: #FFFFFF;
  --eo-groen: #087F45;

  --eo-diep-zacht: color-mix(in srgb, var(--eo-diep) 70%, var(--eo-wit));
  --eo-lijn: color-mix(in srgb, var(--eo-diep) 13%, transparent);
  --eo-zee-licht: color-mix(in srgb, var(--eo-zee) 12%, var(--eo-wit));
  --eo-zee-donker: color-mix(in srgb, var(--eo-zee) 82%, var(--eo-diep));
  --eo-schaduw: 0 1px 2px color-mix(in srgb, var(--eo-diep) 8%, transparent), 0 10px 30px color-mix(in srgb, var(--eo-diep) 10%, transparent);
  --eo-schaduw-sterk: 0 2px 4px color-mix(in srgb, var(--eo-diep) 10%, transparent), 0 18px 48px color-mix(in srgb, var(--eo-diep) 22%, transparent);

  --eo-f-kop: "Outfit", system-ui, sans-serif;
  --eo-f-tekst: "Figtree", system-ui, sans-serif;

  --eo-breed: 1240px;
  --eo-lees: 640px;
  --eo-rand: clamp(16px, 4vw, 40px);
  --eo-ruimte: clamp(56px, 7vw, 96px);
  --eo-held-h: 240px;

  /* Kadence volgt dezelfde kleuren */
  --global-palette1: var(--eo-zee);
  --global-palette2: var(--eo-zee-donker);
  --global-palette3: var(--eo-diep);
  --global-palette4: var(--eo-diep);
  --global-palette5: var(--eo-diep-zacht);
  --global-palette6: color-mix(in srgb, var(--eo-diep) 62%, var(--eo-wit));
  --global-palette7: var(--eo-lucht);
  --global-palette8: color-mix(in srgb, var(--eo-lucht) 50%, var(--eo-wit));
  --global-palette9: var(--eo-wit);
  --global-palette-highlight: var(--eo-zee);
  --global-palette-highlight-alt: var(--eo-zee-donker);
  --global-palette-btn-bg: var(--eo-groen);
  --global-palette-btn-bg-hover: color-mix(in srgb, var(--eo-groen) 86%, var(--eo-diep));
  --global-palette-btn: var(--eo-wit);
  --global-palette-btn-hover: var(--eo-wit);
  --global-body-font-family: var(--eo-f-tekst);
  --global-heading-font-family: var(--eo-f-kop);
}
@media (min-width: 900px) { :root { --eo-held-h: 560px; } }

/* ==========================================================================
   Basis
   ========================================================================== */

body {
  background: var(--eo-wit);
  color: var(--eo-diep);
  font: 400 1.0625rem/1.6 var(--eo-f-tekst);
  padding-bottom: 80px; /* ruimte voor de boekbalk */
}
p, li, dd { text-wrap: pretty; }
h1, h2, h3, h4 { font-family: var(--eo-f-kop); color: var(--eo-diep); text-wrap: balance; }
a { color: var(--eo-zee); text-underline-offset: 3px; }
a:hover { color: var(--eo-zee-donker); }
img { height: auto; }
:focus-visible { outline: 3px solid var(--eo-zee); outline-offset: 2px; }
.eo-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.eo-wrap { max-width: var(--eo-breed); margin-inline: auto; padding-inline: var(--eo-rand); }
.eo-kop-binnen > *, .eo-held-binnen > *, .eo-twee > *, .eo-voet-binnen > * { min-width: 0; }

/* Knoppen */
.eo-knop, .entry-content .eo-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--eo-groen); color: var(--eo-wit);
  font: 700 1rem/1 var(--eo-f-kop);
  padding: 15px 20px; border-radius: 10px;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s;
}
.eo-knop:hover, .eo-knop:focus { background: color-mix(in srgb, var(--eo-groen) 86%, var(--eo-diep)); color: var(--eo-wit); }
.eo-knop-groot { display: flex; width: 100%; font-size: 1.0625rem; padding: 18px 20px; }

/* ==========================================================================
   Kop
   ========================================================================== */

.eo-kop { background: var(--eo-wit); border-bottom: 1px solid var(--eo-lijn); position: relative; z-index: 20; }
.eo-kop-binnen { max-width: var(--eo-breed); margin: 0 auto; padding: 12px var(--eo-rand); display: grid; gap: 8px 24px; align-items: center; }
.eo-merk { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--eo-diep); }
.eo-merk:hover { color: var(--eo-diep); }
.eo-merk-teken { flex: none; width: 60px; height: 29px; --eo-merk-boot: var(--eo-diep); --eo-merk-golf: var(--eo-zee); }
.eo-merk-naam { font: 700 1.25rem/1 var(--eo-f-kop); letter-spacing: -.012em; white-space: nowrap; }
.eo-merk-dun { font-weight: 350; }
.eo-merk-nl { font-weight: 700; color: var(--eo-zee); }
@media (max-width: 420px) { .eo-merk { gap: 7px; } .eo-merk-teken { width: 44px; height: 21px; } .eo-merk-naam { font-size: 1.0625rem; } }
@media (max-width: 340px) { .eo-merk { gap: 6px; } .eo-merk-teken { width: 32px; height: 15.5px; } .eo-merk-naam { font-size: .9375rem; } }
.eo-menu { display: grid; grid-template-columns: repeat(3, max-content); gap: 0 22px; margin: 0; padding: 0; list-style: none; font-weight: 600; font-size: .9375rem; }
.eo-menu a { color: var(--eo-diep); text-decoration: none; white-space: nowrap; display: block; padding: 6px 0; }
.eo-menu a:hover, .eo-menu .current-menu-item > a { color: var(--eo-zee); }
.eo-subknop { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; padding: 6px 0; color: var(--eo-diep); cursor: pointer; }
.eo-subknop::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.eo-subknop[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
.eo-subknop:hover, .eo-subknop:focus, .eo-subknop:active, .eo-subknop[aria-expanded="true"] { color: var(--eo-zee); background: transparent; box-shadow: none; }
.eo-subknop:focus-visible { outline: 3px solid var(--eo-zee); outline-offset: 2px; border-radius: 4px; }
.eo-submenu { margin: 0; padding: 0; list-style: none; font-weight: 500; }
.eo-js-menu .eo-submenu { display: none; }
.eo-js-menu .eo-subknop[aria-expanded="true"] + .eo-submenu { display: block; }
.eo-menuknop { display: inline-flex; align-items: center; gap: 8px; justify-self: end; padding: 8px 14px; border: 1px solid var(--eo-lijn); border-radius: 10px; background: var(--eo-wit); color: var(--eo-diep); font: 600 .9375rem/1 var(--eo-f-tekst); cursor: pointer; }
.eo-menuknop[hidden] { display: none; }
@media (max-width: 899px) { .eo-js-menu .eo-menuknop[hidden] { display: inline-flex; } }
.eo-menuknop svg { width: 20px; height: 20px; }
.eo-menuknop:hover, .eo-menuknop:focus, .eo-menuknop:active, .eo-menuknop[aria-expanded="true"] { background: var(--eo-lucht); color: var(--eo-diep); border-color: var(--eo-lijn); box-shadow: none; }
.eo-menuknop:focus-visible { outline: 3px solid var(--eo-zee); outline-offset: 2px; }
@media (max-width: 899px) {
  .eo-js-menu .eo-kop-binnen { grid-template-columns: 1fr auto; }
  .eo-js-menu #eo-hoofdnav { display: none; grid-column: 1 / -1; }
  .eo-js-menu #eo-hoofdnav.is-open { display: block; }
  .eo-js-menu .eo-menu, html:not(.eo-js-menu) .eo-menu { grid-template-columns: 1fr; }
  .eo-js-menu .eo-menu a { padding: 12px 0; border-top: 1px solid var(--eo-lijn); }
  .eo-js-menu .eo-subknop { width: 100%; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--eo-lijn); }
  .eo-js-menu .eo-submenu a { padding-left: 16px; }
}
@media (min-width: 900px) { .eo-menuknop { display: none; } }
@media (min-width: 900px) {
  .eo-kop-binnen { grid-template-columns: auto 1fr; padding-block: 16px; }
  .eo-menu { display: flex; justify-content: flex-end; gap: 30px; }
  .eo-heeft-sub { position: relative; }
  .eo-submenu { display: none; position: absolute; top: 100%; left: -16px; min-width: 240px; padding: 8px 0; background: var(--eo-wit); border: 1px solid var(--eo-lijn); border-radius: 12px; box-shadow: var(--eo-schaduw-sterk); }
  .eo-heeft-sub:hover > .eo-submenu, html:not(.eo-js-menu) .eo-heeft-sub:focus-within > .eo-submenu { display: block; }
  .eo-submenu a { padding: 8px 16px; }
  .eo-submenu a:hover, .eo-submenu a:focus-visible { background: var(--eo-lucht); color: var(--eo-diep); }
  .eo-heeft-sub:last-of-type .eo-submenu { left: auto; right: 0; }
  .eo-mega { width: min(680px, calc(100vw - 48px)); padding: 18px 8px 12px; }
  .eo-mega-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .eo-mega-voet { display: flex; gap: 24px; margin: 10px 8px 0; padding: 12px 8px 4px; border-top: 1px solid var(--eo-lijn); }
  .eo-mega-voet a { padding: 0; }
}
/* Overtochten: routes met rederij en vaartijd */
.eo-mega ul { margin: 0; padding: 0; list-style: none; }
.eo-mega-kop { margin: 0 0 4px; padding: 0 8px; font: 600 .75rem/1.4 var(--eo-f-tekst); letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--eo-diep) 62%, var(--eo-wit)); }
.eo-menu .eo-mega a { white-space: normal; border-radius: 8px; }
.eo-mega-route { display: block; font-weight: 600; color: var(--eo-diep); }
.eo-mega-info { display: block; font-size: .8125rem; font-weight: 400; line-height: 1.35; color: color-mix(in srgb, var(--eo-diep) 70%, var(--eo-wit)); }
.eo-mega-voet { font-size: .875rem; }
.eo-menu .eo-mega-voet a { color: var(--eo-zee); }
@media (max-width: 899px) {
  .eo-js-menu .eo-mega-kop { margin-top: 12px; padding-left: 16px; }
  .eo-js-menu .eo-mega-voet { display: grid; margin: 0; }
  .eo-js-menu .eo-mega-voet a { padding-left: 16px; }
}

/* ==========================================================================
   Held: foto met planningspaneel
   ========================================================================== */

.eo-held { position: relative; }
.eo-held-foto { position: absolute; inset: 0 0 auto 0; width: 100%; height: var(--eo-held-h); object-fit: cover; object-position: 45% 58%; }
.eo-held-binnen { position: relative; max-width: var(--eo-breed); margin: 0 auto; padding: calc(var(--eo-held-h) - 64px) var(--eo-rand) 0; }
@media (min-width: 900px) {
  .eo-held-binnen { padding-top: 56px; display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); column-gap: 48px; }
}

.eo-planner { background: var(--eo-wit); border-radius: 18px; padding: clamp(20px, 3vw, 30px); box-shadow: var(--eo-schaduw-sterk); }
.eo-planner h1 { margin: 0; font-weight: 800; font-size: clamp(2rem, 1.5rem + 2vw, 2.6rem); line-height: 1.05; letter-spacing: -.02em; }
.eo-planner-intro { margin: 10px 0 20px; color: var(--eo-diep-zacht); }
.eo-stap { margin-bottom: 16px; }
.eo-label { display: block; font-weight: 700; font-size: .875rem; margin-bottom: 7px; }

.eo-segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--eo-lucht); padding: 5px; border-radius: 12px; }
.eo-segment label { position: relative; cursor: pointer; margin: 0; }
.eo-segment input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.eo-segment span { display: block; text-align: center; padding: 10px 6px; border-radius: 9px; font-weight: 700; font-size: .9375rem; color: var(--eo-diep-zacht); transition: background-color .15s, color .15s; }
.eo-segment input:checked + span { background: var(--eo-wit); color: var(--eo-diep); box-shadow: var(--eo-schaduw); }
.eo-segment input:focus-visible + span { outline: 3px solid var(--eo-zee); outline-offset: 1px; }

.eo-keuze {
  width: 100%; max-width: none; appearance: none;
  font: 600 1.0625rem/1.2 var(--eo-f-tekst); color: var(--eo-diep);
  background: var(--eo-wit);
  background-image: linear-gradient(45deg, transparent 50%, var(--eo-diep) 50%), linear-gradient(135deg, var(--eo-diep) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: right 22px center, right 16px center;
  background-repeat: no-repeat;
  border: 1.5px solid var(--eo-lijn); border-radius: 10px;
  padding: 15px 44px 15px 14px; cursor: pointer;
}
.eo-keuze:hover, .eo-keuze:focus { border-color: var(--eo-zee); background-color: var(--eo-wit); }

.eo-uitkomst { background: var(--eo-lucht); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: end; }
.eo-uitkomst p { margin: 0; }
.eo-uit-rederij { grid-column: 1 / -1; font-weight: 700; }
.eo-uit-feiten { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .9375rem; color: var(--eo-diep-zacht); }
.eo-uit-feiten li { display: flex; align-items: center; gap: 8px; }
.eo-uit-feiten svg { width: 18px; height: 18px; color: var(--eo-zee); flex: none; }
.eo-uit-prijs { text-align: right; line-height: 1.1; }
.eo-uit-prijs span { display: block; font-size: .8125rem; color: var(--eo-diep-zacht); }
.eo-uit-prijs strong { display: block; font: 800 2rem/1 var(--eo-f-kop); color: var(--eo-diep); font-variant-numeric: tabular-nums; }
.eo-uit-noot { margin: 6px 0 0; font-size: .875rem; line-height: 1.4; color: var(--eo-diep-zacht); }
@media (max-width: 480px) {
  .eo-uitkomst { grid-template-columns: 1fr; }
  .eo-uit-prijs { text-align: left; margin-top: 6px; }
}
.eo-planner-voet { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 12px 0 0; font-size: .875rem; color: var(--eo-diep-zacht); }
.eo-planner-voet a { font-weight: 700; }
.eo-planner-noot { margin: 8px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--eo-diep-zacht); text-align: center; }

.eo-feitenstrook { list-style: none; margin: 0; padding: 28px 0 0; display: grid; gap: 10px; font-weight: 600; }
.eo-feitenstrook li { display: flex; align-items: center; gap: 10px; margin: 0; }
.eo-feitenstrook svg { width: 22px; height: 22px; flex: none; color: var(--eo-groen); background: color-mix(in srgb, var(--eo-groen) 12%, var(--eo-wit)); border-radius: 50%; padding: 3px; }
@media (min-width: 900px) {
  .eo-feitenstrook { grid-column: 2; align-self: end; display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 0 0 30px; }
}

/* ==========================================================================
   Blokken
   ========================================================================== */

.eo-blok { max-width: var(--eo-breed); margin: 0 auto; padding: var(--eo-ruimte) var(--eo-rand) 0; }
/* De laatste sectie houdt afstand tot de voet */
.eo-blok:last-child { padding-bottom: var(--eo-ruimte); }
.eo-blok-lucht { max-width: none; background: var(--eo-lucht); margin-top: var(--eo-ruimte); padding-bottom: var(--eo-ruimte); }
.eo-blok-lucht > .eo-blok-binnen { max-width: calc(var(--eo-breed) - 2 * var(--eo-rand)); margin: 0 auto; }
.eo-blok h2 { margin: 0; font-weight: 800; font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em; }
.eo-blok h2.eo-klein { font-size: 1.5rem; margin-bottom: 14px; }
.eo-blok-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 26px; }
.eo-blok-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.eo-blok-link svg { width: 18px; height: 18px; }
.eo-blok-link:hover { text-decoration: underline; }
.eo-bron { margin: 18px 0 0; font-size: .875rem; color: var(--eo-diep-zacht); }
.eo-twee { display: grid; gap: 32px; }
@media (min-width: 900px) { .eo-twee { grid-template-columns: 5fr 7fr; column-gap: clamp(40px, 6vw, 88px); align-items: start; } }
.eo-intro { margin: 14px 0 0; font-size: 1.125rem; color: var(--eo-diep-zacht); max-width: 36em; }

/* Routekaarten met foto en prijs */
.eo-routes { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 640px) { .eo-routes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .eo-routes { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.eo-routes > li { margin: 0; }
.eo-route { display: flex; flex-direction: column; height: 100%; background: var(--eo-wit); border: 1px solid var(--eo-lijn); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--eo-diep); transition: box-shadow .2s, transform .2s; }
.eo-route:hover { box-shadow: var(--eo-schaduw-sterk); transform: translateY(-2px); color: var(--eo-diep); }
.eo-route-foto { display: block; position: relative; aspect-ratio: 16 / 10; background: var(--eo-lucht); margin: 0; }
.eo-route-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eo-labeltje { position: absolute; left: 12px; top: 12px; background: var(--eo-wit); color: var(--eo-diep); font-weight: 700; font-size: .8125rem; padding: 5px 11px; border-radius: 999px; box-shadow: var(--eo-schaduw); }
.eo-route-tekst { flex: 1; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "naam naam" "rederij rederij" "feiten prijs"; gap: 2px 12px; padding: 16px 18px 18px; align-items: end; }
.eo-route-naam { grid-area: naam; font: 700 1.25rem/1.2 var(--eo-f-kop); }
.eo-route:hover .eo-route-naam { color: var(--eo-zee); }
.eo-route-rederij { grid-area: rederij; color: var(--eo-diep-zacht); font-size: .9375rem; }
.eo-route-feiten { grid-area: feiten; display: grid; gap: 3px; margin-top: 12px; font-size: .875rem; color: var(--eo-diep-zacht); }
.eo-route-feiten span { display: flex; align-items: center; gap: 7px; }
.eo-route-feiten svg { width: 17px; height: 17px; color: var(--eo-zee); flex: none; }
.eo-route-prijs { grid-area: prijs; font: 800 1.625rem/1 var(--eo-f-kop); text-align: right; font-variant-numeric: tabular-nums; }
.eo-route-prijs small { display: block; font: 500 .8125rem/1.4 var(--eo-f-tekst); color: var(--eo-diep-zacht); }

/* Inspiratie: foto boven, tekst eronder */
.eo-ideeen { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 640px) { .eo-ideeen { grid-template-columns: repeat(3, 1fr); } }
.eo-ideeen > li { margin: 0; }
.eo-idee { display: block; text-decoration: none; color: var(--eo-diep); }
.eo-idee img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; transition: transform .25s; display: block; }
.eo-idee:hover img { transform: scale(1.015); }
.eo-idee-tekst { display: grid; gap: 4px; padding-top: 14px; color: var(--eo-diep-zacht); }
.eo-idee-naam { font: 700 1.25rem/1.25 var(--eo-f-kop); color: var(--eo-diep); }
.eo-idee:hover .eo-idee-naam { color: var(--eo-zee); }

/* Op mobiel een veegrij */
@media (max-width: 639px) {
  .eo-routes, .eo-ideeen { grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--eo-rand)); padding: 4px var(--eo-rand) 14px; scroll-padding-inline: var(--eo-rand); scrollbar-width: none; }
  .eo-routes > li, .eo-ideeen > li { scroll-snap-align: start; }
}

/* Goed om te weten */
.eo-weten { margin-top: 24px; background: var(--eo-zee-licht); border-radius: 14px; padding: 18px 20px; }
.eo-weten p { margin: 0; }
.eo-weten ul { margin: 0; padding-left: 1.2em; }
.eo-weten li { margin: 0 0 .25em; }
.eo-weten .eo-weten-label { font-weight: 800; color: var(--eo-zee-donker); margin-bottom: 6px; }

/* Tegels met hulppagina's */
.eo-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 560px) { .eo-tips { grid-template-columns: 1fr 1fr; } }
.eo-tips > li { margin: 0; }
.eo-tip { display: grid; gap: 2px; height: 100%; padding: 16px 18px; border: 1px solid var(--eo-lijn); border-radius: 14px; text-decoration: none; color: var(--eo-diep-zacht); font-size: .9375rem; transition: border-color .15s, background-color .15s; }
.eo-tip:hover { border-color: var(--eo-zee); background: var(--eo-lucht); color: var(--eo-diep-zacht); }
.eo-tip-naam { font: 700 1.0625rem/1.3 var(--eo-f-kop); color: var(--eo-diep); }

/* Lijsten met twee kolommen (havens, rederijen) */
.eo-lijst { list-style: none; margin: 0; padding: 0; }
.eo-lijst li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 12px 0; margin: 0; border-top: 1px solid var(--eo-lijn); }
.eo-lijst li:last-child { border-bottom: 1px solid var(--eo-lijn); }
.eo-lijst a { font-weight: 700; }
.eo-lijst span { color: var(--eo-diep-zacht); }
@media (min-width: 760px) { .eo-twee-gelijk { grid-template-columns: 1fr 1fr; } }

/* Veelgestelde vragen */
.eo-faq details { border-bottom: 1px solid var(--eo-lijn); }
.eo-faq details:first-child { border-top: 1px solid var(--eo-lijn); }
.eo-faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font: 700 1.125rem/1.35 var(--eo-f-kop); color: var(--eo-diep); }
.eo-faq summary::-webkit-details-marker { display: none; }
.eo-faq summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font: 600 1.5rem/1 var(--eo-f-kop); color: var(--eo-zee); }
.eo-faq details[open] summary::after { content: "−"; }
.eo-faq details p { margin: 0 0 20px; max-width: 68ch; }

/* ==========================================================================
   Paginakop van routepagina's en blogs
   ========================================================================== */

.eo-paginakop { background: var(--eo-lucht); }
.eo-paginakop-binnen { max-width: var(--eo-breed); margin: 0 auto; padding: clamp(24px, 4vw, 48px) var(--eo-rand) clamp(32px, 5vw, 56px); display: grid; gap: 28px; align-items: center; }
.eo-paginakop-binnen > * { min-width: 0; }
@media (min-width: 900px) { .eo-paginakop-binnen { grid-template-columns: 7fr 5fr; column-gap: clamp(32px, 5vw, 72px); } }
.eo-kruimels { font-size: .875rem; color: var(--eo-diep-zacht); margin-bottom: 14px; }
.eo-kruimels a { color: var(--eo-diep-zacht); }
.eo-kruimels a:hover { color: var(--eo-zee); }
.eo-paginakop h1 { margin: 0; font-weight: 800; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem); line-height: 1.05; letter-spacing: -.02em; }
.eo-lead { margin: 14px 0 0; font-size: 1.1875rem; line-height: 1.55; color: var(--eo-diep-zacht); max-width: 36em; }
.eo-kenmerken { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.eo-kenmerken li { display: inline-flex; align-items: center; gap: 7px; margin: 0; background: var(--eo-wit); border: 1px solid var(--eo-lijn); border-radius: 999px; padding: 7px 13px; font-weight: 600; font-size: .9375rem; }
.eo-kenmerken svg { width: 18px; height: 18px; color: var(--eo-zee); flex: none; }
.eo-kenmerken a { display: inline-flex; align-items: center; gap: 7px; color: var(--eo-zee); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.eo-knopregel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 24px; }
.eo-knopregel span { font-size: .875rem; color: var(--eo-diep-zacht); }
.eo-paginakop-foto { margin: 0; }
.eo-paginakop-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; display: block; box-shadow: var(--eo-schaduw); }

/* ==========================================================================
   Artikel: inhoudsopgave links, leeskolom rechts
   ========================================================================== */

.eo-artikel { max-width: var(--eo-breed); margin: 0 auto; padding: clamp(32px, 5vw, 64px) var(--eo-rand) var(--eo-ruimte); display: grid; gap: 28px; }
.eo-artikel > * { min-width: 0; }
@media (min-width: 1000px) { .eo-artikel { grid-template-columns: 240px minmax(0, var(--eo-lees)); column-gap: clamp(40px, 5vw, 80px); justify-content: center; align-items: start; } }
/* Zijbalk: uitgelichte kant-en-klare reizen, die blijven staan terwijl je leest.
   Zonder dat blok één gecentreerde kolom, zodat er geen lege strook naast de tekst staat. */
.eo-zijbalk { display: grid; gap: 22px; align-content: start; }
@media (max-width: 999px) { .eo-zijbalk { display: none; } }
@media (min-width: 1000px) {
  .eo-artikel:not(:has(.eo-zijpakket)) { grid-template-columns: minmax(0, 700px); }
  .eo-artikel:not(:has(.eo-zijpakket)) > .eo-zijbalk { display: none; }
  .eo-zijbalk { align-self: stretch; }
  .eo-zijbalk .eo-zijpakket { align-self: start; }
}
/* Meelopen zolang het hele blok boven de boekbalk past: op een lager scherm met kleine foto's of zonder, op een heel laag scherm schuift het mee */
@media (min-width: 1000px) and (min-height: 660px) { .eo-zijbalk .eo-zijpakket { position: sticky; top: 24px; } }
@media (min-width: 1000px) and (min-height: 735px) and (max-height: 799px) { .eo-zijpakket .eo-zijpakket-foto { height: 40px; } }
@media (min-width: 1000px) and (max-height: 734px) { .eo-zijpakket .eo-zijpakket-foto { display: none; } }
.eo-zijpakket { background: var(--eo-wit); border: 1px solid var(--eo-lijn); border-radius: 16px; padding: 18px; box-shadow: var(--eo-schaduw); }
.eo-zijpakket > * { margin: 0; }
.eo-zijpakket-kop { font: 700 1.125rem/1.25 var(--eo-f-kop); color: var(--eo-diep); }
.eo-zijpakket-intro { margin-top: 4px !important; font-size: .875rem; line-height: 1.45; color: var(--eo-diep-zacht); }
.eo-zijpakket ul { list-style: none; padding: 0; margin: 14px 0 10px !important; display: grid; gap: 10px; }
.eo-zijpakket li { margin: 0; }
.eo-zijpakket li a { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--eo-lijn); border-radius: 12px; background: var(--eo-lucht); color: var(--eo-diep); text-decoration: none; transition: border-color .15s; }
.eo-zijpakket li a:hover, .eo-zijpakket li a:focus-visible { border-color: var(--eo-zee); color: var(--eo-diep); }
.eo-zijpakket .eo-pakket-label { font-size: .6875rem; }
.eo-zijpakket li a { overflow: hidden; }
.eo-zijpakket-foto { display: block; width: calc(100% + 28px); max-width: none; height: 72px; margin: -12px -14px 8px; object-fit: cover; }
.eo-zijpakket-naam { font: 700 .9375rem/1.3 var(--eo-f-kop); }
.eo-zijpakket-feiten { font-size: .8125rem; line-height: 1.4; color: var(--eo-diep-zacht); }
.eo-zijpakket-prijs { margin-top: 2px; }
.eo-zijpakket-prijs strong { font: 800 1.125rem/1.2 var(--eo-f-kop); font-variant-numeric: tabular-nums; }
.eo-zijpakket-prijs small { font-size: .75rem; color: var(--eo-diep-zacht); }
.eo-zijpakket-noot { font-size: .75rem; line-height: 1.4; color: var(--eo-diep-zacht); margin-bottom: 10px !important; }
.eo-zijpakket .eo-blok-link { font-size: .875rem; }
@media (max-width: 999px) { .eo-zijpakket { display: none; } }



.eo-lees { font-size: 1.0625rem; line-height: 1.7; }
.eo-lees > :where(p, ul:not([class]), ol:not([class]), figure, details, blockquote) { margin: 0 0 1.1em; }
.eo-lees > :where(ul:not([class]), ol:not([class])) { padding-left: 1.3em; }
.eo-lees > :where(ul:not([class]), ol:not([class])) li { margin-bottom: .35em; }
.eo-lees > :first-child { margin-top: 0; }
.eo-lees > h2 { margin: 2em 0 .55em; font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -.015em; scroll-margin-top: 24px; }
.eo-lees > h2:first-child { margin-top: 0; }
.eo-lees > h3 { margin: 1.6em 0 .4em; font-weight: 700; font-size: 1.25rem; line-height: 1.3; scroll-margin-top: 24px; }
.eo-lees > :where(.eo-tabel, .eo-weten, .eo-stappen, .eo-kolommen, .eo-tips, .eo-faq, .eo-video) { margin: 1.4em 0 1.6em; }
.eo-figuur { margin: 1.4em 0 1.6em; }
/* Eigen 404 (template-parts/content/error-404.php) */
.eo-404 { max-width: 760px; margin: clamp(32px, 6vw, 72px) auto; padding: 0 var(--eo-rand); }
.eo-404 .entry-content-wrap { padding: 0; }
.eo-404-code { margin: 0; font: 800 .875rem var(--eo-f-kop); letter-spacing: .2em; color: var(--eo-zee); }
.eo-404 h1 { margin: .2em 0 .4em; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); line-height: 1.1; text-wrap: balance; }
.eo-404-lead { color: var(--eo-diep-zacht); font-size: 1.0625rem; margin: 0 0 20px; text-wrap: pretty; }
.eo-404 .search-form { margin: 0 0 28px; }
.eo-404 .eo-tips { margin: 0 0 24px; }
.eo-404-terug a { font-weight: 700; }

/* Tijdentabel van Timetables Pro: de duur (assets/tijden.js) niet afbreken */
.tp-wrap td.eo-duur { white-space: nowrap; }
/* Het ontwerp "original" toont ook op mobiel de brede tabel; daar de kaartweergave van de plugin zelf gebruiken */
@media (max-width: 640px) {
  body .tp-wrap.tp-theme-original .tp-table { display: none; }
  body .tp-wrap.tp-theme-original .tp-cardlist { display: block; }
}

/* CO2-calculator (assets/co2.js) */
.eo-co2 { margin: 1.4em 0 1.6em; display: grid; gap: 20px; padding: clamp(16px, 3vw, 24px); background: var(--eo-lucht); border-radius: 16px; }
@media (min-width: 640px) { .eo-co2 { grid-template-columns: 3fr 2fr; } }
.eo-co2-velden { display: grid; gap: 14px; min-width: 0; }
.eo-co2-veld { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.eo-co2-veld[hidden] { display: none; }
.eo-co2-veld > span, .eo-co2-veld > legend { font-weight: 700; font-size: .9375rem; color: var(--eo-diep); padding: 0; }
.eo-co2-veld select, .eo-co2-veld input[type="number"] { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--eo-lijn); border-radius: 10px; background: var(--eo-wit); color: var(--eo-diep); font: inherit; }
.eo-co2-veld select:focus-visible, .eo-co2-veld input:focus-visible { outline: 3px solid var(--eo-zee); outline-offset: 1px; }
.eo-co2-veld select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--eo-diep) 50%), linear-gradient(135deg, var(--eo-diep) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.eo-co2-keuze { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.eo-co2-keuze label { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.eo-co2-keuze input { width: 18px; height: 18px; accent-color: var(--eo-zee); }
.eo-co2-keuze label:has(input:disabled) { color: var(--eo-diep-zacht); }
.eo-co2-noot[hidden] { display: none; }
.eo-co2-uitkomst [data-uit] { white-space: nowrap; }
.eo-co2-uitkomst { background: var(--eo-wit); border-radius: 12px; padding: 16px; align-self: start; }
.eo-co2-totaal { margin: 0 0 10px; font-size: .9375rem; color: var(--eo-diep-zacht); }
.eo-co2-totaal span { display: block; font: 800 2rem/1.1 var(--eo-f-kop); color: var(--eo-diep); font-variant-numeric: tabular-nums; }
.eo-co2-uitkomst dl { margin: 0; display: grid; gap: 4px; }
.eo-co2-uitkomst dl div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--eo-lijn); font-size: .9375rem; }
.eo-co2-uitkomst dt { color: var(--eo-diep-zacht); }
.eo-co2-uitkomst dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.eo-co2-noot { margin: 10px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--eo-diep-zacht); }

/* Routekaart (tools/kaart/maak_kaart.py): de SVG heeft alleen klassen, de kleuren komen hier vandaan */
.eo-kaart { margin: 0; min-width: 0; }
.eo-kaart .zeekaart { display: block; width: 100%; height: auto; border-radius: 18px; }
.k-rand, .k-rand-lijn, .k-graad, .k-raster, .k-titelblok { display: none; }
.k-water { fill: var(--eo-lucht); }
.k-ondiep { fill: color-mix(in srgb, var(--eo-zee) 9%, var(--eo-lucht)); }
.k-land { fill: var(--eo-wit); stroke: color-mix(in srgb, var(--eo-diep) 20%, transparent); stroke-width: .6; }
.k-route, .k-tunnel { fill: none; stroke: var(--eo-zee); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.k-tunnel { stroke-dasharray: .5 5; stroke-width: 3.2; }
.k-haven circle { fill: var(--eo-wit); stroke: var(--eo-zee); stroke-width: 2.2; }
.k-haven text, .k-stad text { font: 700 11px var(--eo-f-tekst); fill: var(--eo-diep); paint-order: stroke; stroke: var(--eo-wit); stroke-width: 3px; stroke-linejoin: round; }
.k-stad rect { fill: var(--eo-diep); }
.k-label { font: 600 10.5px var(--eo-f-tekst); fill: var(--eo-diep); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--eo-lucht); stroke-width: 3.5px; stroke-linejoin: round; }
.k-lbl-kop { font-weight: 800; }
.k-zee, .k-landnaam { font: 800 11px var(--eo-f-kop); letter-spacing: .3em; fill: var(--eo-diep); fill-opacity: .32; }
.k-landnaam { font-size: 10px; fill-opacity: .45; }
.eo-kaart figcaption { margin-top: 8px; font-size: .875rem; line-height: 1.45; color: var(--eo-diep-zacht); text-wrap: pretty; }
@media (max-width: 639px) {
  .k-label, .k-landnaam { display: none; }
  .k-haven text, .k-stad text { font-size: 17px; stroke-width: 4px; }
  .k-zee { font-size: 17px; }
  /* Op smal scherm passen niet alle havennamen: Hoek van Holland en Rotterdam links van de stip,
     Portsmouth gecentreerd boven de stip, Newhaven en Folkestone zonder label (de koerslijnen blijven) */
  .k-haven[data-haven="hoek"] text, .k-haven[data-haven="europoort"] text { text-anchor: end; transform: translateX(-16px); }
  .k-haven[data-haven="portsmouth"] text { text-anchor: middle; }
  .k-haven[data-haven="newhaven"] text, .k-haven[data-haven="folkestone"] text { display: none; }
}
.eo-figuur img { display: block; width: 100%; height: auto; border-radius: 14px; }
.eo-figuur figcaption { margin-top: 8px; font-size: .875rem; line-height: 1.45; color: var(--eo-diep-zacht); text-wrap: pretty; }

/* Tabel: lichte kop, haarlijnen, tabulaire cijfers */
.eo-tabel { overflow-x: auto; border: 1px solid var(--eo-lijn); border-radius: 14px; }
.eo-tabel table { width: 100%; margin: 0; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.eo-tabel th, .eo-tabel td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--eo-lijn); }
.eo-tabel thead th { background: var(--eo-lucht); font-weight: 700; color: var(--eo-diep); }
.eo-tabel tbody tr:last-child > * { border-bottom: 0; }
.eo-tabel tbody th { font-weight: 700; }
.eo-tabel caption { caption-side: bottom; text-align: left; padding: 10px 16px; font-size: .875rem; color: var(--eo-diep-zacht); }
/* Brede tabellen (3+ kolommen, class eo-stapel uit bouw.py) worden op mobiel een kaartje per rij,
   met het kolomlabel uit data-label voor elke waarde */
@media (max-width: 599px) {
  .eo-stapel { overflow-x: visible; }
  .eo-stapel :where(table, tbody, tr, th, td, caption) { display: block; }
  .eo-stapel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .eo-stapel tbody tr { padding: 14px 16px; border-bottom: 1px solid var(--eo-lijn); }
  .eo-stapel tbody tr:last-child { border-bottom: 0; }
  .eo-stapel tbody :where(th, td) { padding: 0; border-bottom: 0; }
  .eo-stapel tbody th { margin-bottom: 6px; color: var(--eo-diep); }
  .eo-stapel tbody td { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; padding: 3px 0; }
  .eo-stapel tbody td::before { content: attr(data-label); color: var(--eo-diep-zacht); font-size: .875rem; }
  .eo-stapel tbody th[data-label]::before { content: attr(data-label) " "; }
  .eo-stapel caption { border-top: 1px solid var(--eo-lijn); }
}

/* Genummerde stappen */
.eo-stappen { list-style: none; padding: 0; counter-reset: stap; display: grid; gap: 12px; }
.eo-stappen li { counter-increment: stap; position: relative; padding-left: 44px; margin: 0; }
.eo-stappen li::before { content: counter(stap); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--eo-zee); color: var(--eo-wit); font: 700 .9375rem/30px var(--eo-f-kop); text-align: center; }

/* Twee lijsten naast elkaar (kies X als / kies Y als) */
.eo-kolommen { display: grid; gap: 14px; }
@media (min-width: 640px) { .eo-kolommen { grid-template-columns: 1fr 1fr; } }
.eo-kolom { border: 1px solid var(--eo-lijn); border-radius: 14px; padding: 18px 20px; }
.eo-kolom h3 { margin: 0 0 10px; font-size: 1.125rem; }
.eo-kolom ul { margin: 0; padding-left: 1.2em; }
.eo-kolom li { margin: 0 0 .3em; }

/* Video als link (geen embed van derden zonder toestemming) */
.eo-video { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--eo-lijn); border-radius: 14px; text-decoration: none; color: var(--eo-diep); }
.eo-video:hover { border-color: var(--eo-zee); color: var(--eo-diep); }
.eo-video-icoon { width: 44px; height: 44px; border-radius: 50%; background: var(--eo-zee); color: var(--eo-wit); display: grid; place-items: center; flex: none; }
.eo-video-icoon svg { width: 18px; height: 18px; }
.eo-video strong { display: block; font-family: var(--eo-f-kop); }
.eo-video span span { color: var(--eo-diep-zacht); font-size: .9375rem; }


/* Reacties onder berichten in dezelfde kolom als de tekst */
.comments-area { max-width: var(--eo-breed); margin: 0 auto var(--eo-ruimte); padding: 0 var(--eo-rand); }
@media (min-width: 1000px) {
  .comments-area { display: grid; grid-template-columns: 240px minmax(0, var(--eo-lees)); column-gap: clamp(40px, 5vw, 80px); justify-content: center; }
  .comments-area > * { grid-column: 2; min-width: 0; }
}

/* ==========================================================================
   Gewone pagina's en berichten zonder sjabloon
   ========================================================================== */

.entry-content { font-size: 1.0625rem; word-break: normal; overflow-wrap: break-word; }
/* Alleen directe kinderen: componenten (eo-...) houden hun eigen ruimte */
.entry-content > :where(p, ul:not([class]), ol:not([class]), figure, table, details, blockquote) { margin: 0 0 1.1em; }
.entry-content > :where(ul:not([class]), ol:not([class])) { padding-left: 1.4em; }
.entry-content > :first-child { margin-top: 0; }
.entry-content > h2 { font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -.015em; margin: 1.8em 0 .5em; }
.entry-content > h3 { font-weight: 700; font-size: 1.25rem; line-height: 1.25; margin: 1.5em 0 .4em; }
/* Lage specificiteit (:where), zodat componenten zoals .eo-tabel altijd winnen */
:where(.entry-content) figure.wp-block-table { overflow-x: auto; margin: 1.5em 0; }
:where(.entry-content) table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: .9375rem; }
:where(.entry-content) :where(th, td) { text-align: left; vertical-align: top; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--eo-lijn); }
:where(.entry-content) thead th { font-weight: 700; color: var(--eo-diep); border-bottom: 2px solid var(--eo-diep); }
:where(.entry-content) figcaption { font-size: .875rem; color: var(--eo-diep-zacht); margin-top: 8px; }
:where(.entry-content) details summary { cursor: pointer; font-family: var(--eo-f-kop); font-weight: 700; }

/* ==========================================================================
   Voet met vertrouwensstrook
   ========================================================================== */

.eo-voet { background: var(--eo-diep); color: color-mix(in srgb, var(--eo-zee) 14%, var(--eo-wit)); }
.eo-voet a { color: var(--eo-wit); }
.eo-voet-binnen { max-width: var(--eo-breed); margin: 0 auto; padding: 48px var(--eo-rand) 40px; display: grid; gap: 28px; }
.eo-voet-merk { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 1.125rem/1 var(--eo-f-kop); color: var(--eo-wit); }
.eo-voet-merk .eo-merk-teken { width: 54px; height: 26px; --eo-merk-boot: var(--eo-wit); --eo-merk-golf: color-mix(in srgb, var(--eo-zee) 55%, var(--eo-wit)); }
.eo-voet-merk .eo-merk-nl { color: color-mix(in srgb, var(--eo-zee) 55%, var(--eo-wit)); }
.eo-vertrouwen { margin: 0; max-width: 34em; font-size: .9375rem; }
.eo-voetmenu { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; font-weight: 600; }
@media (min-width: 900px) { .eo-voet-binnen { grid-template-columns: 7fr 5fr; align-items: start; } .eo-voetmenu { justify-content: flex-end; } }

/* ==========================================================================
   Boekbalk: vast onderaan, per pagina naar de juiste route
   ========================================================================== */

.eo-boekbalk { position: fixed; inset: auto 0 0 0; z-index: 50; background: var(--eo-wit); box-shadow: 0 -6px 24px color-mix(in srgb, var(--eo-diep) 14%, transparent); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--eo-rand); }
.eo-boekbalk-tekst { margin: 0; display: grid; line-height: 1.25; font-size: .9375rem; min-width: 0; }
.eo-boekbalk-tekst span { color: var(--eo-diep-zacht); font-size: .875rem; }
.eo-boekbalk-tekst small { color: var(--eo-diep-zacht); font-size: .6875rem; margin-top: 2px; }
/* De knop noemt de partner: op mobiel als tweede regel, op desktop achter de actie */
.eo-boekbalk-knop, .entry-content .eo-boekbalk-knop { flex: none; flex-direction: column; gap: 3px; padding: 9px 16px; line-height: 1.1; text-align: center; white-space: nowrap; }
.eo-boekbalk-knop small { font: 600 .75rem/1.1 var(--eo-f-tekst); }
.eo-boekbalk-knop svg { display: none; }
@media (min-width: 900px) {
  .eo-boekbalk { justify-content: center; gap: 18px; }
  .eo-boekbalk-tekst { margin-right: 14px; }
  .eo-boekbalk-knop, .entry-content .eo-boekbalk-knop { flex-direction: row; gap: 5px; padding: 14px 22px; }
  .eo-boekbalk-knop small { font: inherit; }
  .eo-boekbalk-knop svg { display: block; width: 18px; height: 18px; }
}

/* ==========================================================================
   Reisbureau-laag: tweede knop, planner, boardingpass, pakket, advies, dagschema, formulier
   ========================================================================== */

/* Tweede, rustigere knop naast de groene ("Liever een complete reis?") */
.eo-knop-stil, .entry-content .eo-knop-stil {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--eo-wit); color: var(--eo-diep);
  border: 1.5px solid color-mix(in srgb, var(--eo-diep) 24%, transparent);
  font: 700 1rem/1 var(--eo-f-kop);
  padding: 13.5px 18px; border-radius: 10px;
  text-decoration: none; white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.eo-knop-stil:hover, .eo-knop-stil:focus { border-color: var(--eo-zee); color: var(--eo-zee); }
.eo-knop-stil svg { width: 18px; height: 18px; }
.eo-planner .eo-knop-stil { display: flex; width: 100%; margin-top: 10px; }

/* Planner: positiezin, vier keuzes, advies met reden */
.eo-planner-positie { margin: 12px 0 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.4; text-wrap: pretty; }
.eo-segment-4 { grid-template-columns: repeat(2, 1fr); }
.eo-segment-2 { grid-template-columns: repeat(2, 1fr); }
.eo-uit-advies { grid-column: 1 / -1; font: 800 .75rem/1.2 var(--eo-f-kop); letter-spacing: .1em; text-transform: uppercase; color: var(--eo-groen); }
.eo-uit-naam { grid-column: 1 / -1; font: 700 1.25rem/1.2 var(--eo-f-kop); }
.eo-uitkomst .eo-uit-reden { grid-column: 1 / -1; margin: 2px 0 8px; font-size: .9375rem; line-height: 1.45; text-wrap: pretty; }
.eo-uit-reden[hidden] { display: none; }
.eo-uitkomst .eo-uit-rederij { font-weight: 600; color: var(--eo-diep-zacht); font-size: .9375rem; }

/* Boardingpass: de stappen van een reis, met een perforatie tussen de stappen */
.eo-pas { background: var(--eo-wit); border: 1px solid var(--eo-lijn); border-radius: 18px; box-shadow: var(--eo-schaduw); overflow: hidden; }
.eo-pas-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 16px 22px; background: var(--eo-diep); color: var(--eo-wit); }
.eo-pas-kop p { margin: 0; }
.eo-pas-titel { font: 800 1.25rem/1.2 var(--eo-f-kop); }
.eo-pas-route { font: 600 .9375rem/1.3 var(--eo-f-tekst); color: color-mix(in srgb, var(--eo-zee) 14%, var(--eo-wit)); }
.eo-pas-stappen { list-style: none; margin: 0; padding: 0; counter-reset: pas; }
.eo-pas-stappen > li { counter-increment: pas; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px; margin: 0; padding: 18px 22px 20px 14px; position: relative; }
.eo-pas-stappen > li + li { border-top: 2px dashed var(--eo-lijn); }
.eo-pas-stappen > li::before { content: counter(pas); grid-row: 1 / span 3; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--eo-zee); color: var(--eo-zee); font: 800 1.0625rem/34px var(--eo-f-kop); text-align: center; justify-self: center; }
.eo-pas-stappen h3 { margin: 6px 0 4px; font: 700 1.125rem/1.3 var(--eo-f-kop); }
.eo-pas-stappen p { margin: 0 0 10px; font-size: .9375rem; line-height: 1.5; color: var(--eo-diep-zacht); max-width: 40em; }
.eo-pas-stappen ul { margin: 0 0 10px; padding-left: 1.1em; font-size: .9375rem; color: var(--eo-diep-zacht); }
.eo-pas-stappen ul li { margin: 0 0 .2em; }
.eo-pas-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.eo-pas-noot { margin: 0; padding: 12px 22px 16px; border-top: 2px dashed var(--eo-lijn); font-size: .8125rem; line-height: 1.45; color: var(--eo-diep-zacht); }
.eo-pas-noot { padding-right: max(22px, calc(100% - 54ch)); } /* hooguit ~75 tekens per regel, ook in een brede pas */
.eo-lees > :where(.eo-pas, .eo-pakket, .eo-advies, .eo-dagen, .eo-keuzes) { margin: 1.4em 0 1.6em; }

/* Knop voor een stap of pakket: één groene knop per pagina, de rest in deze vorm */
.eo-stapknop, .entry-content .eo-stapknop {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; border: 1.5px solid var(--eo-zee); border-radius: 10px;
  font: 700 .9375rem/1.2 var(--eo-f-kop); color: var(--eo-zee); text-decoration: none;
  transition: background-color .15s;
}
.eo-stapknop:hover, .eo-stapknop:focus { background: var(--eo-zee-licht); color: var(--eo-zee-donker); }
.eo-stapknop svg { width: 16px; height: 16px; flex: none; }

.eo-pas-stappen > li[hidden] { display: none; }
.eo-pas-stappen .eo-checklist, .eo-lees > .eo-checklist { list-style: none; padding: 0; display: grid; gap: 6px; }
.eo-checklist li { margin: 0; padding-left: 24px; position: relative; }
.eo-checklist li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border: solid var(--eo-groen); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
.eo-pas-stap-af::before { background: var(--eo-zee); color: var(--eo-wit) !important; }

/* Pakketreis: "Liever alles geregeld?" */
.eo-pakket { background: var(--eo-lucht); border-radius: 16px; padding: clamp(18px, 3vw, 24px); display: grid; gap: 14px; }
.eo-pakket > * { margin: 0; min-width: 0; }
.eo-pakket-foto { display: block; width: 100%; height: clamp(140px, 24vw, 200px); border-radius: 12px; object-fit: cover; }
.eo-pakket-label { font: 800 .75rem/1.2 var(--eo-f-kop); letter-spacing: .1em; text-transform: uppercase; color: var(--eo-zee-donker); }
.eo-pakket-naam { font: 700 1.25rem/1.25 var(--eo-f-kop); }
.eo-pakket-inhoud { display: grid; gap: 14px; }
@media (min-width: 640px) { .eo-pakket-inhoud { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.eo-pakket ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9375rem; }
.eo-pakket ul li { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.eo-pakket ul svg { width: 18px; height: 18px; color: var(--eo-groen); flex: none; margin-top: 2px; }
.eo-pakket-prijs { background: var(--eo-wit); border-radius: 12px; padding: 12px 16px; text-align: right; line-height: 1.15; }
.eo-pakket-prijs small { display: block; font-size: .8125rem; color: var(--eo-diep-zacht); }
.eo-pakket-prijs strong { display: block; font: 800 1.75rem/1.1 var(--eo-f-kop); font-variant-numeric: tabular-nums; }
.eo-pakket-wie { font-size: .875rem; line-height: 1.45; color: var(--eo-diep-zacht); }

/* Advies van een persoon, of "Ons advies" */
.eo-advies { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 16px 18px; border: 1px solid var(--eo-lijn); border-radius: 14px; background: var(--eo-wit); }
.eo-advies > * { margin: 0; }
.eo-advies-foto { grid-row: 1 / span 3; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.eo-advies-wie { font: 700 .875rem/1.3 var(--eo-f-kop); color: var(--eo-zee-donker); }
.eo-advies-tip { line-height: 1.55; }
.eo-advies-link { font-weight: 700; font-size: .9375rem; }

/* Dagschema: per dag de plek, de nachten en de rit */
.eo-dagen { list-style: none; margin: 0; padding: 0; }
.eo-dagen > li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 16px; margin: 0; padding: 16px 0; border-top: 1px solid var(--eo-lijn); }
.eo-dagen > li:last-child { border-bottom: 1px solid var(--eo-lijn); }
.eo-dag { font: 800 .9375rem/1.3 var(--eo-f-kop); color: var(--eo-zee); font-variant-numeric: tabular-nums; }
.eo-dagen h3 { margin: 0 0 4px; font: 700 1.125rem/1.3 var(--eo-f-kop); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.eo-nachten { font: 600 .8125rem/1 var(--eo-f-tekst); background: var(--eo-lucht); border-radius: 999px; padding: 5px 10px; color: var(--eo-diep); }
.eo-dagen p { margin: 0 0 6px; }
.eo-rit { display: flex; align-items: center; gap: 7px; font-size: .875rem; color: var(--eo-diep-zacht); }
.eo-rit svg { width: 17px; height: 17px; color: var(--eo-zee); flex: none; }
@media (max-width: 480px) { .eo-dagen > li { grid-template-columns: 1fr; } .eo-dag { margin-bottom: 2px; } }

/* De drie manieren van reizen (/reizen/) */
.eo-keuzes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 860px) { .eo-keuzes { grid-template-columns: repeat(3, 1fr); } }
.eo-keuzes > li { margin: 0; display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--eo-lijn); border-radius: 16px; background: var(--eo-wit); }
.eo-keuzes > li > * { margin: 0; }
.eo-keuzes h3 { font: 700 1.25rem/1.25 var(--eo-f-kop); }
.eo-keuzes p { color: var(--eo-diep-zacht); font-size: .9375rem; line-height: 1.55; }
.eo-keuzes .eo-blok-link { margin-top: auto; padding-top: 6px; }
.eo-keuze-wie { font: 800 .75rem/1.2 var(--eo-f-kop); letter-spacing: .1em; text-transform: uppercase; color: var(--eo-zee-donker); }

/* Home: wie helpt je */
.eo-wiehelpt { display: grid; gap: 18px; align-items: center; }
@media (min-width: 700px) { .eo-wiehelpt { grid-template-columns: 112px minmax(0, 1fr) auto; column-gap: 28px; } }
.eo-wiehelpt > * { margin: 0; min-width: 0; }
.eo-wiehelpt-foto { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; background: var(--eo-wit); }
.eo-wiehelpt-tekst h3 { margin: 0 0 6px; }
.eo-wiehelpt-tekst h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem); margin-bottom: 6px; }
.eo-wiehelpt-tekst p { margin: 0; color: var(--eo-diep-zacht); max-width: 40em; }
.eo-lees > .eo-wiehelpt { margin: 1em 0 1.6em; }
@media (min-width: 700px) { .eo-lees > .eo-wiehelpt { grid-template-columns: 112px minmax(0, 1fr); } }
.eo-lees > .eo-wiehelpt > .eo-knop-stil { justify-self: start; }
@media (min-width: 700px) { .eo-lees > .eo-wiehelpt > .eo-knop-stil { grid-column: 2; } }
.eo-lees > .eo-wiehelpt .eo-wiehelpt-tekst p { color: var(--eo-diep); }

/* Reisplan: de vaste zin bovenaan en onderaan */
.eo-geenpakket { max-width: var(--eo-breed); margin: 0 auto; padding: 18px var(--eo-rand) 0; }
.eo-geenpakket p { margin: 0 auto; max-width: calc(240px + var(--eo-lees) + 80px); padding: 14px 18px; background: var(--eo-zee-licht); border-radius: 12px; font-size: .9375rem; line-height: 1.5; }
.eo-artikel + .eo-geenpakket { padding-bottom: var(--eo-ruimte); }

/* Formulier (reisvraag) */
.eo-formulier { display: grid; gap: 8px; max-width: 640px; }
.eo-formulier fieldset { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; display: grid; gap: 14px; }
.eo-formulier legend { padding: 0; margin-bottom: 12px; font: 700 1.25rem/1.25 var(--eo-f-kop); color: var(--eo-diep); }
.eo-formulier p { margin: 0; }
.eo-formulier label, .eo-veldlabel { display: block; font-weight: 700; font-size: .9375rem; margin-bottom: 6px; color: var(--eo-diep); }
.eo-formulier :where(input[type="text"], input[type="email"], input[type="date"], input[type="number"], textarea), .eo-routebalk input[type="date"] {
  width: 100%; min-height: 48px; padding: 11px 14px; margin: 0;
  border: 1.5px solid var(--eo-lijn); border-radius: 10px; background: var(--eo-wit);
  font: 400 1rem/1.4 var(--eo-f-tekst); color: var(--eo-diep);
}
.eo-formulier textarea { min-height: 96px; resize: vertical; }
.eo-formulier :where(input, textarea):focus-visible, .eo-routebalk input[type="date"]:focus-visible { outline: 3px solid var(--eo-zee); outline-offset: 1px; border-color: var(--eo-zee); }
.eo-velden { display: grid; gap: 14px; }
@media (min-width: 560px) { .eo-velden-2 { grid-template-columns: 1fr 1fr; } }
.eo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.eo-chips label { position: relative; margin: 0; font-weight: 600; }
.eo-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.eo-chips span { display: inline-block; padding: 9px 14px; border: 1.5px solid var(--eo-lijn); border-radius: 999px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.eo-chips input:checked + span { border-color: var(--eo-zee); background: var(--eo-zee-licht); color: var(--eo-zee-donker); }
.eo-chips input:focus-visible + span { outline: 3px solid var(--eo-zee); outline-offset: 1px; }
.eo-vink label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-weight: 400; margin: 0; }
.eo-vink input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--eo-zee); }
.eo-formulier .eo-knop { border: 0; cursor: pointer; margin-top: 4px; }
.eo-formulier-noot { font-size: .875rem; color: var(--eo-diep-zacht); }
.eo-formulier-fout { padding: 14px 18px; border-radius: 12px; background: var(--eo-zee-licht); font-weight: 600; }
.eo-formulier-klaar { padding: 20px 22px; border-radius: 14px; background: color-mix(in srgb, var(--eo-groen) 10%, var(--eo-wit)); }
.eo-formulier-klaar p { margin: 0; }
.eo-formulier-klaar-kop { font: 700 1.25rem/1.3 var(--eo-f-kop); margin-bottom: 6px !important; }
.eo-veld-verborgen { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Home: "Maak er een reis van" in de held. Mobiel onder het paneel en de feitenstrook;
   desktop in de rechterkolom onder de foto, zodat daar geen leeg vlak ontstaat */
.eo-held-reis { padding-top: clamp(40px, 6vw, 56px); }
.eo-held-reis .eo-blok-kop { margin-bottom: 18px; }
.eo-held-reis h2 { margin: 0; font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2rem); line-height: 1.1; letter-spacing: -.02em; }
@media (min-width: 900px) {
  .eo-held-binnen { grid-template-rows: calc(var(--eo-held-h) - 56px) auto 1fr; }
  .eo-held-binnen > .eo-planner { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .eo-held-binnen > .eo-held-reis { grid-column: 2; grid-row: 2; padding-top: 36px; }
  .eo-held-binnen > .eo-feitenstrook { grid-row: 3; padding-top: 24px; }
}

/* In de leeskolom (640 px): keuzes vullen de breedte, ook als er één verborgen is; reiskaarten in twee kolommen */
.eo-lees > .eo-routes { margin: 1.4em 0 1.6em; }
@media (min-width: 640px) { .eo-lees > .eo-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 560px) { .eo-lees > .eo-keuzes { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
/* Op een smal scherm mogen de knoppen in de paginakop over twee regels lopen */
@media (max-width: 480px) {
  .eo-knopregel .eo-knop, .eo-knopregel .eo-knop-stil { width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
}

/* Home: drie tabbladen bovenaan het paneel (alleen de overtocht, zelf samenstellen, kant-en-klare reis) */
.eo-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 20px; }
.eo-tabs button { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 12px 6px 13px; border: 1.5px solid var(--eo-lijn); border-radius: 12px; background: var(--eo-wit); color: var(--eo-diep-zacht); font: 700 .875rem/1.2 var(--eo-f-kop); text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.eo-tabs button svg { width: 22px; height: 22px; color: var(--eo-zee); flex: none; }
.eo-tabs button:hover { border-color: var(--eo-zee); color: var(--eo-diep); background: var(--eo-wit); }
.eo-tabs button[aria-selected="true"] { border-color: var(--eo-zee); background: var(--eo-zee-licht); color: var(--eo-diep); box-shadow: inset 0 -3px 0 var(--eo-zee); }
.eo-tabs button:focus-visible { outline: 3px solid var(--eo-zee); outline-offset: 2px; }
.eo-paneel[hidden] { display: none; }
.eo-paneel + .eo-paneel { margin-top: 28px; } /* zonder JavaScript staan de panelen onder elkaar */
.eo-paneel-intro { margin: 0 0 14px; font-size: .9375rem; line-height: 1.45; color: var(--eo-diep-zacht); }
.eo-paneel-leeg { margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; background: var(--eo-lucht); font-size: .9375rem; }
.eo-paneel-leeg[hidden] { display: none; }
.eo-pakketkeuze { margin-bottom: 14px; }
.eo-nietvergeten { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--eo-lijn); }
.eo-nietvergeten .eo-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .875rem; }
.eo-bouwstenen li[hidden] { display: none; }
.eo-bouwstenen a { font-weight: 600; }

/* Pakketkaarten: in het paneel onder elkaar, in de leeskolom twee naast elkaar */
.eo-pakketkaarten { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.eo-pakketkaarten > li { margin: 0; padding: 16px 18px; border: 1px solid var(--eo-lijn); border-radius: 14px; background: var(--eo-wit); display: flex; flex-direction: column; gap: 4px; }
.eo-pakketkaarten > li > * { margin: 0; }
.eo-pakketkaarten > li:has(> .eo-pakketkaart-foto) { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr; column-gap: 14px; row-gap: 4px; }
.eo-pakketkaarten > li > .eo-pakketkaart-foto { grid-row: 1 / span 4; width: 88px; height: 88px; border-radius: 12px; object-fit: cover; }
.eo-pakketkaarten > li:has(> .eo-pakketkaart-foto) > :not(.eo-pakketkaart-foto) { grid-column: 2; min-width: 0; }
.eo-pakketkaart-naam { font: 700 1.125rem/1.25 var(--eo-f-kop); color: var(--eo-diep); }
.eo-pakketkaart-feiten { font-size: .875rem; line-height: 1.45; color: var(--eo-diep-zacht); }
.eo-pakketkaart-prijs { margin-top: 4px !important; }
.eo-pakketkaart-prijs strong { font: 800 1.5rem/1 var(--eo-f-kop); color: var(--eo-diep); font-variant-numeric: tabular-nums; }
.eo-pakketkaart-prijs small { font-size: .8125rem; color: var(--eo-diep-zacht); }
.eo-pakketkaarten .eo-pas-knoppen { margin-top: auto !important; padding-top: 8px; }
.eo-lees > .eo-pakketkaarten { margin: 1.4em 0 1.6em; }
@media (min-width: 640px) { .eo-lees > .eo-pakketkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Eén pakketkaart: over de hele leesbreedte, geen lege halve rij ernaast */
.eo-lees > .eo-pakketkaarten:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); }
.eo-lees > .eo-pakketkaarten > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* "Drie manieren om te reizen": keuzes, geen stappen, dus een foto-miniatuur in plaats van een nummer */
.eo-pas-keuzes .eo-pas-stappen > li::before { content: none; display: none; }
.eo-keuze-foto { grid-row: 1 / span 4; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; justify-self: center; margin-top: 4px; }
.eo-pas-keuzes .eo-pas-stappen h3 { margin-top: 8px; }
.eo-keuze-boeken { font-weight: 600; color: var(--eo-diep) !important; }

/* Home: reiskaarten boven de inspiratie, en een zichtbare plaatshouder zolang een foto ontbreekt */
.eo-reizen + .eo-ideeen { margin-top: clamp(32px, 4vw, 48px); }
.eo-plaatshouder { display: grid; place-items: center; text-align: center; padding: 8px; font: 700 .75rem/1.2 var(--eo-f-kop); color: var(--eo-diep-zacht); background: var(--eo-wit); border: 2px dashed var(--eo-lijn); }

/* Voet: link naar de reisvraag */
.eo-voet-vraag { margin: 0 0 12px; max-width: 34em; font-size: .9375rem; }
.eo-voet-vraag a { font-weight: 700; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Balk "Pas deze route aan" (inc/routebalk.php, assets/routebalk.js) */
.eo-lees > .eo-routebalk { margin: 0 0 2em; }
.eo-routebalk { padding: 18px 20px 20px; border: 1px solid var(--eo-lijn); border-radius: 14px; background: var(--eo-wit); box-shadow: var(--eo-schaduw); }
.eo-routebalk-kop { margin: 0 0 14px; font: 700 1.125rem/1.3 var(--eo-f-kop); }
.eo-routebalk-velden { display: grid; gap: 16px; align-items: start; }
@media (min-width: 560px) {
  .eo-routebalk-velden { grid-template-columns: 1fr 1fr; }
  .eo-routebalk-velden > :has(.eo-routebalk-dagen) { grid-column: 1 / -1; }
}
.eo-routebalk-velden > div { min-width: 0; }
.eo-routebalk .eo-veldlabel { margin: 0 0 6px; }
.eo-routebalk-dagen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 5px; list-style: none; background: var(--eo-lucht); border-radius: 12px; }
.eo-routebalk-dagen li { margin: 0; }
.eo-routebalk-dagen a { display: block; padding: 10px 4px; border-radius: 9px; text-align: center; font-weight: 700; font-size: .9375rem; color: var(--eo-diep-zacht); text-decoration: none; white-space: nowrap; }
.eo-routebalk-dagen a:hover { color: var(--eo-diep); }
.eo-routebalk-dagen a[aria-current] { background: var(--eo-wit); color: var(--eo-diep); box-shadow: var(--eo-schaduw); }
.eo-routebalk-uitkomst { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--eo-zee-licht); font-size: .9375rem; line-height: 1.5; }
.eo-dag-datum { display: block; margin-top: 2px; font: 600 .8125rem/1.3 var(--eo-f-tekst); color: var(--eo-diep-zacht); }
.eo-js [data-alleen="camper"] { display: none; }
.eo-js.eo-met-camper [data-alleen="camper"] { display: revert; }

/* Hulpmodule op de home: korte reisvraag boven "Wie helpt je" */
.eo-hulpblok { display: grid; gap: 24px 56px; align-items: start; scroll-margin-top: 16px; }
@media (min-width: 900px) { .eo-hulpblok { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .eo-hulpblok-tekst { position: sticky; top: 24px; } }
.eo-hulpblok-groet { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.eo-hulpblok-groet img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.eo-hulpblok-groet p { margin: 0; font: 700 1.25rem/1.3 var(--eo-f-kop); color: var(--eo-diep); }
.eo-hulpblok-tekst > p { margin: 12px 0 16px; font-size: 1.0625rem; color: var(--eo-diep-zacht); }
.eo-hulpblok .eo-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.eo-hulpblok .eo-formulier { max-width: none; padding: clamp(18px, 3vw, 28px); background: var(--eo-wit); border: 1px solid var(--eo-lijn); border-radius: 16px; box-shadow: var(--eo-schaduw); }
.eo-hulpblok .eo-formulier fieldset { margin-bottom: 6px; }

/* Hulpbubbel: staat boven de boekbalk; --eo-balk-h komt uit assets/hulp.js */
.eo-hulpbubbel { position: fixed; right: 16px; bottom: calc(var(--eo-balk-h, 0px) + 12px); z-index: 45; display: grid; justify-items: end; gap: 10px; animation: eo-omhoog .35s ease-out both; }
.eo-hulpbubbel[hidden], .eo-hulpkaart[hidden] { display: none; }
.eo-hulpkaart { position: relative; width: min(320px, calc(100vw - 32px)); padding: 16px 18px 14px; background: var(--eo-wit); border: 1px solid var(--eo-lijn); border-radius: 16px; box-shadow: var(--eo-schaduw-sterk); animation: eo-omhoog .3s ease-out both; }
.eo-hulpkaart p { margin: 0; }
.eo-hulpkaart-vraag { padding-right: 26px; font: 700 1.0625rem/1.3 var(--eo-f-kop); color: var(--eo-diep); }
.eo-hulpkaart ul { list-style: none; margin: 12px 0 10px; padding: 0; display: grid; gap: 8px; }
.eo-hulpkaart li { margin: 0; }
.eo-hulpkaart li a { display: block; padding: 10px 14px; border: 1.5px solid var(--eo-zee); border-radius: 12px; font-weight: 700; font-size: .9375rem; line-height: 1.25; color: var(--eo-zee-donker); text-decoration: none; }
.eo-hulpkaart li a:hover, .eo-hulpkaart li a:focus { background: var(--eo-zee-licht); color: var(--eo-zee-donker); }
.eo-hulpkaart-vrij { font-size: .875rem; color: var(--eo-diep-zacht); }
.eo-hulpkaart-sluit, .eo-hulpkaart-sluit:hover, .eo-hulpkaart-sluit:focus, .eo-hulpkaart-sluit:active { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--eo-diep-zacht); box-shadow: none; cursor: pointer; }
.eo-hulpkaart-sluit:hover { background: var(--eo-lucht); color: var(--eo-diep); }
.eo-hulpkaart-sluit svg { display: block; width: 20px; height: 20px; }
.eo-hulpknop, .eo-hulpknop:hover, .eo-hulpknop:focus, .eo-hulpknop:active { display: inline-flex; align-items: center; gap: 10px; padding: 5px 18px 5px 5px; border: 0; border-radius: 999px; background: var(--eo-diep); color: var(--eo-wit); font: 700 .9375rem/1 var(--eo-f-kop); box-shadow: var(--eo-schaduw-sterk); cursor: pointer; }
.eo-hulpknop:hover { background: var(--eo-zee-donker); }
.eo-hulpknop img { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.eo-hulpknop:focus-visible, .eo-hulpkaart-sluit:focus-visible { outline: 3px solid var(--eo-zee); outline-offset: 2px; }
@media (max-width: 699px) { .eo-hulpknop, .eo-hulpknop:hover, .eo-hulpknop:focus, .eo-hulpknop:active { padding: 3px; } .eo-hulpknop span { display: none; } }
@keyframes eo-omhoog { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .eo-hulpbubbel, .eo-hulpkaart { animation: none; } }

/* Routekaart in een reisplan: lichte ondergrond, dunne lijnen, namen als tekst met een lichte rand */
.eo-routekaart { margin: 1.4em 0 1.6em; }
.eo-routekaart svg { display: block; width: 100%; height: auto; max-height: 680px; border-radius: 16px; background: var(--eo-lucht); }
.rk-land { fill: var(--eo-wit); stroke: color-mix(in srgb, var(--eo-diep) 22%, transparent); stroke-width: .6; }
.rk-weg, .rk-boot { fill: none; stroke: var(--eo-zee); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rk-boot { stroke-dasharray: 2 6; }
.rk-haven { fill: var(--eo-wit); stroke: var(--eo-zee); stroke-width: 2; }
.rk-stop { fill: var(--eo-zee); stroke: var(--eo-wit); stroke-width: 1.5; }
.rk-nr { font: 800 10.5px var(--eo-f-kop); fill: var(--eo-wit); }
.rk-naam, .rk-vaar { font: 600 13px var(--eo-f-tekst); fill: var(--eo-diep); paint-order: stroke; stroke: var(--eo-wit); stroke-width: 3.5px; stroke-linejoin: round; }
.rk-vaar { font-size: 12px; font-weight: 500; stroke: var(--eo-lucht); }
.rk-alt { stroke: color-mix(in srgb, var(--eo-diep) 40%, var(--eo-wit)); }
.rk-vaar-alt { fill: color-mix(in srgb, var(--eo-diep) 62%, var(--eo-wit)); }
.rk-zee, .rk-land-naam { font: 800 11px var(--eo-f-kop); letter-spacing: .28em; fill: var(--eo-diep); fill-opacity: .3; }
.rk-land-naam { font-size: 10px; fill-opacity: .42; }
.eo-routekaart figcaption { margin-top: 8px; font-size: .875rem; color: var(--eo-diep-zacht); }

/* Reisplan printen of als pdf bewaren: alleen het plan, zonder menu, knoppen en balken */
a.eo-printknop, a.eo-printknop:hover { display: inline-block; text-decoration: none; }
.eo-printknop, .eo-printknop:hover, .eo-printknop:focus, .eo-printknop:active { padding: 8px 14px; border: 1px solid var(--eo-lijn); border-radius: 10px; background: var(--eo-wit); color: var(--eo-diep); font: 600 .9375rem/1.2 var(--eo-f-tekst); box-shadow: none; cursor: pointer; }
.eo-printknop:hover { border-color: var(--eo-zee); color: var(--eo-zee-donker); }
.eo-printknop:focus-visible { outline: 3px solid var(--eo-zee); outline-offset: 2px; }
.eo-printadres, .eo-alleen-print { display: none; }
/* Vaste balk onderin op een reisplan, met de checklist als venster */
.single-reisplan { padding-bottom: 116px; }
.eo-planbalk { flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding-top: 8px; padding-bottom: 10px; }
.eo-planbalk .eo-boekbalk-tekst { display: block; font-size: .8125rem; text-align: center; }
.eo-planbalk .eo-boekbalk-tekst strong::after { content: ". "; }
.eo-planbalk .eo-boekbalk-tekst span { font-size: inherit; }
.eo-planbalk-knoppen { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 6px; }
.eo-planbalk-knoppen > [hidden] { display: none; }
.eo-planbalk-knoppen .eo-knop, .eo-planbalk-knoppen .eo-printknop { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 8px; font: 600 .875rem/1.15 var(--eo-f-tekst); text-align: center; text-decoration: none; white-space: normal; }
@media (min-width: 900px) {
  .single-reisplan { padding-bottom: 80px; }
  .eo-planbalk { flex-wrap: nowrap; gap: 24px; }
  .eo-planbalk .eo-boekbalk-tekst { display: grid; font-size: .9375rem; text-align: left; }
  .eo-planbalk .eo-boekbalk-tekst strong::after { content: none; }
  .eo-planbalk .eo-boekbalk-tekst span { font-size: .875rem; }
  .eo-planbalk-knoppen { flex: none; display: flex; gap: 8px; }
  .eo-planbalk-knoppen .eo-knop, .eo-planbalk-knoppen .eo-printknop { padding: 8px 18px; font-size: .9375rem; }
}
.eo-checklijst { width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 0; border-radius: 16px; color: var(--eo-diep); background: var(--eo-wit); box-shadow: 0 16px 48px color-mix(in srgb, var(--eo-diep) 30%, transparent); }
.eo-checklijst::backdrop { background: color-mix(in srgb, var(--eo-diep) 45%, transparent); }
.eo-checklijst h2 { margin: 0 0 10px; font-size: 1.5rem; }
.eo-checklijst h3 { margin: 18px 0 2px; font-size: 1.0625rem; }
.eo-checklijst p { margin: 0; }
.eo-checklijst-tip { padding: 10px 14px; border-radius: 10px; background: var(--eo-zee-licht); }
.eo-checklijst .eo-checklijst-stand { margin-top: 10px; font-weight: 600; }
.eo-checklijst ul { list-style: none; margin: 0; padding: 0; }
.eo-checklijst li { display: grid; gap: 8px 16px; margin: 0; padding: 11px 0; }
.eo-checklijst li + li { border-top: 1px solid var(--eo-lijn); }
.eo-checklijst label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.eo-checklijst input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--eo-zee); }
.eo-checklijst label span { display: grid; gap: 2px; min-width: 0; }
.eo-checklijst label strong { font-weight: 600; }
.eo-checklijst label small { color: var(--eo-diep-zacht); font-size: .9375rem; line-height: 1.4; }
.eo-checklijst input:checked + span strong { color: var(--eo-diep-zacht); text-decoration: line-through; }
.eo-checklijst-knop { justify-self: start; margin-left: 32px; }
@media (min-width: 620px) {
  .eo-checklijst li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .eo-checklijst-knop { margin-left: 0; white-space: nowrap; }
}
.eo-checklijst .eo-checklijst-noot { margin-top: 14px; color: var(--eo-diep-zacht); font-size: .8125rem; line-height: 1.4; }
.eo-checklijst-sluit { width: 100%; margin-top: 14px; }
/* Onderaan het reisplan: verder lezen en een alternatief vragen */
.eo-lees > .eo-lezen-kop { margin-top: 2.2em; }
.eo-lees > .eo-lezen { margin: 1.2em 0 0; }
@media (min-width: 640px) { .eo-lees > .eo-lezen { grid-template-columns: repeat(2, 1fr); } }
.eo-alternatief { max-width: 700px; margin: 44px auto 0; padding: 26px 24px; border-radius: 16px; background: var(--eo-zee-licht); box-sizing: border-box; scroll-margin-top: 90px; }
.eo-alternatief-kop { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.eo-alternatief-portret { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.eo-alternatief h2 { margin: 0; }
.eo-alternatief > p { margin: 0 0 18px; }
.eo-alternatief .eo-formulier { max-width: none; }
@media (max-width: 760px) { .eo-alternatief { margin-left: var(--eo-rand); margin-right: var(--eo-rand); padding: 22px 18px; } }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .eo-kop, .eo-voet, .eo-boekbalk, .eo-hulpbubbel, .eo-checklijst, .eo-knopregel, .eo-kruimels, .eo-kenmerken, .eo-paginakop-foto, .eo-alternatief, .eo-lezen, .eo-lezen-kop, #wpadminbar { display: none !important; }
  .eo-alleen-print { display: block !important; }
  .eo-printadres { display: block; margin: 8px 0 0; font-size: 9.5pt; color: var(--eo-diep-zacht); }
  .eo-paginakop h1 { font-size: 22pt; }
  .eo-lead { margin-top: 8px; font-size: 11pt; max-width: none; }
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  #wrapper, #inner-wrap, #primary, .content-container, .content-area, .site-main, .content-wrap, .entry, .entry-content-wrap, .eo-inhoud { min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; }
  .eo-lees > :last-child { margin-bottom: 0 !important; }
  .eo-paginakop, .eo-paginakop-binnen, .eo-artikel { display: block !important; max-width: none !important; padding: 0 !important; background: none !important; }
  .eo-artikel { margin: 12px 0 0 !important; }
  .eo-artikel ~ .eo-geenpakket { display: none !important; }
  .eo-geenpakket { max-width: none !important; margin: 10px 0 !important; padding: 0 !important; }
  .eo-lees { font-size: 11pt; line-height: 1.45; }
  .eo-lees > h2 { margin-top: 1.2em; font-size: 15pt; break-after: avoid; }
  .eo-tabel, .eo-tabel table { overflow: visible !important; box-shadow: none !important; }
  tr, .eo-tabel, .eo-dagen > li, figure, .eo-stappen > li, .eo-checklist li { break-inside: avoid; }
  .eo-figuur img { width: auto !important; max-width: 100%; max-height: 6.5cm; }
  .eo-routekaart svg { max-height: 8.5cm; width: auto !important; margin: 0 auto; }
  .eo-lees a[href^="/"]:not([href^="/go/"])::after { content: " (engelandovertocht.nl" attr(href) ")"; font-size: .85em; }
}