/* A11Y-FOCUS-20261001 — toetsenbord en schermlezer: cookiebalk + chatbox.
   Geladen vanuit includes/footer.php. Raakt alleen .mp-cookie-* en .mp-chat-*. */

/* Zolang de cookiebalk (of een andere vaste onderbalk) zichtbaar is, houdt de browser bij
   tab-navigatie onderaan zoveel ruimte vrij. --mp-onderbalk wordt door footer.php gemeten. */
html.mp-has-cookiebar { scroll-padding-bottom: calc(var(--mp-onderbalk, 80px) + 12px); }

/* Duidelijke focusring in de cookiebalk (donkere achtergrond → witte ring) */
.mp-cookie-banner :focus-visible,
.mp-cookie-banner .mp-cookie-inner a:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 2px;
    border-radius: 8px;
}

/* Chat: gesloten paneel is ook zonder inert-ondersteuning onbereikbaar (visibility pas na de fade) */
.mp-chat-panel { visibility: hidden; transition: transform .3s ease, opacity .3s ease, visibility 0s linear .3s; }
.mp-chat-panel.open { visibility: visible; transition: transform .3s ease, opacity .3s ease, visibility 0s linear 0s; }

/* Chat: zichtbare focus (het invoerveld had outline:none) */
.mp-chat-fab:focus-visible { outline: 3px solid #F5A524; outline-offset: 3px; }
.mp-chat-panel .mp-chat-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 6px; opacity: 1; }
.mp-chat-panel .mp-chat-input:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.mp-chat-panel .mp-chat-send:focus-visible,
.mp-chat-panel .mp-chat-suggestions button:focus-visible { outline: 3px solid #14306E; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .mp-chat-panel, .mp-chat-panel.open { transition: none; }
}

/* CALC-A11Y-20261001 — calculator (#calculator): leesbare voltooide stappen, gekoppelde foutmeldingen,
   zichtbare focus op alle bedieningselementen en minder beweging op verzoek. Raakt alleen #calculator. */

/* Voltooide stap had opacity .6 → stapnaam haalde 4,5:1 niet (axe color-contrast). Nu volle dekking in horizonblauw (6,4:1). */
#calculator .mp-step.done { opacity: 1; color: var(--mc-blue, #2B5DB0); }

/* Foutmelding onder het veld (aangemaakt door calculator.js, gekoppeld via aria-describedby) */
#calculator .mp-err {
    display: flex; align-items: flex-start; gap: 6px;
    margin: 6px 0 0; font-size: .88rem; font-weight: 600; line-height: 1.35; color: #B42318; /* 5,9:1 op wit */
}
#calculator .mp-err::before { content: '!'; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; background: #B42318; color: #fff; font-size: .75rem; font-weight: 800; }
#calculator [aria-invalid="true"]:not([role]) { border-color: #B42318 !important; }
#calculator .mp-housing-grid[aria-invalid="true"] { outline: 2px solid #B42318; outline-offset: 4px; border-radius: 12px; }

/* Zichtbare focus (velden hadden alleen een lichte schaduw van 14% dekking) */
#calculator .mp-field input:focus-visible,
#calculator .mp-field select:focus-visible { outline: 3px solid var(--mc-blue, #2B5DB0); outline-offset: 2px; }
#calculator .mp-btn:focus-visible,
#calculator .mp-swap-btn:focus-visible,
#calculator .mp-suggest-card:focus-visible,
#calculator .mp-share-btn:focus-visible { outline: 3px solid var(--mc-navy, #14306E); outline-offset: 3px; }
#calculator .mp-housing-card:has(input:focus-visible),
#calculator .mp-furniture-card:has(input:focus-visible),
#calculator .mp-extra-card:has(input:focus-visible) { outline: 3px solid var(--mc-blue, #2B5DB0); outline-offset: 2px; }
/* Paneelkop en uitkomst krijgen na een stapwissel programmatisch focus (tabindex=-1): geen ring, wel een rustige markering */
#calculator .mp-panel h2[tabindex="-1"]:focus { outline: none; }
#calculator .mp-panel h2[tabindex="-1"]:focus-visible { outline: 2px dashed var(--mc-blue, #2B5DB0); outline-offset: 4px; border-radius: 6px; }
#calculator #mpResultPrice:focus { outline: none; }

/* Gekozen verhuistype zichtbaar ook zonder kleur (aria-pressed) */
#calculator .mp-suggest-card[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--mc-navy, #14306E); }

@media (prefers-reduced-motion: reduce) {
    #calculator .mp-shake, #calculator .mp-field.mp-invalid input,
    #calculator .mp-slide-out-left, #calculator .mp-slide-out-right,
    #calculator .mp-slide-in-right, #calculator .mp-slide-in-left { animation: none !important; }
}