/* ══════════════════════════════════════════════════════════════════
   GYMVERSE BLOG — v3 (matches Alon's styled mockups, June 2026)
   Dark theme · yellow accent · Montserrat
   All selectors scoped under .gvb-root so nothing collides with the
   active theme. Body background for blog routes handled at the bottom.
   ══════════════════════════════════════════════════════════════════ */

.gvb-root {
  --bg: #252f3b;          /* page background */
  --surface: #171e28;     /* card / panel */
  --surface2: #1d2738;    /* elevated / hover */
  --border: rgba(255, 255, 255, 0.07);
  --ink: #ffffff;
  --body: #dde0ee;
  --muted: #d3d3d3;
  --dim: #d3d3d3;
  --yellow: #fcdf08;
  --dark: #111820;        /* footer / deep cover */
  --r: 14px;
  --r-sm: 8px;
  --r-pill: 100px;

  background: var(--bg);
  color: var(--body);
  font-family: "Montserrat", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Sticky footer: main grows to fill short pages so the footer sits at the
   bottom of the viewport instead of floating up under the content. */
.gvb-root > main { flex: 1 0 auto; }
.gvb-root > footer.gvb-foot { flex-shrink: 0; }
.gvb-root *,
.gvb-root *::before,
.gvb-root *::after { box-sizing: border-box; }

.gvb-root a { color: inherit; }
.gvb-root img { max-width: 100%; display: block; }

/* ── LAYOUT ───────────────────────────────────────────── */
.gvb-root .wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* ── HEADER ───────────────────────────────────────────── */
.gvb-root header.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(37, 47, 59, 0.97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.gvb-root .toprow { display: flex; align-items: center; gap: 20px; padding: 15px 0 13px; }
.gvb-root .wordmark { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.gvb-root .logo-img { height: 34px; width: auto; mix-blend-mode: screen; display: block; }

/* ── NAV REDESIGN (per Alon, June 2026): sticky bar · Home · Blog dropdown ·
   search · burger + slide-out mobile menu. Replaces the old .top header. ── */
.gvb-root .gvb-nav { background: linear-gradient(180deg, rgba(21, 30, 41, 0.7) 0%, rgba(21, 30, 41, 0.7) 97.5%); -webkit-backdrop-filter: blur(17px); backdrop-filter: blur(17px); position: sticky; top: 0; z-index: 100; }
.gvb-root .gvb-nav .nav-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; height: 120px; display: flex; align-items: center; gap: 24px; }
.gvb-root .gvb-nav .logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.gvb-root .gvb-nav .logo img { height: 40px; width: auto; display: block; mix-blend-mode: screen; }
.gvb-root .gvb-nav .nav-links { display: flex; align-items: center; gap: 4px; flex: 1; }
.gvb-root .gvb-nav .nav-link { font-family: "Montserrat", sans-serif; color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 14px; border-radius: 6px; transition: color 0.15s, background 0.15s; }
.gvb-root .gvb-nav .nav-link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.gvb-root .gvb-nav .nav-dropdown { position: relative; }
.gvb-root .gvb-nav .nav-dropdown-btn { font-family: "Montserrat", sans-serif; background: none; border: 0; cursor: pointer; color: var(--ink); font-size: 15px; font-weight: 600; padding: 8px 14px; border-radius: 6px; display: flex; align-items: center; gap: 5px; transition: background 0.15s; }
.gvb-root .gvb-nav .nav-dropdown-btn:hover { background: rgba(255, 255, 255, 0.06); }
.gvb-root .gvb-nav .nav-dropdown-btn .chevron { transition: transform 0.2s; opacity: 0.7; }
.gvb-root .gvb-nav .nav-dropdown.open .nav-dropdown-btn .chevron { transform: rotate(180deg); }
.gvb-root .gvb-nav .dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; min-width: 230px; padding: 8px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.18s, transform 0.18s; z-index: 101; }
.gvb-root .gvb-nav .nav-dropdown.open .dropdown-menu { opacity: 1; pointer-events: all; transform: translateY(0); }
.gvb-root .gvb-nav .dropdown-menu a { font-family: "Montserrat", sans-serif; display: block; padding: 10px 14px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; border-radius: 8px; transition: color 0.15s, background 0.15s; }
.gvb-root .gvb-nav .dropdown-menu a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
/* Active nav state (current section / category) */
.gvb-root .gvb-nav .nav-link.is-active,
.gvb-root .gvb-nav .nav-dropdown-btn.is-active { color: var(--yellow); }
.gvb-root .gvb-nav .dropdown-menu a.is-active { color: var(--yellow); background: rgba(252, 223, 8, 0.08); }
.gvb-root .gvb-mobile-menu a.is-active { color: var(--yellow); }
.gvb-root .gvb-mobile-menu .gvb-mobile-download { display: block; text-align: center; margin: 12px 0 6px; padding: 15px 20px; border: none; border-radius: 10px; color: #ffffff; font-weight: 700; font-size: 16px; background: linear-gradient(to bottom, #00BCFF -57.18%, #9C3BFF 195.57%, #9C3BFF 195.57%); }
.gvb-root .gvb-mobile-menu .gvb-mobile-download:hover { background: linear-gradient(to bottom, #00BCFF -57.18%, #9C3BFF 195.57%, #9C3BFF 195.57%); opacity: 0.92; }
.gvb-root .gvb-nav .nav-search { display: flex; align-items: center; background: var(--surface2); border: 1px solid var(--border); border-radius: 26px; padding: 10px 18px; gap: 9px; min-width: 240px; max-width: 320px; flex-shrink: 0; margin: 0; }
.gvb-root .gvb-nav .nav-search input { font-family: "Montserrat", sans-serif; background: none; border: 0; outline: none; color: var(--ink); font-size: 14.5px; width: 100%; }
.gvb-root .gvb-nav .nav-search input::placeholder { color: var(--muted); }
.gvb-root .gvb-nav .nav-search svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--muted); }
.gvb-root .gvb-nav .burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: none; border: 0; cursor: pointer; min-width: 44px; min-height: 44px; margin-left: auto; }
.gvb-root .gvb-nav .burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.gvb-root .gvb-nav .burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.gvb-root .gvb-nav .burger.open span:nth-child(2) { opacity: 0; }
.gvb-root .gvb-nav .burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.gvb-root .gvb-mobile-menu { display: none; position: fixed; top: 60px; left: 0; right: 0; bottom: 0; background: var(--surface); z-index: 99; overflow-y: auto; padding: 16px 24px 40px; flex-direction: column; gap: 4px; }
.gvb-root .gvb-mobile-menu.open { display: flex; }
.gvb-root .gvb-mobile-menu .mobile-search { display: flex; align-items: center; background: var(--surface2); border: 1px solid var(--border); border-radius: 24px; padding: 10px 16px; gap: 10px; margin: 0 0 4px; }
.gvb-root .gvb-mobile-menu .mobile-search input { font-family: "Montserrat", sans-serif; background: none; border: 0; outline: none; color: var(--ink); font-size: 15px; width: 100%; }
.gvb-root .gvb-mobile-menu .mobile-search input::placeholder { color: var(--muted); }
.gvb-root .gvb-mobile-menu .mobile-search svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--muted); }
.gvb-root .gvb-mobile-menu .mobile-menu-section { margin-top: 8px; }
.gvb-root .gvb-mobile-menu .mobile-menu-label { font-family: "Montserrat", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 10px 8px 6px; }
.gvb-root .gvb-mobile-menu a { font-family: "Montserrat", sans-serif; display: block; padding: 14px 10px; color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; border-radius: 8px; border-bottom: 1px solid var(--border); transition: background 0.15s; }
.gvb-root .gvb-mobile-menu a:last-child { border-bottom: none; }
.gvb-root .gvb-mobile-menu a:hover { background: rgba(255, 255, 255, 0.04); }

@media (max-width: 700px) {
  .gvb-root .gvb-nav .nav-links,
  .gvb-root .gvb-nav .nav-search { display: none; }
  .gvb-root .gvb-nav .burger { display: flex; }
  .gvb-root .gvb-nav .nav-inner { height: 76px; }
}
body.gvb-menu-open { overflow: hidden; }

.gvb-root .gvb-cta {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #111820; background: var(--yellow);
  padding: 11px 20px; border-radius: var(--r-pill);
  text-decoration: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: filter 0.15s;
}
.gvb-root .gvb-cta:hover { filter: brightness(1.08); }

.gvb-root .search { margin-left: auto; flex: 1; max-width: 360px; position: relative; }
.gvb-root .search form { margin: 0; }
.gvb-root .search input {
  width: 100%; font-family: "Montserrat", sans-serif; font-size: 14px;
  padding: 11px 14px 11px 40px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); color: var(--ink); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gvb-root .search input::placeholder { color: rgba(255, 255, 255, 0.55); }
.gvb-root .search input:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(252, 223, 8, 0.15); }
.gvb-root .search svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; stroke: var(--dim); fill: none;
}

/* ── CATEGORY NAV ─────────────────────────────────────── */
.gvb-root .catnav { display: flex; gap: 6px; padding: 0 0 13px; flex-wrap: wrap; }
.gvb-root .catnav a {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; background: var(--surface);
  padding: 6px 13px; border: 1px solid var(--border);
  border-radius: var(--r-pill); transition: all 0.15s;
}
.gvb-root .catnav a:hover,
.gvb-root .catnav a.on { border-color: var(--yellow); color: var(--yellow); }

/* ── HERO ─────────────────────────────────────────────── */
.gvb-root .hero { display: grid; grid-template-columns: 1.7fr 1fr; gap: 22px; margin: 30px 0 8px; }
@media (max-width: 860px) { .gvb-root .hero { grid-template-columns: 1fr; } }

.gvb-root .feature {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; background: var(--surface);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.gvb-root .feature:hover {
  transform: translateY(-4px); border-color: rgba(252, 223, 8, 0.32);
  box-shadow: 0 28px 56px -24px rgba(0, 0, 0, 0.75);
}
.gvb-root .fbody { padding: 20px 22px 24px; }
.gvb-root .fbody h2 {
  font-family: "Montserrat", sans-serif; font-weight: 800;
  font-size: clamp(22px, 3.2vw, 34px); line-height: 1.09;
  letter-spacing: -0.01em; margin: 13px 0 9px; color: var(--ink);
}
.gvb-root .fbody p { color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0 0 13px; }

/* ── POPULAR / MOST-READ ──────────────────────────────── */
.gvb-root .popular { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: 4px 4px 8px; }
.gvb-root .popttl {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); padding: 14px 14px 8px;
}
.gvb-root .pop {
  display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px;
  text-decoration: none; color: inherit; border-top: 1px solid var(--border);
  border-radius: 10px; transition: background 0.12s;
}
.gvb-root .pop:first-of-type { border-top: 0; }
.gvb-root .pop:hover { background: var(--surface2); }
.gvb-root .pn { font-family: "Montserrat", sans-serif; font-weight: 800; color: var(--yellow); font-size: 14px; padding-top: 2px; flex-shrink: 0; min-width: 22px; }
.gvb-root .pt b { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 14.5px; line-height: 1.25; display: block; color: var(--ink); }
.gvb-root .pm { font-family: "Montserrat", sans-serif; font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3px; display: block; }

/* ── META + BADGE ─────────────────────────────────────── */
.gvb-root .meta { font-family: "Montserrat", sans-serif; font-size: 12px; color: var(--dim); }
.gvb-root .badge {
  font-family: "Montserrat", sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 11px;
  border-radius: var(--r-pill); background: var(--yellow); color: #111820; display: inline-block;
}

/* ── SECTION HEADERS ──────────────────────────────────── */
.gvb-root .catsec { margin: 42px 0; }
.gvb-root .sechead { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 11px; margin-bottom: 22px; }
.gvb-root .sechead h2 { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); margin: 0; }
.gvb-root .count { font-family: "Montserrat", sans-serif; font-size: 11px; color: var(--dim); letter-spacing: 0.03em; }
.gvb-root .viewall { margin-left: auto; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 11px; color: var(--yellow); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; transition: color 0.15s; }
.gvb-root .viewall:hover { color: #fff; }

/* ── GRID + CARDS ─────────────────────────────────────── */
.gvb-root .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .gvb-root .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gvb-root .grid { grid-template-columns: 1fr; } }

.gvb-root .card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; background: var(--surface);
  transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
}
.gvb-root .card:hover { transform: translateY(-4px); border-color: rgba(252, 223, 8, 0.38); box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.75); }
.gvb-root .cbody { padding: 14px 15px 16px; }
.gvb-root .cbody h3 { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: 0.01em; margin: 9px 0 7px; color: var(--ink); }
.gvb-root .cbody p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0 0 9px; }

/* ── COVERS ───────────────────────────────────────────── */
.gvb-root .cover { position: relative; aspect-ratio: 16/10; background: var(--dark) center/cover no-repeat; display: grid; place-items: center; overflow: hidden; }
.gvb-root .cover.big { aspect-ratio: 16/8; }
.gvb-root .cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(17, 24, 32, 0.25) 0%, rgba(17, 24, 32, 0.78) 100%); }
/* Category is shown via the body badge only (per mockup) — keep the label in
   the markup for future use but hide it so it isn't printed twice on covers. */
.gvb-root .cover .mono { display: none; position: absolute; left: 14px; bottom: 11px; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); z-index: 1; }

/* ── NO RESULTS ───────────────────────────────────────── */
.gvb-root .nores { display: none; text-align: center; color: var(--dim); font-family: "Montserrat", sans-serif; padding: 48px; font-size: 14px; }

/* ── EMPTY STATE ──────────────────────────────────────── */
.gvb-root .gvb-empty { text-align: center; padding: 64px 24px; color: var(--dim); }
.gvb-root .gvb-empty h2 { color: var(--ink); font-weight: 800; margin: 0 0 8px; }

/* ── FOCUS STATES (keyboard accessibility, WCAG 2.4.7) ── */
.gvb-root a:focus-visible,
.gvb-root button:focus-visible,
.gvb-root input:focus-visible,
.gvb-root summary:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── PAGINATION (paginate_links output) ───────────────── */
.gvb-root .page-numbers {
  display: inline-block; padding: 7px 13px; margin: 0 2px;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 12px;
  color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); transition: all 0.15s;
}
.gvb-root a.page-numbers:hover { border-color: var(--yellow); color: var(--yellow); }
.gvb-root .page-numbers.current { background: var(--yellow); color: #111820; border-color: var(--yellow); }
.gvb-root .page-numbers.dots { background: none; border: 0; }

/* ── FOOTER ───────────────────────────────────────────── */
.gvb-root footer.gvb-foot { border-top: 1px solid var(--border); margin-top: 44px; background: var(--dark); }
.gvb-root .foot { max-width: 1160px; margin: 0 auto; padding: 56px 28px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 40px; font-family: "Montserrat", sans-serif; color: var(--muted); }
.gvb-root .gvb-foot-title { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 22px; color: var(--ink); margin: 0 0 22px; }
.gvb-root .gvb-foot-socials { list-style: none; display: flex; align-items: center; gap: 22px; margin: 0 0 24px; padding: 0; }
.gvb-root .gvb-foot-socials a { display: inline-flex; opacity: 0.95; transition: opacity 0.15s; }
.gvb-root .gvb-foot-socials a:hover { opacity: 1; }
.gvb-root .gvb-foot-socials img { height: 30px; width: auto; max-width: 42px; object-fit: contain; display: block; }
.gvb-root .gvb-foot-copy { font-size: 14px; color: var(--muted); }
.gvb-root .gvb-foot-legal ul { list-style: none; margin: 0; padding: 0; }
.gvb-root .gvb-foot-legal li { margin: 0 0 14px; }
.gvb-root .gvb-foot-legal a { color: var(--ink); text-decoration: none; font-size: 17px; transition: color 0.15s; }
.gvb-root .gvb-foot-legal a:hover { color: var(--yellow); }

/* ════════════════════════════════════════════════════════
   CATEGORY PAGE
   ════════════════════════════════════════════════════════ */
.gvb-root .cat-hero { padding: 36px 0 8px; }
.gvb-root .crumbs { font-family: "Montserrat", sans-serif; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); margin: 26px 0 18px; }
.gvb-root .crumbs a { color: var(--dim); text-decoration: none; }
.gvb-root .crumbs a:hover { color: var(--yellow); }
.gvb-root .crumbs span { color: var(--yellow); margin: 0 8px; }
.gvb-root .cat-title { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: clamp(30px, 5vw, 46px); letter-spacing: -0.01em; color: var(--ink); margin: 0 0 8px; text-transform: uppercase; }
.gvb-root .cat-desc { color: var(--muted); font-size: 16px; max-width: 640px; margin: 0 0 8px; }

/* ════════════════════════════════════════════════════════
   SINGLE ARTICLE PAGE
   ════════════════════════════════════════════════════════ */
.gvb-root .art-wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.gvb-root .art-head { padding: 8px 0 4px; }
.gvb-root .art-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.gvb-root .tag { font-family: "Montserrat", sans-serif; font-size: 11px; color: var(--muted); border: 1px solid var(--border); padding: 4px 10px; border-radius: var(--r-pill); text-decoration: none; }
.gvb-root .tag:hover { border-color: var(--yellow); color: var(--yellow); }
.gvb-root .readtime { font-family: "Montserrat", sans-serif; font-size: 12px; color: var(--muted); }
.gvb-root h1.art-title { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: clamp(30px, 6vw, 50px); line-height: 1.05; letter-spacing: -0.02em; margin: 0.1em 0 0.35em; color: var(--ink); }
.gvb-root .art-dek { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.5; color: var(--muted); margin: 0 0 2px; max-width: 68ch; }
.gvb-root .byline { display: flex; align-items: center; gap: 11px; margin: 18px 0 24px; font-size: 13px; color: var(--muted); }
.gvb-root .byline .av { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; color: var(--yellow); font-weight: 700; font-size: 14px; overflow: hidden; }
.gvb-root .byline .av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.gvb-root .byline b { color: var(--ink); font-weight: 600; }

.gvb-root .art-hero { width: 100%; aspect-ratio: 20/9; overflow: hidden; border-radius: var(--r); margin: 0 0 28px; background: var(--dark); }
.gvb-root .art-hero img { width: 100%; height: 100%; object-fit: cover; }

/* TL;DR block — matches Article mockup: 4px yellow bar, leading-zero
   numbers, divider between items, dotted-underline links with → arrow. */
.gvb-root .tldr { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--yellow); border-radius: var(--r); padding: 22px 24px; margin: 0 0 36px; }
.gvb-root .tldr h2 { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); margin: 0 0 14px; }
.gvb-root .tldr ol { margin: 0; padding: 0; counter-reset: tldr; list-style: none; }
.gvb-root .tldr li { counter-increment: tldr; display: flex; gap: 13px; padding: 7px 0; margin: 0; font-size: 15px; font-weight: 500; color: var(--body); border-top: 1px solid var(--border); }
.gvb-root .tldr li:first-child { border-top: 0; }
.gvb-root .tldr li::before { content: counter(tldr, decimal-leading-zero); font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--yellow); font-size: 13px; padding-top: 2px; flex-shrink: 0; }
.gvb-root .tldr a { color: var(--body); text-decoration: none; border-bottom: 1px dotted rgba(252, 223, 8, 0.4); transition: color 0.15s, border-color 0.15s; }
.gvb-root .tldr a:hover { color: var(--yellow); border-color: var(--yellow); }
.gvb-root .tldr a::after { content: " \2192"; color: var(--yellow); font-size: 0.85em; }

/* Article body typography */
.gvb-root .art-body { font-size: 18px; line-height: 1.75; color: var(--body); }
.gvb-root .art-body > * + * { margin-top: 1.1em; }
.gvb-root .art-body h2 { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 26px; color: var(--ink); margin-top: 1.8em; scroll-margin-top: 90px; }
.gvb-root .art-body h3 { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 20px; color: var(--ink); margin-top: 1.4em; }
.gvb-root .art-body a { color: var(--yellow); text-decoration: underline; text-underline-offset: 2px; }
.gvb-root .art-body ul, .gvb-root .art-body ol { padding-left: 1.4em; }
.gvb-root .art-body img { border-radius: var(--r-sm); margin: 1.4em 0; }
.gvb-root .art-body svg { max-width: 100%; height: auto; }
.gvb-root .art-body blockquote { border-left: 3px solid var(--yellow); padding-left: 18px; margin-left: 0; color: var(--ink); font-style: italic; }
.gvb-root .art-body code { background: var(--surface); padding: 0.12em 0.4em; border-radius: 4px; font-size: 0.9em; }

/* Data / comparison tables — scrollable on mobile, distinct header row,
   row headers (first column) emphasised. Works for converter-generated
   tables AND any <table> pasted into the editor. */
.gvb-root .gvb-table { margin: 28px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.gvb-root .art-body table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 14.5px; margin: 0; }
.gvb-root .art-body thead th { background: rgba(252, 223, 8, 0.10); color: var(--yellow); text-align: left; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 12px 15px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.gvb-root .art-body tbody th { text-align: left; font-weight: 700; color: var(--ink); }
.gvb-root .art-body tbody td, .gvb-root .art-body tbody th { padding: 12px 15px; border-top: 1px solid var(--border); color: var(--body); vertical-align: top; }
.gvb-root .art-body tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
/* Standalone <table> not in a .gvb-table wrapper still scrolls + frames */
.gvb-root .art-body > table { display: block; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); }

/* Inline SVG illustration — framed in a dark padded card (mockup .ill) */
.gvb-root .gvb-illustration { margin: 34px 0; padding: 22px; background: var(--dark); border: 1px solid #fff; border-radius: var(--r); }
.gvb-root .gvb-illustration svg { width: auto; max-width: 100%; height: auto; max-height: 540px; margin: 0 auto; display: block; }
.gvb-root .gvb-illustration figcaption { font-family: "Montserrat", sans-serif; font-size: 11px; letter-spacing: 0.05em; color: var(--muted); text-align: center; margin-top: 12px; font-style: italic; }

/* Pull-quote (decorative aside) */
.gvb-root .pullquote { border-left: 4px solid #f0c040; background: rgba(240, 192, 64, 0.06); padding: 14px 20px; margin: 28px 0; font-family: Georgia, serif; font-size: 20px; font-style: italic; font-weight: 500; color: #f0c040; line-height: 1.45; }
.gvb-root .pullquote p { margin: 0; }
.gvb-root .pullquote span { color: #f0c040; }
.gvb-root .gvb-foot-brand { font-family: "Montserrat", sans-serif; font-weight: 700; }

/* Embedded interactive tool */
.gvb-root .gvb-tool { border: 1px solid #fff; border-radius: var(--r); overflow: hidden; margin: 28px 0; background: var(--surface); }
/* Height is set inline (initial) and then auto-grown to content by JS. min-height
   is a floor; the iframe is allowed to scroll if the script can't run. */
.gvb-root .gvb-tool iframe { width: 100%; min-height: 320px; border: 0; display: block; }

/* FAQ accordion */
.gvb-root .faq { margin: 36px 0; }
.gvb-root .faq h2 { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 24px; color: var(--ink); margin: 0 0 16px; }
.gvb-root .faq details { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 16px; margin: 0 0 10px; background: var(--surface); }
.gvb-root .faq summary { font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.gvb-root .faq summary::-webkit-details-marker { display: none; }
.gvb-root .faq summary::before { content: "+"; color: var(--yellow); font-weight: 800; margin-right: 10px; }
.gvb-root .faq details[open] summary::before { content: "\2013"; }
.gvb-root .faq details > div { margin-top: 10px; color: var(--muted); }

/* Sources block — dashed-border card with yellow kicker (mockup .sources) */
.gvb-root .sources { margin: 44px 0; padding: 22px 24px; border: 1px dashed var(--border); border-radius: var(--r); background: var(--surface); }
.gvb-root .sources h2 { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); margin: 0 0 14px; }
.gvb-root .sources ol { list-style: none; margin: 0; padding: 0; }
.gvb-root .sources ol li { padding: 8px 0; font-size: 14px; color: var(--muted); border-top: 1px solid var(--border); }
.gvb-root .sources ol li:first-child { border-top: 0; }
.gvb-root .sources a { color: var(--yellow); }

/* Related posts — image cards (cover + badge + title + read time), same
   as the home/category cards. Falls back to the branded placeholder when a
   related post has no featured image. */
.gvb-root .related { margin: 44px 0; }
.gvb-root .related h2 { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); border-bottom: 1px solid var(--border); padding-bottom: 11px; margin: 0 0 22px; }

/* Article-page category nav strip */
.gvb-root .catstrip { display: flex; gap: 6px; flex-wrap: wrap; margin: 36px 0; }

/* End-of-article CTA box */
.gvb-root .cta-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 28px 26px; margin: 36px 0; text-align: center; }
.gvb-root .cta-box h3 { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 24px; color: var(--ink); margin: 0 0 8px; }
.gvb-root .cta-box p { color: var(--muted); margin: 0 0 16px; }

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 860px) {
  .gvb-root .catnav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px; gap: 7px; scrollbar-width: none; }
  .gvb-root .catnav::-webkit-scrollbar { display: none; }
  .gvb-root .catnav a { flex-shrink: 0; }
}
@media (max-width: 560px) {
  .gvb-root .wrap, .gvb-root .art-wrap { padding: 0 16px; }
  .gvb-root .toprow { flex-wrap: wrap; gap: 10px; padding: 13px 0 10px; }
  .gvb-root .search { flex: 0 0 100%; max-width: 100%; margin-left: 0; order: 3; }
  .gvb-root .search input { font-size: 16px; }
  .gvb-root .hero { margin: 16px 0 6px; }
  .gvb-root .fbody { padding: 14px 15px 17px; }
  .gvb-root .fbody p { font-size: 15px; }
  .gvb-root .catsec { margin: 28px 0; }
  .gvb-root .sechead h2 { font-size: 16px; }
  .gvb-root .cbody h3 { font-size: 15.5px; }
  .gvb-root .art-body { font-size: 16.5px; }
  .gvb-root .tldr { padding: 16px 17px; }
  .gvb-root .gvb-illustration { padding: 14px; }
  .gvb-root .sources { padding: 16px 17px; }
  .gvb-root .foot { flex-direction: column; align-items: flex-start; padding: 36px 16px; gap: 30px; }
}

/* ════════════════════════════════════════════════════════
   Hide the active theme's #page-header (and its reserved top
   padding) on blog-controlled routes — the plugin renders its
   own header inside .gvb-root.
   ════════════════════════════════════════════════════════ */
body.page-template-gvb-blog-index #page-header,
body.single-post #page-header,
body.category #page-header,
body.tag #page-header,
body.search #page-header,
body.author #page-header { display: none !important; }

body.page-template-gvb-blog-index,
body.single-post,
body.category,
body.tag,
body.search,
body.author { padding-top: 0 !important; margin-top: 0 !important; background: #252f3b; }

body.page-template-gvb-blog-index #page-main,
body.single-post #page-main,
body.category #page-main,
body.tag #page-main,
body.search #page-main,
body.author #page-main { padding-top: 0 !important; margin-top: 0 !important; }

/* ════════════════════════════════════════════════════════
   BRANDED BACKGROUND PATTERN — blog home + category (per Alon, June 2026).
   blog-bg.png is a TRANSPARENT pattern. It's painted as a FIXED layer behind
   the content (a ::before pinned to the viewport), so the subtle pattern stays
   visible from the top through the middle to the bottom as the user scrolls —
   instead of only at the top. Mirrors files/index.html `.cats::before` (a
   low-opacity pattern layer behind the content), adapted to persist on scroll.
   Dark theme, text, cards, header and footer are all unchanged.
   Scoped to blog home + category routes only.
   ════════════════════════════════════════════════════════ */
/* The pattern is pushed BEHIND content with z-index:-1 inside .gvb-root's own
   stacking context (z-index:0). This keeps it visible (fixed, persists on
   scroll) without lifting any content — so the nav dropdown and all other
   elements keep their natural stacking and are never covered. */
body.page-template-gvb-blog-index .gvb-root,
body.category .gvb-root { position: relative; z-index: 0; background: var(--bg); }
body.page-template-gvb-blog-index .gvb-root::before,
body.category .gvb-root::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("../img/blog-bg.png") center top / cover no-repeat;
  opacity: 0.45;
}

/* ── DEFENSIVE: the "Blog" dropdown must never be clipped or covered, on any
   route. No nav ancestor may clip it (overflow), and it stacks above all page
   content. This wins regardless of background-pattern / theme stacking. ── */
.gvb-root .gvb-nav,
.gvb-root .gvb-nav .nav-inner,
.gvb-root .gvb-nav .nav-links,
.gvb-root .gvb-nav .nav-dropdown { overflow: visible; }
.gvb-root .gvb-nav { z-index: 1000; }
.gvb-root .gvb-nav .dropdown-menu { z-index: 1001; }

/* STRUCTURAL FIX: when open, the desktop dropdown is rendered as a fixed
   viewport overlay (JS sets inline top/left from the button's rect). Being
   position:fixed, its containing block is the viewport — so NO ancestor
   overflow, stacking context, or background layer can clip or cover it. */
.gvb-root .gvb-nav .dropdown-menu.is-fixed-open {
  position: fixed;
  z-index: 999999;
  transform: none;
}