/* =========================================================
   Derradj Academy — Shared site header
   Single source of truth for the header's own look (the base
   .main-header / .left-section / .search-box / .btn / .login
   layout rules live in /style.css and are already shared).
   Injected by /js/header.js into every page's <div id="site-header">.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');

#searchInput::placeholder {
  text-align: right;
  direction: rtl;
  padding-right: 4px;
}

/* === استعمال نفس نوع خط الشعار (Cairo) في كامل الهيدر === */
.main-header {
  font-family: 'Cairo', Arial, sans-serif;
}
.left-section .logo {
  font-family: 'Cairo', Arial, sans-serif;
  font-weight: 800;
}

#mainNav.right-links .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 400;
  font-size: 0.93rem;
  color: #111111;
  text-decoration: none;
  transition: color 0.25s ease-in-out, transform 0.2s ease-in-out;
}
#mainNav.right-links .nav-link:hover {
  color: #333333;
  transform: translateY(-1px);
}
#mainNav.right-links .nav-link.active {
  color: #651fff;
  font-weight: 700;
}

/* === عكس ترتيب عناصر الـheader (Logo يمين، الأزرار يسار) على غرار derradj shop === */
@media (min-width: 768px) {
  .left-section { order: 3; }
  .search-box { order: 2; }
  .right-links { order: 1; }

  .right-links .signup { order: 1; }
  .right-links .login { order: 2; }
  .right-links a[href*="student-feedback"] { order: 3; }
  .right-links a[href="/index.html#support"] { order: 4; }
  .right-links a[href="/about/"] { order: 5; }
  .right-links a[href="/how-to-register/"] { order: 6; }
}