/* ══════════════════════════════════════════════════════════════════════════
   base.css — reset, element defaults, typography, layout primitives.
   ══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--tv-page-bg);
  scroll-behavior: smooth;
  /* Sticky header + in-page jump nav both overlap anchors without this. */
  scroll-padding-top: 120px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--tv-page-bg);
  color: var(--tv-ink);
  font-family: var(--tv-font-body);
  font-size: var(--tv-fs-body);
  line-height: var(--tv-lh-body);
  letter-spacing: var(--tv-tr-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* An inverted band must repaint its own ground, not inherit the page's. */
.tv-invert { background: var(--tv-paper); color: var(--tv-ink); }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--tv-font-display);
  font-weight: 700;
  line-height: var(--tv-lh-snug);
  letter-spacing: var(--tv-tr-display);
  color: var(--tv-ink);
}
h1 { font-size: var(--tv-fs-h1); font-weight: 800; line-height: var(--tv-lh-tight); }
h2 { font-size: var(--tv-fs-h2); }
h3 { font-size: var(--tv-fs-h3); }
h4 { font-size: var(--tv-fs-h4); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-ink); text-decoration: none; transition: color var(--tv-dur-fast) var(--tv-ease); }
a:hover { color: var(--tv-ink); }

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

button {
  font: inherit; color: inherit; background: none;
  border: 0; padding: 0; margin: 0; cursor: pointer;
}

input, select, textarea { font: inherit; color: inherit; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .35em; }

hr { border: 0; border-top: 1px solid var(--tv-hair); margin: var(--tv-s-10) 0; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--tv-hair); }
th { font-family: var(--tv-font-display); font-weight: 700; font-size: 14px; }

blockquote {
  margin: var(--tv-s-6) 0;
  padding: var(--tv-s-4) var(--tv-s-6);
  border-left: 3px solid var(--brand);
  background: var(--tv-paper-deep);
  border-radius: 0 var(--tv-r-sm) var(--tv-r-sm) 0;
  color: var(--tv-ink-2);
}

code, kbd, pre, samp { font-family: var(--tv-font-mono); font-size: .92em; }
code { background: var(--tv-paper-deep); padding: .15em .4em; border-radius: var(--tv-r-xs); }
pre { background: var(--tv-paper-deep); padding: var(--tv-s-4); border-radius: var(--tv-r-sm); overflow-x: auto; }
pre code { background: none; padding: 0; }

/* ── Focus — always visible for keyboard users. ────────────────────────── */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--tv-r-xs);
}

/* ── Layout primitives ─────────────────────────────────────────────────── */
.tv-wrap {
  max-width: var(--tv-max-w);
  margin-inline: auto;
  padding-inline: var(--tv-pad-x);
}
.tv-wrap--narrow { max-width: var(--tv-max-w-nb); }

.tv-section { padding-block: var(--tv-s-16); border-top: 1px solid var(--tv-hair); }
.tv-section:first-child { border-top: 0; }

/* Grid children need this or long words push the track wider than the page. */
.tv-main { min-width: 0; }

/* Cart / checkout / account bodies: full width, no prose measure or underlines. */
.tv-wc-page { min-width: 0; }

/* The section wrapper adds no space of its own on these pages. The WC blocks
   each ship a full container, so .tv-section's 64px only stacked on top of it
   — the checkout page carried 152px of dead space above its first card. */
body.woocommerce-checkout .tv-section,
body.woocommerce-cart .tv-section { padding-block: 0; }

/* ── Type utilities ────────────────────────────────────────────────────── */
.tv-mono {
  font-family: var(--tv-font-mono);
  letter-spacing: var(--tv-tr-mono);
  text-transform: uppercase;
  font-size: var(--tv-fs-micro);
}
/* Tabular numerals keep price columns and spec tables from jittering. */
.tv-num {
  font-family: var(--tv-font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.tv-kicker {
  font-family: var(--tv-font-mono);
  font-size: var(--tv-fs-micro);
  letter-spacing: var(--tv-tr-mono);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-ink);
}
.tv-kicker--muted { color: var(--tv-ink-3); font-weight: 400; }
.tv-muted { color: var(--tv-ink-3); }
.tv-lede { font-size: var(--tv-fs-lead); line-height: var(--tv-lh-loose); color: var(--tv-ink-2); }

.tv-section-h {
  font-size: var(--tv-fs-h2);
  margin-bottom: var(--tv-s-5);
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.tv-section-h .tv-mono { font-size: 12px; color: var(--tv-ink-4); letter-spacing: var(--tv-tr-mono); }

/* ── Accessibility helpers ─────────────────────────────────────────────── */
.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; width: 1px;
  margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap;
}
.screen-reader-text:focus {
  clip-path: none; height: auto; width: auto; z-index: var(--tv-z-toast);
  background: var(--tv-paper); color: var(--tv-ink);
  padding: 14px 22px; border-radius: var(--tv-r-sm); box-shadow: var(--tv-elev-3);
  top: 12px; left: 12px;
}
.tv-skip-link { position: absolute; left: -9999px; }
.tv-skip-link:focus { left: 12px; top: 12px; }

[hidden] { display: none !important; }

/* ── WordPress core alignment / caption classes ────────────────────────── */
.alignleft  { float: left;  margin: .3em var(--tv-s-6) var(--tv-s-4) 0; }
.alignright { float: right; margin: .3em 0 var(--tv-s-4) var(--tv-s-6); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { margin-block: var(--tv-s-10); }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }

.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption {
  font-size: var(--tv-fs-small);
  color: var(--tv-ink-3);
  margin-top: var(--tv-s-2);
  text-align: center;
}
.sticky, .gallery-caption, .bypostauthor { /* required by the theme check */ }

/* Editor-inserted images should sit on the card radius like everything else. */
.wp-block-image img, .wp-post-image { border-radius: var(--tv-r-md); }