/* VAX UI Kit — v0.12 (strict/lint-safe) */

/* ---- Tokens ---- */
:root{
  --vax-ink:#0b0b0f;
  --vax-sub:#475569;
  --vax-line:#e6e8ee;
  --vax-card:#ffffff;
  --vax-mint:#2ce5b5;
  --vax-sky:#7ab6ff;
  --va-embed-max:560px;
}

/* ---- Badges ---- */
.vax-badge{
  display:inline-flex; align-items:center; gap:.5ch;
  font:700 13px/1.1 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto;
  padding:.5rem .75rem; border-radius:999px; color:#fff;
  background:
    radial-gradient(120% 140% at -10% -20%, rgba(44,229,181,.35), transparent 55%),
    radial-gradient(140% 160% at 120% 0%, rgba(122,182,255,.32), transparent 55%),
    linear-gradient(135deg,#0b1220,#0f1b2a);
  box-shadow:0 8px 24px rgba(2,6,23,.25), inset 0 0 0 1px rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.vax-badge i{
  display:inline-grid; place-items:center;
  width:22px; height:22px; border-radius:6px;
  background:linear-gradient(135deg,#2CE5B5,#7AB6FF);
  color:#0b1220; font-weight:900; font-style:normal;
}
.vax-badge small{opacity:.9; font-weight:600;}
.vax-badge--ghost{background:#fff; color:#0b1220; box-shadow:0 1px 0 rgba(15,23,42,.06);}
.vax-badge.is-compact{padding:.35rem .55rem; font-weight:800;}
.vax-badge.is-compact i{width:18px; height:18px; font-size:11px;}

/* ---- Footer grid ---- */
.vax-footgrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px 14px;
  align-items:start;
}
@media (min-width:900px){
  .vax-footgrid{
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:10px 16px;
  }
}
.vax-footgrid > *{ min-width:0; }
.vax-footgrid ul,
.vax-footgrid ol{ list-style:none; margin:0; padding:0; }
.vax-footgrid h2,
.vax-footgrid h3{ margin:0 0 6px; font-size:0.95rem; line-height:1.2; }

/* underline offset + fallback */
.vax-footgrid a{
  display:inline; text-decoration:underline;
  text-underline-offset:2px; /* modern */
  text-decoration-skip-ink:auto; /* harmless on old parsers */
  border:0; background:none; padding:0; border-radius:0;
}
.vax-footgrid a:hover{
  text-decoration-thickness:auto; /* fallback */
  text-decoration-thickness:from-font; /* modern */
}
.vax-footgrid,
.vax-footgrid p,
.vax-footgrid li,
.vax-footgrid a{ font-size:.86rem; line-height:1.35; }
@media (max-width:900px){
  .vax-footgrid,
  .vax-footgrid p,
  .vax-footgrid li,
  .vax-footgrid a{ font-size:.82rem; line-height:1.3; }
}

/* ---- Quote card ---- */
.wp-block-quote{
  background:#fff; color:#111;
  border:1px solid #e5e7eb; border-radius:12px;
  padding:18px 16px 16px 18px; position:relative;
}
.wp-block-quote p{ margin:0; }
.wp-block-quote cite,
.wp-block-quote__citation{ display:block; margin-top:10px; font-size:12px; color:#555; letter-spacing:.01em; }
.wp-block-quote::before{
  content:"“";
  position:absolute; top:-10px; left:-10px;
  width:28px; height:28px; line-height:28px; text-align:center;
  background:#2af5c7; color:#0b0f18;
  border:1px solid #dbe0e6; border-radius:999px;
  font:700 18px/28px Georgia,"Times New Roman",serif;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}

/* ---- Cards ---- */
.va-card{ border-radius:14px; padding:1rem 1.1rem; margin:1rem 0; }
.va-card h2,
.va-card h3,
.va-card h4{ margin-top:0; }
.va-card--ink  { background:#0f1115; color:#e8edf3; border:1px solid #232834; }
.va-card--slate{ background:#111827; color:#e5e7eb; border:1px solid #1f2937; }
.va-card--stone{ background:#1c1c1c; color:#eee;    border:1px solid #2a2a2a; }
.va-card--amber{ background:#1a1407; color:#fde68a; border:1px solid #92400e; }
.va-card--blue { background:#0b1628; color:#dbeafe; border:1px solid #1e3a8a; }

/* ---- Title card ---- */
.entry-content .vax-titlecard{
  display:flex; align-items:center; gap:10px;
  border:1px solid #e6e8ee; border:1px solid var(--vax-line);
  border-radius:14px; background:#fff; background:var(--vax-card);
  padding:12px 14px; margin:16px auto; max-width:980px;
}
.entry-content .vax-titlecard .tag{
  font:900 12px/1 system-ui,Inter; padding:.28rem .6rem; border-radius:999px;
  border:1px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#2ce5b5,#7ab6ff) border-box;
}
.entry-content .vax-titlecard .h{ margin:0; font:900 20px/1.2 system-ui,Inter; }

/* ---- CTA stripe ---- */
.entry-content .vax-cta{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:14px 0; }
.entry-content .vax-cta a{
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  padding:.7rem 1rem; border-radius:999px; border:1px solid #e6e8ee; border:1px solid var(--vax-line);
  background:#fff; background:var(--vax-card); color:#0b0b0f; color:var(--vax-ink);
  font:800 14px/1 system-ui,Inter;
}
.entry-content .vax-cta a.primary{
  color:#fff; border:0; background:linear-gradient(135deg,#2ce5b5,#7ab6ff);
  box-shadow:0 6px 12px rgba(122,182,255,.22);
}

/* ---- File block ---- */
.wp-block-file{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin:.5rem 0 .75rem;
}
.wp-block-file > a:first-child{
  color:#0b0b0f; text-decoration:none; font-weight:600;
  max-width:36ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border-bottom:1px dotted transparent;
}
.wp-block-file > a:first-child:hover{ border-bottom-color:#cbd5e1; }
.wp-block-file .wp-block-file__button{
  all:unset; display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .8rem; border:1px solid #2a2f3a; border-radius:.5rem;
  background:#0d1117; color:#e6edf3; font-weight:600; font-size:.9rem; line-height:1.2; cursor:pointer;
}
.wp-block-file .wp-block-file__button:hover{ border-color:#3a4454; transform:translateY(-1px); }
.wp-block-file .wp-block-file__button:focus-visible{ outline:2px solid #7bd3ff; outline-offset:2px; }
/* Opt-in card variant */
.wp-block-file.va-dl-card{ padding:.7rem .9rem; border:1px solid #2a2f3a; border-radius:.6rem; background:#0d1117; }
.wp-block-file.va-dl-card > a:first-child{ max-width:unset; }

/* ---- Separators ---- */
.va-sep-badge{
  position:relative; border:0; height:1px; margin:1.6rem 0;
  background:linear-gradient(90deg, transparent, #2a2f3a, transparent); opacity:1;
}
.va-sep-badge::after{
  content: attr(data-badge);
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:.15rem .6rem; font-size:.8rem; line-height:1; color:#cbd5e1;
  background:#0b0f1a; border:1px solid #2a2f3a; border-radius:.5rem; white-space:nowrap;
}
.va-sep-badge:not([data-badge])::after{ content:"•"; padding:.15rem .35rem; border-radius:999px; }

.va-sep-hairline{
  border:0; height:1px; margin:1.2rem 0;
  background:linear-gradient(90deg, transparent, #2a2f3a, transparent); opacity:1;
}

/* ---- Embeds ---- */
figure.wp-block-embed,
.wp-block-embed.is-type-video,
.wp-block-video,
.tiktok-embed{
  max-width:560px;                 /* fallback */
  max-width:var(--va-embed-max);   /* modern */
  width:100%;
  margin:1rem auto;
}
.wp-block-embed__wrapper iframe,
.wp-block-video video{
  width:100%; height:auto; display:block; border:0; border-radius:12px;
}
figure.wp-block-embed figcaption:empty,
.wp-block-video figcaption:empty{ display:none; }
.tiktok-embed{ max-width:560px !important; max-width:var(--va-embed-max) !important; }
.tiktok-embed > section{ margin:0 !important; }
@media (max-width:480px){
  figure.wp-block-embed,
  .wp-block-embed.is-type-video,
  .wp-block-video,
  .tiktok-embed{
    max-width:calc(100vw - 2rem);
  }
}

/* ---- “Filed under” + tag styles ---- */
.taxonomy-post_tag.wp-block-post-terms.vax-filedunder{
  margin:.4rem 0 0; font:600 13px/1.6 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif; color:#475569;
}
.taxonomy-post_tag.wp-block-post-terms.vax-filedunder::before{ content:"Filed under "; color:#475569; }
.taxonomy-post_tag.wp-block-post-terms.vax-filedunder a{
  color:#0b0b0f; text-decoration:underline; text-underline-offset:2px; text-decoration-skip-ink:auto;
}
.taxonomy-post_tag.wp-block-post-terms.vax-filedunder a:hover{ text-decoration-thickness:auto; text-decoration-thickness:from-font; }
.taxonomy-post_tag.wp-block-post-terms.vax-filedunder .wp-block-post-terms__separator{ display:none; }
.taxonomy-post_tag.wp-block-post-terms.vax-filedunder a:not(:last-of-type)::after{
  content:" · "; color:#94a3b8; text-decoration:none;
}

.taxonomy-post_tag.wp-block-post-terms.vax-tagpills{
  display:flex; flex-wrap:wrap; gap:6px; margin:.45rem 0 0;
  font:600 12px/1 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif; color:#0b0b0f;
}
.taxonomy-post_tag.wp-block-post-terms.vax-tagpills .wp-block-post-terms__separator{ display:none; }
.taxonomy-post_tag.wp-block-post-terms.vax-tagpills a{
  display:inline-block; padding:.25rem .5rem; border:1px solid #B8C0CC; border-radius:999px;
  background:#fff; color:#0b0b0f; text-decoration:none;
}
.taxonomy-post_tag.wp-block-post-terms.vax-tagpills a:hover{ border-color:#94a3b8; }

.taxonomy-post_tag.wp-block-post-terms.vax-micrometa{
  margin:.6rem 0 0; font:600 11.5px/1.4 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:#647085; letter-spacing:.2px; text-transform:uppercase;
}
.taxonomy-post_tag.wp-block-post-terms.vax-micrometa::before{ content:"Tags:"; margin-right:.4rem; color:#94a3b8; }
.taxonomy-post_tag.wp-block-post-terms.vax-micrometa a{
  color:#475569; text-decoration:underline; text-underline-offset:1.5px; text-decoration-skip-ink:auto;
}
.taxonomy-post_tag.wp-block-post-terms.vax-micrometa a:hover{ text-decoration-thickness:auto; text-decoration-thickness:2px; }
.taxonomy-post_tag.wp-block-post-terms.vax-micrometa .wp-block-post-terms__separator{ display:none; }
.taxonomy-post_tag.wp-block-post-terms.vax-micrometa a:not(:last-of-type)::after{ content:" / "; color:#94a3b8; }

/* ---- Links-band ---- */
.vax-links-band{
  color:#0b0b0f;
  --line:#e6e8ee; --card:#fff;
}
.vax-links-band > .wp-block-columns{
  display:grid;
  gap:16px;
  grid-template-columns:1.6fr 1fr;
  align-items:start;
  max-width:1320px;
  max-width:calc(100vw - 32px);
  margin:0 auto;
  padding:18px 14px 24px;
} /* ← ensure this brace exists */
@media (max-width:900px){
  .vax-links-band > .wp-block-columns{ grid-template-columns:1fr; }
}
.vax-links-band .pills{ display:flex; flex-wrap:wrap; gap:.45rem; }
.vax-links-band .pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font:800 .92rem/1 system-ui,Inter; text-decoration:none; color:inherit;
  padding:.46rem .72rem; border-radius:9999px; border:1px solid #e6e8ee; border:1px solid var(--line);
  background:#fff; background:var(--card);
  transition:transform .12s ease, border-color .12s ease, filter .12s ease;
}
.vax-links-band .pill:hover{ transform:translateY(-1px); border-color:#cbd5e1; }
.vax-links-band .pill--ghost{
  border:1px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#2ce5b5,#7ab6ff) border-box;
}
.vax-links-band .pill--solid{
  color:#fff; border:0; background:linear-gradient(135deg,#2ce5b5,#7ab6ff);
  box-shadow:0 6px 12px rgba(122,182,255,.22);
}
.vax-links-band .link-deck{
  display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:12px;
}
@media (max-width:900px){ .vax-links-band .link-deck{ grid-template-columns:1fr; } }
.vax-links-band .link-deck .card{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:#fff; background:var(--card); border:1px solid #e6e8ee; border:1px solid var(--line);
  border-radius:12px; padding:12px; color:#334155; text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.vax-links-band .link-deck .card:hover{ background:#fbfbfb; border-color:#dbe2ea; }
.vax-links-band .link-deck .t{ font:700 15px/1.35 system-ui,Inter; text-decoration:underline; text-underline-offset:2px; text-decoration-skip-ink:auto; }
.vax-links-band .link-deck .arrow{ font-weight:900; opacity:.6; }

/* Code block inside links-band */
.vax-links-band .wp-block-code{
  position:relative; display:grid; grid-template-rows:1fr;
  min-height:260px; width:100%; border:1px solid #222; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,#0b0b0f 0%, #111316 100%);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.vax-links-band .wp-block-code pre{
  margin:0; padding:16px 18px; min-height:220px; white-space:pre-wrap; word-break:break-word;
  font:600 14px/1.6 ui-monospace,SFMono-Regular,Menlo,Monaco,monospace; color:#e5e7eb; background:transparent;
}
.vax-links-band .wp-block-code button{
  position:absolute; right:12px; top:12px;
  background:linear-gradient(135deg,#2ce5b5,#7ab6ff);
  color:#fff; border:0; border-radius:999px; font:800 12px/1 system-ui; padding:.4rem .6rem;
}
.vax-links-band .wp-block-code button:hover{ filter:saturate(1.06); }

/* ---- Hero ---- */
:root { --header-h: 66px; }

.vax-hero{
  margin: 0;

  /* safe gradient */
  background: #eefcf7;
  background-image: linear-gradient(135deg, #eefcf7, #f4fbff);

  /* height: old → var-safe (ditch 100dvh) */
  min-height: calc(100vh - 66px);
  min-height: calc(100vh - var(--header-h));

  display: grid;
  align-items: center;

  /* ditch overflow-x: clip for older parsers */
  overflow-x: hidden;
}

.vax-hero .wrap{ max-width:1160px; margin:0 auto; padding:clamp(32px, 6vh, 96px) 14px; }
.vax-hero .h{ margin:0 0 10px; font:900 clamp(32px,6vw,64px)/1.05 system-ui,Inter,Arial,sans-serif; letter-spacing:-.3px; color:#0b0b0f; }
.vax-hero .sub{ margin:0 0 18px; max-width:60ch; font:700 clamp(16px,2vw,20px)/1.45 system-ui,Inter,Arial,sans-serif; color:#475569; }
.vax-hero .cta{ display:flex; flex-wrap:wrap; gap:10px; }
.vax-hero .btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:.66rem 1rem; border-radius:999px; text-decoration:none; cursor:pointer;
  font:800 15px/1 system-ui, Inter; border:1px solid #e6e8ee; background:#fff; color:#0b0b0f;
}
.vax-hero .btn.primary{
  border:0; color:#fff; background:linear-gradient(135deg, #2ce5b5, #7ab6ff);
  box-shadow:0 6px 12px rgba(122,182,255,.22);
}
.vax-hero .btn:hover{ transform:translateY(-1px); }
@media (prefers-reduced-motion:reduce){ .vax-hero .btn:hover{ transform:none; } }
.vax-bleed{ position:relative; }
.vax-bleed::before{ z-index:-1; }

/* ---- Paragraph stacks / faux bullets / numbers ---- */
.entry-content .vax-pstack p{ margin:.38rem 0; line-height:1.55; }
.entry-content .vax-pbullets p{ margin:.38rem 0; padding-left:1.25rem; text-indent:-1.25rem; }
.entry-content .vax-pbullets p::before{ content:"• "; font-weight:900; color:#0b0b0f; }
.entry-content .vax-pnums{ counter-reset:vax; }
.entry-content .vax-pnums p{ counter-increment:vax; margin:.38rem 0; padding-left:1.25rem; text-indent:-1.25rem; }
.entry-content .vax-pnums p::before{ content:counter(vax) ". "; font-weight:900; color:#0b0b0f; }

/* ---- Neutral code card ---- */
.entry-content .vax-code{
  --ink:#0b0b0f; --sub:#5b6676; --line:#d7dde6; --bg1:#f5f7fa; --bg2:#eceff4; --radius:16px;
  position:relative; margin:12px auto; max-width:980px;
  border:1px solid #d7dde6; border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,#f5f7fa,#eceff4);
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  box-shadow:0 10px 28px rgba(0,0,0,.06); overflow:hidden;
}
.entry-content .vax-code .bar{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.7));
  border-bottom:1px solid #d7dde6; border-bottom:1px solid var(--line);
}
.entry-content .vax-code .label{ display:inline-flex; align-items:center; gap:.5rem; font:800 12px/1 system-ui,Inter,sans-serif; color:#0b0b0f; }
.entry-content .vax-code .lang{
  font:800 11px/1 system-ui,Inter; padding:.2rem .5rem; border-radius:999px;
  border:1px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#2ce5b5,#7ab6ff) border-box;
}
.entry-content .vax-code pre{
  margin:0; padding:16px 18px; font:600 14px/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;
  color:#1f2937; background:transparent; white-space:pre-wrap; word-break:break-word;
}
.entry-content .vax-code .copy{
  appearance:none; border:0; cursor:pointer; padding:.4rem .7rem; border-radius:999px;
  font:800 12px/1 system-ui,Inter; color:#fff;
  background:linear-gradient(135deg,#2ce5b5,#7ab6ff); box-shadow:0 6px 12px rgba(122,182,255,.22);
}
.entry-content .vax-code .copy:active{ transform:translateY(1px); }

/* Width helpers */
.entry-content .vax-code.narrow{ max-width:720px; }
.entry-content .vax-code.wide{ max-width:1100px; }
.entry-content .vax-code.center{ text-align:left; margin-left:auto; margin-right:auto; }

/* ---- Native WP code block (global polish) ---- */
.wp-block-code{ position:relative; }
.wp-block-code pre{
  background:#0b0f18; border:1px solid #1e2433; border-radius:12px;
  margin:0; padding:16px 56px 16px 16px; color:#e6edf3; overflow:auto;
  font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
.wp-block-code .vax-copybtn{
  position:absolute; top:8px; right:8px;
  padding:6px 10px; font:12px/1 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:#0b0f18; background:#2af5c7; border:0; border-radius:8px; cursor:pointer;
}
.wp-block-code .vax-copybtn:focus{ outline:2px solid #ff9f1c; outline-offset:2px; }
.wp-block-code .vax-copybtn[aria-pressed="true"]{ background:#ff9f1c; }

/* ---- Images (minor polish) ---- */
.wp-block-image img, .vax-nav img, .vax-blogroll .thumb{ display:block; height:auto; }

/* ---- Feature/card helpers ---- */
.va-feature .media{ aspect-ratio:16/9; background:#f5f7fa; }
.va-feature .media img{ width:100%; height:100%; object-fit:cover; display:block; }
.va-feature .body{ min-height:180px; }
.vax-blogroll .body{ min-height:220px; }
/* VAX Readbar */
#vax-readbar{
  position:fixed; left:0; right:0; top:0;   /* JS updates top if admin bar is present */
  height:3px;
  transform:scaleX(var(--vax-progress, 0));
  transform-origin:0 50%;
  background:linear-gradient(90deg, #2ce5b5, #7ab6ff);
  z-index:100000;              /* above header */
  pointer-events:none;         /* never blocks clicks */
  will-change:transform;
}
/* opt-out: add .no-readbar to <body> when you want it gone (e.g., home) */
.no-readbar #vax-readbar{ display:none; }