/**
 * @package     NVSP.Plugin
 * @subpackage  Content.Sloganhunt
 *
 * @copyright   Copyright (C) 2024 NVSP. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 * @version     2.2.0 - FIX: Added .collected class support (was only .found)
 *
 * CHANGES IN v2.2.0:
 * ✅ ADDED: .collected class for JavaScript compatibility
 * ✅ KEPT: .found class for backward compatibility
 * ✅ RESULT: Collected letters now return to normal styling
 */

/* ==========================================================================
   Sloganhunt Content Plugin - Letter Styles (NO HOVER)
   ========================================================================== */

/**
 * Clickable Letter Styles - GEEN HOVER EFFECT
 * Font: Roboto Slab Regular 16.5px (via Astroid)
 * Kleur: #FF6600 (oranje)
 * Altijd underlined, bold
 */
.sloganhunt-letter {
    /* KLEUR - Oranje #FF6600 */
    color: #FF6600 !important;

    /* FONT WEIGHT - Bold */
    font-weight: bold !important;

    /* UNDERLINE */
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;

    /* CURSOR - Pointer om klikbaarheid aan te geven */
    cursor: pointer !important;

    /* DISPLAY */
    display: inline !important;
    position: relative !important;
    background: transparent !important;

    /* NO TRANSITIONS - Geen animaties */
    transition: none !important;
    transform: none !important;

    /* PREVENT TEXT SELECTION */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/**
 * Hover State - GEEN VERANDERING
 * Letter blijft exact hetzelfde bij hover
 */
.sloganhunt-letter:hover {
    color: #FF6600 !important;
    font-weight: bold !important;
    text-decoration: underline !important;
    background: transparent !important;
    transform: none !important;
    text-shadow: none !important;
}

/**
 * Active/Click State - GEEN VERANDERING
 */
.sloganhunt-letter:active {
    color: #FF6600 !important;
    transform: none !important;
}

/**
 * Collected/Found Letter State - Terug naar normale tekst
 * Wordt toegepast wanneer gebruiker deze letter al heeft gevonden
 *
 * BELANGRIJK: Ondersteunt BEIDE classes:
 * - .collected (gebruikt door letter-injection.js v3.1.1+)
 * - .found (legacy support)
 *
 * Styling: Exact zoals normale body tekst
 * Kleur: #2C2E36 (exact zoals body text)
 * Weight: 400 (normal)
 * Geen underline, niet clickable
 */
.sloganhunt-letter.collected,
.sloganhunt-letter.found {
    /* Terug naar normale tekst kleur (exact zoals body) */
    color: #2C2E36 !important;

    /* GEEN underline - gewoon normale text */
    text-decoration: none !important;

    /* Normale font weight */
    font-weight: 400 !important;

    /* GEEN opacity - gewoon normale letter */
    opacity: 1 !important;

    /* Niet klikbaar */
    cursor: default !important;
    pointer-events: none !important;

    /* GEEN background */
    background: transparent !important;
}

/**
 * Hover op collected letters - GEEN effect
 * Letter blijft normaal, ook bij hover
 */
.sloganhunt-letter.collected:hover,
.sloganhunt-letter.found:hover {
    color: #2C2E36 !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transform: none !important;
}

/**
 * Loading State - Tijdens AJAX call
 */
.sloganhunt-letter.loading {
    opacity: 0.6 !important;
    cursor: wait !important;
    pointer-events: none !important;
}

/**
 * Collecting State - Tijdens animatie
 * Wordt gebruikt tijdens de click animatie
 */
.sloganhunt-letter.collecting {
    opacity: 0.8 !important;
    cursor: wait !important;
    pointer-events: none !important;
}

/**
 * Success State - Na succesvol vinden
 * Korte groene flash
 */
.sloganhunt-letter.success {
    color: #28a745 !important;
    animation: letterSuccess 0.6s ease !important;
}

@keyframes letterSuccess {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/**
 * Error State - Als iets misgaat
 */
.sloganhunt-letter.error {
    color: #dc3545 !important;
    animation: letterShake 0.5s ease !important;
}

@keyframes letterShake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

/**
 * Accessibility - Focus State
 * Voor keyboard navigatie
 */
.sloganhunt-letter:focus {
    outline: 2px solid #FF6600 !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

/**
 * Prevent parent hover effects
 * Zorgt dat parent elementen (p, div, li) de letter niet beïnvloeden
 */
p:hover .sloganhunt-letter,
div:hover .sloganhunt-letter,
li:hover .sloganhunt-letter,
span:hover .sloganhunt-letter,
a:hover .sloganhunt-letter {
    color: #FF6600 !important;
    background: transparent !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

/**
 * OVERRIDE: Collected letters blijven normaal, zelfs bij parent hover
 */
p:hover .sloganhunt-letter.collected,
div:hover .sloganhunt-letter.collected,
li:hover .sloganhunt-letter.collected,
span:hover .sloganhunt-letter.collected,
a:hover .sloganhunt-letter.collected,
p:hover .sloganhunt-letter.found,
div:hover .sloganhunt-letter.found,
li:hover .sloganhunt-letter.found,
span:hover .sloganhunt-letter.found,
a:hover .sloganhunt-letter.found {
    color: #2C2E36 !important;
    background: transparent !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

/**
 * Mobile Optimization
 * Vergroot hit area op touch devices
 */
@media (max-width: 768px) {
    .sloganhunt-letter {
        padding: 4px 2px !important;
        font-size: 1.05em !important;
    }

    /* NO HOVER on mobile */
    .sloganhunt-letter:hover {
        color: #FF6600 !important;
        transform: none !important;
    }

    /* Collected blijft normaal op mobile */
    .sloganhunt-letter.collected:hover,
    .sloganhunt-letter.found:hover {
        color: #2C2E36 !important;
    }
}

/**
 * Print Styles
 * Geen speciale styling in print
 */
@media print {
    .sloganhunt-letter {
        color: inherit !important;
        font-weight: inherit !important;
        cursor: default !important;
        text-decoration: none !important;
    }
}

/**
 * High Contrast Mode Support
 */
@media (prefers-contrast: high) {
    .sloganhunt-letter {
        font-weight: 900 !important;
        text-decoration: underline !important;
        text-decoration-style: solid !important;
        text-decoration-thickness: 2px !important;
    }

    /* Collected letters blijven normaal in high contrast */
    .sloganhunt-letter.collected,
    .sloganhunt-letter.found {
        font-weight: 400 !important;
        text-decoration: none !important;
    }
}

/**
 * Reduced Motion Support
 * Respect user's motion preferences
 */
@media (prefers-reduced-motion: reduce) {
    .sloganhunt-letter,
    .sloganhunt-letter:hover,
    .sloganhunt-letter:active {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }

    .sloganhunt-letter.loading,
    .sloganhunt-letter.collecting {
        animation: none !important;
        opacity: 0.6 !important;
    }

    .sloganhunt-letter.success {
        animation: none !important;
    }

    .sloganhunt-letter.error {
        animation: none !important;
    }
}

/**
 * Dark Mode Support
 * Pas kleuren aan voor donkere achtergronden
 */
@media (prefers-color-scheme: dark) {
    .sloganhunt-letter {
        color: #FF8C69 !important;
    }

    .sloganhunt-letter:hover {
        color: #FF8C69 !important;
    }

    .sloganhunt-letter.collected,
    .sloganhunt-letter.found {
        color: #E0E0E0 !important;
    }
}