/* non-critical.css – INP SAFE – Fully Optimized */
/* تحميل ذكي – لا يؤثر على LCP / FCP / CLS */

/* ==================== HOVER ONLY FOR NON-TOUCH DEVICES ==================== */
@media (hover: hover) and (pointer: fine) {

  /* عناصر محددة فقط (بدون *) */
  .blogPosts .hentry,
  .card,
  .button,
  .img-link img {
    transition-duration: 0.3s;
  }

  /* ==================== الصور ==================== */
  .blogPosts .hentry:hover img {
    opacity: 0.98;
    transition: opacity .3s ease;
  }

  .img-link:hover img {
    opacity: 1.05;
  }

  .cust-widget.pt_4 .cust-post:hover .article-image img {
    opacity: 1.05;
  }

  /* ==================== البطاقات ==================== */
  .blogPosts .hentry {
    position: relative;
    z-index: 0;
  }

  .blogPosts .hentry:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,.12);
    z-index: 1;
  }

  .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,.15);
  }

  /* ==================== تحسين GPU للصور ==================== */
  .widget-content .cust-widget .cust-post img,
  .sidebar .itemPopular img,
  .itemFeatured .itemThumbnail img {
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .widget-content .cust-widget .cust-post:hover img {
    transform: scale(1.08) rotate(2deg);
    transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
  }

  .sidebar .itemPopular:hover img {
    transform: scale(1.08) rotate(-1deg);
  }

  .itemFeatured:hover .itemThumbnail img {
    transform: scale(1.06) rotate(0.8deg);
  }

  /* ==================== القوائم ==================== */
  .menu li.drop-menu:hover > ul {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity .3s ease, transform .3s ease;
  }

  .menu li.drop-menu .bot-menu:hover > ul {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }

  .htmlMenu .link:hover .name {
    color: #2962ff;
    transform: translateX(-3px);
  }

  .menu li.drop-menu:hover > span.down svg,
  .menu li.drop-menu .bot-menu:hover > span.down svg {
    fill: #2962ff;
    transform: rotate(180deg);
  }

  /* ==================== الأزرار ==================== */
  .button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(41,98,255,.2);
    background-color: #1a4fd8;
  }

  .button.outline:hover {
    border-color: #2962ff;
    color: #2962ff;
    background-color: rgba(41,98,255,.05);
  }

  .button.whatsapp:hover { background-color:#128C7E; }
  .button.facebook:hover { background-color:#3b5998; }
  .button.youtube:hover  { background-color:#FF0000; }

  /* ==================== الروابط ==================== */
  a:hover { color: #2962ff; }

  .postTitle a:hover {
    color: #1a4fd8;
    text-decoration: underline;
  }

  .onHome .blogPosts .hentry h3.post-title a:hover,
  .onHome .blogPosts .hentry h3.entry-title a:hover,
  .onBlog .blogPosts .hentry h3.post-title a:hover,
  .onBlog .blogPosts .hentry h3.entry-title a:hover {
    text-decoration: underline;
    color: #2962ff;
  }

  /* ==================== المشاركة ==================== */
  .sharing_button:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
  }

  /* ==================== التعليقات ==================== */
  .comment-avatar:hover {
    transform: scale(1.08);
    opacity: 1.05;
  }

  /* ==================== الجداول ==================== */
  table tr:hover td {
    background-color: #f5f9ff;
  }

  /* ==================== مؤثرات محدودة ==================== */
  .related li:hover .postThumbnail img {
    transform: scale(1.08) rotate(1.5deg);
    opacity: 1.05;
  }
} /* END hover devices */

/* ==================== الوصول ==================== */
a:focus,
button:focus,
input:focus {
  outline: 3px solid #2962ff;
  outline-offset: 3px;
}

/* ==================== تقليل الحركة ==================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ==================== تعطيل hover على الجوال ==================== */
@media (max-width: 768px) {
  .blogPosts .hentry:hover,
  .card:hover,
  .related li:hover {
    transform: none !important;
  }
}

/* ================= NON-CRITICAL CONTENT ================= */

.highlight-box,
.intro-box,
.update-notice,
.warning-box,
.related-articles,
.faq-container {
  border-radius:10px;
  padding:20px;
  margin:25px 0;
  background:#fff;
  border:1px solid #e0e0e0;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

/* === TABLES === */
table {
  width:100%;
  border-collapse:collapse;
  margin:25px 0;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
th {
  background:#607d8b;
  color:#fff;
  padding:15px;
  text-align:right;
  font-weight:600;
}
td {
  padding:15px;
  background:#fff;
  border-bottom:1px solid #eee;
}

/* === ZODIAC / LINKS === */
.zodiac-grid a {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:15px;
  background:#fff;
  border-radius:10px;
  text-decoration:none;
  color:#37474f;
  text-align:center;
  box-shadow:0 3px 10px rgba(0,0,0,.05);
  border-right:4px solid #90a4ae;
  font-weight:600;
  gap:8px;
}

.zodiac-links a {
  background:#fff;
  padding:10px 20px;
  border-radius:50px;
  text-decoration:none;
  color:#37474f;
  font-weight:600;
  border:1px solid #90a4ae;
}

/* === FOOTER === */
footer {
  text-align:center;
  margin-top:50px;
  padding-top:25px;
  border-top:1px solid #ddd;
  color:#777;
  font-size:.9em;
}

/* === MOBILE CONTENT === */
@media (max-width:768px){
  body { padding:15px }
  h1 { font-size:1.8em }
  table { font-size:.9em }
  td,th { padding:10px }

  .highlight-box,
  .intro-box,
  .update-notice,
  .warning-box,
  .related-articles,
  .faq-container {
    padding:15px;
    margin:20px 0;
  }
}