/*
Theme Name: TechVizier
Theme URI: https://www.techvizier.com
Author: TechVizier
Author URI: https://www.techvizier.com
Description: Editorial AI tools review theme — ink + acid lime palette, score badges, affiliate-optimised cards, Top-3 leaderboard hero. Hands-on tested. No PR. No fluff.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: techvizier
Tags: blog, news, editorial, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready
*/

/* ============================================================
   TechVizier — design tokens (mirrors colors_and_type.css)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --tv-lime-100: #E9F8B8; --tv-lime-300: #CEF265;
  --tv-lime-400: #C6F24B; --tv-lime-500: #B5E22F;
  --tv-lime-700: #6F8E18; --tv-lime-800: #4F660F;
  --tv-cyan-300: #67E8F9;  --tv-cyan-500: #06B6D4;  --tv-cyan-700: #0E7490;
  --tv-amber-300: #FCD34D; --tv-amber-500: #F59E0B; --tv-amber-700: #B45309;
  --tv-magenta-300: #F9A8D4; --tv-magenta-500: #EC4899; --tv-magenta-700: #BE185D;
  --tv-red-100: #FEE2E2; --tv-red-500: #EF4444; --tv-red-700: #B91C1C;
  --tv-emerald-500: #10B981;
  --tv-ink: #0F0F12; --tv-fg-1:#0F0F12; --tv-fg-2:#44444A; --tv-fg-3:#6E6E76; --tv-fg-4:#9A9AA2;
  --tv-bg-1:#FFFFFF; --tv-bg-2:#FAFAF9; --tv-bg-3:#F4F4F2; --tv-bg-inverse:#0F0F12;
  --tv-border:#E7E5E4; --tv-border-strong:#D6D3D1;
  --tv-accent: var(--tv-lime-400); --tv-accent-hover: var(--tv-lime-500);
  --tv-font-display: 'Fraunces', Georgia, serif;
  --tv-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --tv-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --tv-content-max: 1200px; --tv-reading-max: 720px;
  --tv-radius-sm:6px; --tv-radius-md:10px; --tv-radius-lg:12px; --tv-radius-xl:16px;
  --tv-ease: cubic-bezier(0.2,0,0,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--tv-font-sans);
  font-size: 16px; line-height: 1.6;
  color: var(--tv-fg-1); background: var(--tv-bg-1);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tv-fg-1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color 150ms var(--tv-ease); }
a:hover { color: var(--tv-lime-700); text-decoration-thickness: 2px; }

h1, h2, h3 { font-family: var(--tv-font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--tv-fg-1); margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(40px, 5vw, 64px); }
h2 { font-size: clamp(30px, 3.5vw, 44px); }
h3 { font-size: clamp(20px, 2vw, 24px); }
h4, h5, h6 { font-family: var(--tv-font-sans); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.5em; }
p { margin: 0 0 1em; }
code, pre { font-family: var(--tv-font-mono); background: var(--tv-bg-3); border-radius: 6px; }
code { padding: 2px 6px; font-size: 0.92em; }
pre { padding: 16px; overflow-x: auto; }
blockquote { border-left: 4px solid var(--tv-lime-400); padding: 4px 0 4px 20px; margin: 24px 0; font-family: var(--tv-font-display); font-size: 22px; font-style: italic; color: var(--tv-fg-1); }

.tv-container { max-width: var(--tv-content-max); margin: 0 auto; padding: 0 24px; }
.tv-reading { max-width: var(--tv-reading-max); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.tv-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--tv-border); }
.tv-header__inner { display: flex; align-items: center; gap: 32px; padding: 16px 24px; max-width: var(--tv-content-max); margin: 0 auto; }
.tv-logo { font-family: var(--tv-font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; color: var(--tv-ink); text-decoration: none; display: inline-flex; align-items: baseline; gap: 2px; }
.tv-logo:hover { color: var(--tv-ink); text-decoration: none; }
.tv-logo__dot { width: 9px; height: 9px; background: var(--tv-lime-400); border: 1.5px solid var(--tv-ink); border-radius: 50%; display: inline-block; margin-bottom: 4px; }
.tv-nav { display: flex; gap: 22px; flex: 1; flex-wrap: wrap; }
.tv-nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.tv-nav a { font-size: 14px; color: var(--tv-fg-1); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.tv-nav .current-menu-item > a, .tv-nav a:hover { border-bottom-color: var(--tv-lime-400); }
.tv-header__cta { background: var(--tv-lime-400); color: var(--tv-ink); border: 0; border-radius: 10px; font-size: 14px; font-weight: 700; padding: 9px 16px; cursor: pointer; text-decoration: none; transition: background 150ms var(--tv-ease); }
.tv-header__cta:hover { background: var(--tv-lime-500); color: var(--tv-ink); text-decoration: none; }

/* ---------- Hero (homepage) ---------- */
.tv-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 80px 24px 56px; max-width: var(--tv-content-max); margin: 0 auto; }
.tv-hero__pill { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tv-ink); background: var(--tv-lime-400); padding: 5px 10px; border-radius: 9999px; margin-bottom: 24px; }
.tv-hero h1 { margin: 0; max-width: 720px; line-height: 1.05; }
.tv-hero h1 .hl { background: linear-gradient(180deg, transparent 62%, var(--tv-lime-400) 62%); padding: 0 4px; }
.tv-hero__lede { font-size: 20px; line-height: 1.55; color: var(--tv-fg-2); max-width: 560px; margin: 24px 0 0; }
.tv-hero__ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.tv-hero__trust { display: flex; gap: 20px; margin-top: 32px; color: var(--tv-fg-3); font-size: 14px; flex-wrap: wrap; align-items: center; }
.tv-hero__trust .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tv-emerald-500); display: inline-block; margin-right: 6px; }
.tv-hero__trust .sep { color: var(--tv-fg-4); }

/* Top-3 leaderboard */
.tv-top3 { background: var(--tv-ink); color: #fff; border-radius: 20px; padding: 20px 22px; box-shadow: 0 30px 80px rgba(15,15,18,0.18); }
.tv-top3__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.tv-top3__eye { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tv-lime-400); }
.tv-top3__sub { font-size: 12px; color: rgba(255,255,255,0.5); }
.tv-top3__row { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; }
.tv-top3__rank { font-family: var(--tv-font-display); font-size: 22px; font-weight: 700; color: rgba(255,255,255,0.35); text-align: center; }
.tv-top3__name { font-size: 15px; font-weight: 600; color: #fff; }
.tv-top3__meta { font-size: 12px; color: var(--tv-lime-400); margin-top: 2px; }
.tv-top3__cta { width: 100%; margin-top: 16px; background: var(--tv-lime-400); color: var(--tv-ink); border: 0; border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; display: block; text-align: center; }
.tv-top3__cta:hover { color: var(--tv-ink); text-decoration: none; background: var(--tv-lime-500); }
.tv-top3__disclosure { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 10px; text-align: center; }

/* ---------- Buttons ---------- */
.tv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-size: 15px; font-weight: 700; padding: 12px 20px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: all 150ms var(--tv-ease); }
.tv-btn--primary { background: var(--tv-lime-400); color: var(--tv-ink); }
.tv-btn--primary:hover { background: var(--tv-lime-500); color: var(--tv-ink); text-decoration: none; }
.tv-btn--ink { background: var(--tv-ink); color: #fff; }
.tv-btn--ink:hover { background: #1F1F23; color: #fff; text-decoration: none; }
.tv-btn--secondary { background: transparent; color: var(--tv-fg-1); border-color: var(--tv-fg-1); font-weight: 500; }
.tv-btn--secondary:hover { background: var(--tv-ink); color: #fff; text-decoration: none; }

/* ---------- Badges & scores ---------- */
.tv-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border-radius: 9999px; color: var(--tv-ink); }
.tv-badge--pick    { background: var(--tv-cyan-300);    color: var(--tv-cyan-700); }
.tv-badge--value   { background: var(--tv-amber-300);   color: var(--tv-amber-700); }
.tv-badge--new     { background: var(--tv-magenta-300); color: var(--tv-magenta-700); }
.tv-badge--free    { background: var(--tv-lime-300);    color: var(--tv-lime-800); }
.tv-badge--limited { background: var(--tv-red-100);     color: var(--tv-red-700); }

.tv-score { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--tv-font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; padding: 4px 10px; border-radius: 10px; background: var(--tv-ink); color: #fff; font-variant-numeric: tabular-nums; }
.tv-score__max { font-size: 11px; opacity: 0.6; }
.tv-score--great { background: var(--tv-emerald-500); }
.tv-score--good  { background: var(--tv-lime-500); color: var(--tv-ink); }
.tv-score--ok    { background: var(--tv-amber-500); }
.tv-score--bad   { background: var(--tv-red-500); }

/* ---------- Article card ---------- */
.tv-grid-section { border-top: 1px solid var(--tv-border); padding: 96px 0; }
.tv-grid-section__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; }
.tv-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tv-cyan-700); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.tv-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }

.tv-card { border: 1px solid var(--tv-border); border-radius: 14px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: box-shadow 250ms var(--tv-ease), transform 250ms var(--tv-ease); }
.tv-card:hover { box-shadow: 0 12px 32px rgba(15,15,18,0.08); transform: translateY(-2px); }
.tv-card__thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, #0F0F12, #1F1F23); position: relative; overflow: hidden; display: block; }
.tv-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--tv-ease); }
.tv-card:hover .tv-card__thumb img { transform: scale(1.04); }
.tv-card__badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 1; }
.tv-card__score { position: absolute; top: 10px; right: 10px; z-index: 1; }
.tv-card__body { padding: 14px 16px 4px; display: flex; flex-direction: column; gap: 6px; }
.tv-card__meta { font-size: 12px; color: var(--tv-fg-3); }
.tv-card__meta .cat { color: var(--tv-lime-700); font-weight: 700; }
.tv-card__meta .sep { margin: 0 6px; }
.tv-card__title { font-family: var(--tv-font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--tv-fg-1); margin: 0; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tv-card__title a { color: inherit; text-decoration: none; }
.tv-card__title a:hover { color: var(--tv-lime-700); }
.tv-card__excerpt { font-size: 14px; line-height: 1.5; color: var(--tv-fg-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tv-card__foot { padding: 10px 16px 14px; margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tv-card__read { font-size: 13px; color: var(--tv-fg-1); font-weight: 600; text-decoration: none; }
.tv-card__try { background: var(--tv-bg-3); color: var(--tv-ink); border: 0; border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; cursor: pointer; text-decoration: none; transition: background 150ms var(--tv-ease); }
.tv-card:hover .tv-card__try, .tv-card__try:hover { background: var(--tv-lime-400); color: var(--tv-ink); text-decoration: none; }

/* ---------- Category grid ---------- */
.tv-cats-section { background: var(--tv-bg-2); border-top: 1px solid var(--tv-border); padding: 96px 0; }
.tv-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 40px; }
.tv-cat { background: #fff; border: 1px solid var(--tv-border); border-radius: 12px; padding: 16px 18px; text-decoration: none; color: var(--tv-fg-1); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; transition: all 150ms var(--tv-ease); }
.tv-cat:hover { border-color: var(--tv-ink); color: var(--tv-fg-1); text-decoration: none; }
.tv-cat .name { font-weight: 500; }
.tv-cat .count { font-size: 12px; color: var(--tv-fg-3); }
.tv-cat--hot { background: var(--tv-lime-400); border-color: var(--tv-lime-500); }
.tv-cat--hot:hover { background: var(--tv-lime-500); }
.tv-cat--hot .name { font-weight: 700; }
.tv-cat--hot .count { color: var(--tv-lime-800); font-weight: 700; }

/* ---------- Newsletter ---------- */
.tv-newsletter { background: var(--tv-bg-inverse); color: #fff; position: relative; overflow: hidden; padding: 96px 24px; }
.tv-newsletter::before { content: ""; position: absolute; top: -120px; right: -80px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(198,242,75,0.18), transparent 60%); pointer-events: none; }
.tv-newsletter__inner { max-width: 720px; margin: 0 auto; text-align: center; position: relative; }
.tv-newsletter h2 { font-size: clamp(36px, 5vw, 56px); margin: 0; line-height: 1.05; color: #fff; }
.tv-newsletter p { font-size: 18px; color: rgba(255,255,255,0.7); line-height: 1.55; margin: 20px auto 0; max-width: 540px; }
.tv-newsletter__form { margin-top: 32px; display: flex; gap: 8px; max-width: 480px; margin-left: auto; margin-right: auto; }
.tv-newsletter__form input { flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; padding: 13px 14px; font-family: inherit; font-size: 15px; color: #fff; outline: none; }
.tv-newsletter__form input::placeholder { color: rgba(255,255,255,0.4); }
.tv-newsletter__form button { background: var(--tv-lime-400); color: var(--tv-ink); border: 0; border-radius: 10px; font-family: inherit; font-size: 15px; font-weight: 700; padding: 0 22px; cursor: pointer; }
.tv-newsletter__fine { margin-top: 16px; font-size: 13px; color: rgba(255,255,255,0.45); }

/* ---------- Footer ---------- */
.tv-footer { background: var(--tv-bg-inverse); color: rgba(255,255,255,0.6); border-top: 1px solid rgba(255,255,255,0.08); padding: 48px 24px 32px; }
.tv-footer__inner { max-width: var(--tv-content-max); margin: 0 auto; }
.tv-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.tv-footer__logo { font-family: var(--tv-font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; color: #fff; display: inline-flex; align-items: baseline; gap: 2px; }
.tv-footer__logo .tv-logo__dot { border-color: #fff; }
.tv-footer__about { font-size: 14px; line-height: 1.6; margin-top: 12px; max-width: 320px; }
.tv-footer__col h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin: 0 0 14px; }
.tv-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tv-footer__col a { color: rgba(255,255,255,0.6); font-size: 14px; text-decoration: none; }
.tv-footer__col a:hover { color: var(--tv-lime-400); }
.tv-footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; display: flex; justify-content: space-between; font-size: 13px; flex-wrap: wrap; gap: 12px; }

/* ---------- Sticky affiliate bar ---------- */
.tv-sticky { position: fixed; bottom: 16px; left: 16px; right: 16px; max-width: 760px; margin: 0 auto; background: var(--tv-ink); color: #fff; border-radius: 14px; padding: 12px 14px 12px 18px; box-shadow: 0 20px 60px rgba(15,15,18,0.35); display: none; align-items: center; gap: 14px; z-index: 60; animation: tvSlideUp 300ms var(--tv-ease); }
.tv-sticky.is-visible { display: flex; }
.tv-sticky__tag { background: var(--tv-lime-400); color: var(--tv-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; }
.tv-sticky__body { flex: 1; min-width: 0; }
.tv-sticky__title { font-size: 14px; font-weight: 600; }
.tv-sticky__sub { font-size: 12px; color: rgba(255,255,255,0.6); }
.tv-sticky__cta { background: var(--tv-lime-400); color: var(--tv-ink); border: 0; border-radius: 9px; padding: 10px 16px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; }
.tv-sticky__cta:hover { color: var(--tv-ink); text-decoration: none; background: var(--tv-lime-500); }
.tv-sticky__close { background: transparent; border: 0; color: rgba(255,255,255,0.5); font-size: 18px; cursor: pointer; padding: 4px; line-height: 1; }
@keyframes tvSlideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------- Single article (review/post) ---------- */
.tv-article { padding: 64px 0; }
.tv-article__hat { max-width: var(--tv-reading-max); margin: 0 auto 24px; padding: 0 24px; }
.tv-article__cat { font-size: 12px; color: var(--tv-lime-700); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tv-article h1 { margin: 12px 0 16px; }
.tv-article__meta { font-size: 14px; color: var(--tv-fg-3); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.tv-article__featured { max-width: var(--tv-content-max); margin: 0 auto 48px; padding: 0 24px; }
.tv-article__featured img { border-radius: 16px; }
.tv-article__body { max-width: var(--tv-reading-max); margin: 0 auto; padding: 0 24px; font-size: 18px; line-height: 1.7; }
.tv-article__body h2 { font-size: 32px; margin-top: 1.5em; }
.tv-article__body h3 { font-size: 22px; margin-top: 1.5em; }
.tv-article__body img { margin: 24px 0; border-radius: 12px; }

/* Review meta box (in-article affiliate card) */
.tv-review-box { max-width: var(--tv-reading-max); margin: 32px auto; padding: 0 24px; }
.tv-review-box__inner { background: var(--tv-bg-2); border: 1px solid var(--tv-border); border-radius: 16px; padding: 24px; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; }
.tv-review-box__score .tv-score { font-size: 32px; padding: 6px 14px; }
.tv-review-box__name { font-family: var(--tv-font-display); font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.tv-review-box__verdict { font-size: 14px; color: var(--tv-fg-2); margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .tv-hero { grid-template-columns: 1fr; gap: 40px; padding: 56px 24px 40px; }
  .tv-footer__top { grid-template-columns: 1fr 1fr; }
  .tv-grid-section, .tv-cats-section { padding: 64px 0; }
  .tv-review-box__inner { grid-template-columns: 1fr; text-align: left; }
}
@media (max-width: 540px) {
  .tv-header__inner { gap: 16px; }
  .tv-nav { display: none; }
  .tv-footer__top { grid-template-columns: 1fr; }
  .tv-sticky { padding: 10px 12px; gap: 10px; }
  .tv-sticky__tag { display: none; }
}

/* WP core compat */
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin: 24px auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--tv-fg-3); margin-top: 8px; text-align: center; }
.screen-reader-text { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }