/*
 * HyApexFlow Blog Reading Skin (P0)
 * Applied only to plain single posts via body.blog-skin.
 * Scoped under .blog-skin so the three custom .hy-home long articles (160/166/171)
 * keep their own design untouched.
 * Pure presentational layer — no change to headings, copy, links, or schema.
 */

/* Reading column: constrain text blocks; let components (.hy-related) go wider */
.blog-skin .entry-content { padding: 2.5rem 1rem 1rem; font-size: 17px; line-height: 1.75; color: #33424e; }
.blog-skin .entry-content > p,
.blog-skin .entry-content > ul,
.blog-skin .entry-content > ol,
.blog-skin .entry-content > blockquote,
.blog-skin .entry-content > figure,
.blog-skin .entry-content > table,
.blog-skin .entry-content > h2,
.blog-skin .entry-content > h3 {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Base body copy */
.blog-skin .entry-content > p { margin-bottom: 1.4em; }
.blog-skin .entry-content > p:first-of-type { font-size: 19px; line-height: 1.7; color: #0b1f33; }

/* H2 with brand gradient underline */
.blog-skin .entry-content > h2 {
  font-size: 1.75rem; font-weight: 800; color: #0b1f33;
  margin: 2.6rem auto 1.1rem; position: relative; padding-bottom: .6rem;
}
.blog-skin .entry-content > h2::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 72px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #00a8cc 0%, #0056b3 100%);
}

/* H3 with cyan accent bar */
.blog-skin .entry-content > h3 {
  font-size: 1.3rem; font-weight: 700; color: #0b1f33;
  margin: 1.9rem auto .9rem; padding-left: .8rem; border-left: 4px solid #00a8cc;
}

/* Lists */
.blog-skin .entry-content > ul,
.blog-skin .entry-content > ol { padding-left: 1.4em; margin-bottom: 1.4em; }
.blog-skin .entry-content li { margin: .45em 0; }

/* Links */
.blog-skin .entry-content a { color: #0056b3; text-decoration: underline; text-underline-offset: 2px; }
.blog-skin .entry-content a:hover { color: #004080; }

/* Emphasis */
.blog-skin .entry-content strong { color: #0b1f33; }

/* Blockquote / callout */
.blog-skin .entry-content blockquote {
  margin: 1.6em auto; padding: 1rem 1.2rem; border-left: 4px solid #00a8cc;
  background: rgba(0, 168, 204, .08); border-radius: .5rem; color: #0b1f33; font-style: normal;
}

/* Tables */
.blog-skin .entry-content > table {
  width: 100%; border-collapse: collapse; margin: 1.8em auto; font-size: 15px;
  background: #fff; border-radius: .75rem; overflow: hidden; box-shadow: 0 6px 18px -10px rgba(11, 31, 51, .28);
}
.blog-skin .entry-content th,
.blog-skin .entry-content td { padding: .8rem 1rem; border-bottom: 1px solid #e1e8ed; text-align: left; vertical-align: top; }
.blog-skin .entry-content thead th { background: #0056b3; color: #fff; }
.blog-skin .entry-content tbody tr:last-child td,
.blog-skin .entry-content tbody tr:last-child th { border-bottom: none; }

/* Images */
.blog-skin .entry-content > figure { margin: 1.6em auto; }
.blog-skin .entry-content img { max-width: 100%; height: auto; border-radius: .75rem; }
.blog-skin .entry-content figcaption { font-size: .85rem; color: #6c757d; text-align: center; margin-top: .5rem; }

/* Reading progress bar (single posts) */
.hy-reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(0, 86, 179, .08); z-index: 9999; }
.hy-reading-progress span { display: block; height: 100%; width: 0; background: #0056b3; transition: width .12s linear; }

/* Related reading component (appended after content; wider than text column) */
.hy-related { max-width: 1140px; margin: 3rem auto 1rem; padding: 0 1rem; }
.hy-related-title {
  font-size: 1.5rem; font-weight: 800; color: #0b1f33; margin: 0 auto 1.2rem; max-width: 1140px;
  position: relative; padding-bottom: .5rem;
}
.hy-related-title::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #00a8cc 0%, #0056b3 100%);
}
.hy-related-card {
  display: block; background: #fff; border: 1px solid #e1e8ed; border-radius: .75rem;
  padding: 1.1rem 1.2rem; color: #0b1f33; text-decoration: none; font-weight: 600; height: 100%;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.hy-related-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0, 0, 0, .08); border-color: #0056b3; color: #0056b3; }

/* Post header (title + meta) — styled only, H1 markup untouched, SEO-safe */
.blog-skin .entry-header,
.blog-skin .ast-single-post .entry-header {
  max-width: 760px; margin: 2.5rem auto 0; padding: 0 1rem; text-align: center;
}
.blog-skin .entry-title,
.blog-skin .ast-single-post .entry-title {
  font-size: 2.4rem; font-weight: 800; color: #0b1f33; line-height: 1.2; margin-bottom: .6rem;
}
.blog-skin .entry-meta,
.blog-skin .ast-single-post .entry-meta {
  color: #6c757d; font-size: .9rem; margin-bottom: 0;
}
.blog-skin .entry-meta a,
.blog-skin .ast-single-post .entry-meta a { color: #0056b3; text-decoration: none; }
.blog-skin .entry-meta a:hover,
.blog-skin .ast-single-post .entry-meta a:hover { text-decoration: underline; }
.blog-skin .entry-header::after,
.blog-skin .ast-single-post .entry-header::after {
  content: ''; display: block; width: 72px; height: 4px; border-radius: 2px;
  margin: 1.2rem auto 0; background: linear-gradient(90deg, #00a8cc 0%, #0056b3 100%);
}