/* Writehere Editorial — lokale CSS, geen buildstap of externe requests. */
:root {
  --whwn-paper: #f8f7f3;
  --whwn-ink: #20211f;
  --whwn-blue: #224be6;
  --whwn-muted: #62665d;
  --whwn-line: #dadbd4;
  --whwn-sage: #eaece2;
}
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; }
:where(.wp-site-blocks, .editor-styles-wrapper) { overflow-wrap: break-word; }
:where(.wp-site-blocks, .editor-styles-wrapper) *,
:where(.wp-site-blocks, .editor-styles-wrapper) *::before,
:where(.wp-site-blocks, .editor-styles-wrapper) *::after { box-sizing: border-box; }
:where(.wp-site-blocks, .editor-styles-wrapper) img { max-width: 100%; height: auto; }
:where(.wp-site-blocks, .editor-styles-wrapper) a { text-underline-offset: .22em; text-decoration-thickness: 1px; }
:where(.wp-site-blocks, .editor-styles-wrapper) :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--whwn-blue);
  outline-offset: 5px;
}
:where(.wp-site-blocks, .editor-styles-wrapper) .whwn-accent { color: var(--whwn-blue); }
:where(.wp-site-blocks, .editor-styles-wrapper) .whwn-soft { color: #69735d; }
:where(.wp-site-blocks, .editor-styles-wrapper) .wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; }
:where(.wp-site-blocks, .editor-styles-wrapper) .wp-block-button__link:hover { filter: brightness(.92); }
:where(.whwn-home-content) :is(h1, h2, h3, p, figure) { margin-block: 0; }
:where(.whwn-home-content) .wp-block-columns { margin-block: 0; }
:where(.whwn-home-content) .wp-block-column { min-width: 0; }
:where(.whwn-home-content) .wp-block-column > * + * { margin-block-start: 1rem; }
:where(.whwn-home-content) .wp-block-group > * + * { margin-block-start: 1rem; }
:where(.whwn-home-content) > * + * { margin-block-start: 0; }
:where(.whwn-home-main, .whwn-home-content) { margin-block-start: 0; }
:where(.whwn-home-main) > .wp-block-post-content { margin-block: 0; }
:where(.whwn-home-content) .whwn-eyebrow { font-size: .6875rem; font-weight: 650; letter-spacing: .14em; line-height: 1.6; }

/* Header en mobiel menu zijn core/navigation; geen eigen JavaScript. */
:where(.whwn-header-shell) { margin-block-start: 0; }
:where(.whwn-site-header) { min-height: 114px; gap: 2rem; padding-block: .75rem; border-bottom: 1px solid var(--whwn-line); }
:where(.whwn-site-header) > * { margin: 0; }
:where(.whwn-brand) { gap: clamp(10px, 1.2vw, 16px); flex-shrink: 0; align-items: center; }
:where(.whwn-brand) p { margin: 0; }
:where(.whwn-brand) a { color: var(--whwn-ink); text-decoration: none; display: inline-block; }
:where(.whwn-brand-name) { font-size: 19px; font-weight: 750; line-height: 1.06; letter-spacing: -.04em; white-space: nowrap; }
:where(.whwn-navigation) { margin-left: auto; gap: 1.25rem; }
:where(.whwn-navigation) .wp-block-navigation__container { gap: clamp(.75rem, 1.7vw, 1.5rem); }
:where(.whwn-navigation) .wp-block-navigation-item__content { color: var(--whwn-ink); text-decoration: none; padding-block: .4rem; }
:where(.whwn-navigation) .wp-block-navigation-item__content:hover { color: var(--whwn-blue); text-decoration: underline; }
:where(.whwn-navigation) .wp-block-navigation__submenu-container { border: 1px solid var(--whwn-line); background: var(--whwn-paper); min-width: 240px; padding-block: .5rem; }
:where(.whwn-nav-contact) > .wp-block-navigation-item__content { border: 1px solid var(--whwn-ink); border-radius: 3px; padding: .65rem 1rem; }
:where(.whwn-navigation) .wp-block-navigation__responsive-container-open,
:where(.whwn-navigation) .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
:where(.whwn-navigation) .wp-block-navigation__responsive-container.is-menu-open { background: var(--whwn-paper); color: var(--whwn-ink); padding: 1.5rem; }
:where(.whwn-navigation) .is-menu-open .wp-block-navigation-item__content { min-height: 44px; padding-block: .5rem; }
:where(.whwn-navigation) .is-menu-open .wp-block-navigation__submenu-container { border: 0; padding-block: .5rem; font-size: .875rem; }
/* Core bedient het overlaymenu; ruimere breakpoint voorkomt een krappe header. */
@media (min-width: 600px) and (max-width: 1040px) {
  .whwn-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  .whwn-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
}

/* Hero, rustige foto en typografische statementstrip. */
:where(.whwn-hero) { padding-block: 3rem 4rem; }
:where(.whwn-hero) .whwn-hero-topline { gap: 1rem; margin: 0; }
:where(.whwn-hero-topline) p { margin: 0; }
:where(.whwn-hero-topline) .whwn-eyebrow { color: var(--whwn-blue); }
:where(.whwn-hero-side-note) { font-size: .75rem; color: var(--whwn-muted); line-height: 1.65; }
:where(.whwn-hero) .whwn-hero-title { font-size: clamp(2.5rem, 7.8vw, 7rem); line-height: 1.04; letter-spacing: -.065em; font-weight: 650; margin-block: 1.5rem 2.5rem; }
:where(.whwn-title-arrow) { display: inline-block; font-size: .66em; margin-left: .12em; vertical-align: .1em; font-weight: 400; }
:where(.whwn-hero) .whwn-hero-bottom { align-items: center; gap: clamp(2rem, 6vw, 5.625rem); }
:where(.whwn-hero-lead) { max-width: 440px; font-size: 1.125rem; line-height: 1.8; color: #555950; }
:where(.whwn-hero-bottom) .whwn-hero-actions { margin-top: 1.75rem; gap: 1rem; }
:where(.whwn-text-button) .wp-block-button__link { background: transparent; color: var(--whwn-ink); border-radius: 0; padding-inline: 0; text-decoration: underline; }
:where(.whwn-hero-bottom) .whwn-hero-small { font-size: .75rem; color: var(--whwn-muted); margin-top: 1.25rem; }
:where(.whwn-hero-image) img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 2px; }
:where(.whwn-hero-image) figcaption { margin-block: .625rem 0; font-size: .6875rem; line-height: 1.65; color: var(--whwn-muted); }
:where(.whwn-statement) { background: var(--whwn-sage); border-block: 1px solid #dde0d4; }
:where(.whwn-statement) .whwn-statement-inner { padding-block: 1.625rem; gap: 2rem; }
:where(.whwn-statement-inner) > * { margin: 0; }
:where(.whwn-statement-title) { font-size: 1.125rem; line-height: 1.5; letter-spacing: -.025em; }
:where(.whwn-statement-copy) { font-size: .8125rem; color: var(--whwn-muted); margin-left: auto; }
:where(.whwn-statement-arrow) { font-size: 2.5rem; line-height: 1; padding-left: 2rem; }

/* Diensten blijven open leesbaar, met echte links in plaats van fake accordions. */
:where(.whwn-services, .whwn-about) { padding-block: clamp(3rem, 6.5vw, 5.5rem); }
:where(.whwn-home-content) .whwn-section-heading { gap: 3rem; margin-bottom: 2.5rem; }
:where(.whwn-section-heading) > .wp-block-column:first-child { flex-basis: 28%; flex-grow: 0; padding-top: .625rem; }
:where(.whwn-section-heading) > .wp-block-column:last-child { flex-basis: 72%; }
:where(.whwn-section-heading) .whwn-eyebrow { color: var(--whwn-muted); }
:where(.whwn-section-heading) .whwn-section-intro { font-size: .875rem; color: var(--whwn-muted); line-height: 1.85; margin-top: 1.125rem; }
:where(.whwn-home-content) .whwn-service-list { margin-top: 0; }
:where(.whwn-service-list) .whwn-service-row { border-top: 1px solid #d7dbce; padding-block: 1.875rem; margin-top: 0; }
:where(.whwn-service-row) .whwn-service-columns { gap: 4rem; }
:where(.whwn-service-columns) > .wp-block-column:first-child { flex-basis: 43%; }
:where(.whwn-service-columns) > .wp-block-column:last-child { flex-basis: 57%; }
:where(.whwn-service-label) { color: var(--whwn-muted); font-size: .6875rem; letter-spacing: .1em; line-height: 1.7; }
:where(.whwn-service-columns) h3 { margin-top: .875rem; font-weight: 550; letter-spacing: -.045em; }
:where(.whwn-service-columns) > .wp-block-column:last-child > p { font-size: .875rem; color: var(--whwn-muted); line-height: 1.9; }
:where(.whwn-service-links) { display: flex; flex-wrap: wrap; gap: .5rem; }
:where(.whwn-service-links) a { display: inline-block; border: 1px solid #cdd2c2; border-radius: 2px; padding: .35rem .6rem; color: #4b5640; font-size: .75rem; line-height: 1.6; text-decoration: none; }
:where(.whwn-service-links) a:hover { background: var(--whwn-sage); color: var(--whwn-blue); }
:where(.whwn-services-more) { border-top: 1px solid #d7dbce; padding-top: 1.5rem; font-size: .8125rem; }

/* Werkwijze, over ons en kobaltblauw contactvlak. */
:where(.whwn-process) { background: #23271f; color: var(--whwn-paper); padding-block: clamp(3rem, 6.5vw, 5.5rem); }
:where(.whwn-process) :is(.whwn-eyebrow, .whwn-section-intro) { color: #b7bfab; }
:where(.whwn-process) .whwn-soft { color: #c3d2b2; }
:where(.whwn-process) .whwn-process-grid { gap: 2.875rem; margin-top: 3rem; }
:where(.whwn-process-step) { border-top: 1px solid #4e5644; padding-top: 1rem; }
:where(.whwn-process-number) { font-size: .75rem; color: #b7bfab; }
:where(.whwn-step-arrow) { float: right; color: #c3d2b2; }
:where(.whwn-process-step) h3 { font-size: 1.375rem; font-weight: 500; letter-spacing: -.025em; margin-top: 1.5rem; }
:where(.whwn-process-step) > p:last-child { color: #b7bfab; font-size: .8125rem; line-height: 1.9; }
:where(.whwn-about) .whwn-about-columns { gap: 4rem; }
:where(.whwn-about-columns) > .wp-block-column:first-child { flex-basis: 38%; }
:where(.whwn-about-columns) > .wp-block-column:last-child { flex-basis: 62%; }
:where(.whwn-about-columns) .whwn-eyebrow { color: var(--whwn-muted); }
:where(.whwn-about-note) { color: var(--whwn-muted); font-size: .8125rem; }
:where(.whwn-about-copy) > p { font-size: .9375rem; line-height: 1.9; color: var(--whwn-muted); max-width: 535px; }
:where(.whwn-about-copy) > h2 + p { margin-top: 1.5rem; }
:where(.whwn-about-copy) .whwn-about-values { border-top: 1px solid #d9ddcf; margin-top: 1.5rem; padding-top: 1rem; font-size: .8125rem; color: #4f5942; }
:where(.whwn-contact) { background: var(--whwn-blue); color: #fff; padding-block: 3.5rem 3rem; }
:where(.whwn-contact-top) > * { margin: 0; }
:where(.whwn-contact) .whwn-eyebrow { color: #d4ddff; }
:where(.whwn-contact-arrow) { font-size: 4rem; line-height: 1; }
:where(.whwn-contact-inner) .whwn-contact-title { margin-top: .5rem; font-size: clamp(2.75rem, 5.5vw, 4.5625rem); font-weight: 450; line-height: 1.06; letter-spacing: -.05em; }
:where(.whwn-contact-title) em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
:where(.whwn-contact-inner) .whwn-contact-bottom { margin-top: 2rem; gap: 1.5rem; align-items: center; }
:where(.whwn-contact-bottom) > p { margin: 0; color: #e0e6ff; font-size: .875rem; line-height: 1.8; }
:where(.whwn-light-button) .wp-block-button__link { background: var(--whwn-paper); color: var(--whwn-blue); min-width: 225px; }
:where(.whwn-contact) :is(a, button):focus-visible { outline-color: #fff; }
:where(.whwn-contact-inner) .whwn-contact-note { font-size: .75rem; color: #e0e6ff; line-height: 1.8; margin-top: 1.5rem; max-width: 740px; }
.whwn-contact .whwn-contact-note a { color: #fff; }
:where(.whwn-contact-page-link) { font-size: .8125rem; }
:where(.whwn-contact-page-link) a { color: #fff; }

/* Algemene templates blijven bruikbaar voor toekomstige landingspagina's. */
:where(.whwn-page-main) { padding-block: clamp(2.5rem, 5vw, 4.5rem); min-height: 55vh; }
:where(.whwn-page-main) > .whwn-page-heading { margin-bottom: 2.5rem; }
:where(.whwn-page-heading) .whwn-section-intro { color: var(--whwn-muted); }
:where(.whwn-post-meta) { gap: 1rem; }
:where(.whwn-post-query) .wp-block-post-template { gap: 3rem; }
:where(.whwn-post-card) { border-top: 1px solid var(--whwn-line); padding-block: 1.5rem; }
:where(.whwn-post-card) .wp-block-post-title a { color: var(--whwn-ink); text-decoration: none; }
:where(.whwn-post-card) .wp-block-post-title a:hover { color: var(--whwn-blue); }
:where(.whwn-post-navigation) { border-top: 1px solid var(--whwn-line); padding-top: 1.5rem; margin-top: 3rem; }
:where(.whwn-not-found) { padding-block: 2rem 4rem; }

/* Sobere footer, alle links verwijzen naar bestaande paginapaden. */
:where(.whwn-footer-shell) { margin-block-start: 0; }
:where(.whwn-site-footer) { padding-block: 2.5rem 1.5rem; }
:where(.whwn-footer-top) { gap: 1rem; }
:where(.whwn-footer-top) p { margin: 0; }
:where(.whwn-footer-brand) { font-size: 1.25rem; font-weight: 650; letter-spacing: -.04em; }
:where(.whwn-footer-brand) a { color: var(--whwn-ink); text-decoration: none; }
:where(.whwn-footer-description, .whwn-footer-email) { font-size: .8125rem; color: var(--whwn-muted); }
:where(.whwn-footer-email) a { color: #4e5944; }
:where(.whwn-site-footer) .whwn-footer-nav { margin-top: 1.5rem; font-size: .8125rem; }
:where(.whwn-footer-nav) .wp-block-navigation__container { gap: 1.25rem; }
:where(.whwn-footer-nav) a { color: var(--whwn-muted); }
:where(.whwn-site-footer) .whwn-footer-bottom { border-top: 1px solid #d9ddcf; padding-top: 1rem; margin-top: 1.5rem; gap: 1rem; }
:where(.whwn-footer-bottom) p { margin: 0; font-size: .75rem; color: var(--whwn-muted); }
:where(.whwn-footer-bottom) a { color: #4e5944; }

@media (max-width: 1100px) {
  :where(.whwn-site-header) { gap: 1.25rem; }
  :where(.whwn-service-row) .whwn-service-columns { gap: 2rem; }
  :where(.whwn-hero-lead) { font-size: 1rem; }
}
@media (max-width: 781px) {
  :where(.whwn-site-header) { min-height: 94px; }
  :where(.whwn-home-content) .wp-block-columns { gap: 1.5rem; }
  :where(.whwn-home-content) .whwn-section-heading { margin-bottom: 2rem; }
  :where(.whwn-section-heading) > .wp-block-column:first-child { padding-top: 0; }
  :where(.whwn-section-heading) .whwn-eyebrow { margin-bottom: .25rem; }
  :where(.whwn-hero) .whwn-hero-bottom { gap: 2rem; }
  :where(.whwn-hero-lead) { max-width: 600px; }
  :where(.whwn-process) .whwn-process-grid { gap: 1.75rem; }
  :where(.whwn-process-step) h3 { margin-top: 1rem; }
  :where(.whwn-about-note) { display: none; }
  :where(.whwn-statement-copy) { margin-left: 0; }
  :where(.whwn-contact-inner) .whwn-contact-bottom { align-items: flex-start; }
  :where(.whwn-post-query) .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  :where(.whwn-site-header) { min-height: 83px; padding-block: 1rem; }
  :where(.whwn-brand-name) { font-size: 18px; }
  :where(.whwn-hero) { padding-block: 2rem 2.25rem; }
  :where(.whwn-hero-side-note, .whwn-title-arrow) { display: none; }
  :where(.whwn-hero) .whwn-hero-title { font-size: clamp(2rem, 9.6vw, 3.75rem); line-height: 1.1; margin-block: 1.5rem; }
  :where(.whwn-hero-lead) { font-size: .9375rem; }
  :where(.whwn-hero-actions) { gap: .75rem; }
  :where(.whwn-statement) .whwn-statement-inner { gap: 1rem; }
  :where(.whwn-statement-copy) { display: none; }
  :where(.whwn-statement-arrow) { padding-left: 0; font-size: 2rem; }
  :where(.whwn-service-row) .whwn-service-columns { gap: 1rem; }
  :where(.whwn-service-links) a { padding-block: .45rem; }
  :where(.whwn-contact) { padding-block: 2.25rem; }
  :where(.whwn-contact-arrow) { font-size: 2.5rem; }
  :where(.whwn-contact-inner) .whwn-contact-title { font-size: clamp(2rem, 10vw, 2.8125rem); }
  :where(.whwn-contact-bottom) { flex-direction: column; }
  :where(.whwn-footer-top) { flex-direction: column; align-items: flex-start; }
  :where(.whwn-site-footer) { padding-block: 2rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :where(.wp-site-blocks, .editor-styles-wrapper) *,
  :where(.wp-site-blocks, .editor-styles-wrapper) *::before,
  :where(.wp-site-blocks, .editor-styles-wrapper) *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  :where(.whwn-service-links) a,
  :where(.wp-block-button) .wp-block-button__link { border: 1px solid ButtonText; }
}

/* Eigen ronde logo: vaste vierkante verhouding, zonder vervorming. */
.whwn-brand .whwn-brand-logo { width: clamp(84px, 7vw, 96px); margin: 0; flex-shrink: 0; }
.whwn-brand-logo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 50%; }
.whwn-navigation { font-size: clamp(1rem, 1.25vw, 1.125rem); }
.whwn-navigation .wp-block-navigation__submenu-container { font-size: 1rem; }
.whwn-navigation .is-menu-open .wp-block-navigation-item__content { font-size: 1.125rem; }
.whwn-about-logo { width: 240px; margin-top: 2rem; }
.whwn-about-logo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 50%; }
@media (max-width: 781px) {
  .whwn-brand .whwn-brand-logo { width: clamp(76px, 10vw, 84px); }
  .whwn-about-logo { display: none; }
}
@media (max-width: 600px) {
  .whwn-site-header { min-height: 88px; padding-block: 8px; gap: 16px; }
  .whwn-brand .whwn-brand-logo { width: clamp(64px, 17vw, 76px); }
}
@media (max-width: 360px) {
  .whwn-brand-name { font-size: 16px; }
  .whwn-brand { gap: 8px; }
}