/* ============================================
   components/Base.css - استایل‌های پایه و گرید
   ============================================ */
@font-face { font-family: 'Vazirmatn'; src: url('/media/fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('/media/fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
    --primary-blue: #4A90E2; --primary-dark: #1a2a3a; --text-dark: #222;
    --bg-light: #f5f5f5; --bg-white: #ffffff;
    --gap-sm: 0.3125rem; --gap-md: 0.625rem; --gap-lg: 1rem; --gap-xl: 1.5rem; --gap-2xl: 2rem;
    --radius-md: 12px; --radius-lg: 16px;
}
html { font-size: 12px; scroll-behavior: smooth; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Vazirmatn', Tahoma, sans-serif; background: var(--bg-light); line-height: 1.6; color: var(--text-dark); }
a { color: var(--primary-blue); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: #3a7bc8; }
img { max-width: 100%; height: auto; display: block; }

/* ===== چیدمان اصلی (Grid) ===== */
.container { display: grid; min-height: 100vh; gap: var(--gap-sm); grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr; grid-template-areas: "TopIcons" "header" "subnav" "main"; }
.sidebar, .aside { display: none; }
.main { grid-area: main; background: #fff; padding: var(--gap-xl) var(--gap-lg); box-shadow: 0 2px 10px rgba(0,0,0,0.05); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

/* ===== ریسپانسیو ===== */
@media(max-width: 767px) {
    .main { padding: 1.5rem 0.5rem; }
    .main h2, .main p, .main h3, .main ul { padding-right: 1.5rem; padding-left: 1.5rem; }
}
@media(min-width: 768px) {
    .container { grid-template-columns: 14rem 1fr; grid-template-areas: "TopIcons TopIcons" "header header" "subnav subnav" "sidebar main"; }
    .sidebar { grid-area: sidebar; display: block; background: #f0f8f5; padding: var(--gap-lg); }
    .sidebar h3 { font-size: 1.3rem; color: #1a7a42; border-bottom: 2px solid #cde8da; padding-bottom: 0.5rem; margin-bottom: 1rem; }
    .sidebar ul { list-style: none; padding: 0; }
    .sidebar ul li { font-size: 1.05rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
    .main { padding: var(--gap-xl); }
    .main h2, .main p, .main h3, .main ul { padding-right: 0; padding-left: 0; }
}
@media(min-width: 1024px) {
    .container { grid-template-columns: 15rem 1fr 14rem; grid-template-areas: "TopIcons TopIcons TopIcons" "header header header" "subnav subnav subnav" "sidebar main aside"; }
    .aside { grid-area: aside; display: block; background: #f8f4e8; padding: var(--gap-xl); }
    .aside h3 { font-size: 1.3rem; color: #8b5e3c; border-bottom: 2px solid #ecdcc9; padding-bottom: 0.5rem; margin-bottom: 1rem; }
    .aside ul { list-style: none; padding: 0; }
    .aside ul li { font-size: 1.05rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
}