/* ─────────────────────────────────────────────────────────────────────────
   inner-v4.css — the v4 design system applied to every INNER public page
   (pricing, tools, blog, about, contact, account, auth, legal, checkout,
   results). Loaded LAST in home/includes/head.blade.php so it wins over the
   per-page <style> blocks those views still carry.

   Colours already come from revideo.css tokens (the 2026-09-10 palette sweep
   rewrote every old blue/slate/navy in the page views onto --rv-*). This
   file is about SHAPE and TYPE: the homepage's pill buttons, 22 px cards,
   14 px fields, tight 800-weight headings, eyebrow badges.
   The v4 homepage itself (.hv-design) is pixel-exact and NOT touched.
   ───────────────────────────────────────────────────────────────────────── */

/* ── type ───────────────────────────────────────────────────────────────── */
/* Modal overlays (#vt-*-overlay, .vr-amod-overlay, #captcha-modal-overlay)
   are excluded from the COLOUR: their titles sit on gradient headers or on
   the modal's own surface and carry their own colour (2026-09-14, owner:
   "texts in modals looking black"). */
#hv-root :where(h1, h2, h3):not(.hv-design *) {
    font-family: var(--rv-font);
    letter-spacing: var(--rv-tracking-tight);
}
#hv-root :where(h1, h2, h3):not(.hv-design *, [id$="-overlay"] *, [class~="vr-amod-overlay"] *) {
    color: var(--rv-ink);
}
#hv-root :where(h1, h2):not(.hv-design *) { font-weight: 800; }
#hv-root :where(h3):not(.hv-design *)     { font-weight: 700; }

/* ── buttons: everything that acts like a primary CTA becomes the ink pill ── */
#hv-root :where(
    .btn-primary, .btn-search, .btn-upgrade, .ct-submit, .btn-save, .btn-retry,
    .vt-live-btn, .pu-cta, .print-btn, .sp-share-btn, .vt-blogs-btn,
    .blog-filter-btn, .btn-danger, .btn-ghost, .btn-secondary, .btn-outline
):not(.hv-design *) {
    border-radius: var(--rv-r-pill) !important;
    font-family: var(--rv-font);
    font-weight: 700;
    letter-spacing: var(--rv-tracking-snug);
    transition: transform var(--rv-t) var(--rv-ease), box-shadow var(--rv-t) var(--rv-ease), background var(--rv-t), color var(--rv-t), border-color var(--rv-t);
}
#hv-root :where(.btn-primary, .btn-search, .btn-upgrade, .ct-submit, .btn-save, .vt-live-btn, .pu-cta):not(.hv-design *) {
    background: var(--rv-ink) !important;
    color: var(--rv-page) !important;
    border: 1px solid var(--rv-ink) !important;
    box-shadow: var(--rv-shadow-sm) !important;
}
#hv-root :where(.btn-primary, .btn-search, .btn-upgrade, .ct-submit, .btn-save, .vt-live-btn, .pu-cta):not(.hv-design *):hover {
    background: var(--rv-primary) !important;
    border-color: var(--rv-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: var(--rv-shadow-glow) !important;
}
#hv-root :where(.btn-ghost, .btn-secondary, .btn-outline, .print-btn, .sp-share-btn, .vt-blogs-btn, .blog-filter-btn):not(.hv-design *) {
    background: var(--rv-surface) !important;
    color: var(--rv-ink) !important;
    border: 1px solid var(--rv-border) !important;
}
#hv-root :where(.btn-ghost, .btn-secondary, .btn-outline, .print-btn, .sp-share-btn, .vt-blogs-btn, .blog-filter-btn):not(.hv-design *):hover {
    border-color: var(--rv-primary) !important;
    color: var(--rv-primary) !important;
    background: var(--rv-surface-4) !important;
}
#hv-root .blog-filter-btn.active, #hv-root .blog-filter-btn.is-active {
    background: var(--rv-ink) !important; color: var(--rv-page) !important; border-color: var(--rv-ink) !important;
}
#hv-root .btn-danger:not(.hv-design *) { background: var(--rv-danger-wash) !important; color: var(--rv-danger) !important; border: 1px solid var(--rv-danger-pale) !important; }

/* ── cards & panels ─────────────────────────────────────────────────────── */
#hv-root :where(
    .tool-card, #search-container, .vt-card, .vt-platform-card, .vt-blog-card, .vt-advantage-card, .vt-tcard,
    .sp-problem-card, .sp-mistake-card, .sp-sidebar-card, .sp-rcard, .blog-card, .ac-card, .profile-card,
    .pricing-card, .plan-card, .ct-card, .legal-card, .auth-card, .faq-item, .sp-faq-item
):not(.hv-design *) {
    border-radius: var(--rv-r-2xl) !important;
    border-color: var(--rv-border) !important;
}
#hv-root :where(.vt-platform-card, .vt-advantage-card, .vt-tcard, .sp-faq-item, .faq-item):not(.hv-design *) {
    border-radius: var(--rv-r-xl) !important;
}
#hv-root :where(.tool-card, #search-container):not(.hv-design *) {
    box-shadow: var(--rv-shadow) !important;
}

/* ── fields ─────────────────────────────────────────────────────────────── */
#hv-root :where(.ac-input, .ct-input, .ct-select, .ct-textarea, .tool-input, .keyword-bar-input-wrap,
    .vr-amod-select, .vr-amod-input, .vr-amod-textarea, .pq-field textarea, .pq-field select, .pq-field input):not(.hv-design *) {
    border-radius: var(--rv-r-lg) !important;
    border: 1px solid var(--rv-border) !important;
    background: var(--rv-surface-2) !important;
    color: var(--rv-ink);
    font-family: var(--rv-font);
    transition: border-color var(--rv-t), box-shadow var(--rv-t), background var(--rv-t);
}
#hv-root :where(.ac-input, .ct-input, .ct-select, .ct-textarea, .tool-input, .vr-amod-select, .vr-amod-input, .vr-amod-textarea):not(.hv-design *):focus {
    border-color: var(--rv-primary) !important;
    background: var(--rv-surface) !important;
    box-shadow: 0 0 0 4px rgba(109, 92, 230, .14) !important;
    outline: none;
}

/* ── eyebrows / badges ──────────────────────────────────────────────────── */
#hv-root :where(.hero-badge, .vt-badge, .sp-eyebrow, .section-eyebrow, .blog-card-cat, .vt-blog-card-cat, .sp-rcard-cat):not(.hv-design *) {
    border-radius: var(--rv-r-pill) !important;
    background: var(--rv-surface-4) !important;
    color: var(--rv-primary) !important;
    border: 1px solid var(--rv-primary-pale) !important;
    font-size: var(--rv-fs-xs);
    font-weight: 800;
    letter-spacing: var(--rv-tracking-caps);
    text-transform: uppercase;
}

/* ── links & selection ──────────────────────────────────────────────────── */
#hv-root ::selection { background: var(--rv-primary-pale); color: var(--rv-ink); }

/* ── 2026-09-11 dark/light pass ──────────────────────────────────────────
   revideo.css's `.rv-scope a { color: var(--rv-primary) }` (0,1,1) out-
   specifies the single-class button rules in main.css / checkout pages
   (0,1,0), so white-on-violet CTAs rendered violet-on-violet: the tool
   pages' "See plans" outline button and the checkout Try-again / Go-home
   buttons. Pin the intended colours at matching specificity. */
.rv-scope .btn-outline-w, .rv-scope .btn-outline-w:hover,
.rv-scope .btn-try-again, .rv-scope .btn-try-again:hover,
.rv-scope .cta-box .btn-go-home, .rv-scope .cta-box .btn-go-home:hover { color: #fff; }
.rv-scope .btn-white, .rv-scope .btn-white:hover { color: var(--rv-primary-deep); }
[data-theme="dark"] .rv-scope .btn-white, [data-theme="dark"] .rv-scope .btn-white:hover { color: #5850ec; }
/* tool pages' info note (#4338ca indigo hard-coded) */
[data-theme="dark"] .video-note { color: var(--rv-primary) !important; }
/* CTA box: in dark the flat --rv-primary (#8b7cf0) is too light under white
   copy (2.4:1). Use the brand gradient, same as the hero buttons. */
[data-theme="dark"] .rv-scope .cta-box { background: linear-gradient(120deg, #5850ec, #8b5cf6); }
[data-theme="dark"] .rv-scope .cta-box p { color: rgba(255, 255, 255, .9); }
/* old results page: the "New Search" bar is an <a> — same .rv-scope a specificity issue */
.rv-scope .vr-newsearch, .rv-scope .vr-newsearch:hover { color: #fff; }