/**
 * resolve-queries-detail.css
 * Styles for the Resolved Query single post page (/resolve-queries/{slug}/).
 *
 * Generated by Claude Code Phase 2B — Developer review required
 * Converted from: _detail_content.scss (like/dislike section)
 *                 _comment-block.scss (Disqus wrapper)
 *
 * blog.css already covers:
 *   .blog-detail-header-wrap, .blog-detail-header-content__tag
 *   .blog-author-share, .author, .share-post-fixed, .detail-page-content
 *   .content-block, .detail-bottom-share, .detail-subscribe
 *
 * This file adds what blog.css does not include:
 *   .like-artical-info / .like-dislike buttons
 *   .comment-block (Disqus wrapper)
 *   .bookmark-btn
 */

/* ============================================================
   LIKE / DISLIKE
   Source: _detail_content.scss — .like-artical-info, .like-dislike
   ============================================================ */

.like-artical-info {
  border-top: 1px solid rgba(123, 124, 126, 0.2);
  padding-top: 40px;
  max-width: 818px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

@media (max-width: 767px) {
  .like-artical-info {
    padding-top: 24px;
  }
}

.like-artical-info p {
  margin: 0;
  padding-top: 4px;
  font-size: 14px;
  line-height: 160%;
  color: #1e1e1e;
}

@media (max-width: 767px) {
  .like-artical-info p {
    font-size: 12px;
    font-weight: 500;
  }
}

.like-dislike {
  display: flex;
  align-items: center;
}

.like-dislike-btn {
  padding: 0 16px;
  border: 0;
  border-right: 1px solid rgba(30, 30, 30, 0.2);
  font-size: 16px;
  font-weight: 500;
  color: #1e1e1e;
  background: transparent;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 767px) {
  .like-dislike-btn {
    font-size: 14px;
  }
}

.like-dislike-btn svg {
  width: 26px;
  height: 26px;
  margin-right: 9px;
  color: #1e3a5f;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 767px) {
  .like-dislike-btn svg {
    width: 20px;
    height: 20px;
  }
}

.like-dislike-btn.active svg,
.like-dislike-btn:hover svg {
  color: #f47b20;
}

.like-dislike-btn.dislike-btn {
  padding-right: 0;
  border-right: 0;
}

/* ============================================================
   COMMENT BLOCK (Disqus wrapper)
   Source: _comment-block.scss
   ============================================================ */

.comment-block {
  padding: 60px 0;
}

/* ============================================================
   BOOKMARK BUTTON
   Source: BlogDetailHeader.js — <button className="bookmark">
   ============================================================ */

/* .bookmark-btn .bookmark {
	background: none;
	border: 0;
	cursor: pointer;
	color: #1e3a5f;
	font-size: 20px;
	padding: 4px;
	transition: color 0.3s ease-in-out;
	display: flex;
	align-items: center;
} */

.bookmark-btn .bookmark.active,
.bookmark-btn .bookmark:hover {
  color: #f47b20;
}

/* ============================================================
   CONTENT BLOCK — Query / Solution headings
   Source: BlogDetailContent.js — <h3>Query<span>...</span></h3>
   ============================================================ */

/* ============================================================
   SPACING — Gharpedia Exclusive CTA separation from static image block above
   homepage.css sets .blog-cta-box { margin-top: -88px } which pulls the box
   up into the section above. Cancel it for the single resolve-queries page.
   ============================================================ */

.single-resolve-queries .quick-link-cta-wrap,
.single-resolvequery .quick-link-cta-wrap {
  margin-top: 56px;
}

@media (max-width: 767px) {
  .single-resolve-queries .quick-link-cta-wrap,
  .single-resolvequery .quick-link-cta-wrap {
    margin-top: 32px;
  }
}

/* Cancel the -88px / -178px pull-up from homepage.css on this page */
.single-resolve-queries .blog-cta-box,
.single-resolvequery .blog-cta-box {
  margin-top: 0;
}

@media (max-width: 767px) {
  .single-resolve-queries .blog-cta-box,
  .single-resolvequery .blog-cta-box {
    margin-top: 0;
  }
}

.content-block h3 > span {
  font-size: 14px;
  font-weight: 400;
  color: #7b7c7e;
  margin-left: 10px;
}

.content-block h3 > span > span {
  font-weight: 600;
  color: #1e3a5f;
}
.share-bookmark .share ul {
  gap: 0;
}
.share-bookmark ul li {
  margin-right: 16px;
}