/* صفحة المشاركة الإلكترونية.
   المشترك (الهيدر/الناف/الفوتر) في css/site.css.

   التصميم مقتبس من صفحة المشاركة الإلكترونية في جامعة الملك خالد
   (النسخة المحفوظة)، بالقياس من مِرآتها بأنماطها:

       الشريط       خلفية #f3fcf6، حشو 40px 0
       العنوان H1   30px/700 lh38px، #161616
       عنوان القسم  h2 30px/700 lh38px، #212529، هامش 0
       فقرة المقدمة 16px/400 lh24px، #212529، محاذاة البداية
       الفجوة بين العنوان وفقرته 16px
       كرت الموضوع  خلفية #fff، حد 1px solid #d2d6db، زوايا 16px،
                    بلا ظل، حشو 15px، وفجوة داخلية 24px
       عنوان الكرت  18px/700 lh28px، #1f2a37
       زر السهم     56×40، خلفية #f3f4f6، زوايا 6px، بلا حدّ،
                    عند نهاية السطر (يسار في RTL)
       الشبكة       فجوة 32px وهامش علوي 32px

   المرجع يعرض ثمانية مواضيع في أربعة أعمدة؛ وعندنا ثلاثة فجعلنا
   الأعمدة ثلاثة. والكروت تنقل إلى أقسام الصفحة نفسها لا إلى صفحات
   مستقلة، فالمحتوى كلّه هنا. */

.ep-page {
    padding: 0 0 72px;
}

/* ===== الشريط العلوي ===== */
.ep-hero {
    position: relative;
    background: #f3fcf6;
    padding: 40px 0;
    margin-bottom: 40px;
    box-shadow: 0 0 0 100vmax #f3fcf6;
    clip-path: inset(0 -100vmax);
}

.ep-crumb {
    margin-bottom: 16px;
    font-size: .875rem;
    line-height: 1.5;
    color: #161616;
}

.ep-crumb a,
.ep-crumb a:link,
.ep-crumb a:visited {
    color: #161616;
    text-decoration: none;
}

.ep-crumb a:hover {
    text-decoration: underline;
}

.ep-crumb .sep {
    margin: 0 8px;
    color: #6c737f;
}

.ep-crumb .current {
    color: #4b5563;
}

.ep-title {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.27;
    color: #161616;
}

/* ===== المواضيع ===== */
.ep-topics {
    margin-bottom: 56px;
}

.ep-h2 {
    margin: 0 0 16px;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.27;
    color: #212529;
}

/* UDesign يورّث text-align: justify فيتباعد الكلام في العربية */
.ep-lead {
    margin: 0;
    max-width: 95ch;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    color: #212529;
    text-align: start;
}

.ep-grid {
    display: grid;
    /* أربعة أعمدة كالمرجع: بها يبلغ عرض الكرت 297px فيطابق
       شكله شكل المثال، وإن كانت مواضيعنا ثلاثة. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin-top: 32px;
    padding: 0;
    list-style: none;
}

/* لا justify-content: space-between — المرجع يترك الارتفاع
   طبيعياً والفجوة 24px هي التي تباعد العنوان عن السهم، فيخرج
   الكرت 124px كما قِيس. */
.ep-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 15px;
    border: 1px solid #d2d6db;
    border-radius: 16px;
    background: #fff;
}

/* بلا هافر أخضر: أُزيل بطلب — والمرجع نفسه لا يغيّر حدَّ
   الكرت عند المرور. ويبقى :focus-visible لأنه تركيزُ لوحة
   المفاتيح لا مرورُ الفأرة، وبه يُعرف موضع المؤشّر. */

.ep-card__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.56;
    color: #1f2a37;
}

/* زر السهم عند نهاية السطر، والرابط يغطّي الكرت كلّه كي تكون
   مساحة النقر كاملة — والاسم المقروء يأتي من عنوان الكرت. */
/* اللون على :link و:visited أيضاً: تخصيصهما (0,1,1) يغلب
   تخصيص الصنف وحده (0,1,0)، ولولا ذلك ورث السهمُ أخضرَ الروابط
   بدل داكن المرجع. */
.ep-card__go,
.ep-card__go:link,
.ep-card__go:visited {
    position: relative;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 40px;
    border: 0;
    border-radius: 6px;
    background: #f3f4f6;
    color: #1f2a37;
    text-decoration: none;
}

/* الرابط يتمدّد على الكرت كلّه فتكون مساحة النقر كاملة، واسمه
   المقروء يأتي من عنوان الكرت عبر aria-labelledby. */
.ep-card__go::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
}

/* بلا هافر على السهم أيضاً بطلب — والمرجع يغيّر خلفيته
   إلى رمادي 200 عند المرور، فهذا خروج مقصود عنه. */

.ep-card__go:focus-visible {
    outline: 2px solid #1b8354;
    outline-offset: 2px;
}

/* سهم المرجع 18×12: شفرة طويلة برأس صغير. كان عندي 18×18
   فبدا مربّعاً برأس كبير — وهذا فرق الشكل الذي لوحظ. */
.ep-card__go svg {
    width: 18px;
    height: 12px;
}

/* ===== أقسام المحتوى ===== */
.ep-section {
    padding: 0;
    margin-bottom: 48px;
    scroll-margin-top: 24px;
}

.ep-section:last-child {
    margin-bottom: 0;
}

.ep-section__title {
    margin: 0 0 16px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    color: #161616;
}

.ep-sub {
    margin: 28px 0 10px;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.7;
    color: #1f2a37;
}

.ep-section p {
    margin: 0 0 12px;
    max-width: 95ch;
    font-size: 1rem;
    line-height: 1.9;
    color: #1f2a37;
    text-align: start;
}

.ep-list {
    margin: 0 0 12px;
    padding-inline-start: 24px;
    list-style: disc;
    max-width: 95ch;
}

.ep-list li {
    margin-bottom: 8px;
    font-size: 1rem;
    line-height: 1.9;
    color: #1f2a37;
    text-align: start;
}

.ep-section a,
.ep-section a:link,
.ep-section a:visited {
    color: #1b8354;
    text-decoration: underline;
}

/* حسابات التواصل الرسمية */
.ep-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.ep-social__link,
.ep-social__link:link,
.ep-social__link:visited {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid #d2d6db;
    border-radius: 8px;
    background: #fff;
    color: #1f2a37;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
}

.ep-social__link svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* ===== الشاشات الأصغر ===== */
@media (max-width: 991.98px) {
    .ep-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .ep-hero {
        padding: 24px 0;
        margin-bottom: 24px;
    }

    .ep-title,
    .ep-h2 {
        font-size: 1.375rem;
    }

    .ep-section__title {
        font-size: 1.25rem;
    }

    .ep-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ===== صفحة وسائل التواصل الاجتماعي =====
   الكرت هو .ep-card نفسه بالقياس (حد 1px #d2d6db، زوايا 16px،
   حشو 15px، فجوة 24px، عنوان 18/700 #1f2a37، زرّ 56×40)، ولا
   يزيد عليه إلا مربّعُ أيقونة فوق العنوان. فلا نكرّر القواعد.

   المقيس من المرجع: .contact-avatar>div
       48×48، خلفية #f3fcf6، زوايا 99px (دائرة)، حشو 12px،
       flex بمحاذاة وسط، والرمز 24×24.
   ورمزه #067647 وهو أخضر جامعة الملك خالد؛ وعندنا #1b8354. */

/* شبكة الثلاثة: المرجع calc(32.333% - 16px) بفجوة 32px، وهو
   ثلث الصفّ تقريباً. والشبكة عندنا grid فنكتبها أعمدةً ثلاثة. */
.ep-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* بلا قسم قبلها، فالهامش العلوي 32px من المرجع يكفي */
.ep-grid--top {
    margin-top: 0;
}

.ep-card__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 12px;
    border-radius: 99px;
    background: #f3fcf6;
    color: #1b8354;
}

.ep-card__avatar svg {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}

/* سطر الإحالة إلى الضوابط: mt-32 في المرجع */
.ep-note {
    margin: 32px 0 0;
    font-size: 1rem;
    line-height: 1.75;
    color: #1f2a37;
    text-align: start;
}

.ep-note a,
.ep-note a:link,
.ep-note a:visited {
    color: #1b8354;
    text-decoration: underline;
}

/* المرجع يكسر إلى عمودين عند 980px وإلى عمود عند 760px */
@media (max-width: 991.98px) {
    .ep-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .ep-grid--3 {
        grid-template-columns: 1fr;
    }
}

/* ===== إبطال هافر UDesign الأخضر =====
   حذفُ قواعدنا وحده لم يكفِ: UDesign يلوّن كل رابط عند المرور

       a:not([class*=btn]):is(:hover) { color:#54c08a; text-decoration:underline }

   وتخصيصه (0,2,1) — a وسمٌ، و:not([class*=btn]) سمةٌ، و:is(:hover)
   صنفٌ زائف — يغلب تخصيص .ep-card__go:link (0,2,0). فكان السهم
   يخضرّ رغم أن ورقتنا لا أخضرَ فيها.

   فنرفع التخصيص إلى (0,3,1) بإضافة .ep-page الحاوية، ونثبّت لونَ
   المرور على لون السكون نفسه: فلا تغيّرَ أصلاً. ولا !important —
   التخصيص يكفي، وهو أوضح لمن يقرأ بعدنا. */

.ep-page .ep-card__go:hover,
.ep-page .ep-card__go:active {
    color: #1f2a37;
    text-decoration: none;
}

/* المسار: يبقى الخطّ تحته كما في المرجع، ويبقى لونه داكناً */
.ep-page .ep-crumb a:hover {
    color: #161616;
    text-decoration: underline;
}

/* روابط المتن وسطر الضوابط: خضراء ساكنةً، فتبقى كما هي */
.ep-page .ep-note a:hover,
.ep-page .ep-section a:hover {
    color: #1b8354;
}