/* We Buy Your Tech: overhaul v2 shell on pages built with the old template (preview 1, Nov 2026).
 * Load order: legacy.css (old body components, header/footer/type removed) -> v2.css -> stock.css -> this file.
 * Rules here map old body components onto the v2 system. Tom's rules: no uppercase eyebrows,
 * hero H1 max ~56px, no full-width beige bands, WhatsApp is WhatsApp green, one primary button per hero.
 */
body { font-family: var(--f-body); background: var(--bone); color: var(--ink); }
h1, h2, h3 { font-family: var(--f-head); font-weight: 500; letter-spacing: -0.01em; }
h1 { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.08; }
h2 { line-height: 1.15; }
h4 { font-family: var(--f-body); font-weight: 600; font-size: 17px; line-height: 1.3; letter-spacing: 0; }
h1 .display, h2 .display, h3 .display { font-style: normal; font-family: inherit; font-weight: inherit; color: inherit; }
.surface-ink h1, .surface-ink h2, .surface-ink h3, .surface-ink h4 { color: var(--c-bone); }
.lede { color: var(--ink-2); }

/* Small labels: sentence case in the body face, never mono caps */
.mono, .mono-sm, .tag, .step__caption, .step__num, .card__num, .card__cta, .indexed-row__idx, .form-note {
  font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500;
}
.indexed-row__idx { font-family: var(--f-head); font-size: 20px; }
.step__num { font-size: 14px; }
/* Eyebrow labels above headings are a design tell: hidden (text kept in the source). */
.section-head__tag, :is(.tag, .mono):has(+ :is(h1, h2, h3)) { display: none !important; }
/* Breadcrumbs */
section > .mono:only-child, .item-crumbs { font-size: 14px; color: var(--muted); }

/* No full-width beige bands */
.surface-paper { background: transparent; }
.section { padding-top: 72px; padding-bottom: 72px; border-bottom: 1px solid var(--line); }
@media (max-width: 720px) { .section { padding-top: 52px; padding-bottom: 52px; } }

/* Links in running text */
.lede a:not(.btn):not(.btn-link), .section p a:not(.btn):not(.btn-link), .small a {
  text-decoration: underline; text-decoration-color: var(--rust); text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.btn-link { font-weight: 500; }

/* Buttons: rust is the one primary, WhatsApp is WhatsApp green */
.btn { font-family: var(--f-body); }
.btn-accent { background: var(--rust); border-color: var(--rust); color: #fff; }
.btn-accent:hover { background: var(--rust-deep); border-color: var(--rust-deep); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.surface-ink .btn-ghost { color: var(--c-bone); }
.btn-wa, a.btn-accent[href^="https://wa.me/"] { background: var(--wa); border-color: var(--wa); color: #0b2414; }
.btn-wa:hover, a.btn-accent[href^="https://wa.me/"]:hover { background: #1fbf5b; border-color: #1fbf5b; color: #0b2414; }
.btn-wa svg, a.btn-accent[href^="https://wa.me/"] svg { color: #0b2414; }
a.btn-ghost[href^="https://wa.me/"] svg { color: #1a9e4b; }
.surface-ink a.btn-ghost[href^="https://wa.me/"] svg { color: var(--wa); }
.surface-ink .wa-link { color: var(--c-bone); }
.sms-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.sms-link:hover { color: var(--ink); text-decoration-color: var(--ink-2); }
.wa-row { align-items: center; gap: 10px 20px !important; }

/* Forms (contact, buy) */
.field label { font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; color: var(--ink); }
.field .opt { font-size: 14px; }
.chip { font-family: var(--f-body); font-size: 15px; }
.input, .textarea, .field select { font-family: var(--f-body); font-size: 16px; }

/* Article pages (kit, town, blog): related box label */
body .article-related { background: #f3f0ea; }
body .article-related h3 { font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
body .article-body h1 { font-size: clamp(34px, 4.2vw, 48px); line-height: 1.1; }

/* Stock pages */
.item-title, .item-h2 { font-family: var(--f-head); font-weight: 500; }
.item-actions { align-items: center; gap: 10px 20px; }

/* Header CTA must not wrap on small phones */
@media (max-width: 400px) { .hdr__in { gap: 12px; } .logo span { font-size: 15px; } }

/* Section highlight for plain nav links on sub-pages (blog articles) */
.nav__link.is-current { color: var(--ink); box-shadow: inset 0 -2px 0 var(--rust); border-radius: 0; }
@media (max-width: 1060px) { .nav__link.is-current { box-shadow: none; color: var(--rust-deep); } }

/* Blog index cards: the whole card is the link, so no underlines inside it */
body .article-body a.insights-index-card, body .article-body a.insights-index-card * { text-decoration: none; }
body .insights-index-card h3 { color: var(--ink); }
body .insights-index-card p { color: var(--muted); }
body .article-body a.insights-index-card:hover h3 { color: var(--rust-deep); text-decoration: underline; text-decoration-color: var(--rust); text-underline-offset: 3px; }

/* Line old page containers and breadcrumbs up with the v2 header (1160px wrap, 40px gutter) */
@media (min-width: 721px) {
  :root { --maxw: 1160px; --pad-x: 40px; }
  .container[style*="max-width: 1100px"], .container[style*="max-width: 1200px"] { max-width: 1160px !important; }
}
/* legacy.css makes every svg a block; keep icons inline inside links */
.btn-link svg, a svg { display: inline-block; vertical-align: middle; }

/* overhaul: hide numbered section tags (01 / ...) */
div.tag.tag-num{display:none}