/* ==================================================
   ZenoFusion – Reader Mode (ELITE UX BUILD)
   ================================================== */

html.zf-reader,
html.zf-reader body {
  background: #0f1115;

  /* Soft contrast — avoids halation */
  color: #cfd6e4;

  /* Typography rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Remove tap flash on mobile */
html.zf-reader * {
  -webkit-tap-highlight-color: transparent;
}

/* ==================================================
   Grid Neutralize
   ================================================== */
html.zf-reader .container,
html.zf-reader .row,
html.zf-reader [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 100% !important;
}

/* ==================================================
   Main Reading Area — GOLDEN WIDTH
   ================================================== */
html.zf-reader .blog-content,
html.zf-reader .full-text {

  max-width: 660px;   /* cognitive sweet spot */
  margin: 0 auto;
  padding: 34px 20px;

  font-size: 19px;
  line-height: 1.85;

  letter-spacing: 0.012em;
}

/* Paragraph rhythm — HUGE for brain comfort */
html.zf-reader .full-text p {
  margin-bottom: 1.45em;
}

/* ==================================================
   Remove UI Noise
   ================================================== */
html.zf-reader header,
html.zf-reader nav,
html.zf-reader footer,
html.zf-reader aside,
html.zf-reader .sidebar,
html.zf-reader .progress-wrap,
html.zf-reader .header,
html.zf-reader .header-sticky,
html.zf-reader .inner-header,
html.zf-reader .blog-post-meta,
html.zf-reader .blog-post-share-box,
html.zf-reader .breadcrumbs,
html.zf-reader .navigation,
html.zf-reader .related-posts,
html.zf-reader .section-title,
html.zf-reader .owl-carousel,
html.zf-reader .arrow-styel-02,
html.zf-reader .author-collapse,
html.zf-reader #uspCollapse,
html.zf-reader .author-toggle-wrap,
html.zf-reader .zf-audio-wrapper,
html.zf-reader audio,
html.zf-reader .dleplyrplayer,
html.zf-reader .audio-player,
html.zf-reader .full-text a.back {
  display: none !important;
}

/* ==================================================
   Typography
   ================================================== */

html.zf-reader h1,
html.zf-reader h2,
html.zf-reader h3 {
  color: rgba(255,255,255,0.92);
}

/* Links — calm blue */
html.zf-reader a {
  color: #8fb3ff;
  text-decoration: none;
}

html.zf-reader a:hover {
  text-decoration: underline;
}

/* ==================================================
   Images — immersive but not loud
   ================================================== */

html.zf-reader img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

html.zf-reader figure {
  margin: 34px auto;
}

/* Caption — invisible UI philosophy */
html.zf-reader figure figcaption {
  background: rgba(255,255,255,.04);
  color: #aeb6c2;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  margin-top: 12px;
  text-align: center;
}

/* ===== Reader Line Killer — SAFE ===== */

html.zf-reader hr {
  display:none !important;
}

/* real separators only */
html.zf-reader .section-title,
html.zf-reader .separator,
html.zf-reader .divider,
html.zf-reader .blog-post-share-box,
html.zf-reader .post-navigation,
html.zf-reader .related-posts,
html.zf-reader .bg-white {
  border:none !important;
  box-shadow:none !important;
}


/* ==================================================
   Remove Comments
   ================================================== */
html.zf-reader .add-comments-form,
html.zf-reader #page__comments-list,
html.zf-reader .page__comments-list,
html.zf-reader .comments,
html.zf-reader .comments-area,
html.zf-reader .comments-title,
html.zf-reader .comments-wrap,
html.zf-reader .bg-white.mb-4.mt-4 {
  display: none !important;
}

/* ==================================================
   Remove Video
   ================================================== */
html.zf-reader .post-video,
html.zf-reader .plyr,
html.zf-reader iframe,
html.zf-reader video {
  display: none !important;
}

/* ==================================================
   Floating Toggle — glass feel
   ================================================== */

.blog-post-time.zf-reader-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #777;
  transition: opacity .2s ease;
}

.blog-post-time.zf-reader-toggle:hover {
  opacity: .7;
}

html.zf-reader .zf-reader-toggle {
  position: fixed;
  right: 18px;
  bottom: 26px;
  z-index: 9999;

  background: rgba(60,65,72,.75);
  backdrop-filter: blur(6px);

  color: #fff !important;
  padding: 10px 14px;
  border-radius: 14px;

  box-shadow: 0 8px 26px rgba(0,0,0,.45);
}

/* ==================================================
   Title ↔ Content spacing
   ================================================== */

html.zf-reader .blog-content {
  padding-top: 0 !important;
}

html.zf-reader .blog-content > .blog-post-title {
  margin: 0 0 10px 0 !important;
}

html.zf-reader .blog-content > .blog-post-title h1 {
  margin: 0 0 20px 0 !important;
}

html.zf-reader .full-text > figure:first-child {
  margin-top: 10px !important;
}

/* Remove Bootstrap gap */
html.zf-reader .blog-post.post-style-07 {
  padding: 0 !important;
}

/* ==================================================
   Reading Finish — Premium Editorial Spacing
   prevents article from ending too abruptly
   ================================================== */

html.zf-reader .full-text > *:last-child {
  margin-bottom: 64px;
}

@media (max-width:768px){
  html.zf-reader .full-text > *:last-child {
    margin-bottom: 42px;
  }
}

/* ==================================================
   Mobile — ergonomic tuning
   ================================================== */

@media (max-width: 768px) {

  html.zf-reader .zf-reader-toggle {
    right: 14px;
    bottom: 22px;
    font-size: 13px;
  }

  html.zf-reader .blog-content,
  html.zf-reader .full-text {

    padding: 22px 10px;

    font-size: 18.5px;
    line-height: 1.9;
  }

  html.zf-reader .blog-content > .blog-post-title h1 {
    font-size: 25px;
    line-height: 1.35;
    margin-bottom: 16px;
  }
}