/*
Theme Name: Barana Premium Developer Theme
Theme URI:  https://example.com/Barana-theme
Author:      Your Name
Author URI:  https://example.com
Description: A performance-first WordPress theme built for developers who don’t want page builder lock-in. Use this as a base to build a production theme.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Barana-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, theme-options, translation-ready
*/
@import url("./src/css/fonts.css");
*,
*:before,
*:after {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  display: none;
}
body {
            font-family: 'IranSans', sans-serif;
           
            /* گرادیانت نرم پس زمینه کل صفحه */
           /* background-image: radial-gradient(circle at 50% 0%, #f3f4f6 0%, #d1d5db 100%);*/
           background-image: radial-gradient(circle at 50% 0%, #f3f4f6 0%, #f4f5f6 100%);
        }

        /* --- شیشه اصلی (Main Card) --- */
        .glass-main {
            /* گرادیانت عمودی: بالا سفیدتر، پایین شفاف‌تر */
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 100%);
            backdrop-filter: blur(24px); /* تاری زیاد برای پس‌زمینه */
            -webkit-backdrop-filter: blur(24px);
            
            /* حاشیه روشن و درخشان */
            border: 1.5px solid rgba(255, 255, 255, 0.95);
            
            /* سایه برای جدا شدن از پس زمینه */
            box-shadow: 
                0 20px 40px -5px rgba(0, 0, 0, 0.1),
                inset 0 0 0 1px rgba(255, 255, 255, 0.4); /* درخشش داخلی */
        }

        /* --- شیشه داخلی (راننده و نوار پایین) --- */
        .glass-inner {
            /* کمی شفاف تر از کارت اصلی تا لایه زیری دیده شود اما مات */
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%);
            backdrop-filter: blur(12px);
            
            /* حاشیه بسیار روشن و مشخص (کلید زیبایی طرح) */
            border: 1.5px solid #FFFFFF; 
            
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.05);
        }
                /* آیکون های سه بعدی */
        .icon-3d-effect {
            filter: drop-shadow(0 8px 8px rgba(0,0,0,0.1));
        }


/* =========================================
   Stacking Cards Effect (Only on Mobile)
   ========================================= */

/* این استایل‌ها فقط زمانی اعمال می‌شوند که صفحه کوچک باشد */
@media (max-width: 768px) {

    /* تبدیل گرید به حالت تک ستونه و پشته‌ای */
    .stacking-cards-container {
        display: grid;
        grid-template-columns: 100% !important; /* اجبار به تک ستونه */
        /* این متغیرها توسط JS پر می‌شوند */
        grid-template-rows: repeat(var(--cards-count), var(--card-height)); 
        gap: 40px 0;
        margin: 0 auto;
        padding-bottom: 50px;
    }

    /* فعال کردن چسبندگی فقط در موبایل */
    .stacking-card {
        position: sticky;
        top: 20px; /* کمی فاصله از بالا */
        height: auto !important;
        width: 100%;
        z-index: 1;
        padding-top: 20px; /* فاصله برای افکت روی هم آمدن */
    }

    /* استایل لایه داخلی برای انیمیشن */
    .stacking-card__inner {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05), 
                    0 25px 50px -12px rgba(0, 0, 0, 0.25);
        overflow: hidden;
        transform-origin: center top;
        will-change: transform, filter, opacity;
        width: 100%;
    }

    /* اصلاح بردر بالای کارت در حالت پشته‌ای */
    .stacking-card .card {
        border-top-width: 4px;
        border-radius: 0; /* گردی را به رپر والد می‌سپاریم */
    }
}


/* ========================================= */
/* استایل‌های ویرایشگر Quill (نسخه اصلاح شده) */
/* ========================================= */

/* 1. تنظیمات تولبار (Toolbar) */
.ql-toolbar.ql-snow {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    background-color: #f9fafb; /* رنگ زمینه روشن */
    border-color: #d1d5db !important;
    
    /* تنظیمات چیدمان */
    display: flex;
    flex-wrap: wrap !important; /* مهم: اجازه میدهیم دکمه‌ها به خط بعد بروند */
    justify-content: flex-start;
    gap: 8px; /* فاصله بین دکمه‌ها */
    padding: 8px !important;
    
    /* حیاتی برای نمایش دراپ‌داون روی بقیه اجزا */
    position: relative;
    z-index: 50; /* عدد بالا برای قرارگیری روی ادیتور */
    
    /* حذف اسکرول مخرب */
    overflow: visible !important; 
}

/* 2. تنظیمات کانتینر متن (Editor Area) */
.ql-container.ql-snow {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border-color: #d1d5db !important;
    background-color: white;
    
    /* حیاتی: این باید زیر تولبار باشد */
    position: relative;
    z-index: 10; 
}

/* 3. استایل دراپ‌داون‌ها (مثل انتخاب رنگ و سایز) */
.ql-toolbar .ql-picker-options {
    z-index: 1000 !important; /* بسیار بالا */
    background-color: white !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    border-radius: 0.375rem;
    padding: 5px 0;
}

/* 4. استایل محتوای داخل ادیتور */
.ql-editor {
    text-align: right; /* پیش‌فرض راست‌چین */
    font-family: inherit;
    min-height: 250px; /* کمی بلندتر */
    font-size: 1rem;
    line-height: 1.8;
}

/* اصلاح لیست‌ها */
.ql-editor ol {
    list-style-type: decimal !important;
    padding-right: 2em !important;
}
.ql-editor ul {
    list-style-type: disc !important;
    padding-right: 2em !important;
}
.ql-editor li {
    padding-right: 0.5em; /* فاصله متن از بولت */
}

/* استایل بلوک نقل قول */
.ql-editor blockquote {
    border-right: 4px solid #3b82f6; /* رنگ آبی */
    background-color: #eff6ff;
    padding: 10px 15px;
    margin: 10px 0;
    color: #1e3a8a;
    font-style: italic;
    border-radius: 4px;
}

/* استایل کد بلاک */
.ql-editor pre.ql-syntax {
    background-color: #1e293b;
    color: #e2e8f0;
    padding: 15px;
    border-radius: 8px;
    direction: ltr;
    text-align: left;
    font-family: monospace;
}

/* جلوگیری از به هم ریختن دکمه‌ها */
.ql-formats {
    margin-right: 0 !important;
    display: inline-flex;
    align-items: center;
}

/* تنظیمات پایه برای نمایش محتوای پست */
.post-content {
    color: #1f2937; /* رنگ پیش‌فرض متن (مشکی/خاکستری تیره) */
    font-size: 1rem; /* سایز فونت استاندارد (16px) */
    line-height: 1.8; /* فاصله خطوط خوانا */
}

/* چون Tailwind استایل تیترها را ریست می‌کند، باید سایز تیترها را برگردانیم */
.post-content h1 {
    font-size: 2em;
    font-weight: 800;
    margin-bottom: 0.5em;
    margin-top: 1em;
}
.post-content h2 {
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 0.5em;
    margin-top: 1em;
}
.post-content h3 {
    font-size: 1.25em;
    font-weight: 600;
    margin-bottom: 0.5em;
    margin-top: 1em;
}

/* رفع تداخل احتمالی با رنگ‌های Quill */
/* این می‌گوید: اگر خود المان رنگ داشت (inline style)، رنگ ما را نادیده بگیر */
.post-content *[style*="color"] {
    color: inherit !important;
}

/* ========================================= */
/* استایل حالت تمام صفحه (Fullscreen Mode) */
/* ========================================= */
#quill-wrapper.is-fullscreen {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    border-radius: 0 !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    
    /* اولویت نمایش: باید از نوار وردپرس (99999) بالاتر باشد تا روی سایر المان‌ها بیاید،
       اما با top تنظیم می‌کنیم که زیرش قرار بگیرد */
    z-index: 100000 !important; 
}

/* --- تنظیم موقعیت نسبت به نوار مدیریت وردپرس --- */

/* 1. حالت پیش‌فرض (اگر کاربر لاگین نیست یا نوار مدیریت غیرفعال است) */
#quill-wrapper.is-fullscreen {
    top: 0;
    height: 100vh;
}

/* 2. اگر نوار مدیریت در دسکتاپ فعال است */
body.admin-bar #quill-wrapper.is-fullscreen {
    top: 32px !important; /* ارتفاع استاندارد نوار وردپرس */
    height: calc(100vh - 32px) !important;
}

/* 3. اگر نوار مدیریت در موبایل فعال است (ارتفاعش بیشتر است) */
@media screen and (max-width: 782px) {
    body.admin-bar #quill-wrapper.is-fullscreen {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
    }
}

/* --- سایر استایل‌های داخلی (تولبار و متن) --- */

#quill-wrapper.is-fullscreen .ql-toolbar {
    flex-shrink: 0;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    padding: 10px 15px !important;
    background: #f3f4f6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 50; /* روی متن بماند */
}

#quill-wrapper.is-fullscreen .ql-container {
    flex-grow: 1;
    height: auto !important;
    border: none !important;
    border-radius: 0 !important;
    overflow-y: auto !important; /* اسکرول خوردن متن */
}

#quill-wrapper.is-fullscreen .ql-editor {
    min-height: 100%;
    max-width: 900px; /* عرض مناسب برای خوانایی */
    margin: 0 auto;
    padding: 40px 20px !important;
    font-size: 1.1rem;
}
/* ========================================= */
/* تنظیمات فونت‌های Quill (نهایی و تست شده) */
/* ========================================= */

/* --- 1. اعمال فونت روی متن (با اولویت بالا) --- */

/* فونت‌های انگلیسی */
.ql-snow .ql-editor .ql-font-poppins { font-family: 'Poppins', sans-serif !important; }
.ql-snow .ql-editor .ql-font-sora    { font-family: 'Sora', sans-serif !important; }
.ql-snow .ql-editor .ql-font-lato    { font-family: 'Lato', sans-serif !important; }

/* فونت‌های فارسی */
/* نکته مهم: نام فونت در گوگل Vazirmatn است */
.ql-snow .ql-editor .ql-font-vazir { 
    font-family: 'Vazirmatn', sans-serif !important; 
}

.ql-snow .ql-editor .ql-font-lalezar { 
    font-family: 'Lalezar', display !important; 
}


/* --- 2. تنظیم نام‌ها در لیست دراپ‌داون --- */

/* استایل پایه */
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
    font-family: inherit;
}

/* نام‌گذاری فارسی در منو */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="vazir"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="vazir"]::before {
    content: "وزیر" !important;
    font-family: 'Vazirmatn', sans-serif !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="lalezar"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="lalezar"]::before {
    content: "لاله‌زار" !important;
    font-family: 'Lalezar', display !important;
}

/* نام‌گذاری انگلیسی در منو */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="poppins"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="poppins"]::before {
    content: "Poppins" !important;
    font-family: 'Poppins', sans-serif !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sora"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sora"]::before {
    content: "Sora" !important;
    font-family: 'Sora', sans-serif !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="lato"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="lato"]::before {
    content: "Lato" !important;
    font-family: 'Lato', sans-serif !important;
}

/* در فایل style.css */

#toc-output ul {
    list-style: none; 
    padding: 0;
    margin: 0;
}

#toc-output li {
    margin: 0;
    padding: 0;
}

#toc-output a {
    /* اطمینان از اینکه لینک‌های TOC کاملاً قابل کلیک باشند */
    padding: 4px 0;
    margin: 0;
}

/* استایل سرفصل‌های سطح H3 (تورفتگی و وزن کمتر) */
#toc-output .toc-level-3 a {
    padding-right: 15px; /* تورفتگی برای H3 */
    font-size: 0.9rem; 
    font-weight: 400; 
    color: #4b5563; /* خاکستری کمی تیره‌تر */
}

/* استایل سرفصل‌های سطح H2 (وزن بیشتر) */
#toc-output .toc-level-2 a {
    font-weight: 600; 
    color: #1f2937; /* رنگ تیره */
}

/* استایل هاور و اکتیو (اختیاری) */
#toc-output a:hover {
    color: #3b82f6 !important; /* رنگ آبی Primary */
    background-color: #f3f4f6;
    border-radius: 4px;
    padding-left: 5px; /* برای جلوه زیباتر */
}
/*   عدم نمایش فوتر برای موبایل */
footer {
    @media (width < 64rem) {
        display:none;
    }
}
.footer-blur{
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	bottom: 0;
	-webkit-box-flex: 0;
	-ms-flex: none;
	flex: none;
	height: 100px;
	left: 0;
	-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black)) add;
	-webkit-mask: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, black 100%) add;
	mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black)) add;
	mask: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, black 100%) add;
	overflow: visible;
	position: fixed;
	right: 0;
	pointer-events: none;
	z-index: 999;
}

/* استایل اسکرول‌بار اختصاصی برای منوی کناری */
.custom-scrollbar {
    scrollbar-width: thin; /* برای فایرفاکس */
    scrollbar-color: oklch(var(--bc) / 0.2) transparent;
}

/* برای کروم، اج و سافاری */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px; /* ضخامت خیلی کم */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: oklch(var(--bc) / 0.2); /* رنگ متناسب با تم */
    border-radius: 20px;
}

.custom-scrollbar:hover::-webkit-scrollbar-thumb {
    background-color: oklch(var(--bc) / 0.4); /* پررنگ شدن هنگام هاور */
}