/* --- Variables (تأكد من وجودها) --- */
:root {
    --primary-red: #FF0000;
    --primary-sky: #00CCFF;
    --transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-header {
    position: fixed;
    top: 0; width: 100%; z-index: 1000;
    padding: 15px 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    transition: var(--transition);
}

.header-container {
    width: 92%; max-width: 1400px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center;
}

/* Logo */
.logo-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-img { height: 50px; width: auto; object-fit: contain; }
.site-title { color: var(--primary-red); font-family: 'Oswald', sans-serif; font-weight: 900; font-size: 1.2rem; line-height: 1; }

/* Desktop Nav */
.nav-menu ul { display: flex; list-style: none; gap: 20px; }
.nav-menu a { color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; transition: 0.3s; }
.nav-menu a:hover, .nav-menu a.active { color: var(--primary-sky); }

/* Socials */
.header-left { display: flex; align-items: center; gap: 15px; }
.social-links { display: flex; gap: 8px; }
.social-links a { color: #fff; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.1); transition: 0.3s; }
.social-links a:hover { background: var(--primary-sky); color: #000; }
.menu-toggle { display: none; font-size: 24px; color: #fff; }

/* --- Mobile Responsive Fix --- */
@media (max-width: 992px) {
    .menu-toggle { display: block; z-index: 1001; }
    
    /* إخفاء الإنستجرام والواتساب كما طلبت والبقاء على فيسبوك فقط */
    .social-insta, .social-wa, .divider { display: none !important; }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%; /* مخفية تماماً خارج الشاشة */
        width: 280px; /* عرض جانبي مناسب */
        height: 100vh;
        background: #000;
        z-index: 1000;
        transition: var(--transition);
        padding: 100px 30px; /* مسافة للينكات */
        box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    }

    .nav-menu.active { right: 0; } /* تظهر عند الضغط */

    .nav-menu ul {
        flex-direction: column;
        gap: 25px;
        align-items: flex-start;
    }

    .nav-menu a { font-size: 1.2rem; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 10px; }
}

/* تصحيح شريط وردبريس */
body.admin-bar .main-header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .main-header { top: 46px; }
}