/* deWaterfilter host adapter; shared controls come unchanged from UI Foundation. */
.wwy-vh {
  --wwy-host-text: #333333;
  --wwy-host-muted: #52616d;
  --wwy-host-surface: #ffffff;
  --wwy-host-surface-soft: #f4f7f9;
  --wwy-host-border: #849399;
  --wwy-host-accent: #155474;
  --wwy-host-accent-foreground: #ffffff;
  --wwy-host-focus: #155474;
  --wwy-host-link: #155474;
  max-width: var(--wwy-form-reading-max);
}
.vh-preview { max-width: 48rem; margin: 2rem auto; padding: 0 1rem; font: 1rem/1.55 system-ui,sans-serif; }
/* Local form card: keep fields white and leave focus outlines unclipped. */
.wwy-vh.wwy-form-root {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: clamp(4rem, 8vw, 6rem);
  --wwy-form-field-gap: clamp(1.5rem, 3vw, 2rem);
  --wwy-form-grid-gap: clamp(1.25rem, 3vw, 2rem);
}
.wwy-vh > .vh-form-card {
  box-sizing: border-box;
  width: 100%;
  padding: clamp(1.25rem, 4vw, 3rem);
  border: 1px solid #dbe6eb;
  border-radius: 1rem;
  background: #f4f8fa;
}
.wwy-vh [hidden] { display: none !important; }
.wwy-vh .vh-fields { margin: 0; padding: 0; border: 0; min-width: 0; }
.wwy-vh label.wwy-form-field { display: block; font-size: var(--wwy-ui-font-size-label); font-weight: 600; }
.wwy-vh label select,.wwy-vh label input,.wwy-vh label textarea { display: block; margin-top: .5rem; font-weight: 400; }
.wwy-vh label .wwy-form-help { display: block; margin-top: .5rem; font-weight: 400; }
.wwy-vh.wwy-form-root p { font-size: var(--wwy-ui-font-size-base); line-height: 1.55; }
.wwy-vh.wwy-form-root textarea { height: auto; }
.wwy-vh.wwy-form-root select { appearance: auto; }
.wwy-vh input[type=file] { max-width: 100%; min-height: var(--wwy-form-control-height); font: inherit; white-space: normal; }
.wwy-vh input[type=file]::file-selector-button { min-height: var(--wwy-form-control-height); border: 1px solid var(--wwy-form-border); border-radius: var(--wwy-form-radius-sm); padding-inline: var(--wwy-form-control-padding-x); background: var(--wwy-form-surface); color: var(--wwy-form-text); font: inherit; cursor: pointer; }
.wwy-vh h2.wwy-form-title { color: var(--wwy-form-text); font-size: var(--wwy-ui-font-size-h3); font-weight: 600; line-height: 1.35; letter-spacing: normal; margin: 0 0 1rem; padding: 0; }
.wwy-vh .vh-actions { margin-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--wwy-form-border) 50%, white); }
.wwy-vh .vh-choice { border-bottom: 1px solid color-mix(in srgb, var(--wwy-form-border) 50%, white); }
.wwy-vh .vh-choice > button { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: var(--wwy-form-control-height); margin: 0; padding: .75rem 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--wwy-form-text); font: inherit; font-weight: 600; text-align: left; text-transform: none; cursor: pointer; }
.wwy-vh .vh-choice > button:hover,.wwy-vh .vh-choice > button[aria-expanded=true] { color: var(--wwy-form-link); background: transparent; }
.wwy-vh .vh-action-icon { width: 1em; flex: none; margin-inline-end: .25rem; text-align: center; font-weight: 400; }
.wwy-vh .vh-action-icon::before { content: '+'; }
.wwy-vh [aria-expanded=true] .vh-action-icon::before { content: '−'; }
.wwy-vh .vh-panel { padding-block: var(--wwy-form-grid-gap) var(--wwy-form-field-gap); }
.wwy-vh .vh-stories { margin-top: var(--wwy-form-section-gap); }
.wwy-vh .vh-stories > p { margin: 0; color: var(--wwy-form-muted); }
.wwy-vh .vh-stories article { margin-block: var(--wwy-form-section-gap); }
.wwy-vh .vh-stories article h3 { font-size: var(--wwy-ui-font-size-h3); color: var(--wwy-form-text); }
.wwy-vh .vh-stories article h4 { font-size: var(--wwy-ui-font-size-base); color: var(--wwy-form-text); }
.wwy-vh .vh-stories img,.wwy-vh .vh-stories video { max-width: 100%; height: auto; }
.wwy-vh .vh-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wwy-vh button:disabled { opacity: .6; cursor: wait; }
.wwy-vh :is(button,a,input[type=file]):focus-visible { outline: 3px solid var(--wwy-form-focus-color); outline-offset: 3px; }
.wwy-vh [role=status]:empty { display: none; }
.wwy-vh [role=status]:not(:empty) { padding: 1rem; background: var(--wwy-form-surface-soft); border-left: 3px solid var(--wwy-form-accent); }
.wwy-vh a,.vh-related a { color: var(--wwy-host-link, #155474); text-decoration: underline; text-underline-offset: .15em; }
.entry-content .vh-related { margin-top: 1.5rem; max-width: 72ch; font-size: 1rem; line-height: 1.6; }
.entry-content .vh-related a { color: #155474; }
.vh-related span { margin-inline: .5rem; }
.vh-site-module :is(#vraag-stellen,#vh-inzenden,#ervaringen-lezen,#beeld-toevoegen) { scroll-margin-top: 6rem; }
.vh-page-intro { max-width: 700px; font-size: 18px; line-height: 1.7; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.vh-page-intro > p,.wwy-vh.wwy-form-root > .vh-page-intro > p { font-size: 18px; line-height: 1.7; margin: 0 0 1em; padding: 0; }
.vh-page-intro > p:last-child { margin-bottom: 0; }
.vh-page-intro [data-vh-open-question] { color: #155474; text-decoration: underline; text-underline-offset: .18em; }
.vh-page-intro [data-vh-open-question]:hover { text-decoration-thickness: 2px; }
.vh-page-intro [data-vh-open-question]:focus-visible { outline: 2px solid #155474; outline-offset: 4px; border-radius: 2px; }
.vh-page-intro > .vh-intro-title,.wwy-vh.wwy-form-root > .vh-page-intro > .vh-intro-title { font-size: 26px; font-weight: 600; line-height: 1.3; color: #155474; margin: 0 0 1rem; padding: 0; }
.wwy-vh.wwy-form-root .vh-brand-help { margin: .75rem 0 1.75rem; color: var(--wwy-form-muted); }
/* Local improvements: do not change the shared WWWyou foundation. */
.wwy-vh .vh-actions { border: 0; display: grid; gap: .75rem; }
.wwy-vh .vh-choice { border: 0; }
.wwy-vh .vh-choice > button { padding: 1rem 1.25rem; min-height: 3.5rem; border: 1px solid #82b9d2; border-radius: .5rem; background: #eef8fd; color: #155474; font-size: 1.125rem; font-weight: 700; transition: background-color .15s, border-color .15s, color .15s; }
.wwy-vh .vh-choice > button:hover,.wwy-vh .vh-choice > button:focus-visible { background: #dceffa; border-color: #155474; color: #103d54; }
.wwy-vh .vh-choice > button[aria-expanded=true] { background: #155474; color: #fff; border-color: #155474; }
.wwy-vh .vh-action-icon { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-inline-end: 0; font-size: 1.5rem; font-weight: 600; }
.wwy-vh [data-vh-title] { font-size: 1.4rem; color: #155474; margin: .25rem 0 1.25rem; outline-offset: .3rem; }
.wwy-vh .vh-panel { padding: clamp(1.5rem, 3vw, 2rem) .25rem; }
.wwy-vh.wwy-form-root select { appearance: none; -webkit-appearance: none; padding-inline-end: 3.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='m5 7 5 5 5-5' fill='none' stroke='%23155474' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.25rem; }
.wwy-vh .vh-rich-field > label { display: block; font-size: var(--wwy-ui-font-size-label); font-weight: 600; margin-bottom: .5rem; }
.wwy-vh .vh-rich-field textarea { min-height: 14rem; width: 100%; resize: vertical; font: inherit; }
.wwy-vh .vh-rich-field .wwy-form-help { display: block; margin-top: .5rem; font-weight: 400; }
.wwy-vh .wp-editor-wrap { width: 100%; }
.wwy-vh .mce-tinymce { box-sizing: border-box; border: 1px solid #849399; border-radius: .4rem; overflow: hidden; }
.wwy-vh .mce-toolbar .mce-btn button { min-height: 2.75rem; padding: .35rem .6rem; }
.wwy-vh .mce-container button { text-transform: none; letter-spacing: normal; box-shadow: none; }
.wwy-vh .wwy-form-button:hover { background: #103d54; }
@media (prefers-reduced-motion: reduce) { .wwy-vh .vh-choice > button { transition: none; } }
@media (forced-colors: active) { .wwy-vh.wwy-form-root select { appearance: auto; background-image: none; } }

.wwy-vh .vh-file-label { display: block; font-weight: 600; }
.wwy-vh .vh-file-choice { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.wwy-vh [data-vh-file-button] { min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid #155474; border-radius: .4rem; background: #eef8fd; color: #155474; font: inherit; font-weight: 600; text-transform: none; letter-spacing: normal; cursor: pointer; }
.wwy-vh [data-vh-file-button]:hover { background: #dceffa; }
.wwy-vh [data-vh-file-name] { overflow-wrap: anywhere; min-width: 0; }
.wwy-vh .vh-file-field > .wwy-form-help { display: block; margin-top: .5rem; }

/* Compact brand choice and progressive contribution controls. */
.wwy-vh .vh-brands { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.wwy-vh .vh-brands button { flex: 1 1 10rem; min-height: 3.5rem; padding: .85rem 1.25rem; border: 1px solid #82b9d2; border-radius: .5rem; background: #eef8fd; color: #155474; font: inherit; font-weight: 700; cursor: pointer; }
.wwy-vh .vh-brands button:hover { background: #dceffa; border-color: #155474; }
.wwy-vh .vh-brands button[aria-pressed=true] { background: #155474; color: white; border-color: #155474; }
.wwy-vh [data-vh-file-remove] { display: inline-block; min-height: 2.75rem; margin: .25rem 0 1rem; padding: .4rem .2rem; border: 0; background: transparent; color: #155474; font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.wwy-vh [data-vh-file-remove]:hover { color: #103d54; text-decoration-thickness: 2px; }
.wwy-vh details { margin-bottom: 1rem; }
.wwy-vh summary { cursor: pointer; color: #155474; padding-block: .75rem; }
.wwy-vh details label { margin-top: .75rem; }

/* Experience is primary; the question remains a smaller secondary action. */
.wwy-vh .vh-choice > button[data-vh-kind="ervaring"] { font-size: 1.35rem; }
.wwy-vh .vh-choice > button[data-vh-kind="vraag"] { min-height: 2.75rem; padding: .7rem .25rem; border: 0; background: transparent; color: #155474; font-size: 1rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.wwy-vh .vh-choice > button[data-vh-kind="vraag"]:hover,.wwy-vh .vh-choice > button[data-vh-kind="vraag"][aria-expanded="true"] { background: #f4f7f9; color: #103d54; }
.wwy-vh [data-vh-question-help] { margin: 1rem 0 0; }

/* Footer spacing is outside the form card; controls remain inside it. */
.wwy-vh .wwy-form-button { margin-top: 1rem; white-space: normal; max-width: 100%; }

/* Multiple private assets: bounded previews and one explicit final submit. */
.wwy-vh .vh-file-list {list-style:none;padding:0;margin:1rem 0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));}
.wwy-vh .vh-file-list li {border:1px solid #b8c6cd;border-radius:8px;padding:1rem;display:flex;flex-direction:column;gap:.75rem;min-width:0;background:#fff;}
.wwy-vh .vh-file-list img,.wwy-vh .vh-file-list video {width:100%;height:160px;object-fit:contain;background:#f3f7f9;border-radius:4px;}
.wwy-vh .vh-file-list span {overflow-wrap:anywhere;font-size:1rem;}
.wwy-vh .vh-file-list button {align-self:flex-start;min-height:44px;}

/* Switching routes is a secondary action outside the active contribution. */
.wwy-vh .vh-choice > button[data-vh-switch="true"] { min-height: 2.75rem; padding: .7rem .25rem; border: 0; border-radius: 0; background: transparent; color: #155474; font-size: 1rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.wwy-vh .vh-choice > button[data-vh-switch="true"] .vh-action-icon { display: none; }
.wwy-vh .vh-choice > button[data-vh-switch="true"]:hover { background: transparent; color: #103d54; text-decoration-thickness: 2px; }