/* ==========================================================================
   صفحة الوظيفة، وصفحتا الشركات، وصفحة «احمِ نفسك».

   كل لون من tokens.css بلا استثناء. أسطح ‏--surface على خلفية ‏--bg،
   والفصل بخطوط رفيعة لا بظلال، و‏--lift عند التفاعل وحده.
   قواعد الرئيسية كانت هنا وانتقلت إلى home.css؛ نسخة واحدة لا تنحرف.
   ========================================================================== */

/* --------------------------------------------------------------------------
   غلاف الصفحة

   لا شيء يمتدّ بعرض النافذة: عرض مقيَّد وحشو داخليّ منطقيّ يصلح
   للاتجاهين. الحشو الرأسي أسفل أكبر منه أعلى ليتنفّس آخر القسم.
   -------------------------------------------------------------------------- */

.jl-job,
.jl-similar,
.jl-company,
.jl-companies-page,
.jl-page,
.jl-protect {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.jl-page {
    padding-block: var(--space-5) var(--space-6);
}

/* --------------------------------------------------------------------------
   المتن المحرَّر

   نصٌّ يكتبه إنسان في المحرِّر لا يحمل أصنافًا، فالتنسيق على العناصر
   نفسها. والعرض بـ ‏--measure لا ‏--container: سطرٌ بعرض الشاشة تضيع
   العين في العودة من آخره إلى أوّل التالي، وسياسة خصوصية لا تُقرأ
   سياسةٌ لم تُكتب.
   -------------------------------------------------------------------------- */

.jl-prose {
    max-width: var(--measure);
    font-size: 16px;
    line-height: 1.85;
    color: var(--ink);
}

.jl-prose > * + * {
    margin-block-start: var(--space-4);
}

.jl-prose h2 {
    margin-block: var(--space-6) var(--space-3);
    padding-block-start: var(--space-4);
    border-block-start: var(--hairline);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(20px, 2.2vw, 25px);
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.jl-prose h3 {
    margin-block: var(--space-5) var(--space-2);
    font-size: 17px;
    font-weight: 700;
}

/* أوّل عنوان لا يحتاج خطًّا يفصله عمّا فوقه: فوقه ترويسة الصفحة. */
.jl-prose > :first-child {
    margin-block-start: 0;
    padding-block-start: 0;
    border-block-start: 0;
}

.jl-prose ul,
.jl-prose ol {
    padding-inline-start: var(--space-5);
}

.jl-prose li + li {
    margin-block-start: var(--space-2);
}

.jl-prose a {
    color: var(--accent-text);
    text-underline-offset: 3px;
}

.jl-prose strong {
    font-weight: 700;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   صفحة غير موجودة
   -------------------------------------------------------------------------- */

.jl-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ترويسة صفحة عامّة: عنوان وسطر شارح، يفصلهما عن المحتوى خطّ رفيع. */

.jl-page-head {
    margin-block-end: var(--space-5);
    padding-block-end: var(--space-4);
    border-block-end: var(--hairline);
}

.jl-page-head__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1.18;
    letter-spacing: -0.025em;
    color: var(--ink);
}

.jl-page-head__note {
    margin: var(--space-3) 0 0;
    max-width: var(--measure);
    font-size: 15px;
    line-height: 1.75;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   صفحة الوظيفة — أهمّ صفحة في الموقع
   -------------------------------------------------------------------------- */

.jl-job {
    padding-block: var(--space-5) var(--space-6);
}

/*
 * الإعلان المنتهي: هذا خطأ فعليّ في وجه الزائر — الموضع الوحيد الذي
 * يظهر فيه ‏--accent-2 في هذه الصفحات. p الأساسي مقيَّد بعرض النصّ،
 * والتنبيه يجب أن يمتدّ بعرض العمود كلّه.
 */
.jl-job__expired {
    max-width: none;
    margin: 0 0 var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--accent-2);
    border-inline-start: 3px solid var(--accent-2);
    border-radius: var(--radius-lg);
    color: var(--accent-2);
    font-weight: 500;
}

/* --- كتلة الترويسة: المسمّى والشركة والحقائق الحاسمة --- */

.jl-job__head {
    padding: var(--space-6);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
}

.jl-job__company {
    max-width: none;
    margin: 0 0 var(--space-2);
    font-size: 15px;
    font-weight: 500;
    color: var(--muted);
}

.jl-job__company a {
    color: var(--accent-text);
    text-decoration: none;
}

.jl-job__company a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jl-job__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.18;
    letter-spacing: -0.025em;
    color: var(--ink);
    text-wrap: balance;
}

/* الوسوم: حقائق يقرؤها الزائر قبل أن يقرّر النزول إلى الوصف. */

.jl-job__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.jl-job__tag {
    padding: 4px var(--space-3);
    background: var(--surface-2);
    border: var(--hairline);
    border-radius: 999px;
    font-size: 13px;
    color: var(--ink-soft);
}

/* الأيقونة أكبر قليلًا من نصّ الوسم: عند 13px تفقد المعالم وتصير لطخة. */
.jl-job__tag .jl-icon {
    inline-size: 14px;
    block-size: 14px;
}

.jl-job__tag--remote {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-text);
    font-weight: 500;
}

/* الوسم كلّه ملوَّن، فلا داعي لتخفيت أيقونته كما في الوسوم المحايدة. */
.jl-job__tag--remote .jl-icon {
    opacity: 1;
}

.jl-job__pay {
    max-width: none;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    padding-block-start: var(--space-4);
    border-block-start: var(--hairline);
}

.jl-job__pay-label {
    font-size: 13px;
    color: var(--muted);
}

/*
 * ‏bdi في الترميز يعزل المدى، وهذه القاعدة تضبط شكله فقط:
 * خطّ العناوين وأرقام مصطفّة ليقرأ «٩٬٠٠٠–١٢٬٠٠٠» رقمًا واحدًا مرتّبًا.
 */
.jl-job__pay-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* --- الجسم: وصف عريض ولوح جانبي ثابت --- */

.jl-job__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    margin-block-start: var(--space-5);
}

@media (min-width: 900px) {
    .jl-job__body {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: var(--space-6);
        align-items: start;
    }
}

.jl-job__content {
    padding: var(--space-6);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    font-size: 16px;
    line-height: 1.85;
    color: var(--ink-soft);
}

/* عرض السطر مقيَّد داخل اللوح: العمود أعرض من راحة القراءة. */
.jl-job__content > * {
    max-width: var(--measure);
}

.jl-job__content > :first-child {
    margin-block-start: 0;
}

.jl-job__content > :last-child {
    margin-block-end: 0;
}

.jl-job__content h2,
.jl-job__content h3,
.jl-job__content h4 {
    margin-block: var(--space-6) var(--space-3);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.jl-job__content h2 {
    font-size: 20px;
}

.jl-job__content h3 {
    font-size: 17px;
}

.jl-job__content h4 {
    font-size: 15px;
}

.jl-job__content ul,
.jl-job__content ol {
    margin: 0 0 var(--space-4);
    padding-inline-start: var(--space-5);
}

.jl-job__content li {
    margin-block-end: var(--space-2);
}

.jl-job__content li::marker {
    color: var(--line-strong);
}

.jl-job__content a {
    color: var(--accent-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jl-job__content strong {
    color: var(--ink);
    font-weight: 700;
}

.jl-job__content blockquote {
    margin: 0 0 var(--space-4);
    padding-inline-start: var(--space-4);
    border-inline-start: 3px solid var(--line-strong);
    color: var(--muted);
}

/* --- اللوح الجانبي --- */

.jl-job__facts {
    align-self: start;
    padding: var(--space-5);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
}

/*
 * اللصق على الشاشات العريضة وحدها: على الهاتف يتراصّ اللوح تحت الوصف
 * فلا شيء يلتصق به، ولصقه هناك يسرق ارتفاع الشاشة من النصّ.
 */
@media (min-width: 900px) {
    .jl-job__facts {
        position: sticky;
        inset-block-start: var(--space-5);
    }
}

.jl-job__facts-title {
    margin: 0 0 var(--space-4);
    padding-block-end: var(--space-3);
    border-block-end: var(--hairline);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--muted);
}

.jl-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0;
    margin: 0 0 var(--space-5);
    font-size: 14px;
}

.jl-facts dt {
    padding-block: var(--space-3);
    color: var(--muted);
}

.jl-facts dd {
    margin: 0;
    padding-block: var(--space-3);
    color: var(--ink);
    font-weight: 500;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* خطّ فاصل بين الصفوف لا حول كلّ خليّة: أوّل صفّ بلا خطّ علويّ. */
.jl-facts dt:not(:first-of-type),
.jl-facts dd:not(:first-of-type) {
    border-block-start: var(--hairline);
}

/* --------------------------------------------------------------------------
   التقديم — الفعل الأهمّ في الموقع، ولذلك وحده يحمل لون التمييز مملوءًا
   -------------------------------------------------------------------------- */

.jl-apply {
    display: block;
    inline-size: 100%;
    padding: var(--space-4) var(--space-5);
    border: 0;
    border-radius: var(--radius);
    background: var(--accent);

    /* ‏--accent-ink لا ‏--nav-ink: الأخير يتبع لون الشريط لا لون الزرّ. */
    color: var(--accent-ink);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.15s ease, filter 0.15s ease;
}

.jl-apply:hover {
    filter: brightness(1.08);
    box-shadow: var(--lift);
}

/* على سطح ممتلئ بالهوية لا معنى لتخفيت الأيقونة: حبرها هو حبر الزرّ. */
.jl-apply .jl-icon {
    opacity: 1;
}

/*
 * سهم السبريت يشير يسارًا — وهو اتجاه «إلى الأمام» في صفحة عربية.
 * في الاتجاه اللاتيني يصير رجوعًا، فيُقلب أفقيًّا ليظلّ يعني التقدّم.
 */
[dir='ltr'] .jl-apply .jl-icon {
    transform: scaleX(-1);
}

.jl-apply__note {
    max-width: none;
    margin: var(--space-3) 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
    text-align: center;
}

.jl-apply__note a {
    color: var(--accent-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/*
 * حالة تُخبر ولا تخيف: «سبق أن تقدّمت» و«ارفع سيرتك أولًا» ليستا خطأً،
 * فتبقيان رماديّتين. الخطأ الفعليّ وحده — الموسوم role="alert" —
 * يأخذ ‏--accent-2.
 */
.jl-apply__soon {
    max-width: none;
    margin: 0 0 var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2);
    border: var(--hairline);
    border-radius: var(--radius);
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.jl-apply__soon[role='alert'] {
    border-color: var(--accent-2);
    color: var(--accent-2);
}

/* الحفظ فعل ثانويّ: مؤطَّر لا مملوء، حتى لا ينازع زرّ التقديم. */
.jl-job__facts .jl-save {
    margin: var(--space-3) 0 0;
}

.jl-job__facts .jl-save__button {
    inline-size: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.jl-job__facts .jl-save__button:hover {
    border-color: var(--accent);
    color: var(--accent-text);
}

.jl-job__facts .jl-save__button[aria-pressed='true'] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 500;
}

/* --- الإبلاغ: مطويّ أسفل الوصف، متاح ولا يزاحم --- */

.jl-job .jl-report {
    margin: var(--space-4) 0 0;
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    font-size: 14px;
}

.jl-job .jl-report summary {
    color: var(--muted);
    cursor: pointer;
}

/* الأحمر لا يُستعمل زينةً حتى في التحويم؛ الأزرق يكفي للإشارة. */
.jl-job .jl-report summary:hover {
    color: var(--accent-text);
}

.jl-job .jl-report[open] summary {
    margin-block-end: var(--space-4);
    padding-block-end: var(--space-3);
    border-block-end: var(--hairline);
    color: var(--ink);
    font-weight: 500;
}

.jl-job .jl-report button[type='submit'] {
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.jl-job .jl-report button[type='submit']:hover {
    border-color: var(--accent);
    color: var(--accent-text);
}

.jl-job .jl-report .jl-field__hint a {
    color: var(--accent-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- وظائف مشابهة --- */

.jl-similar {
    padding-block: 0 var(--space-8);
}

.jl-similar__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: var(--space-4);
    padding-block-end: var(--space-3);
    border-block-end: var(--hairline);
}

.jl-similar__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.jl-similar__more {
    color: var(--accent-text);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.jl-similar__more:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jl-similar__list {
    display: grid;
    gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   صفحة الشركة
   -------------------------------------------------------------------------- */

.jl-company {
    padding-block: var(--space-5) var(--space-8);
}

/* --------------------------------------------------------------------------
   شريط الغلاف

   نقشٌ من الرموز وحدها، هيئته مشتقّة من اسم الشركة فتثبت لها. وارتفاعه
   مقصود القِصَر: شريطٌ يمهّد للترويسة لا لوحةٌ تزاحمها — والزائر جاء
   ليعرف كم وظيفةً مفتوحة لا ليتأمّل تدرّجًا.

   والترويسة تركبه بإزاحة سالبة، فيبدو الاثنان قطعةً واحدة لا صندوقين
   متجاورين.
   -------------------------------------------------------------------------- */

.jl-company__cover {
    block-size: 132px;
    border: var(--hairline);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    overflow: clip;
}

.jl-company__cover--v0 { background: linear-gradient(140deg, var(--accent-soft), color-mix(in srgb, var(--brand) 16%, var(--surface))); }
.jl-company__cover--v1 { background: linear-gradient(210deg, var(--accent-soft), color-mix(in srgb, var(--brand-2) 20%, var(--surface))); }
.jl-company__cover--v2 { background: linear-gradient(60deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), var(--accent-soft)); }
.jl-company__cover--v3 { background: linear-gradient(300deg, var(--accent-soft), color-mix(in srgb, var(--accent) 18%, var(--surface))); }
.jl-company__cover--v4 { background: linear-gradient(20deg, color-mix(in srgb, var(--brand-2) 14%, var(--surface)), var(--accent-soft)); }
.jl-company__cover--v5 { background: linear-gradient(255deg, var(--accent-soft), color-mix(in srgb, var(--brand) 22%, var(--surface))); }

.jl-company__head {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    margin-block-start: calc(var(--space-6) * -1);
    margin-inline: var(--space-5);
    padding: var(--space-6);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
}

@media (max-width: 640px) {
    .jl-company__cover {
        block-size: 88px;
    }

    /* على الضيّق تأخذ الترويسة العرض كلّه: هامشٌ جانبيّ هنا يسرق من
       الاسم سطرًا كاملًا. */
    .jl-company__head {
        margin-inline: 0;
    }
}

/*
 * الشعار صورة الغلاف: contain لا cover، فشعار الشركة يُقتطع بالملء
 * ويفقد معناه. الحشو يمنعه من ملامسة الإطار.
 */
.jl-company__logo {
    flex: 0 0 auto;
    inline-size: 88px;
    block-size: 88px;
    padding: var(--space-2);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    object-fit: contain;
}

.jl-company__initial {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 88px;
    block-size: 88px;
    background: var(--surface-2);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 34px;
    line-height: 1;
    color: var(--muted);
}

/* الأيقونة بديل الحرف لا حرف: تُقاس بالقرص المحيط بها لا بحجم الخطّ. */
.jl-company__initial .jl-icon {
    inline-size: 40px;
    block-size: 40px;
    margin-inline-end: 0;
}

.jl-company__identity {
    flex: 1 1 260px;
    min-inline-size: 0;
}

.jl-company__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--ink);
    text-wrap: balance;
}

.jl-company__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    /* الفجوة الأفقيّة أوسع بعد رفع النقاط الفاصلة، وإلا تلاصقت البنود. */
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--muted);
}

/* الأرقام مصطفّة بلا فرض خطّ لاتينيّ على نصّ عربيّ يلفّها. */
.jl-company__meta li {
    font-variant-numeric: tabular-nums;
}

/*
 * الأيقونة حلّت محلّ النقطة الفاصلة بين البنود: هي تفصل البند عمّا قبله
 * وتقول معناه في آن، وفاصلان لمعنى واحد ضجيج.
 */
.jl-company__meta .jl-icon {
    inline-size: 15px;
    block-size: 15px;
}

.jl-company__meta a {
    color: var(--accent-text);
    text-decoration: none;
}

.jl-company__meta a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jl-company__about {
    margin-block-start: var(--space-5);
    padding: var(--space-6);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    font-size: 16px;
    line-height: 1.85;
    color: var(--ink-soft);
}

.jl-company__about > * {
    max-width: var(--measure);
}

.jl-company__about > :first-child {
    margin-block-start: 0;
}

.jl-company__about > :last-child {
    margin-block-end: 0;
}

.jl-company__jobs {
    margin-block-start: var(--space-7);
}

.jl-company__jobs-title {
    margin: 0 0 var(--space-4);
    padding-block-end: var(--space-3);
    border-block-end: var(--hairline);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.015em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.jl-company__jobs-list {
    display: grid;
    gap: var(--space-3);
}

/*
 * الحالة الفارغة هنا وفي دليل الشركات تلي عنوانًا يحمل خطًّا سفليًّا
 * بالفعل، وخطّان متلاصقان يُقرآن خطأً في التنسيق لا فاصلًا مقصودًا.
 */
.jl-company__jobs .jl-empty,
.jl-companies-page .jl-empty {
    padding-block-start: 0;
    border-block-start: 0;
}

/* --------------------------------------------------------------------------
   دليل الشركات
   -------------------------------------------------------------------------- */

.jl-companies-page {
    padding-block: var(--space-5) var(--space-8);
}

.jl-companies {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3);
}

/*
 * البطاقة كلّها هدف للنقر عبر ::after المتمدّد من الرابط داخلها،
 * فلا حاجة إلى سطر جافاسكربت ولا إلى رابط ثانٍ يكرّره قارئ الشاشة.
 */
.jl-company-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    block-size: 100%;
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.jl-company-card:hover {
    border-color: var(--accent);
    box-shadow: var(--lift);
    transform: translateY(-2px);
}

.jl-company-card__logo {
    flex: 0 0 auto;
    inline-size: 48px;
    block-size: 48px;
    padding: var(--space-1);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius);
    object-fit: contain;
}

/* بديل الشعار الغائب: أوّل حرف من الاسم، لا مربّع فارغ. */
.jl-company-card__initial {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 48px;
    block-size: 48px;
    background: var(--surface-2);
    border: var(--hairline);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 19px;
    color: var(--muted);
}

.jl-company-card__initial .jl-icon {
    inline-size: 24px;
    block-size: 24px;
    margin-inline-end: 0;
}

.jl-company-card__body {
    min-inline-size: 0;
}

.jl-company-card__title {
    margin: 0 0 2px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.jl-company-card__title a {
    color: var(--ink);
    text-decoration: none;
}

.jl-company-card__title a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
}

.jl-company-card:hover .jl-company-card__title a {
    color: var(--accent-text);
}

.jl-company-card__count {
    max-width: none;
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.jl-company-card__count .jl-icon {
    inline-size: 14px;
    block-size: 14px;
}

/* ترقيم ووردبريس القياسي، مصبوغًا بالرموز نفسها. */

.jl-companies-page .pagination {
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-4);
    border-block-start: var(--hairline);
    font-size: 14px;
}

.jl-companies-page .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.jl-companies-page .page-numbers {
    display: inline-block;
    min-inline-size: 36px;
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius);
    color: var(--ink-soft);
    text-align: center;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.jl-companies-page a.page-numbers:hover {
    border-color: var(--accent);
    color: var(--accent-text);
}

.jl-companies-page .page-numbers.current {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
}

.jl-companies-page .screen-reader-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   «احمِ نفسك» — صفحة قراءة طويلة، وهي الصفحة التي تُبنى عليها الثقة

   الوسم المضاعف (.jl-protect.jl-protect) مقصود: account.css يحمّل بعد
   هذا الملف ويحمل قواعد قديمة للصفحة نفسها، فترجيح النوعيّة هنا يجعل
   التصميم الجديد هو الفائز أيًّا كان ترتيب التحميل.
   -------------------------------------------------------------------------- */

/*
 * عرض أضيق من بقيّة الصفحات: هذه صفحة تُقرأ لا تُمسح بالنظر، وترويسة
 * بعرض ‏--container فوق عمود نصّ بعرض ‏--measure تبدو ترويسةً لصفحة أخرى.
 */
.jl-protect.jl-protect {
    max-width: var(--measure-page);
    padding-block: var(--space-5) var(--space-8);
}

.jl-protect .jl-protect__header {
    padding: var(--space-7) var(--space-6);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
}

.jl-protect .jl-protect__eyebrow {
    display: inline-block;
    max-width: none;
    margin: 0 0 var(--space-4);
    padding: 5px var(--space-3);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent-text);
    font-size: 12.5px;
    font-weight: 500;
}

.jl-protect .jl-protect__title {
    margin: 0 0 var(--space-4);
    max-width: 20ch;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(28px, 4.2vw, 46px);
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--ink);
    text-wrap: balance;
}

/*
 * الأيقونة تتبع حجم نصّها، وحجم هذا العنوان يبلغ 46px — درعٌ بهذا الحجم
 * يصير لوحةً تنازع الجملة. الكسر من الحجم يبقيه علامةً تسبق العنوان.
 */
.jl-protect .jl-protect__title .jl-icon {
    inline-size: 0.72em;
    block-size: 0.72em;
    margin-inline-end: 0.2em;
    vertical-align: -0.06em;
    color: var(--accent-text);
    opacity: 1;
}

/* المقدّمة أكبر من نصّ المتن: هي الجملة التي تُقرأ ولو لم يُقرأ غيرها. */
.jl-protect .jl-protect__lede {
    margin: 0;
    max-width: 54ch;
    font-size: 19px;
    line-height: 1.75;
    color: var(--ink-soft);
}

.jl-protect .jl-protect__body {
    max-width: var(--measure);
    margin-inline: auto;
}

.jl-protect .jl-protect__section {
    margin-block-start: var(--space-7);
}

.jl-protect .jl-protect__section h2 {
    margin: 0 0 var(--space-4);
    padding-block-end: var(--space-3);
    border-block-end: var(--hairline);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.jl-protect .jl-protect__section p {
    margin: 0 0 var(--space-4);
    font-size: 16px;
    line-height: 1.85;
    color: var(--ink-soft);
}

.jl-protect .jl-protect__list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.jl-protect .jl-protect__list li {
    margin: 0;
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius);
    font-size: 15px;
    line-height: 1.8;
    color: var(--muted);
}

/*
 * علامات الإنذار مؤشَّرة بحدّ جانبيّ ملوّن — بالأزرق لا بالأحمر:
 * الأحمر محجوز لرسالة خطأ فعليّة، وهذه معلومة لا خطأ.
 */
.jl-protect .jl-protect__list--signs li {
    border-inline-start: 3px solid var(--accent);
}

.jl-protect .jl-protect__list--signs li strong {
    display: block;
    margin-block-end: var(--space-1);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink);
}

/* الأيقونة بلون الحدّ الجانبي نفسه فيُقرآن علامةً واحدة، لا بالأحمر. */
.jl-protect .jl-protect__list--signs li strong .jl-icon {
    color: var(--accent-text);
    opacity: 1;
}

/* قائمة التحقّق أخفّ: صفوف بخطّ فاصل لا ألواح مستقلّة. */
.jl-protect .jl-protect__list--checks {
    gap: 0;
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
}

.jl-protect .jl-protect__list--checks li {
    display: flex;
    gap: var(--space-3);
    border: 0;
    border-radius: 0;
    color: var(--ink-soft);
}

.jl-protect .jl-protect__list--checks li + li {
    border-block-start: var(--hairline);
}

/*
 * علامة صحّ محلّ النقطة: البنود هنا أفعال تُنجَز، والنقطة تجعلها قائمةً
 * تُقرأ. الهامش العلويّ يوسّطها على السطر الأوّل مهما لفّ النصّ بعده.
 */
.jl-protect .jl-protect__list--checks li .jl-icon {
    inline-size: 17px;
    block-size: 17px;
    margin-block-start: 5px;
    margin-inline-end: 0;
    color: var(--accent-text);
    opacity: 1;
}

.jl-protect .jl-protect__cta {
    margin: var(--space-5) 0 0;
}

.jl-protect .jl-button {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    background: var(--accent);
    border: 0;
    border-radius: var(--radius);
    color: var(--accent-ink);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.jl-protect .jl-button:hover {
    filter: brightness(1.08);
    box-shadow: var(--lift);
}

@media (max-width: 640px) {
    .jl-job__head,
    .jl-job__content,
    .jl-company__head,
    .jl-company__about,
    .jl-protect .jl-protect__header {
        padding: var(--space-5) var(--space-4);
    }

    .jl-company__logo {
        inline-size: 64px;
        block-size: 64px;
    }
}