/* =====================================================================
   Senior-friendly reading mode — applies to all blog posts.
   Larger fonts, generous line-height, higher contrast, underlined links.
   Target reader: 65+ years old, occasional reading glasses.
   ===================================================================== */

body.post-view {
  --read-body: 18.5px;
  --read-body-line: 1.85;
  --read-h2: clamp(24px, 4.2vw, 30px);
  --read-h3: clamp(19px, 3vw, 22px);
  --read-li-gap: 10px;
  --read-para-gap: 18px;
  --read-link: #b85c00;
}

/* === Body text — all article zones === */
body.post-view .post-main p,
body.post-view .post-main li,
body.post-view .article-content p,
body.post-view .article-content li,
body.post-view .post-content p,
body.post-view .post-content li,
body.post-view .devta-premium-main p,
body.post-view .devta-premium-main li {
  font-size: var(--read-body) !important;
  line-height: var(--read-body-line) !important;
  color: #1f2937 !important;
  letter-spacing: .005em;
}

body.post-view .post-main p,
body.post-view .article-content p,
body.post-view .post-content p,
body.post-view .devta-premium-main p {
  margin: 0 0 var(--read-para-gap) !important;
}

body.post-view .post-main li,
body.post-view .article-content li,
body.post-view .post-content li,
body.post-view .devta-premium-main li {
  margin-bottom: var(--read-li-gap) !important;
}

/* === Headings — larger, more breath === */
body.post-view .post-main h2,
body.post-view .article-content h2,
body.post-view .post-content h2,
body.post-view .devta-premium-main h2:not(.devta-related-block__head) {
  font-size: var(--read-h2) !important;
  line-height: 1.3 !important;
  margin: 36px 0 16px !important;
  font-weight: 700 !important;
}
body.post-view .post-main h3,
body.post-view .article-content h3,
body.post-view .post-content h3,
body.post-view .devta-premium-main h3 {
  font-size: var(--read-h3) !important;
  line-height: 1.35 !important;
  margin: 26px 0 10px !important;
  font-weight: 700 !important;
}

/* === Links — underlined for clarity === */
body.post-view .post-main a:not(.vg-buy-btn):not(.vgp-btn),
body.post-view .article-content a:not(.vg-buy-btn):not(.vgp-btn),
body.post-view .post-content a:not(.vg-buy-btn):not(.vgp-btn),
body.post-view .devta-premium-main a:not(.vg-buy-btn):not(.devta-premium-btn):not(.devta-intel-core__btn) {
  color: var(--read-link) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1.5px !important;
  font-weight: 600;
}

/* === Strong/Bold — slightly more weight === */
body.post-view .post-main strong,
body.post-view .devta-premium-main strong {
  font-weight: 800;
  color: #0f172a;
}

/* === FAQ section — readable === */
body.post-view .faq summary,
body.post-view .faq details summary {
  font-size: 17px !important;
  font-weight: 700 !important;
  padding: 14px 16px !important;
}
body.post-view .faq__answer,
body.post-view .faq details > div {
  font-size: var(--read-body) !important;
  line-height: var(--read-body-line) !important;
  padding: 0 16px 14px !important;
}

/* === Blockquote === */
body.post-view .post-main blockquote,
body.post-view .devta-premium-main blockquote {
  font-size: var(--read-body) !important;
  line-height: var(--read-body-line) !important;
  padding: 14px 18px !important;
  margin: 18px 0 !important;
}

/* === Lead/intro paragraph — even larger === */
body.post-view .post-main .lead,
body.post-view .post-main p:first-of-type,
body.post-view .devta-premium-main p:first-of-type {
  font-size: 19.5px !important;
  line-height: 1.75 !important;
  color: #1e293b !important;
}

/* === Mobile (≤640px) — keep readable, slight reduction === */
@media (max-width: 640px) {
  body.post-view {
    --read-body: 17.5px;
    --read-body-line: 1.8;
    --read-para-gap: 16px;
  }
}

/* === Very narrow phone (≤380px) === */
@media (max-width: 380px) {
  body.post-view {
    --read-body: 17px;
    --read-h2: 22px;
    --read-h3: 18.5px;
  }
}

/* === Reader can opt in to even larger via system-prefer-bigger or user setting === */
@media (prefers-reduced-motion: reduce) {
  body.post-view * { transition: none !important; }
}

/* === Reading mode controls (visible to user if enabled) === */
.read-size-toggle {
  position: fixed; bottom: 80px; right: 14px; z-index: 80;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 13px;
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(15,23,42,.12);
  cursor: pointer;
  display: none;
}

/* When .read-size-large is on body, scale up another 12% */
body.read-size-large {
  --read-body: 21px !important;
  --read-body-line: 1.9 !important;
  --read-h2: clamp(26px, 4.5vw, 33px) !important;
  --read-h3: clamp(21px, 3.2vw, 24px) !important;
}

/* === Q&A section — make it visible too on devta pages === */
body.post-view #qaSection {
  margin-top: 32px !important;
  padding: 22px !important;
  background: #fff !important;
  border: 1px solid #e7e2d6 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.05) !important;
}
body.post-view #qaSection .qa-section__head h2 {
  font-size: 20px !important;
  margin: 0 0 14px !important;
}

/* === dark-card exception === paragraphs with inline gray text (#cbd5e1, #e5e7eb, white) preserve their color */
body.post-view .devta-premium-main p[style*="color:#cbd5e1"],
body.post-view .devta-premium-main p[style*="color: #cbd5e1"],
body.post-view .devta-premium-main p[style*="color:#e5e7eb"],
body.post-view .devta-premium-main p[style*="color:#fff"],
body.post-view .post-main p[style*="color:#cbd5e1"],
body.post-view .post-main p[style*="color:#fff"],
body.post-view .article-content p[style*="color:#cbd5e1"],
body.post-view .post-content p[style*="color:#cbd5e1"] {
  color: inherit !important;
}
/* Containers with dark gradient background — let inline child colors win */
body.post-view .devta-premium-main div[style*="#0f172a"] p,
body.post-view .devta-premium-main div[style*="#1e293b"] p,
body.post-view .devta-premium-main section[style*="#0f172a"] p,
body.post-view .devta-premium-main *[style*="linear-gradient(135deg,#0f172a"] p {
  color: #e5e7eb !important;
}