/* ==========================================================================
   STIJLGIDS.CSS - ONTWIKKELINGSHULPMIDDEL
   ==========================================================================
   
   DOEL VAN DIT BESTAND:
   Dit bestand bevat ALLEEN styling voor de stijlgids pagina (stijlgids.html).
   Het is een ontwikkelingshulpmiddel om alle beschikbare e-learning componenten
   te tonen en te testen.
   
   ⚠️  BELANGRIJKE WAARSCHUWINGEN:
   - Dit bestand is NIET voor e-learning componenten
   - E-learning styling moet altijd in de juiste component-bestanden staan:
     * content-blocks.css  -> voor accent-blokken & accordions
     * cards.css          -> voor info-cards, benefit-cards, etc.
     * interactive.css    -> voor quiz, reflection, dragdrop, etc.
     * layout.css         -> voor algemene layout componenten
     * buttons.css        -> voor knoppen en controls
     * etc.
   
   ✅  WAT WEL HIER THUISHOORT:
   - Styling voor de stijlgids pagina structuur
   - Stijlgids-specifieke layout en navigatie
   
   ❌  WAT NIET HIER THUISHOORT:
   - E-learning component styling
   - Algemene UI elementen
   - Content-specifieke styling
   
   ZIE OOK: documentatie/architecture.md voor volledige CSS-architectuur
   ========================================================================== */

/* ==========================================================================
   Development Mode - Stijlgids Pagina
   ========================================================================== */

.style-guide {
    padding: 2rem;
    background-color: #fdfdff;
    display: none; /* Hidden by default */
}

body.development-mode .style-guide {
    display: block; /* Shown only in development mode */
}

.style-guide-item {
    margin-bottom: 3rem;
    padding: 1.5rem;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius-large);
}

.style-guide-item h3 {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--accent-purple);
    padding-bottom: 0.5rem;
}

.showcase-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--light-gray);
    border-radius: 8px;
}

/* Stijlgids-specifieke classes */
.stijlgids-sectie {
    margin-bottom: 2rem;
}

.stijlgids-hoofdtitel {
    color: var(--primary-purple);
    border-bottom: 2px solid var(--accent-purple);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.stijlgids-intro {
    background-color: var(--accent-purple);
    padding: 1rem;
    border-radius: var(--border-radius-standard);
    margin-bottom: 2rem;
    font-style: italic;
}