/** * base.css — الأساسيات: تايبوغرافي، اتجاه، وصول. * الاتجاه RTL/LTR تلقائي: dir يأتي من حسب اللغة، وكل الخصائص منطقية. */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* منع التمرير الأفقي على الجوال (عناصر مخفية خارج الشاشة) */ html, body { overflow-x: clip; max-width: 100%; } body { margin: 0; font-family: var(--ff-ar); color: var(--text); background: var(--bg); line-height: 1.8; font-size: 17px; -webkit-font-smoothing: antialiased; } /* الخط حسب اللغة — أضف لغة جديدة بسطر واحد هنا */ body.lang-en { font-family: var(--ff-en); } h1, h2, h3, h4 { color: var(--navy); line-height: 1.35; margin: 0 0 .5em; } h1 { font-size: clamp(28px, 5vw, 46px); font-weight: 800; } h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; } h3 { font-size: 22px; font-weight: 700; } p { margin: 0 0 1em; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } ul, ol { padding-inline-start: 22px; } /* التخطيط العام */ .container { max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; } section { padding-block: var(--section-pad); } .section-pad { padding-block: var(--section-pad); } .section-soft { background: var(--bg-soft); } .section-blue { background: linear-gradient(135deg, var(--blue), var(--navy)); color: #fff; } .section-blue h2, .section-blue h3 { color: #fff; } .center, .tcenter { text-align: center; } .lead { font-size: 1.08rem; color: var(--muted); max-width: 760px; margin-inline: auto; } .eyebrow { display: inline-block; color: var(--gold-d); font-weight: 700; letter-spacing: .5px; background: rgba(181, 141, 75, .12); padding: 5px 14px; border-radius: 999px; font-size: .82rem; margin-bottom: 10px; } .section-head { text-align: center; max-width: 720px; margin: 0 auto 36px; } .grid { display: grid; gap: 22px; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } /* الوصول (Accessibility) */ .skip-link { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100000; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 8px; } .skip-link:focus { inset-inline-start: 0; } :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; } .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; position: absolute; } /* احترام تفضيل تقليل الحركة */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* المحتوى داخل المحرر */ .smc-content img { border-radius: 12px; } .entry-content { font-size: 1.06rem; line-height: 1.95; } .entry-content h2 { margin: 1.5em 0 .5em; font-size: 1.5rem; } .entry-content h3 { margin: 1.2em 0 .4em; font-size: 1.25rem; } .entry-content ul, .entry-content ol { margin-bottom: 1em; } /* الطباعة */ @media print { .topbar, .site-header, .site-footer, .wa-float { display: none !important; } }