/* buyvpn.org — additions on top of the h4x0r theme's style.css.
 *
 * style.css is the WordPress export and is left untouched so it can be
 * regenerated. Everything below is site-owned: the post/hub furniture the
 * export never had (breadcrumbs, related lists, tables, FAQ blocks) plus the
 * heading sizes, because the theme deliberately sets every heading to 1em and
 * an 8000-word archive needs some hierarchy to be readable.
 *
 * Prefix: .bv-  |  Loaded on every page by tools/build-buyvpn.js.
 */

/* --- headings ----------------------------------------------------------- */

.bv-home-h1,
.bv-page-h1,
.bv-post-h1 {
  font-size: clamp(1.75rem, 1.1rem + 3vw, 3rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-block-end: 0;
}

.bv-post-h1::before,
.bv-page-h1::before,
.bv-home-h1::before {
  content: '# ';
  opacity: 0.3;
}

/* Doubled class so this wins over the generic .wp-block-post-title size below,
   which is declared later in the file. */
.bv-hero-title.bv-hero-title {
  font-size: clamp(1.75rem, 0.9rem + 3.6vw, 56px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* The hero's date column is 20% of a 65ch measure — about 13 characters, one
   short of "September 30, 2026". Shrink it rather than let every date wrap. */
.wp-block-columns .has-extra-small-font-size {
  font-size: 0.7em;
}

.bv-section-h {
  font-size: clamp(1.1rem, 1rem + 1vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.bv-section-h::before {
  content: '## ';
  opacity: 0.3;
}

/* The theme flattens h2/h3 to 1em. Inside an article that removes the only
   signal a scanning reader has, so put some of it back — the "## " prefix the
   theme injects stays, it just gets something to sit against. */
.wp-block-post-content .wp-block-heading:is(h2) {
  font-size: clamp(1.15rem, 1rem + 1.1vw, 1.5rem);
  line-height: 1.35;
  font-weight: 700;
  margin-block-start: 2.5em;
}

.wp-block-post-content .wp-block-heading:is(h3) {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
  font-weight: 700;
  margin-block-start: 1.8em;
}

/* --- article body ------------------------------------------------------- */

.wp-block-post-content > * {
  margin-block-start: 1.4em;
}

.wp-block-post-content ul,
.wp-block-post-content ol {
  padding-inline-start: 3ch;
}

.wp-block-post-content li {
  margin-block-end: 0.6em;
}

.wp-block-post-content ul {
  list-style: none;
  padding-inline-start: 2ch;
}

.wp-block-post-content ul > li::before {
  content: '- ';
  opacity: 0.35;
  margin-inline-start: -2ch;
}

.wp-block-post-content img {
  max-width: 100%;
  height: auto;
}

/* Code blocks: the theme decorates inline <code> with backticks and skips
   anything inside <pre>, so blocks only need a frame. */
.wp-block-code {
  border: 0.125em solid var(--wp--preset--color--midtone);
  padding: 1ch 1.5ch;
  overflow-x: auto;
  font-size: 0.85em;
  line-height: 1.7;
}

.wp-block-code code {
  color: var(--wp--preset--color--accent);
  white-space: pre;
}

/* --- tables ------------------------------------------------------------- */

.bv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85em;
  line-height: 1.6;
  display: block;
  overflow-x: auto;
}

.bv-table th,
.bv-table td {
  border: 0.125em solid var(--wp--preset--color--midtone);
  padding: 0.6ch 1.2ch;
  text-align: left;
  vertical-align: top;
}

.bv-table thead th {
  color: var(--wp--preset--color--primary);
  font-weight: 700;
}

/* --- breadcrumbs, related, hub furniture -------------------------------- */

.bv-crumbs {
  font-size: 0.75em;
  line-height: 1.8;
  opacity: 0.75;
}

.bv-crumbs span[aria-hidden] {
  opacity: 0.4;
  margin-inline: 0.5ch;
}

.bv-crumbs [aria-current] {
  opacity: 0.7;
}

.bv-related ul,
.bv-plain-list {
  list-style: none;
  padding: 0;
  margin-block-start: 1em;
}

.bv-related li,
.bv-plain-list li {
  margin-block-end: 0.5em;
}

.bv-related li::before,
.bv-plain-list li::before {
  content: '> ';
  opacity: 0.35;
}

.bv-hub-tail {
  font-size: 0.85em;
  margin-block-start: 2em;
}

.bv-home-lede {
  max-width: 65ch;
  font-size: 0.95em;
  line-height: 1.9;
}

.bv-faq {
  margin-block-start: 1.6em;
}

.bv-faq p {
  margin-block-start: 0.6em;
}

.bv-footer-nav {
  display: flex;
  gap: 1ch;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.85em;
}

/* --- excerpt cards ------------------------------------------------------ */

.wp-block-post-excerpt__excerpt {
  opacity: 0.85;
}

.wp-block-post-title {
  font-size: clamp(1.2rem, 1rem + 1.2vw, 1.6rem);
  line-height: 1.3;
  font-weight: 700;
}

/* --- responsive --------------------------------------------------------- */

/* The exported homepage hard-codes 100px of padding on all four sides, which
   costs a phone half its width. Claw it back below tablet. */
@media (max-width: 782px) {
  .wp-block-group[style*='padding-left:100px'] {
    padding: 3em 0 !important;
  }

  .wp-container-core-columns-is-layout-28f84493 {
    flex-wrap: wrap !important;
  }

  .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* The CRT scanline overlay is a fixed-position pseudo-element on a container
   that also owns the page scroll; on iOS Safari that combination flickers.
   Cheap to opt out of, and it is decoration. */
@media (prefers-reduced-motion: reduce) {
  .wp-site-blocks::before,
  .wp-site-blocks::after {
    display: none;
  }
}