<?php
/**
 * The header for theme: Hussein
 * Theme Name: Hussein
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?> dir="rtl">
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="<?php echo esc_url(get_stylesheet_uri()); ?>">
    
    <?php wp_head(); ?>

    <style>
    /* ============================================================
       نظام قائمة إمكانية الوصول المطوية (Collapse Dropdown)
    ============================================================ */
    .hussein-a11y-container {
        position: relative;
        display: inline-block;
        font-family: 'Cairo', Tahoma, Arial, sans-serif;
    }
    .hussein-a11y-btn-toggle {
        background: #0284c7;
        color: #ffffff;
        border: none;
        border-radius: 25px;
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        transition: background 0.2s ease;
    }
    .hussein-a11y-btn-toggle:hover, .hussein-a11y-btn-toggle:focus {
        background: #0369a1;
        outline: 2px solid #38bdf8;
    }
    
    /* القائمة المنسدلة عند الفتح */
    .hussein-a11y-dropdown {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        width: 300px;
        max-height: 80vh;
        overflow-y: auto;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        box-shadow: 0 12px 28px rgba(0,0,0,0.22);
        padding: 16px;
        z-index: 999999;
        text-align: right;
    }
    .hussein-a11y-dropdown[hidden] {
        display: none !important;
    }
    .hussein-a11y-title {
        font-size: 15px;
        font-weight: 700;
        color: #0f172a;
        border-bottom: 2px solid #e2e8f0;
        padding-bottom: 8px;
        margin-bottom: 12px;
    }
    .hussein-a11y-row {
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 1px dashed #e2e8f0;
    }
    .hussein-row-label {
        font-size: 13px;
        font-weight: 700;
        color: #334155;
        margin-bottom: 6px;
        display: block;
    }
    
    /* تحكم النسبة المئوية للخط */
    .hussein-font-controls {
        display: flex;
        gap: 6px;
    }
    .hussein-font-step-btn {
        flex: 1;
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        padding: 6px;
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
    }
    .hussein-font-step-btn:hover {
        background: #e2e8f0;
    }
    
    /* الراديو لأنماط الإضاءة والتباين */
    .hussein-radios {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        font-size: 13px;
        color: #1e293b;
    }
    .hussein-radios label {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
    }
    
    /* دوائر ألوان القراءة */
    .hussein-colors {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .hussein-color-ball {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid #94a3b8;
        cursor: pointer;
        transition: transform 0.15s;
    }
    .hussein-color-ball.active {
        border-color: #0284c7;
        outline: 2px solid #0284c7;
        transform: scale(1.15);
    }
    
    /* مربعات الاختيار */
    .hussein-checks {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .hussein-cb-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #334155;
        cursor: pointer;
    }
    .hussein-cb-item input {
        width: 17px;
        height: 17px;
        accent-color: #0284c7;
    }
    
    /* أزرار الإجراءات */
    .hussein-actions {
        display: flex;
        gap: 8px;
        margin-top: 14px;
    }
    .hussein-btn-apply {
        flex: 2;
        background: #16a34a;
        color: #ffffff;
        border: none;
        border-radius: 6px;
        padding: 8px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }
    .hussein-btn-apply:hover {
        background: #15803d;
    }
    .hussein-btn-reset {
        flex: 1;
        background: #f8fafc;
        color: #475569;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        padding: 8px;
        font-size: 13px;
        cursor: pointer;
    }
    .hussein-btn-reset:hover {
        background: #e2e8f0;
    }

    /* تأثيرات التيسير المطبقة على عناصر القالب */
    body.h-dark { background-color: #121212 !important; color: #e5e5e5 !important; }
    body.h-dark article, body.h-dark header, body.h-dark .site-header { background-color: #1e1e1e !important; color: #f5f5f5 !important; }
    body.h-light { background-color: #ffffff !important; color: #000000 !important; }
    body.h-contrast { background-color: #000000 !important; color: #ffff00 !important; }
    body.h-contrast * { background-color: #000000 !important; color: #ffff00 !important; border-color: #ffff00 !important; }
    body.h-readable * { font-family: 'Arial', Tahoma, sans-serif !important; }
    body.h-links a { text-decoration: underline !important; background-color: #fef08a !important; color: #000000 !important; font-weight: 700 !important; }
    body.h-spacing p, body.h-spacing article { line-height: 2.3 !important; word-spacing: 2px !important; }
    body.h-gray { filter: grayscale(100%) !important; }
    </style>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<header class="site-header" style="background:#ffffff; border-bottom:1px solid #e2e8f0; padding:15px 0;">
    <div class="container" style="max-width:1200px; margin:0 auto; padding:0 20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:15px;">
        
        <!-- عنوان الموقع والهوية -->
        <div class="site-branding">
            <h1 style="margin:0; font-size:24px; font-weight:800;">
                <a href="<?php echo esc_url(home_url('/')); ?>" style="color:#0f172a; text-decoration:none;">
                    <?php bloginfo('name'); ?>
                </a>
            </h1>
            <p style="margin:4px 0 0; font-size:13px; color:#64748b;"><?php bloginfo('description'); ?></p>
        </div>

        <!-- القائمة وشريط إمكانية الوصول المنسدل -->
        <div style="display:flex; align-items:center; gap:20px;">
            <nav class="main-navigation">
                <?php
                wp_nav_menu(array(
                    'theme_location' => 'primary',
                    'menu_class'     => 'primary-menu',
                    'container'      => false,
                    'fallback_cb'    => false,
                ));
                ?>
            </nav>

            <!-- القائمة المنسدلة لإمكانية الوصول -->
            <div id="hussein-a11y-box" class="hussein-a11y-container">
                <button type="button" id="hussein-a11y-toggle" class="hussein-a11y-btn-toggle" aria-expanded="false" aria-controls="hussein-a11y-menu">
                    <span aria-hidden="true">♿</span>
                    <span>إمكانية الوصول</span>
                </button>

                <div id="hussein-a11y-menu" class="hussein-a11y-dropdown" hidden>
                    <div class="hussein-a11y-title">خيارات التيسير والعرض</div>

                    <!-- 1. التحكم بنسبة الخط المئوية -->
                    <div class="hussein-a11y-row">
                        <span class="hussein-row-label">حجم الخط (<span id="h-font-percent">100%</span>):</span>
                        <div class="hussein-font-controls">
                            <button type="button" id="h-font-dec" class="hussein-font-step-btn" aria-label="تصغير الخط">- A</button>
                            <button type="button" id="h-font-reset" class="hussein-font-step-btn" aria-label="الحجم الافتراضي">100%</button>
                            <button type="button" id="h-font-inc" class="hussein-font-step-btn" aria-label="تكبير الخط">+ A</button>
                        </div>
                    </div>

                    <!-- 2. نمط الإضاءة والتباين -->
                    <div class="hussein-a11y-row">
                        <span class="hussein-row-label">نمط العرض:</span>
                        <div class="hussein-radios">
                            <label><input type="radio" name="h_theme" value="default" checked> عادي</label>
                            <label><input type="radio" name="h_theme" value="dark"> داكن</label>
                            <label><input type="radio" name="h_theme" value="light"> ساطع</label>
                            <label><input type="radio" name="h_theme" value="contrast"> تباين عالي</label>
                        </div>
                    </div>

                    <!-- 3. ألوان خلفية القراءة -->
                    <div class="hussein-a11y-row">
                        <span class="hussein-row-label">لون خلفية القراءة:</span>
                        <div class="hussein-colors">
                            <button type="button" class="hussein-color-ball" data-bg="#ffffff" data-fg="#111827" style="background:#ffffff;" title="أبيض"></button>
                            <button type="button" class="hussein-color-ball" data-bg="#fbf0d9" data-fg="#3d2b1f" style="background:#fbf0d9;" title="بيج مريح"></button>
                            <button type="button" class="hussein-color-ball" data-bg="#e0f2fe" data-fg="#0c4a6e" style="background:#e0f2fe;" title="أزرق هادئ"></button>
                            <button type="button" class="hussein-color-ball" data-bg="#18181b" data-fg="#f4f4f5" style="background:#18181b;" title="داكن"></button>
                        </div>
                    </div>

                    <!-- 4. مربعات الاختيار (Checkboxes) -->
                    <div class="hussein-a11y-row">
                        <span class="hussein-row-label">خيارات إضافية:</span>
                        <div class="hussein-checks">
                            <label class="hussein-cb-item">
                                <input type="checkbox" id="h-chk-readable">
                                <span>خط عالي الوضوح</span>
                            </label>
                            <label class="hussein-cb-item">
                                <input type="checkbox" id="h-chk-links">
                                <span>تسطير وتمييز الروابط</span>
                            </label>
                            <label class="hussein-cb-item">
                                <input type="checkbox" id="h-chk-spacing">
                                <span>زيادة تباعد الأسطر</span>
                            </label>
                            <label class="hussein-cb-item">
                                <input type="checkbox" id="h-chk-gray">
                                <span>تدرج رمادي</span>
                            </label>
                        </div>
                    </div>

                    <!-- أزرار تطبيق وإعادة ضبط -->
                    <div class="hussein-actions">
                        <button type="button" id="h-btn-apply" class="hussein-btn-apply">تطبيق</button>
                        <button type="button" id="h-btn-reset" class="hussein-btn-reset">إعادة ضبط</button>
                    </div>
                </div>
            </div>
            <!-- نهاية أداة إمكانية الوصول -->

        </div>
    </div>
</header>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var toggleBtn = document.getElementById('hussein-a11y-toggle');
    var menu      = document.getElementById('hussein-a11y-menu');
    var applyBtn  = document.getElementById('h-btn-apply');
    var resetBtn  = document.getElementById('h-btn-reset');

    var fontVal   = document.getElementById('h-font-percent');
    var fontInc   = document.getElementById('h-font-inc');
    var fontDec   = document.getElementById('h-font-dec');
    var fontReset = document.getElementById('h-font-reset');

    var chkReadable = document.getElementById('h-chk-readable');
    var chkLinks    = document.getElementById('h-chk-links');
    var chkSpacing  = document.getElementById('h-chk-spacing');
    var chkGray     = document.getElementById('h-chk-gray');

    var zoomLevel = 100;
    var customBg = '';
    var customFg = '';

    // فتح وإغلاق القائمة (Collapse)
    toggleBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        var isClosed = menu.hasAttribute('hidden');
        if (isClosed) {
            menu.removeAttribute('hidden');
            toggleBtn.setAttribute('aria-expanded', 'true');
        } else {
            menu.setAttribute('hidden', '');
            toggleBtn.setAttribute('aria-expanded', 'false');
        }
    });

    // إغلاق القائمة عند النقر بالخارج
    document.addEventListener('click', function(e) {
        if (!document.getElementById('hussein-a11y-box').contains(e.target)) {
            menu.setAttribute('hidden', '');
            toggleBtn.setAttribute('aria-expanded', 'false');
        }
    });

    // التحكم الرقمي بالخط
    function showZoom() { fontVal.innerText = zoomLevel + '%'; }
    fontInc.addEventListener('click', function() { if (zoomLevel < 180) { zoomLevel += 10; showZoom(); } });
    fontDec.addEventListener('click', function() { if (zoomLevel > 80) { zoomLevel -= 10; showZoom(); } });
    fontReset.addEventListener('click', function() { zoomLevel = 100; showZoom(); });

    // اختيار الخلفية
    var balls = menu.querySelectorAll('.hussein-color-ball');
    balls.forEach(function(ball) {
        ball.addEventListener('click', function() {
            balls.forEach(function(b){ b.classList.remove('active'); });
            ball.classList.add('active');
            customBg = ball.getAttribute('data-bg');
            customFg = ball.getAttribute('data-fg');
        });
    });

    function applyThemeClasses(theme) {
        document.body.classList.remove('h-dark', 'h-light', 'h-contrast');
        if (theme === 'dark') document.body.classList.add('h-dark');
        if (theme === 'light') document.body.classList.add('h-light');
        if (theme === 'contrast') document.body.classList.add('h-contrast');
    }

    // استعادة الإعدادات المحفوظة
    var saved = JSON.parse(localStorage.getItem('hussein_a11y_prefs') || 'null');
    if (saved) {
        zoomLevel = saved.zoom || 100;
        showZoom();
        document.documentElement.style.fontSize = zoomLevel + '%';

        var r = document.querySelector('input[name="h_theme"][value="' + (saved.theme || 'default') + '"]');
        if (r) r.checked = true;
        applyThemeClasses(saved.theme || 'default');

        if (saved.bg && saved.theme === 'default') {
            customBg = saved.bg;
            customFg = saved.fg;
            document.body.style.backgroundColor = saved.bg;
            document.body.style.color = saved.fg;
        }

        chkReadable.checked = !!saved.readable;
        chkLinks.checked = !!saved.links;
        chkSpacing.checked = !!saved.spacing;
        chkGray.checked = !!saved.gray;

        document.body.classList.toggle('h-readable', chkReadable.checked);
        document.body.classList.toggle('h-links', chkLinks.checked);
        document.body.classList.toggle('h-spacing', chkSpacing.checked);
        document.body.classList.toggle('h-gray', chkGray.checked);
    }

    // زر التطبيق
    applyBtn.addEventListener('click', function() {
        document.documentElement.style.fontSize = zoomLevel + '%';

        var themeChoice = document.querySelector('input[name="h_theme"]:checked').value;
        applyThemeClasses(themeChoice);

        if (customBg && themeChoice === 'default') {
            document.body.style.backgroundColor = customBg;
            document.body.style.color = customFg;
        } else {
            document.body.style.backgroundColor = '';
            document.body.style.color = '';
        }

        document.body.classList.toggle('h-readable', chkReadable.checked);
        document.body.classList.toggle('h-links', chkLinks.checked);
        document.body.classList.toggle('h-spacing', chkSpacing.checked);
        document.body.classList.toggle('h-gray', chkGray.checked);

        localStorage.setItem('hussein_a11y_prefs', JSON.stringify({
            zoom: zoomLevel,
            theme: themeChoice,
            bg: (themeChoice === 'default') ? customBg : '',
            fg: (themeChoice === 'default') ? customFg : '',
            readable: chkReadable.checked,
            links: chkLinks.checked,
            spacing: chkSpacing.checked,
            gray: chkGray.checked
        }));

        menu.setAttribute('hidden', '');
        toggleBtn.setAttribute('aria-expanded', 'false');
    });

    // زر إعادة الضبط
    resetBtn.addEventListener('click', function() {
        zoomLevel = 100;
        showZoom();
        document.documentElement.style.fontSize = '';

        document.querySelector('input[name="h_theme"][value="default"]').checked = true;
        applyThemeClasses('default');

        customBg = ''; customFg = '';
        document.body.style.backgroundColor = '';
        document.body.style.color = '';
        balls.forEach(function(b){ b.classList.remove('active'); });

        chkReadable.checked = false;
        chkLinks.checked = false;
        chkSpacing.checked = false;
        chkGray.checked = false;

        document.body.classList.remove('h-readable', 'h-links', 'h-spacing', 'h-gray');
        localStorage.removeItem('hussein_a11y_prefs');
    });
});
</script>