/* =========================================================
   PERSONAL PORTFOLIO
   BASE.CSS
   ---------------------------------------------------------
   تنظیمات پایه و عمومی کل سایت
   ========================================================= */


/* =========================================================
   1. RESET
   ---------------------------------------------------------
   حذف رفتارهای پیش‌فرض مرورگر برای داشتن کنترل کامل روی
   طراحی سایت
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* =========================================================
   2. HTML
   ========================================================= */

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}


/* =========================================================
   3. BODY
   ========================================================= */

body {
    min-height: 100vh;

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

    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: var(--line-normal);

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    transition:
        background-color var(--transition-normal),
        color var(--transition-normal);
}


/* =========================================================
   4. IMAGES
   ---------------------------------------------------------
   جلوگیری از بیرون زدن تصاویر از محدوده‌ی والد
   ========================================================= */

img,
picture,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}


/* =========================================================
   5. BUTTONS & INPUTS
   ---------------------------------------------------------
   یکسان‌سازی ظاهر کنترل‌های فرم
   ========================================================= */

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    border: 0;
    background: none;
    cursor: pointer;
}


/* =========================================================
   6. LINKS
   ========================================================= */

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   7. LISTS
   ========================================================= */

ul,
ol {
    list-style: none;
}


/* =========================================================
   8. HEADINGS
   ---------------------------------------------------------
   تیترها در ادامه توسط CSS هر بخش شخصی‌سازی می‌شوند.
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text);
    font-weight: 700;
    line-height: var(--line-tight);
}


/* =========================================================
   9. PARAGRAPHS
   ========================================================= */

p {
    color: var(--color-text-secondary);
}


/* =========================================================
   10. TEXT SELECTION
   ---------------------------------------------------------
   ظاهر انتخاب متن توسط کاربر
   ========================================================= */

::selection {
    background: var(--color-primary);
    color: #ffffff;
}


/* =========================================================
   11. FOCUS
   ---------------------------------------------------------
   برای دسترسی‌پذیری و استفاده با کیبورد
   ========================================================= */

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}


/* =========================================================
   12. SCROLLBAR
   ---------------------------------------------------------
   Scrollbar سفارشی برای مرورگرهای WebKit
   ========================================================= */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-light);
}


/* =========================================================
   13. MAIN
   ========================================================= */

main {
    position: relative;
    width: 100%;
}


/* =========================================================
   14. CONTAINER
   ---------------------------------------------------------
   تمام محتوای اصلی سایت داخل این Container قرار می‌گیرد.
   ========================================================= */

.container {
    width: min(
        100% - (var(--container-padding) * 2),
        var(--container-width)
    );

    margin-inline: auto;
}


/* =========================================================
   15. SECTION
   ---------------------------------------------------------
   فاصله‌ی عمومی بین بخش‌های سایت
   ========================================================= */

section {
    position: relative;
    width: 100%;
}


/* =========================================================
   16. SECTION INNER
   ---------------------------------------------------------
   برای کنترل فاصله‌ی عمودی بخش‌ها
   ========================================================= */

.section-inner {
    padding-block: var(--space-24);
}


/* =========================================================
   17. TEXT UTILITIES
   ---------------------------------------------------------
   کلاس‌های ساده برای استفاده‌ی مجدد
   ========================================================= */

.text-primary {
    color: var(--color-primary);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-center {
    text-align: center;
}


/* =========================================================
   18. VISUALLY HIDDEN
   ---------------------------------------------------------
   برای متن‌هایی که باید توسط Screen Reader خوانده شوند
   ولی روی صفحه نمایش داده نمی‌شوند.
   ========================================================= */

.visually-hidden {
    position: absolute !important;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;
    border: 0;
}


/* =========================================================
   19. NO SCROLL
   ---------------------------------------------------------
   زمانی که منوی موبایل یا Modal باز است استفاده می‌شود.
   ========================================================= */

body.no-scroll {
    overflow: hidden;
}


/* =========================================================
   20. GLASS EFFECT
   ---------------------------------------------------------
   افکت شیشه‌ای عمومی برای کارت‌ها و عناصر خاص
   ========================================================= */

.glass {
    background: var(--color-surface);

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

    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));

    box-shadow: var(--shadow-md);
}


/* =========================================================
   21. HOVER LIFT
   ---------------------------------------------------------
   افکت بالا آمدن عنصر هنگام Hover
   ========================================================= */

.hover-lift {
    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}


/* =========================================================
   22. DISABLED
   ---------------------------------------------------------
   ظاهر عناصر غیرفعال
   ========================================================= */

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}


/* =========================================================
   23. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    :root {
        --container-padding: 18px;
    }

    .section-inner {
        padding-block: var(--space-16);
    }
}


/* =========================================================
   24. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    :root {
        --container-padding: 16px;
    }
}