/* ============================================
   متغيرات التصميم الأساسية
   ============================================ */
:root {
    --color-bg-header: #0f172a;
    --color-border: #1e293b;
    --color-text-light: #f8fafc;
    --color-accent: #ff9900;
    --color-white: #ffffff;
    --header-max-width: 1200px;
    --header-padding-x: 20px;
    --mobile-menu-width: 280px;
}

/* --- 1. الهيدر العام للشاشات الكبيرة --- */
.site-header {
    background-color: var(--color-bg-header);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    width: 100%;
    z-index: 99999;
    box-sizing: border-box;
}

.site-header .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--header-max-width);
    margin: 0 auto;
    padding: 12px var(--header-padding-x);
    width: 100%;
    box-sizing: border-box;
}

/* الشعار */
.brand-logo {
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 800;
    white-space: nowrap;
}
.brand-logo .orange-text { color: var(--color-accent); }
.brand-logo .white-text { color: var(--color-white); }

/* القائمة للشاشات الكبيرة */
.nav-menu-list {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 25px;
    margin: 0;
    padding: 0;
}

.nav-menu-list li a {
    color: var(--color-text-light);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.2s ease;
}

.nav-menu-list li a:hover {
    color: var(--color-accent);
}

/* إخفاء أزرار الموبايل وطبقة التعتيم افتراضياً في الشاشات الكبيرة */
.mobile-toggle, 
.menu-close-btn, 
.menu-overlay {
    display: none;
}


/* --- 2. تصميم الموبايل (أقل من 991px) --- */
@media screen and (max-width: 991px) {
    
    /* زر الهامبرغر */
    .mobile-toggle {
        display: block;
        background: transparent;
        border: none;
        color: var(--color-white);
        font-size: 1.8rem;
        cursor: pointer;
        padding: 0;
        z-index: 100002;
        position: relative;
    }

    /* القائمة الجانبية المنزلقة */
    .nav-menu-wrapper {
        display: flex;
        position: fixed;
        top: 0;
        right: -100%;
        width: var(--mobile-menu-width);
        height: 100vh;
        flex-direction: column;
        background: var(--color-bg-header);
        padding: 70px 20px 25px 20px;
        box-shadow: -10px 0 30px rgba(0,0,0,0.8);
        z-index: 100005;
        transition: right 0.35s ease-in-out;
        box-sizing: border-box;
        pointer-events: none;
    }

    .nav-menu-wrapper.active {
        right: 0;
        pointer-events: auto;
    }

    .menu-close-btn {
        display: block !important;
        position: absolute;
        top: 15px;
        left: 20px;
        background: transparent;
        border: none;
        color: var(--color-white);
        font-size: 2.2rem;
        cursor: pointer;
        line-height: 1;
        padding: 0;
        z-index: 100006;
    }

    .nav-menu-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        margin-top: 15px;
    }

    .nav-menu-list li {
        width: 100%;
        border-bottom: 1px solid var(--color-border);
    }

    .nav-menu-list li a {
        font-size: 1.15rem;
        display: block;
        padding: 16px 0;
        color: var(--color-text-light) !important;
        opacity: 1 !important;
        text-decoration: none;
        width: 100%;
    }

    .nav-menu-list li a:hover {
        color: var(--color-accent) !important;
    }

    .menu-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease, visibility 0.35s ease;
        z-index: 99999;
        pointer-events: none;
    }

    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.menu-open {
        overflow: hidden;
    }
}