/* Blogs - modern dark polish on top of Ghost Source (theme "blogs"). Plain CSS, no external resources. */
:root {
  --vn-accent: #4CAF50; --vn-accent-soft: rgba(76,175,80,.14);
  --vn-card: #151a22; --vn-card-hover: #1a212b; --vn-border: #262d38;
  --vn-text: #e6edf3; --vn-muted: #8b949e;
}
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(76,175,80,.16), transparent 60%),
    radial-gradient(800px 380px at 96% 2%, rgba(56,139,253,.11), transparent 55%),
    #0d1117 !important;
  background-attachment: fixed !important;
  color: var(--vn-text);
  -webkit-font-smoothing: antialiased;
}
/* navigation */
.gh-navigation {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13,17,23,.72) !important;
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--vn-border);
}
.gh-navigation-logo { font-weight: 800; letter-spacing: -.02em; }
.gh-navigation-menu a { opacity: .85; transition: color .15s, opacity .15s; }
.gh-navigation-menu a:hover { opacity: 1; color: var(--vn-accent); }
/* feed cards */
.gh-card {
  background: var(--vn-card); border: 1px solid var(--vn-border) !important; border-radius: 14px;
  padding: 24px !important; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  position: relative; overflow: hidden;
}
.gh-card::before, .gh-card::after { border: 0 !important; }
.gh-card:hover { transform: translateY(-3px); background: var(--vn-card-hover); border-color: rgba(76,175,80,.6) !important; box-shadow: 0 14px 34px rgba(0,0,0,.4); }
.gh-card.post { border-top: 3px solid var(--vn-accent) !important; }
.gh-card.tag-docker { border-top-color: #22d3ee !important; }
.gh-card.tag-azure { border-top-color: #3b82f6 !important; }
.gh-card.tag-kubernetes { border-top-color: #f59e0b !important; }
.gh-card.tag-powershell { border-top-color: #818cf8 !important; }
.gh-card.tag-ai { border-top-color: #a371f7 !important; }
.gh-card-title { font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.gh-card:hover .gh-card-title { color: #fff; }
.gh-card-excerpt { color: var(--vn-muted); }
.gh-card-meta, .gh-card-date, .gh-card-author { color: var(--vn-muted); font-size: 1.3rem; }
.gh-card-tag {
  display: inline-block; padding: 3px 11px; border-radius: 999px; background: var(--vn-accent-soft);
  color: #7ee787 !important; font-size: 1.1rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
/* highlight hero */
.gh-header.is-highlight .gh-card { background: linear-gradient(160deg, #18202a, #12171f); border-color: var(--vn-border); }
.gh-header.is-highlight .gh-card-title { font-weight: 800; letter-spacing: -.02em; }
.gh-more { letter-spacing: -.01em; }
/* article */
.gh-article-title { font-weight: 800; letter-spacing: -.025em; line-height: 1.12; }
.gh-article-tag { color: #7ee787 !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.gh-content { font-size: 1.8rem; line-height: 1.75; }
.gh-content h2, .gh-content h3 { letter-spacing: -.015em; margin-top: 2.2em; font-weight: 750; }
.gh-content h2 { padding-bottom: .35em; border-bottom: 1px solid var(--vn-border); }
.gh-content a:not(.kg-btn) { color: #7ee787; text-decoration-color: rgba(126,231,135,.4); text-underline-offset: 3px; }
.gh-content a:not(.kg-btn):hover { text-decoration-color: #7ee787; }
.gh-content img, .gh-content figure img { border-radius: 12px; border: 1px solid var(--vn-border); box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.gh-content blockquote { border-left: 3px solid var(--vn-accent); background: var(--vn-accent-soft); padding: .8em 1.2em; border-radius: 0 10px 10px 0; }
.gh-content :not(pre) > code { background: rgba(110,118,129,.22); border: 1px solid rgba(110,118,129,.25); padding: .12em .42em; border-radius: 6px; font-size: .9em; color: #e6edf3; }
.gh-content pre { position: relative; border: 1px solid var(--vn-border); border-radius: 12px; background: #0b0f14 !important; padding: 0 !important; box-shadow: 0 6px 22px rgba(0,0,0,.35); }
.gh-content pre code { background: transparent !important; border: 0 !important; padding: 1.1em 1.3em !important; display: block; overflow-x: auto; font-size: .88em; line-height: 1.65; }
.gh-content table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--vn-border); border-radius: 12px; overflow: hidden; font-size: .95em; }
.gh-content th { background: #1a212b; text-align: left; font-weight: 700; }
.gh-content th, .gh-content td { padding: .7em .95em; border-bottom: 1px solid var(--vn-border); }
.gh-content tr:last-child td { border-bottom: 0; }
.gh-content hr { border-color: var(--vn-border); }
/* footer */
.gh-footer { border-top: 1px solid var(--vn-border); color: var(--vn-muted); }
::selection { background: rgba(76,175,80,.35); }
@media (max-width: 767px) { .gh-card { padding: 18px !important; } }
/* fixes */
.gh-card-tag { align-self: flex-start; width: fit-content; max-width: 100%; }
.gh-card-wrapper { align-items: flex-start; }
.gh-card.tag-docker .gh-card-tag { background: rgba(34,211,238,.13); color: #67e8f9 !important; }
.gh-card.tag-azure .gh-card-tag { background: rgba(59,130,246,.15); color: #93c5fd !important; }
.gh-card.tag-kubernetes .gh-card-tag { background: rgba(245,158,11,.14); color: #fcd34d !important; }
.gh-card.tag-powershell .gh-card-tag { background: rgba(129,140,248,.15); color: #c7d2fe !important; }
.gh-card.tag-ai .gh-card-tag { background: rgba(163,113,247,.16); color: #d2b8ff !important; }
/* cover images in cards */
.gh-card-image { border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.gh-card-image img { width: 100%; height: auto; display: block; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; transition: transform .35s ease; }
.gh-card:hover .gh-card-image img { transform: scale(1.035); }
.gh-card.post { padding: 14px 14px 22px !important; }
.gh-card-wrapper { padding: 0 6px; }
.gh-header.is-landing { padding-bottom: 8px; }
.gh-header.is-landing .gh-header-title { font-weight: 800; letter-spacing: -.03em; background: linear-gradient(90deg,#ffffff,#7ee787); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* article cover */
.gh-article-image img { border-radius: 16px; border: 1px solid var(--vn-border); box-shadow: 0 16px 44px rgba(0,0,0,.45); }
/* copy button on code blocks */
.vn-copy { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 5px 12px; font: 600 12px/1 system-ui, sans-serif; letter-spacing: .02em;
  color: #c9d1d9; background: rgba(110,118,129,.25); border: 1px solid rgba(110,118,129,.4); border-radius: 8px; cursor: pointer; opacity: .0; transition: opacity .15s, background .15s; }
.gh-content pre:hover .vn-copy, .vn-copy:focus-visible { opacity: 1; }
.vn-copy:hover { background: rgba(76,175,80,.35); border-color: rgba(76,175,80,.7); color: #fff; }
.vn-copy.is-done { opacity: 1; background: rgba(76,175,80,.45); border-color: #4CAF50; color: #fff; }
@media (hover: none) { .vn-copy { opacity: 1; } }
.gh-content { font-size: 1.8rem; }
@media (max-width: 767px) { .gh-content { font-size: 1.7rem; } }
/* wider layout + more breathing room (v6) */
html:root { --content-width: 920px; --grid-gap: clamp(24px, 2.2vw, 40px); }
.gh-container.is-grid:not(.has-sidebar) :is(.gh-container-title, .gh-main, .gh-more) { grid-column: 1 / -1; }
.gh-container.is-list:not(.has-sidebar) :is(.gh-container-title, .gh-main, .gh-more) { grid-column: 2 / span 14; }
.gh-content { line-height: 1.85; }
.gh-content > * + * { margin-top: clamp(22px, 2vw, 32px); }
.gh-content > h2 { margin-top: clamp(48px, 5vw, 72px); }
.gh-content > h3 { margin-top: clamp(36px, 4vw, 56px); }
.gh-content > ul, .gh-content > ol { padding-left: 1.4em; }
.gh-content li + li { margin-top: .5em; }
.gh-article-title { font-size: clamp(3.4rem, 2.6vw + 2rem, 5.6rem); }
.gh-article-excerpt { font-size: 2rem; line-height: 1.5; color: var(--vn-muted); }
.gh-card-title { font-size: clamp(2rem, .5vw + 1.7rem, 2.4rem); }
.gh-card-excerpt { font-size: 1.5rem; line-height: 1.6; }
@media (max-width: 767px) { .gh-content > * + * { margin-top: 22px; } }
/* read-only blog again (signups off): hide member UI */
[data-portal="signup"], [data-portal="signin"], .gh-navigation-members, .gh-footer-signup, .gh-header-form,
.gh-header form, .gh-footer form, .gh-form { display: none !important; }
/* justified article paragraphs (hyphenation keeps word spacing even) */
.gh-content > p, .gh-content > ul > li, .gh-content > ol > li, .gh-content > blockquote p {
  text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
}
.gh-content pre, .gh-content code, .gh-content table, .gh-content figcaption, .gh-content h1, .gh-content h2, .gh-content h3, .gh-content h4 { text-align: left; hyphens: none; }
@media (max-width: 600px) { .gh-content > p, .gh-content > ul > li, .gh-content > ol > li { text-align: left; hyphens: manual; } }
/* share menu */
.vn-share-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; min-width: 210px; padding: 6px; background: #151a22; border: 1px solid var(--vn-border); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.vn-share-menu a, .vn-share-menu button { display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: #e6edf3; font: 600 14px/1.2 system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.vn-share-menu a:hover, .vn-share-menu button:hover { background: rgba(76,175,80,.22); color: #fff; }
/* table of contents */
.vn-toc { background: var(--vn-card); border: 1px solid var(--vn-border); border-left: 3px solid var(--vn-accent); border-radius: 12px; padding: 18px 24px; }
.vn-toc summary { cursor: pointer; font-weight: 800; font-size: 1.7rem; letter-spacing: -.01em; list-style: none; }
.vn-toc summary::-webkit-details-marker { display: none; }
.vn-toc summary::after { content: " \25BE"; color: var(--vn-muted); }
.vn-toc ul { list-style: none; margin: 14px 0 0; padding: 0; columns: 2; column-gap: 40px; }
.vn-toc li { break-inside: avoid; margin: 0 0 6px; padding: 0; text-align: left; font-size: 1.5rem; line-height: 1.45; }
.vn-toc li.is-sub { padding-left: 16px; font-size: 1.4rem; opacity: .88; }
.vn-toc a { color: #c9d1d9 !important; text-decoration: none !important; }
.vn-toc a:hover { color: #7ee787 !important; }
@media (max-width: 767px) { .vn-toc ul { columns: 1; } }
.gh-content h2, .gh-content h3 { scroll-margin-top: 90px; }