/*
 * Mierlo voor Mierlo — canonical Light / Dark theme contract
 * One visual source of truth for the MvM theme switcher.
 * Brand blue stays #1966AE; semantic surfaces and text change per mode.
 */

:root,
html[data-mvm-theme="light"],
body[data-mvm-theme="light"],
body.light:not(.mvm-header-dark) {
    color-scheme: light;
    --mvm-blue: #1966AE;
    --mvm-blue-hover: #155A94;
    --mvm-blue-deep: #0F4F88;
    --mvm-blue-700: #114F8B;
    --mvm-blue-050: #EEF6FC;
    --mvm-blue-soft: #EEF5FB;
    --mvm-blue-pale: #F5F9FD;
    --mvm-theme-page: #F4F7FA;
    --mvm-theme-surface: #FFFFFF;
    --mvm-theme-surface-soft: #F5F8FB;
    --mvm-theme-surface-raised: #FFFFFF;
    --mvm-theme-text: #1C2B3A;
    --mvm-theme-heading: #142132;
    --mvm-theme-muted: #465767;
    --mvm-theme-border: #D8E3EC;
    --mvm-theme-border-strong: #BFCFDC;
    --mvm-bg: var(--mvm-theme-page);
    --mvm-page: var(--mvm-theme-page);
    --mvm-surface: var(--mvm-theme-surface);
    --mvm-surface-soft: var(--mvm-theme-surface-soft);
    --mvm-surface-raised: var(--mvm-theme-surface-raised);
    --mvm-ink: var(--mvm-theme-text);
    --mvm-text: var(--mvm-theme-text);
    --mvm-heading: var(--mvm-theme-heading);
    --mvm-muted: var(--mvm-theme-muted);
    --mvm-border: var(--mvm-theme-border);
    --mvm-border-strong: var(--mvm-theme-border-strong);
    --mvm-input: #FFFFFF;
    --mvm-link: #1966AE;
    --mvm-link-hover: #0F4F88;
    --mvm-accent-text: #1966AE;
    --mvm-focus: #0F6CBD;
    --mvm-focus-ring: rgba(15, 108, 189, .28);
    --mvm-shadow: 0 8px 26px rgba(18, 45, 68, .10);
    --mvm-shadow-soft: 0 8px 26px rgba(23, 33, 43, .07);
}

html[data-mvm-theme="dark"],
body[data-mvm-theme="dark"],
body.mvm-header-dark,
body.dark {
    color-scheme: dark;
    --mvm-blue: #1966AE;
    --mvm-blue-hover: #2E7FC6;
    --mvm-blue-deep: #0F4F88;
    --mvm-blue-700: #76B8F0;
    --mvm-blue-050: #17334A;
    --mvm-blue-soft: #182B3B;
    --mvm-blue-pale: #142635;
    --mvm-theme-page: #0B121A;
    --mvm-theme-surface: #121D27;
    --mvm-theme-surface-soft: #182530;
    --mvm-theme-surface-raised: #1E2D39;
    --mvm-theme-text: #E8F0F6;
    --mvm-theme-heading: #F8FBFE;
    --mvm-theme-muted: #A7B7C5;
    --mvm-theme-border: #2B3C4B;
    --mvm-theme-border-strong: #3B5062;
    --mvm-bg: var(--mvm-theme-page);
    --mvm-page: var(--mvm-theme-page);
    --mvm-surface: var(--mvm-theme-surface);
    --mvm-surface-soft: var(--mvm-theme-surface-soft);
    --mvm-surface-raised: var(--mvm-theme-surface-raised);
    --mvm-ink: var(--mvm-theme-text);
    --mvm-text: var(--mvm-theme-text);
    --mvm-heading: var(--mvm-theme-heading);
    --mvm-muted: var(--mvm-theme-muted);
    --mvm-border: var(--mvm-theme-border);
    --mvm-border-strong: var(--mvm-theme-border-strong);
    --mvm-input: #182530;
    --mvm-link: #76B8F0;
    --mvm-link-hover: #B9DDFB;
    --mvm-accent-text: #76B8F0;
    --mvm-focus: #7CC3FF;
    --mvm-focus-ring: rgba(124, 195, 255, .35);
    --mvm-shadow: 0 10px 30px rgba(0, 0, 0, .30);
    --mvm-shadow-soft: 0 8px 26px rgba(0, 0, 0, .24);
}

/* Page and standard MvM surfaces. */
html[data-mvm-theme] body,
body[data-mvm-theme] {
    background: var(--mvm-page) !important;
    color: var(--mvm-text) !important;
}

html[data-mvm-theme] body #page,
html[data-mvm-theme] body #content,
html[data-mvm-theme] body .wrapper,
html[data-mvm-theme] body .grey-bg,
html[data-mvm-theme] body .mg-content,
html[data-mvm-theme] body .mvm-theme1-lab,
html[data-mvm-theme] body .mvm-page {
    background-color: var(--mvm-page) !important;
    color: var(--mvm-text) !important;
}

html[data-mvm-theme] body .mvm-theme1-card,
html[data-mvm-theme] body .mvm-page-card,
html[data-mvm-theme] body .mvm-list-card,
html[data-mvm-theme] body .mvm-e2-event-article,
html[data-mvm-theme] body .mvm-theme1-together-card,
html[data-mvm-theme] body .mvm-panel,
html[data-mvm-theme] body .mvm-card {
    background-color: var(--mvm-surface) !important;
    border-color: var(--mvm-border) !important;
    color: var(--mvm-text) !important;
}

html[data-mvm-theme] body h1,
html[data-mvm-theme] body h2,
html[data-mvm-theme] body h3,
html[data-mvm-theme] body h4,
html[data-mvm-theme] body h5,
html[data-mvm-theme] body h6 {
    color: var(--mvm-heading);
}

html[data-mvm-theme] body .mvm-theme1-section-head p,
html[data-mvm-theme] body .mvm-list-card-meta,
html[data-mvm-theme] body .mvm-card-meta,
html[data-mvm-theme] body .mvm-muted {
    color: var(--mvm-muted) !important;
}

html[data-mvm-theme] body :is(.mvm-theme1-eyebrow,.mvm-e2-kicker,.mvm-listing-kicker,.mvm-card-type,.mvm-read-more) {
    color: var(--mvm-accent-text) !important;
    -webkit-text-fill-color: var(--mvm-accent-text) !important;
}

html[data-mvm-theme] body a:not(.mvm-primary-nav a):not(.mvm-newsletter-header-cta):not(.mvm-theme1-button):not(.mvm-commerce-share__button):not(.newsup-categories) {
    text-decoration-thickness: .08em;
    text-underline-offset: .16em;
}

html[data-mvm-theme="dark"] body a:not(.mvm-primary-nav a):not(.mvm-newsletter-header-cta):not(.mvm-theme1-button):not(.mvm-commerce-share__button):not(.newsup-categories) {
    color: var(--mvm-link);
}

html[data-mvm-theme="dark"] body a:not(.mvm-primary-nav a):not(.mvm-newsletter-header-cta):not(.mvm-theme1-button):not(.mvm-commerce-share__button):not(.newsup-categories):hover,
html[data-mvm-theme="dark"] body a:not(.mvm-primary-nav a):not(.mvm-newsletter-header-cta):not(.mvm-theme1-button):not(.mvm-commerce-share__button):not(.newsup-categories):focus-visible {
    color: var(--mvm-link-hover);
}

/* Inputs and keyboard focus. */
html[data-mvm-theme] body input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-mvm-theme] body textarea,
html[data-mvm-theme] body select,
html[data-mvm-theme] body .form-control,
html[data-mvm-theme] body .select2-selection {
    background: var(--mvm-input) !important;
    border-color: var(--mvm-border-strong) !important;
    color: var(--mvm-text) !important;
    -webkit-text-fill-color: var(--mvm-text) !important;
}

html[data-mvm-theme] body input::placeholder,
html[data-mvm-theme] body textarea::placeholder {
    color: var(--mvm-muted) !important;
    opacity: 1;
}

html[data-mvm-theme] body :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--mvm-focus) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 2px var(--mvm-page), 0 0 0 5px var(--mvm-focus-ring) !important;
}

/* Header: blue main navigation remains brand-stable; utility row follows mode. */
html[data-mvm-theme] body #mvm-header-v1 .mvm-header-utility,
html[data-mvm-theme] body #mvm-header-v1 .mvm-header-search-panel,
html[data-mvm-theme] body #mvm-header-v1 .mvm-account-panel {
    background: var(--mvm-surface) !important;
    border-color: var(--mvm-border) !important;
    color: var(--mvm-text) !important;
}

html[data-mvm-theme] body #mvm-header-v1 .mvm-live-clock,
html[data-mvm-theme] body #mvm-header-v1 .mvm-live-clock-wrap,
html[data-mvm-theme] body #mvm-header-v1 .mvm-header-tool {
    color: var(--mvm-link) !important;
}

html[data-mvm-theme] body #mvm-header-v1 .mvm-header-tool:hover,
html[data-mvm-theme] body #mvm-header-v1 .mvm-header-tool:focus-visible,
html[data-mvm-theme] body #mvm-header-v1 .mvm-header-tool[aria-expanded="true"],
html[data-mvm-theme] body #mvm-header-v1 .mvm-header-tool[aria-pressed="true"] {
    background: var(--mvm-surface-soft) !important;
    color: var(--mvm-link-hover) !important;
}

/* Newsup compatibility surfaces still used while migration is in progress. */
html[data-mvm-theme] body .small-post,
html[data-mvm-theme] body .mg-posts-sec-post,
html[data-mvm-theme] body .mg-sidebar .mg-widget,
html[data-mvm-theme] body .mg-info-author-block,
html[data-mvm-theme] body .mg-comments .comment-list li,
html[data-mvm-theme] body .mg-no-list-area,
html[data-mvm-theme] body .mg-blog-post-box,
html[data-mvm-theme] body blockquote {
    background: var(--mvm-surface) !important;
    border-color: var(--mvm-border) !important;
    color: var(--mvm-text) !important;
}

html[data-mvm-theme] body .mg-blog-meta,
html[data-mvm-theme] body .mg-blog-meta a,
html[data-mvm-theme] body .mg-blog-meta i,
html[data-mvm-theme] body .mg-blog-date {
    color: var(--mvm-muted) !important;
    -webkit-text-fill-color: var(--mvm-muted) !important;
}

/* Text on photography/brand-blue overlays must stay white in both themes. */
html[data-mvm-theme] body :is(.mvm-gm-card--hero,.mvm-gm-card--feature-left,.mvm-gm-card--feature-right,.mg-blog-post .bottom,.mg-post-box) :is(h1,h2,h3,h4,a,.mg-blog-meta,.mg-blog-meta *) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* PeepSo. */
html[data-mvm-theme] body #peepso-wrap :is(.ps-page,.ps-post,.ps-widget,.ps-dialog,.ps-modal,.ps-popover,.ps-dropdown__menu,.ps-postbox,.ps-comment,.ps-comments,.ps-focus__footer,.ps-focus__info,.ps-focus__menu) {
    background-color: var(--mvm-surface) !important;
    border-color: var(--mvm-border) !important;
    color: var(--mvm-text) !important;
}

html[data-mvm-theme] body #peepso-wrap :is(p,label,.ps-post__body,.ps-comment__body,.ps-focus__name,.ps-focus__details) {
    color: var(--mvm-text) !important;
}

/* wpForo. */
html[data-mvm-theme] body #wpforo-wrap,
html[data-mvm-theme] body #wpforo-wrap :is(.wpforo-main,.wpforo-content,.wpforo-section,.forum-wrap,.wpforo-forum,.wpforo-forum-info,.wpforo-subtop,.wpf-breadcrumb,.wpf-acp,.wpf-acp-head,.wpf-acp-content,.wpf-acp-footer,.wpforo-footer,.wpforo-tools) {
    background-color: var(--mvm-surface) !important;
    border-color: var(--mvm-border) !important;
    color: var(--mvm-text) !important;
}

html[data-mvm-theme] body #wpforo-wrap :is(.wpforo-forum-title,.wpforo-forum-title a,#wpforo-title) {
    color: var(--mvm-heading) !important;
    -webkit-text-fill-color: var(--mvm-heading) !important;
}

html[data-mvm-theme] body #wpforo-wrap :is(.wpforo-forum-description,.wpforo-forum-description p,.wpforo-forum-info > div) {
    color: var(--mvm-muted) !important;
}

/* WP Event Manager and event integrations. */
html[data-mvm-theme] body :is(.mvm-e2-shell,.mvm-e2-event,.mvm-e2-portal) {
    --mvm-ink: var(--mvm-theme-text);
    --mvm-muted: var(--mvm-theme-muted);
    --mvm-line: var(--mvm-theme-border);
    --mvm-soft: var(--mvm-theme-surface-soft);
    --mvm-card: var(--mvm-theme-surface);
    color: var(--mvm-theme-text) !important;
}

html[data-mvm-theme] body :is(
    .mvm-e2-card,
    .mvm-e2-panel,
    .mvm-e2-list-item,
    .mvm-e2-login,
    .mvm-e2-fact,
    .mvm-e2-share,
    .mvm-e2-quicklink,
    .wpem-main,
    .wpem-form-wrapper,
    .wpem-event-listings,
    .wpem-event-layout-wrapper,
    .wpem-single-event-page,
    .single_event_listing,
    .wpem-event-box-col,
    .select2-dropdown,
    .select2-results,
    .select2-results__option
) {
    background-color: var(--mvm-surface) !important;
    border-color: var(--mvm-border) !important;
    color: var(--mvm-text) !important;
}

html[data-mvm-theme] body :is(.mvm-e2-card,.mvm-e2-panel,.mvm-e2-list-item,.mvm-e2-login,.mvm-e2-fact,.mvm-e2-share,.mvm-e2-quicklink) :is(h1,h2,h3,h4,h5,h6,strong,label) {
    color: var(--mvm-heading) !important;
    -webkit-text-fill-color: var(--mvm-heading) !important;
}

html[data-mvm-theme] body :is(.mvm-e2-card,.mvm-e2-panel,.mvm-e2-list-item,.mvm-e2-login,.mvm-e2-fact,.mvm-e2-share,.mvm-e2-quicklink) :is(p,small,.mvm-e2-meta,.mvm-e2-help,.mvm-e2-fact span) {
    color: var(--mvm-muted) !important;
    -webkit-text-fill-color: var(--mvm-muted) !important;
}

/* Encyclopedie / Hub semantic tokens. */
html[data-mvm-theme] body :is(.mvm-public-home,.mvm-themes-index,.mvm-theme-page,.mvm-hub,.mvm-hub-app,.mvm-app,.mvm-dossier-content,.mvm-encyclopedia,.mvm-encyclopedie) {
    --mvm-primary: var(--mvm-blue);
    --mvm-primary-dark: var(--mvm-blue-deep);
    --mvm-bg: var(--mvm-theme-page);
    --mvm-surface: var(--mvm-theme-surface);
    --mvm-text: var(--mvm-theme-text);
    --mvm-muted: var(--mvm-theme-muted);
    --mvm-border: var(--mvm-theme-border);
    color: var(--mvm-theme-text);
}

/* Elementor legacy pages and Contact Form 7. */
html[data-mvm-theme] body :is(.elementor,.e-con,.elementor-widget-text-editor,.mvm-contact-form,.wpcf7) {
    color: var(--mvm-text);
}

html[data-mvm-theme] body .mvm-contact-form .wpcf7 {
    background: var(--mvm-surface) !important;
    border-color: var(--mvm-border) !important;
}

/* Tables, legal pages and consent surfaces. */
html[data-mvm-theme] body main table,
html[data-mvm-theme] body .cmplz-document,
html[data-mvm-theme] body .cmplz-cookiebanner {
    background: var(--mvm-surface) !important;
    border-color: var(--mvm-border) !important;
    color: var(--mvm-text) !important;
}

html[data-mvm-theme] body main table th {
    background: var(--mvm-surface-soft) !important;
    color: var(--mvm-heading) !important;
}

html[data-mvm-theme] body main table th,
html[data-mvm-theme] body main table td {
    border-color: var(--mvm-border) !important;
}

/* Footer follows the selected theme. */
html[data-mvm-theme] body .mvm-theme1-footer,
html[data-mvm-theme] body .mg-footer-widget-area,
html[data-mvm-theme] body .mg-footer-bottom-area,
html[data-mvm-theme] body .mg-footer-copyright {
    background: var(--mvm-surface) !important;
    border-color: var(--mvm-border) !important;
    color: var(--mvm-text) !important;
}

/* Form legibility and anti-overlap contract.
 * Labels, helper copy, placeholders and entered values must stay readable in both modes.
 * The spacing rules deliberately avoid fixed text heights so translated/zoomed text can wrap. */
html[data-mvm-theme] body :is(
    .mvm-contact-form,
    .wpcf7,
    .ps-form,
    .wpem-form-wrapper,
    .mvm-e2-form,
    .mvm-header-search-form,
    .mvm-header-account-card
) :is(label,legend,.form-label,.ps-form__label,.wpem-form-group label,.wpem-form-group legend) {
    color: var(--mvm-heading) !important;
    -webkit-text-fill-color: var(--mvm-heading) !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

html[data-mvm-theme] body :is(
    .mvm-contact-form,
    .wpcf7,
    .ps-form,
    .wpem-form-wrapper,
    .mvm-e2-form,
    .mvm-header-search-form,
    .mvm-header-account-card
) :is(.description,.help-text,.form-text,.ps-form__field-notice,.wpem-form-group small,.mvm-e2-help,small) {
    color: var(--mvm-muted) !important;
    -webkit-text-fill-color: var(--mvm-muted) !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

html[data-mvm-theme] body :is(
    .mvm-contact-form,
    .wpcf7,
    .ps-form,
    .wpem-form-wrapper,
    .mvm-e2-form,
    .mvm-header-search-form,
    .mvm-header-account-card
) :is(input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),textarea,select,.form-control,.select2-selection) {
    box-sizing: border-box;
    max-width: 100%;
    min-height: 44px !important;
    height: auto;
    padding-top: .68rem;
    padding-bottom: .68rem;
    line-height: 1.45 !important;
    color: var(--mvm-text) !important;
    -webkit-text-fill-color: var(--mvm-text) !important;
}

html[data-mvm-theme] body :is(
    .mvm-contact-form,
    .wpcf7,
    .ps-form,
    .wpem-form-wrapper,
    .mvm-e2-form,
    .mvm-header-search-form,
    .mvm-header-account-card
) textarea {
    min-height: 128px !important;
    resize: vertical;
}

html[data-mvm-theme] body :is(
    .mvm-contact-form,
    .wpcf7,
    .ps-form,
    .wpem-form-wrapper,
    .mvm-e2-form,
    .mvm-header-search-form,
    .mvm-header-account-card
) :is(input,textarea)::placeholder {
    color: var(--mvm-muted) !important;
    -webkit-text-fill-color: var(--mvm-muted) !important;
    opacity: 1 !important;
}

html[data-mvm-theme] body :is(
    .mvm-contact-form,
    .wpcf7,
    .ps-form,
    .wpem-form-wrapper,
    .mvm-e2-form,
    .mvm-header-search-form,
    .mvm-header-account-card
) :is(.form-group,.wpem-form-group,.ps-form__row,.mvm-e2-form > label,.wpcf7-form-control-wrap) {
    min-width: 0;
}

html[data-mvm-theme] body :is(
    .mvm-contact-form,
    .wpcf7,
    .ps-form,
    .wpem-form-wrapper,
    .mvm-e2-form
) label {
    margin-bottom: .38rem;
}

html[data-mvm-theme] body :is(
    .mvm-contact-form,
    .wpcf7,
    .ps-form,
    .wpem-form-wrapper,
    .mvm-e2-form
) :is(p,.form-group,.wpem-form-group,.ps-form__row) {
    line-height: 1.55;
}

/* Contact Form 7: labels and helper copy get real vertical room instead of relying on <br>. */
html[data-mvm-theme] body .wpcf7-form > p {
    margin-top: 0;
    margin-bottom: 1rem;
}

html[data-mvm-theme] body .wpcf7-form > p > label,
html[data-mvm-theme] body .wpcf7 .wpcf7-quiz-label {
    display: block;
}

html[data-mvm-theme] body .wpcf7 .wpcf7-form-control-wrap {
    display: block;
    margin-top: .42rem;
}

html[data-mvm-theme] body .wpcf7 :is(.mvm-contact-file-help,.wpcf7-not-valid-tip,.wpcf7-response-output) {
    display: block;
    margin-top: .42rem;
    line-height: 1.55 !important;
    color: var(--mvm-muted) !important;
    -webkit-text-fill-color: var(--mvm-muted) !important;
    overflow-wrap: anywhere;
}

/* PeepSo login/account fields: keep notices and consecutive rows from colliding at zoom. */
html[data-mvm-theme] body .ps-form .ps-form__row + .ps-form__row {
    margin-top: .55rem;
}

html[data-mvm-theme] body .ps-form .ps-form__field-notice {
    margin-top: .35rem;
    line-height: 1.5 !important;
}

/* WP Event Manager labels/help must remain separated from controls when text is enlarged. */
html[data-mvm-theme] body .wpem-form-wrapper .wpem-form-group > :is(label,legend) {
    display: block;
    margin-bottom: .4rem;
}

html[data-mvm-theme] body .wpem-form-wrapper .wpem-form-group {
    margin-bottom: 1rem;
}

/* Generic text-collision safeguards for user-generated/plugin copy. */
html[data-mvm-theme] body main :is(p,li,dd,dt,label,legend,small,.mvm-muted,.mvm-card-meta,.mvm-e2-meta,.wpforo-forum-info) {
    overflow-wrap: anywhere;
    word-break: normal;
}

html[data-mvm-theme] body main :is(h1,h2,h3,h4,h5,h6) {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Selection and reduced motion are mode-independent accessibility guarantees. */
html[data-mvm-theme] body ::selection {
    background: var(--mvm-blue);
    color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
    html[data-mvm-theme] body *,
    html[data-mvm-theme] body *::before,
    html[data-mvm-theme] body *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}