/* =====================================================
   AB Single Post Styling — FINAL (System Font + SVG)
   Includes: Typography + TOC + Share Sidebar (SVG) + Lightbox
   Fixes: Remove Medvill Tags/Share widgets + remove inline Tags strip
   Adds: FAQ question "white quote" style
   ===================================================== */

/* ===== Single Post Typography (SYSTEM FONT) ===== */
body.single-post article,
body.single-post article p,
body.single-post article h2,
body.single-post article h3,
body.single-post article h4,
body.single-post article h5,
body.single-post article h6,
body.single-post article li,
body.single-post article a,
body.single-post article blockquote {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}


body.single-post article {
  padding: 0 20px !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* ===== Single Post H1 — Final Editorial Balance ===== */
body.single-post article h1 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 680;              /* sweet spot for system fonts */
  line-height: 1.14;             /* tighter = headline feel */
  letter-spacing: -0.015em;      /* optical correction */

  margin: 0 0 20px;
  color: #0b1220;

  text-wrap: balance;
}



/* Headings */
body.single-post article h2 {
  font-size: 30px !important;
  margin-top: 45px !important;
  font-weight: 700 !important;
}
body.single-post article h3 {
  font-size: 24px !important;
  margin-top: 35px !important;
  font-weight: 600 !important;
}
body.single-post article h4 {
  font-size: 20px !important;
  margin-top: 25px !important;
  font-weight: 600 !important;
}

/* Text */
body.single-post article p {
  font-size: 17px !important;
  line-height: 1.85 !important;
  margin-bottom: 18px !important;
  letter-spacing: 0.15px !important;
  color: #000000 !important;
}

body.single-post article a {
  color: #5777ff !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: all 0.25s ease !important;
}
body.single-post article a:hover {
  color: #ff7140 !important;
  text-decoration: underline !important;
}

/* Code */
body.single-post article pre,
body.single-post article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
               "Courier New", monospace !important;
  background: #f6f8fa !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 15px !important;
}
body.single-post article code {
  color: #d63384 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  line-height: 1.6 !important;
}

/* ===== TOC ===== */
#table-of-contents {
  background: url('https://ataullahbokhari.com/wp-content/uploads/2025/10/toc-bg.webp') no-repeat center center / cover !important;
  border: 1px solid #e1e4e8 !important;
  border-radius: 14px !important;
  padding: 25px 35px !important;
  margin: 35px 0 !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05) !important;
  color: #ffffff !important;
}

body.single-post article #table-of-contents > p {
  font-size: 30px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 18px 0 !important;
  line-height: 1.2 !important;
}

@media (max-width: 768px) {
  body.single-post article #table-of-contents > p { font-size: 26px !important; }
}
@media (max-width: 480px) {
  body.single-post article #table-of-contents > p { font-size: 22px !important; }
}

#toc-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#toc-list li { margin: 6px 0 !important; }

body.single-post #table-of-contents a,
#table-of-contents #toc-list li a {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}
body.single-post #table-of-contents a:hover,
#table-of-contents #toc-list li a:hover {
  color: #5777ff !important;
  text-decoration: underline !important;
}

/* ===== FAQ SECTION (WHITE QUOTE STYLE FOR QUESTION H3) =====
   Works for common FAQ markups:
   - <section id="faq"> ... <h3>Question</h3>
   - <div class="faq"> ... <h3>Question</h3>
   - RankMath FAQ blocks often wrap in .rank-math-faq
*/
body.single-post #faq h3,
body.single-post .faq h3,
body.single-post .rank-math-faq h3,
body.single-post .faq-section h3 {
  margin-top: 28px !important;
  padding: 14px 16px !important;
  border-left: 5px solid #ffffff !important;
  background: rgba(0,0,0,0.06) !important;
  border-radius: 10px !important;
  line-height: 1.35 !important;
}

/* If your FAQ is on dark background somewhere, this keeps it readable */
body.single-post #faq h3,
body.single-post .faq h3,
body.single-post .rank-math-faq h3,
body.single-post .faq-section h3 {
  color: #111 !important;
}

/* Optional: FAQ answer paragraphs spacing */
body.single-post #faq p,
body.single-post .faq p,
body.single-post .rank-math-faq p,
body.single-post .faq-section p {
  margin-top: 10px !important;
}

/* ===== Share Sidebar (SVG Icons) ===== */
.ab-share-sidebar {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 9999;
}

/* Share button */
.ab-share {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  text-decoration: none !important;
  opacity: 0.9;
  transition: all 0.3s ease;
}

/* SVG sizing + inherit hover colors */
.ab-share svg {
  width: 22px;
  height: 22px;
  display: block;
}
.ab-share svg path {
  fill: currentColor;
}

/* Hover colors */
.ab-fb:hover { color: #1877f2 !important; }
.ab-x:hover  { color: #000000 !important; }
.ab-ln:hover { color: #0a66c2 !important; }
.ab-th:hover { color: #000000 !important; }
.ab-qu:hover { color: #b92b27 !important; }
.ab-rd:hover { color: #ff4500 !important; }

@media(max-width:768px){
  .ab-share-sidebar {
    position: static;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin: 25px 0;
    transform: none;
  }
}

/* ===== Lightbox ===== */
.ab-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}
.ab-lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 6px;
}
body.single-post article img { cursor: zoom-in; }

/* Close button */
.ab-lightbox-close {
  position: absolute;
  top: 18px !important;
  right: 18px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  background: #ff3b3b !important;
  color: #fff !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  user-select: none !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35) !important;
}
.ab-lightbox-close:hover {
  transform: scale(1.05);
}

/* =====================================================
   REMOVE MEDVILL THEME TAG CLOUD + SHARE WIDGETS (100%)
   Based on your exact HTML:
   #tag_cloud-1 and #medvillsocialiconwi_widget-1
   ===================================================== */
body.single-post section#tag_cloud-1,
body.single-post section#medvillsocialiconwi_widget-1 {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Extra safety: kill internals too */
body.single-post #tag_cloud-1 .widget-title,
body.single-post #tag_cloud-1 .tagcloud,
body.single-post #medvillsocialiconwi_widget-1 .widget-title,
body.single-post #medvillsocialiconwi_widget-1 .footer_social {
  display: none !important;
  visibility: hidden !important;
}

/* =====================================================
   REMOVE INLINE TAGS STRIP (UNDER POST CONTENT)
   .bs-info.single-page-info.tags
   ===================================================== */
body.single-post .bs-info.single-page-info.tags {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}