/* =========================================================
   نظام تصميم موحّد - المعهد المتوسط للعلوم الشرعية
   مشترك بين كل صفحات الموقع
   ========================================================= */

/* ====== تعريف خطوط ثمانية سانس (ThmanyahSans) ====== */
@font-face {
  font-family: 'ThmanyahSans';
  src: url('fonts/thmanyahsans-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'ThmanyahSans';
  src: url('fonts/thmanyahsans-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'ThmanyahSans';
  src: url('fonts/thmanyahsans-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'ThmanyahSans';
  src: url('fonts/thmanyahsans-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'ThmanyahSans';
  src: url('fonts/thmanyahsans-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}

/* ========================================================= */

:root{
  --white:#FFFFFF;
  --paper:#FBF8F3;
  --gray-light:#E5E7EB;
  --gray-soft:#F3F4F6;
  --gray-medium:#6B7280;
  --gray-dark:#374151;
  --ink:#1F2937;
  --beige:#D4A373;
  --beige-dark:#B68A5A;
  --beige-soft:#F4E7D6;
  --beige-glow: rgba(212,163,115,0.18);
  --green:#16A34A;
  --green-dark:#13843C;
  --danger:#DC2626;
  --danger-soft:#FEE2E2;
  --info:#2563EB;
  --info-soft:#DBEAFE;
  --transition:all .35s cubic-bezier(.2,.7,.2,1);
  --shadow-xs:0 1px 2px rgba(17,24,39,.04);
  --shadow:0 8px 24px rgba(17,24,39,.06);
  --shadow-md:0 14px 40px rgba(17,24,39,.08);
  --shadow-lg:0 24px 60px rgba(17,24,39,.12);
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:22px;
  --radius-pill:999px;
  --content-max:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;padding:0;
  /* تم تعيين خط ثمانية كخط أساسي هنا */
  font-family:'ThmanyahSans', 'Tajawal', 'KOSans', system-ui, sans-serif;
  color:var(--ink);
  background:var(--paper);
  direction:rtl;
  line-height:1.6;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.site-container{max-width:var(--content-max);margin:0 auto;padding:0 24px}

/* ====== رأس الصفحة (Page Hero) ====== */
.page-hero{
  background:
    radial-gradient(1200px 400px at 90% -20%, var(--beige-soft) 0%, transparent 60%),
    linear-gradient(180deg, #FFFCF6 0%, var(--paper) 100%);
  padding:64px 24px 48px;
  border-bottom:1px solid var(--gray-light);
  position:relative;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:url('https://www.transparenttextures.com/patterns/light-paper-fibers.png');
  opacity:.35;pointer-events:none;
}
.page-hero-inner{
  max-width:var(--content-max);margin:0 auto;
  position:relative;z-index:1;
  text-align:center;
}
.page-hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--beige-dark);
  background:var(--white);
  padding:8px 16px;border-radius:var(--radius-pill);
  border:1px solid var(--beige-soft);
  box-shadow:var(--shadow-xs);
  margin-bottom:18px;
}
.page-hero-eyebrow i{color:var(--beige)}
.page-hero h1{
  font-size:clamp(28px,4vw,44px);
  font-weight:800;color:var(--ink);
  margin:0 0 14px;letter-spacing:-.5px;
  line-height:1.25;
}
.page-hero p{
  max-width:680px;margin:0 auto;
  font-size:16px;color:var(--gray-medium);
  line-height:1.8;
}
.page-hero-deco{
  position:absolute;
  width:240px;height:240px;
  border-radius:50%;
  background:radial-gradient(circle, var(--beige-glow) 0%, transparent 70%);
  pointer-events:none;
  filter:blur(20px);
}
.page-hero-deco.left{ top:-80px; left:-80px; }
.page-hero-deco.right{ bottom:-100px; right:-60px; }

/* ====== Breadcrumb ====== */
.crumbs{
  display:flex;justify-content:center;align-items:center;gap:10px;
  font-size:13px;color:var(--gray-medium);
  margin-bottom:18px;flex-wrap:wrap;
}
.crumbs a{color:var(--beige-dark);font-weight:600;transition:var(--transition)}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{color:var(--gray-light)}

/* ====== أقسام الصفحة ====== */
.page-section{padding:56px 24px}
.page-section-tight{padding:32px 24px}
.section-head{margin-bottom:32px}
.section-eyebrow{
  display:inline-block;font-size:12px;font-weight:700;
  color:var(--beige-dark);letter-spacing:2px;text-transform:uppercase;
  margin-bottom:10px;
}
.section-title{
  font-size:28px;font-weight:800;color:var(--ink);
  margin:0 0 10px;letter-spacing:-.3px;
}
.section-sub{color:var(--gray-medium);margin:0;font-size:15px}

/* ====== البطاقات ====== */
.card{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:var(--shadow);
  border:1px solid var(--gray-light);
  position:relative;
  transition:var(--transition);
}
.card-bordered-top{border-top:4px solid var(--beige)}
.card:hover{box-shadow:var(--shadow-md)}

.subcard{
  background:var(--white);
  border:1px solid var(--gray-light);
  border-radius:var(--radius);
  padding:20px;
  transition:var(--transition);
}
.subcard:hover{
  border-color:var(--beige);
  box-shadow:var(--shadow);
  transform:translateY(-3px);
}

/* ====== أزرار ====== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:12px 22px;
  font-family:inherit;font-size:14px;font-weight:700;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:var(--transition);
  white-space:nowrap;
}
.btn-primary{
  background:var(--ink);color:var(--white);
}
.btn-primary:hover{
  background:#0F172A;transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(31,41,55,.25);
}
.btn-beige{
  background:var(--beige);color:var(--white);
}
.btn-beige:hover{
  background:var(--beige-dark);transform:translateY(-2px);
  box-shadow:0 10px 24px var(--beige-glow);
}
.btn-outline{
  background:var(--white);color:var(--ink);
  border-color:var(--gray-light);
}
.btn-outline:hover{
  border-color:var(--beige);color:var(--beige-dark);
}
.btn-green{
  background:var(--green);color:var(--white);
}
.btn-green:hover{background:var(--green-dark);transform:translateY(-2px)}
.btn-ghost{
  background:transparent;color:var(--gray-dark);
}
.btn-ghost:hover{background:var(--gray-soft)}
.btn-block{width:100%}
.btn-lg{padding:16px 28px;font-size:15px}
.btn-sm{padding:8px 14px;font-size:13px}
.btn:disabled, .btn.disabled{
  opacity:.55;cursor:not-allowed;pointer-events:none;
}

/* ====== شارات (Badges) ====== */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--radius-pill);
  font-size:12px;font-weight:700;
}
.badge-beige{background:var(--beige-soft);color:var(--beige-dark)}
.badge-soft{background:var(--gray-soft);color:var(--gray-dark)}
.badge-green{background:#DCFCE7;color:#166534}
.badge-info{background:var(--info-soft);color:var(--info)}

/* ====== نماذج ====== */
.field{margin-bottom:16px}
.field-label{
  display:block;font-size:13px;font-weight:700;
  color:var(--gray-dark);margin-bottom:8px;
}
.input, .select, .textarea{
  width:100%;
  padding:12px 16px;
  font-family:inherit;font-size:14px;
  border:1px solid var(--gray-light);
  border-radius:var(--radius);
  background:var(--white);
  color:var(--ink);
  transition:var(--transition);
}
.input:focus, .select:focus, .textarea:focus{
  outline:none;
  border-color:var(--beige);
  box-shadow:0 0 0 4px var(--beige-glow);
}
.textarea{min-height:120px;resize:vertical;line-height:1.7}
.field-hint{
  font-size:12px;color:var(--gray-medium);margin-top:6px;
}
.field-error{font-size:13px;color:var(--danger);margin-top:6px}

/* ====== شبكات شائعة ====== */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-auto-300{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grid-auto-260{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grid-auto-220{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* ====== تنبيهات ====== */
.alert{
  padding:14px 18px;border-radius:var(--radius);
  font-size:14px;display:flex;align-items:center;gap:10px;
  margin-bottom:18px;
}
.alert-success{background:#F0FDF4;color:#166534;border:1px solid #BBF7D0}
.alert-error{background:var(--danger-soft);color:#991B1B;border:1px solid #FCA5A5}
.alert-info{background:var(--info-soft);color:#1E40AF;border:1px solid #BFDBFE}
.alert-beige{background:var(--beige-soft);color:var(--beige-dark);border:1px solid #E8C9A4}

/* ====== فاصل ====== */
.divider{
  height:1px;background:var(--gray-light);
  margin:24px 0;border:0;
}
.divider-deco{
  display:flex;align-items:center;gap:14px;
  color:var(--beige-dark);
  margin:30px 0;
}
.divider-deco::before,.divider-deco::after{
  content:"";flex:1;height:1px;background:var(--gray-light);
}

/* ====== قائمة جميلة ====== */
.feat-list{list-style:none;padding:0;margin:0}
.feat-list li{
  position:relative;padding:8px 26px 8px 0;
  color:var(--gray-dark);font-size:14px;line-height:1.8;
}
.feat-list li::before{
  content:"\f058";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;right:0;top:10px;color:var(--beige);
}

/* ====== أدوات مساعدة ====== */
.text-center{text-align:center}
.text-right{text-align:right}
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}

/* ====== ظهور ناعم ====== */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.fade-in.show{opacity:1;transform:translateY(0)}

/* ====== الاستجابة ====== */
@media (max-width: 992px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-hero{padding:48px 20px 36px}
  .page-section{padding:40px 20px}
  .card{padding:24px}
}
@media (max-width: 640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .page-hero h1{font-size:26px}
  .section-title{font-size:22px}
  .card{padding:20px}
}