@import "../../fonts/Cairo/stylesheet.css";

* {
    font-family: "Cairo", sans-serif;
}

body {
    margin: 0;
    background:var(--cream);
 }

a{
    text-decoration: none;
}
.content * {
    font-size: inherit !important;
}
:root{
    --navy:#141a2b;
    --gold:#cdab63;
    --cream:#f8f6f1;
    --muted:#7c8597;


}

.turath{
    background:var(--cream);
    font-family:'Cairo',sans-serif;
    color:var(--navy);
    overflow-x:hidden;
}

/* ===================== Navbar ===================== */
.t-navbar{
    background: #fff;
    padding: .85rem 0;
    border-bottom: 1px solid #ebebeb;
    position: relative;            /* مرجع للقائمة المنسدلة بالموبايل */
}
.t-brand{
    display:flex;
    align-items:center;
    gap:.65rem;
    font-weight:800;
    font-size:1.35rem;
    color:var(--navy);
    text-decoration:none;
}
.t-brand .t-logo{
    width:44px;height:44px;
    border-radius:50%;
    background:var(--gold);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:1.25rem;font-weight:700;
}
.t-nav-links{
    display:flex;
    align-items:center;
    gap:1.9rem;
}
.t-nav-links a{
    color:#4a5364;
    font-weight:600;
    font-size:1rem;
    text-decoration:none;
    transition:color .2s;
    white-space:nowrap;
}
.t-nav-links a:hover,
.t-nav-links a.active{ color:var(--navy); }

/* زر الهمبركر (يظهر فقط بالموبايل/التاب) */
.t-burger{
    display:none;
    width:46px;height:46px;
    border:1px solid #e2e2e2;
    border-radius:.6rem;
    background:#fff;
    color:var(--navy);
    font-size:1.25rem;
    align-items:center;justify-content:center;
    cursor:pointer;
}
/* الحاوية الجامعة (روابط + أزرار): شفافة بالديسكتوب لتحافظ على نفس التوزيع */
.t-menu{ display:contents; }

.t-btn-submit{
    background:var(--navy);
    color:#fff;
    border:none;
    border-radius:50px;
    padding:.55rem 1.4rem;
    font-weight:700;
    font-size:.95rem;
}
.t-btn-submit:hover{ background:#1e2740;color:#fff; }

.t-btn-pill{
    background:transparent;
    border:1px solid var(--navy);
    color:var(--navy);
    border-radius:50px;
    padding:.55rem 1.5rem;
    font-weight:600;
    font-size:.92rem;
    white-space:nowrap;
}
.t-btn-pill:hover{ background:var(--navy);color:#fff; }

/* ===================== Hero ===================== */
.t-hero{ padding:2.5rem 0 4rem; }

.t-hero-title{
    font-weight:800;
    font-size:3.5rem;
    line-height:1.25;
    margin-bottom:1.5rem;
    letter-spacing:-1px;
}
.t-hero-title .gold{ color:var(--gold); }

.t-hero-text{
    color:var(--muted);
    font-size:1.15rem;
    line-height:2;
    max-width:520px;
    margin-bottom:2rem;
}

/* صف الباحثين */
.t-authors{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:2.2rem;
}
.t-authors-label{ color:var(--muted);font-weight:600;font-size:1rem; }
.t-avatars{ display:flex;align-items:center;direction:ltr; }
.t-avatars img,
.t-avatars .t-add{
    width:42px;height:42px;
    border-radius:50%;
    border:3px solid var(--cream);
    object-fit:cover;
    margin-left:-12px;
}
.t-avatars img:first-child,
.t-avatars .t-add:first-child{ margin-left:0; }
.t-add{
    background:var(--gold);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:1.2rem;font-weight:700;
}

/* أزرار الهيرو */
.t-hero-actions{ display:flex;gap:1rem;flex-wrap:wrap; }
.t-btn-gold{
    background:var(--gold);
    color:#fff;
    border:none;
    border-radius:50px;
    padding:.8rem 2.3rem;
    font-weight:700;
    font-size:1.05rem;
}
.t-btn-gold:hover{ background:#bf9a4f;color:#fff; }
.t-btn-ghost{
    background:transparent;
    border:1px solid #c9cdd6;
    color:var(--navy);
    border-radius:50px;
    padding:.8rem 2.3rem;
    font-weight:600;
    font-size:1.05rem;
}
.t-btn-ghost:hover{ border-color:var(--navy); }

/* صورة المجلة */
.t-hero-img-wrap{ position:relative; }
.t-hero-img{
    width:100%;
    border-radius:20px;
    display:block;
}
.t-hero-arrow{
    position:absolute;
    top:18px;
    left:-26px;            /* أعلى يسار الغلاف مثل الصورة */
    width:64px;height:64px;
    border-radius:50%;
    background:var(--cream);
    border:1px solid var(--gold);
    color:var(--gold);
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    cursor:pointer;
    transition:.2s;
}
.t-hero-arrow:hover{ background:var(--gold);color:#fff; }

/* ===================== Responsive ===================== */
@media (max-width:991.98px){
    .t-burger{ display:flex; }

    /* القائمة المنسدلة بالموبايل/التاب - مع انميشن */
    .t-menu{
        display:flex;
        position:absolute;
        top:100%; left:0; right:0;
        flex-direction:column;
        align-items:stretch;
        gap:1rem;
        background:#fff;
        border-bottom:1px solid #ebebeb;
        padding:1rem 1.5rem 1.4rem;
        box-shadow:0 12px 26px rgba(0,0,0,.07);
        z-index:1050;

        /* الحالة المغلقة */
        opacity:0;
        visibility:hidden;
        transform:translateY(-14px);
        pointer-events:none;
        transition:opacity .28s ease, transform .28s ease, visibility .28s ease;
    }
    .t-menu.open{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
    }

    .t-nav-links{
        flex-direction:column;
        align-items:stretch;
        gap:0;
        width:100%;
    }
    .t-nav-links a{
        padding:.8rem .2rem;
        border-bottom:1px solid #f1f1f1;
    }
    /* صف الأزرار يصير عمودي وعريض داخل القائمة */
    .t-menu .d-flex{
        flex-direction:column;
        align-items:stretch !important;
        gap:.6rem !important;
    }
    .t-menu .t-btn-submit,
    .t-menu .t-btn-pill{ text-align:center; }

    .t-hero-title{ font-size:2.6rem; }
    .t-hero{ padding-top:1.5rem; text-align:center; }
    .t-hero-text{ margin-inline:auto; }
    .t-authors,.t-hero-actions{ justify-content:center; }
    .t-hero-img-wrap{ margin-top:2.5rem; max-width:520px;margin-inline:auto; }
    .t-hero-arrow{ left:18px; }
}
@media (max-width:575.98px){
    .t-hero-title{ font-size:2.1rem; }
    .t-hero-actions .t-btn-gold,
    .t-hero-actions .t-btn-ghost{ flex:1; }
}
@media (prefers-reduced-motion: reduce){
    .t-menu{ transition:none; }
}