/*
Theme Name: پرگار | Pargar Academy
Theme URI: https://hakiminezhad.tech/
Author: hakimitech
Author URI: https://hakiminezhad.tech/
Description: قالب آموزشی حرفه‌ای و فارسی (RTL) برای آکادمی‌ها، آموزشگاه‌ها و مدرسان — سازگار با ووکامرس، المنتور و افزونه‌ی becomingmiles. دارای حالت روشن و تیره و پنل تنظیمات کامل.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: becomingmiles
Tags: education, lms, rtl, elementor, woocommerce, dark-mode
*/

/* ============================================================
   becomingmiles Academy — سیستم متغیرها (Design System)
   این متغیرها از پنل تنظیمات (Customizer/Kirki) کنترل می‌شوند.
   ============================================================ */

:root {
    /* رنگ برند (پیش‌فرض — قابل تغییر از پیشخوان) */
    --bm-primary: #4F46E5;
    --bm-primary-light: #6366F1;
    --bm-primary-dark: #3730A3;
    --bm-secondary: #0EA5E9;
    --bm-accent: #F59E0B;
    --bm-success: #10B981;
    --bm-warning: #F59E0B;
    --bm-error: #EF4444;

    /* خنثی (Slate) */
    --bm-bg: #F2F6FB;
    --bm-surface: #FFFFFF;
    --bm-surface-2: #EAF1F8;
    --bm-border: #E2E8F0;
    --bm-text: #16202E;
    --bm-text-sub: #64748B;
    --bm-text-mute: #94A3B8;

    /* تایپوگرافی (قابل تغییر از پیشخوان) */
    --bm-font: 'Yekan Bakh', 'Vazirmatn', Tahoma, sans-serif;
    --bm-font-heading: var(--bm-font);
    --bm-fs-base: 16px;
    --bm-lh-base: 1.9;

    /* شعاع و سایه و فاصله */
    --bm-radius-sm: 10px;
    --bm-radius: 16px;
    --bm-radius-lg: 24px;
    --bm-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06);
    --bm-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
    --bm-shadow-lg: 0 20px 48px rgba(16, 24, 40, 0.12);
    --bm-container: 1200px;
    --bm-gap: 24px;

    /* عناصر */
    --bm-header-h: 76px;
}

/* ============ حالت تیره ============ */
:root[data-theme="dark"] {
    --bm-bg: #0E1622;
    --bm-surface: #161F2C;
    --bm-surface-2: #1B2736;
    --bm-border: #2A3848;
    --bm-text: #EAF1F8;
    --bm-text-sub: #9FB0C2;
    --bm-text-mute: #64748B;
    --bm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --bm-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    --bm-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   ریست و پایه
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--bm-fs-base); scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--bm-font);
    line-height: var(--bm-lh-base);
    color: var(--bm-text);
    background: var(--bm-bg);
    direction: rtl;
    text-align: right;
    -webkit-font-smoothing: antialiased;
    transition: background-color .3s ease, color .3s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--bm-font-heading);
    color: var(--bm-text);
    line-height: 1.5;
    margin: 0 0 .6em;
    font-weight: 800;
}
h1 { font-size: 2.2rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em; }

a { color: var(--bm-primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--bm-primary-dark); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { padding-right: 1.4em; padding-left: 0; }

/* ============================================================
   لایه‌بندی
   ============================================================ */
.bm-container {
    max-width: var(--bm-container);
    margin-inline: auto;
    padding-inline: 20px;
    width: 100%;
}

.bm-section { padding-block: 64px; }

.bm-grid { display: grid; gap: var(--bm-gap); }
.bm-grid-2 { grid-template-columns: repeat(2, 1fr); }
.bm-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bm-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   کارت
   ============================================================ */
.bm-card {
    background: var(--bm-surface);
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius);
    box-shadow: var(--bm-shadow-sm);
    transition: transform .2s, box-shadow .2s;
}
.bm-card:hover { transform: translateY(-3px); box-shadow: var(--bm-shadow); }

/* ============================================================
   دکمه‌ها
   ============================================================ */
.bm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--bm-radius-sm);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .2s;
    line-height: 1;
}
.bm-btn-primary { background: var(--bm-primary); color: #fff; }
.bm-btn-primary:hover { background: var(--bm-primary-dark); color: #fff; transform: translateY(-2px); }
.bm-btn-outline { background: transparent; color: var(--bm-primary); border-color: var(--bm-primary); }
.bm-btn-outline:hover { background: var(--bm-primary); color: #fff; }
.bm-btn-ghost { background: var(--bm-surface-2); color: var(--bm-text); }
.bm-btn-lg { padding: 16px 32px; font-size: 1.05rem; }

/* ============================================================
   اجزای کمکی
   ============================================================ */
.bm-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}
.bm-badge-primary { background: color-mix(in srgb, var(--bm-primary) 12%, transparent); color: var(--bm-primary); }
.bm-badge-accent { background: color-mix(in srgb, var(--bm-accent) 16%, transparent); color: var(--bm-accent); }
.bm-badge-success { background: color-mix(in srgb, var(--bm-success) 14%, transparent); color: var(--bm-success); }

.bm-skip-link {
    position: absolute;
    right: -9999px;
    top: 8px;
    background: var(--bm-primary);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    z-index: 9999;
}
.bm-skip-link:focus { right: 8px; }

/* ============================================================
   ریسپانسیو
   ============================================================ */
@media (max-width: 1024px) {
    .bm-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .bm-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    h1 { font-size: 1.7rem; }
    h2 { font-size: 1.4rem; }
    .bm-section { padding-block: 44px; }
    .bm-grid-2, .bm-grid-3, .bm-grid-4 { grid-template-columns: 1fr; }
}