/* Eén vaste headermaat en navigatie-uitlijning op alle inhoudelijke pagina's. */
@media (min-width:981px){
  html{
    scrollbar-gutter:stable!important;
    overflow-y:scroll!important;
  }
}

html body header{
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
  background:rgba(255,255,255,.98)!important;
  border-bottom:1px solid #e6ecea!important;
}

/* Sommige artikelen hebben alleen een Arbo-span; die is tegelijk first- en last-child. */
html body header .brand>span{color:#061f3b!important}
html body header .brand>span>span:first-child{color:#0f3f1c!important}
html body header .brand>span>span:last-child:not(:first-child){color:#061f3b!important}

@media (min-width:981px){
  html body header .container.nav,
  html body header .nav,
  html body.blog-page header .container.nav,
  html body.blog-page header .nav{
    box-sizing:border-box!important;
    width:min(1120px,calc(100% - 48px))!important;
    max-width:1120px!important;
    min-height:80px!important;
    height:80px!important;
    margin:0 auto!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:210px minmax(0,1fr) 120px!important;
    align-items:center!important;
    gap:22px!important;
  }

  html body header .brand{
    grid-column:1!important;
    box-sizing:border-box!important;
    width:210px!important;
    min-width:210px!important;
    max-width:210px!important;
    height:80px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-self:start!important;
    gap:10px!important;
    white-space:nowrap!important;
  }

  html body header .brand>span{
    display:inline-flex!important;
    align-items:baseline!important;
    white-space:nowrap!important;
    line-height:1!important;
    font-size:18px!important;
    font-weight:900!important;
    letter-spacing:-.02em!important;
  }

  html body header .brand img{
    flex:0 0 44px!important;
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    object-fit:contain!important;
  }

  html body header .menu-toggle{
    display:none!important;
  }

  html body header nav,
  html body header #hoofdmenu{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:80px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    justify-self:stretch!important;
    gap:18px!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#475569!important;
    font-size:14.5px!important;
    font-weight:750!important;
    line-height:1!important;
  }

  html body header nav a,
  html body header #hoofdmenu a{
    box-sizing:border-box!important;
    width:auto!important;
    min-height:80px!important;
    height:80px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
    border:0!important;
    border-bottom:2px solid transparent!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    white-space:nowrap!important;
    font-family:-apple-system,system-ui,"Segoe UI",Inter,Arial,sans-serif!important;
    font-size:14px!important;
    font-weight:750!important;
    letter-spacing:0!important;
    line-height:1!important;
  }

  html body header nav a.active,
  html body header #hoofdmenu a.active{
    border-bottom-color:#0f3f1c!important;
  }

  /* Contact blijft op desktop uitsluitend de groene knop rechts. */
  html body header nav a[href="/contact.html"],
  html body header nav a[href="contact.html"],
  html body header #hoofdmenu a[href="/contact.html"],
  html body header #hoofdmenu a[href="contact.html"]{
    display:none!important;
  }

  html body header .desktop-contact{
    justify-self:end!important;
    min-height:48px!important;
    height:48px!important;
    padding:13px 22px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:nowrap!important;
  }
}

/* De breadcrumbbalk behoudt op iedere subpagina exact dezelfde hoogte en lijn. */
html body > .breadcrumbs{
  box-sizing:border-box!important;
  min-height:31px!important;
  margin:0!important;
  padding:12px 0 0!important;
  font-size:14px!important;
  line-height:1.35!important;
}

html body > .breadcrumbs > .container{
  box-sizing:border-box!important;
  width:min(1120px,calc(100% - 48px))!important;
  max-width:1120px!important;
  margin:0 auto!important;
  padding:0!important;
}

@media (min-width:1600px){
  html body header .container.nav,
  html body header .nav,
  html body.blog-page header .container.nav,
  html body.blog-page header .nav{
    width:calc(100% - 112px)!important;
    max-width:1480px!important;
  }

  html body > .breadcrumbs > .container{
    width:calc(100% - 112px)!important;
    max-width:1480px!important;
  }

  html body header .brand img{
    flex-basis:50px!important;
    width:50px!important;
    min-width:50px!important;
    max-width:50px!important;
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
  }

  html body header .brand>span{
    font-size:18.75px!important;
  }

  html body header nav a,
  html body header #hoofdmenu a,
  html body header .desktop-contact{
    font-size:15px!important;
  }
}

@media (min-width:2200px){
  html body header .container.nav,
  html body header .nav,
  html body.blog-page header .container.nav,
  html body.blog-page header .nav{
    width:calc(100% - 160px)!important;
    max-width:1600px!important;
  }


  html body > .breadcrumbs > .container{
    width:calc(100% - 160px)!important;
    max-width:1600px!important;
  }

  html body header .brand img{
    flex-basis:56px!important;
    width:56px!important;
    min-width:56px!important;
    max-width:56px!important;
    height:56px!important;
    min-height:56px!important;
    max-height:56px!important;
  }

  html body header .brand>span{
    font-size:19.5px!important;
  }

  html body header nav a,
  html body header #hoofdmenu a,
  html body header .desktop-contact{
    font-size:16px!important;
  }
}

@media (max-width:980px){
  html body > .breadcrumbs{
    min-height:29px!important;
    padding-top:10px!important;
  }

  html body > .breadcrumbs > .container{
    width:calc(100% - 28px)!important;
    max-width:none!important;
  }

  html body header nav a[href="/contact.html"],
  html body header nav a[href="contact.html"],
  html body header #hoofdmenu a[href="/contact.html"],
  html body header #hoofdmenu a[href="contact.html"]{
    display:flex!important;
  }
}

/*
 * Responsieve titelverdeling.
 * De inhoud van H1-koppen blijft ongewijzigd voor SEO; alleen de visuele
 * regelval wordt gebalanceerd. Zo ontstaan op tussenmaten geen losse korte
 * woorden, terwijl lange medische functienamen op mobiel wel mogen afbreken.
 */
html body main#inhoud h1{
  text-wrap:balance;
  hyphens:none;
}

@media (min-width:641px){
  html body main#inhoud h1{
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  /* Artikelpagina's zonder hero-visual benutten hun tekstkolom volledig. */
  html body.blog-page main#inhoud > section.hero:not(#home) h1{
    max-width:900px!important;
  }
}

@media (min-width:981px){
  /* De kennisbank heeft een visual naast de kop en vraagt daarom om een
     iets compactere schaal dan tekstbrede artikelhero's. */
  html body main#inhoud .knowledge-hero-copy h1{
    max-width:620px!important;
    font-size:clamp(44px,3.5vw,52px)!important;
  }

  html body main#inhoud h1.title-extra-long{
    font-size:clamp(42px,3.6vw,52px)!important;
    line-height:1.05!important;
  }
}

@media (max-width:640px){
  html body main#inhoud h1.title-extra-long{
    font-size:clamp(27px,8vw,32px)!important;
    line-height:1.08!important;
    letter-spacing:-.025em!important;
  }
}

/* Deze ene inhoudelijk lange artikelkop blijft op de smalste telefoons
   volledig leesbaar zonder zes hoog opgestapelde regels. */
@media (max-width:375px){
  html body.blog-page main#inhoud h1.title-extra-long{
    font-size:25px!important;
    line-height:1.1!important;
  }
}

/* Hoofdpagina's delen op mobiel dezelfde titelhiërarchie. Alleen de lange
   functietitels blijven iets compacter, zonder woorden middenin te breken. */
@media (max-width:640px){
  html body main#inhoud .hero h1.mobile-long-title,
  html body main#inhoud .page-hero h1.mobile-long-title{
    font-size:clamp(31px,9.5vw,42px)!important;
    line-height:1.06!important;
    letter-spacing:-.04em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
    -webkit-hyphens:none!important;
  }

  html body main#inhoud .hero h1.mobile-long-title span{
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
    -webkit-hyphens:none!important;
  }
  html body.blog-page main#inhoud .hero h1.mobile-long-title{
    font-size:clamp(29px, 8vw, 34px)!important;
  }

  html body.function-overview-page main#inhoud .hero h1.role-page-title{
    font-size:clamp(29px,9vw,38px)!important;
    line-height:1.07!important;
    letter-spacing:-.04em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
    -webkit-hyphens:none!important;
  }
}

@media (max-width:360px){
  html body main#inhoud .page-hero h1.mobile-extended-title{
    font-size:31px!important;
  }
}

/* Uniforme ademruimte tussen hero-tekst en de bijbehorende hoofdvisual.
   Alleen grids met een echte figure worden geraakt; vacature-informatiekaarten
   en overige tweekolomsblokken behouden hun eigen functionele afstand. */
@media (min-width:981px){
  html body main#inhoud > .hero > .container.hero-grid:has(> figure),
  html body main#inhoud > .page-hero > .container.page-hero-grid:has(> figure){
    column-gap:clamp(56px,5vw,110px)!important;
    row-gap:40px!important;
  }
}

@media (min-width:641px) and (max-width:980px){
  html body main#inhoud > .hero > .container.hero-grid:has(> figure),
  html body main#inhoud > .page-hero > .container.page-hero-grid:has(> figure){
    column-gap:0!important;
    row-gap:36px!important;
  }
}

@media (max-width:640px){
  html body main#inhoud > .hero > .container.hero-grid:has(> figure),
  html body main#inhoud > .page-hero > .container.page-hero-grid:has(> figure){
    column-gap:0!important;
    row-gap:28px!important;
  }
}

/* Kennisbankkaarten: de inhoud mag in lengte verschillen, maar de verwijzing
   vormt binnen iedere rij één rustige, horizontale basislijn. */
html body .knowledge-grid > .article-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
}

html body .knowledge-grid > .article-card > p{
  margin-bottom:0!important;
}

html body .knowledge-grid > .article-card > span:last-child{
  margin-top:auto!important;
  padding-top:22px!important;
}