/* PHP adapter: original site.css owns brand tokens; these shared components
   adapt server-rendered forms/navigation without a React runtime. */
body { font-family: Inter, Arial, sans-serif; }
[hidden] { display: none !important; /* Enforce native hidden over utility display. */ }
.content-page { max-width: 80rem; margin: auto; padding: 8rem 1.5rem 5rem; min-height: 75vh; }
.content-page > h1 { margin-bottom: 2rem; }
.content-page > p { margin: 1.5rem 0; color: var(--text-secondary); }
.article-page { max-width: 48rem; margin: auto; padding: 8rem 1.5rem 5rem; }
.article-page article { margin-top: 2rem; }
.article-page h1 { overflow-wrap: anywhere; }
.article-body { margin: 2.5rem 0; font-size: 1.125rem; line-height: 1.8; color: var(--text-secondary); overflow-wrap: anywhere; }
.article-body p { margin: 1.5rem 0; white-space: normal; }
.article-body h2 { font-size: 1.5rem; color: var(--text-primary); font-weight: 700; margin-top: 2rem; }
.panel { border: 1px solid var(--surface-border); border-radius: 1rem; padding: clamp(1.25rem,3vw,2rem); background: var(--glass-bg); min-width: 0; }
.panel h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; }
.panel p { margin-bottom: 1.25rem; }
.login-panel { max-width: 36rem; }
.form-stack, .form-field { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.form-field { margin: 1rem 0; }
.form-field label { font-weight: 600; font-size: .875rem; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-width: 0; border: 1px solid var(--surface-border); border-radius: .75rem; padding: .8rem 1rem; background: var(--surface); color: var(--text-primary); font-size: 1rem; line-height: 1.5; }
.form-field textarea { resize: none; min-height: 9rem; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--primary); outline-offset: 2px; }
.form-field [aria-invalid=true] { border-color: #fca5a5; }
.form-field .field-error:empty { display: none; }
.form-columns { display: grid; grid-template-columns: minmax(0,1fr); gap: 0 1rem; }
.form-feedback { margin: 1rem 0; color: var(--text-primary); overflow-wrap: anywhere; }
.form-feedback:empty { display: none; }
.form-feedback[data-error=true] { color: #fca5a5; }
.form-feedback a { text-decoration: underline; }
.form-field .reveal { align-self: flex-start; min-height: 44px; font-size: .875rem; text-decoration: underline; color: var(--text-secondary); }
.field-help { font-size: .875rem; color: var(--text-secondary); }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.5rem 0; }
.actions form { margin: 0; }
.checkbox { display: flex; gap: .75rem; align-items: center; min-height: 44px; }
.checkbox input { width: 1.25rem; }
.notice { border-left: 3px solid var(--primary); padding: 1rem; background: var(--surface); }
.editor-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 2rem; }
.editor-item { display: block; padding: 1rem 0; border-bottom: 1px solid var(--surface-border); overflow-wrap: anywhere; }
.editor-item:hover, .editor-item[aria-current] { color: var(--primary); }
.editor-item small { display: block; color: var(--text-secondary); margin-top: .4rem; }
.editor-toolbar { display:flex; flex-wrap:wrap; gap:.5rem; padding:.5rem; border:1px solid var(--surface-border); border-bottom:0; border-radius:.75rem .75rem 0 0; background:var(--surface); }
.editor-toolbar button, .editor-upload { min-height:38px; padding:.45rem .65rem; border:1px solid var(--surface-border); border-radius:.5rem; color:var(--text-primary); background:transparent; font-size:.875rem; cursor:pointer; }
.editor-toolbar > input { min-height:38px; min-width:min(100%,14rem); padding:.45rem .65rem; border:1px solid var(--surface-border); border-radius:.5rem; color:var(--text-primary); background:transparent; }
.editor-upload input { position:absolute; inline-size:1px; block-size:1px; opacity:0; overflow:hidden; }
.rich-editor { min-height:18rem; padding:1rem; border:1px solid var(--surface-border); border-radius:0 0 .75rem .75rem; background:var(--surface); color:var(--text-primary); overflow-wrap:anywhere; }
.rich-editor:focus { outline:2px solid var(--primary); outline-offset:2px; }
.rich-editor p,.rich-editor ul,.rich-editor ol { margin:0 0 1rem; }
.rich-editor ul,.rich-editor ol { padding-left:1.5rem; }
.rich-editor img,.article-body img { display:block; max-width:100%; height:auto; margin:1.5rem 0; border-radius:.75rem; }
.form-field .editor-source { position:absolute; width:1px; height:1px; min-height:0; padding:0; border:0; opacity:0; pointer-events:none; overflow:hidden; }
.user-list p { padding:1rem 0; border-bottom:1px solid var(--surface-border); }
.secret-key { font-family: monospace; letter-spacing: .08em; overflow-wrap: anywhere; padding: 1rem; background: var(--surface); user-select: all; }
#mobile-navigation { background: var(--surface); padding: 1rem 1.5rem; max-height: calc(100dvh - 4rem); overflow-y: auto; }
#mobile-navigation a { display: block; padding: .85rem .5rem; min-height: 44px; }
header.is-scrolled { background: rgba(10,13,20,.9) !important; /* Override exported inline header start state. */ border-bottom: 1px solid var(--surface-border); }
#background video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
#background video.ready { opacity: 1; }
dialog { border: 1px solid var(--surface-border); border-radius: 1rem; background: var(--background); color: var(--text-primary); padding: 2rem; max-width: min(32rem,calc(100vw - 2rem)); margin: auto; }
dialog::backdrop { background: rgba(0,0,0,.75); }
dialog h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
fieldset:disabled { opacity: .6; }
@media(min-width:640px) { .form-columns { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(min-width:1024px) { .editor-layout { grid-template-columns: 280px minmax(0,1fr); } #mobile-navigation { display: none; } }
@media(max-width:639px) { .actions > .btn-primary, .actions > .btn-secondary, form > .btn-primary { width: 100%; } }
@media(prefers-reduced-motion:reduce) { #background video { transition: none; } }

.nojs-nav { position:relative; padding:5rem 1.5rem 1rem; display:flex;flex-wrap:wrap;gap:1rem;background:var(--surface); }
.nojs-nav a { padding:.75rem; }

/* Diensten delen op desktop dezelfde rijen, ook als tekst over meerdere regels loopt. */
.service-cards { align-items: stretch; }
.service-card { min-width: 0; translate: none; }
.service-card:hover { transform: none; }
.service-card-content > a { min-height: 50px; }
@media (min-width: 1024px) {
  @supports (grid-template-rows: subgrid) {
    .service-card { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; }
    .service-card-content { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 1rem; }
    .service-card-content > ul { align-self: start; }
  }
}
.privacy-copy { line-height: 1.75; }
.privacy-copy h2 { margin: 2rem 0 .75rem; font-size: 1.35rem; font-weight: 700; }
.privacy-copy p { margin: 1rem 0; color: var(--text-secondary); }
.privacy-copy ul { padding-left: 1.5rem; list-style: disc; }
.privacy-copy a { text-decoration: underline; text-underline-offset: .2em; }
.privacy-preview-banner { max-width: 48rem; margin: auto; padding: 7rem 1.5rem 0; }
.privacy-preview-banner + .privacy-copy { padding-top: 2rem; }
.privacy-preview-banner .notice { margin-bottom: 1rem; }

/* Vacatures gebruiken dezelfde kaarten en formulieren als nieuws. */
.vacancy-badge { color: var(--primary); border: 1px solid var(--primary); padding: .25rem .6rem; border-radius: 999px; }
.vacancy-card h2, .vacancy-card h3 { overflow-wrap: anywhere; }
.careers-page > h1 { margin-bottom: 1.5rem; }
.careers-page > .section-description { margin-bottom: 2.5rem; }
.careers-subheading { margin: 2rem 0 1.5rem; font-size: 1.5rem; font-weight: 700; }
.application-panel { margin-top: 3rem; }
.application-panel p { line-height: 1.75; color: var(--text-secondary); overflow-wrap: anywhere; }
.application-panel a:not(.btn-primary) { text-decoration: underline; text-underline-offset: .2em; }
.vacancy-page article > .section-badge { margin-top: 1.5rem; }
.vacancy-facts { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 2rem 0; color: var(--text-secondary); }
.vacancy-facts li { overflow-wrap: anywhere; }
.vacancy-facts strong { display: block; font-size: .85rem; color: var(--text-primary); }
.article-body ul, .article-body ol { padding-left: 1.5rem; margin: 1rem 0; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin: .5rem 0; }
.article-body h3 { margin-top: 1.75rem; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.news-filters { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }
.news-filters a { padding: .65rem 1rem; border: 1px solid var(--surface-border); border-radius: .65rem; min-height: 44px; }
.news-filters a[aria-current] { color: var(--primary); border-color: var(--primary); }
@media(max-width:639px) { .application-panel .btn-primary { width: 100%; } }