:root{
  --zb-teal:#188c83;
  --zb-teal-dark:#126f69;
  --zb-yellow:#f2c62b;
  --zb-orange:#f07831;
  --zb-cyan:#55c4cf;
  --zb-ink:#20231f;
  --zb-muted:#6e706a;
  --zb-cream:#f7f4ed;
  --zb-line:#e3ded3;
  --zb-soft:#edf7f5;
}

/* Centrale ZaNaBoZa-header */
.zb-global-header{background:#fff!important;border-bottom:1px solid #efebe3!important;padding:16px 0 13px!important;position:relative;z-index:80;line-height:1!important}
.zb-global-header,.zb-global-header *{box-sizing:border-box}
.zb-global-header-inner{width:min(1820px,calc(100% - 44px))!important;margin:0 auto!important;padding:0!important}
.zb-global-brand{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:28px!important;text-decoration:none!important;color:inherit!important;line-height:1!important}
.zb-global-copy{display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-width:0!important;line-height:1!important}
.zb-global-wordmark{display:flex!important;align-items:baseline!important;gap:0!important;font-family:Inter,Arial,Helvetica,sans-serif!important;font-size:clamp(2.45rem,3.4vw,3.75rem)!important;font-weight:700!important;line-height:.9!important;letter-spacing:.01em!important;margin:0!important;padding:0!important}
.zb-global-wordmark span{font-family:Inter,Arial,Helvetica,sans-serif!important;font-size:1em!important;font-weight:700!important;line-height:.9!important;letter-spacing:.01em!important}
.zb-global-wordmark .zb-za1{color:var(--zb-teal)!important}
.zb-global-wordmark .zb-na{color:var(--zb-yellow)!important}
.zb-global-wordmark .zb-bo{color:var(--zb-orange)!important}
.zb-global-wordmark .zb-za2{color:var(--zb-cyan)!important}
.zb-global-tagline{margin:5px 0 0!important;padding:0!important;color:#111!important;font-family:Inter,Arial,Helvetica,sans-serif!important;font-size:clamp(.9rem,1.18vw,1.28rem)!important;font-weight:700!important;line-height:1.15!important;letter-spacing:.03em!important;white-space:nowrap!important}
.zb-global-icon{display:block!important;width:92px!important;height:74px!important;max-width:none!important;max-height:none!important;object-fit:contain!important;flex:0 0 92px!important;margin:0 min(5vw,90px) 0 0!important;padding:0!important;opacity:1!important;filter:none!important}

/* De oude merkbalken zijn op deze twee publieke pagina's vervangen door de centrale header. */
body.zb-theme-ready .hero:has(.header-home),
body.zb-theme-ready header.top:has(.top-identity){display:none!important}

/* Paginaspecifieke subheaders worden rustig en sluiten aan bij de nieuwe header. */
body > header.head,
body > header.site-header,
body > header.top:not(.zb-global-header){background:var(--zb-cream)!important;color:var(--zb-ink)!important;border-bottom:1px solid var(--zb-line)!important;box-shadow:none!important}
body > header.head .brand,
body > header.top .brand,
body > header.site-header .eyebrow{display:none!important}
body > header.head .head-sub,
body > header.site-header p{color:var(--zb-muted)!important}
body > header.head .head-actions a,
body > header.top nav a,
body > header.site-header .button.secondary{
  background:#fff!important;color:var(--zb-teal)!important;border:1px solid #b8d8d4!important;
  text-decoration:none!important;border-radius:999px!important
}
body > header.head .head-actions a:hover,
body > header.top nav a:hover,
body > header.site-header .button.secondary:hover{background:var(--zb-soft)!important;border-color:var(--zb-teal)!important}

/* Knoppen: één herkenbare hoofdkleur uit de vierkleurige header. */
.btn:not(.secondary):not(.ghost):not(.danger),
.button.primary,
.search button,
.mail-signup-button,
.playlist-callout-button,
button[type="submit"]:not(.delete-link):not(.link):not(.secondary):not(.danger),
input[type="submit"]{
  background:var(--zb-teal)!important;
  border-color:var(--zb-teal)!important;
  color:#fff!important;
}
.btn:not(.secondary):not(.ghost):not(.danger):hover,
.button.primary:hover,
.search button:hover,
.mail-signup-button:hover,
.playlist-callout-button:hover,
button[type="submit"]:not(.delete-link):not(.link):not(.secondary):not(.danger):hover,
input[type="submit"]:hover{
  background:var(--zb-teal-dark)!important;
  border-color:var(--zb-teal-dark)!important;
}
.btn.ghost,
.button.light,
.button.secondary,
.search .clear,
.page-button,
.head-actions a,
.story-trip-card-link{
  background:#fff!important;color:var(--zb-teal)!important;border-color:#b8d8d4!important
}
.btn.ghost:hover,
.button.light:hover,
.button.secondary:hover,
.search .clear:hover,
.page-button:hover,
.story-trip-card-link:hover{background:var(--zb-soft)!important;border-color:var(--zb-teal)!important;color:var(--zb-teal-dark)!important}

/* Tabs, accenten en invoervelden. */
.tabs a.active{background:#def1ee!important;color:var(--zb-teal-dark)!important}
.tabs a:hover{background:var(--zb-soft)!important}
input:focus,select:focus,textarea:focus{border-color:var(--zb-teal)!important;outline-color:rgba(24,140,131,.16)!important}
.filled-counter{background:#e4f3f0!important;color:var(--zb-teal-dark)!important}
.text-link,.text-button{color:var(--zb-teal)!important}

/* Spotify behoudt bewust zijn eigen zwarte/groene merkstijl. */
.playlist-spotify-link{background:#0a0a0a!important;border-color:#0a0a0a!important;color:#fff!important}
.spotify-action{background:#fff!important;color:inherit!important}

/* Destructieve acties blijven rood. */
.delete-link,.link.danger,.danger{color:#a33e3e}
.dangerform .btn.secondary{background:#fff!important;color:#9a3e3e!important;border-color:#ddbcbc!important}
.dangerform .btn.secondary:hover{background:#fbefef!important;border-color:#c88e8e!important}

@media(max-width:820px){
  .zb-global-header-inner{width:min(100% - 24px,1820px)}
  .zb-global-icon{width:78px!important;height:63px!important;flex-basis:78px!important;margin-right:0!important}
  .zb-global-wordmark{font-size:2.65rem!important}
  .zb-global-tagline{font-size:.9rem!important;white-space:normal!important}
}
@media(max-width:520px){
  .zb-global-header{padding:13px 0 11px!important}
  .zb-global-icon{display:none!important}
  .zb-global-wordmark{font-size:2.45rem!important}
  .zb-global-tagline{font-size:.82rem!important}
}
