/**
 * MinikOkur Accessibility & View Themes Layouts
 * 
 * Complies with British Dyslexia Association guidelines:
 * - Sans-serif fonts with distinct shape definition (Outfit & Inter)
 * - Light cream or soft pastel eye-friendly backgrounds (neutralizing screen glare)
 * - Wide character and sentence letter spacing (minimizing crowding effects)
 * - Left-aligned text blocks strictly avoiding two-way justification
 * - Attention focus helpers and reduced animation options for ADHD / low focus users
 */

/* 1. Dyslexia Friendly View Theme */
body.theme-dyslexia {
    --mk-bg: #F5EFEB !important; /* Soft pasty peach cream */
    --font-sans: 'Outfit', 'Inter', -apple-system, sans-serif !important;
    font-size: 1.15rem !important; /* Larger text base */
    line-height: 1.8 !important; /* Extra line spacing */
    letter-spacing: 0.05em !important; /* Wide letter space */
    word-spacing: 0.12em !important;
}

body.theme-dyslexia p,
body.theme-dyslexia li,
body.theme-dyslexia article {
    text-align: left !important; /* Left justified only */
    font-weight: 500 !important; /* Slightly heavier weight for clarity */
}

body.theme-dyslexia h1,
body.theme-dyslexia h2,
body.theme-dyslexia h3,
body.theme-dyslexia h4 {
    letter-spacing: 0.03em !important;
    line-height: 1.4 !important;
    margin-bottom: var(--space-4) !important;
}

/* Clear visual highlighting on focused links and components */
body.theme-dyslexia a:focus,
body.theme-dyslexia button:focus,
body.theme-dyslexia input:focus,
body.theme-dyslexia select:focus {
    outline: 3px solid var(--mk-secondary) !important;
    outline-offset: 3px !important;
}

/* 2. Attention / ADHD Friendly View Theme */
body.theme-attention {
    /* Minimize visual clutter */
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
}

/* Hide non-critical background decor or illustrative blocks */
body.theme-attention .hero-right,
body.theme-attention .decorative-blob,
body.theme-attention .footer-grid > .footer-col:first-child p {
    opacity: 0.15 !important;
}

/* Highlight primary tasks and focus components */
body.theme-attention .card {
    border: 2px solid var(--mk-border) !important;
    box-shadow: var(--shadow-sm) !important;
}

body.theme-attention .btn-primary {
    box-shadow: 0 0 0 3px rgba(47, 111, 115, 0.25) !important;
    transform: scale(1.02);
}

/* 3. Combined Dyslexia & Attention Friendly Theme */
body.theme-combined {
    --mk-bg: #F8F3E8 !important; /* Cream pastel base */
    --font-sans: 'Outfit', 'Inter', -apple-system, sans-serif !important;
    font-size: 1.2rem !important;
    line-height: 1.9 !important;
    letter-spacing: 0.07em !important;
    word-spacing: 0.15em !important;
}

body.theme-combined p,
body.theme-combined li,
body.theme-combined article {
    text-align: left !important;
}

/* Heavy focus outlining */
body.theme-combined a:focus,
body.theme-combined button:focus {
    outline: 4px dashed var(--mk-primary) !important;
    outline-offset: 4px !important;
}

/* Remove decorative graphics */
body.theme-combined .hero-right,
body.theme-combined .decorative-bg {
    display: none !important;
}

/* 4. High Contrast Accessibility Theme */
body.theme-high-contrast {
    --mk-bg: #121212 !important; /* Pure dark mode */
    --mk-surface: #1E1E1E !important;
    --mk-surface-soft: #2D2D2D !important;
    --mk-text: #FFFFFF !important;
    --mk-text-muted: #B3B3B3 !important;
    --mk-border: #444444 !important;
    --mk-primary: #80CBC4 !important; /* Pale petrol */
    --mk-secondary: #B39DDB !important; /* Pale purple */
    --mk-accent: #FFE082 !important; /* Soft yellow */
    background-color: var(--mk-bg) !important;
    color: var(--mk-text) !important;
}

body.theme-high-contrast .card,
body.theme-high-contrast header,
body.theme-high-contrast footer {
    background-color: var(--mk-surface) !important;
    border-color: var(--mk-border) !important;
    color: var(--mk-text) !important;
}

body.theme-high-contrast a,
body.theme-high-contrast h1,
body.theme-high-contrast h2,
body.theme-high-contrast h3,
body.theme-high-contrast h4,
body.theme-high-contrast strong {
    color: #FFFFFF !important;
}

body.theme-high-contrast p,
body.theme-high-contrast span,
body.theme-high-contrast li {
    color: var(--mk-text-muted) !important;
}

body.theme-high-contrast .btn-primary {
    background-color: var(--mk-primary) !important;
    color: #121212 !important;
    border: 2px solid #FFFFFF !important;
}

body.theme-high-contrast .btn-soft {
    background-color: var(--mk-surface-soft) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--mk-border) !important;
}

/* Accessibility Control Floating Panel Styler */
.accessibility-floating-trigger {
    position: fixed;
    bottom: var(--space-6);
    left: var(--space-6);
    background-color: var(--mk-primary);
    color: #fff;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    z-index: 9999;
    border: 2px solid #fff;
    transition: var(--transition-fast);
    font-size: 1.5rem;
}

.accessibility-floating-trigger:hover {
    transform: scale(1.08);
    background-color: var(--mk-primary-hover);
}

.accessibility-panel-box {
    position: fixed;
    bottom: calc(var(--space-6) + 60px);
    left: var(--space-6);
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--radius-lg);
    width: min(320px, 100% - 32px);
    padding: var(--space-5);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    display: none;
    flex-direction: column;
    gap: var(--space-3);
    border: 2px solid #fff;
    animation: slideUpAcc 0.25s ease-out;
}

@keyframes slideUpAcc {
    from { transform: translateY(10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.accessibility-panel-box h4 {
    margin-bottom: var(--space-1);
    font-size: 1.05rem;
    color: var(--mk-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.accessibility-option-btn {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--mk-border);
    background: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--transition-fast);
    text-align: left;
    width: 100%;
}

.accessibility-option-btn:hover {
    background-color: var(--mk-surface-soft);
    border-color: var(--mk-primary);
}

.accessibility-option-btn.active {
    background-color: var(--mk-primary-soft);
    border-color: var(--mk-primary);
    color: var(--mk-primary);
}