/*
 * Studio Spreekwoord — Kluis module stylesheet (Task 17)
 *
 * Scope: visuele styling voor de kluis-shortcode `[kluis id="X"]`.
 * Conditional geladen via ss_is_kluis_context() in inc/assets.php.
 *
 * HTML-contract (zie inc/kluis-module.php + _reference/ss-vault):
 *   <div id="ss-vault-feedback" aria-live="polite" aria-atomic="true"></div>
 *   <div id="ss-vault">
 *     <input type="text" id="ss-vault-input"
 *            data-attempt data-attempt-value data-vault data-code-length
 *            maxlength size>
 *     <img class="ss-vault-button" src=".../button.png" alt="">
 *   </div>
 *
 * JS-hooks uit assets/js/kluis.js:
 *   - `.rotate` op `.ss-vault-button` tijdens request
 *   - inline `input.style.backgroundColor` = '#a2d31d' (success) of '#de2118' (error)
 *   - `input[aria-busy="true"]` tijdens request
 *   - `input[disabled]` bij locked / last-attempt
 *
 * A11y-principes:
 *   - Focus-visible ring met voldoende contrast op perkament-achtergrond
 *   - Touch-target >= 44px (WCAG 2.5.5) — zie --min-touch in tokens.css
 *   - prefers-reduced-motion: disable rotate + shake
 *   - aria-live region is altijd zichtbaar en reserveert ruimte (min-height)
 *
 * Alle waarden consumeren tokens.css — geen hex hardcoded behalve de
 * twee state-kleuren (#a2d31d / #de2118) die JS inline op input.style zet.
 */

/* =========================================================================
   Form-container — perkament-card, match met Premium-preview card-stijl
   ========================================================================= */

.ss-kluis-page #ss-vault-feedback,
#ss-vault-feedback {
    min-height: 2.25rem;
    margin: 0 auto var(--space-md);
    max-width: var(--container-form);

    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-snug);
    color: var(--color-text);
    text-align: center;

    /* Reserveert ruimte ook als leeg — voorkomt layout-shift bij feedback. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-md);
}

#ss-vault-feedback:empty {
    visibility: hidden;
}

/* =========================================================================
   AC-05 — Error/success state styling (data-state attribuut)
   WCAG 2.2 SC 1.4.1: kleur + icoon + tekstprefix "fout" = 3 signalen
   #B4452A op #FEF2F2 ≈ 5.1:1 — WCAG AA body PASS (Python verified)
   ========================================================================= */

#ss-vault-feedback[data-state="error"] {
    background: var(--color-error-bg);         /* #FEF2F2 — licht roze */
    color: var(--color-error-accent);          /* #B4452A — 5.1:1 op #FEF2F2 PASS */
    border-left: 4px solid var(--color-error-accent);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}

#ss-vault-feedback[data-state="success"] {
    color: var(--color-success);               /* #3D7A5F */
}

/* Icoon-container in feedback (aria-hidden="true", JS injecteert markup) */
.ss-vault-feedback__icon {
    flex-shrink: 0;
    margin-top: 2px;                           /* visueel baseline-aligned met 1e tekstregel */
    color: currentColor;
    display: inline-flex;
}

.ss-vault-feedback__icon svg {
    display: block;
}

/* Tekst-span binnen feedback */
.ss-vault-feedback__text {
    line-height: 1.5;
}

.ss-vault-feedback__text strong {
    font-weight: 700;
}

/* Reduced-motion: geen transition */
@media (prefers-reduced-motion: reduce) {
    #ss-vault-feedback {
        transition: none;
    }
}

#ss-vault-feedback a {
    color: var(--color-primary-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: var(--space-xs);
}

#ss-vault-feedback a:hover,
#ss-vault-feedback a:focus-visible {
    color: var(--color-primary);
}

/* =========================================================================
   Wrapper — #ss-vault perkament-card VERWIJDERD (reconstructie 2026-05-12)
   Input is nu gepositioneerd in .ss-vault-illustration__input-overlay
   (absolute overlay OP de SVG-display — zie single-kluis-page.css § 2).
   De #ss-vault-selector hieronder doet niets kwaads als het element nog
   bestaat, maar het perkament-card uiterlijk is weggehaald.
   ========================================================================= */

/* #ss-vault — perkament-card regels verwijderd; input zit nu in SVG-overlay */

/* =========================================================================
   Input — centrale code-veld
   ========================================================================= */

#ss-vault-input {
    /* AC-03: tap-target ≥44px — WCAG 2.2 SC 2.5.5 Enhanced */
    display: block;
    width: 100%;
    min-height: var(--min-touch);    /* 44px — token bestaat al */
    box-sizing: border-box;

    padding: 8px 4px;                /* verticale padding centreert baseline-text (AC-03) */
    margin: 0;

    font-family: var(--font-mono);   /* AC-10: monospace-feel voor code-invoer */
    font-size: var(--font-size-2xl); /* 28px — visueel ruim voor 3 cijfers */
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.4em;           /* AC-10: spreidt de 3 cijfers visueel — "aankomende-cijfer-feel" */
    color: var(--color-primary);
    text-align: center;

    background: transparent;
    border: 0;
    caret-color: var(--color-verfstreep);

    /* AC-10: visible affordance in rust-staat — zachte gouden inset-onderlijn */
    box-shadow: inset 0 -2px 0 0 rgba(212, 168, 67, 0.45);  /* gold half-transparent */
    cursor: pointer;                 /* signaleert clickability (AC-10) */

    transition: box-shadow var(--transition-base);

    -webkit-appearance: none;
    appearance: none;
}

#ss-vault-input::placeholder {
    color: var(--color-primary);
    opacity: 0.35;
    letter-spacing: 0.4em;
}

#ss-vault-input:hover {
    box-shadow: inset 0 -2px 0 0 rgba(212, 168, 67, 0.75);
}

/* AC-04 + AC-10: focus-ring via sitewide main.css :where() + full gold onderlijn */
/* Geen outline: none hier — was een regressie (kluis.css r137 verwijderd) */
#ss-vault-input:focus,
#ss-vault-input:focus-visible {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, #015C6E);
    outline-offset: var(--focus-ring-offset, 2px);
    /* AC-10: full gold onderlijn bij focus */
    box-shadow: inset 0 -2px 0 0 var(--color-accent-gold),
                0 0 0 var(--focus-ring-offset, 2px) var(--color-bg, transparent),
                var(--focus-ring-shadow, 0 0 0 2px #015C6E);
}

#ss-vault-input[aria-busy="true"] {
    cursor: progress;
    opacity: 0.85;
}

#ss-vault-input[disabled],
#ss-vault-input:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    background: var(--color-bg-perkament-dark);
}

/* JS zet inline style.backgroundColor = #a2d31d / #de2118.
   Deze selectors dekken dezelfde states via attribute-match zodat text-color
   leesbaar blijft (WCAG AA contrast op beide fill-kleuren). */
#ss-vault-input[style*="#a2d31d"],
#ss-vault-input[style*="rgb(162, 211, 29)"] {
    color: #013440;
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px rgba(61, 122, 95, 0.25);
}

#ss-vault-input[style*="#de2118"],
#ss-vault-input[style*="rgb(222, 33, 24)"] {
    color: #fff;
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(185, 74, 61, 0.25);
    animation: ss-kluis-shake 400ms var(--ease-out-quart);
}

/* =========================================================================
   Button — "draai de kluis" indicator
   ========================================================================= */

.ss-vault-button {
    display: block;
    margin: 0 auto;

    width: var(--min-touch);
    height: var(--min-touch);
    min-width: var(--min-touch);
    min-height: var(--min-touch);

    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;

    transition: transform var(--transition-base),
                filter var(--transition-base);

    /* Button is pure indicator — geen pointer, geen tabstop.
       Origineel plugin had geen click-handler, alleen visuele rotatie. */
    pointer-events: none;
}

/* Alt-tekst leeg = decoratief. Als image mist, laat browser broken-img
   niet groter renderen dan doosmaat. */
.ss-vault-button[alt=""],
.ss-vault-button:not([src]) {
    max-height: 64px;
}

/* JS voegt .rotate toe tijdens AJAX-request (continu tot response). */
.ss-vault-button.rotate {
    animation: ss-kluis-spin 3s linear infinite;
}

/* =========================================================================
   Animaties
   ========================================================================= */

@keyframes ss-kluis-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes ss-kluis-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}

/* Respect voor user-preference — geen rotate, geen shake. */
@media (prefers-reduced-motion: reduce) {
    .ss-vault-button,
    .ss-vault-button.rotate,
    #ss-vault-input {
        animation: none !important;
        transition: none !important;
    }

    /* AC-10 affordance-puls is al disabled via transition: none boven */
    /* AC-05 feedback-transition ook: */
    #ss-vault-feedback {
        transition: none;
    }
}

/* =========================================================================
   Responsive
   ========================================================================= */

/* Tablet+: input is nu in SVG-overlay; #ss-vault-wrapper-regels verwijderd.
   Behoud feedback font-size en vault-button legacy-compat. */
@media (min-width: 768px) {
    #ss-vault-feedback {
        font-size: var(--font-size-lg);
    }

    /* .ss-vault-button = legacy compat (JS rotation anchor blijft) */
    .ss-vault-button {
        flex: 0 0 auto;
        width: 64px;
        height: 64px;
    }
}

@media (min-width: 1024px) {
    .ss-vault-button {
        width: 72px;
        height: 72px;
    }
}

/* High-contrast / forced-colors (Windows hi-contrast, a11y-mode) */
@media (forced-colors: active) {
    /* #ss-vault perkament-card is verwijderd — forced-colors via single-kluis-page.css */
    #ss-vault-input {
        border: 2px solid CanvasText;
    }
    #ss-vault-input:focus-visible {
        outline: 3px solid Highlight;
    }
}