/* ══════════════════════════════════════════════════════════════
   الموقع التعريفي — الأنماط التي لا يمكن وضعها inline
   (الحركات، حالات hover، والاستجابة للشاشات الصغيرة)
   ══════════════════════════════════════════════════════════════ */

@keyframes fadeUp   { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes floatY   { 0%, 100% { transform: translateY(0); }            50% { transform: translateY(-14px); } }
@keyframes floatY2  { 0%, 100% { transform: translateY(-8px) rotate(-4deg); } 50% { transform: translateY(10px) rotate(3deg); } }
@keyframes glowPulse{ 0%, 100% { box-shadow: 0 0 0 0 rgba(1,113,51,.4); } 55% { box-shadow: 0 0 0 14px rgba(1,113,51,0); } }

input:focus, select:focus { outline: 2px solid var(--navy2); outline-offset: -1px; }

/* ── حالات hover (كانت style-hover في ملف التصميم) ── */
.nav-link:hover        { color: var(--cta); }
.btn-ghost:hover       { border-color: var(--brand-fill); }
.btn-navy:hover        { filter: brightness(1.12); }
.btn-green:hover       { background: var(--cta-hover); transform: translateY(-2px); }
.btn-outline-w:hover   { border-color: var(--hero-text); background: rgba(255,255,255,.06); color: var(--hero-text); }
.chip-green:hover      { background: rgba(62,207,130,.12); color: var(--hero-accent); }

.feature-card {
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-lg);
  border-color: var(--card-hover-border);
}

.unit-row {
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.unit-row:hover {
  transform: translateX(-6px);
  border-color: var(--cta);
  box-shadow: var(--card-shadow-lg);
}

.plan-card { transition: transform .25s, box-shadow .25s; }
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-lg); }

.plan-btn { transition: filter .2s; }
.plan-btn:hover { filter: brightness(1.08); }

.footer-link:hover { color: #fff; opacity: 1; }

/* ── نائب الصورة حين لا تُرفع صورة بعد ── */
.img-slot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(1,113,51,.35), transparent 60%),
    linear-gradient(150deg, #0b2b4d, #062443 60%, #041a33);
  color: rgba(255,255,255,.34);
  font-size: 14px;
  text-align: center;
  padding: 20px;
  line-height: 1.9;
}
.img-slot::before {
  content: '∑';
  position: absolute;
  font-size: 120px;
  font-weight: 700;
  color: rgba(255,255,255,.05);
  pointer-events: none;
}
.img-slot-wrap { position: relative; overflow: hidden; display: flex; }
.img-slot-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* ── الشاشات الصغيرة ──
   التصميم مبني على flex-wrap فيتجاوب تلقائياً؛ هذه اللمسات
   تُصلح المقاسات الكبيرة التي لا تتقلص وحدها.
   العناوين لم تعد تُقاس هنا: hero-title و section-title تستعملان clamp()
   في الصفحة نفسها، فتتقلصان تدريجياً بدل القفز عند نقطة كسر. */
@media (max-width: 900px) {
  .site-header { padding-inline: 20px !important; }
  .site-nav { order: 3; width: 100%; justify-content: flex-start !important; gap: 18px !important; }
  .hero-wrap { padding: 56px 20px 70px !important; gap: 36px !important; }
  .section-wrap { padding-inline: 20px !important; }
  .float-card { display: none; }
  .cta-band { padding: 36px 24px !important; }
}

@media (max-width: 620px) {
  .hero-stats > * { min-width: 50% !important; }
  .glyph-float { display: none; }
  /* زرّا الدخول والتسجيل مع مبدّل المظهر يتجاوزان عرض الهاتف مجتمعين */
  .header-actions { flex-wrap: wrap; }
}

/* ── أهداف اللمس ──
   الروابط سطرية فلا يرفعها min-height وحده؛ inline-flex يمنحها ارتفاعاً. */
@media (pointer: coarse) {
  .nav-link, .footer-link, .chip-green, .site-brand,
  .btn-ghost, .btn-navy, .btn-outline-w, .btn-green, .plan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  /* «المنهج» و«الاشتراك» أقصر من 44px بحرف أو حرفين */
  .nav-link, .footer-link { min-width: 44px; }
}