/*
Theme Name:  Virtually Boring
Theme URI:   https://www.virtuallyboring.com/
Description: GeneratePress child theme for the 2026 Virtually Boring redesign (design K).
Author:      Daniel Boring
Template:    generatepress
Version:     1.0.0
*/

h1, h2, h3, .vb-display { letter-spacing: -0.02em; }

/* Logo: the tagline shows on every page except the homepage */
.vb-logo { display: flex; align-items: center; gap: 12px; color: var(--contrast); text-decoration: none; }
.vb-logo:hover { color: var(--contrast); }
.vb-logo__mark { width: 42px; height: 42px; border-radius: 11px; background: var(--accent); color: #fff;
  display: grid; place-items: center; font: 800 24px/1 var(--gp-font--bricolage-grotesque), sans-serif; letter-spacing: -0.05em; }
.vb-logo__name { display: block; font: 800 22px/1 var(--gp-font--bricolage-grotesque), sans-serif; letter-spacing: -0.02em; }
.vb-tagline { display: block; margin-top: 5px; font: 400 11px/1 var(--gp-font--jetbrains-mono), monospace; color: #4B5563; }
.vb-cursor { color: #0F9F74; font-weight: 700; }
.home .vb-tagline { display: none; }

/* Header: logo, search, menu on one row (search drops to its own row on phones) */
.site-header { border-bottom: 1px solid var(--base); }
.inside-header { flex-wrap: wrap; gap: 12px 28px; }
.vb-search { flex: 1 1 280px; max-width: 480px; margin: 0; }
.vb-search input[type="search"] { width: 100%; min-height: 44px; padding: 0 16px 0 40px; border: 1px solid #D5DCE5;
  border-radius: 999px; background: #F6F8FA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235B6573' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px 50%;
  color: var(--contrast); font-size: 16px; }
.vb-search input[type="search"]:focus { background-color: #fff; border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.nav-float-right .inside-header .main-navigation { margin-left: auto; }
@media (max-width: 768px) {
  .inside-header { padding-left: 16px; padding-right: 16px; }
  .vb-search { order: 10; flex: 1 1 100%; max-width: none; }
}

/* Header dropdown (Articles → topics) */
@media (min-width: 769px) {
  .main-navigation .main-nav ul ul { width: 230px; padding: 6px; box-sizing: border-box; border: 1px solid var(--base);
    border-radius: 14px; box-shadow: 0 16px 36px rgba(17,20,24,.14); }
  .main-navigation .main-nav ul ul li a { padding: 9px 12px; border-radius: 9px; font-size: 15px; line-height: 1.3; }
  .main-navigation .main-nav ul ul li a:hover, .main-navigation .main-nav ul ul li a:focus { background: var(--base-2); }
}
.main-navigation .main-nav ul ul li.vb-menu-all { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--base); }
.main-navigation .main-nav ul ul li.vb-menu-all > a { color: var(--accent-2); }
.main-navigation .main-nav ul ul li.vb-menu-latest { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--base); }
.main-navigation .main-nav ul ul li.vb-menu-latest > a { color: var(--accent-2); }
@media (max-width: 768px) {
  .main-navigation .main-nav ul ul li a { padding-left: 36px; }
}

/* Pills and badges */
.vb-tag { display: inline-block; padding: 6px 12px; border-radius: 6px; background: var(--mint); color: var(--contrast);
  font: 500 14px var(--gp-font--jetbrains-mono), monospace; transform: rotate(-2deg); }
.vb-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 400 12px var(--gp-font--jetbrains-mono), monospace;
  border: 1px solid rgba(255,255,255,.6); color: #fff; }
.vb-badge--mint { background: var(--mint); border-color: var(--mint); color: var(--contrast); }

/* Code: inline */
.entry-content :not(pre) > code { font-family: var(--gp-font--jetbrains-mono), monospace; font-size: .88em;
  background: #EEF1F5; padding: 2px 6px; border-radius: 6px; }

/* Code: blocks (works with the Syntax-highlighting Code Block plugin) */
.vb-code { position: relative; margin: 0 0 2em; border-radius: 16px; overflow: hidden; background: var(--code); }
.vb-code::before { content: attr(data-label); display: block; padding: 10px 18px; background: #12304D;
  color: #B9D3EC; font: 13px var(--gp-font--jetbrains-mono), monospace; min-height: 18px; }
.vb-code pre, .vb-code pre.wp-block-code { margin: 0; padding: 18px 20px; border: 0; border-radius: 0; background: transparent;
  color: #EAF2FB; font: 15px/1.65 var(--gp-font--jetbrains-mono), monospace; overflow-x: auto; }
.vb-code .hljs { background: transparent; color: #EAF2FB; padding: 0; }
.vb-copy { position: absolute; top: 6px; right: 8px; min-height: 30px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--mint); color: var(--contrast); font: 500 13px var(--gp-font--jetbrains-mono), monospace; cursor: pointer; }
.vb-copy:hover, .vb-copy:focus { background: #A7F3D0; color: var(--contrast); }

/* Table of contents */
.vb-toc { margin: 0; padding-left: 22px; display: grid; gap: 8px 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vb-toc--side { display: flex; flex-direction: column; padding: 0 0 0 14px; list-style: none; border-left: 2px solid var(--base); }
.vb-toc-box { margin: 0 0 36px; padding: 4px 22px 18px; border: 2px solid var(--contrast); border-radius: 18px; }
.vb-toc-box summary { padding: 14px 0; cursor: pointer; font: 800 21px var(--gp-font--bricolage-grotesque), sans-serif; }

/* Topic buttons */
.vb-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.vb-chips a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px;
  border: 1px solid #C9D2DE; background: #fff; color: var(--contrast); font-weight: 600; text-decoration: none; }
.vb-chips a:hover { border-color: var(--accent-2); color: var(--accent-2); }

/* ---------- Single posts ---------- */
/* Title band */
.vb-post-band { background: var(--accent); color: #fff; }
.vb-post-band__inner { max-width: 1180px; margin: 0 auto; padding: 48px 20px 56px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 18px; }
.vb-post-band.has-image .vb-post-band__inner { padding-bottom: 120px; }
.vb-crumbs { font-size: 15px; color: #fff; }
.vb-crumbs a { color: #fff; text-underline-offset: 3px; }
.vb-crumbs a:hover { text-decoration-thickness: 2px; }
.vb-post-band__title { margin: 0; max-width: 900px; color: #fff; font-size: clamp(36px, 5vw, 60px); line-height: 1.02; letter-spacing: -.035em; }
.vb-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.vb-badges:empty { display: none; }
.vb-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 16px; color: #fff; }
.vb-byline strong { color: #fff; }
.vb-byline .vb-avatar-img { width: 44px; height: 44px; border-radius: 50%; background: var(--mint); }
/* Featured image overlapping the band */
.vb-post-image { position: relative; max-width: 1180px; margin: -84px auto 0; padding: 0 20px; box-sizing: border-box; }
.vb-post-image img { display: block; width: 100%; height: auto; background: #fff;
  border-radius: 22px; box-shadow: 0 20px 44px rgba(17,20,24,.18); }

/* Older posts without a contents list run full width: keep lines readable */
.single.no-sidebar .inside-article { max-width: 860px; }

/* "What's in this post" and "On this page" */
.vb-toc a { color: var(--contrast-2); text-decoration: none; }
.vb-toc a:hover { color: var(--contrast); text-decoration: underline; }
.single .inside-right-sidebar { position: sticky; top: calc(24px + var(--wp-admin--admin-bar--height, 0px));
  max-height: calc(100vh - 48px); overflow: auto; }
.vb-side-toc { font-size: 15px; }
.vb-side-toc__title { margin: 0 0 12px; font: 800 17px var(--gp-font--bricolage-grotesque), sans-serif; color: var(--contrast); }
.vb-toc--side { gap: 10px; margin: 0; line-height: 1.35; }
.vb-toc--side li { margin: 0; }
.vb-toc--side a { display: block; }
.vb-toc--side li.is-active { margin-left: -16px; padding-left: 14px; border-left: 2px solid var(--accent); }
.vb-toc--side li.is-active a { color: var(--contrast); font-weight: 700; }

/* Thanks card */
.vb-thanks { margin-top: 56px; padding: 28px; border-radius: 22px; background: var(--accent); color: #fff;
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.vb-thanks .vb-avatar-img { width: 88px; height: 88px; border-radius: 50%; background: var(--mint); }
.vb-thanks > div { flex: 1 1 280px; }
.vb-thanks p { margin: 0; font-size: 17px; line-height: 1.5; color: #fff; }
.vb-thanks .vb-thanks__title { margin: 0 0 6px; font: 800 24px/1.2 var(--gp-font--bricolage-grotesque), sans-serif; color: #fff; }
.vb-thanks a { color: #fff; font-weight: 700; }

/* Tables in posts: scroll sideways on small screens instead of widening the page */
.entry-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 16px; }
.entry-content th, .entry-content td { padding: 8px 12px; border: 1px solid var(--base); text-align: left; vertical-align: top; }
.entry-content thead th, .entry-content tr:first-child th { background: var(--base-2); font-weight: 700; }

/* Category and tag links at the end of a post */
.single footer.entry-meta { margin-top: 32px; font: 13px/1.6 var(--gp-font--jetbrains-mono), monospace; text-transform: uppercase; color: var(--contrast-2); }
.single footer.entry-meta a { color: var(--accent-2); }

/* Keep going */
.vb-keep-going { margin-top: 48px; }
.vb-keep-going h2 { margin: 0 0 18px; font-size: 28px; }
.vb-keep-going__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.vb-next { display: flex; flex-direction: column; gap: 10px; color: var(--contrast); text-decoration: none; }
.vb-next:hover { color: var(--contrast); }
.vb-next img, .vb-next__noimg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; padding: 10px;
  box-sizing: border-box; background: var(--base-2); border-radius: 16px; }
.vb-next__label { font: 12px var(--gp-font--jetbrains-mono), monospace; text-transform: uppercase; color: var(--accent-2); }
.vb-next__title { font: 800 21px/1.12 var(--gp-font--bricolage-grotesque), sans-serif; }
.vb-next:hover .vb-next__title { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 768px) {
  .vb-post-band__inner { padding: 32px 16px 44px; }
  .vb-post-band.has-image .vb-post-band__inner { padding-bottom: 88px; }
  .vb-post-image { margin-top: -64px; padding: 0 16px; }
  .vb-post-image img { border-radius: 16px; }
  .single #right-sidebar { display: none; }
  .vb-thanks { padding: 22px; }
}

/* ---------- Home page ---------- */
.vb-home .site-content, .vb-home .inside-article { padding: 0; }
.vb-home .entry-content > * { margin-top: 0; margin-bottom: 0; }
.vb-home .wp-block-group__inner-container { display: contents; }
.vb-home .entry-content .alignfull { width: auto; max-width: none; margin-left: 0; margin-right: 0; left: auto; right: auto; }
.vb-section { max-width: 1180px; margin: 0 auto; padding: 64px 24px 0; box-sizing: border-box; }
.vb-meta { display: flex; flex-wrap: wrap; gap: 0 .35em; margin: 0; font: 13px/1.4 var(--gp-font--jetbrains-mono), monospace;
  text-transform: uppercase; color: var(--accent-2); }
.vb-meta a { color: inherit; text-decoration: none; }
.vb-meta > * { margin: 0; }
.vb-more { margin: 0; font-weight: 700; font-size: 17px; }
.vb-more a { text-decoration: none; }

/* Hero */
.vb-hero { background: var(--accent); color: #fff; overflow: hidden; }
.vb-hero__inner { max-width: 1180px; margin: 0 auto !important; padding: 56px 24px 0; gap: 24px; box-sizing: border-box; }
.vb-hero__text { flex: 999 1 560px !important; padding-bottom: 72px; display: flex; flex-direction: column; gap: 22px; }
.vb-hero__text > * { margin: 0 !important; }
.vb-hero .vb-tag { align-self: flex-start; }
.vb-hero h1 { color: #fff; font-size: clamp(42px, 6vw, 72px); line-height: .98; letter-spacing: -.035em; }
.vb-hero__intro { max-width: 580px; font-size: 21px; line-height: 1.5; color: #fff; }
.vb-hero__art { flex: 0 1 360px !important; }
.vb-hero__art figure { margin: 0; }
.vb-hero__art img { display: block; width: 360px; max-width: 100%; height: auto; }
.vb-hero .wp-block-buttons { gap: 12px; }
.vb-hero .wp-block-button__link { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 999px;
  font-weight: 700; font-size: 17px; text-decoration: none; }
.vb-hero .vb-btn-mint .wp-block-button__link { background: var(--mint); color: var(--contrast); }
.vb-hero .vb-btn-mint .wp-block-button__link:hover { background: #A7F3D0; color: var(--contrast); }
.vb-hero .vb-btn-ghost .wp-block-button__link { background: transparent; border: 2px solid #fff; color: #fff; }
.vb-hero .vb-btn-ghost .wp-block-button__link:hover { background: #fff; color: var(--accent-2); }

/* Latest post card: text left, image right */
.vb-latest .wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.vb-latest__card { display: flex; flex-wrap: wrap; border-radius: 22px; overflow: hidden; background: var(--base-2); }
.vb-latest__text { flex: 1 1 400px; padding: 36px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.vb-latest__text > * { margin: 0; }
.vb-latest__badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vb-latest__badges > *, .vb-latest__badges > .wp-block-group__inner-container > * { margin: 0; }
.vb-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--mint); color: var(--contrast);
  font-size: 13px; font-weight: 700; line-height: 1.4; }
.vb-latest .vb-badge--mint { background: #fff; border-color: #fff; color: var(--accent-2); }
.vb-latest .wp-block-post-title { font-size: 36px; line-height: 1.06; }
.vb-latest .wp-block-post-title a, .vb-recent .wp-block-post-title a { color: var(--contrast); text-decoration: none; }
.vb-latest .wp-block-post-title a:hover, .vb-recent .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.vb-latest .wp-block-post-excerpt { font-size: 17px; line-height: 1.55; color: #33404F; }
.vb-latest .wp-block-post-excerpt p { margin: 0; }
.vb-latest .wp-block-post-featured-image { flex: 1.4 1 520px; min-width: 0; margin: 0; background: #fff; }
.vb-latest .wp-block-post-featured-image a { display: block; height: 100%; }
.vb-latest .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; min-height: 320px; padding: 20px; box-sizing: border-box; object-fit: contain; }

/* Recent posts grid */
.vb-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.vb-section__head > *, .vb-section__head > .wp-block-group__inner-container > * { margin: 0; }
.vb-recent h2, .vb-topics h2 { font-size: 40px; }
.vb-grid .wp-block-post-template { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 32px 28px;
  margin: 0; padding: 0; list-style: none; }
.vb-grid .wp-block-post { display: flex; flex-direction: column; gap: 12px; }
.vb-grid .wp-block-post > * { margin: 0; }
.vb-grid .wp-block-post-featured-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; padding: 10px; box-sizing: border-box;
  background: var(--base-2); border-radius: 18px; }
.vb-grid .wp-block-post-title { font-size: 24px; line-height: 1.12; }

/* Topics */
.vb-recent { padding-bottom: 80px; }
.vb-topics { padding: 56px max(24px, calc((100% - 1132px) / 2)); background: var(--base-2); }
.vb-topics h2 { margin: 0 0 24px; }
.vb-chips { margin: 0; }
.vb-chips a.vb-chips__muted { color: var(--contrast-2); }

/* About */
.vb-about { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; padding-bottom: 72px; }
.vb-avatar { flex: none; margin: 0; }
.vb-avatar img { display: block; width: 168px; height: 168px; border-radius: 50%; background: var(--mint); }
.vb-about__text { flex: 1 1 420px; display: flex; flex-direction: column; gap: 14px; }
.vb-about__text > * { margin: 0; }
.vb-about__text p:not(.vb-more) { max-width: 640px; color: var(--contrast-2); }

@media (max-width: 768px) {
  .vb-section { padding-top: 48px; }
  .vb-hero__inner { padding-top: 40px; }
  .vb-hero__text { padding-bottom: 0; }
  .vb-hero__art { flex: none !important; align-self: flex-end; margin-left: auto; }
  .vb-hero__art img { width: 190px; margin-left: auto; }
  .vb-latest__text { padding: 24px; }
  .vb-latest .wp-block-post-title { font-size: 28px; }
  .vb-latest .wp-block-post-featured-image img { height: auto; min-height: 0; padding: 12px; }
  .vb-recent h2, .vb-topics h2 { font-size: 30px; }
  .vb-grid .wp-block-post-template { grid-template-columns: 1fr; gap: 20px; }
  .vb-grid .wp-block-post { display: grid; grid-template-columns: 104px 1fr; gap: 4px 14px; align-items: start; }
  .vb-grid .wp-block-post-featured-image { grid-row: span 2; }
  .vb-grid .wp-block-post-featured-image img { aspect-ratio: auto; width: 104px; height: 72px; padding: 4px; border-radius: 12px; }
  .vb-grid .wp-block-post-title { font-size: 18px; }
  .vb-recent { padding-bottom: 56px; }
  .vb-topics { padding: 40px 16px; }
}

/* List pages (/blog/, categories, tags): blue hero band */
.vb-list-band .vb-post-band__inner { padding-bottom: 48px; }
.vb-list-band .vb-tag { align-self: flex-start; margin: 0; }
.vb-list-band__intro { max-width: 640px; margin: 0; font-size: 21px; line-height: 1.5; color: #fff; }
:is(.blog, .archive, .search) .site-content { padding-top: 48px; }
@media (max-width: 768px) {
  .vb-list-band__intro { font-size: 18px; }
  :is(.blog, .archive, .search) .site-content { padding-top: 32px; }
}

/* Post lists: /blog/, categories, tags, search */
:is(.archive, .search) .page-header { margin-bottom: 32px; }
:is(.blog, .archive, .search) .post-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; padding: 10px;
  box-sizing: border-box; background: var(--base-2); border-radius: 18px; }
:is(.blog, .archive, .search) .post-image { margin-bottom: 14px; }
:is(.blog, .archive, .search) .entry-title { font-size: 24px; line-height: 1.12; }
:is(.blog, .archive, .search) .entry-title a { color: var(--contrast); text-decoration: none; }
:is(.blog, .archive, .search) .entry-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
:is(.blog, .archive, .search) .entry-meta { font: 13px/1.4 var(--gp-font--jetbrains-mono), monospace; text-transform: uppercase; color: var(--accent-2); }
:is(.blog, .archive, .search) .entry-meta a { color: inherit; }
:is(.blog, .archive, .search) .entry-summary { font-size: 17px; line-height: 1.55; color: #33404F; }

/* ---------- About page ---------- */
.vb-about-hero .vb-hero__inner { padding-bottom: 56px; }
.vb-about-hero .vb-hero__text { padding-bottom: 0; }
.vb-about-photo { display: flex; justify-content: center; }
.vb-hero .vb-about-photo img { width: 260px; height: 260px; object-fit: cover; border-radius: 50%; border: 6px solid var(--mint); box-sizing: border-box; }
.vb-prose h2, .vb-certs h2 { margin: 40px 0 12px; font-size: 32px; }
.vb-prose > :first-child, .vb-certs > :first-child { margin-top: 0; }
.vb-prose p { max-width: 760px; margin: 0 0 16px; }
.vb-certs h3 { margin: 28px 0 14px; font-size: 20px; }
.vb-cert-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.vb-cert-list figure { margin: 0; padding: 18px 12px 14px; border-radius: 16px; background: var(--base-2); text-align: center; }
.vb-cert-list img { display: block; width: auto; max-width: 100%; height: 96px; margin: 0 auto 10px; object-fit: contain; }
.vb-cert-list figcaption { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--contrast); }
.vb-cert-note { display: inline-block; margin-top: 6px; padding: 1px 8px; border-radius: 999px; background: #fff; font: 500 12px var(--gp-font--jetbrains-mono), monospace; text-transform: uppercase; letter-spacing: .04em; color: #5B6573; }
.vb-about-end { padding-bottom: 72px; }
.vb-contact { padding: 32px; border-radius: 22px; background: var(--base-2); }
.vb-contact > * { max-width: 760px; }
.vb-contact h2 { margin: 0 0 8px; font-size: 32px; }
.vb-contact p { margin: 0 0 20px; }
.vb-btn-row { gap: 12px; margin-top: 20px; }
.vb-btn-row .wp-block-button__link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; }
.vb-btn-row .wp-block-button__link:hover { background: var(--accent-2); color: #fff; }
/* Jetpack contact form (fields render on live, where Jetpack is active) */
.vb-contact .wp-block-jetpack-contact-form { gap: 14px; }
.vb-contact .wp-block-jetpack-contact-form input:not([type="submit"]),
.vb-contact .wp-block-jetpack-contact-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #D5DCE5; border-radius: 12px; background: #fff; font-size: 17px; }
.vb-contact .wp-block-jetpack-contact-form input:focus, .vb-contact .wp-block-jetpack-contact-form textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.vb-contact .wp-block-jetpack-contact-form label { font-weight: 700; }
.vb-contact .wp-block-jetpack-contact-form .wp-block-button__link { min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--mint); color: var(--contrast); font-weight: 700; cursor: pointer; }
.vb-contact .wp-block-jetpack-contact-form .wp-block-button__link:hover { background: #A7F3D0; color: var(--contrast); }
@media (max-width: 768px) {
  .vb-about-hero .vb-hero__inner { padding-bottom: 40px; }
  .vb-about-photo { justify-content: flex-start; }
  .vb-hero .vb-about-photo img { width: 160px; height: 160px; margin-left: 0; }
  .vb-prose h2, .vb-certs h2, .vb-contact h2 { font-size: 26px; }
  .vb-cert-list { grid-template-columns: repeat(2, 1fr); }
  .vb-contact { padding: 22px; }
}

/* ---------- Home Lab page ---------- */
.vb-lab-photo { display: flex; justify-content: center; }
.vb-hero .vb-lab-photo img { width: 300px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 22px;
  border: 6px solid var(--mint); box-sizing: border-box; }
.vb-lead { font-size: 21px; line-height: 1.55; color: var(--contrast); }
.vb-prose a { text-underline-offset: 3px; }
.vb-services > p { max-width: 760px; }
.vb-services h2 { margin: 0 0 12px; font-size: 32px; }
.vb-services h3 { margin: 32px 0 14px; font-size: 20px; }
.vb-svc { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.vb-svc li { margin: 0; }
.vb-svc a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; box-sizing: border-box;
  border: 1px solid var(--base); border-radius: 14px; background: #fff; color: var(--contrast); text-decoration: none; }
.vb-svc a:hover, .vb-svc a:focus { border-color: var(--accent); box-shadow: 0 6px 18px rgba(17,20,24,.08); color: var(--contrast); }
.vb-svc strong { font: 800 17px/1.2 var(--gp-font--bricolage-grotesque), sans-serif; }
.vb-svc strong::after { content: " ↗"; font: 400 13px var(--gp-font--jetbrains-mono), monospace; color: var(--accent-2); }
.vb-svc span { font-size: 15px; line-height: 1.4; color: var(--contrast-2); }
.vb-lab-cta { margin-top: 64px; }
@media (max-width: 768px) {
  .vb-lab-photo { justify-content: flex-start; }
  .vb-hero .vb-lab-photo img { width: 200px; margin-left: 0; }
  .vb-lead { font-size: 19px; }
  .vb-svc { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .vb-services h2 { font-size: 26px; }
}

/* ---------- Table of Contents page (/archives/) ---------- */
.vb-toc-hero .vb-hero__inner { display: block; }
.vb-toc-page .vb-lead { max-width: 760px; margin: 0 0 24px; }
.vb-toc-nav ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.vb-toc-nav li { margin: 0; }
.vb-toc-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid #C9D2DE;
  border-radius: 999px; background: #fff; color: var(--contrast); font-weight: 600; text-decoration: none; }
.vb-toc-nav a:hover, .vb-toc-nav a:focus { border-color: var(--accent-2); color: var(--accent-2); }
.vb-toc-nav span { padding: 2px 8px; border-radius: 999px; background: var(--base-2); color: var(--accent-2);
  font: 12px var(--gp-font--jetbrains-mono), monospace; }
.vb-toc-topic { margin-top: 56px; scroll-margin-top: 24px; }
.vb-toc-topic h2 { margin: 0 0 6px; font-size: 32px; }
.vb-toc-topic > p { max-width: 760px; margin: 0 0 16px; color: var(--contrast-2); }
.vb-toc-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--base); }
.vb-toc-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; padding: 12px 0;
  border-bottom: 1px solid var(--base); }
.vb-toc-list a { font-weight: 600; color: var(--contrast); text-decoration: none; }
.vb-toc-list a:hover, .vb-toc-list a:focus { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.vb-toc-list time { flex: none; font: 13px var(--gp-font--jetbrains-mono), monospace; text-transform: uppercase; color: var(--accent-2); }
@media (max-width: 768px) {
  .vb-toc-topic { margin-top: 40px; }
  .vb-toc-topic h2 { font-size: 26px; }
  .vb-toc-list li { flex-direction: column; gap: 2px; }
}

/* Footer: terminal wordmark */
.vb-footer { background: var(--code); color: #B9D3EC; }
.vb-footer__inner { max-width: 1180px; margin: 0 auto; padding: 36px 24px; display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center; gap: 20px; box-sizing: border-box; }
.vb-wordmark { font: 500 20px var(--gp-font--jetbrains-mono), monospace; color: #EAF2FB; text-decoration: none; }
.vb-wordmark:hover, .vb-wordmark:focus { color: #fff; }
.vb-wordmark__path { color: #7DD3FC; }
.vb-wordmark__us { color: #6B87A3; }
.vb-wordmark__cursor { display: inline-block; width: 10px; height: 20px; margin-left: 4px; vertical-align: -3px; background: var(--mint); }
.vb-footer nav { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.vb-footer nav a { color: #fff; font-weight: 700; text-decoration: none; }
.vb-footer nav a:hover, .vb-footer nav a:focus { color: var(--mint); text-decoration: underline; }
.vb-footer__copy { font-size: 14px; color: #9DB4CC; }
@media (prefers-reduced-motion: no-preference) {
  .vb-wordmark__cursor { animation: vb-blink 1.1s steps(1) infinite; }
  @keyframes vb-blink { 50% { opacity: 0; } }
}

/* 404 page */
.error404 .inside-article { max-width: 900px; }
.vb-term { display: block; margin: 0 0 24px; border-radius: 16px; overflow: hidden; background: var(--code); }
.vb-term__bar { display: block; padding: 10px 18px; background: #12304D; color: #B9D3EC; font: 13px var(--gp-font--jetbrains-mono), monospace; }
.vb-term__body { display: flex; flex-direction: column; padding: 22px 24px 26px; color: #EAF2FB;
  font: 17px/1.75 var(--gp-font--jetbrains-mono), monospace; overflow-wrap: anywhere; }
.vb-term__ps1 { color: #7DD3FC; }
.vb-term__dollar { color: var(--mint); }
.vb-term__err { color: #FCA5A5; }
.vb-term__cursor { display: inline-block; width: 10px; height: 19px; vertical-align: -3px; background: var(--mint); }
.vb-404-note { display: block; color: var(--contrast-2); }
.vb-404-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.vb-404-actions .search-form { flex: 1 1 320px; display: flex; margin: 0; }
.vb-404-actions .search-form label { flex: 1; }
.vb-404-actions .search-field { width: 100%; min-height: 50px; padding: 0 18px; border: 1px solid #D5DCE5; border-radius: 999px 0 0 999px; background: #F6F8FA; }
.vb-404-actions .search-submit { min-height: 50px; padding: 0 18px; border-radius: 0 999px 999px 0; }
.vb-btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border-radius: 999px; background: var(--accent);
  color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; }
.vb-btn:hover, .vb-btn:focus { background: var(--accent-2); color: #fff; }
.vb-404-latest h2 { font-size: 26px; }
@media (prefers-reduced-motion: no-preference) {
  .vb-term__cursor { animation: vb-blink 1.1s steps(1) infinite; }
}

/* Links inside quotes or boxes with a custom background colour use the darker blue for contrast */
.entry-content .has-background a:not(.wp-element-button) { color: var(--accent-2); }

/* Empty search results */
.vb-noresults .entry-content > p { margin-bottom: 16px; }
.vb-noresults .vb-404-latest { margin-top: 40px; }

/* Short pages: the footer sits at the bottom of the window instead of mid-screen */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > #page { flex: 1 0 auto; width: 100%; }
body > .site-footer { flex-shrink: 0; }

/* Home Lab page: "Home lab history" timeline */
.vb-history .vb-tag { margin: 0 0 14px; }
.vb-history h2 { margin: 0 0 10px; }
.vb-history__intro { margin: 0; font-size: 19px; color: var(--contrast-2); }
.vb-history__list { position: relative; margin-top: 32px; padding-left: 32px; border-left: 2px solid #D5DCE5; }
.vb-history-item { position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: center; margin: 0 0 36px; }
.vb-history-item:last-child { margin-bottom: 0; }
.vb-history-item::before { content: ""; position: absolute; left: -42px; top: 50%; width: 14px; height: 14px; margin-top: -9px; border-radius: 50%;
  background: var(--mint); border: 3px solid var(--accent); }
.vb-history-item .wp-block-group__inner-container { display: contents; }
.vb-history-item figure, .vb-history__ph, .vb-history__text > * { margin: 0; }
.vb-history__photo img, .vb-history__ph { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; box-sizing: border-box; }
.vb-history__photo img { height: auto; object-fit: cover; box-shadow: 0 10px 26px rgba(17,20,24,.12); }
.vb-history__ph { display: flex; align-items: center; justify-content: center; border: 2px dashed #C3CCD8; background: var(--base-2); }
.vb-history__ph p { margin: 0; font: 500 14px var(--gp-font--jetbrains-mono), monospace; color: #5B6573; }
.vb-history__text { display: flex; flex-direction: column; gap: 8px; }
.vb-history__year { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: #E3EEF9;
  font: 700 14px var(--gp-font--jetbrains-mono), monospace; color: var(--accent-2); }
.vb-history__text h3 { font-size: 24px; line-height: 1.15; }
.vb-history__text p:not(.vb-history__year) { font-size: 17px; line-height: 1.55; }
/* Draft sections are only sent to logged-in editors (see functions.php); this label is a reminder. */
.vb-draft { position: relative; }
.vb-draft::before { content: "Draft · only visible while logged in"; display: block; width: fit-content; margin-bottom: 12px; padding: 3px 10px; border-radius: 6px;
  background: #FFF4CC; color: #6B4E00; font: 600 12px var(--gp-font--jetbrains-mono), monospace; }
@media (max-width: 768px) {
  .vb-history__list { padding-left: 22px; }
  .vb-history-item { grid-template-columns: 1fr; gap: 14px; }
  .vb-history-item::before { left: -31px; top: 12px; margin-top: 0; }
}

/* Tabbed pages (Home Lab): the hero buttons act as tabs; the open tab is mint */
.vb-hero .vb-tab .wp-block-button__link { background: transparent; border: 2px solid #fff; color: #fff; }
.vb-hero .vb-tab .wp-block-button__link:hover { background: rgba(255,255,255,.16); color: #fff; }
.vb-hero .vb-tab.is-active .wp-block-button__link { background: var(--mint); border-color: var(--mint); color: var(--contrast); }
.vb-hero .wp-block-button.vb-draft::before { content: none; }
.vb-hero .wp-block-button.vb-draft .wp-block-button__link { border-style: dashed; }

/* Tabbed pages (Home Lab): "Explore the lab" cards under the hero act as tabs */
.vb-lab-tabs { max-width: 1180px; margin: 0 auto; padding: 40px 24px 0; box-sizing: border-box; }
.vb-lab-tabs .wp-block-group__inner-container { display: contents; }
.vb-lab-tabs__label { margin: 0 0 14px; font: 600 13px var(--gp-font--jetbrains-mono), monospace; text-transform: uppercase; letter-spacing: .06em; color: #5B6573; }
.vb-lab-tabs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.vb-lab-tab { position: relative; margin: 0; }
.vb-lab-tab a { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-content: center; height: 100%;
  padding: 18px 20px; box-sizing: border-box; border: 2px solid #D5DCE5; border-radius: 18px; background: #fff; color: var(--contrast);
  text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.vb-lab-tab a::before { content: ""; grid-row: span 2; align-self: center; width: 48px; height: 48px; border-radius: 14px;
  background: var(--accent) center / 26px no-repeat; }
.vb-lab-tab--setup a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='6' rx='1.5'/%3E%3Crect x='3' y='14' width='18' height='6' rx='1.5'/%3E%3Cpath d='M7 7h.01M7 17h.01M11 7h6M11 17h6'/%3E%3C/svg%3E"); }
.vb-lab-tab--running a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-8 4 16 3-8h4'/%3E%3C/svg%3E"); }
.vb-lab-tab--history a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.vb-lab-tab strong { align-self: end; font: 800 20px/1.2 var(--gp-font--bricolage-grotesque), sans-serif; }
.vb-lab-tab a span { align-self: start; font-size: 15px; line-height: 1.4; color: var(--contrast-2); }
.vb-lab-tab a:hover { border-color: var(--accent); box-shadow: 0 8px 22px rgba(17,20,24,.08); transform: translateY(-2px); color: var(--contrast); }
.vb-lab-tab a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.vb-lab-tab.is-active a { border-color: var(--accent); background: #EEF5FC; box-shadow: 0 8px 22px rgba(30,115,190,.14); transform: none; }
.vb-lab-tab.is-active::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 16px; height: 16px; background: #EEF5FC;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateX(-50%) rotate(45deg); }
.vb-lab-tab.vb-draft::before { content: none; }
.vb-lab-tab.vb-draft a { border-style: dashed; }
.vb-tabpanel[hidden] { display: none !important; }
@media (max-width: 768px) {
  .vb-lab-tabs { padding: 28px 16px 0; }
  .vb-lab-tabs__grid { grid-template-columns: 1fr; gap: 10px; }
  .vb-lab-tab a { padding: 14px 16px; grid-template-columns: 40px minmax(0, 1fr); }
  .vb-lab-tab a::before { width: 40px; height: 40px; border-radius: 12px; background-size: 22px; }
  .vb-lab-tab strong { font-size: 18px; }
  .vb-lab-tab.is-active::after { display: none; }
}

/* Home Lab page, Overview tab: "Future state" (planned upgrades) */
.vb-future { margin-top: 48px; }
.vb-future .vb-future__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 20px; }
.vb-future-item { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border: 2px solid #D5DCE5; border-radius: 16px; background: #fff; }
.vb-future-item .wp-block-group__inner-container { display: contents; }
.vb-future-item > *, .vb-future-item p { margin: 0; }
.vb-future-item h3 { margin: 0; font-size: 20px; line-height: 1.2; }
.vb-future-item p:not(.vb-future__status) { font-size: 16px; line-height: 1.5; color: var(--contrast-2); }
.vb-future__status { align-self: flex-start; padding: 2px 10px; border-radius: 999px; font: 700 12px var(--gp-font--jetbrains-mono), monospace;
  text-transform: uppercase; letter-spacing: .04em; background: #EEF0F3; color: #4B5563; }
.vb-future__status--researching { background: #E3EEF9; color: var(--accent-2); }
.vb-future__status--saving { background: #D1FAE5; color: #065F46; }

/* Project pages (e.g. Webmastery plugin): hero above the content, then the post layout */
.vb-project .inside-right-sidebar { position: sticky; top: calc(24px + var(--wp-admin--admin-bar--height, 0px)); }
.vb-project-top .wp-block-group__inner-container { display: contents; }
.vb-project-top .vb-hero > * { margin: 0; }
.vb-project-hero .vb-hero__inner { padding-bottom: 56px; align-items: center; }
.vb-project-hero .vb-hero__text { padding-bottom: 0; }
.vb-project-hero .vb-hero__art { display: flex; justify-content: center; }
.vb-project-hero .vb-hero__art img { width: 280px; height: auto; }
.vb-project-hero .vb-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.vb-hero__links { font-size: 15px; color: #fff; }
.vb-hero__links a { color: #fff; text-underline-offset: 3px; }
.vb-hero__links a:hover { text-decoration-thickness: 2px; color: #fff; }
.vb-project .site-content { padding-top: 48px; }
@media (max-width: 768px) {
  .vb-project #right-sidebar { display: none; }
  .vb-project-hero .vb-hero__inner { padding-bottom: 40px; }
  .vb-project-hero .vb-hero__art img { width: 180px; }
  .vb-project-hero .vb-hero__art { justify-content: flex-start; }
  .vb-project .site-content { padding-top: 32px; }
}