/*
Theme Name: TheBestVPN
Theme URI: https://example.com/thebestvpn
Template: rt-starter-theme
Author: RT
Author URI: https://example.com
Description: TheBestVPN child theme of RT Starter Theme. The rebrand is pure design tokens in theme.json (palette, Lato, navy headings, pill CTAs). It also adds the site-specific layer needed to migrate the legacy theme: two-column page/single templates with an ACF-driven custom-sidebar bridge block, header/footer parts, and a thin functions.php that ports only the GTM container.
Version: 1.0.1
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thebestvpn
Tags: full-site-editing, block-styles
*/

body {
    font-size: 18px;
    font-family: var(--wp--preset--font-family--ibm-plex-sans);
}

strong,
b {
	font-weight: 600; /* Body/strong — semibold; no 700 weight face is loaded */
}

hr {
    color: var(--wp--preset--color--border);
    border-top: none;
    border-bottom: var(--wp--custom--stroke--hairline) solid var(--wp--preset--color--border);
}

code,
kbd,
samp,
pre {
	font-family: var( --wp--preset--font-family--ibm-plex-mono );
	font-size: var( --wp--preset--font-size--small, 0.875rem ); /* Body/mono — 14px */
	line-height: 1.4; /* 140% */
	letter-spacing: 0.02em; /* +2% */
}

ul,
ol {
	padding-left: var( --wp--preset--spacing--40, 27px );
}

button {
    font-family: var(--wp--preset--font-family--ibm-plex-sans);
}

iframe, canvas {
    max-width: 100%;
}

.has-small-font-size {
	line-height: 1.4; /* 140% */
}

.has-x-small-font-size {
	line-height: 1.4; /* 140% */
	letter-spacing: 0.02em; /* +2% */
}

h1 strong, h2 strong {
    font-weight: 700;
}

@media ( max-width: 781px ) {
	h1 {
		line-height: 1.15; /* 115% */
	}
	h3 {
		line-height: 1.25; /* 125% */
	}
	h4 {
		line-height: 1.4; /* 140% */
	}
}

/* =========================================================
   Header — mobile (<= 599px)
   Matches the Navigation block's overlay breakpoint (600px),
   so the hamburger is already showing at this width.
   ========================================================= */
@media ( max-width: 599px ) {

	/* Hamburger → full-width, centered, labelled "Menu" button */
	.wp-block-navigation__responsive-container-open {
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		gap: 8px;
		padding: 8px 12px;
		background-color: var(--wp--preset--color--light);
		border-radius: 4px;
	}

	.wp-block-navigation__responsive-container-open::after {
		content: "Menu";
		font-weight: 700;
	}

	/* Search form spans the full row */
	.wp-block-search {
		width: 100%;
	}
}

/* =========================================================
   Footer — language switcher placeholder
   ========================================================= */

/* Smooth scroll for the in-page #top anchor */
html {
	scroll-behavior: smooth;
}

/* =========================================================
   Two-column templates — left-align the content column ONLY
   when a sidebar is actually rendered.

   Temporary disable sidbar.
   ========================================================= */
.content-grid:has( > .tbv-custom-sidebar ) {
    display: grid !important;
    grid-template-columns: minmax(0, var(--wp--style--global--content-size)) minmax(0, 1fr);
    gap: var(--wp--preset--spacing--30);
}

@media all and (max-width: 1210px) {
    .content-grid {
        padding: var(--wp--preset--spacing--40) 0;
    }
    .content-grid:has( > .tbv-custom-sidebar ) {
        grid-template-columns: 1fr;
    }
}

@media all and (min-width: 1211px) {
    .tbv-custom-sidebar {
        position: sticky;
        top: var(--wp--preset--spacing--40);
        padding-bottom: var(--wp--preset--spacing--30);
    }

    .admin-bar .tbv-custom-sidebar {
        top: var(--wp--preset--spacing--60);
    }
}

.tbv-custom-sidebar .c-box {
    margin-top: 0 !important;
    padding: 0 !important;
    background: none !important;
}

.tbv-custom-sidebar .c-box p:first-of-type {
    margin-top: 0;
}

.tbv-custom-sidebar span[style="font-size: 0.5rem;"] {
    font-size: var(--wp--preset--font-size--x-small) !important;
}

/* =========================================================
   Content column card — background/border/width/padding all live
   here (not on .entry-content) so the featured-image block sitting
   above the post content renders inset inside the same padded white
   card as the text, instead of floating separately above it.
   .content-column is already forced to exactly content-size wide
   when a sidebar is present (grid track in the block above) and
   self-caps/centers to the same width here when it isn't
   (flex-stretched otherwise) — see the two-column templates rule
   above — so this max-width is a no-op in the sidebar case and does
   the centering in the no-sidebar case.
   ========================================================= */
.content-column {
    box-sizing: border-box;
    max-width: var(--wp--style--global--content-size);
    /* !important: WP's own global-styles CSS ships
       `.is-layout-flex > :is(*, div) { margin: 0px; }` to keep flex `gap`
       spacing clean — its specificity beats a plain .content-column class
       selector and silently zeroes this centering margin on no-sidebar
       (flex) pages. */
    margin-inline: auto !important;
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
    background: var(--wp--preset--color--base);
    border-radius: 0;
    border-left: var(--wp--custom--stroke--hairline) solid var(--wp--preset--color--border);
    border-right: var(--wp--custom--stroke--hairline) solid var(--wp--preset--color--border);
}

@media all and (max-width: 1210px) {
    .content-column {
        max-width: 100%;
        border: none;
        padding: 0;
        background: transparent;
    }
}

/* Direct children of the card (the featured-image block and .entry-content)
   fill the padded card instead of re-centering at content-size, which would
   double-inset (card padding + constrained centering) and shrink them below
   the card's actual inner width. Wide/full blocks keep their own alignment. */
.content-column > :where(:not(.alignwide):not(.alignfull)) {
    max-width: none;
}

/* .entry-content (wp:post-content) has its own constrained layout attribute,
   which would independently re-center ITS children (paragraphs, headings,
   etc.) at content-size too — same double-inset problem one level down. */
.entry-content > :where(:not(.alignwide):not(.alignfull)) {
    max-width: none;
}

/* =========================================================
   Blog / archive / search post list (index.html)
   Square featured image on the left, title + content on the
   right. When a post has no featured image the block renders
   nothing and the text column simply fills the row.
   ========================================================= */
.post-list-item {
	/* Divider between items — tokenized so it follows the active style variation. */
	border-bottom: 1px solid var( --wp--custom--color--light--border-default );
}

.post-list-item .wp-block-post-featured-image {
	/* Fixed-width thumbnail that never shrinks; the text group (selfStretch
	   fill) takes the remaining space. */
	flex: 0 0 200px;
	max-width: 200px;
	margin: 0;
}

.post-list-item .wp-block-post-featured-image img {
	border-radius: 4px;
}

/* The text column: flex-basis 0 + min-width 0 so it shrinks beside the image
   instead of wrapping below it (WP's "fill" leaves flex-basis at auto, which
   resolves to the excerpt's max-content width and forces a wrap). */
.post-list-item > .wp-block-group {
	flex: 1 1 0;
	min-width: 0;
}

/* No trailing divider/padding under the last item in the list. Each post is
   wrapped in its own <li>, so `.post-list-item:last-child` would match EVERY
   item — scope to the last <li> of the post-template instead. */
.wp-block-post-template > li:last-child .post-list-item {
	border-bottom: 0;
	padding-bottom: 0;
}

@media ( max-width: 781px ) {
	/* The text column is narrow next to the thumbnail on small screens, so the
	   full excerpt gets very tall. Clamp it to a few lines; the "Read more…"
	   link sits in its own element below and stays visible. */
	.post-list-item .wp-block-post-excerpt__excerpt {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		line-clamp: 4;
		overflow: hidden;
	}
}

@media ( max-width: 599px ) {
	.post-list-item .wp-block-post-featured-image {
		flex-basis: 120px;
		max-width: 120px;
	}
}

/* WPML language switcher — styled so the current-language toggle reads as an
   input box (the WPML markup already ships its own flag + chevron).
   Scoped to .tbv-footer since that's the only place the switcher appears. */
.tbv-footer .wpml-language-switcher-block {
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 400;
    margin-top: var(--wp--preset--spacing--20);
    padding-top: var(--wp--preset--spacing--20);
    border-top: var(--wp--custom--stroke--hairline) solid var(--wp--custom--color--dark--border-subtle);
}
.tbv-footer .wpml-language-switcher-block,
.tbv-footer .wpml-language-switcher-block .wpml-ls-dropdown,
.tbv-footer .wpml-language-switcher-block .wp-block-navigation-item.has-child {
	display: block;
	width: 100%;
}

/* The clickable current-language row is the "input". border-box keeps its
   outer width equal to the container (WPML ships it as content-box, so the
   padding + border otherwise pushed it ~20px past the column edge). */
.tbv-footer .wpml-language-switcher-block .wp-block-navigation-submenu__toggle {
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	font: inherit;
	background-color: var( --wp--custom--color--light--bg-muted );
	color: var( --wp--custom--color--light--text-body );
	border: var(--wp--custom--stroke--hairline) solid var( --wp--custom--color--light--border-default );
	border-radius: 4px;
	cursor: pointer;
}

/* Push the WPML chevron to the right edge like a native select. */
.tbv-footer .wpml-language-switcher-block .wp-block-navigation-submenu__toggle .current-language-item {
	width: 100%;
	justify-content: space-between;
	align-items: center;
}

/* Chevron uses stroke, not fill — keep it in the input text colour. */
.tbv-footer .wpml-language-switcher-block .wp-block-navigation__submenu-icon svg path {
	stroke: currentColor;
}

/* Dropdown panel — same width as the input box, matching light box styling.
   The extra `.wpml-ls-dropdown .has-child` classes raise specificity above WP
   core's `.wp-block-navigation .has-child …` rule (a tie otherwise, and core
   loads later) so `width:100%` wins over its `width:max-content`. WPML's own
   block CSS sets `background`/`border` on this list with !important, so those
   two need !important to land. */
.tbv-footer .wpml-language-switcher-block .wpml-ls-dropdown .has-child .wp-block-navigation__submenu-container {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 0;
	padding: 0 0 5px;
	background-color: var( --wp--custom--color--light--bg-muted ) !important;
	border-top: var(--wp--custom--stroke--default) solid var(--wp--preset--color--ink-deep) !important;
	border-radius: 0;
	overflow: hidden;
}

/* Full-width rows so the hover background spans the whole panel; the
   horizontal padding lives on the link (not the panel) for that reason. */
.tbv-footer .wpml-language-switcher-block .wp-block-navigation__submenu-container li,
.tbv-footer .wpml-language-switcher-block .wp-block-navigation__submenu-container li > div {
	width: 100%;
}

/* Dropdown items — same font as the switcher, no underline, input text colour. */
.tbv-footer .wpml-language-switcher-block .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	color: var( --wp--custom--color--light--text-body );
	text-decoration: none;
}

.tbv-footer .wpml-language-switcher-block .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.tbv-footer .wpml-language-switcher-block .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	color: var( --wp--custom--color--light--text-body );
	text-decoration: none;
	background-color: var( --wp--preset--color--border );
}

/* =========================================================
   Legacy Bootstrap-style buttons (.btn / .btn-*)
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	padding: var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--30 ); /* 9px 18px — mirrors .wp-block-button default */
	gap: var( --wp--preset--spacing--20 );
	font-size: var( --wp--preset--font-size--medium );  /* 18px */
	font-weight: 400;
	line-height: 1.6;
	text-align: center;
	text-decoration: none;
	color: var( --wp--preset--color--base, #ffffff );
	background: var( --wp--preset--color--primary, #ff9900 );
	border: var(--wp--custom--stroke--hairline) solid var( --wp--preset--color--primary, #ff9900 );
	border-radius: 40px;
	box-shadow: none;
	cursor: pointer;
}

.btn::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM4.5 7.5C4.22386 7.5 4 7.72386 4 8C4 8.27614 4.22386 8.5 4.5 8.5H10.2929L8.14645 10.6464C7.95118 10.8417 7.95118 11.1583 8.14645 11.3536C8.34171 11.5488 8.65829 11.5488 8.85355 11.3536L11.8536 8.35355C12.0488 8.15829 12.0488 7.84171 11.8536 7.64645L8.85355 4.64645C8.65829 4.45118 8.34171 4.45118 8.14645 4.64645C7.95118 4.84171 7.95118 5.15829 8.14645 5.35355L10.2929 7.5H4.5Z' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM4.5 7.5C4.22386 7.5 4 7.72386 4 8C4 8.27614 4.22386 8.5 4.5 8.5H10.2929L8.14645 10.6464C7.95118 10.8417 7.95118 11.1583 8.14645 11.3536C8.34171 11.5488 8.65829 11.5488 8.85355 11.3536L11.8536 8.35355C12.0488 8.15829 12.0488 7.84171 11.8536 7.64645L8.85355 4.64645C8.65829 4.45118 8.34171 4.45118 8.14645 4.64645C7.95118 4.84171 7.95118 5.15829 8.14645 5.35355L10.2929 7.5H4.5Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.btn strong {
    font-weight: 400;
}

.btn:hover,
.btn:focus {
	color: var( --wp--preset--color--base, #ffffff );
	text-decoration: none;
}

/* The legacy hover/focus only nudged an (invisible) border-color; give the
   borderless pill a real, tokenized focus ring for keyboard users instead. */
.btn:focus-visible {
	outline: 2px solid var( --wp--preset--color--secondary, #003b61 );
	outline-offset: 2px;
}

/* Size + shape modifiers — only default (above) and small exist in the design;
   small mirrors .wp-block-button.is-small (padding/gap shrink, font-size stays medium). */
.btn-sm {
	padding: var( --wp--preset--spacing--10 ) var( --wp--preset--spacing--20 ); /* 4px 9px */
	gap: var( --wp--preset--spacing--20 );              /* 9px */
	font-size: var( --wp--preset--font-size--medium );  /* 18px */
}

.btn-square {
	border-radius: 3px;
}

/* Color variants */
.btn-primary,
.btn-orange {
	color: var( --wp--preset--color--base, #ffffff );
	background-color: var( --wp--preset--color--primary, #ff9900 );
    border: var(--wp--custom--stroke--hairline) solid var( --wp--preset--color--primary, #ff9900 );
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.btn-orange:hover,
.btn-orange:focus,
.btn-orange.focus,
.btn-orange:active,
.btn-orange.active {
	color: var( --wp--preset--color--base, #ffffff );
	background-color: color-mix( in srgb, var( --wp--preset--color--primary, #ff9900 ) 80%, #ffffff );
    border: var(--wp--custom--stroke--hairline) solid color-mix( in srgb, var( --wp--preset--color--primary, #ff9900 ) 80%, #ffffff );
}

.btn-default {
	color: var( --wp--preset--color--base, #ffffff );
	background-color: var( --wp--preset--color--secondary, #003b61 );
    border: var(--wp--custom--stroke--hairline) solid var( --wp--preset--color--secondary, #003b61 );
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active {
	color: var( --wp--preset--color--base, #ffffff );
	background-color: color-mix( in srgb, var( --wp--preset--color--secondary, #003b61 ) 80%, #ffffff );
	border: var(--wp--custom--stroke--hairline) solid color-mix( in srgb, var( --wp--preset--color--secondary, #003b61 ) 80%, #ffffff );
}

.btn-green {
	color: var( --wp--preset--color--base, #ffffff );
	background-color: var( --wp--preset--color--accent, #129e37 );
    border: var(--wp--custom--stroke--hairline) solid var( --wp--preset--color--accent, #129e37 );
}

.btn-green:hover,
.btn-green:focus,
.btn-green.focus,
.btn-green:active,
.btn-green.active {
	color: var( --wp--preset--color--base, #ffffff );
	background-color: color-mix( in srgb, var( --wp--preset--color--accent, #129e37 ) 80%, #ffffff );
	border: var(--wp--custom--stroke--hairline) solid color-mix( in srgb, var( --wp--preset--color--accent, #129e37 ) 80%, #ffffff );
}

@media all and (max-width: 1210px) {
    .btn, .btn-sm {
        padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
    }
}

/* =========================================================
   Header — top utility bar + main nav bar (2026 redesign)
   Markup lives in parts/header.html. Colors/spacing all come
   from the design-token vocabulary in theme.json so this
   follows the active style variation.
   ========================================================= */

/* Top utility strip (cream highlight band with the tagline). */
.tbv-topbar__tagline {
	margin: 0;
	color: var( --wp--preset--color--contrast );
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
}

/* Tagline text swap: dynamic site tagline on desktop, a shorter
   static string on phones. Toggled at the 599px phone breakpoint. */
.tbv-topbar__tagline--mobile {
	display: none;
}

@media ( max-width: 599px ) {
	.tbv-topbar__tagline--desktop {
		display: none;
	}
	.tbv-topbar__tagline--mobile {
		display: block;
	}
}

/* Main header bar layout. The gap is FIXED, not viewport-fluid: the menu is a
   fixed 1200px wide regardless of window size, so a vw-based gap grew on large
   screens (up to 27px) and pushed the nav labels past 1200px → wrapping. A
   fixed 16px keeps constant slack at every window width (and trims the
   search↔CTA spacing). */
.tbv-header-actions {
	gap: var( --wp--preset--spacing--25, 16px );
}

/* Search icon + CTA grouped together; 9px between them. */
.tbv-search-cta {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--20, 9px );
}

.tbv-header-left {
	gap: var( --wp--preset--spacing--20 );
}

/* Mobile-only chrome — hidden on desktop, revealed in the mobile media query. */
.tbv-menu-toggle,
.tbv-logo-icon,
.tbv-mobile-menu {
	display: none;
}

.tbv-menu-toggle {
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var( --wp--preset--color--secondary, #0f172a );
	background: transparent;
	border: 0;
	cursor: pointer;
	line-height: 0;
}

.tbv-menu-toggle__open {
    color: var(--wp--preset--color--contrast);
}
.tbv-menu-toggle__close {
	display: none;
    color: var(--wp--preset--color--contrast);
}

.tbv-menu-toggle[aria-expanded="true"] .tbv-menu-toggle__open {
	display: none;
}

.tbv-menu-toggle[aria-expanded="true"] .tbv-menu-toggle__close {
	display: block;
}

.tbv-logo-icon {
	align-items: center;
	line-height: 0;
}

/* Full wordmark — shown on desktop, hidden on mobile (inline SVG, env-agnostic). */
.tbv-logo-full {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.tbv-logo-full svg,
.tbv-logo-icon svg {
	display: block;
}

/* Primary navigation — 18px / 400 / 1.6 links across both levels. */
.tbv-primary-nav {
	font-size: var( --wp--preset--font-size--medium, 1.125rem ); /* 18px */
	font-weight: 400;
	line-height: 1.6;
}

/* Vertical breathing room on the menu row itself. */
.tbv-primary-nav > .wp-block-navigation__container {
	padding-top: var( --wp--preset--spacing--10, 4px );
	padding-bottom: var( --wp--preset--spacing--10, 4px );
	gap: var( --wp--preset--spacing--20, 9px ); /* match Figma: 9px between links */
}

/* Top-level item: zero padding on the <li>, padding lives on the <a> so the
   hover fill spans the whole row down to the submenu's top edge. */
.tbv-primary-nav > .wp-block-navigation__container > .wp-block-navigation-item {
	padding: 0;
}

.tbv-primary-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: var( --wp--preset--spacing--20, 9px );
}

/* No dropdown chevron on top-level items — Figma has none, and the icon's
   width + left margin (~15px) was pushing the row past 1200px and forcing the
   labels to wrap. Submenus still open on hover. */
.tbv-primary-nav .wp-block-navigation__submenu-icon {
	display: none;
}

/* Hover fills with the border colour so it blends seamlessly into the
   submenu's 2px top border sitting directly below it. */
.tbv-primary-nav > .wp-block-navigation__container > .wp-block-navigation-item:hover,
.tbv-primary-nav > .wp-block-navigation__container > .wp-block-navigation-item:focus-within {
	background: var( --wp--preset--color--border, #e2e8f0 );
}

/* Dropdown / mega panel — opens flush below the <li>; its 2px top border (same
   colour as the <li> hover fill) blends the two into one continuous band. */
.tbv-primary-nav.wp-block-navigation .wp-block-navigation__submenu-container {
	/* Core Navigation pins submenu width (`width:0` plus a `min-width:200px`
	   interactivity rule at 0,4,0 specificity), collapsing the panel to ~200px.
	   !important is the pragmatic override here — matching core's specificity is
	   brittle across WP releases. */
	width: 324px !important;
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--20, 9px );
	padding: var( --wp--preset--spacing--20, 9px ) 0;
	background: var( --wp--preset--color--surface, #f8fafc );
	border: 0;
	border-top: var( --wp--custom--stroke--default, 2px ) solid var( --wp--preset--color--border, #e2e8f0 );
	border-radius: 0;
}

/* Submenu links: tight rows with room for an optional leading icon. Selector is
   deliberately specific (0,6,0) to beat core Navigation's 0,5,0 padding rule
   (.has-child ... > .item > .item__content) on the vertical padding. */
.tbv-primary-nav.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--10, 4px );
	padding: var( --wp--preset--spacing--10, 4px ) var( --wp--preset--spacing--30, 18px );
	border-radius: 0;
}

.tbv-primary-nav.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item:not(.tbv-nav-group) .wp-block-navigation-item__content:hover {
	color: var( --wp--preset--color--secondary, #0f172a ) !important;
	background: var( --wp--custom--color--bg--muted, var( --wp--preset--color--light, #f1f5f9 ) );
}

/* Search trigger — square outlined icon button (opens the search modal; the
   /?s= href is the no-JS fallback). */
.tbv-search-toggle {
    cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
    width: 34px;
    height: 37px;
	color: var( --wp--preset--color--secondary, #0f172a );
	background: var( --wp--preset--color--base, #fff );
	border: var(--wp--custom--stroke--hairline) solid var( --wp--custom--color--dark--border-subtle );
	border-radius: var( --wp--custom--radius--sm, 4px );
	transition: color 0.15s ease, border-color 0.15s ease;
}

.tbv-search-toggle:hover,
.tbv-search-toggle:focus-visible {
	color: var( --wp--preset--color--primary, #ea580c );
	border-color: var( --wp--preset--color--primary, #ea580c );
	outline: none;
}

/* "VPN Deal of the day" pill with a trailing arrow. */
.tbv-deal-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

/* Keep the action cluster from wrapping the CTA under the nav on mid widths. */
@media ( max-width: 1210px ) {
	.tbv-topbar__tagline {
		font-size: var( --wp--preset--font-size--x-small, 0.75rem );
	}
}

/* =========================================================
   Footer (2026 redesign) — dark band, 3 columns, divided
   headings, orange CTA, contributors + lang select, bottom bar.
   Markup: parts/footer.html.
   ========================================================= */

.wp-site-blocks footer.wp-block-template-part {
    margin-top: 0;
}

.tbv-footer {
	color: var(--wp--preset--color--light);
}

.tbv-footer p {
	color: var(--wp--preset--color--light);
}

.tbv-footer a:not(.wp-element-button) {
	color: var(--wp--preset--color--light);
	text-decoration: underline;
}

.tbv-footer a:not(.wp-element-button):hover {
	color: var( --wp--preset--color--primary, #ea580c );
}

/* Buttons are never underlined. WP already scopes its link-underline away from
   .wp-element-button, but contextual `a` rules (e.g. the footer) can re-add it. */
.wp-element-button,
.wp-element-button:hover,
.wp-element-button:focus {
	text-decoration: none;
}

.tbv-footer__heading {
    font-family: var(--wp--preset--font-family--ibm-plex-sans);
    font-size: var(--wp--preset--font-size--large);
	color: #ffffff !important;
	margin-bottom: var( --wp--preset--spacing--30, 18px );
    line-height: 1.4;
	border-bottom: var(--wp--custom--stroke--default) solid var(--wp--custom--color--dark--border-default);
}

@media all and (max-width: 1210px) {
    .tbv-footer__heading {
        font-size: 19px;
    }
}

.tbv-footer__links,
.tbv-footer__contributors {
	list-style: none;
	margin: 0 0 var( --wp--preset--spacing--20, 9px );
	padding: 0;
	font-size: var( --wp--preset--font-size--small, 0.875rem );
}

.tbv-footer__links {
    margin-bottom: 47px;
}

.tbv-footer__links li,
.tbv-footer__contributors li {
	margin-bottom: 9px;
    border-bottom: var(--wp--custom--stroke--hairline) solid var(--wp--custom--color--dark--border-subtle);
}

.tbv-footer__contributors li {
	margin-bottom: 7px;
	color: rgba( 255, 255, 255, 0.82 );
}

/* White logo on the dark footer — inline SVG recoloured via fill (the markup
   omits per-path fills so this wins). */
.tbv-footer__logo {
	display: inline-block;
	line-height: 0;
}

.tbv-footer__logo svg {
	display: block;
	width: 170px;
	height: auto;
}

.tbv-footer__logo svg path {
	fill: #ffffff;
}

.tbv-footer__tagline {
	margin-top: var( --wp--preset--spacing--20, 9px );
}

.tbv-footer__tagline em {
	color: #ffffff;
}

.tbv-footer__bar {
	margin-top: var( --wp--preset--spacing--40, 27px );
	padding-top: var( --wp--preset--spacing--20, 9px );
	border-top: var(--wp--custom--stroke--default) solid var(--wp--custom--color--dark--border-default);
}

@media all and (max-width: 1210px) {
    .tbv-footer__bar {
        flex-wrap: nowrap;
        gap: 0;
    }
    .tbv-footer__bar .has-small-font-size {
        font-size: 12px !important;
    }
    .tbv-footer__bar .wp-block-social-links {
        flex-wrap: nowrap;
    }
}

.tbv-footer__bar p {
	margin: 0;
    color: var(--wp--custom--color--dark--text-muted);
}

/* Footer social icons — white chip, ink-deep glyph, orange glyph on hover.
   The glyphs are knockouts (white "f" / play arrow), so the white chip is
   what makes the cut-out read; it can't be transparent on the dark footer. */
.tbv-footer__bar .wp-block-social-links {
	gap: var( --wp--preset--spacing--20, 9px );
}

.tbv-footer__bar .wp-block-social-links li.wp-social-link {
	width: 24px;
	height: 24px;
    color: var(--wp--preset--color--ink-deep);
	background-color: #ffffff;
	border-radius: 50%;
	line-height: 0;
}

.tbv-footer__bar .wp-block-social-links li.wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
}

.tbv-footer__bar .wp-block-social-links li.wp-social-link svg {
	width: 18px;
	height: 18px;
	fill: var(--wp--preset--color--ink-deep);
}

.tbv-footer__bar .wp-block-social-links li.wp-social-link:hover,
.tbv-footer__bar .wp-block-social-links li.wp-social-link:focus-within {
	background-color: var( --wp--preset--color--primary, #ea580c );
    color: #ffffff;
}

/* Keep the language switcher input light on the dark footer. */
.tbv-footer .wpml-language-switcher-block .wp-block-navigation-submenu__toggle {
	background-color: var( --wp--custom--color--light--bg-muted );
	border-color: transparent;
}

/* Force the current-language flag row + label to the dark input text colour
   (the footer's dark scheme otherwise renders nav text light). */
.tbv-footer .wpml-language-switcher-block .wp-block-navigation-submenu__toggle,
.tbv-footer .wpml-language-switcher-block .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label,
.tbv-footer .wpml-language-switcher-block .wp-block-navigation-submenu__toggle .current-language-item {
	color: var( --wp--custom--color--light--text-body );
}

/* =========================================================
   Buttons — tokenized from design-tokens.json (pixel-perfect).
   Variants : primary (default, no block style) + secondary
              (.is-style-secondary).
   Sizes    : default + small (.is-style-small / .is-small) +
              tiny (.is-tiny — CSS-only, via Additional CSS class).
   Both variants carry a 1px (stroke/hairline) border so primary
   and secondary are the EXACT same box size; the primary border
   tracks its own fill across states.
   Default-size padding/type come from theme.json elements.button.
   ========================================================= */

/* Base — shared layout, type and 1px border box for every button. */
.wp-block-button > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var( --wp--preset--spacing--20 );
	font-family: var( --wp--preset--font-family--ibm-plex-sans );
	font-size: var( --wp--preset--font-size--medium );  /* 18px */
    font-weight: 400;
	line-height: 1.6;
	border-width: var( --wp--custom--stroke--hairline );/* 1px */
	border-style: solid;
	text-decoration: none;
}

.wp-block-button__link::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM4.5 7.5C4.22386 7.5 4 7.72386 4 8C4 8.27614 4.22386 8.5 4.5 8.5H10.2929L8.14645 10.6464C7.95118 10.8417 7.95118 11.1583 8.14645 11.3536C8.34171 11.5488 8.65829 11.5488 8.85355 11.3536L11.8536 8.35355C12.0488 8.15829 12.0488 7.84171 11.8536 7.64645L8.85355 4.64645C8.65829 4.45118 8.34171 4.45118 8.14645 4.64645C7.95118 4.84171 7.95118 5.15829 8.14645 5.35355L10.2929 7.5H4.5Z' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM4.5 7.5C4.22386 7.5 4 7.72386 4 8C4 8.27614 4.22386 8.5 4.5 8.5H10.2929L8.14645 10.6464C7.95118 10.8417 7.95118 11.1583 8.14645 11.3536C8.34171 11.5488 8.65829 11.5488 8.85355 11.3536L11.8536 8.35355C12.0488 8.15829 12.0488 7.84171 11.8536 7.64645L8.85355 4.64645C8.65829 4.45118 8.34171 4.45118 8.14645 4.64645C7.95118 4.84171 7.95118 5.15829 8.14645 5.35355L10.2929 7.5H4.5Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wp-block-button > .wp-block-button__link strong {
    font-weight: 400;
}

/* Icon — 16px in every size variant. */
.wp-block-button > .wp-block-button__link svg,
.wp-block-button > .wp-block-button__link img {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* --- Primary (default) — fill + matching border track the state. --- */
.wp-block-button:not(.is-style-secondary) > .wp-block-button__link {
	color: var( --wp--preset--color--base );            /* text/onBrand #fff */
	background-color: var( --wp--preset--color--primary );      /* action/primary */
	border-color: var( --wp--preset--color--primary );
}
.wp-block-button:not(.is-style-secondary) > .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--tertiary );     /* action/primaryHover */
	border-color: var( --wp--preset--color--tertiary );
}
.wp-block-button:not(.is-style-secondary) > .wp-block-button__link:active {
	background-color: var( --wp--custom--color--light--action-primary-active, #9a3412 );
	border-color: var( --wp--custom--color--light--action-primary-active, #9a3412 );
}

/* --- Secondary — white fill, ink outline (border colour fixed). --- */
.wp-block-button.is-style-secondary > .wp-block-button__link {
	color: var( --wp--custom--color--light--action-on-secondary, #1e293b );
	background-color: var( --wp--preset--color--base );         /* #fff */
	border-color: var( --wp--custom--color--light--action-on-secondary, #1e293b );
}
.wp-block-button.is-style-secondary > .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--light );        /* action/secondaryHover #f1f5f9 */
}
.wp-block-button.is-style-secondary > .wp-block-button__link:active {
	background-color: var( --wp--preset--color--border );       /* action/secondaryActive #e2e8f0 */
}

/* --- Sizes (default size comes from theme.json padding 9px 18px) --- */

/* small — block style OR .is-small utility (so it combines with secondary). */
.wp-block-button.is-style-small > .wp-block-button__link,
.wp-block-button.is-small > .wp-block-button__link {
	padding: var( --wp--preset--spacing--10 ) var( --wp--preset--spacing--20 ); /* 4px 9px */
	gap: var( --wp--preset--spacing--20 );              /* 9px */
	font-size: var( --wp--preset--font-size--medium );  /* 18px */
}

/* tiny — CSS-only; add `is-tiny` in the block's Additional CSS classes. */
.wp-block-button.is-tiny > .wp-block-button__link {
	padding: var( --wp--preset--spacing--10 ) var( --wp--preset--spacing--20 ); /* 4px 9px */
	gap: var( --wp--preset--spacing--10 );              /* 4px */
	font-size: var( --wp--preset--font-size--small );   /* 14px */
}

/* Generic "button with trailing arrow" used by footer + other CTAs. */
.tbv-cta-arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var( --wp--preset--spacing--20, 9px );
}

.tbv-cta-arrow .wp-block-button__link::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM4.5 7.5C4.22386 7.5 4 7.72386 4 8C4 8.27614 4.22386 8.5 4.5 8.5H10.2929L8.14645 10.6464C7.95118 10.8417 7.95118 11.1583 8.14645 11.3536C8.34171 11.5488 8.65829 11.5488 8.85355 11.3536L11.8536 8.35355C12.0488 8.15829 12.0488 7.84171 11.8536 7.64645L8.85355 4.64645C8.65829 4.45118 8.34171 4.45118 8.14645 4.64645C7.95118 4.84171 7.95118 5.15829 8.14645 5.35355L10.2929 7.5H4.5Z' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM4.5 7.5C4.22386 7.5 4 7.72386 4 8C4 8.27614 4.22386 8.5 4.5 8.5H10.2929L8.14645 10.6464C7.95118 10.8417 7.95118 11.1583 8.14645 11.3536C8.34171 11.5488 8.65829 11.5488 8.85355 11.3536L11.8536 8.35355C12.0488 8.15829 12.0488 7.84171 11.8536 7.64645L8.85355 4.64645C8.65829 4.45118 8.34171 4.45118 8.14645 4.64645C7.95118 4.84171 7.95118 5.15829 8.14645 5.35355L10.2929 7.5H4.5Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

@media all and (max-width: 1210px) {
    .wp-block-button > .wp-block-button__link,
    .wp-block-button.is-style-small > .wp-block-button__link,
    .wp-block-button.is-small > .wp-block-button__link {
        padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
    }
}

/* =========================================================
   Content image — "Framed" block style (core/image).
   Register: functions.php → is-style-tbv-framed.
   Rounded, bordered image; optional caption shown as a boxed
   strip below. Looks right with OR without a caption.

   Also applied to .wp-block-post-featured-image (templates/page.html,
   templates/single.html) so the featured image matches the same
   framed card treatment as a regular content image.
   ========================================================= */
.wp-block-image,
.wp-block-post-featured-image {
	border-radius: var( --wp--custom--radius--md, 8px );
    background: var(--wp--preset--color--surface);
    padding: var(--wp--preset--spacing--20);
    border: var(--wp--custom--stroke--hairline) solid var( --wp--custom--color--line--default, var( --wp--preset--color--border, #e2e8f0 ) );
}
.wp-block-image img,
.wp-block-post-featured-image img {
	border-radius: var( --wp--custom--radius--md, 8px );
}

.wp-block-image figcaption,
.wp-block-post-featured-image figcaption {
    display: block !important;
	margin: var( --wp--preset--spacing--20, 9px ) calc( -1 * var( --wp--preset--spacing--20, 9px ) ) calc( -1 * var( --wp--preset--spacing--20, 9px ) );
	padding: var( --wp--preset--spacing--10, 4px ) var( --wp--preset--spacing--30, 18px );
	border-top: var( --wp--custom--stroke--hairline, 1px ) solid var( --wp--custom--color--line--default, var( --wp--preset--color--border, #e2e8f0 ) );
	border-bottom-left-radius: calc( var( --wp--custom--radius--md, 8px ) - var( --wp--custom--stroke--hairline, 1px ) );
	border-bottom-right-radius: calc( var( --wp--custom--radius--md, 8px ) - var( --wp--custom--stroke--hairline, 1px ) );
	color: var( --wp--custom--color--text--muted, var( --wp--preset--color--muted, #64748b ) );
	font-size: var( --wp--preset--font-size--small, 0.875rem );
	line-height: 1.4;
	text-align: left;
}

/* =========================================================
   Classic-editor content fallbacks (alignleft/alignright/
   aligncenter/alignnone, [caption] shortcode).
   ========================================================= */
.alignleft {
	float: left;
	margin: 0 var( --wp--preset--spacing--30, 18px ) var( --wp--preset--spacing--30, 18px ) 0;
}

.alignright {
	float: right;
	margin: 0 0 var( --wp--preset--spacing--30, 18px ) var( --wp--preset--spacing--30, 18px );
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignnone {
	margin: 0 0 var( --wp--preset--spacing--30, 18px );
}

br ~ img.alignleft,
br ~ img.alignright,
br ~ img.aligncenter,
br ~ img.alignnone {
    margin-block-start: var(--wp--preset--spacing--30);
}

img {
    max-width: 100%;
}

.entry-content img:not(.wp-block-image *) {
	height: auto;
	border-radius: var( --wp--custom--radius--md, 8px );
	box-shadow:
		0 0 0 var( --wp--preset--spacing--20, 9px ) var( --wp--custom--color--bg--subtle, var( --wp--preset--color--surface, #f8fafc ) ),
		0 0 0 calc( var( --wp--preset--spacing--20, 9px ) + var( --wp--custom--stroke--hairline, 1px ) ) var( --wp--custom--color--line--default, var( --wp--preset--color--border, #e2e8f0 ) );
}

.entry-content figure img:not(.wp-block-image *) {
    box-shadow: none;
}

.tbv-custom-sidebar img {
    border-radius: 0;
    box-shadow: none;
}

.tbv-custom-sidebar img.alignleft {
    max-width: 58px;
}

.wp-caption {
	box-sizing: border-box;
	max-width: 100%;
	border: var( --wp--custom--stroke--hairline, 1px ) solid var( --wp--custom--color--line--default, var( --wp--preset--color--border, #e2e8f0 ) );
	border-radius: var( --wp--custom--radius--md, 8px );
	background: var( --wp--custom--color--bg--subtle, var( --wp--preset--color--surface, #f8fafc ) );
	padding: var( --wp--preset--spacing--20, 9px );
}

.wp-caption img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc( var( --wp--custom--radius--md, 8px ) - var( --wp--custom--stroke--hairline, 1px ) );
}

.wp-caption .wp-caption-text {
	margin: var( --wp--preset--spacing--20, 9px ) calc( -1 * var( --wp--preset--spacing--20, 9px ) ) calc( -1 * var( --wp--preset--spacing--20, 9px ) );
	padding: var( --wp--preset--spacing--10, 4px ) var( --wp--preset--spacing--30, 18px );
	border-top: var( --wp--custom--stroke--hairline, 1px ) solid var( --wp--custom--color--line--default, var( --wp--preset--color--border, #e2e8f0 ) );
	border-bottom-left-radius: calc( var( --wp--custom--radius--md, 8px ) - var( --wp--custom--stroke--hairline, 1px ) );
	border-bottom-right-radius: calc( var( --wp--custom--radius--md, 8px ) - var( --wp--custom--stroke--hairline, 1px ) );
	color: var( --wp--custom--color--text--muted, var( --wp--preset--color--muted, #64748b ) );
	font-size: var( --wp--preset--font-size--small, 0.875rem );
	line-height: 1.4;
	text-align: left;
}

figure.wp-caption[style] {
    width: 100% !important;
}

/* =========================================================
   Article summary
   ========================================================= */
.article-summary {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --wp--preset--spacing--30, 18px );
	background: var( --wp--custom--color--bg--subtle, var( --wp--preset--color--surface, #f8fafc ) );
	border: var( --wp--custom--stroke--default, 2px ) solid var( --wp--custom--color--line--default, var( --wp--preset--color--border, #e2e8f0 ) );
    border-radius: var( --wp--custom--radius--md, 8px);
	padding: var( --wp--preset--spacing--30, 18px );
}

.article-summary h2 {
    font-size: 2.1875rem;
}

@media all and (max-width: 1210px) {
    .article-summary h2 {
        font-size: 25px;
    }
}

.article-summary > * {
	margin: 0;
}

.article-summary ul,
.article-summary ol {
	display: grid;
	gap: var( --wp--preset--spacing--10, 4px );
}

.article-summary li {
	margin: 0;
}

.article-summary a,
.entry-content a[href*="/recommends/"]:not(.btn):not(.wp-block-button__link),
.tbv-custom-sidebar a[href*="/recommends/"]:not(.btn):not(.wp-block-button__link) {
	color: var( --wp--preset--color--primary, #ea580c );
}

.article-summary a:hover,
.article-summary a:focus,
.article-summary a:active,
.entry-content a[href*="/recommends/"]:not(.btn):not(.wp-block-button__link):hover,
.entry-content a[href*="/recommends/"]:not(.btn):not(.wp-block-button__link):focus,
.entry-content a[href*="/recommends/"]:not(.btn):not(.wp-block-button__link):active,
.tbv-custom-sidebar a[href*="/recommends/"]:not(.btn):not(.wp-block-button__link):hover,
.tbv-custom-sidebar a[href*="/recommends/"]:not(.btn):not(.wp-block-button__link):focus,
.tbv-custom-sidebar a[href*="/recommends/"]:not(.btn):not(.wp-block-button__link):active {
    color: var(--wp--preset--color--tertiary);
}

/* =========================================================
   Small print block (legacy `.small-block`) — compact text,
   e.g. disclaimers or affiliate notices, set off from the
   content above it.
   ========================================================= */
.small-block {
	font-size: var( --wp--preset--font-size--x-small, 0.75rem );
	line-height: 1.4;
	padding: var( --wp--preset--spacing--20, 9px ) 0;
	margin-top: var( --wp--preset--spacing--20, 9px );
}

/* =========================================================
   FAQ accordion
   ========================================================= */
h2:has(+ .tbv-expander),
h2:has(+ div .tbv-expander) {
    font-size: 2.1875rem;
}

.faq-accordion h2 {
	font-family: var( --wp--preset--font-family--roboto-slab );
	font-size: clamp( 1.5625rem, 1.2rem + 1.6vw, 2.1875rem );
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -1%;
	color: var( --wp--preset--color--secondary );
}

.faq-accordion details {
	margin-top: var( --wp--preset--spacing--30 );
}

.faq-accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 0 0 var( --wp--preset--spacing--10 );
	list-style: none;
	cursor: pointer;
	box-shadow: 0 var( --wp--custom--stroke--hairline ) var( --wp--preset--color--border );
	font-family: var( --wp--preset--font-family--ibm-plex-sans );
	font-weight: 600;
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.6;
	color: var( --wp--preset--color--info );
}

.faq-accordion summary::-webkit-details-marker {
	display: none;
}

.faq-accordion summary:hover,
.faq-accordion details[open] > summary {
	box-shadow: 0 var( --wp--custom--stroke--default ) var( --wp--preset--color--border );
}

.faq-accordion summary:hover {
	color: color-mix( in srgb, var( --wp--preset--color--info ) 80%, #000000 20% );
}

.faq-accordion summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	margin-right: 4px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 8px solid var( --wp--preset--color--info );
	transform-origin: center;
	transition: transform 250ms ease;
}

.faq-accordion details[open] > summary::after {
	border-left-color: #1a56db;
	transform: rotate( 90deg );
}

.faq-accordion details > :not(summary) {
	line-height: 1.6;
}

.faq-accordion details > :not(summary):first-child {
	margin-top: 0;
	padding-top: var( --wp--preset--spacing--10 );
}

.faq-accordion details > :not(summary):last-child {
	margin-bottom: 0;
}

.tbv-primary-nav .wp-block-navigation-item.tbv-nav-group {
	display: block;
	content: "";
	font-family: var( --wp--preset--font-family--ibm-plex-mono, monospace );
	font-size: var( --wp--preset--font-size--small, 0.875rem ); /* 14px */
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --wp--custom--color--light--text-disabled, #94a3b8 );
}
.tbv-primary-nav .wp-block-navigation-item.tbv-nav-group .wp-block-navigation-item__content {
    pointer-events: none;
}

.tbv-primary-nav .tbv-nav-group:not(:first-of-type) {
	margin-top: 6px;
	padding-top: var( --wp--preset--spacing--20, 9px );
	border-top: var( --wp--custom--stroke--hairline, 1px ) solid var( --wp--preset--color--border, #e2e8f0 );
}

/* "All VPN Reviews ›" — trailing chevron meaning "drill deeper". */
.tbv-primary-nav .tbv-nav-more .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tbv-primary-nav .tbv-nav-more .wp-block-navigation-item__content::after {
	content: "\203A"; /* › */
	margin-left: 12px;
	font-size: 1.2em;
	line-height: 1;
	opacity: 0.55;
}

/* "13 Step Review Process" — shield icon before the label. */
.tbv-primary-nav .submenu-item-13-step .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
}

.tbv-primary-nav .submenu-item-13-step .wp-block-navigation-item__content::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 24px;
	margin-right: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='24' viewBox='0 0 20 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.97 1.8811C15.5185 0.721732 12.9268 0.0309541 10.2008 0.00101451C7.47099 -0.0289251 4.71696 0.603943 0.921793 1.8815L1.38319e-05 2.19173V3.41551C-0.000376256 8.31142 -0.000376279 12.0598 1.17535 15.1798C1.32514 15.5771 1.49249 15.962 1.67934 16.3362L3.7199 14.2757C2.51718 11.1139 2.70117 7.48493 2.69669 4.16085C5.88996 3.13325 8.08733 2.7009 10.1716 2.72375C12.2418 2.7464 14.2913 3.21854 17.1974 4.16045C17.1974 6.1899 17.2297 8.22497 17.0235 10.2467L19.8871 7.41422C19.9125 5.67345 19.893 3.93206 19.893 2.19114L18.97 1.8811Z' fill='%23334155'/%3E%3Cpath d='M8.63441 8.89002C8.67704 7.75629 9.06073 6.90958 9.77126 6.33554C10.4818 5.77585 11.4339 5.48883 12.6276 5.48883C13.8071 5.48883 14.745 5.74715 15.4555 6.26378C16.166 6.78042 16.5213 7.46927 16.5213 8.33033C16.5213 8.83261 16.3934 9.24879 16.1376 9.57886C15.8818 9.90894 15.5408 10.1099 15.1144 10.1816C15.6544 10.3108 16.0666 10.5691 16.365 10.9422C16.6634 11.3297 16.8197 11.8033 16.8197 12.3773C16.8197 12.8365 16.7345 13.2527 16.5781 13.6258C16.4076 13.999 16.1944 14.3147 15.9244 14.5587C15.6544 14.817 15.3418 15.0179 14.9723 15.1901C14.6029 15.3623 14.2334 15.4771 13.8497 15.5489C13.4518 15.635 13.0539 15.6637 12.6418 15.6637C11.3771 15.6637 10.3397 15.3623 9.54389 14.7596C8.74809 14.1568 8.3502 13.2527 8.3502 12.0472C8.3502 11.9468 8.3502 11.8607 8.36441 11.7746H11.036V11.9181C11.036 12.8509 11.5192 13.3101 12.5139 13.3101C12.9544 13.3101 13.2955 13.224 13.5513 13.0375C13.7929 12.8652 13.9208 12.6069 13.9208 12.2625C13.9208 11.5737 13.4092 11.2149 12.386 11.2149C12.3718 11.2149 12.3434 11.2292 12.3007 11.2292C12.2581 11.2292 12.2013 11.2292 12.1302 11.2292H11.775V9.37795C11.8886 9.3923 12.045 9.3923 12.2439 9.3923C12.5992 9.3923 12.8407 9.3923 12.9829 9.37795C13.2529 9.3636 13.466 9.27749 13.6365 9.13398C13.8071 8.99047 13.8923 8.80391 13.8923 8.5743C13.8923 8.31598 13.7786 8.10071 13.5513 7.9285C13.3239 7.77064 13.0113 7.68453 12.6276 7.68453C11.7465 7.68453 11.2918 8.08636 11.2918 8.89002H8.63441Z' fill='%23334155'/%3E%3Cpath d='M7.96939 5.58906L7.95517 15.5343H4.99937V9.83695H2.69725V7.74171H2.96725C3.69199 7.74171 4.30305 7.55514 4.81463 7.16767C5.32621 6.78019 5.582 6.2492 5.61042 5.58906H7.96939Z' fill='%23334155'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.21906 24L19.7958 14.108L20 10.1092L9.21906 19.998L4.92497 16.0979L2.88587 17.9956L9.21906 24Z' fill='%23334155'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Mobile overlay: the submenu is an inline list, not a floating card, so undo
   the desktop dropdown chrome there. */
@media ( max-width: 781px ) {
	.tbv-primary-nav .wp-block-navigation__submenu-container {
		min-width: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
}

/* =========================================================
   Search modal — opened by .tbv-search-toggle via assets/js/tbv-ui.js.
   Markup printed in functions.php → thebestvpn_search_modal().
   ========================================================= */
.tbv-search-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.tbv-search-modal[hidden] {
	display: none;
}

.tbv-search-modal.is-open {
	opacity: 1;
}

.tbv-search-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--secondary);
    opacity: 0.7;
}

.tbv-search-modal__panel {
	position: relative;
	width: min( 640px, 92vw );
    margin: var(--wp--preset--spacing--30) 0;
	transform: translateY( -10px );
	transition: transform 0.2s ease;
}

.tbv-search-modal.is-open .tbv-search-modal__panel {
	transform: translateY( 0 );
}

.tbv-search-modal__close {
	position: absolute;
	top: 0;
	left: 100%;
	display: inline-flex;
	color: var( --wp--preset--color--base );
	background: transparent;
	border: 0;
	cursor: pointer;
	border-radius: var( --wp--custom--radius--md, 8px );
}

.tbv-search-modal__form-container {
    box-shadow: 0 var(--wp--preset--spacing--10) 13.5px rgba(0,0,0,0.25);
    display: flex;
    flex-flow: column;
    gap: var(--wp--preset--spacing--10);
}

.tbv-search-modal__form {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	background: var( --wp--preset--color--light );
	border: 1px solid var( --wp--preset--color--border );
	border-radius: var( --wp--custom--radius--sm );
}

.tbv-search-modal__form-icon {
	display: inline-flex;
	color: var( --wp--preset--color--muted );
}

.tbv-search-modal__form-icon svg {
    width: 16px;
    height: 16px;
}

.tbv-search-modal__form input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var( --wp--preset--font-size--medium, 1.125rem );
	color: var( --wp--custom--color--text--heading, var( --wp--preset--color--secondary, #0f172a ) );
	outline: none;
}

.tbv-search-modal__list {
    border-top: var(--wp--custom--stroke--default) solid var(--wp--preset--color--border);
    background: var(--wp--preset--color--base, #fff);
	list-style: none;
	margin: 0;
	padding: var(--wp--preset--spacing--20) 0;
    display: grid;
    gap: var(--wp--preset--spacing--10);
}

.tbv-search-modal__list a {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	color: var( --wp--custom--color--text--body, var( --wp--preset--color--contrast, #334155 ) );
	text-decoration: none;
    font-size: var(--wp--preset--font-size--medium);
}

.tbv-search-modal__list a:hover {
	background: var( --wp--custom--color--bg--muted, var( --wp--preset--color--light, #f1f5f9 ) );
}

.tbv-search-modal__list a svg {
	flex: 0 0 auto;
	color: var( --wp--custom--color--dark--text-muted );
}

@media ( max-width: 599px ) {
	/* Drop the panel below the (dimmed) header — matches the mobile design where
	   the search opens from inside the menu. --tbv-header-h is set by tbv-ui.js. */
	.tbv-search-modal__panel {
		width: 100%;
		margin-top: var( --tbv-header-h, 96px );
		max-height: calc( 100% - var( --tbv-header-h, 96px ) );
		overflow-y: auto;
		border-radius: 0;
		padding: var( --wp--preset--spacing--40, 27px );
	}
}

/* =========================================================
   Mobile header
   ========================================================= */
@media ( max-width: 1210px ) {
	.tbv-menu-toggle {
		display: inline-flex;
	}

	.tbv-logo-icon {
		display: inline-flex;
	}

	.tbv-logo-full,
	.tbv-primary-nav,
	.tbv-header-actions > .tbv-search-toggle,
	.tbv-deal-day {
		display: none;
	}

	.tbv-deal-cta .wp-block-button__link {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* ---- The drop-down panel ---- */
	.tbv-mobile-menu {
        max-width: 100%;
		display: block;
		position: fixed;
        margin-top: -1px;
		left: 0;
		right: 0;
		top: var( --tbv-header-h, 96px );
		bottom: 0;
		z-index: 900;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: var( --wp--preset--color--surface );
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.tbv-mobile-menu[hidden] {
		display: none;
	}

	.tbv-mobile-menu.is-open {
		opacity: 1;
	}

	.tbv-mobile-menu__inner {
		padding: var( --wp--preset--spacing--30 );
        display: flex;
        flex-flow: column;
        gap: var(--wp--preset--spacing--30);
	}

	/* Search box — looks like an input, opens the search modal. */
    .tbv-search-toggle {
        display: none;
    }
	.tbv-mobile-search {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: auto;
		flex: 1 1 auto;
		gap: 12px;
		padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
		font-size: var( --wp--preset--font-size--medium, 1.125rem );
        line-height: 1.6;
		color: var( --wp--custom--color--dark--text-muted );
		text-align: left;
		background: var( --wp--preset--color--light );
		border: var(--wp--custom--stroke--hairline) solid var( --wp--preset--color--border );
		border-radius: var( --wp--custom--radius--sm );
		cursor: pointer;
	}

	.tbv-mobile-search:hover,
	.tbv-mobile-search:focus-visible {
		color: var( --wp--custom--color--text--muted, var( --wp--preset--color--muted, #64748b ) );
		border-color: var( --wp--preset--color--primary, #ea580c );
	}

    .tbv-search-modal__form-container {
        flex-flow: column-reverse;
    }

    .tbv-search-modal__close {
        top: calc(-1 * var(--wp--preset--spacing--10));
        left: auto;
        right: var(--wp--preset--spacing--30);
    }

	/* ---- Mobile nav (native <details> for expand) ---- */
	.tbv-mobile-nav {
		display: flex;
		flex-direction: column;
	}

    .tbv-mobile-nav__item > summary {
        padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
        margin: 0 calc(var(--wp--preset--spacing--30) * -1);
    }

    .tbv-mobile-nav__item > summary:hover {
        background: var(--wp--preset--color--border);
    }

	.tbv-mobile-nav__link,
	.tbv-mobile-nav__item > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		font-family: var( --wp--preset--font-family--ibm-plex-sans, sans-serif );
		font-weight: 600;
		font-size: var( --wp--preset--font-size--large, 1.375rem );
		color: var( --wp--preset--color--secondary, #0f172a );
		text-decoration: none;
		cursor: pointer;
		list-style: none;
	}

	.tbv-mobile-nav__item > summary::-webkit-details-marker {
		display: none;
	}

	/* Solid triangle on expandable items: points right when closed,
	   rotates to point down when the item is open. */
	.tbv-mobile-nav__item > summary::after {
		content: "";
		flex: 0 0 auto;
		width: 0;
		height: 0;
		margin-right: 4px;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 8px solid currentColor;
		transform-origin: center;
		transition: transform 0.2s ease;
	}

	.tbv-mobile-nav__item[open] > summary {
		text-decoration: underline;
	}

	.tbv-mobile-nav__item[open] > summary::after {
		transform: rotate( 90deg );
	}

	.tbv-mobile-nav__sub {
		padding: 0;
	}

    .tbv-mobile-nav__sub .tbv-mobile-nav__group,
    .tbv-mobile-nav__sub a {
        padding-left: var(--wp--preset--spacing--30);
        padding-right: var(--wp--preset--spacing--30);
    }

	.tbv-mobile-nav__group {
		margin: var( --wp--preset--spacing--20, 9px ) 0 4px;
		font-family: var( --wp--preset--font-family--ibm-plex-mono, monospace );
		font-size: var( --wp--preset--font-size--x-small, 0.75rem );
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var( --wp--custom--color--text--muted, var( --wp--preset--color--muted, #64748b ) );
	}
    .tbv-mobile-nav__group:not(:first-of-type) {
        padding-top: var( --wp--preset--spacing--20, 9px );
	    border-top: var( --wp--custom--stroke--hairline, 1px ) solid var( --wp--preset--color--border, #e2e8f0 );
    }

	.tbv-mobile-nav__sub a {
		display: block;
		padding-top: var(--wp--preset--spacing--10);
		padding-bottom: var(--wp--preset--spacing--10);
		font-size: var( --wp--preset--font-size--medium, 1.125rem );
		color: var( --wp--custom--color--text--body, var( --wp--preset--color--contrast, #334155 ) );
		text-decoration: none;
	}

    .tbv-mobile-nav__sub a:hover {
        background: var(--wp--preset--color--light);
    }

	/* "13 Step Review Process" — shield icon, mirrors the desktop dropdown. */
	.tbv-mobile-nav__sub a.submenu-item-13-step {
		display: flex;
		align-items: center;
	}

	.tbv-mobile-nav__sub a.submenu-item-13-step::before {
		content: "";
		flex: 0 0 auto;
		width: 16px;
		height: 19px;
		margin-right: 8px;
		background-image: url("data:image/svg+xml,%3Csvg width='20' height='24' viewBox='0 0 20 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.97 1.8811C15.5185 0.721732 12.9268 0.0309541 10.2008 0.00101451C7.47099 -0.0289251 4.71696 0.603943 0.921793 1.8815L1.38319e-05 2.19173V3.41551C-0.000376256 8.31142 -0.000376279 12.0598 1.17535 15.1798C1.32514 15.5771 1.49249 15.962 1.67934 16.3362L3.7199 14.2757C2.51718 11.1139 2.70117 7.48493 2.69669 4.16085C5.88996 3.13325 8.08733 2.7009 10.1716 2.72375C12.2418 2.7464 14.2913 3.21854 17.1974 4.16045C17.1974 6.1899 17.2297 8.22497 17.0235 10.2467L19.8871 7.41422C19.9125 5.67345 19.893 3.93206 19.893 2.19114L18.97 1.8811Z' fill='%23334155'/%3E%3Cpath d='M8.63441 8.89002C8.67704 7.75629 9.06073 6.90958 9.77126 6.33554C10.4818 5.77585 11.4339 5.48883 12.6276 5.48883C13.8071 5.48883 14.745 5.74715 15.4555 6.26378C16.166 6.78042 16.5213 7.46927 16.5213 8.33033C16.5213 8.83261 16.3934 9.24879 16.1376 9.57886C15.8818 9.90894 15.5408 10.1099 15.1144 10.1816C15.6544 10.3108 16.0666 10.5691 16.365 10.9422C16.6634 11.3297 16.8197 11.8033 16.8197 12.3773C16.8197 12.8365 16.7345 13.2527 16.5781 13.6258C16.4076 13.999 16.1944 14.3147 15.9244 14.5587C15.6544 14.817 15.3418 15.0179 14.9723 15.1901C14.6029 15.3623 14.2334 15.4771 13.8497 15.5489C13.4518 15.635 13.0539 15.6637 12.6418 15.6637C11.3771 15.6637 10.3397 15.3623 9.54389 14.7596C8.74809 14.1568 8.3502 13.2527 8.3502 12.0472C8.3502 11.9468 8.3502 11.8607 8.36441 11.7746H11.036V11.9181C11.036 12.8509 11.5192 13.3101 12.5139 13.3101C12.9544 13.3101 13.2955 13.224 13.5513 13.0375C13.7929 12.8652 13.9208 12.6069 13.9208 12.2625C13.9208 11.5737 13.4092 11.2149 12.386 11.2149C12.3718 11.2149 12.3434 11.2292 12.3007 11.2292C12.2581 11.2292 12.2013 11.2292 12.1302 11.2292H11.775V9.37795C11.8886 9.3923 12.045 9.3923 12.2439 9.3923C12.5992 9.3923 12.8407 9.3923 12.9829 9.37795C13.2529 9.3636 13.466 9.27749 13.6365 9.13398C13.8071 8.99047 13.8923 8.80391 13.8923 8.5743C13.8923 8.31598 13.7786 8.10071 13.5513 7.9285C13.3239 7.77064 13.0113 7.68453 12.6276 7.68453C11.7465 7.68453 11.2918 8.08636 11.2918 8.89002H8.63441Z' fill='%23334155'/%3E%3Cpath d='M7.96939 5.58906L7.95517 15.5343H4.99937V9.83695H2.69725V7.74171H2.96725C3.69199 7.74171 4.30305 7.55514 4.81463 7.16767C5.32621 6.78019 5.582 6.2492 5.61042 5.58906H7.96939Z' fill='%23334155'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.21906 24L19.7958 14.108L20 10.1092L9.21906 19.998L4.92497 16.0979L2.88587 17.9956L9.21906 24Z' fill='%23334155'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}

	.tbv-mobile-nav__more::after {
		content: " \203A";
		color: var( --wp--custom--color--text--muted, var( --wp--preset--color--muted, #64748b ) );
	}
}

@media all and (max-width: 589px) {
    .tbv-mobile-nav__item > summary:hover {
        background: transparent;
    }
}

/* =========================================================
   Tables
   ========================================================= */
.wp-block-table,
.tbv-classic-table-wrap {
	margin-block: var( --wp--preset--spacing--50, 36px );
	overflow-x: auto;
	contain: inline-size;
	max-width: 100%;
    -webkit-overflow-scrolling: touch;
	border: var(--wp--custom--stroke--default) solid var( --wp--custom--color--line--default, var( --wp--preset--color--border, #e2e8f0 ) );
	border-radius: var( --wp--custom--radius--md );
}

.wp-block-table > table,
.entry-content table:not(.wp-block-table *) {
	border-spacing: 0;
	font-size: var( --wp--preset--font-size--small, 0.875rem );
	color: var( --wp--custom--color--text--body, var( --wp--preset--color--contrast, #334155 ) );
    width: max-content;
	min-width: 100%;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.entry-content table:not(.wp-block-table *):not(.tbv-classic-table-wrap *) {
	border: var(--wp--custom--stroke--default) solid var( --wp--custom--color--line--default, var( --wp--preset--color--border, #e2e8f0 ) );
	border-radius: var( --wp--custom--radius--md );
    border-collapse: separate !important;
    overflow: hidden;
    width: 100% !important;
}

.entry-content table:not(.wp-block-table *):not(.tbv-classic-table-wrap *) tr:first-child th:first-child {
    border-top-left-radius: var(--wp--custom--radius--md);
}
.entry-content table:not(.wp-block-table *):not(.tbv-classic-table-wrap *) tr:last-child td:first-child {
    border-bottom-left-radius: var(--wp--custom--radius--md);
}

.wp-block-table thead {
    border-bottom: var(--wp--custom--stroke--hairline) solid var(--wp--preset--color--border);
}

.wp-block-table th,
.wp-block-table td,
.entry-content table:not(.wp-block-table *) th,
.entry-content table:not(.wp-block-table *) td {
    max-width: 220px;
	padding: var(--wp--preset--spacing--20);
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
	border-bottom: 1px solid var( --wp--custom--color--line--default, var( --wp--preset--color--border, #e2e8f0 ) );
	border-right: 1px solid var( --wp--custom--color--line--default, var( --wp--preset--color--border, #e2e8f0 ) );
    border-top: none;
    border-left: none;
    box-sizing: border-box;
}

/* First-column accent + sticky positioning is opt-in: block tables via the
   "Sticky first column" block style (adds .is-style-tbv-sticky to
   .wp-block-table), classic tables via a manual .tbv-sticky class on the
   <table> itself. Tables without either class keep the plain cell look. */
.wp-block-table.is-style-tbv-sticky tr > :first-child,
.entry-content table.tbv-sticky:not(.wp-block-table *) tr > :first-child {
    width: 160px;
    font-family: var(--wp--preset--font-family--ibm-plex-mono);
    font-size: var(--wp--preset--font-size--small);
    letter-spacing: 2%;
    color: var(--wp--preset--color--muted);
	position: sticky;
	left: 0;
	z-index: 1;
	white-space: normal;
	background: var( --wp--preset--color--surface );
}

.wp-block-table.is-style-tbv-sticky thead tr > :first-child,
.entry-content table.tbv-sticky:not(.wp-block-table *) thead tr > :first-child {
	z-index: 2;
}

.wp-block-table tr > *:last-child,
.entry-content table:not(.wp-block-table *) tr > *:last-child {
	border-right: 0;
}

.wp-block-table tbody tr:last-child > *,
.entry-content table:not(.wp-block-table *) tbody tr:last-child > * {
	border-bottom: 0;
}

.wp-block-table thead th,
.wp-block-table tfoot td,
.entry-content table:not(.wp-block-table *) thead th,
.entry-content table:not(.wp-block-table *) tfoot td {
	font-weight: 600;
	color: var( --wp--custom--color--text--heading, var( --wp--preset--color--secondary, #0f172a ) );
}

.wp-block-table a,
.entry-content table:not(.wp-block-table *) a {
	color: var( --wp--custom--color--link--affiliate, var( --wp--preset--color--primary, #ea580c ) );
}

.wp-block-table a:hover,
.entry-content table:not(.wp-block-table *) a:hover,
.wp-block-table a:focus,
.entry-content table:not(.wp-block-table *) a:focus,
.wp-block-table a:active,
.entry-content table:not(.wp-block-table *) a:active {
    color: var(--wp--preset--color--tertiary);
}

.wp-block-table figcaption,
.entry-content table:not(.wp-block-table *) figcaption {
	margin-top: var( --wp--preset--spacing--20, 9px );
	font-size: var( --wp--preset--font-size--small, 0.875rem );
	color: var( --wp--custom--color--text--muted, var( --wp--preset--color--muted, #64748b ) );
	text-align: left;
}

@media all and (max-width: 589px) {
    .wp-block-table.is-style-tbv-sticky tr > :first-child,
    .entry-content table.tbv-sticky:not(.wp-block-table *) tr > :first-child {
        width: 120px;
    }
    .wp-block-table th,
    .wp-block-table td,
    .entry-content table:not(.wp-block-table *) th,
    .entry-content table:not(.wp-block-table *) td {
        border-right: none;
    }
    .wp-block-table th,
    .wp-block-table td,
    .entry-content table:not(.wp-block-table *) th,
    .entry-content table:not(.wp-block-table *) td {
        max-width: 140px;
    }
}

/* =========================================================
   Legacy grid fallback (.row / .col-1 .. .col-9)
   Converted from the old Sass partial (clearfix() + respond(md)
   + column-width() mixins, which no longer exist in this repo's
   build). Values are taken straight from tbvpnlite/sass's
   variables-site/_columns.scss ($columns map, $columns__margin:
   3.8%) and variables-site/_structure.scss ($screen-md-min: 768px)
   — column-width(n) = map-get($columns, n) - (($columns__margin *
   (n - 1)) / n). Kept only so legacy markup still renders
   correctly; do not use for new markup.
   ========================================================= */

.row {
	content: "";
	display: table;
	table-layout: fixed;
	width: 100%;
}

@media ( min-width: 768px ) {
	.col-1 {
		width: 100%;
		float: left;
		margin-right: 3.8%;
	}
	.col-2 {
		width: 48.1%;
		float: left;
		margin-right: 3.8%;
	}
	.col-3 {
		width: 30.7967%;
		float: left;
		margin-right: 3.8%;
	}
	.col-4 {
		width: 22.15%;
		float: left;
		margin-right: 3.8%;
	}
	.col-5 {
		width: 16.96%;
		float: left;
		margin-right: 3.8%;
	}
	.col-6 {
		width: 13.4933%;
		float: left;
		margin-right: 3.8%;
	}
	.col-7 {
		width: 11.0229%;
		float: left;
		margin-right: 3.8%;
	}
	.col-8 {
		width: 9.175%;
		float: left;
		margin-right: 3.8%;
	}
	.col-9 {
		width: 7.7322%;
		float: left;
		margin-right: 3.8%;
	}
	.col-1:last-of-type,
	.col-2:last-of-type,
	.col-3:last-of-type,
	.col-4:last-of-type,
	.col-5:last-of-type,
	.col-6:last-of-type,
	.col-7:last-of-type,
	.col-8:last-of-type,
	.col-9:last-of-type {
		margin-right: 0;
	}
}

@media all and (max-width: 384px) {
    .wp-block-table th,
    .wp-block-table td,
    .entry-content table:not(.wp-block-table *) th,
    .entry-content table:not(.wp-block-table *) td {
        max-width: 130px;
    }
}

/* -----------------------------------------------------------------------------
   Latest Posts (AJAX) — page-latest.php template
   -------------------------------------------------------------------------- */
.latest-posts .post-item {
    padding-bottom: var(--wp--preset--spacing--30);
    margin-bottom: var(--wp--preset--spacing--30);
    border-bottom: var(--wp--custom--stroke--hairline) solid var(--wp--preset--color--border);
}
.latest-posts .post-item:last-child {
    border-bottom: 0;
}
.latest-posts .post-item h2 {
    margin: 0 0 var(--wp--preset--spacing--10);
}
.latest-posts .post-item h2 a {
    text-decoration: none;
}
.latest-posts .post-item h2 a:hover {
    text-decoration: underline;
}
.latest-posts .post-meta {
    margin: 0 0 var(--wp--preset--spacing--20);
    color: var(--wp--preset--color--muted);
    font-size: var(--wp--preset--font-size--small);
}
.latest-posts .post-meta .type-label {
    margin-left: 4px;
}

@media all and (max-width: 1210px) {
    :root {
        --wp--preset--font-size--x-small: 14px;
        --wp--preset--font-size--small: 14px;
        --wp--preset--font-size--medium: 18px;
        --wp--preset--font-size--large: 21px;
    }
    body {
        background-color: var(--wp--preset--color--base) !important;
    }
    h1 {
        font-size: 36px;
        line-height: 1.15;
    }
    h2 {
        font-size: 30px;
    }
    h3 {
        font-size: 25px;
        line-height: 1.25;
    }
    h2:has(+ .tbv-expander),
    h2:has(+ div .tbv-expander) {
        font-size: 25px;
    }
    h4 {
        font-size: 21px;
        line-height: 1.4;
    }
    h5 {
        font-size: 19px;
    }
}