/*

|--------------------------------------------------------------------------

| CSS برای مقاله (Articlestyle.css) - تم سیاه و سفید (Black & White Theme)

|--------------------------------------------------------------------------

*/



/* --- تنظیمات عمومی ریشه و بازنشانی (Root & Reset) --- */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



:root {

    /* 🎨 متغیرهای رنگی جدید (Black & White Theme) */

    --gjs-t-color-primary: #111111;       /* مشکی تیره برای دکمه‌ها و لینک‌های اصلی */

    --gjs-t-color-secondary: #6b7280;     /* خاکستری متوسط برای متن‌های فرعی */

    --gjs-t-color-accent: #f5f5f5;        /* خاکستری خیلی روشن برای پس‌زمینه کارت‌ها/المان‌های کم اهمیت */

    --color-text-dark: #1a1a1a;          /* مشکی برای تیترها */

    --color-text-medium: #333;           /* خاکستری تیره برای متن بدنه */

    --color-text-light: #737373;          /* خاکستری روشن‌تر برای متادیتا و توضیحات */

    --color-background: #ffffff;         /* پس‌زمینه اصلی (سفید) */

    --color-white: #ffffff;

    --color-border: #e5e7eb;             /* رنگ خط جداکننده */

    --color-black-accent: #0b0b0b;       /* رنگ برجسته (مشکی) */

}



html,

:host {

    line-height: 1.5;

    -webkit-text-size-adjust: 100%;

    tab-size: 4;

    font-family: "Vazirmatn", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    font-feature-settings: normal;

    font-variation-settings: normal;

    -webkit-tap-highlight-color: transparent;

    direction: rtl;

}



body {

    line-height: inherit;

}



/* --- تنظیمات اصلی برای فارسی سازی و بهبود خوانایی --- */

.gjs-t-body {

    background-color: var(--color-background);

    color: var(--color-text-dark);

    font-size: 1.125rem; /* 18px */

    line-height: 2;

    direction: rtl;

    text-align: right;

}



/* --- استایل دهی تایپوگرافی (Typography) --- */

h1, h2, h3, h4, h5, h6 {

    color: var(--color-text-dark);

    font-family: "Vazirmatn", "Work Sans", ui-sans-serif, system-ui;

    font-weight: 700;

    line-height: 1.4;

    margin: 0;

}



.gjs-t-h1 {

    font-size: 2.5rem; /* 40px */

    line-height: 1.25;

}



.gjs-t-h2 {

    font-size: 1.75rem; /* 28px */

    font-weight: 600;

}



.gjs-t-link {

    color: var(--gjs-t-color-primary);

    text-decoration: none;

    transition: opacity 0.2s;

}



.gjs-t-link:hover {

    opacity: 0.7;

}



.gjs-t-button {

    background-color: var(--gjs-t-color-primary);

    color: var(--color-white);

    border-radius: 9999px;

    padding: 0.5rem 1.25rem;

    font-size: 0.875rem;

    line-height: 1.25rem;

    transition: background-color 0.2s;

}



.gjs-t-button:hover {

    background-color: #333333;

}



.nav-link-jobs:hover {

    opacity: 0.7;

  }

  

  .nav-link-jobs {

    transition-property: opacity;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms;

  }

  

  .nav-link-how:hover {

    opacity: 0.7;

  }

  

  .nav-link-how {

    transition-property: opacity;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms;

  }

  

  .nav-link-about:hover {

    opacity: 0.7;

  }

  

  .nav-link-about {

    transition-property: opacity;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms;

  }

  

  .nav-link-contact:hover {

    opacity: 0.7;

  }

  

  .nav-link-contact {

    transition-property: opacity;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms;

  }

/* --- هدر سایت (Site Header) --- */

.site-header {

    width: 100%;

    background-color: rgb(255 255 255 / 0.9);

    backdrop-filter: blur(8px);

    border-bottom: 1px solid var(--color-border);

    position: sticky;

    top: 0px;

    z-index: 50;

}



.header-container {

    max-width: 72rem;

    margin: 0 auto;

    padding: 1rem 1.5rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.brand-link {

    font-weight: 800;

    letter-spacing: -0.025em;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

}

.nav-button-signup {

    padding-left: 1rem;

    padding-right: 1rem;

    padding-top: 0.5rem;

    padding-bottom: 0.5rem;

    transition-property: opacity;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms;

  }

  

  .nav-button-signup:hover {

    opacity: 0.9;

  }

  

.brand-mark {

    width: 2.25rem;

    height: 2.25rem;

    border-radius: 9999px;

    background-color: rgb(0 0 0 / 1);

    color: rgb(255 255 255 / 1);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.875rem;

    line-height: 1.25rem;

    font-weight: 800;

    user-select: none;

  }

.brand-name {

    font-size: 1.25rem;

}



.primary-navigation {

    display: flex;

    align-items: center;

    gap: 1.5rem;

    font-size: 0.875rem;

    color: var(--color-text-medium);

}



/* Dropdown Menu - User Menu */

.user-menu {

    position: relative;

}



.user-trigger {

    display: flex;

    align-items: center;

    gap: 5px;

    cursor: pointer;

    font-weight: 600;

}



.user-dropdown {

    position: absolute;

    top: 100%;

    left: 0;

    margin-top: 10px;

    background: var(--color-white);

    border: 1px solid var(--color-border);

    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    min-width: 150px;

    display: none;

    padding: 8px 0;

    z-index: 60;

}



.user-dropdown a {

    display: block;

    padding: 8px 15px;

    font-size: 0.9rem;

    color: var(--color-text-medium);

    white-space: nowrap;

}



.user-dropdown a:hover {

    background-color: var(--gjs-t-color-accent); /* خاکستری روشن */

}





/* --- محتوای اصلی (Main Content) --- */

.main-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 100%;

    padding-bottom: 50px;

}



/* --- بخش تصویر کاور (Hero Image) --- */

.hero-image-section {

    width: 100%;

}



.hero-figure {

    margin: 0;

}



.hero-image-desktop {

    display: block;

    width: 100%;

    object-fit: cover;

}



.hero-image-mobile {

    display: none;

    width: 100%;

    height: auto;

}



/* --- ساختار کارت مقاله (Article Card Structure) --- */



.article-card-wrapper {

    width: 100%;

    max-width: 900px;

    margin-top: -100px;

    padding: 0 15px;

    position: relative;

    z-index: 10;

}



/* استایل کارت برای محتوای مقاله */

.article-container.card-style {

    background-color: var(--color-white);

    border-radius: 12px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

    padding: 40px;

    margin-bottom: 40px;

    border: 1px solid var(--color-border); /* استفاده از متغیر بوردر */

}



/* --- هدر مقاله داخل کارت (Article Header) --- */

.article-header {

    border-bottom: 1px solid var(--color-border);

    margin: 0 0 25px 0;

    padding-bottom: 20px;

}



.article-title {

    font-size: 2.2rem;

    color: var(--color-text-dark);

    margin-bottom: 15px;

    line-height: 1.5;

    font-weight: 800;

}



/* --- متا دیتای مقاله (Article Meta Data) --- */

.article-meta-container {

    display: flex;

    flex-direction: column;

    gap: 15px;

    padding: 0;

    border: none;

    background: none;

    box-shadow: none;

}



.meta-row.meta-summary {

    display: flex;

    flex-direction: column;

    font-size: 1rem;

    line-height: 1.8;

    border-right: none;

    padding-right: 0;

}



.meta-row.meta-details {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    justify-content: flex-start;

    font-size: 0.9rem;

    padding: 0;

}



.meta-item {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--color-text-light);

    padding: 0;

    border-bottom: none;

}



.meta-label {

    display: flex;

    align-items: center;

    gap: 5px;

    font-weight: 600;

    color: var(--color-text-medium); /* تیره تر */

    margin-bottom: 0;

    font-size: 1em;

}



.meta-label svg {

    margin-left: 0;

    color: var(--color-text-light); /* رنگ خاکستری برای آیکون‌ها */

}



.meta-content {

    font-weight: 400;

display: flex; /* آیتم‌ها را در یک خط قرار می‌دهد */

    align-items: flex-start; /* آیکون و متن در ابتدای خط شروع شوند */

    gap: 8px;

}



.meta-content p {

    margin: 0; /* حذف مارجین‌های اضافی از پاراگراف */

}



/* تگ‌ها */

.meta-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.tag {

    /* 🔴 حذف رنگ آبی/روشن و استفاده از رنگ‌های خاکستری/سیاه */

    background-color: var(--gjs-t-color-accent); 

    color: var(--color-text-medium); 

    padding: 4px 10px;

    border-radius: 5px;

    font-size: 0.85em;

    font-weight: 600;

    margin-left: 0;

}



/* نویسنده */

.meta-author .author-info {

    display: flex;

    align-items: center;

    gap: 8px;

    font-weight: 600;

    color: var(--color-text-medium);

}



.author-image {

    width: 30px;

    height: 30px;

    border-radius: 50%;

    object-fit: cover;

    border: 1px solid var(--color-border);

    box-shadow: none;

}



/* --- بدنه مقاله (Article Body) --- */

.article-body {

    line-height: 1.9;

    color: var(--color-text-medium);

    font-size: 1.05rem;

    max-width: none;

}



.article-body p {

    margin-bottom: 1.5em;

    text-align: justify;

}



.article-body h2 {

    font-size: 1.8rem;

    margin-top: 30px;

    margin-bottom: 15px;

    /* 🔴 تغییر رنگ برجسته از آبی به مشکی/خاکستری تیره */

    border-right: 4px solid var(--color-black-accent); 

    padding-right: 10px;

    color: var(--color-text-dark);

    padding-bottom: 0;

    border-bottom: none;

}



.article-body h3 {

    font-size: 1.5rem;

    margin-top: 25px;

    margin-bottom: 10px;

    color: var(--color-text-dark);

}



.article-body ul, .article-body ol {

    padding-right: 30px;

    margin-bottom: 1.5em;

}



.article-body li {

    margin-bottom: 0.5em;

}



/* نقل قول */

.quote-emphasis {

    /* 🔴 تغییر رنگ برجسته از آبی/سفالی به خاکستری تیره */

    border-right: 4px solid var(--color-text-light); 

    border-left-width: 0;

    padding-right: 1rem;

    padding-left: 0;

    color: var(--color-text-medium);

    font-style: italic;

    margin-top: 2rem;

    margin-bottom: 2rem;

    background-color: var(--gjs-t-color-accent); /* خاکستری خیلی روشن */

    padding: 15px 20px 15px 15px;

    border-radius: 0 5px 5px 0;

}



/* --- مقالات مرتبط (Related Articles) --- */

.more-articles-section {

    width: 100%;

    max-width: 1000px;

    padding: 0 15px;

    margin-bottom: 50px;

}



.more-articles-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;

}



.more-articles-title {

    font-size: 1.8rem;

    color: var(--color-text-dark);

    margin: 0;

}



.all-articles-link {

    /* 🔴 تغییر رنگ لینک برجسته از آبی به مشکی تیره */

    color: var(--color-black-accent); 

    font-weight: 600;

}



.articles-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 20px;

}



.article-card {

    background-color: var(--color-white);

    border: 1px solid var(--color-border);

    border-radius: 8px;

    overflow: hidden;

    transition: transform 0.2s, box-shadow 0.2s;

}



.article-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);

}



.card-image {

    width: 100%;

    height: 180px;

    object-fit: cover;

}



.card-body {

    padding: 15px;

}



.card-title {

    font-size: 1.2rem;

    margin-bottom: 10px;

    color: var(--color-text-dark);

    line-height: 1.4;

}



.card-excerpt {

    font-size: 0.9rem;

    color: var(--color-text-light);

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    line-height: 1.6;

}







.cta-banner-wrapper {

    border-radius: 1rem;

    background-color: rgb(0 0 0 / 1);

    color: rgb(255 255 255 / 1);

    padding: 2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1.5rem;

  }



  .cta-banner-text {

    flex: 1 1 0%;

  }

  

  .cta-banner-title {

    font-size: 1.5rem;

    line-height: 2rem;

    font-weight: 800;

    letter-spacing: -0.025em;

  }

  

  .cta-banner-subtitle {

    margin-top: 0.5rem;

    color: rgb(255 255 255 / 0.8);

    font-size: 0.875rem;

    line-height: 1.25rem;

  }

  

  .cta-banner-actions {

    display: flex;

    align-items: center;

    gap: 0.75rem;

  }





  .cta-banner-primary {

    background-color: rgb(255 255 255 / 1);

    color: rgb(0 0 0 / 1);

    padding-left: 1.25rem;

    padding-right: 1.25rem;

    padding-top: 0.75rem;

    padding-bottom: 0.75rem;

    border-radius: 0.5rem;

    font-size: 0.875rem;

    line-height: 1.25rem;

    font-weight: 600;

    transition-property: opacity;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms;

  }

  

  .cta-banner-primary:hover {

    opacity: 0.9;

  }

  

  .cta-banner-secondary {

    border-width: 1px;

    border-color: rgb(255 255 255 / 0.4);

    color: black;

    padding-left: 1.25rem;

    padding-right: 1.25rem;

    padding-top: 0.75rem;

    padding-bottom: 0.75rem;

    border-radius: 0.5rem;

    font-size: 0.875rem;

    line-height: 1.25rem;

    font-weight: 600;

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms;

  }

  

  .cta-banner-secondary:hover {

    color: black;

    background-color: rgb(255 255 255 / 1);

  }



/* --- فوتر (Footer) --- */

.site-footer {

    width: 100%;

    border-top: 1px solid var(--color-border);

    background-color: var(--color-white);

}



.footer-container {

    max-width: 64rem;

    margin: 0 auto;

    padding: 1.5rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 0.875rem;

}



.footer-brand-block {

    font-weight: 800;

}



.footer-links-block {

    display: flex;

    gap: 1rem;

}



.footer-copy-block span {

    color: var(--color-text-light);

}

.gjs-t-link2 {

    color: white;

    text-decoration: none;

  }



/* --- واکنش‌گرا (Responsive) --- */



@media (max-width: 1024px) {

    .cta-banner-wrapper {

        flex-direction: column;

        text-align: center;

        align-items: center;

    }

}



@media (max-width: 768px) {

    /* عمومی */

    .gjs-t-body {

        font-size: 1rem;

    }

    .header-container {

        flex-direction: column;

        gap: 1rem;

        padding-top: 1rem;

        padding-bottom: 1rem;

      }

    .primary-navigation {

        gap: 1rem;

    }

    

    /* کارت مقاله */

    .hero-image-desktop {

        height: 20vh !important;

    }



    .article-card-wrapper {

        margin-top: -50px;

    }



    .article-container.card-style {

        padding: 20px;

    }



    .article-title {

        font-size: 1.8rem;

    }



    /* متا دیتا */

    .meta-row.meta-details {

        flex-direction: column;

        gap: 10px;

    }

    

    /* مقالات مرتبط */

    .more-articles-section {

        padding: 0 10px;

    }



    .articles-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .more-articles-title {

        font-size: 1.5rem;

    }



    /* فوتر */

    .footer-container {

        flex-direction: column;

        align-items: center;

        gap: 1rem;

    }



    .footer-links-block {

        flex-direction: column;

        gap: 0.5rem;

    }



    .cta-banner-actions {

        flex-direction: column;

        width: 100%;

    }



    .cta-banner-actions a {

        text-align: center;

    }

}



@media (max-width: 480px) {

    .hero-image-desktop {

        height: 20vh !important;

    }



    .hero-image-mobile {

        display: block;

    }



    .articles-grid {

        grid-template-columns: repeat(1, minmax(0, 1fr));

    }



    .primary-navigation {

        gap: 1rem;

    }



    /*.nav-link-jobs, .nav-link-how, .nav-link-about, .nav-link-contact {

        display: none;

    }*/

    

    .article-body {

        font-size: 1rem;

    }



    .article-body h2 {

        font-size: 1.5rem;

    }



    .article-container.card-style {

        padding: 15px;

    }

}

/* --- استایل‌دهی اختصاصی برای لینک‌های داخل بدنه مقاله --- */

/* سلکتور: انتخاب تگ <a> داخل المانی با کلاس .article-body */
.article-body a {
    /* 1. زیرخط خط‌چین و حذف زیرخط پیش‌فرض */
    color: var(--color-text-medium); /* رنگ پیش‌فرض برای لینک‌های متن مقاله (خاکستری تیره) */
    text-decoration: none; /* حذف زیرخط پیش‌فرض */
    border-bottom: 2px dashed var(--color-text-light); /* اضافه کردن زیرخط خط‌چین با رنگ خاکستری روشن */
    padding-bottom: 1px; /* فاصله از متن */
    transition: all 0.2s ease-in-out; /* تنظیمات انتقال (Transition) برای افکت هاور */
    display: inline-block; /* برای اینکه ترنسفورم به درستی کار کند */
}

/* 2. استایل هاور: تغییر رنگ و افکت تکان خوردن/بالا رفتن جزئی */
.article-body a:hover {
    color: var(--color-text-dark); /* تغییر رنگ متن به مشکی/خاکستری تیره (مطابق درخواست) */
    border-bottom: 2px dashed var(--color-text-medium); /* تغییر رنگ خط‌چین به خاکستری تیره‌تر */
    transform: translateY(-1px); /* یک کوچولو به سمت بالا حرکت می‌کند */
    opacity: 1; /* اطمینان از وضوح کامل */
}

/* برای لینک‌های تیترها هم این استایل‌ها اعمال شود */
.article-body h2 a,
.article-body h3 a {
    color: inherit; /* رنگ متن لینک از تیتر ارث می‌برد */
    border-bottom: 2px dashed var(--color-text-medium); /* خط‌چین زیر لینک‌های تیتر */
}

.article-body h2 a:hover,
.article-body h3 a:hover {
    color: var(--color-text-dark);
    border-bottom-color: var(--color-black-accent);
}