/* Header block */
.tq-post-header{
  margin-bottom: 18px;
}

.tq-single-post .entry-title{
  line-height: 1.2;
  margin: 10px 0 12px;
  letter-spacing: -0.02em;
  color: var(--tq-heading);
}

/* Breadcrumbs */
.tq-breadcrumbs{
  font-size: 13px;
  color: var(--tq-muted);
  margin-bottom: 10px;
}
.tq-breadcrumbs a{ color: inherit; text-decoration: none; }
.tq-breadcrumbs a:hover{ text-decoration: underline; }

/* Meta row */
.tq-post-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--tq-muted);
  font-size: 14px;
  margin-bottom: 18px;
}
.tq-meta-sep{ opacity: .7; }

/* ======================================================
   ✅ CONTENT LOOK (like your screenshot)
   - Force clean colors (some wrapper may be dimming)
====================================================== */
.tq-single-post .entry-content{
  color: var(--tq-text) !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.tq-single-post .entry-content *{
  opacity: 1 !important;
  filter: none !important;
}

/* Paragraphs (screenshot style: readable, soft white/gray) */
.tq-single-post .entry-content p{
  line-height: 1.85;
  margin-bottom: 22px;
  color: var(--tq-p) !important;
}

/* Headings (bright) */
.tq-single-post .entry-content h1,
.tq-single-post .entry-content h2,
.tq-single-post .entry-content h3,
.tq-single-post .entry-content h4,
.tq-single-post .entry-content h5,
.tq-single-post .entry-content h6{
  color: var(--tq-heading) !important;
}

.tq-single-post .entry-content h2{
  font-size: 30px;
  margin: 44px 0 14px;
  line-height: 1.25;
}

.tq-single-post .entry-content h3{
  font-size: 24px;
  margin: 32px 0 12px;
  line-height: 1.3;
}

/* Strong/Bold (screenshot me bold white dikh raha hai) */
.tq-single-post .entry-content strong,
.tq-single-post .entry-content b{
  color: var(--tq-heading) !important;
  font-weight: 800;
}

/* Links */
.tq-single-post .entry-content a{
  color: var(--tq-link) !important;
  text-decoration: none;
}
.tq-single-post .entry-content a:hover{
  color: var(--tq-link-hover) !important;
  text-decoration: underline;
}

/* Lists (ensure not faded) */
.tq-single-post .entry-content ul,
.tq-single-post .entry-content ol{
  color: var(--tq-p) !important;
}
.tq-single-post .entry-content li{
  color: var(--tq-p) !important;
}

/* Optional: subtle paragraph spacing consistency */
.tq-single-post .entry-content > *:last-child{
  margin-bottom: 0;
}

/* Section titles / after post */
.tq-section-title{
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 800;
  color: var(--tq-heading);
}






/* ======================================================
   RELATED POSTS: 3 Desktop / 2 Tablet / 1 Mobile (List View)
====================================================== */

.tq-related{
  margin-top: 26px;
}

/* Heading + View All aligned */
.tq-related-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* View All button */
.tq-related-viewall{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;

  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.85);
  border: 1px solid rgba(0,0,0,0.08);
}

@media (hover:hover){
  .tq-related-viewall:hover{ filter: brightness(1.03); }
}

/* Dark mode button */
body.dark .tq-related-viewall,
body.dark-mode .tq-related-viewall,
body.is-dark .tq-related-viewall,
html[data-theme="dark"] .tq-related-viewall,
body[data-theme="dark"] .tq-related-viewall{
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.12);
}

/* Grid default (Desktop: 3) */
.tq-related-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* ✅ Desktop 3 */
  gap: 16px;
}

.tq-related-card{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}

body.dark .tq-related-card,
body.dark-mode .tq-related-card,
body.is-dark .tq-related-card,
html[data-theme="dark"] .tq-related-card,
body[data-theme="dark"] .tq-related-card{
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}

/* Thumb */
.tq-related-thumb{
  display: block;
  overflow: hidden;
}
.tq-related-thumb img{
  width: 100%;
  height: auto;
  display: block;
}

/* Body */
.tq-related-body{
  padding: 12px 12px 14px;
}

.tq-related-title{
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.35;
}
.tq-related-title a{
  text-decoration: none;
  color: inherit;
}
.tq-related-meta{
  font-size: 12.5px;
  opacity: 0.75;
}

/* Tablet: 2 columns */
@media (max-width: 992px){
  .tq-related-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* ✅ Tablet 2 */
  }
}

/* Mobile: List view (like featured posts) */
@media (max-width: 599px){
  .tq-related-grid{
    grid-template-columns: 1fr;   /* ✅ 1 per row */
    gap: 12px;
  }

  .tq-related-card{
    display: flex;               /* ✅ list layout */
    align-items: stretch;
    overflow: hidden;
  }

  .tq-related-thumb{
    flex: 0 0 38%;
    max-width: 38%;
  }

  .tq-related-thumb img{
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .tq-related-body{
    flex: 1;
    padding: 12px;
  }

  .tq-related-title{
    font-size: 14.5px;
  }
}



/* ======================================================
   COMMENTS (Ultra Responsive + Unique + Lightweight)
   - No JS, no icon libraries
   - Genesis/WordPress default markup supported
   - Dark-mode friendly (html[data-theme], body.tq-dark)
====================================================== */

/* ----- Wrapper spacing ----- */
.comments-area,
.comment-respond,
.entry-comments,
.entry-pings{
  margin-top: 26px;
}

/* ----- Title styling (unique subtle divider) ----- */
.comments-title,
.comment-reply-title{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--tq-font-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tq-heading);
}

.comments-title::after,
.comment-reply-title::after{
  content:"";
  height: 1px;
  flex: 1;
  background: var(--tq-border-soft);
}

/* ----- Comment list ----- */
.comment-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

/* Each comment = card */
.comment-list > li.comment,
.comment-list > li{
  border: 1px solid var(--tq-border);
  background: var(--tq-surface);
  border-radius: 16px;
  padding: 16px;
}

/* Nested replies spacing */
.comment-list .children{
  list-style: none;
  margin: 12px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--tq-border-soft);
  display: grid;
  gap: 12px;
}

/* Comment header: avatar + meta */
.comment .comment-author{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
}

.comment .avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  flex: 0 0 44px;
}

.comment .fn,
.comment .says{
  font-weight: 700;
  color: var(--tq-heading);
}

.comment-metadata{
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--tq-muted);
}

.comment-metadata a{
  color: inherit;
  text-decoration: none;
}
.comment-metadata a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Comment content */
.comment-content{
  color: var(--tq-p);
}
.comment-content p{
  margin: 0 0 12px;
}
.comment-content p:last-child{
  margin-bottom: 0;
}

/* Reply link as small pill */
.comment-reply-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--tq-border-soft);
  background: transparent;
  color: var(--tq-muted-2);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
@media (hover:hover){
  .comment-reply-link:hover{
    background: rgba(0,0,0,0.04);
    text-decoration: none;
  }
}

/* ----- Comment form card ----- */
.comment-respond{
  border: 1px solid var(--tq-border);
  background: var(--tq-surface);
  border-radius: 18px;
  padding: 16px;
}

/* Notes + logged in text */
.comment-notes,
.logged-in-as{
  margin: 0 0 12px;
  color: var(--tq-muted);
  font-size: 14px;
}

/* Form layout: modern responsive grid */
#commentform{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Make comment textarea full width */
#commentform .comment-form-comment{
  grid-column: 1 / -1;
}

/* Cookies + submit full width */
#commentform .comment-form-cookies-consent,
#commentform .form-submit{
  grid-column: 1 / -1;
}

/* Inputs */
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--tq-border);
  background: transparent;
  color: var(--tq-text);
  padding: 12px 12px;
  font-size: 15px;
  outline: none;
}

/* Textarea sizing (stable, no CLS) */
#commentform textarea{
  min-height: 140px;
  resize: vertical; /* user control, no layout jump by hover */
}

/* Focus */
#commentform input:focus,
#commentform textarea:focus{
  border-color: rgba(37,99,235,0.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}

/* Labels */
#commentform label{
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--tq-muted-2);
  margin: 0 0 6px;
}

/* Submit button: premium but light */
#commentform .submit{
  height: 44px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .2px;
  background: var(--tq-primary);
  color: #fff;
  padding: 0 16px;
  width: 100%;
  transition: filter 160ms ease, transform 160ms ease;
}
@media (hover:hover){
  #commentform .submit:hover{
    filter: brightness(1.05);
    transform: translateY(-1px);
  }
}
#commentform .submit:active{
  transform: translateY(0);
}

/* Mobile: single column */
@media (max-width: 640px){
  #commentform{
    grid-template-columns: 1fr;
  }
}

/* ----- Dark mode tweaks (keeps contrast high) ----- */
html[data-theme="dark"] .comment-respond,
html[data-theme="dark"] .comment-list > li,
body.tq-dark .comment-respond,
body.tq-dark .comment-list > li{
  border-color: rgba(255,255,255,0.10);
}

html[data-theme="dark"] #commentform input,
html[data-theme="dark"] #commentform textarea,
body.tq-dark #commentform input,
body.tq-dark #commentform textarea{
  border-color: rgba(255,255,255,0.14);
}

html[data-theme="dark"] .comment-reply-link,
body.tq-dark .comment-reply-link{
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.82);
}
@media (hover:hover){
  html[data-theme="dark"] .comment-reply-link:hover,
  body.tq-dark .comment-reply-link:hover{
    background: rgba(255,255,255,0.06);
  }
}

/* Responsive */
@media (max-width: 700px){
  .tq-single-post .entry-title{ font-size: 30px; }
  .tq-single-post .entry-content p{ font-size: 17px; }
  .tq-related-grid{ grid-template-columns: 1fr; }
}

/* =====================================
   Meta pills variant (kept, tokenized)
===================================== */
.tq-post-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  font-size:14px;
  margin-top:8px;
  opacity:.95;
}

.tq-meta-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  position:relative;
}

.tq-meta-item:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:18px;
  background: var(--tq-border);
}

.tq-meta-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:currentColor;
  opacity:.75;
}

.tq-meta-icon svg{ display:block; }

.tq-post-meta a{
  text-decoration:none;
  color:inherit;
  font-weight:600;
}

.tq-post-meta a:hover{
  opacity:.85;
}

@media (max-width:600px){
  .tq-post-meta{font-size:13px}
  .tq-meta-item{padding:6px 10px}
  .tq-meta-item:not(:last-child)::after{height:16px}
}



/* ======================================================
   TQ SHARE BAR (Single Row All Devices + Dark Friendly)
====================================================== */

:root{
  --tq-share-radius: 3px;
  --tq-share-gap: 10px;
  --tq-share-height: 44px;

  /* Brand colors */
  --tq-fb: #3b5998;
  --tq-x: #000000;
  --tq-wa: #5bd65b;
  --tq-tg: #2a7db8;
  --tq-copy: #000000;
}

/* Container */
.tq-sharebar{
  display: flex;
  flex-wrap: nowrap;          /* ✅ Always one row */
  gap: var(--tq-share-gap);
  align-items: center;
  width: 100%;
}

/* Buttons */
.tq-sharebtn{
  flex: 1 1 0;                /* ✅ Equal width */
  min-width: 0;               /* Prevent overflow */
  height: var(--tq-share-height);
  border-radius: var(--tq-share-radius);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  cursor: pointer;
  text-decoration: none;
  color: #fff;

  transition: transform 180ms ease, filter 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* SVG Icon */
.tq-sharebtn svg{
  width: 20px;
  height: 20px;
  display: block;
}

/* Brand Colors */
.tq-sharebtn.is-fb{ background: var(--tq-fb); }
.tq-sharebtn.is-x{ background: var(--tq-x); }
.tq-sharebtn.is-wa{ background: var(--tq-wa); }
.tq-sharebtn.is-tg{ background: var(--tq-tg); }
.tq-sharebtn.is-copy{ background: var(--tq-copy); }

/* Hover (Desktop only) */
@media (hover:hover){
  .tq-sharebtn:hover{
    transform: translateY(-2px);
    filter: brightness(1.05);
  }
}

/* Focus */
.tq-sharebtn:focus-visible{
  outline: 2px solid rgba(32,156,238,.7);
  outline-offset: 2px;
}

/* Very small phones adjustment */
@media (max-width: 360px){
  .tq-sharebar{ gap: 8px; }
  .tq-sharebtn{ height: 40px; }
  .tq-sharebtn svg{ width: 18px; height: 18px; }
}

/* ======================================================
   Share Title (Centered) - Light default
====================================================== */
.tq-share{
  text-align: center;

}

.tq-share .tq-section-title{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .2px;

  color: #111;
  opacity: .92;
}

.tq-share .tq-section-title::before,
.tq-share .tq-section-title::after{
  content: "";
  height: 1px;
  width: min(70px, 14vw);
  background: rgba(0,0,0,0.12);
}

/* Center share bar block */
.tq-share .tq-sharebar{
  max-width: 720px;
  margin: 0 auto;
}

/* ======================================================
   Dark Mode (covers most toggles) - FORCE override
====================================================== */
body.dark .tq-share .tq-section-title,
body.dark-mode .tq-share .tq-section-title,
body.is-dark .tq-share .tq-section-title,
html[data-theme="dark"] .tq-share .tq-section-title,
body[data-theme="dark"] .tq-share .tq-section-title{
  color: rgba(255,255,255,0.92);
}

body.dark .tq-share .tq-section-title::before,
body.dark .tq-share .tq-section-title::after,
body.dark-mode .tq-share .tq-section-title::before,
body.dark-mode .tq-share .tq-section-title::after,
body.is-dark .tq-share .tq-section-title::before,
body.is-dark .tq-share .tq-section-title::after,
html[data-theme="dark"] .tq-share .tq-section-title::before,
html[data-theme="dark"] .tq-share .tq-section-title::after,
body[data-theme="dark"] .tq-share .tq-section-title::before,
body[data-theme="dark"] .tq-share .tq-section-title::after{
  background: rgba(255,255,255,0.14);
}

/* Fallback: system dark mode */
@media (prefers-color-scheme: dark){
  .tq-share .tq-section-title{ color: rgba(255,255,255,0.92); }
  .tq-share .tq-section-title::before,
  .tq-share .tq-section-title::after{ background: rgba(255,255,255,0.14); }
}
.tq-share{ margin-bottom: 62px; }




/* ======================================================
   FIXED AUTHOR BOX (Screenshot Style)
   Uses your markup:
   .tq-authorbox .tq-author-fallback
   .tq-author-avatar img
   .tq-author-name
   .tq-author-bio
====================================================== */

.tq-authorbox{
  margin: 26px 0;
}

/* Card */
.tq-authorbox .tq-author-fallback{
  position: relative;
  text-align: center;

  /* IMPORTANT: enough top space so avatar never cuts */
  padding: 64px 22px 26px;

  border-radius: 18px;
  overflow: hidden;

  /* Premium dark card */
  background: radial-gradient(120% 140% at 50% 0%,
              rgba(255,255,255,0.14) 0%,
              rgba(255,255,255,0.06) 38%,
              rgba(0,0,0,0.40) 100%),
              linear-gradient(180deg, #111318 0%, #0a0b0e 100%);

}

/* Soft inner highlight */
.tq-authorbox .tq-author-fallback::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(70% 55% at 50% 0%,
              rgba(255,255,255,0.18),
              transparent 60%);
  pointer-events:none;
}

/* Avatar overlap (fix cut) */
.tq-authorbox .tq-author-avatar{
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 78px;

  border-radius: 999px;
  padding: 4px;

  background: #fff;
  z-index: 2; /* ✅ ensures above card */
}

/* WP avatar image */
.tq-authorbox .tq-author-avatar img{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 999px;
}

/* Name */
.tq-authorbox .tq-author-name{
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  color: rgba(255,255,255,0.96);
}

.tq-authorbox .tq-author-name a{
  color: inherit;
  text-decoration: none;
}
.tq-authorbox .tq-author-name a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Bio */
.tq-authorbox .tq-author-bio{
  max-width: 64ch;
  margin: 0 auto;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
}

/* ✅ Fix: default <p> margins inside bio cause layout gaps */
.tq-authorbox .tq-author-bio p{
  margin: 0;           /* important */
  color: white;
}
.tq-authorbox .tq-author-bio p + p{
  margin-top: 10px;
}

/* Responsive */
@media (max-width: 600px){
  .tq-authorbox .tq-author-fallback{
    padding: 58px 16px 22px;
    border-radius: 16px;
  }
  .tq-authorbox .tq-author-avatar{
    top: -32px;
    width: 70px;
    height: 70px;
  }
  .tq-authorbox .tq-author-name{
    font-size: 18px;
  }
  .tq-authorbox .tq-author-bio{
    font-size: 14px;
  }
}

/* Dark mode friendly (robust selectors) */
body.dark .tq-authorbox .tq-author-fallback,
body.dark-mode .tq-authorbox .tq-author-fallback,
body.is-dark .tq-authorbox .tq-author-fallback,
html[data-theme="dark"] .tq-authorbox .tq-author-fallback,
body[data-theme="dark"] .tq-authorbox .tq-author-fallback{
  border-color: rgba(255,255,255,0.12);
}


/* ===== AUTHOR BOX FIX OVERRIDES (paste after your author CSS) ===== */

/* Card width center (sharebar jaisa) */
.tq-authorbox .tq-author-fallback{
  max-width: 720px;
  margin: 0 auto;
}

/* Avatar ko aur upar le jao + ring premium */
.tq-authorbox .tq-author-avatar{
  top: -44px !important;              /* ✅ more overlap like screenshot */
  width: 86px !important;
  height: 86px !important;
  padding: 5px !important;
  background: #fff !important;
  z-index: 5 !important;
}

/* Card padding: content ko thoda neeche push karo */
.tq-authorbox .tq-author-fallback{
  padding-top: 74px !important;       /* ✅ name center feel */
  padding-bottom: 28px !important;
}

/* Name/bio spacing */
.tq-authorbox .tq-author-name{
  margin-bottom: 12px !important;
}

.tq-authorbox .tq-author-bio{
  max-width: 56ch !important;
  opacity: .88;
}

/* Mobile tuning */
@media (max-width: 600px){
  .tq-authorbox .tq-author-fallback{
    max-width: 100%;
    padding-top: 66px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .tq-authorbox .tq-author-avatar{
    top: -38px !important;
    width: 78px !important;
    height: 78px !important;
  }
}

/* ===== AUTHOR AVATAR CLIP FIX (IMPORTANT) ===== */
.tq-authorbox .tq-author-fallback{
  position: relative;
  overflow: visible !important;   /* ✅ stops clipping avatar */
  padding-top: 76px !important;   /* space for overlapping avatar */
  border-radius: 18px;
  border: 0 !important;           /* border pseudo-element pe shift kar rahe */
  background: transparent !important; /* background pseudo-element pe shift */
  box-shadow: none !important;    /* shadow pseudo-element pe shift */
}

/* Card background + border + shadow (real card) */
.tq-authorbox .tq-author-fallback::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;

  background: radial-gradient(120% 140% at 50% 0%,
              rgba(255,255,255,0.14) 0%,
              rgba(255,255,255,0.06) 38%,
              rgba(0,0,0,0.40) 100%),
              linear-gradient(180deg, #111318 0%, #0a0b0e 100%);
  z-index: 0;
  pointer-events:none;
}

/* Keep content above pseudo background */
.tq-authorbox .tq-author-fallback > *{
  position: relative;
  z-index: 1;
}

/* Avatar properly floating above card */
.tq-authorbox .tq-author-avatar{
  position: absolute;
  top: -44px !important;
  left: 50%;
  transform: translateX(-50%);
  width: 86px !important;
  height: 86px !important;
  padding: 5px !important;
  border-radius: 999px;
  background: #fff !important;
  z-index: 2 !important;
}

.tq-authorbox .tq-author-avatar img{
  width: 100%;
  height: 100%;
  display:block;
  border-radius: 999px;
}

/* Responsive */
@media (max-width: 600px){
  .tq-authorbox .tq-author-fallback{
    padding-top: 68px !important;
    border-radius: 16px;
  }
  .tq-authorbox .tq-author-fallback::after{
    border-radius: 16px;
  }
  .tq-authorbox .tq-author-avatar{
    top: -38px !important;
    width: 78px !important;
    height: 78px !important;
  }
}