/**
 * منصة المسار - الصفحة الرئيسية العامة.
 * نفس متغيرات الألوان والخطوط المستخدمة في بوابة الطالب (student-portal.css)
 * بالضبط - عشان الموقع كله يحس بهوية واحدة متسقة، مش صفحات منفصلة الشكل.
 */

:root {
    --manasa-navy: #16233F;
    --manasa-navy-2: #1E2F52;
    --manasa-blue: #2E5AAC;
    --manasa-teal: #1E9E8B;
    --manasa-amber: #E8A33D;
    --manasa-coral: #E4574C;
    --manasa-bg: #F3F6FB;
    --manasa-card: #FFFFFF;
    --manasa-line: #E3E9F3;
    --manasa-ink: #16233F;
    --manasa-ink-soft: #5B6B8C;
    --manasa-radius: 18px;
}

.manasa-site * {
    box-sizing: border-box;
}

.manasa-site {
    font-family: 'Cairo', 'Tajawal', sans-serif;
    background: var(--manasa-bg);
    color: var(--manasa-ink);
    direction: rtl;
    min-height: 100vh;
}

.manasa-site h1,
.manasa-site h2,
.manasa-site h3 {
    font-family: 'Tajawal', sans-serif;
}

/* ===== الهيدر: اللوجو + التنقّل ===== */
.manasa-site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    max-width: 1100px;
    margin: 0 auto;
}

.manasa-site-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--manasa-navy);
}

.manasa-site-logo-mark {
    font-size: 1.6rem;
}

.manasa-site-logo-text {
    font-family: 'Tajawal', sans-serif;
    font-weight: 900;
    font-size: 1.25rem;
    color: var(--manasa-navy);
}

.manasa-site-nav {
    display: flex;
    align-items: center;
    gap: 22px;
}

.manasa-site-nav a {
    text-decoration: none;
    color: var(--manasa-ink-soft);
    font-weight: 700;
    font-size: 0.95rem;
}

.manasa-site-nav a:hover {
    color: var(--manasa-blue);
}

.manasa-site-nav-cta {
    background: linear-gradient(135deg, var(--manasa-blue), var(--manasa-teal));
    color: #fff !important;
    padding: 10px 22px;
    border-radius: 12px;
}

.manasa-site-nav-cta:hover {
    opacity: 0.92;
}

/* ===== قسم البطل (Hero) ===== */
.manasa-site-hero {
    max-width: 780px;
    margin: 40px auto 60px;
    padding: 0 32px;
    text-align: center;
}

.manasa-site-hero-badge {
    display: inline-block;
    background: #FFF4E5;
    border: 1.5px solid #F0C878;
    color: #8A5A00;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 20px;
}

.manasa-site-hero h1 {
    font-weight: 900;
    font-size: 2.2rem;
    line-height: 1.4;
    color: var(--manasa-navy);
    margin-bottom: 18px;
}

.manasa-site-hero-sub {
    font-size: 1.05rem;
    color: var(--manasa-ink-soft);
    line-height: 1.8;
    margin-bottom: 30px;
}

.manasa-site-hero-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.manasa-site-btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
}

.manasa-site-btn--primary {
    background: linear-gradient(135deg, var(--manasa-blue), var(--manasa-teal));
    color: #fff;
    box-shadow: 0 8px 20px rgba(46, 90, 172, 0.25);
}

.manasa-site-btn--primary:hover {
    color: #fff;
    opacity: 0.92;
}

.manasa-site-btn--secondary {
    background: #fff;
    color: var(--manasa-navy);
    border: 1.5px solid var(--manasa-line);
}

.manasa-site-btn--secondary:hover {
    border-color: var(--manasa-blue);
    color: var(--manasa-blue);
}

/* ===== قسم المميزات ===== */
.manasa-site-features {
    max-width: 1100px;
    margin: 0 auto 60px;
    padding: 0 32px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
}

.manasa-site-feature-card {
    background: var(--manasa-card);
    border: 1px solid var(--manasa-line);
    border-radius: var(--manasa-radius);
    padding: 26px 22px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(22, 35, 63, 0.04);
}

.manasa-site-feature-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 14px;
}

.manasa-site-feature-card h3 {
    font-size: 1.05rem;
    color: var(--manasa-navy);
    margin-bottom: 8px;
}

.manasa-site-feature-card p {
    font-size: 0.88rem;
    color: var(--manasa-ink-soft);
    line-height: 1.7;
    margin: 0;
}

/* ===== الفوتر ===== */
.manasa-site-footer {
    text-align: center;
    padding: 30px 20px;
    color: var(--manasa-ink-soft);
    font-size: 0.85rem;
    border-top: 1px solid var(--manasa-line);
}

@media (max-width: 600px) {
    .manasa-site-header {
        flex-direction: column;
        gap: 14px;
        text-align: center;
    }

    .manasa-site-hero h1 {
        font-size: 1.6rem;
    }
}