/* Top VPN Ratings — theme styles. Premium SaaS-style.
   Plugin component styles live in the plugin's frontend.css. */

:root {
  --tvr-navy: #071B33;
  --tvr-navy-2:#0B2547;
  --tvr-blue: #2563EB;
  --tvr-cyan: #06B6D4;
  --tvr-bg:   #F5F7FB;
  --tvr-card: #FFFFFF;
  --tvr-text: #111827;
  --tvr-muted:#4B5563;
  --tvr-border:#E5E7EB;
  --tvr-success:#16A34A;
  --tvr-danger: #DC2626;
  --tvr-radius: 14px;
  --tvr-radius-sm: 10px;
  --tvr-shadow: 0 1px 2px rgba(7,27,51,.06), 0 8px 24px rgba(7,27,51,.06);
  --tvr-shadow-lg: 0 10px 30px rgba(7,27,51,.10);
  --tvr-content-w: 1140px;
  --tvr-narrow-w: 780px;
}

/* ---------- Reset-ish ---------- */
* { box-sizing: border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:16px; line-height:1.6;
  color:var(--tvr-text); background:var(--tvr-bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img, svg { max-width:100%; height:auto; }
a { color:var(--tvr-blue); text-decoration:none; }
a:hover { text-decoration:underline; }
.tvr-logo-link,
.tvr-summary__logo-link { display:inline-flex; align-items:center; justify-content:center; max-width:100%; border-radius:12px; }
.tvr-logo-link:hover,
.tvr-summary__logo-link:hover { text-decoration:none; transform:translateY(-1px); }
.tvr-logo-link:focus-visible,
.tvr-summary__logo-link:focus-visible { outline:3px solid rgba(37,99,235,.45); outline-offset:4px; }
.tvr-container { width:100%; max-width:var(--tvr-content-w); padding:0 1.25rem; margin-inline:auto; }
body.is-comparison .tvr-page__content.tvr-container { max-width:1300px; }
.tvr-skiplink { position:absolute; left:-9999px; }
.tvr-skiplink:focus { left:1rem; top:1rem; background:#fff; padding:.5rem 1rem; border-radius:8px; box-shadow:var(--tvr-shadow); z-index:1000; }

/* ---------- Header / nav ---------- */
.tvr-site-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--tvr-border); }
.tvr-site-header__inner { display:flex; align-items:center; gap:1.25rem; padding:.85rem 1.25rem; }
.tvr-logo { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--tvr-navy); font-weight:800; }
.tvr-logo__name { font-size:1.05rem; letter-spacing:-.01em; }
.tvr-logo__tag { display:none; }
.tvr-brand-mark { flex:0 0 auto; }
.tvr-nav { display:flex; align-items:center; gap:1.5rem; margin-left:auto; }
.tvr-nav__list { list-style:none; padding:0; margin:0; display:flex; gap:1.25rem; align-items:center; }
.tvr-nav__list a { color:var(--tvr-text); font-weight:500; text-decoration:none; padding:.4rem 0; }
.tvr-nav__list a:hover { color:var(--tvr-blue); }
.tvr-nav__cta { margin-left:.5rem; }
.tvr-nav-toggle { display:none; background:none; border:0; padding:.4rem; cursor:pointer; }
.tvr-nav-toggle span { display:block; width:22px; height:2px; background:var(--tvr-navy); margin:4px 0; border-radius:2px; }
.tvr-language { position:relative; margin-left:.25rem; }
.tvr-language__button {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  min-height:34px;
  padding:.4rem .65rem;
  border:1px solid var(--tvr-border);
  border-radius:999px;
  background:#fff;
  color:var(--tvr-navy);
  font-weight:700;
  font-size:.82rem;
  cursor:pointer;
}
.tvr-language__button::after { content:""; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--tvr-muted); }
.tvr-language.is-open .tvr-language__button {
  border-color:rgba(37,99,235,.45);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.tvr-language.is-open .tvr-language__button::after {
  transform:rotate(180deg);
}
.tvr-language__menu {
  position:absolute;
  right:0;
  top:calc(100% + .45rem);
  display:none;
  width:min(300px, calc(100vw - 2rem));
  max-height:420px;
  overflow:auto;
  padding:.45rem;
  background:#fff;
  border:1px solid var(--tvr-border);
  border-radius:12px;
  box-shadow:var(--tvr-shadow-lg);
  z-index:80;
}
.tvr-language.is-open .tvr-language__menu { display:grid; grid-template-columns:1fr 1fr; gap:.2rem; }
.tvr-language__menu a {
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.5rem .55rem;
  border-radius:8px;
  color:var(--tvr-text);
  font-size:.88rem;
  font-weight:600;
  text-decoration:none;
}
.tvr-language__menu a:hover { background:var(--tvr-bg); color:var(--tvr-blue); text-decoration:none; }

@media (max-width: 880px) {
  .tvr-nav-toggle { display:block; margin-left:auto; }
  .tvr-nav { position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--tvr-border); padding:1rem 1.25rem; flex-direction:column; align-items:stretch; gap:.75rem; display:none; }
  .tvr-nav.is-open { display:flex; }
  .tvr-nav__list { flex-direction:column; align-items:stretch; gap:.4rem; }
  .tvr-nav__list a { padding:.6rem .25rem; border-bottom:1px solid var(--tvr-border); }
  .tvr-nav__cta { margin-left:0; }
  .tvr-language { margin-left:.5rem; }
  .tvr-language__menu { right:-2.5rem; }
}

/* ---------- Main / typography ---------- */
.tvr-main { padding:1.5rem 0 4rem; }
.tvr-page-title { font-size:clamp(1.8rem, 3.5vw, 2.6rem); margin:.4rem 0 1rem; color:var(--tvr-navy); letter-spacing:-.01em; }
.tvr-eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; color:var(--tvr-blue); margin:0; font-weight:700; }
/* Direct children only — we don't want to clobber heading colors inside
   our custom hero / cta-banner / section / card components. */
.tvr-prose > h1, .tvr-prose > h2, .tvr-prose > h3, .tvr-prose > h4 { color:var(--tvr-navy); letter-spacing:-.005em; }
.tvr-prose > h2 { font-size:clamp(1.4rem, 2.2vw, 1.85rem); margin-top:2rem; }
.tvr-prose > h3 { font-size:1.25rem; margin-top:1.5rem; }
.tvr-prose > p, .tvr-prose > ul, .tvr-prose > ol { font-size:1.02rem; }
.tvr-prose > ul, .tvr-prose > ol { padding-left:1.4rem; }
.tvr-prose > blockquote { border-left:4px solid var(--tvr-blue); margin:1rem 0; padding:.5rem 1rem; background:#fff; border-radius:0 var(--tvr-radius-sm) var(--tvr-radius-sm) 0; box-shadow:var(--tvr-shadow); }
.tvr-prose img { border-radius:var(--tvr-radius-sm); }

.tvr-breadcrumbs { font-size:.85rem; color:var(--tvr-muted); margin:1rem 0; }
.tvr-breadcrumbs a { color:var(--tvr-muted); }

/* ---------- Buttons ---------- */
.tvr-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; max-width:100%; padding:.7rem 1.1rem; border-radius:999px; font-weight:600; line-height:1.1; text-align:center; text-decoration:none; transition:all .15s ease; border:1px solid transparent; font-size:.95rem; cursor:pointer; }
.tvr-btn--primary { background:linear-gradient(135deg, var(--tvr-blue), var(--tvr-cyan)); color:#fff; box-shadow:0 6px 18px rgba(37,99,235,.30); }
.tvr-btn--primary:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(37,99,235,.40); color:#fff; text-decoration:none; }
.tvr-btn--ghost { background:transparent; color:var(--tvr-blue); border-color:var(--tvr-blue); }
.tvr-btn--ghost:hover { background:var(--tvr-blue); color:#fff; text-decoration:none; }
.tvr-btn--lg { padding:.95rem 1.6rem; font-size:1.05rem; }
.tvr-btn--small { padding:.45rem .8rem; font-size:.85rem; }
.tvr-btn--block { width:100%; }

/* ---------- Hero (homepage) ---------- */
.tvr-hero {
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(rgba(6,19,39,.88), rgba(6,19,39,.92)),
             url('/wp-content/uploads/vpn-logos/nordvpn.png') center 18% / 520px auto no-repeat,
             radial-gradient(1200px 600px at 80% -10%, rgba(6,182,212,.20), transparent 60%),
             radial-gradient(900px 500px at -10% 0%, rgba(37,99,235,.18), transparent 60%),
             linear-gradient(180deg, #061327 0%, var(--tvr-navy) 70%);
  color:#fff; padding:5rem 0 6rem; margin-top:-1.5rem; margin-bottom:2rem;
}
.tvr-hero::after { content:""; position:absolute; inset:auto 0 -1px 0; height:80px; background:linear-gradient(180deg, transparent, var(--tvr-bg)); z-index:1; }
.tvr-hero__inner { position:relative; z-index:2; text-align:center; }
.tvr-hero__eyebrow { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .75rem; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); font-size:.85rem; color:#cfe6ff; }
.tvr-hero__title { font-size:clamp(2rem, 5vw, 3.4rem); margin:1rem 0 .8rem; line-height:1.1; letter-spacing:-.02em; color:#fff; }
.tvr-hero__title em { background:linear-gradient(135deg, #7DD3FC, #60A5FA); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:normal; }
.tvr-hero__sub { color:#dbe7f5; font-size:1.1rem; max-width:720px; margin:0 auto 1.6rem; }
.tvr-hero__ctas { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.tvr-hero__trust { display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; color:#a5bcd6; font-size:.9rem; }
.tvr-hero__trust span { display:inline-flex; align-items:center; gap:.4rem; }

/* ---------- Section utility ---------- */
.tvr-section { padding:2.5rem 0; }
.tvr-section--alt { background:#fff; border-top:1px solid var(--tvr-border); border-bottom:1px solid var(--tvr-border); }
.tvr-section__head { text-align:center; margin-bottom:1.5rem; }
.tvr-section__head h2 { font-size:clamp(1.5rem, 2.8vw, 2.2rem); margin:.2rem 0 .4rem; color:var(--tvr-navy); }
.tvr-section__head p { color:var(--tvr-muted); max-width:680px; margin:.4rem auto 0; }

/* ---------- Trust strip ---------- */
.tvr-trust-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; }
@media (max-width:780px) { .tvr-trust-grid { grid-template-columns:repeat(2, 1fr); } }
.tvr-trust-card { background:#fff; border:1px solid var(--tvr-border); border-radius:var(--tvr-radius); padding:1.25rem; text-align:center; box-shadow:var(--tvr-shadow); }
.tvr-trust-card__icon { width:48px; height:48px; margin:0 auto .6rem; display:flex; align-items:center; justify-content:center; border-radius:14px; background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(6,182,212,.12)); color:var(--tvr-blue); font-size:1.6rem; }
.tvr-trust-card h3 { margin:.2rem 0; font-size:1.05rem; color:var(--tvr-navy); }
.tvr-trust-card p { margin:0; color:var(--tvr-muted); font-size:.92rem; }

/* ---------- FAQ ---------- */
.tvr-faq { display:grid; gap:.6rem; max-width:820px; margin:0 auto; }
.tvr-faq details { background:#fff; border:1px solid var(--tvr-border); border-radius:var(--tvr-radius); padding:1rem 1.25rem; box-shadow:var(--tvr-shadow); }
.tvr-faq details[open] { border-color:var(--tvr-blue); }
.tvr-faq summary { cursor:pointer; font-weight:600; color:var(--tvr-navy); list-style:none; }
.tvr-faq summary::-webkit-details-marker { display:none; }
.tvr-faq summary::after { content:"+"; float:right; font-weight:700; color:var(--tvr-blue); }
.tvr-faq details[open] summary::after { content:"–"; }
.tvr-faq p { margin:.6rem 0 0; color:var(--tvr-text); }

/* ---------- Final CTA ---------- */
.tvr-cta-banner { background:linear-gradient(135deg, var(--tvr-navy), var(--tvr-blue)); color:#fff; border-radius:var(--tvr-radius); padding:2.25rem 1.5rem; text-align:center; box-shadow:var(--tvr-shadow-lg); }
.tvr-cta-banner h2 { color:#fff; margin:0 0 .6rem; font-size:clamp(1.4rem, 2.4vw, 1.9rem); }
.tvr-cta-banner p { margin:0 0 1rem; color:#cfe6ff; }

/* ---------- Categories grid (homepage) ---------- */
.tvr-cats { display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
@media (max-width:880px) { .tvr-cats { grid-template-columns:1fr; } }
.tvr-cats__item { background:#fff; border:1px solid var(--tvr-border); border-radius:var(--tvr-radius); padding:1.5rem 1.4rem; box-shadow:var(--tvr-shadow); text-decoration:none; color:var(--tvr-text); transition:all .2s; display:block; }
.tvr-cats__item:hover { transform:translateY(-2px); border-color:var(--tvr-blue); text-decoration:none; }
.tvr-cats__item h3 { margin:.4rem 0; color:var(--tvr-navy); }
.tvr-cats__item p { margin:0 0 .8rem; color:var(--tvr-muted); }
.tvr-cats__icon { font-size:1.6rem; }

/* ---------- Conversion content blocks ---------- */
.tvr-mini-hero {
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, #061327, #0B2547);
  color:#fff;
  border-radius:var(--tvr-radius);
  padding:2.25rem 1.5rem;
  margin:0 0 1.5rem;
  box-shadow:var(--tvr-shadow-lg);
}
.tvr-mini-hero h2,
.tvr-mini-hero h3 { color:#fff; margin:.2rem 0 .6rem; }
.tvr-mini-hero p { color:#dbe7f5; max-width:760px; margin:.4rem 0 1rem; }
.tvr-mini-hero__actions { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1rem; }
.tvr-logo-wall {
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:.75rem;
  margin:1.25rem 0 1.75rem;
}
.tvr-logo-wall__item {
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--tvr-border);
  border-radius:var(--tvr-radius-sm);
  box-shadow:var(--tvr-shadow);
  padding:.75rem;
}
.tvr-logo-wall__item img {
  display:block;
  width:100%;
  max-width:150px;
  height:52px;
  object-fit:contain;
}
.tvr-proof-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
  margin:1.5rem 0;
}
.tvr-proof {
  background:#fff;
  border:1px solid var(--tvr-border);
  border-radius:var(--tvr-radius);
  box-shadow:var(--tvr-shadow);
  padding:1.2rem;
}
.tvr-proof strong {
  display:block;
  color:var(--tvr-navy);
  font-size:1.05rem;
  margin-bottom:.25rem;
}
.tvr-proof p { margin:0; color:var(--tvr-muted); }
.tvr-decision {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
  margin:1.5rem 0;
}
.tvr-decision__item {
  background:#fff;
  border:1px solid var(--tvr-border);
  border-radius:var(--tvr-radius);
  padding:1.25rem;
  box-shadow:var(--tvr-shadow);
}
.tvr-decision__item h3 { margin:.15rem 0 .45rem; color:var(--tvr-navy); }
.tvr-decision__item p { margin:0 0 .85rem; color:var(--tvr-muted); }
.tvr-callout {
  background:#fff;
  border:1px solid var(--tvr-border);
  border-left:5px solid var(--tvr-blue);
  border-radius:var(--tvr-radius-sm);
  padding:1.1rem 1.25rem;
  margin:1.25rem 0;
  box-shadow:var(--tvr-shadow);
}
.tvr-callout strong { color:var(--tvr-navy); }
.tvr-steps {
  counter-reset:tvr-step;
  display:grid;
  gap:.8rem;
  margin:1.25rem 0;
  padding:0;
  list-style:none;
}
.tvr-steps li {
  counter-increment:tvr-step;
  display:grid;
  grid-template-columns:42px 1fr;
  gap:.85rem;
  align-items:start;
  background:#fff;
  border:1px solid var(--tvr-border);
  border-radius:var(--tvr-radius-sm);
  padding:1rem;
  box-shadow:var(--tvr-shadow);
}
.tvr-steps li::before {
  content:counter(tvr-step);
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#fff;
  font-weight:800;
  background:linear-gradient(135deg, var(--tvr-blue), var(--tvr-cyan));
}
.tvr-steps strong { display:block; color:var(--tvr-navy); margin-bottom:.15rem; }
.tvr-steps span { color:var(--tvr-muted); }

@media (max-width:880px) {
  .tvr-logo-wall { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .tvr-proof-grid,
  .tvr-decision { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .tvr-mini-hero { padding:1.5rem 1rem; }
  .tvr-mini-hero__actions .tvr-btn { width:100%; }
  .tvr-logo-wall__item { min-height:74px; }
  .tvr-logo-wall__item img { height:44px; }
}

/* ---------- Review layout ---------- */
.tvr-review__hero { background:linear-gradient(180deg, #061327, var(--tvr-navy)); color:#fff; padding:2rem 0 3rem; margin-top:-1.5rem; }
.tvr-review__hero .tvr-breadcrumbs, .tvr-review__hero .tvr-breadcrumbs a { color:#a5bcd6; }
.tvr-review__head { display:grid; grid-template-columns:auto 1fr auto; gap:1.25rem; align-items:center; margin-top:1rem; }
.tvr-review__head-logo .tvr-vpn-logo {
  width:184px; height:72px; object-fit:contain;
  background:#fff; border-radius:14px; padding:10px 14px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.tvr-review__title { color:#fff; margin:.15rem 0; font-size:clamp(1.7rem, 3.4vw, 2.4rem); }
.tvr-review__bestfor { margin:0; color:#cfe6ff; }
.tvr-review__head-score { display:flex; align-items:center; gap:.5rem; flex-direction:column; align-items:flex-end; }
.tvr-review__lede { color:#cfe6ff; max-width:780px; margin-top:1rem; font-size:1.05rem; }
.tvr-review__hero-cta { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.4rem; }
@media (max-width:760px) { .tvr-review__head { grid-template-columns:auto 1fr; } .tvr-review__head-score { grid-column:1/-1; align-items:flex-start; } }
@media (max-width:520px) {
  .tvr-review__head { grid-template-columns:1fr; gap:.9rem; }
  .tvr-review__head-logo { display:flex; }
  .tvr-review__head-logo .tvr-vpn-logo { width:min(190px, 100%); }
  .tvr-review__hero-cta { align-items:stretch; }
  .tvr-review__hero-cta .tvr-btn { width:100%; white-space:normal; }
}

.tvr-review__layout { display:grid; grid-template-columns: minmax(0,1fr) 360px; gap:2.5rem; margin-top:2rem; }
@media (max-width:980px) { .tvr-review__layout { grid-template-columns:1fr; gap:1.5rem; } }
.tvr-review__aside { display:grid; gap:1rem; align-content:start; position:sticky; top:90px; align-self:start; }
@media (max-width:980px) { .tvr-review__aside { position:static; } }
.tvr-review__main { min-width:0; }

/* ---------- Posts list ---------- */
.tvr-post-list { display:grid; gap:1rem; }
.tvr-post-card { background:#fff; border:1px solid var(--tvr-border); border-radius:var(--tvr-radius); padding:1.1rem 1.25rem; box-shadow:var(--tvr-shadow); }
.tvr-post-card__title { margin:0 0 .25rem; font-size:1.2rem; }
.tvr-post-card__meta { color:var(--tvr-muted); font-size:.85rem; margin:0 0 .5rem; }

/* ---------- Footer ---------- */
.tvr-site-footer { background:var(--tvr-navy); color:#cfe6ff; margin-top:3rem; }
.tvr-site-footer .tvr-logo, .tvr-site-footer .tvr-logo__name { color:#fff; }
.tvr-site-footer__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:1.5rem; padding:2.5rem 1.25rem; }
@media (max-width:780px) { .tvr-site-footer__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .tvr-site-footer__grid { grid-template-columns:1fr; } }
.tvr-site-footer h4 { color:#fff; margin:.2rem 0 .8rem; font-size:1rem; }
.tvr-site-footer__nav ul { list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.tvr-site-footer__nav a { color:#cfe6ff; }
.tvr-site-footer__tag { color:#cfe6ff; margin:.4rem 0 .8rem; }
.tvr-site-footer__disclaimer { color:#8aa6c4; font-size:.85rem; }
.tvr-site-footer__bottom { border-top:1px solid rgba(255,255,255,.08); padding:1rem 0; font-size:.85rem; color:#8aa6c4; }
.tvr-site-footer__bottom p { margin:0; text-align:center; }