/* Alfalah Blog Styles — article components (af-*) + Related Posts.
   Theme-independent: works with any WordPress theme. */

:root {
  --af-navy: #0c3130;
  --af-navy-2: #124543;
  --af-accent: #14b741;
  --af-accent-2: #1ed35a;
  --af-bg: #f4f8f7;
  --af-card: #ffffff;
  --af-text: #0f2726;
  --af-muted: #5c716f;
  --af-radius: 14px;
  --af-shadow: 0 6px 24px rgba(12,49,48,.08);
}

.af-lead { font-size: 19px; line-height: 1.75; color: rgb(15, 39, 38); margin-bottom: 26px; }
.af-takeaways { background: linear-gradient(135deg, rgb(12, 49, 48), rgb(18, 69, 67)); color: rgb(230, 242, 239); border-radius: 16px; padding: 24px 28px; margin: 28px 0px; }
.af-takeaways h3 { color: rgb(30, 211, 90) !important; margin: 0px 0px 12px !important; font-size: 20px !important; }
.af-takeaways ul { margin: 0px; padding-left: 20px; }
.af-takeaways li { margin-bottom: 8px; line-height: 1.6; color: rgb(230, 242, 239); }
.af-takeaways strong, .af-takeaways em { color: rgb(255, 255, 255); }
.af-note { background: rgb(234, 250, 240); border-left: 5px solid rgb(20, 183, 65); border-radius: 12px; padding: 18px 22px; margin: 28px 0px; color: rgb(15, 39, 38); line-height: 1.7; }
.af-table { width: 100%; border-collapse: separate; border-spacing: 0px; margin: 24px 0px; border: 1px solid rgb(216, 228, 225); border-radius: 14px; overflow: hidden; font-size: 15px; }
.af-table th { background: rgb(12, 49, 48); color: rgb(255, 255, 255); text-align: left; padding: 13px 16px; font-weight: 700; }
.af-table td { padding: 12px 16px; border-top: 1px solid rgb(225, 235, 232); vertical-align: top; color: rgb(15, 39, 38); }
.af-table tbody tr:nth-child(2n) td { background: rgb(244, 248, 247); }
ul.af-check { list-style: none; padding-left: 0px; }
ul.af-check li { position: relative; padding-left: 30px; margin-bottom: 10px; line-height: 1.6; }
ul.af-check li::before { content: "✓"; position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; border-radius: 50%; background: rgb(20, 183, 65); color: rgb(255, 255, 255); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.af-disclaimer-inline { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgb(225, 235, 232); font-size: 14px; color: rgb(92, 113, 111); }
@media (max-width: 767px) {
  .af-table { display: block; overflow-x: auto; white-space: normal; }
  .af-takeaways { padding: 20px; }
}
body .af-takeaways ul li, body .af-takeaways ul li * { color: rgb(230, 242, 239) !important; }
body .af-takeaways ul li strong, body .af-takeaways ul li em { color: rgb(255, 255, 255) !important; }
body .af-note, body .af-note * { color: rgb(15, 39, 38); }
body .af-note strong { color: rgb(12, 49, 48); }
@media (max-width: 767px) {
  .af-table { font-size: 13.5px; }
  .af-lead { font-size: 17px; }
}
.blog_single_content .af-takeaways h3 { color: rgb(30, 211, 90) !important; margin-top: 0px !important; }
.af-figure { margin: 30px 0px; }
.af-figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; box-shadow: rgba(12, 49, 48, 0.12) 0px 12px 30px; display: block; }
.af-figure figcaption { font-size: 13.5px; color: rgb(92, 113, 111); text-align: center; margin-top: 10px; font-style: italic; }

/* ===== Related Posts (added by the plugin after the post content) ===== */
.af-related{clear:both;margin:48px 0 8px;padding-top:32px;border-top:1px solid #e3ebe8;}
.af-related .af-related-title{font-family:Poppins,Roboto,sans-serif;font-size:24px;line-height:1.3;font-weight:700;color:var(--af-navy,#0f3d36);margin:0 0 24px;padding:0 0 12px;position:relative;border:0;background:none;text-align:left;}
.af-related .af-related-title:after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;border-radius:3px;background:var(--af-accent-2,#1ed35a);}
.af-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;}
.af-related-card{margin:0;padding:0;background:none;border:0;text-align:left;}
.af-related-thumb{display:block;overflow:hidden;border-radius:var(--af-radius,14px);aspect-ratio:16/9;background:#e9efed;box-shadow:0 6px 18px rgba(15,61,54,.12);margin:0 0 14px;}
.af-related-thumb img{width:100%;height:100%;max-width:none;object-fit:cover;display:block;margin:0;border-radius:0;transition:transform .4s ease;}
.af-related-card:hover .af-related-thumb img{transform:scale(1.06);}
.af-related-date{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--af-accent,#14b741);font-weight:600;margin:0 0 6px;}
.af-related .af-related-name{font-family:Poppins,Roboto,sans-serif;font-size:16px;line-height:1.45;font-weight:600;margin:0;padding:0;}
.af-related .af-related-name a{color:var(--af-navy,#0f3d36);text-decoration:none;border:0;box-shadow:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s;}
.af-related-card:hover .af-related-name a{color:var(--af-accent,#14b741);}
@media (max-width:991px){.af-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}}
@media (max-width:575px){.af-related-grid{grid-template-columns:1fr;}.af-related .af-related-title{font-size:21px;}}

/* Hide the active theme's own related / next-post blocks so only one section shows.
   (Pantograph classes below; add your next theme's classes here if needed.) */
body.afbs-related-on .related-posts,
body.afbs-related-on .post-nav{display:none !important;}

/* Specificity guard: keep related cards consistent whatever the theme's heading styles are */
html body .af-related h2.af-related-title{font-size:24px !important;line-height:1.3 !important;margin:0 0 24px !important;padding:0 0 12px !important;letter-spacing:0 !important;}
html body .af-related h3.af-related-name{font-size:16px !important;line-height:1.45 !important;margin:0 !important;padding:0 !important;font-weight:600 !important;letter-spacing:0 !important;}
html body .af-related .af-related-date{font-size:11px !important;font-weight:700 !important;line-height:1.4 !important;margin:0 0 6px !important;}
html body .af-related{margin-bottom:32px !important;}
@media (max-width:575px){html body .af-related h2.af-related-title{font-size:21px !important;}}