/* =============================================
   performance.css — إضافات الأداء والسرعة
   أضفه كـ <link> أخير في header.php
   ============================================= */

/* ─── Lazy Loading Placeholder ─────────────── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}
img[loading="lazy"].loaded {
  opacity: 1;
}

/* ─── Prevent Layout Shift ──────────────────── */
.company-logo,
.company-logo-placeholder,
.job-detail-logo,
.job-detail-logo-placeholder {
  aspect-ratio: 1;
  contain: layout;
}

/* ─── Font Display Swap ─────────────────────── */
@font-face {
  font-display: swap;
}

/* ─── Critical CSS: Above the fold ──────────── */
.site-header {
  contain: layout style;
}

.hero {
  content-visibility: visible;
}

/* بعد الـ fold — defer rendering */
.site-footer-new,
.footer-newsletter-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

.featured-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 300px;
}

/* ─── Reduce Paint ───────────────────────────── */
.job-card {
  will-change: transform;
  backface-visibility: hidden;
}

/* ─── Skeleton Loading ───────────────────────── */
.skeleton-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.skel {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}
.skel-title   { height: 20px; width: 60%; margin-bottom: 8px; }
.skel-sub     { height: 14px; width: 40%; margin-bottom: 14px; }
.skel-meta    { height: 12px; width: 80%; margin-bottom: 6px; }
.skel-actions { height: 36px; width: 30%; margin-top: 12px; }

@keyframes shimmer {
  to { background-position: -200% 0; }
}