/* Unified visual template for all legal article pages under /posts/.
   الهدف: جعل جميع المقالات تظهر بنفس قالب مقالة الجرائم الإلكترونية:
   هيرو علوي، بطاقة محتوى بيضاء، عناوين بحد ذهبي، وروابط داخلية واضحة. */

body.posts-page,
html:has(link[rel="canonical"][href*="/posts/"]) body {
  background:
    radial-gradient(circle at 12% 8%, rgba(23,61,110,.10), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(199,146,16,.10), transparent 32%),
    linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%) !important;
  color: #1e293b !important;
}

body.posts-page .page-shell,
html:has(link[rel="canonical"][href*="/posts/"]) .page-shell,
body.posts-page main.page-shell,
html:has(link[rel="canonical"][href*="/posts/"]) main.page-shell {
  max-width: 1120px !important;
  margin-inline: auto !important;
  padding: 18px 14px 52px !important;
}

body.posts-page .breadcrumb,
html:has(link[rel="canonical"][href*="/posts/"]) .breadcrumb,
body.posts-page .yl-post-breadcrumb,
html:has(link[rel="canonical"][href*="/posts/"]) .yl-post-breadcrumb {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 14px !important;
  padding: 10px 14px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  color: #475569 !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.06) !important;
}

body.posts-page .breadcrumb a,
html:has(link[rel="canonical"][href*="/posts/"]) .breadcrumb a,
body.posts-page .yl-post-breadcrumb a,
html:has(link[rel="canonical"][href*="/posts/"]) .yl-post-breadcrumb a {
  color: #143B68 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

body.posts-page .hero.hero-modern,
html:has(link[rel="canonical"][href*="/posts/"]) .hero.hero-modern,
html:has(link[rel="canonical"][href*="/posts/"]) main.page-shell > article.section-card > .section-head:first-child {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  padding: 32px 24px !important;
  background: linear-gradient(135deg, #143B68 0%, #0A2342 62%, #C9932A 145%) !important;
  box-shadow: 0 22px 56px rgba(15, 23, 42, .18) !important;
  border: 0 !important;
  color: #fff !important;
  margin-bottom: 18px !important;
}

body.posts-page .hero.hero-modern::before,
html:has(link[rel="canonical"][href*="/posts/"]) .hero.hero-modern::before,
html:has(link[rel="canonical"][href*="/posts/"]) main.page-shell > article.section-card > .section-head:first-child::before {
  content: "" !important;
  position: absolute !important;
  inset: auto auto -80px -80px !important;
  width: 220px !important;
  height: 220px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  pointer-events: none !important;
}

body.posts-page .hero.hero-modern h1,
body.posts-page .hero.hero-modern p,
body.posts-page .hero.hero-modern .hero-motto,
html:has(link[rel="canonical"][href*="/posts/"]) .hero.hero-modern h1,
html:has(link[rel="canonical"][href*="/posts/"]) .hero.hero-modern p,
html:has(link[rel="canonical"][href*="/posts/"]) .hero.hero-modern .hero-motto,
html:has(link[rel="canonical"][href*="/posts/"]) main.page-shell > article.section-card > .section-head:first-child h1,
html:has(link[rel="canonical"][href*="/posts/"]) main.page-shell > article.section-card > .section-head:first-child p {
  color: #ffffff !important;
}

body.posts-page .hero.hero-modern h1,
html:has(link[rel="canonical"][href*="/posts/"]) .hero.hero-modern h1,
html:has(link[rel="canonical"][href*="/posts/"]) main.page-shell > article.section-card > .section-head:first-child h1 {
  font-size: clamp(1.8rem, 4vw, 2.7rem) !important;
  line-height: 1.5 !important;
  margin: 12px 0 8px !important;
  font-weight: 900 !important;
}

body.posts-page .hero.hero-modern p,
html:has(link[rel="canonical"][href*="/posts/"]) .hero.hero-modern p,
html:has(link[rel="canonical"][href*="/posts/"]) main.page-shell > article.section-card > .section-head:first-child p {
  line-height: 2 !important;
  font-weight: 750 !important;
  margin: 0 !important;
  max-width: 960px !important;
}

body.posts-page .hero-badge,
body.posts-page .case-card-badge,
html:has(link[rel="canonical"][href*="/posts/"]) .hero-badge,
html:has(link[rel="canonical"][href*="/posts/"]) .case-card-badge {
  display: inline-flex !important;
  align-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  background: rgba(255, 255, 255, .14) !important;
  color: #FFF3C4 !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  font-weight: 900 !important;
}

body.posts-page .post-meta,
body.posts-page .hero-motto,
html:has(link[rel="canonical"][href*="/posts/"]) .post-meta,
html:has(link[rel="canonical"][href*="/posts/"]) .hero-motto {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  font-weight: 900 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

body.posts-page .section-card,
html:has(link[rel="canonical"][href*="/posts/"]) .section-card {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 26px !important;
  box-shadow: 0 18px 46px rgba(15,23,42,.10) !important;
  overflow: visible !important;
}

body.posts-page .section-head h2,
body.posts-page .section-head p,
html:has(link[rel="canonical"][href*="/posts/"]) .section-head h2,
html:has(link[rel="canonical"][href*="/posts/"]) .section-head p {
  color: #0f172a !important;
}

body.posts-page article.case-card,
body.posts-page .case-card.post-card,
body.posts-page article.research-paper,
body.posts-page .post-content,
body.posts-page .legal-article-content,
html:has(link[rel="canonical"][href*="/posts/"]) article.case-card,
html:has(link[rel="canonical"][href*="/posts/"]) .case-card.post-card,
html:has(link[rel="canonical"][href*="/posts/"]) article.research-paper,
html:has(link[rel="canonical"][href*="/posts/"]) .post-content,
html:has(link[rel="canonical"][href*="/posts/"]) .legal-article-content {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.08) !important;
  padding: 24px !important;
  line-height: 2.05 !important;
  overflow: visible !important;
  font-size: 18px !important;
  margin-top: 18px !important;
}

body.posts-page article.research-paper::before,
html:has(link[rel="canonical"][href*="/posts/"]) article.research-paper::before {
  display: none !important;
  content: none !important;
}

body.posts-page article.case-card h2,
body.posts-page .post-content h2,
body.posts-page .legal-article-content h2,
body.posts-page article.research-paper .research-heading,
html:has(link[rel="canonical"][href*="/posts/"]) article.case-card h2,
html:has(link[rel="canonical"][href*="/posts/"]) .post-content h2,
html:has(link[rel="canonical"][href*="/posts/"]) .legal-article-content h2,
html:has(link[rel="canonical"][href*="/posts/"]) article.research-paper .research-heading {
  margin: 26px 0 12px !important;
  padding: 0 13px 0 0 !important;
  border-right: 5px solid #C9932A !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #0f172a !important;
  font-size: clamp(1.22rem, 2.6vw, 1.55rem) !important;
  line-height: 1.85 !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

body.posts-page article.research-paper .research-subheading,
body.posts-page article.case-card h3,
body.posts-page .post-content h3,
body.posts-page .legal-article-content h3,
html:has(link[rel="canonical"][href*="/posts/"]) article.research-paper .research-subheading,
html:has(link[rel="canonical"][href*="/posts/"]) article.case-card h3,
html:has(link[rel="canonical"][href*="/posts/"]) .post-content h3,
html:has(link[rel="canonical"][href*="/posts/"]) .legal-article-content h3 {
  margin: 20px 0 9px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #143B68 !important;
  font-size: 1.16rem !important;
  line-height: 1.85 !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

body.posts-page article.case-card p,
body.posts-page article.case-card li,
body.posts-page .post-content p,
body.posts-page .post-content li,
body.posts-page .legal-article-content p,
body.posts-page .legal-article-content li,
body.posts-page article.research-paper .research-line,
html:has(link[rel="canonical"][href*="/posts/"]) article.case-card p,
html:has(link[rel="canonical"][href*="/posts/"]) article.case-card li,
html:has(link[rel="canonical"][href*="/posts/"]) .post-content p,
html:has(link[rel="canonical"][href*="/posts/"]) .post-content li,
html:has(link[rel="canonical"][href*="/posts/"]) .legal-article-content p,
html:has(link[rel="canonical"][href*="/posts/"]) .legal-article-content li,
html:has(link[rel="canonical"][href*="/posts/"]) article.research-paper .research-line {
  color: #1e293b !important;
  font-size: 18px !important;
  line-height: 2.05 !important;
  margin-bottom: 13px !important;
  text-align: justify !important;
  text-justify: inter-word !important;
  white-space: normal !important;
}

body.posts-page article.case-card ul,
body.posts-page article.case-card ol,
body.posts-page .post-content ul,
body.posts-page .post-content ol,
body.posts-page .legal-article-content ul,
body.posts-page .legal-article-content ol,
html:has(link[rel="canonical"][href*="/posts/"]) article.case-card ul,
html:has(link[rel="canonical"][href*="/posts/"]) article.case-card ol,
html:has(link[rel="canonical"][href*="/posts/"]) .post-content ul,
html:has(link[rel="canonical"][href*="/posts/"]) .post-content ol,
html:has(link[rel="canonical"][href*="/posts/"]) .legal-article-content ul,
html:has(link[rel="canonical"][href*="/posts/"]) .legal-article-content ol {
  padding-inline-start: 22px !important;
  margin: 12px 0 18px !important;
}

body.posts-page article.research-paper .research-label,
body.posts-page article.research-paper .research-listlike,
html:has(link[rel="canonical"][href*="/posts/"]) article.research-paper .research-label,
html:has(link[rel="canonical"][href*="/posts/"]) article.research-paper .research-listlike {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #1e293b !important;
  font-weight: 900 !important;
  text-align: right !important;
}

body.posts-page .post-note,
body.posts-page .research-note,
html:has(link[rel="canonical"][href*="/posts/"]) .post-note,
html:has(link[rel="canonical"][href*="/posts/"]) .research-note {
  background: #FFF8E8 !important;
  border: 1px solid #E8C66A !important;
  color: #5A410A !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  line-height: 2 !important;
  font-weight: 800 !important;
}

body.posts-page .research-author-card .info-box,
html:has(link[rel="canonical"][href*="/posts/"]) .research-author-card .info-box {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.08) !important;
}

body.posts-page .research-author-card strong,
body.posts-page .research-author-card .info-label,
html:has(link[rel="canonical"][href*="/posts/"]) .research-author-card strong,
html:has(link[rel="canonical"][href*="/posts/"]) .research-author-card .info-label {
  color: #143B68 !important;
}

body.posts-page .post-service-actions,
body.posts-page .hero .seo-internal-links-grid,
body.posts-page .section-card > .seo-internal-links-grid,
html:has(link[rel="canonical"][href*="/posts/"]) .post-service-actions,
html:has(link[rel="canonical"][href*="/posts/"]) .hero .seo-internal-links-grid,
html:has(link[rel="canonical"][href*="/posts/"]) .section-card > .seo-internal-links-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

body.posts-page .seo-internal-link,
html:has(link[rel="canonical"][href*="/posts/"]) .seo-internal-link {
  min-height: 44px !important;
  border-radius: 16px !important;
  font-weight: 900 !important;
  text-align: center !important;
}

body.posts-page .seo-internal-links-grid .seo-internal-link,
body.posts-page a.seo-internal-link:not(.service-contact-button),
html:has(link[rel="canonical"][href*="/posts/"]) .seo-internal-links-grid .seo-internal-link,
html:has(link[rel="canonical"][href*="/posts/"]) a.seo-internal-link:not(.service-contact-button) {
  color: #fff !important;
  background: linear-gradient(135deg, #143B68, #2D6DB5) !important;
  border-color: rgba(37,99,235,.28) !important;
}

body.posts-page a.service-contact-button,
body.posts-page .service-contact-button,
html:has(link[rel="canonical"][href*="/posts/"]) a.service-contact-button,
html:has(link[rel="canonical"][href*="/posts/"]) .service-contact-button {
  color: #073B35 !important;
  background: linear-gradient(135deg, #EAF7F2, #C4E8DC) !important;
  border-color: rgba(15,118,110,.28) !important;
}

@media (max-width: 860px) {
  body.posts-page .page-shell,
  html:has(link[rel="canonical"][href*="/posts/"]) .page-shell,
  body.posts-page main.page-shell,
  html:has(link[rel="canonical"][href*="/posts/"]) main.page-shell {
    padding-inline: 10px !important;
  }

  body.posts-page .hero.hero-modern,
  html:has(link[rel="canonical"][href*="/posts/"]) .hero.hero-modern,
  html:has(link[rel="canonical"][href*="/posts/"]) main.page-shell > article.section-card > .section-head:first-child {
    padding: 24px 16px !important;
    border-radius: 22px !important;
  }

  body.posts-page .section-card,
  body.posts-page article.case-card,
  body.posts-page article.research-paper,
  body.posts-page .post-content,
  body.posts-page .legal-article-content,
  html:has(link[rel="canonical"][href*="/posts/"]) .section-card,
  html:has(link[rel="canonical"][href*="/posts/"]) article.case-card,
  html:has(link[rel="canonical"][href*="/posts/"]) article.research-paper,
  html:has(link[rel="canonical"][href*="/posts/"]) .post-content,
  html:has(link[rel="canonical"][href*="/posts/"]) .legal-article-content {
    border-radius: 18px !important;
    padding: 17px !important;
  }

  body.posts-page article.case-card p,
  body.posts-page article.case-card li,
  body.posts-page .post-content p,
  body.posts-page .post-content li,
  body.posts-page .legal-article-content p,
  body.posts-page .legal-article-content li,
  body.posts-page article.research-paper .research-line,
  html:has(link[rel="canonical"][href*="/posts/"]) article.case-card p,
  html:has(link[rel="canonical"][href*="/posts/"]) article.case-card li,
  html:has(link[rel="canonical"][href*="/posts/"]) .post-content p,
  html:has(link[rel="canonical"][href*="/posts/"]) .post-content li,
  html:has(link[rel="canonical"][href*="/posts/"]) .legal-article-content p,
  html:has(link[rel="canonical"][href*="/posts/"]) .legal-article-content li,
  html:has(link[rel="canonical"][href*="/posts/"]) article.research-paper .research-line {
    font-size: 16px !important;
    line-height: 2 !important;
    text-align: right !important;
  }

  body.posts-page article.case-card h2,
  body.posts-page .post-content h2,
  body.posts-page .legal-article-content h2,
  body.posts-page article.research-paper .research-heading,
  html:has(link[rel="canonical"][href*="/posts/"]) article.case-card h2,
  html:has(link[rel="canonical"][href*="/posts/"]) .post-content h2,
  html:has(link[rel="canonical"][href*="/posts/"]) .legal-article-content h2,
  html:has(link[rel="canonical"][href*="/posts/"]) article.research-paper .research-heading {
    font-size: 1.2rem !important;
  }
}