/* =======================================================
   styles.css — تصميم موحد لموقع الدكتور حسام أبو صفية
   ======================================================= */

/* الألوان الأساسية */
:root {
  --bg: #f9fafb;
  --text: #222;
  --primary: #0d6efd;
  --card-bg: #ffffff;
  --card-border: #e9ecef;
  --muted: #6c757d;
}

/* الوضع الداكن */
[data-theme="dark"] {
  --bg: #121212;
  --text: #eee;
  --primary: #4dabf7;
  --card-bg: #1c1c1c;
  --card-border: #2a2a2a;
  --muted: #9aa0a6;
}

/* الخلفية والخط */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto;
  scroll-behavior: smooth;
}

/* روابط وصور */
a { text-decoration: none; transition: color .3s ease; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* أزرار */
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { filter: brightness(.95); }

/* =======================================================
   شريط التنقل (Navbar) - محسّن
   ======================================================= */
.navbar { 
  background-color: #ffffff !important; 
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
  backdrop-filter: blur(10px);
}
.navbar.navbar-light .navbar-toggler { border-color: rgba(0,0,0,.1); }
.navbar .navbar-brand { color: #0d6efd !important; font-weight: 700; }
.navbar .nav-link { 
  color: #333 !important; 
  font-weight: 500; 
  transition: color .3s ease;
  /* تصغير حجم الخط قليلاً لاستيعاب النصوص الطويلة */
  font-size: 0.9rem;
  padding: 0.5rem 0.7rem !important;
  white-space: nowrap;
}
.navbar .nav-link:hover, .navbar .nav-link.active { color: #0d6efd !important; }

/* السماح للقائمة بالالتفاف (wrap) عند الحاجة */
.navbar-nav {
  flex-wrap: wrap;
  gap: 0.2rem;
}

/* زر تبديل الثيم */
.theme-toggle {
  border: none; background: none; font-size: 1.2rem; 
  margin-inline-start: 10px; cursor: pointer;
}

/* الوضع الداكن */
[data-theme="dark"] .navbar {
  background-color: #1a1a1a !important;
  box-shadow: 0 2px 6px rgba(255,255,255,.05);
}
[data-theme="dark"] .navbar .nav-link { color: #e0e0e0 !important; }
[data-theme="dark"] .navbar .nav-link:hover,
[data-theme="dark"] .navbar .nav-link.active { color: #4dabf7 !important; }
[data-theme="dark"] .navbar .navbar-brand { color: #4dabf7 !important; }

/* لوجة زر الهامبرجر في الداكن (نعكس الأيقونة) */
[data-theme="dark"] .navbar .navbar-toggler-icon { filter: invert(1); }

/* تأثير أثناء التمرير */
.navbar.scrolled { background-color: rgba(255,255,255,.9) !important; }
[data-theme="dark"] .navbar.scrolled { background-color: rgba(26,26,26,.9) !important; }

/* أقسام عامة */
section { padding: 60px 0; }
footer { border-top: 1px solid var(--card-border); color: var(--muted); }

/* بطاقات */
.card, .testimonial {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  transition: transform .3s ease;
}
.card:hover, .testimonial:hover { transform: translateY(-3px); }

/* استجابة */
@media (max-width: 768px) {
  .navbar-brand { font-size: 1rem; }
  .navbar .nav-link { font-size: .85rem; padding: 0.4rem 0.5rem !important; }
}
/* ===== Footer style ===== */
.site-footer{
  border-top:none !important;
  background:#0b0b0b;
  color:#ccc;
  padding:18px 0;
  box-shadow:none !important;
}
.site-footer .footer-quote{
  margin:0;
  color:#bfbfbf;
}
[data-theme="light"] .site-footer{ background:#f8f9fa; color:#333; }
[data-theme="light"] .site-footer .footer-quote{ color:#555; }

/* ===== Odometer (flip/roll) ===== */
.visit-wrap{
  display:flex; align-items:center; gap:.6rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  padding:6px 10px; border-radius:999px;
}
[data-theme="light"] .visit-wrap{
  background:#fff; border-color:rgba(0,0,0,.08);
}
.visit-label{ font-size:.9rem; white-space:nowrap; }

.odo{
  display:flex; gap:4px; direction:ltr;  /* مهم لعرض الأرقام لليسار-إلى-اليمين */
  user-select:none;
}
.odo .d{
  width:22px; height:32px; overflow:hidden; position:relative;
  border-radius:6px; background:#1a1a1a;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="light"] .odo .d{
  background:#eef1f4; border-color:rgba(0,0,0,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.odo .roll{
  position:absolute; inset:0; display:flex; flex-direction:column;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.odo .cell{
  height:32px; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1rem; letter-spacing:.5px;
  color:#e9ecef;
}
[data-theme="light"] .odo .cell{ color:#212529; }

/* مسافة لطيفة بين العناصر في الشاشات الصغيرة */
@media (max-width: 576px){
  .visit-wrap{ padding:6px 8px }
  .odo .d{ width:20px; height:30px }
  .odo .cell{ height:30px; font-size:.95rem }
}


/* =======================================================
   إصلاح اتجاه القائمة العلوية حسب اللغة (RTL/LTR)
   + حل مشكلة الازدحام
   ======================================================= */

/* عند اللغة الإنجليزية (LTR) - القائمة على اليسار */
[dir="ltr"] .navbar-nav {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* عند اللغة العربية (RTL) - القائمة على اليمين */
[dir="rtl"] .navbar-nav {
    margin-right: auto !important;
    margin-left: 0 !important;
}

/* محاذاة القائمة المنسدلة */
[dir="ltr"] .navbar-collapse {
    justify-content: flex-end;
}

[dir="rtl"] .navbar-collapse {
    justify-content: flex-start;
}

/* محاذاة النصوص داخل الروابط */
[dir="ltr"] .nav-link {
    text-align: left;
}

[dir="rtl"] .nav-link {
    text-align: right;
}

/* إصلاح ترتيب العناصر في الشريط */
[dir="ltr"] .navbar .d-flex {
    flex-direction: row;
}

[dir="rtl"] .navbar .d-flex {
    flex-direction: row-reverse;
}

/* للجوالات - ضبط القائمة المنسدلة */
@media (max-width: 991px) {
    [dir="ltr"] .navbar-nav {
        align-items: flex-start;
    }
    
    [dir="rtl"] .navbar-nav {
        align-items: flex-end;
    }
}

/* =======================================================
   حل مشكلة الازدحام في القائمة
   ======================================================= */

/* للشاشات الكبيرة: تصغير المسافات بين العناصر */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }
}

/* للشاشات المتوسطة: السماح بسطرين إذا لزم الأمر */
@media (min-width: 992px) and (max-width: 1400px) {
    .navbar-nav {
        max-height: 80px;
        overflow: visible;
    }
    
    .navbar .nav-link {
        font-size: 0.85rem;
        padding: 0.4rem 0.5rem !important;
    }
}

/* للشاشات الصغيرة جداً: تصغير أكثر */
@media (min-width: 992px) and (max-width: 1200px) {
    .navbar .nav-link {
        font-size: 0.8rem;
        padding: 0.4rem 0.4rem !important;
    }
}

/* زيادة ارتفاع الـ navbar قليلاً لاستيعاب العناصر */
.navbar {
    min-height: 60px;
}

/* التأكد من أن container الـ navbar يستخدم كامل العرض */
.navbar > .container-fluid {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}