/*
 * فائل کا نام: header_styles.css
 * مقام: روٹ ڈائریکٹری
 * مقصد: تمام ویب صفحات کے ہیڈر (menu-container) کے لیے یکساں CSS فراہم کرنا
 */

/* فونٹ فیسز کو مرکزی طور پر شامل کرنا */
@font-face {
    font-family: 'JameelNooriKasheeda';
    /* نوٹ: یہ فرض کیا گیا ہے کہ روٹ ڈائریکٹری سے 'fonts' فولڈر تک کا راستہ 'fonts/' ہے */
    src: url('fonts/Lora-Italic.woff2') format('woff2');
}
@font-face {
    font-family: 'JameelNooriNastaleeq';
    src: url('fonts/HelveticaNeue-Light.woff2') format('woff2');
}

/* ہیڈر کنٹینر کے لیے CSS */
.menu-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 7vw;
    z-index: 1000;
    background-color: #0a0a24;
    overflow: hidden;
}

.nav-menu {
    display: flex;
    justify-content: left;
    align-items: center;
    height: 100%;
    padding: 0 2vw;
    position: relative;
}

.menu-logo {
    height: 7vw;
    width: auto;
    cursor: pointer;
    margin: 0.3vw;
}
.menu-logo:hover {
    transform: scale(1.1);
}

.nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin: 2vw 1vw 0 0.5vw;
}

.nav-links li a {
    font-family: 'JameelNooriNastaleeq', sans-serif;
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s;
}

.nav-links li a:hover {
    color: #ffd900;
}

.menu-toggle {
    display: none; /* Default for desktop */
    font-size: 2rem;
    cursor: pointer;
    color: white;
    padding: 0 1vw;
    position: absolute;
    left: 2vw; /* Adjusted from 0 to give space */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1004;
    background: #0a0a24; /* Match background */
}

/* موبائل رسپانسیو CSS */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Show on mobile */
    }

    .menu-container {
        height: 12vw; /* indexen.html سے لیا گیا */
        position: fixed;
        z-index: 1003;
        overflow: visible;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 12vw; /* Adjusted to match menu-container height */
        left: 0;
        width: 80%;
        min-width: 200px;
        background-color: #0a0a24;
        padding: 2vw;
        z-index: 1001;
        border-radius: 0.4rem;
        box-sizing: border-box;
        transition: all 0.3s ease;
        opacity: 0;
        transform: translateX(100%);
    }

    .nav-links.active {
        display: flex;
        opacity: 1;
        transform: translateX(0);
    }

    .nav-links li {
        width: 100%;
        padding: 1vw 0;
    }

    .nav-links li a {
        display: block;
        padding: 0.5vw 1vw;
        color: white;
        text-decoration: none;
        font-size: 1.2rem;
        font-family: 'JameelNooriNastaleeq', sans-serif;
    }
    
    .nav-menu {
        justify-content: flex-start; /* Align items from left */
        position: relative;
        z-index: 1000;
        height: 100%;
    }

    .menu-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        height: 10vw; /* indexen.html سے لیا گیا */
        z-index: 999;
    }
}

/* دیگر فائلوں میں موجود موبائل رسپانسیو کے اختلافات کو مدنظر رکھتے ہوئے،
   indexen.html کے موبائل اسٹائل کو ترجیح دی گئی ہے کیونکہ یہ زیادہ مکمل لگ رہا ہے۔
   اگر کسی فائل میں ہیڈر کے بعد کے عناصر (جیسے h1 کا margin-top) کو ایڈجسٹ کرنے کی ضرورت ہو تو وہ
   اس فائل کے اپنے CSS میں کیا جائے گا، نہ کہ اس مرکزی فائل میں۔
*/