/* ================================================
   Mateen Academic Program — زخارف إسلامية
   islamic.css — متوافق مع هوية البراند
   أIfان: beige light → dark brown dark، gold، أخضر في أماكن قليلة
   ================================================ */

:root {
  --accent-green:      #2d6e45;
  --accent-green-soft: rgba(45,110,69,0.10);
  --zukhruf-border:    rgba(201,162,39,0.4);
  --brand-light:       #fdf8f0;   /* أفتح */
  --brand-mid:         #ede0cc;   /* beige Center */
  --brand-dark:        #5c3d2e;   /* dark brown متCenter */
  --brand-darkest:     #2c1a0e;   /* dark brown dark */
}

/* ════════════════════════════════════════════════
   1. Page background — تدرج light + أعرابيسك خفي
   ════════════════════════════════════════════════ */
body {
  background: linear-gradient(160deg,
    #fdf6ec 0%,
    #f7efe3 40%,
    #f0e4d0 70%,
    #e8d5b8 100%
  );
  min-height: 100vh;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='none' stroke='%235c3d2e' stroke-width='1'%3E%3Crect x='8' y='8' width='84' height='84' rx='3'/%3E%3Crect x='20' y='20' width='60' height='60' rx='3' transform='rotate(45 50 50)'/%3E%3Ccircle cx='50' cy='50' r='18'/%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Cline x1='50' y1='8' x2='50' y2='92'/%3E%3Cline x1='8' y1='50' x2='92' y2='50'/%3E%3Cline x1='22' y1='22' x2='78' y2='78'/%3E%3Cline x1='78' y1='22' x2='22' y2='78'/%3E%3Cpolygon points='50,8 56,30 80,30 61,44 68,66 50,53 32,66 39,44 20,30 44,30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100px 100px;
}

/* ════════════════════════════════════════════════
   3. شريط Basmala — dark brown dark (الأقل مساحة)
   ════════════════════════════════════════════════ */
.basmala-bar {
    background: linear-gradient(135deg, #f7ecd9 0%, #ecdbb8 50%, #f7ecd9 100%);
    text-align: center;
    padding: 9px 20px;
    font-family: 'Amiri', serif;
    font-size: 17px;
    color: var(--brand-darkest);
    letter-spacing: 3px;
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid var(--gold);
}

.basmala-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;
    mix-blend-mode: multiply;
    background-image:
        url("../star-ornament.png"),
        url("../star-ornament.png"),
        url("../star-ornament.png"),
        url("../star-ornament.png"),
        url("../star-ornament.png");
    background-repeat: no-repeat;
    background-position:
        3% 50%,
        26% 50%,
        50% 50%,
        74% 50%,
        97% 50%;
    background-size:
        20px 20px,
        14px 14px,
        24px 24px,
        15px 15px,
        19px 19px;
}

.basmala-bar .bsm-ornament {
    color: var(--brand-darkest);
    font-size: 18px;
    margin: 0 14px;
    opacity: 0.85;
}
/* ════════════════════════════════════════════════
   4. the nav
   ════════════════════════════════════════════════ */
nav {
  position: relative;
  border-bottom: 2px solid var(--gold) !important;
}
nav::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right,
    transparent 0%, var(--gold) 50%, transparent 100%);
  opacity: 0.5;
}

/* ════════════════════════════════════════════════
   5. page-hero / teacher-hero only (not/don't home hero)
   ════════════════════════════════════════════════ */
.page-hero,
.teacher-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--gold) !important;
}
.page-hero::after,
.teacher-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image:
    url("../star-ornament-transparent.png"),
    url("../star-ornament-transparent.png"),
    url("../star-ornament-transparent.png"),
    url("../star-ornament-transparent.png"),
    url("../star-ornament-transparent.png"),
    url("../star-ornament-transparent.png");
  background-repeat: no-repeat;
  background-position:
    6% 20%,
    88% 15%,
    18% 75%,
    46% 42%,
    72% 68%,
    94% 85%;
  background-size:
    55px 55px,
    70px 70px,
    42px 42px,
    85px 85px,
    50px 50px,
    65px 65px;
}
.page-hero::before,
.teacher-hero::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(201,162,39,0.35);
  pointer-events: none;
  z-index: 1;
  border-radius: 6px;
}
.page-hero > *,
.teacher-hero > * {
  position: relative;
  z-index: 2;
}

/* ════════════════════════════════════════════════
   6. section-title
   ════════════════════════════════════════════════ */
.section-title {
  position: relative;
  padding-bottom: 10px !important;
}
.section-title::before,
.section-title::after {
  content: '✦ ❧ ✦' !important;
  color: var(--gold) !important;
  font-size: 13px !important;
  letter-spacing: 3px;
}
.section-title::after {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  content: '' !important;
  width: 60px !important;
  height: 2px !important;
  background: linear-gradient(to right, var(--brand-dark), var(--gold), var(--brand-dark)) !important;
  border-radius: 2px !important;
}

/* ════════════════════════════════════════════════
   7. فاصل مزخرف
   ════════════════════════════════════════════════ */
.islamic-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 8px 24px;
}
.islamic-divider::before,
.islamic-divider::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(to var(--dir, left),
    transparent 0%, var(--gold) 100%);
}
.islamic-divider::before { --dir: right; }
.islamic-divider span {
  color: var(--gold);
  font-size: 20px;
  letter-spacing: 8px;
  user-select: none;
  text-shadow: 0 0 8px rgba(201,162,39,0.4);
}

/* ════════════════════════════════════════════════
   8. شريط آية — dark brown داكن (الأقل)
   ════════════════════════════════════════════════ */
.aya-banner {
  background: linear-gradient(135deg, var(--brand-darkest) 0%, var(--brand-dark) 100%);
  padding: 20px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
}
.aya-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Ccircle cx='25' cy='25' r='10' fill='none' stroke='%23c9a227' stroke-width='1.5'/%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%23c9a227' stroke-width='0.8'/%3E%3Cline x1='25' y1='5' x2='25' y2='45' stroke='%23c9a227' stroke-width='0.8'/%3E%3Cline x1='5' y1='25' x2='45' y2='25' stroke='%23c9a227' stroke-width='0.8'/%3E%3C/svg%3E");
  background-size: 50px 50px;
}
.aya-banner::after {
  content: '❦';
  position: absolute;
  right: 32px; top: 50%;
  transform: translateY(-50%);
  color: rgba(201,162,39,0.5);
  font-size: 28px;
  z-index: 1;
}
.aya-text {
  font-family: 'Amiri', serif;
  font-size: 20px;
  color: var(--gold-light);
  display: block;
  margin-bottom: 5px;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
.aya-ref {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  position: relative;
  z-index: 2;
}

/* ════════════════════════════════════════════════
   9. section-head — إطار gold
   ════════════════════════════════════════════════ */
.t-section-head,
.section-head {
  position: relative;
  border-right: 4px solid var(--gold) !important;
}
.t-section-head::after,
.section-head::after {
  content: '✦';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(201,162,39,0.5);
  font-size: 12px;
}

/* ════════════════════════════════════════════════
   10. footer — dark brown dark (الأقل)
   ════════════════════════════════════════════════ */
footer {
  border-top: 3px solid var(--gold) !important;
  position: relative;
}
footer::before {
  content: '✦  ❦  ✦  ❦  ✦  ❦  ✦  ❦  ✦  ❦  ✦';
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-darkest);
  color: var(--gold);
  font-size: 11px;
  padding: 0 12px;
  letter-spacing: 4px;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════
   11. البطاقات
   ════════════════════════════════════════════════ */
.path-card,
.teacher-card,
.ann-card,
.sched-card {
  border-top: 2px solid rgba(201,162,39,0.3) !important;
  transition: all 0.25s ease !important;
}
.path-card:hover,
.teacher-card:hover,
.ann-card:hover {
  border-top-color: var(--gold) !important;
  border-color: rgba(201,162,39,0.55) !important;
  box-shadow: 0 6px 24px rgba(201,162,39,0.18) !important;
  transform: translateY(-3px) !important;
}

/* ════════════════════════════════════════════════
   12. breadcrumb
   ════════════════════════════════════════════════ */
.breadcrumb {
  border-bottom: 2px solid rgba(201,162,39,0.3) !important;
  border-right: 4px solid var(--gold) !important;
}

/* ════════════════════════════════════════════════
   13. badge أخضر — في أماكن قليلة only
   ════════════════════════════════════════════════ */
.badge-done,
.badge-accepted,
.att-badge.present,
.grade-pct.high {
  background: var(--accent-green-soft) !important;
  color: var(--accent-green) !important;
  border: 1px solid rgba(45,110,69,0.25) !important;
}

/* ════════════════════════════════════════════════
   14. ornament-badge
   ════════════════════════════════════════════════ */
.ornament-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201,162,39,0.1);
  border: 1px solid rgba(201,162,39,0.4);
  color: var(--gold);
  padding: 5px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-family: 'Amiri', serif;
}
.ornament-badge::before { content: '✦'; font-size: 10px; }
.ornament-badge::after  { content: '✦'; font-size: 10px; }

/* ════════════════════════════════════════════════
   15. logo-circle
   ════════════════════════════════════════════════ */
.logo-circle {
  border: 2px solid var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201,162,39,0.15),
              0 0 12px rgba(201,162,39,0.2) !important;
}

/* ════════════════════════════════════════════════
   Responsive
   ════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body::after { width: 24px; }
  .islamic-divider { margin: 12px 0 !important; }
  .aya-banner { padding: 14px 12px !important; }
  .aya-text { font-size: 15px !important; }
}
@media (max-width: 480px) {
  body::after { display: none; }
  .aya-text { font-size: 13px !important; }
  footer::before { font-size: 9px; letter-spacing: 2px; }
}