/* =========================================================
   WriteUpCafe — Single Post Typography (Reader-quality)
   Applies to:
   .entry-header,
   .entry-wraper .excerpt,
   .entry-wraper .entry-main-content
   Normal + Dark theme via CSS variables
   ========================================================= */

/* ---------- Theme tokens (scoped to post page) ---------- */
/* Normal (default) */
.entry-header,
.entry-wraper .excerpt,
.entry-wraper .entry-main-content{
  /* Font stacks (won't break if Poppins not loaded; falls back cleanly) */
  --post-font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --post-font-serif: ui-serif, Georgia, "Times New Roman", Times, serif;
  --post-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Base sizing */
  --post-text: 18px;            /* body */
  --post-text-sm: 15px;         /* small */
  --post-text-lg: 20px;         /* lead */
  --post-lh: 1.8;               /* body line-height */
  --post-lh-tight: 1.25;        /* headings */
  --post-lh-snug: 1.45;         /* captions, small blocks */

  /* Spacing rhythm */
  --post-gap-1: 0.5rem;
  --post-gap-2: 0.85rem;
  --post-gap-3: 1.25rem;
  --post-gap-4: 1.75rem;
  --post-gap-5: 2.25rem;

  /* Colors (Normal) */
  --post-bg: transparent;
  --post-text-color: #1B1E27;
  --post-muted: #5E6473;
  --post-soft: #8891A6;
  --post-border: rgba(27,30,39,.12);
  --post-hr: rgba(27,30,39,.10);

  /* Links */
  --post-link: #0070AD;
  --post-link-hover: #005C90;
  --post-link-underline: rgba(0,112,173,.35);

  /* Code */
  --post-code-bg: rgba(39,41,54,.06);
  --post-code-text: #272936;

  /* Callouts */
  --post-quote-border: rgba(0,112,173,.35);
  --post-quote-bg: rgba(0,112,173,.06);

  /* Selection */
  --post-selection-bg: rgba(0,112,173,.18);
}

/* Dark theme (toggle class on body or root) */
body.reader-dark .entry-header,
body.reader-dark .entry-wraper .excerpt,
body.reader-dark .entry-wraper .entry-main-content{
  --post-bg: transparent;
  --post-text-color: #ECECEC;
  --post-muted: rgba(236,236,236,.72);
  --post-soft: rgba(236,236,236,.55);
  --post-border: rgba(236,236,236,.14);
  --post-hr: rgba(236,236,236,.12);

  --post-link: #00DDEB;            /* WriteUpCafe cyan works well on dark */
  --post-link-hover: #AF40FF;      /* purple hover */
  --post-link-underline: rgba(0,221,235,.35);

  --post-code-bg: rgba(236,236,236,.08);
  --post-code-text: #ECECEC;

  --post-quote-border: rgba(0,221,235,.35);
  --post-quote-bg: rgba(0,221,235,.08);

  --post-selection-bg: rgba(0,221,235,.22);
}

/* ---------- Base text rendering & container behavior ---------- */
.entry-header,
.entry-wraper .excerpt,
.entry-wraper .entry-main-content{
  color: var(--post-text-color);
  background: var(--post-bg);
  font-family: var(--post-font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Better line breaks on long words/URLs */
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;

  /* Make sure spacing looks consistent */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

/* Ensure readable base sizing */
.entry-wraper .entry-main-content{
  font-size: var(--post-text);
  line-height: var(--post-lh);
}

.entry-wraper .excerpt p{
  font-size: var(--post-text-lg);
  line-height: 1.75;
  color: var(--post-muted);
}
.excerpt p{
  font-size: var(--post-text-lg);
  line-height: 1.75;
  color: var(--post-muted);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.entry-header{
  /* often contains title/meta; keep consistent */
  color: var(--post-text-color);
}

/* Selection */
.entry-header ::selection,
.entry-wraper .excerpt ::selection,
.entry-wraper .entry-main-content ::selection{
  background: var(--post-selection-bg);
}

/* ---------- Headings ---------- */
.entry-header h1,
.entry-wraper .excerpt h1,
.entry-wraper .entry-main-content h1,
.entry-wraper .entry-main-content h2,
.entry-wraper .entry-main-content h3,
.entry-wraper .entry-main-content h4,
.entry-wraper .entry-main-content h5,
.entry-wraper .entry-main-content h6{
  color: var(--post-text-color);
  line-height: var(--post-lh-tight);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: var(--post-gap-5) 0 var(--post-gap-2);
}

.entry-header h1{
  font-size: clamp(28px, 3.2vw, 44px);
  margin: 0 0 var(--post-gap-2);
}

.entry-wraper .entry-main-content h1{ font-size: clamp(26px, 2.6vw, 38px); }
.entry-wraper .entry-main-content h2{ font-size: clamp(22px, 2.1vw, 30px); }
.entry-wraper .entry-main-content h3{ font-size: clamp(19px, 1.8vw, 24px); font-weight: 800; }
.entry-wraper .entry-main-content h4{ font-size: 18px; font-weight: 750; letter-spacing: -0.01em; }
.entry-wraper .entry-main-content h5{ font-size: 16px; font-weight: 750; }
.entry-wraper .entry-main-content h6{ font-size: 15px; font-weight: 750; color: var(--post-muted); }

.entry-wraper .entry-main-content h2 + p,
.entry-wraper .entry-main-content h3 + p{
  margin-top: var(--post-gap-2);
}

/* ---------- Paragraphs & text ---------- */
.entry-wraper .entry-main-content p,
.entry-wraper .excerpt p{
  margin: 0 0 var(--post-gap-3);
}
.entry-main-content p{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 18.5px;
  line-height: 1.8;
}
.entry-wraper .entry-main-content p:empty{ display:none; }

/* Lead paragraph if you add class in HTML */
.entry-wraper .entry-main-content .lead,
.entry-wraper .entry-main-content p.lead{
  font-size: var(--post-text-lg);
  line-height: 1.8;
  color: var(--post-muted);
}

/* Strong / emphasis */
.entry-wraper .entry-main-content strong{ font-weight: 800; }
.entry-wraper .entry-main-content em{ font-style: italic; }
.entry-wraper .entry-main-content small{ font-size: var(--post-text-sm); color: var(--post-muted); }

/* Subtle muted text helpers */
.entry-wraper .entry-main-content .muted{ color: var(--post-muted); }
.entry-wraper .entry-main-content .soft{ color: var(--post-soft); }

/* ---------- Links ---------- */
.entry-header a,
.entry-wraper .excerpt a,
.entry-wraper .entry-main-content a{
  color: var(--post-link);
  text-decoration: none;
  border-bottom: 1px solid var(--post-link-underline);
  transition: color .18s ease, border-color .18s ease, opacity .18s ease;
}

.entry-header a:hover,
.entry-wraper .excerpt a:hover,
.entry-wraper .entry-main-content a:hover{
  color: var(--post-link-hover);
  border-bottom-color: currentColor;
}

.entry-header a:focus,
.entry-wraper .excerpt a:focus,
.entry-wraper .entry-main-content a:focus{
  outline: 2px solid rgba(0,0,0,0);
  box-shadow: 0 0 0 3px rgba(0,112,173,.22);
  border-bottom-color: transparent;
  border-radius: 6px;
}

body.reader-dark .entry-header a:focus,
body.reader-dark .entry-wraper .excerpt a:focus,
body.reader-dark .entry-wraper .entry-main-content a:focus{
  box-shadow: 0 0 0 3px rgba(0,221,235,.22);
}

/* External link style (optional if you add rel/target) */
.entry-wraper .entry-main-content a[target="_blank"]{
  border-bottom-style: dotted;
}

/* ---------- Lists ---------- */
.entry-wraper .entry-main-content ul,
.entry-wraper .entry-main-content ol{
  margin: 0 0 var(--post-gap-3);
  padding-left: 1.25rem;
}

.entry-wraper .entry-main-content li{
  margin: .35rem 0;
  padding-left: .2rem;
}

.entry-wraper .entry-main-content li::marker{
  color: var(--post-soft);
}

.entry-wraper .entry-main-content ul ul,
.entry-wraper .entry-main-content ol ol,
.entry-wraper .entry-main-content ul ol,
.entry-wraper .entry-main-content ol ul{
  margin-top: .5rem;
  margin-bottom: .5rem;
}

/* ---------- Blockquotes ---------- */
.entry-wraper .entry-main-content blockquote{
  margin: var(--post-gap-4) 0;
  padding: 1rem 1.1rem 1rem 1.1rem;
  border-left: 4px solid var(--post-quote-border);
  background: var(--post-quote-bg);
  border-radius: 12px;
  color: var(--post-muted);
}

.entry-wraper .entry-main-content blockquote p{
  margin: 0 0 var(--post-gap-2);
}

.entry-wraper .entry-main-content blockquote p:last-child{
  margin-bottom: 0;
}

.entry-wraper .entry-main-content blockquote cite{
  display:block;
  margin-top: .65rem;
  font-size: var(--post-text-sm);
  color: var(--post-soft);
  font-style: normal;
}
.entry-wraper .entry-main-content blockquote::before {
    content: none;
}
/* ---------- Horizontal rule ---------- */
.entry-wraper .entry-main-content hr{
  border: 0;
  height: 1px;
  background: var(--post-hr);
  margin: var(--post-gap-5) 0;
}

/* ---------- Images, figures, captions ---------- */
.entry-wraper .entry-main-content img,
.entry-wraper .entry-main-content video,
.entry-wraper .entry-main-content iframe{
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

.entry-wraper .entry-main-content figure{
  margin: var(--post-gap-4) 0;
}

.entry-wraper .entry-main-content figcaption{
  margin-top: .65rem;
  font-size: var(--post-text-sm);
  line-height: var(--post-lh-snug);
  color: var(--post-muted);
}

/* Give linked images nicer hover */
.entry-wraper .entry-main-content a img{
  transition: transform .2s ease, filter .2s ease;
}
.entry-wraper .entry-main-content a:hover img{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

/* ---------- Tables ---------- */
.entry-wraper .entry-main-content table{
  width: 100%;
  border-collapse: collapse;
  margin: var(--post-gap-4) 0;
  font-size: 16px;
  line-height: 1.55;
  border: 1px solid var(--post-border);
  border-radius: 14px;
  overflow: hidden;
}

.entry-wraper .entry-main-content thead th{
  text-align: left;
  font-weight: 800;
  color: var(--post-text-color);
  background: rgba(0,0,0,.03);
  padding: .85rem .9rem;
  border-bottom: 1px solid var(--post-border);
}

body.reader-dark .entry-wraper .entry-main-content thead th{
  background: rgba(236,236,236,.06);
}

.entry-wraper .entry-main-content td{
  padding: .85rem .9rem;
  border-bottom: 1px solid var(--post-border);
  color: var(--post-muted);
}

.entry-wraper .entry-main-content tbody tr:last-child td{
  border-bottom: 0;
}

/* Scrollable tables on mobile */
.entry-wraper .entry-main-content .table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
}

/* ---------- Code ---------- */
.entry-wraper .entry-main-content code,
.entry-wraper .entry-main-content kbd{
  font-family: var(--post-font-mono);
  font-size: .95em;
  color: var(--post-code-text);
  background: var(--post-code-bg);
  padding: .18em .42em;
  border-radius: 10px;
  border: 1px solid var(--post-border);
}

.entry-wraper .entry-main-content kbd{
  padding: .2em .5em;
  font-weight: 700;
}

.entry-wraper .entry-main-content pre{
  margin: var(--post-gap-4) 0;
  padding: 1rem 1.05rem;
  overflow: auto;
  border-radius: 16px;
  background: var(--post-code-bg);
  border: 1px solid var(--post-border);
  line-height: 1.6;
}

.entry-wraper .entry-main-content pre code{
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 14px;
  color: var(--post-text-color);
}

/* ---------- Inline elements ---------- */
.entry-wraper .entry-main-content mark{
  background: rgba(255, 214, 0, .35);
  padding: 0 .15em;
  border-radius: 6px;
}
body.reader-dark .entry-wraper .entry-main-content mark{
  background: rgba(255, 214, 0, .22);
}

.entry-wraper .entry-main-content abbr[title]{
  text-decoration: underline dotted;
  cursor: help;
}

.entry-wraper .entry-main-content sup,
.entry-wraper .entry-main-content sub{
  font-size: 0.8em;
}

/* ---------- “Meta” / small blocks often used in headers ---------- */
.entry-header .meta,
.entry-header .entry-meta,
.entry-header .post-meta,
.entry-header .byline,
.entry-header .posted-on{
  font-size: var(--post-text-sm);
  line-height: var(--post-lh-snug);
  color: var(--post-muted);
}

.entry-header .meta a,
.entry-header .entry-meta a{
  border-bottom: 1px solid transparent;
  color: var(--post-muted);
}
.entry-header .meta a:hover,
.entry-header .entry-meta a:hover{
  color: var(--post-link);
  border-bottom-color: var(--post-link-underline);
}
.entry-header a{
  color: var(--post-link);
  text-decoration: none;
  /*border-color: #191919;*/
  transition: color .18s ease, border-color .18s ease, opacity .18s ease;
}

/* ---------- Separators, small UI pieces inside content ---------- */
.entry-wraper .entry-main-content .separator,
.entry-wraper .entry-main-content .wp-block-separator{
  height: 1px;
  background: var(--post-hr);
  border: 0;
  margin: var(--post-gap-5) 0;
}

/* ---------- Spacing normalization for first/last elements ---------- */
.entry-wraper .entry-main-content > :first-child{
  margin-top: 0 !important;
}
.entry-wraper .entry-main-content > :last-child{
  margin-bottom: 0 !important;
}

/* ---------- Anchor offsets (nice for TOC) ---------- */
.entry-wraper .entry-main-content [id]{
  scroll-margin-top: 90px;
}

/* ---------- Optional: nicer inline “button-like” links inside content ---------- */
.entry-wraper .entry-main-content a.wc-btn,
.entry-wraper .entry-main-content .btn,
.entry-wraper .entry-main-content .button{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .65rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--post-border);
  background: rgba(0,0,0,.03);
  color: var(--post-text-color);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
body.reader-dark .entry-wraper .entry-main-content a.wc-btn,
body.reader-dark .entry-wraper .entry-main-content .btn,
body.reader-dark .entry-wraper .entry-main-content .button{
  background: rgba(236,236,236,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.entry-wraper .entry-main-content a.wc-btn:hover,
.entry-wraper .entry-main-content .btn:hover,
.entry-wraper .entry-main-content .button:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

/* ---------- Forms embedded in posts (rare, but safe) ---------- */
.entry-wraper .entry-main-content input,
.entry-wraper .entry-main-content textarea,
.entry-wraper .entry-main-content select{
  font-family: var(--post-font-sans);
  font-size: 16px;
  color: var(--post-text-color);
}

.entry-wraper .entry-main-content input,
.entry-wraper .entry-main-content textarea,
.entry-wraper .entry-main-content select{
  background: rgba(0,0,0,.02);
  border: 1px solid var(--post-border);
  border-radius: 12px;
  padding: .7rem .85rem;
  outline: none;
}

body.reader-dark .entry-wraper .entry-main-content input,
body.reader-dark .entry-wraper .entry-main-content textarea,
body.reader-dark .entry-wraper .entry-main-content select{
  background: rgba(236,236,236,.06);
}

.entry-wraper .entry-main-content input:focus,
.entry-wraper .entry-main-content textarea:focus,
.entry-wraper .entry-main-content select:focus{
  box-shadow: 0 0 0 3px rgba(0,112,173,.20);
}

body.reader-dark .entry-wraper .entry-main-content input:focus,
body.reader-dark .entry-wraper .entry-main-content textarea:focus,
body.reader-dark .entry-wraper .entry-main-content select:focus{
  box-shadow: 0 0 0 3px rgba(0,221,235,.20);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .entry-header a,
  .entry-wraper .excerpt a,
  .entry-wraper .entry-main-content a,
  .entry-wraper .entry-main-content a img,
  .entry-wraper .entry-main-content a.wc-btn,
  .entry-wraper .entry-main-content .btn,
  .entry-wraper .entry-main-content .button{
    transition: none !important;
  }
}
.follow-author {
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
    min-width: max-content;
    border: 1px solid #191919 !important;
}
.unfollow-author {
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
    min-width: max-content;
    border: 1px solid #191919 !important;
}
/* =========================================================
   FIX: Dark-mode class mismatch + prevent global overrides
   Put at END of post-style.css
   ========================================================= */

/* Treat wc-reading-dark as reader-dark */
body.wc-reading-dark .entry-header,
body.wc-reading-dark .entry-wraper .excerpt,
body.wc-reading-dark .entry-wraper .entry-main-content{
  --post-bg: transparent;
  --post-text-color: #ECECEC;
  --post-muted: rgba(236,236,236,.72);
  --post-soft: rgba(236,236,236,.55);
  --post-border: rgba(236,236,236,.14);
  --post-hr: rgba(236,236,236,.12);

  --post-link: #00DDEB;
  --post-link-hover: #AF40FF;
  --post-link-underline: rgba(0,221,235,.35);

  --post-code-bg: rgba(236,236,236,.08);
  --post-code-text: #ECECEC;

  --post-quote-border: rgba(0,221,235,.35);
  --post-quote-bg: rgba(0,221,235,.08);

  --post-selection-bg: rgba(0,221,235,.22);
}

/* Force post text colors to come from variables (beats most global rules) */
body.post-page .entry-header,
body.post-page .entry-wraper .excerpt,
body.post-page .entry-wraper .entry-main-content{
  color: var(--post-text-color) !important;
}

body.post-page .entry-wraper .excerpt{
  color: var(--post-muted) !important;
}

body.post-page .entry-wraper .entry-main-content p,
body.post-page .entry-wraper .entry-main-content li,
body.post-page .entry-wraper .entry-main-content td,
body.post-page .entry-wraper .entry-main-content blockquote,
body.post-page .entry-wraper .entry-main-content figcaption{
  color: inherit !important; /* inherit from .entry-main-content variable color */
}

body.post-page .entry-wraper .entry-main-content h1,
body.post-page .entry-wraper .entry-main-content h2,
body.post-page .entry-wraper .entry-main-content h3,
body.post-page .entry-wraper .entry-main-content h4,
body.post-page .entry-wraper .entry-main-content h5,
body.post-page .entry-wraper .entry-main-content h6{
  color: var(--post-text-color) !important;
}
.wc-actions-trigger{
    border:1px;
}