/**
 * Review page redesign — layout/structure adopted from the approved Stitch
 * concept, using the site's existing font stack and color tokens (no new
 * fonts, no new colors). Scoped to body.single-vpn_provider so it never
 * touches the rest of the site.
 */

/* ---------------- Hero: identity + fact layer + verdict reasoning ---------------- */

.rv-dash { background: var(--wp--preset--color--paper); }
/* Horizontal padding deliberately omitted -- .rv-wrap only ever renders
   nested inside .rv-layout now, which already provides the page's left/
   right gutter at every breakpoint. Adding it here too used to just be
   redundant on desktop (40px+40px, barely visible against a 1180px page)
   but was a genuinely large chunk of a 390px mobile screen: 20px+20px on
   each side, 80px total, roughly a fifth of the viewport spent on
   padding alone. Top padding stays -- that's real vertical spacing, not
   part of the gutter-doubling bug. */
.rv-wrap { max-width: 1180px; margin: 0 auto; padding: 32px 0 0; }

.rv-hero {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--sv-shadow-sm, 0 1px 2px rgba(15,23,42,0.04));
}
.rv-hero-info { padding: 32px clamp(20px,3vw,40px); display: flex; flex-direction: column; justify-content: center; }
.rv-badge {
	display: inline-flex; align-self: flex-start;
	font-family: var(--wp--preset--font-family--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
	padding: 5px 10px; border-radius: 4px; margin-bottom: 14px;
}
.rv-badge.rec { background: var(--wp--preset--color--good); color: #fff; }
.rv-badge.worth { background: var(--wp--preset--color--accent); color: #fff; }
.rv-badge.caution { background: var(--wp--preset--color--bad-soft); color: var(--wp--preset--color--bad); }
.rv-hero h1 { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 14px; color: var(--wp--preset--color--ink); }
.rv-hero-summary { font-size: 1.05rem; line-height: 1.55; color: var(--wp--preset--color--ink-soft); margin: 0 0 26px; max-width: 46ch; }
.rv-hero-cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.rv-score-block { display: flex; flex-direction: column; }
.rv-score-num { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.9rem; color: var(--wp--preset--color--ink); line-height: 1; }
.rv-score-num small { font-family: var(--wp--preset--font-family--body); font-weight: 500; font-size: 1.1rem; color: var(--wp--preset--color--ink-faint); }
.rv-score-lbl { font-family: var(--wp--preset--font-family--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--ink-faint); margin-top: 4px; }
.rv-visit-btn {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--wp--preset--color--accent); color: #fff; font-weight: 700; font-size: 0.9rem;
	padding: 13px 22px; border-radius: 9px; text-decoration: none; border: none; cursor: pointer;
	transition: background .15s ease;
}
.rv-visit-btn:hover { background: var(--wp--preset--color--accent-deep); }
.rv-visit-btn:focus-visible { outline: 2px solid var(--wp--preset--color--accent-deep); outline-offset: 2px; }

.rv-hero-media { position: relative; background: var(--wp--preset--color--paper-tint); display: flex; align-items: center; justify-content: center; min-height: 220px; }
.rv-hero-media .rv-logo-mark { max-width: 72%; max-height: 96px; width: auto; height: auto; object-fit: contain; }
.rv-hero-media .rv-avatar { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 2.4rem; }

/* Fact layer */
.rv-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; background: var(--wp--preset--color--paper-tint); border: 1px solid var(--wp--preset--color--line); border-radius: 14px; padding: 16px; margin-top: 20px; }
.rv-fact { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: 10px; padding: 12px 14px; }
.rv-fact-lbl { font-family: var(--wp--preset--font-family--mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wp--preset--color--ink-faint); display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.rv-fact-val { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.15rem; color: var(--wp--preset--color--ink); }
.rv-fact-val.good { color: var(--wp--preset--color--good); }

/* Verdict reasoning */
.rv-reasoning { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 34px 0; }
.rv-reasoning h3 { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--wp--preset--color--line); padding-bottom: 10px; margin: 0 0 16px; color: var(--wp--preset--color--ink); }
.rv-reasoning ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.rv-reasoning li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.94rem; line-height: 1.5; color: var(--wp--preset--color--ink); }
.rv-reasoning li svg { flex-shrink: 0; margin-top: 3px; }
.rv-reasoning .rv-pros svg { color: var(--wp--preset--color--good); }
.rv-reasoning .rv-cons svg { color: var(--wp--preset--color--bad); }
/* sv_cons is often empty (cons for a lot of providers get authored later in
   the article as their own callout box instead) -- when .rv-pros is the
   only thing in the grid, let it use the full width instead of sitting in
   a half-width column next to dead space. */
.rv-reasoning .rv-pros:only-child,
.rv-reasoning .rv-cons:only-child {
	grid-column: 1 / -1;
}
.rv-reasoning .rv-pros:only-child ul,
.rv-reasoning .rv-cons:only-child ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 32px;
}
@media (max-width: 640px) {
	.rv-reasoning .rv-pros:only-child ul,
	.rv-reasoning .rv-cons:only-child ul {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 820px) {
	.rv-hero { grid-template-columns: 1fr; }
	.rv-hero-media { min-height: 140px; order: -1; padding: 20px; }
	.rv-facts { grid-template-columns: repeat(2, 1fr); }
	.rv-reasoning { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------------- Feature breakdown: technical benchmark table ---------------- */

body.single-vpn_provider .rv-feature-section { margin: 40px auto; }
body.single-vpn_provider .rv-feature-section h2 { font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--ink); font-size: 1.1rem; margin: 0 0 12px; }
.rv-feature-table-wrap { border: 1px solid var(--wp--preset--color--line); border-radius: 12px; overflow: hidden; background: var(--wp--preset--color--paper); box-shadow: var(--sv-shadow-sm, 0 1px 2px rgba(15,23,42,0.03)); }
.rv-feature-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rv-feature-table tr:not(.rv-feature-group-row) { border-top: 1px solid var(--wp--preset--color--line); }
.rv-feature-table tr:first-child { border-top: none; }
.rv-feature-table tr.rv-feature-group-row td {
	background: var(--wp--preset--color--paper-tint);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--wp--preset--color--ink-faint);
	padding: 9px 16px;
	border-top: 1px solid var(--wp--preset--color--line);
}
.rv-feature-table tr.rv-feature-group-row:first-child td { border-top: none; }
.rv-feature-table tr:not(.rv-feature-group-row):hover { background: var(--wp--preset--color--paper-tint); }
.rv-feat-lbl {
	display: flex; align-items: center; gap: 8px;
	padding: 12px 16px;
	font-weight: 600; font-size: 0.9rem; color: var(--wp--preset--color--ink);
	vertical-align: top;
}
.rv-feat-lbl svg.icon { opacity: 0.55; flex-shrink: 0; }
.rv-feat-val { padding: 12px 16px; font-size: 0.88rem; color: var(--wp--preset--color--ink-soft); vertical-align: top; }

@media (max-width: 560px) {
	.rv-feat-lbl { width: auto; }
	.rv-feature-table, .rv-feature-table tbody, .rv-feature-table tr { display: block; width: 100%; }
	.rv-feature-table tr:not(.rv-feature-group-row) { display: flex; flex-direction: column; padding: 10px 0; }
	.rv-feat-lbl, .rv-feat-val { padding: 2px 16px; }
}

/* ---------------- Feature rail: sticky spec sheet, replaces the in-content
   table above on single review pages (the table above stays in use on the
   /compare/ pair page, which calls sv_render_feature_section() directly) ---------------- */

.rv-layout {
	max-width: 1180px; margin: 0 auto; padding: 0 20px;
	display: grid; grid-template-columns: 1fr; gap: 40px;
	/* Deliberately NOT align-items:start -- that shrinks the rail's grid
	   cell down to the rail's own (short) height, leaving position:sticky
	   nothing to stick within past that point, so the rail vanishes as
	   soon as you scroll further than the rail is tall. Default (stretch)
	   keeps the rail's cell as tall as the main column, giving the sticky
	   child room to stay pinned for the full length of the article. */
}
/* Widens to the two-column layout only once the rail actually rendered
   something (a review with no sv_feat_* meta set yet renders an empty
   .rv-layout-rail, and this keeps that from reserving a dead 300px gap). */
.rv-layout:has(.rv-layout-rail:not(:empty)) { grid-template-columns: 1fr 300px; }
.rv-layout-rail:empty { display: none; }
.rv-layout-main { order: 1; min-width: 0; }
/* Core's default "constrained" layout auto-centers each child at 700px
   *within whatever container it's in* -- fine when the container itself
   is already ~700-800px (the two-column case), but with no rail the
   container is the full ~1140px column, so the centered 700px body reads
   as indented relative to the positioned hero block above it (which isn't
   part of post-content, so it isn't subject to this at all). Forcing
   left-alignment here keeps the body's left edge matched to the hero's
   regardless of which grid state is active.
   Excludes .rv-dash: without that exclusion this rule also caught the
   hero dashboard (it's a direct child of .wp-block-post-content too,
   since the positioned "before content" block injects it right at the
   start of the_content), capping the whole hero to 700px when its real
   container is 800px -- that was the actual cause of the hero (and, via
   the same 700px number, the article body) reading as noticeably
   narrower than the space actually available next to the rail. The hero
   manages its own width via .rv-wrap and should just fill its column. */
.rv-layout-main .wp-block-post-content > :not(.alignwide):not(.alignfull):not(.rv-dash) {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 780px !important;
}
.rv-layout-rail { order: 2; }
/* Sticky's `top` only sets where the element stops once you scroll past
   it -- it does NOT affect where it sits at rest. At rest, the rail's
   natural position was flush with .rv-layout's bare top edge (same y as
   the header), while the hero sits 32px lower via .rv-wrap's own
   padding. margin-top gives the rail that same resting offset; top:32px
   (unchanged) keeps it pinned there once scrolling starts, so there's no
   jump between the two. */
.rv-rail-col { position: sticky; top: 32px; margin-top: 32px; }

.rv-rail {
	background: var(--wp--preset--color--paper-tint);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px; overflow: hidden;
	display: flex; flex-direction: column; max-height: calc(100vh - 52px);
	box-shadow: var(--sv-shadow-sm, 0 1px 2px rgba(15,23,42,0.03));
}
.rv-rail-head { flex-shrink: 0; padding: 14px 16px 16px; border-bottom: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--paper-tint); }
.rv-rail-toprow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.rv-rail-tag { font-family: var(--wp--preset--font-family--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink-faint); }
.rv-rail-live { display: flex; align-items: center; gap: 5px; font-family: var(--wp--preset--font-family--mono); font-size: 0.6rem; color: var(--wp--preset--color--good); }
.rv-rail-live .d { width: 5px; height: 5px; border-radius: 50%; background: var(--wp--preset--color--good); box-shadow: 0 0 0 2px var(--wp--preset--color--good-soft); }

/* The toggle button: on desktop it's inert (no chevron/count, not
   clickable-looking) and reads exactly like the old plain title. On mobile
   it's the disclosure control for .rv-rail-body -- see the media query. */
.rv-rail-toggle {
	appearance: none; border: none; background: none; padding: 0; margin: 2px 0 12px;
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
	font: inherit; text-align: left; cursor: default;
}
.rv-rail-ttl { font-family: var(--wp--preset--font-family--display); font-size: 0.9rem; font-weight: 800; color: var(--wp--preset--color--ink); }
.rv-rail-toggle-meta { display: none; }
.rv-rail-visit {
	display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
	background: var(--wp--preset--color--accent); color: #fff; font-weight: 700; font-size: 0.82rem;
	padding: 10px 14px; border-radius: 9px; text-decoration: none;
}
.rv-rail-visit:hover { background: var(--wp--preset--color--accent-deep); color: #fff; }
.rv-rail-visit svg { flex-shrink: 0; }

.rv-rail-body { flex-shrink: 1; min-height: 0; display: flex; flex-direction: column; }
.rv-rail-scroll { overflow-y: auto; position: relative; }
.rv-rail-fade {
	position: sticky; bottom: 0; left: 0; right: 0; height: 22px; margin-top: -22px; pointer-events: none;
	background: linear-gradient(to bottom, transparent, var(--wp--preset--color--paper-tint));
}
.rv-rail-group {
	display: flex; align-items: center; justify-content: space-between;
	font-family: var(--wp--preset--font-family--mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--wp--preset--color--ink-faint); padding: 9px 16px; background: var(--wp--preset--color--paper);
}
.rv-rail-group .cnt { background: var(--wp--preset--color--line); color: var(--wp--preset--color--ink-soft); font-size: 0.58rem; padding: 1px 6px; border-radius: 100px; }
.rv-rail-row { padding: 10px 16px; border-top: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--paper); transition: background .12s ease; }
.rv-rail-row:hover { background: var(--wp--preset--color--accent-soft); }
.rv-rail-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rv-rail-row-top .lbl { font-size: 0.78rem; font-weight: 700; color: var(--wp--preset--color--ink); }
.rv-rail-row .val { margin: 0 0 0 30px; font-size: 0.75rem; color: var(--wp--preset--color--ink-soft); line-height: 1.45; }
.rv-rail-chip { width: 22px; height: 22px; border-radius: 7px; background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.rv-rail-foot {
	flex-shrink: 0; padding: 10px 16px; border-top: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--paper);
	display: flex; align-items: center; gap: 6px;
	font-family: var(--wp--preset--font-family--mono); font-size: 0.62rem; color: var(--wp--preset--color--ink-faint);
}
.rv-rail-foot svg { flex-shrink: 0; color: var(--wp--preset--color--good); }

@media (max-width: 820px) {
	.rv-layout { display: block; padding: 0 5px; }
	/* review.js moves .rv-layout-rail to sit right after the hero block on
	   mobile (DOM order alone would otherwise put it after the whole
	   article -- see that file for why). Margin on both sides now that
	   it's a divider between the hero and the rest of the review, not the
	   last thing before the footer. */
	.rv-rail-col { position: static; margin: 36px 0; }
	.rv-rail { max-height: none; }
	.rv-rail-scroll { overflow-y: visible; }
	.rv-rail-fade { display: none; }

	/* Collapsed-by-default disclosure: the toggle becomes an actual button
	   (chevron + item count visible, tap target full width), and the body
	   (grouped rows + the "verified" footer) starts hidden. The Visit CTA
	   stays outside .rv-rail-body on purpose, so it's reachable without
	   expanding anything. */
	.rv-rail-toggle { cursor: pointer; padding: 2px 0; }
	.rv-rail-toggle-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
	.rv-rail-count { font-family: var(--wp--preset--font-family--mono); font-size: 0.68rem; color: var(--wp--preset--color--ink-faint); }
	.rv-rail-chev { color: var(--wp--preset--color--ink-faint); transition: transform .18s ease; flex-shrink: 0; }
	.rv-rail.is-open .rv-rail-chev { transform: rotate(180deg); }

	.rv-rail-body { display: none; margin-top: 14px; }
	.rv-rail.is-open .rv-rail-body { display: flex; }
}

/* ---------------- Body content: headings, tables, cards, FAQ ---------------- */

body.single-vpn_provider .wp-block-post-content > .wp-block-heading {
	font-size: 1.28rem;
	margin-top: 44px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--line);
}
body.single-vpn_provider .wp-block-post-content > .wp-block-heading:first-of-type {
	margin-top: 32px;
}

/* Give the existing table/card sections the same rounded, soft-shadow
   treatment as the new feature table, so the whole article body reads as
   one system instead of "old parts" next to "new parts." */
body.single-vpn_provider .sv-plan-wrap,
body.single-vpn_provider .sv-mini-compare-table,
body.single-vpn_provider .sv-cons-box,
body.single-vpn_provider .sv-forgrid .sv-bf-card {
	box-shadow: 0 1px 2px rgba(15,23,42,0.03);
}
body.single-vpn_provider table.sv-plan-table,
body.single-vpn_provider .sv-mini-compare-table {
	border-radius: 12px;
}
body.single-vpn_provider .sv-forgrid { gap: 12px; }
body.single-vpn_provider .sv-forgrid .sv-bf-card { border-radius: 12px; }

/* FAQ: collapsed by default (native <details>, no JS needed) instead of a
   long wall of fully-expanded question/answer pairs. */
body.single-vpn_provider .sv-faq-item {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--paper);
	padding: 0 18px;
}
body.single-vpn_provider .sv-faq-item + .sv-faq-item { margin-top: 10px; }
body.single-vpn_provider .sv-faq-item summary {
	font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 0.98rem; color: var(--wp--preset--color--ink);
	list-style: none; cursor: pointer;
	padding: 16px 26px 16px 0; margin: 0; position: relative;
}
body.single-vpn_provider .sv-faq-item summary::-webkit-details-marker { display: none; }
body.single-vpn_provider .sv-faq-item summary::after {
	content: ""; position: absolute; right: 2px; top: 50%; width: 10px; height: 10px;
	margin-top: -6px;
	border-right: 2px solid var(--wp--preset--color--ink-faint);
	border-bottom: 2px solid var(--wp--preset--color--ink-faint);
	transform: rotate(45deg); transition: transform .18s ease;
}
body.single-vpn_provider .sv-faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
body.single-vpn_provider .sv-faq-item summary:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }
body.single-vpn_provider .sv-faq-item p { margin: 0 0 18px; color: var(--wp--preset--color--ink-soft); font-size: 0.92rem; line-height: 1.6; }

/* Closing "The verdict" section: the page's last heading + its paragraph(s)
   become one bordered, accent-tinted panel instead of blending into the
   rest of the body text — this is the citation-ready closing claim. */
body.single-vpn_provider .wp-block-post-content > h2.wp-block-heading:last-of-type {
	border-top: none;
	margin-top: 48px;
	padding: 22px 24px 4px;
	background: var(--wp--preset--color--paper-tint);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 12px 12px 0 0;
	font-size: 1.15rem;
}
body.single-vpn_provider .wp-block-post-content > h2.wp-block-heading:last-of-type ~ p {
	background: var(--wp--preset--color--paper-tint);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-right: 1px solid var(--wp--preset--color--line);
	padding: 4px 24px;
	/* Was `margin: 0 auto` -- harmless while this box's container width
	   always matched its max-width, but the .rv-layout-main override above
	   (added for the feature-rail layout) can make the container wider
	   than its cap, and auto-centering a narrower box inside a wider one
	   pulls it out of alignment with the heading directly above it, which
	   the same override left-aligned. Match that override's width exactly
	   (780px) instead of relying on the two rules happening to agree. */
	margin: 0 !important;
	max-width: 780px !important;
	font-size: 1rem;
}
body.single-vpn_provider .wp-block-post-content > h2.wp-block-heading:last-of-type ~ p:empty {
	display: none;
}
body.single-vpn_provider .wp-block-post-content > h2.wp-block-heading:last-of-type ~ p:last-child:not(:empty) {
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-radius: 0 0 12px 12px;
	padding-bottom: 22px;
}