/*
Theme Name: Mohsen
Theme URI: http://example.com/mohsen
Author: Your Name
Author URI: http://example.com
Description: Child theme for Hello Elementor
Template: hello-elementor
Version: 1.0
*/
@import url("../hello-elementor/style.css");

/* استایل‌های سفارشی رو بعداً اینجا اضافه می‌کنیم */

/* Background سایت خاکستری */
body, .site-container {
    background-color: #707070; /* خاکستری متوسط - می‌تونی #A9A9A9 برای روشن‌تر یا #696969 برای تیره‌تر بذاری */
}

/* سایدبار سمت راست کاملاً مشکی */
.right-menu-sidebar {
    background-color: #000000; /* مشکی */
    color: #FFFFFF; /* متن سفید برای خوانایی */
}

/* محتوای اصلی وسط (centered) */
.site-main {
    margin: 0 auto; /* وسط کردن با margin auto */
    max-width: 800px; /* عرض حداکثر برای محتوا - تغییر بده اگر می‌خوای عریض‌تر باشه */
    padding: 20px;
}

/* لینک‌های منو سفید */
.right-menu a {
    color: #FFFFFF; /* سفید */
    text-decoration: none;
}

.right-menu a:hover {
    color: #CCCCCC; /* خاکستری روشن برای hover */
}

/* عکس بالای منو (استایل اضافی اگر لازم) */
.right-menu img {
    display: block;
    margin: 0 auto 10px; /* وسط و فاصله زیر */
    border-radius: 50%; /* گرد کردن عکس اگر بخوای */
    width: 150px; /* اندازه عکس - تغییر بده */
    height: auto;
}

/* Layout styles */
.site-container {
    display: flex;
    flex-direction: row;
    height: 100vh;
    overflow: hidden;
}

.site-content-wrapper {
    display: flex;
    width: 100%;
}

.right-menu-sidebar {
    position: fixed;
    right: 0;
    top: 0;
    width: 300px; /* عرض سایدبار */
    height: 100%;
    background-color: #000000; /* رنگ پس‌زمینه */
    padding: 20px;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    z-index: 1000;
    overflow-y: auto;
}

.site-main {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

/* Responsive for mobile */
@media (max-width: 768px) {
    .site-container {
        flex-direction: column;
    }
    .right-menu-sidebar {
        position: relative;
        width: 100%;
        height: auto;
    }
}

/* Basic animations */
.site-main section {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}