/* ==========================================
   RESET & BASE - ریست و تنظیمات پایه
========================================== */
* {
    margin: 0;                 /* حذف حاشیه پیش‌فرض */
    padding: 0;                /* حذف فاصله داخلی پیش‌فرض */
    box-sizing: border-box;    /* محاسبه عرض شامل padding و border */
}

/* ==========================================
   BODY - بدنه اصلی صفحه
========================================== */
body {
    width: 100%;                          /* عرض کامل صفحه */
    min-height: 100vh;                    /* حداقل ارتفاع برابر viewport */
    display: flex;                        /* چیدمان فلکس */
    flex-direction: column;               /* ترتیب عمودی */
    align-items: center;                  /* وسط‌چین افقی */
    background-color: #f5efe7;            /* رنگ پس‌زمینه کرم */
    animation: fadeIn 2s ease;            /* انیمیشن محو شدن در بارگذاری */
    overflow-x: hidden;                   /* جلوگیری از اسکرول افقی */
    font-family: "Estedad", sans-serif;   /* فونت پیش‌فرض */
}

/* ==========================================
   FONT FACES - تعریف فونت‌های سفارشی
========================================== */
@font-face {
    font-family: "Estedad";               /* نام فونت */
    src: url("../Fonts/Estedad-Bold.woff2") format("woff2"); /* مسیر فایل */
    font-display: swap;                   /* نمایش سریع‌تر */
}

@font-face {
    font-family: "Colack";
    src: url("../Fonts/ColakFAnum.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Morabba";
    src: url("../Fonts/Morabba-Bold.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Abr";
    src: url("../Fonts/AbarLow-Black.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "AbrBold";               /* فونت ضخیم برای عنوان‌ها */
    src: url("../Fonts/AbarHigh-ExtraBold.woff2") format("woff2");
    font-display: swap;
}

/* ==========================================
   WRAPPER - کانتینر اصلی تمام محتوا
========================================== */
.site-wrapper {
    flex: 1;                              /* کشیده شدن برای پر کردن فضا */
    width: 100%;                          /* عرض کامل */
    max-width: 1000px;                    /* حداکثر عرض */
    display: flex;                        /* چیدمان فلکس */
    flex-direction: column;               /* ترتیب عمودی */
    padding-bottom: 60px;                 /* فاصله از پایین صفحه - آخرین آیتم نچسبد */
}

/* ==========================================
   HEADER - سرصفحه (لوگو و بنر)
========================================== */
.site-header {
    width: 100%;                          /* عرض کامل */
    display: flex;                        /* چیدمان فلکس */
    flex-direction: column;               /* عمودی */
    align-items: center;                  /* وسط‌چین */
    margin: 0 auto;                       /* مرکز قرارگیری */
}

.header-logo {
    width: 450px;                         /* عرض لوگو */
    height: auto;                         /* ارتفاع متناسب */
    margin-top: -35px;                    /* جابجایی به سمت بالا */
    display: block;                       /* نمایش بلوکی */
}

.header-banner {
    width: 550px;                         /* عرض بنر */
    height: auto;                         /* ارتفاع متناسب */
    margin-top: -35px;                    /* چسبیدن به لوگو */
    margin-bottom: 35px;                  /* فاصله از بخش بعد */
    display: block;                       /* نمایش بلوکی */
}

/* ==========================================
   INFO BAR - نوار اطلاعات تماس
========================================== */
.info-bar {
    width: 100%;                          /* عرض کامل */
    display: flex;                        /* چیدمان فلکس */
    justify-content: center;              /* وسط‌چین افقی */
    align-items: center;                  /* وسط‌چین عمودی */
    gap: 15px;                            /* فاصله بین آیتم‌ها */
    margin: 35px auto;                    /* فاصله از اطراف */
}

.info-link {
    flex: 1;                              /* تقسیم فضای مساوی */
    display: block;                       /* نمایش بلوکی */
    text-decoration: none;                /* حذف زیرخط */
    transition: all 0.3s ease;            /* انیمیشن هاور */
}

/* هاور روی لینک‌های اطلاعات */
.info-link:hover {
    transform: scale(1.03);               /* بزرگنمایی */
}

.info-icon {
    width: 100%;                          /* عرض کامل ظرف */
    height: auto;                         /* ارتفاع متناسب */
    display: block;                       /* نمایش بلوکی */
    transition: all 0.3s ease;            /* انیمیشن هاور */
    border-radius: 12px;                  /* گوشه‌های گرد */
}

/* هاور روی آیکون‌های اطلاعات */
.info-icon:hover {
    transform: scale(1.02);               /* بزرگنمایی جزئی */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); /* سایه نرم */
    filter: brightness(0.97);             /* کمی تیره‌تر */
}

/* ==========================================
   MENU GRID - شبکه منوها
========================================== */
.menu-grid {
    width: 100%;                          /* عرض کامل */
    display: flex;                        /* چیدمان فلکس */
    flex-direction: column;               /* ترتیب عمودی */
    gap: 30px;                            /* فاصله بین آیتم‌ها */
    flex: 1;                              /* کشیده شدن برای پر کردن فضا */
}

/* ==========================================
   MENU CARD - کارت هر منو
========================================== */
.menu-card {
    width: 100%;                          /* عرض کامل */
    height: auto;                         /* ارتفاع متناسب */
    position: relative;                   /* برای فرزندان مطلق */
}

.menu-card__link {
    display: block;                       /* نمایش بلوکی */
    text-decoration: none;                /* حذف زیرخط */
    position: relative;                   /* برای موقعیت‌دهی */
}

.menu-card__image {
    width: 100%;                          /* عرض کامل */
    height: auto;                         /* ارتفاع متناسب */
    display: block;                       /* نمایش بلوکی (رفع فاصله اضافی) */
    border-radius: 12px;                  /* گوشه‌های گرد */
    transition: all 0.3s ease;            /* انیمیشن هاور */
}

/* افکت هاور روی تصاویر منو */
.menu-card__image:hover {
    transform: scale(1.01);               /* بزرگنمایی جزئی */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* سایه نرم */
}

/* ==========================================
   ANIMATIONS - انیمیشن‌ها
========================================== */
@keyframes fadeIn {
    from {
        opacity: 0;                        /* شروع: مخفی */
        transform: translateY(15px);       /* پایین‌تر */
    }
    to {
        opacity: 1;                        /* پایان: قابل مشاهده */
        transform: translateY(0);          /* موقعیت اصلی */
    }
}

/* ==========================================
   RESPONSIVE - واکنش‌گرایی
========================================== */

/* === تبلت و صفحه‌های متوسط === */
@media (max-width: 768px) {
    .header-logo {
        width: 200px;                      /* کاهش لوگو */
        margin-top: -20px;
    }
    
    .header-banner {
        width: 300px;                      /* کاهش بنر */
        margin-top: -20px;
        margin-bottom: 20px;
    }

    .info-bar {
        gap: 10px;                         /* کاهش فاصله */
        margin: 20px auto;
    }

    .site-wrapper {
        padding-bottom: 40px;              /* کاهش فاصله پایین */
    }

    .info-icon {
        border-radius: 10px;               /* کاهش گردی گوشه‌ها */
    }
}

/* === موبایل و صفحه‌های کوچک === */
@media (max-width: 480px) {
    .header-logo {
        width: 140px;                      /* کاهش بیشتر لوگو */
        margin-top: -10px;
    }
    
    .header-banner {
        width: 200px;                      /* کاهش بیشتر بنر */
        margin-top: -10px;
        margin-bottom: 15px;
    }

    .info-bar {
        gap: 8px;                          /* فاصله کمتر */
        margin: 15px auto;
    }

    .menu-grid {
        gap: 20px;                         /* فاصله کمتر بین منوها */
    }

    .menu-card__image {
        border-radius: 8px;                /* گوشه‌های کمتر گرد */
    }

    .site-wrapper {
        padding-bottom: 30px;              /* کاهش فاصله پایین برای موبایل */
    }

    .info-icon {
        border-radius: 8px;                /* کاهش گردی گوشه‌ها */
    }
}