/*
Theme Name: Ventureheap Blog
Theme URI: https://www.ventureheapacademy.com/blog/
Author: Ventureheap Academy
Description: Blog theme for Ventureheap Academy. Uses the main website's shared header, footer, fonts, CSS and JS (from the site root) so the blog looks exactly like the rest of the site. Install WordPress in /blog/ of the main site.
Version: 1.0.4
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: ventureheap
*/

/* Everything else (colours, buttons, hero, cards, header, footer) comes from /assets/css/style.css.
   This file only adds what the blog needs on top. */

/* ---------- WordPress core classes ---------- */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.alignleft { float: left; margin: 6px 24px 16px 0; }
.alignright { float: right; margin: 6px 0 16px 24px; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption, .wp-block-image figcaption, figcaption.wp-element-caption { font-size: 13px; color: var(--muted); text-align: center; margin-top: 8px; }
.sticky .post__cat::after { content: " · Featured"; }
.bypostauthor > article .comment-author b::after { content: " (author)"; font-weight: 400; color: var(--muted); }
.gallery-caption { font-size: 13px; }

/* ---------- Listing ---------- */
.toolbar a.chip { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.post__thumb { display: block; }
.post__img--empty { display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; font-family: var(--font-head); font-size: 64px; color: var(--black); background: linear-gradient(135deg, #fff36a, #ffd60a 55%, #ffb3d1); }
.post__cat { text-decoration: none; }
.vh-empty { padding: 48px 24px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.vh-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 40px; }
.vh-pagination a, .vh-pagination span { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 14px; background: var(--glass-bg-strong); border: var(--glass-border); box-shadow: var(--glass-shadow); }
.vh-pagination .current { background: linear-gradient(180deg, #2a2a2e, #0b0b0c); color: var(--yellow); border-color: transparent; }
.vh-pagination a:hover { background: var(--yellow); }
.vh-pagination .dots { background: none; border: 0; box-shadow: none; }
.vh-404-search { max-width: 460px; margin-top: 24px; }
.vh-404-search .search { max-width: none; }

/* ---------- Article hero ---------- */
.hero--article { padding-bottom: clamp(56px, 6vw, 80px); }
.hero--article h1 { font-size: clamp(32px, 4.2vw, 56px); max-width: 960px; }
.hero--article .hero__badge { text-decoration: none; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 22px; font-size: 14px; color: #c8c8ce; }
.article-meta > * + *::before { content: "•"; margin-right: 18px; color: #6b6b75; }
.article-meta__author { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; }
.article-meta__avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--yellow); }

/* ---------- Article layout ---------- */
.article-section { padding-top: 0; margin-top: -40px; position: relative; z-index: 2; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 3vw, 40px); align-items: start; }
.article { padding: clamp(20px, 3.5vw, 48px); border-radius: 28px; background: rgba(255,255,255,.94); }
.article:hover { box-shadow: var(--glass-shadow); }
.article--page { max-width: 900px; margin-inline: auto; }
.article__cover { margin: calc(-1 * clamp(20px, 3.5vw, 48px)) calc(-1 * clamp(20px, 3.5vw, 48px)) clamp(24px, 3vw, 36px); }
.article__cover img { width: 100%; height: auto; max-height: 560px; object-fit: cover; border-radius: 28px 28px 0 0; }

.article-aside { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 18px; }
.toc { padding: 20px; border-radius: 22px; }
.toc__title { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.toc ol { display: grid; gap: 2px; max-height: 46vh; overflow-y: auto; }
.toc a { display: block; padding: 7px 10px; border-radius: 10px; font-size: 14px; line-height: 1.4; color: var(--ink-2); border-left: 2px solid transparent; transition: background .2s, color .2s; }
.toc .toc__l3 a { padding-left: 24px; font-size: 13px; }
.toc a:hover { background: rgba(250,232,11,.18); color: var(--black); }
.toc a.is-active { background: #fdf5a8; color: var(--black); font-weight: 600; border-left-color: var(--yellow-2); }
.aside-cta { position: relative; overflow: hidden; padding: 24px; border-radius: 22px; color: #fff; background: radial-gradient(120% 100% at 0% 0%, #2a2a10 0%, #0b0b0c 60%); box-shadow: 0 18px 40px rgba(0,0,0,.25); display: grid; gap: 12px; }
.aside-cta::after { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(250,232,11,.4), transparent 65%); pointer-events: none; }
.aside-cta h3 { color: #fff; font-size: 22px; }
.aside-cta p { font-size: 14px; color: #c8c8ce; }
.aside-cta .eyebrow { justify-self: start; margin: 0; }
.share { padding: 18px 20px; border-radius: 22px; }
.share__row { display: flex; flex-wrap: wrap; gap: 8px; }
.share__row a, .share__copy { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid rgba(0,0,0,.08); background: #fff; cursor: pointer; font-family: inherit; color: var(--ink); }
.share__row a:hover, .share__copy:hover { background: var(--yellow); }

/* ---------- Article typography ---------- */
.entry-content { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.8; color: var(--ink); }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2, .entry-content h3, .entry-content h4 { scroll-margin-top: calc(var(--header-h) + 24px); color: var(--black); line-height: 1.25; margin-top: 1.8em; }
.entry-content h2 { font-size: clamp(26px, 2.4vw, 34px); }
.entry-content h3 { font-size: clamp(21px, 1.8vw, 25px); }
.entry-content h4 { font-family: var(--font-body); font-size: 18px; font-weight: 600; }
.entry-content a { color: var(--black); text-decoration: underline; text-decoration-color: var(--yellow-2); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.entry-content a:hover { background: rgba(250,232,11,.3); }
.entry-content strong { font-weight: 600; color: var(--black); }
.entry-content ul, .entry-content ol { padding-left: 1.4em; display: grid; gap: .4em; }
.entry-content ul { list-style: none; padding-left: 0; }
.entry-content ul > li { position: relative; padding-left: 26px; }
.entry-content ul > li::before { content: ""; position: absolute; left: 6px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow-2); box-shadow: 0 0 0 3px rgba(250,232,11,.25); }
.entry-content ol { list-style: decimal; }
.entry-content ol > li::marker { font-weight: 700; color: var(--black); }
.entry-content img { border-radius: 18px; height: auto; }
.entry-content figure { margin-inline: 0; }
.entry-content blockquote { margin: 1.6em 0; padding: 20px 24px; border-radius: 0 18px 18px 0; border-left: 4px solid var(--yellow-2); background: #fdfcec; font-family: var(--font-head); font-size: 1.2em; line-height: 1.5; }
.entry-content blockquote p { margin: 0; }
.entry-content blockquote cite { display: block; margin-top: 10px; font-family: var(--font-body); font-size: 14px; font-style: normal; color: var(--muted); }
.entry-content hr { border: 0; height: 1px; background: var(--line); margin: 2em 0; }
.entry-content code { padding: 2px 6px; border-radius: 6px; background: #f1f1f4; font-size: .9em; }
.entry-content pre { padding: 18px 20px; border-radius: 16px; background: #111114; color: #f4f4f5; overflow-x: auto; font-size: 14px; line-height: 1.6; }
.entry-content pre code { background: none; padding: 0; color: inherit; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.entry-content th, .entry-content td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.entry-content th { background: #fdf5a8; font-weight: 600; }
.entry-content .wp-block-button__link { display: inline-flex; padding: 12px 24px; border-radius: 999px; font-weight: 600; text-decoration: none; color: var(--black); background: linear-gradient(180deg, #fff36a, var(--yellow) 45%, var(--yellow-2)); }
.entry-content iframe, .entry-content .wp-block-embed iframe { width: 100%; border-radius: 16px; aspect-ratio: 16 / 9; height: auto; }
.entry-content .wp-block-table thead { border-bottom: 0; }

.article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.article__tags a { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; background: #f4f4f6; color: var(--ink-2); }
.article__tags a:hover { background: var(--yellow); color: var(--black); }
.author-box { display: flex; gap: 18px; align-items: center; margin-top: 36px; padding: 22px; border-radius: 20px; background: #fdfcec; border: 1px solid #f3eeb2; }
.author-box img { border-radius: 50%; border: 3px solid var(--yellow); flex: none; }
.author-box small { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.author-box h3 { font-size: 22px; }
.author-box p { font-size: 14px; color: var(--ink-2); margin-top: 4px; }

/* ---------- Comments ---------- */
.article-comments { max-width: 900px; }
.vh-comments { padding: clamp(20px, 3vw, 36px); border-radius: 24px; }
.vh-comments h2 { font-size: 26px; margin-bottom: 18px; }
.vh-comment-list { display: grid; gap: 16px; margin-bottom: 28px; }
.vh-comment-list .children { margin: 16px 0 0 28px; display: grid; gap: 16px; }
.vh-comment-list .comment-body { padding: 16px; border-radius: 16px; background: #fafafa; }
.vh-comment-list .avatar { border-radius: 50%; float: left; margin-right: 12px; }
.vh-comment-list .comment-meta { font-size: 13px; color: var(--muted); }
.comment-form { display: grid; gap: 12px; }
.comment-form label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(0,0,0,.12); background: #fff; font: inherit; }
.comment-form textarea { min-height: 140px; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-aside .toc { grid-column: 1 / -1; }
  .toc ol { max-height: none; }
}
@media (max-width: 599px) {
  .article-aside { grid-template-columns: minmax(0, 1fr); }
  .article { border-radius: 22px; }
  .article__cover img { border-radius: 22px 22px 0 0; }
  .article-meta > * + *::before { margin-right: 10px; }
  .article-meta { gap: 6px 10px; }
  .author-box { flex-direction: column; align-items: flex-start; }
  .alignleft, .alignright { float: none; margin: 0 0 16px; }
}

/* ---------- Fixes ---------- */
.toolbar a.chip[aria-pressed="true"] { color: #fff; }
.article__cover { margin-top: 0; }
.article__cover img { max-height: 520px; object-fit: contain; background: #f4f4f6; border-radius: 20px; }
.entry-content table { display: table; }
.entry-content .wp-block-table, .entry-content .table-wrap { overflow-x: auto; }
@media (max-width: 599px) { .entry-content table { display: block; overflow-x: auto; } }
@media (max-width: 599px) { .article-meta > * + *::before { display: none; } .article-meta { gap: 6px 14px; } }

/* ---------- 1.0.4: DM Serif Display headings, 4-up grid, in-place filtering ---------- */
.hero h1, .section-head h2, .post h3, .post h3 a, .vh-empty h2,
.entry-header h1, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.author-box h3, .vh-comments h2, .vh-comments h3, .aside-cta h3, .related h2,
body .wp-block-heading, main#top h1, main#top h2, main#top h3, main#top h4 {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif !important;
  font-weight: 400 !important;
  letter-spacing: 0;
}
.post h3 { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.3; }
.posts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1199px) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .posts { grid-template-columns: 1fr; } }
#vh-results { transition: opacity .2s ease; }
#vh-results.is-loading { opacity: .45; pointer-events: none; }