/*
 * Studio Spreekwoord — premium-kluis input.css (kluis-redesign 2026-04-28)
 *
 * BRON-CSS voor de nieuwe kluis-page redesign. Output:
 *   /assets/css/premium-kluis.css
 *
 * Build (geen Tailwind nodig — pure CSS met tokens):
 *   cp "dev/build/premium-kluis/input.css" \
 *      "dev/wordpress/wp-content/themes/studiospreekwoord/assets/css/premium-kluis.css"
 *
 * Werkt ALS aanvulling op het bestaande kluis.css:
 *   - kluis.css        = vault-form basis (#ss-vault-input + #ss-vault-feedback + .ss-vault-button)
 *   - premium-kluis.css = nieuwe page-frame, confetti, hint-knop, pogingen-indicator,
 *                         success/wrong-state details, hero-styling.
 *
 * Conditional geladen via ss_is_kluis_context() in inc/assets.php.
 *
 * SCOPE — alleen actief op kluis-pages binnen het wrapper-element:
 *   <article class="ss-kluis-page"> ... </article>
 * Class-prefix `.ss-kluis-page` houdt utilities buiten andere theme-zones (woocommerce,
 * routes, premium-home, premium-meta).
 *
 * CLASS-CONVENTIE (1-op-1 met Webby's single-kluis-page.php — iter2 alignment):
 *   .ss-kluis-page                  — page wrapper / scope-root (data-ss-kluis-page)
 *   .ss-kluis-page__hero            — hero-sectie met H1 + intro
 *   .ss-kluis-page__hero-title      — H1 "Kraak de code in {plaats}"
 *   .ss-kluis-page__hero-sub        — subtekst spreekwoord-context
 *   .ss-kluis-page__card            — perkament-card om vault-form heen
 *   .ss-kluis-page__prompt          — "Vul de N-cijferige code in..."
 *   .ss-kluis-page__form-wrap       — wrap rond [kluis]-shortcode output
 *   .ss-kluis-page__attempts        — pogingen-indicator (data-ss-attempts)
 *   .ss-kluis-page__hint-slot       — hint-slot container (data-ss-hint-slot, hidden)
 *   .ss-kluis-page__hint-button     — hint-knop in slot (data-ss-hint-button)
 *   .ss-kluis-page__answers-slot    — antwoorden-slot (data-ss-answers-slot, hidden)
 *   .ss-kluis-page__answers-link    — link in answers-slot
 *   .ss-kluis-page__confetti-slot   — confetti spawn-target (data-ss-confetti-slot)
 *   .ss-kluis-page__success-slot    — success-block (data-ss-success-slot, hidden)
 *   .ss-kluis-page__footer-links    — wrap rond footer-links
 *   .ss-kluis-page__back-link       — "Terug naar route"
 *   .ss-kluis-page__all-link        — "Alle kluizen / Alle routes"
 *   .ss-confetti-piece              — single confetti div (JS spawnt deze in confetti-slot)
 *
 * A11y:
 *   - Alle interactieve elementen >= 44px touch-target (--min-touch)
 *   - prefers-reduced-motion: confetti vervangen door fade-in tekst
 *   - Hint-knop heeft visible focus-ring
 *   - Schud-animatie disabled bij reduced-motion (alleen kleur-flash)
 *
 * @since 2026-04-28
 */

/* =========================================================================
   PAGE WRAPPER — scope-root + base styling kluis-page
   ========================================================================= */

.ss-kluis-page {
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: var(--line-height-base);
    min-height: 60vh;
    padding: var(--space-xl) var(--space-md);
    background: var(--color-bg-perkament);
    position: relative;
    overflow-x: hidden; /* houdt confetti binnen viewport */
}

@media (min-width: 768px) {
    .ss-kluis-page {
        padding: var(--space-3xl) var(--space-lg);
    }
}

/* =========================================================================
   HERO — H1 + subtekst + optionele plaats-foto
   ========================================================================= */

.ss-kluis-page__hero {
    text-align: center;
    max-width: var(--container-content, 680px);
    margin: 0 auto var(--space-2xl);
    padding: 0 var(--space-md);
}

.ss-kluis-page__hero-title {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--color-primary);
    margin: 0 0 var(--space-md);
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {
    .ss-kluis-page__hero-title {
        font-size: var(--font-size-h1-desktop);
    }
}

.ss-kluis-page__hero-sub {
    font-size: var(--font-size-lg);
    color: var(--color-text);
    margin: 0;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* Optionele plaats-foto als wash-background. Webby zet deze als
   inline-style background-image of als <img>-overlay. */
.ss-kluis-page--has-image .ss-kluis-page__hero {
    position: relative;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.ss-kluis-page__hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.15;
    background-position: center;
    background-size: cover;
    border-radius: var(--radius-lg);
}

.ss-kluis-page__hero > * {
    position: relative;
    z-index: 1;
}

/* =========================================================================
   CARD — perkament-card om vault-form heen
   (Webby gebruikt class .ss-kluis-page__card. Position: relative is nodig
    omdat de confetti-slot daarbinnen absolute-positioned overspant.)
   ========================================================================= */

.ss-kluis-page__card {
    max-width: var(--container-form, 640px);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    position: relative;
}

@media (min-width: 768px) {
    .ss-kluis-page__card {
        padding: var(--space-2xl) var(--space-xl);
    }
}

/* Form-wrap rond [kluis]-shortcode output (input + feedback). */
.ss-kluis-page__form-wrap {
    max-width: 100%;
    margin: 0 auto;
}

.ss-kluis-page__prompt {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-lg);
    text-align: center;
    line-height: var(--line-height-base);
}

@media (min-width: 768px) {
    .ss-kluis-page__prompt {
        font-size: var(--font-size-lg);
    }
}

/* =========================================================================
   SUBMIT-BUTTON — semantisch <button> + inline SVG-icoon (Webby iter4)
   Vervangt oude <img class="ss-vault-button"> met proper <button>-element.
   .ss-vault-button blijft als compat-alias (JS rotation-anchor).
   ========================================================================= */

.ss-kluis-page__submit-button {
    /* Base styling — rounded-card */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);

    margin: var(--space-md) auto 0;
    padding: 0.75rem 1.5rem;
    min-height: 48px;               /* > --min-touch voor kluis-context */

    /* AC-02: token-swap #A85829 → 5.131:1 vs white — WCAG AA body PASS */
    /* Pre-flight grep: geen ::before { content: "KRAAK" } override gevonden in theme-CSS */
    background: var(--color-verfstreep-dark);  /* #A85829 — was var(--color-primary) #013440 */
    color: var(--color-text-inverse);          /* #FFFFFF */
    border: 1px solid var(--color-verfstreep-dark);
    border-radius: var(--radius-md);

    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    letter-spacing: 0.01em;

    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    /* AC-08: mobile base = full-width */
    width: 100%;
    max-width: 100%;

    transition: background var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base),
                transform var(--transition-fast);
}

/* AC-01: visible label span — geen uppercase, sentence-case voor voice-control */
.ss-kluis-page__submit-label {
    font-weight: 600;
    letter-spacing: 0.02em;
    /* Geen text-transform: uppercase — voice-control "Kraak de code" partial-match bewaard */
}

/* Hover: deep-teal swap (anti-AI: NIET lichtere shade — drukt gewicht uit) */
.ss-kluis-page__submit-button:hover {
    background: var(--color-primary);    /* #013440 deep-teal — 16.05:1 vs white */
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.ss-kluis-page__submit-button:active {
    transform: translateY(1px);          /* drukt IN (niet -1px lift) */
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: none;
}

/* Focus-ring: via sitewide main.css :where() + box-shadow pattern (AC-04) */
/* Geen outline:none hier — sitewide regel vangt dit correct op */

/* Disabled-state (tijdens submit / na max-attempts) */
.ss-kluis-page__submit-button:disabled,
.ss-kluis-page__submit-button[aria-busy="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* AC-08: responsive-width desktop — 240-320px, niet full-width */
@media (min-width: 768px) {
    .ss-kluis-page__submit-button {
        width: auto;
        min-width: 240px;
        max-width: 320px;
        min-height: 56px;
        padding: 14px 32px;
    }
}

@media (min-width: 1024px) {
    .ss-kluis-page__submit-button {
        min-width: 260px;    /* ~60% van 440px kluis-safe-width */
    }
}

/* SVG-icoon binnen button (Lucide-stijl) */
.ss-kluis-page__submit-icon {
    width: 1.25rem;
    height: 1.25rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Spinner-rotation tijdens submit-pending.
   - Klassieke `.rotate` class blijft compat (JS gebruikt deze al via
     getElementsByClassName('ss-vault-button')). Wanneer button rotation
     krijgt, roteert het SVG-icoon, niet de hele button. */
.ss-kluis-page__submit-button.rotate .ss-kluis-page__submit-icon,
.ss-vault-button.rotate .ss-kluis-page__submit-icon {
    animation: ss-kluis-spin 800ms linear infinite;
}

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

/* =========================================================================
   POGINGEN-INDICATOR — `Poging X van Y` rechts naast input (mobiel: onder)
   ========================================================================= */

.ss-kluis-page__attempts {
    /* AC-06: leesbare font-size op desktop (was te klein op 1440px) */
    display: block;
    font-size: var(--font-size-sm);   /* 13px mobile */
    color: var(--color-text-muted);
    font-weight: 500;
    text-align: center;
    margin: var(--space-md) auto 0;
    letter-spacing: 0.02em;
    min-height: 1.25em; /* layout-shift voorkomen */
}

@media (min-width: 768px) {
    .ss-kluis-page__attempts {
        font-size: var(--font-size-md);  /* AC-06: 16px op desktop — getComputedStyle ≥ "16px" PASS */
        text-align: right;
        margin-top: var(--space-sm);
        padding-right: var(--space-xs);
    }
}

/* Verberg pogingen bij onbeperkt (server zet data-ss-attempts-max="0"). */
.ss-kluis-page__attempts[data-ss-attempts-max="0"] {
    display: none;
}

/* Verbergen via hidden-attr ook respecteren. */
.ss-kluis-page__attempts[hidden] {
    display: none !important;
}

/* =========================================================================
   HINT-SLOT + HINT-BUTTON — verborgen tot na 2e fout (JS toggelt [hidden]
   op de slot-container; de knop zelf is altijd zichtbaar binnen de slot).
   Webby's PHP rendert het label tekstueel ("Hint? Begint met '<X>'") in de
   knop — geen apart .ss-kluis-page__hint-text element nodig.
   ========================================================================= */

/* Slot-container — de PHP zet [hidden] hierop bij init. */
.ss-kluis-page__hint-slot {
    text-align: center;
    margin: var(--space-lg) auto 0;
}

.ss-kluis-page__hint-slot[hidden],
.ss-kluis-page__hint-slot.is-hidden {
    display: none !important;
}

/* Hint-knop binnen slot. */
.ss-kluis-page__hint-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);

    margin: 0 auto;
    padding: var(--space-sm) var(--space-md);
    min-height: var(--min-touch);

    background: transparent;
    border: 1px dashed var(--color-border-dark);
    border-radius: var(--radius-md);

    color: var(--color-primary-light);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);

    cursor: pointer;
    transition: background var(--transition-base),
                border-color var(--transition-base),
                color var(--transition-base);
}

.ss-kluis-page__hint-button:hover,
.ss-kluis-page__hint-button:focus-visible {
    background: var(--color-bg-perkament-dark);
    border-color: var(--color-primary-light);
    color: var(--color-primary);
}

.ss-kluis-page__hint-button:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
}

/* Hint-icoon (SVG of unicode). Webby kan inline SVG gebruiken. */
.ss-kluis-page__hint-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    opacity: 0.8;
}

/* =========================================================================
   ANSWERS-SLOT — antwoorden-link na 3e fout (data-ss-answers-slot, hidden)
   ========================================================================= */

.ss-kluis-page__answers-slot {
    text-align: center;
    margin: var(--space-md) auto 0;
}

.ss-kluis-page__answers-slot[hidden],
.ss-kluis-page__answers-slot.is-hidden {
    display: none !important;
}

.ss-kluis-page__answers-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: var(--min-touch);
    padding: var(--space-xs) var(--space-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: color var(--transition-base);
}

.ss-kluis-page__answers-link:hover,
.ss-kluis-page__answers-link:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ss-kluis-page__answers-link:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
}

/* =========================================================================
   SUCCESS-SLOT — coupon HELDEN block + reduced-motion fallback
   (Webby class .ss-kluis-page__success-slot, data-ss-success-slot)
   ========================================================================= */

.ss-kluis-page__success-slot {
    margin: var(--space-lg) auto 0;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-success-bg);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    text-align: center;
    font-weight: var(--font-weight-semibold);

    /* Default verborgen via [hidden] vanuit PHP. JS toggelt is-visible
       na correct antwoord. Bij reduced-motion: alleen opacity-fade. */
    opacity: 0;
    transform: translateY(0);
    transition: opacity var(--transition-slow);
    pointer-events: none;
}

.ss-kluis-page__success-slot.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.ss-kluis-page__success-slot[hidden] {
    display: none !important;
}

/* =========================================================================
   SCHUD-ANIMATIE — ss-kluis-shake op input.is-wrong
   (kluis.css heeft al een variant; deze is iets explicieter + sterker)
   ========================================================================= */

@keyframes ss-kluis-shake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-8px); }
    30%      { transform: translateX(8px); }
    45%      { transform: translateX(-6px); }
    60%      { transform: translateX(6px); }
    75%      { transform: translateX(-3px); }
    90%      { transform: translateX(3px); }
}

#ss-vault-input.is-wrong {
    animation: ss-kluis-shake 400ms var(--ease-out-quart);
}

/* =========================================================================
   CONFETTI — CSS-only spawn, JS plaatst ~30 .ss-confetti-piece divs
   in [data-ss-confetti-slot] (= .ss-kluis-page__confetti-slot).

   De slot is een sibling van .ss-kluis-page__card binnen de section, met
   `position: absolute; inset: 0` zodat hij over de card heen valt. Parent
   `.ss-kluis-page__vraag .page-container` is onze relative-anker.
   ========================================================================= */

.ss-kluis-page__confetti-slot {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
}

/* PHP rendert default met [hidden]. JS removed dit attr bij spawn. */
.ss-kluis-page__confetti-slot[hidden] {
    display: none !important;
}

/* Parent moet relative zijn zodat absolute confetti-slot binnen card-zone
   valt. Webby's .ss-kluis-page__vraag is de section-wrapper. */
.ss-kluis-page__vraag {
    position: relative;
}

/* Single confetti-stuk. JS zet inline:
   - left: random %
   - --confetti-color: var(--color-…)
   - --confetti-rotate-end: random deg
   - --confetti-drift: random px
   - animation-delay: random ms (0-300ms)
   - animation-duration: random (1.2-1.8s) */

.ss-confetti-piece {
    position: absolute;
    top: -20px;
    width: 8px;
    height: 14px;
    background: var(--confetti-color, var(--color-accent-gold));
    border-radius: 2px;
    transform-origin: center;
    will-change: transform, opacity;
    opacity: 1;

    animation-name: ss-confetti-fall, ss-confetti-drift;
    animation-duration: 1.5s, 1.5s;
    animation-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1), ease-in-out;
    animation-fill-mode: forwards, forwards;
    animation-iteration-count: 1, 1;
}

/* Variant-shapes (JS kan willekeurig modifier-class toevoegen) */
.ss-confetti-piece--circle {
    border-radius: 50%;
    width: 10px;
    height: 10px;
}

.ss-confetti-piece--ribbon {
    width: 6px;
    height: 18px;
    border-radius: 1px;
}

@keyframes ss-confetti-fall {
    0% {
        transform: translateY(0) rotate(0);
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(var(--confetti-rotate-end, 540deg));
        opacity: 0;
    }
}

/* Sideways drift — wiggle horizontaal terwijl vallen */
@keyframes ss-confetti-drift {
    0%   { margin-left: 0; }
    25%  { margin-left: var(--confetti-drift, 12px); }
    50%  { margin-left: 0; }
    75%  { margin-left: calc(var(--confetti-drift, 12px) * -1); }
    100% { margin-left: 0; }
}

/* =========================================================================
   FOOTER-LINKS — terug naar route + alle kluizen
   ========================================================================= */

.ss-kluis-page__footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
    justify-content: center;
    margin: var(--space-2xl) auto 0;
    padding: var(--space-lg) var(--space-md);
    max-width: var(--container-content, 680px);
    text-align: center;
}

@media (min-width: 768px) {
    .ss-kluis-page__footer-links {
        flex-direction: row;
        gap: var(--space-xl);
    }
}

/* Footer-links: Webby's PHP gebruikt `__back-link` + `__all-link` als aparte
   classes (geen gedeelde `__footer-link`). Zelfde basis-stijl, maar
   `__all-link` krijgt een muted-tint omdat het een secundaire link is. */
.ss-kluis-page__back-link,
.ss-kluis-page__all-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: var(--min-touch);
    padding: var(--space-sm) var(--space-md);

    font-size: var(--font-size-base);
    text-decoration: none;
    border-radius: var(--radius-md);

    transition: background var(--transition-base),
                color var(--transition-base);
}

.ss-kluis-page__back-link {
    color: var(--color-primary-light);
}

.ss-kluis-page__all-link {
    color: var(--color-text-muted);
}

.ss-kluis-page__back-link:hover,
.ss-kluis-page__back-link:focus-visible,
.ss-kluis-page__all-link:hover,
.ss-kluis-page__all-link:focus-visible {
    background: var(--color-bg-perkament-dark);
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ss-kluis-page__back-link:focus-visible,
.ss-kluis-page__all-link:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
}

/* =========================================================================
   REDUCED-MOTION — geen confetti, geen schud, alleen opacity-fade
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    /* Confetti volledig disable — slot verbergen + pieces */
    .ss-kluis-page__confetti-slot,
    .ss-confetti-piece {
        display: none !important;
        animation: none !important;
    }

    /* Schud-animatie uit — alleen kleur-flash blijft */
    #ss-vault-input.is-wrong {
        animation: none !important;
    }

    /* Success-feedback fade-in i.p.v. confetti */
    .ss-kluis-page__success-slot {
        transition: opacity 200ms ease-out;
    }

    /* Hover-transitions uit op interactieve elementen */
    .ss-kluis-page__hint-button,
    .ss-kluis-page__answers-link,
    .ss-kluis-page__back-link,
    .ss-kluis-page__all-link,
    .ss-kluis-page__submit-button {
        transition: none !important;
    }

    /* Submit-button: geen lift, geen spinner-rotate */
    .ss-kluis-page__submit-button:hover,
    .ss-kluis-page__submit-button:active {
        transform: none !important;
        box-shadow: none !important;
    }

    .ss-kluis-page__submit-button.rotate .ss-kluis-page__submit-icon,
    .ss-vault-button.rotate .ss-kluis-page__submit-icon {
        animation: none !important;
    }
}

/* =========================================================================
   FORCED-COLORS (Windows hi-contrast)
   ========================================================================= */

@media (forced-colors: active) {
    .ss-kluis-page__card {
        border: 2px solid CanvasText;
    }

    .ss-kluis-page__hint-button {
        border: 1px solid CanvasText;
        color: LinkText;
    }

    .ss-kluis-page__answers-link,
    .ss-kluis-page__back-link,
    .ss-kluis-page__all-link {
        color: LinkText;
    }

    .ss-kluis-page__success-slot {
        border: 2px solid CanvasText;
    }

    .ss-confetti-piece {
        background: CanvasText;
    }

    .ss-kluis-page__submit-button {
        border: 2px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }

    .ss-kluis-page__submit-icon {
        stroke: ButtonText;
    }
}